diff --git a/backend/controllers/shop/sub-controllers/adminController.js b/backend/controllers/shop/sub-controllers/adminController.js
new file mode 100644
index 00000000..61f9054d
--- /dev/null
+++ b/backend/controllers/shop/sub-controllers/adminController.js
@@ -0,0 +1,44 @@
+const Payment = require("../models/payment");
+const Invoice = require("../models/invoice");
+
+// Admin view all payments
+const adminViewPayments = async (req, res) => {
+  try {
+    const payments = await Payment.find()
+      .populate("orderId")
+      .populate("userId");
+    res.status(200).json(payments);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Admin view all invoices
+const adminViewInvoices = async (req, res) => {
+  try {
+    const invoices = await Invoice.find()
+      .populate("orderId")
+      .populate("userId");
+    res.status(200).json(invoices);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Admin filter/sort payments
+const adminFilterPayments = async (req, res) => {
+  const { status, startDate, endDate } = req.query;
+  const filters = {};
+  if (status) filters.paymentStatus = status;
+  if (startDate && endDate)
+    filters.paymentDate = { $gte: startDate, $lte: endDate };
+
+  try {
+    const payments = await Payment.find(filters);
+    res.status(200).json(payments);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+module.exports = { adminViewPayments, adminViewInvoices, adminFilterPayments };
diff --git a/backend/controllers/shop/sub-controllers/invoiceController.js b/backend/controllers/shop/sub-controllers/invoiceController.js
new file mode 100644
index 00000000..41cc8388
--- /dev/null
+++ b/backend/controllers/shop/sub-controllers/invoiceController.js
@@ -0,0 +1,217 @@
+const Invoice = require("../models/invoice");
+const Joi = require("joi");
+
+// Validation Schemas
+const invoiceSchema = Joi.object({
+  orderId: Joi.string().required(),
+  userId: Joi.string().required(),
+  amount: Joi.number().min(0).required(),
+  dueDate: Joi.date().required(),
+  paymentId: Joi.string().optional(),
+});
+
+const statusUpdateSchema = Joi.object({
+  status: Joi.string()
+    .valid("Paid", "Unpaid", "Overdue", "Cancelled")
+    .required(),
+});
+
+// Generate invoice after payment confirmation
+const generateInvoice = async (req, res) => {
+  const { error, value } = invoiceSchema.validate(req.body);
+  if (error) return res.status(400).json({ message: error.message });
+
+  const { orderId, userId, amount, dueDate, paymentId } = value;
+
+  const newInvoice = new Invoice({
+    invoiceId: `INV${Date.now()}`,
+    orderId,
+    userId,
+    amount,
+    dueDate,
+    paymentId,
+  });
+
+  try {
+    const invoice = await newInvoice.save();
+    res.status(201).json(invoice);
+  } catch (error) {
+    console.error(`Error generating invoice: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Retrieve invoices by user, order, status, or date range with pagination
+const getInvoices = async (req, res) => {
+  const {
+    userId,
+    orderId,
+    status,
+    startDate,
+    endDate,
+    page = 1,
+    limit = 10,
+    sortBy = "invoiceDate",
+    order = "desc",
+  } = req.query;
+
+  try {
+    const filters = {};
+    if (userId) filters.userId = userId;
+    if (orderId) filters.orderId = orderId;
+    if (status) filters.status = status;
+
+    if (startDate || endDate) {
+      filters.invoiceDate = {};
+      if (startDate) filters.invoiceDate.$gte = new Date(startDate);
+      if (endDate) filters.invoiceDate.$lte = new Date(endDate);
+    }
+
+    const invoices = await Invoice.find(filters)
+      .sort({ [sortBy]: order === "asc" ? 1 : -1 })
+      .skip((page - 1) * limit)
+      .limit(Number(limit));
+
+    res.status(200).json(invoices);
+  } catch (error) {
+    console.error(`Error fetching invoices: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Retrieve a single invoice by ID
+const getInvoiceById = async (req, res) => {
+  try {
+    const invoice = await Invoice.findById(req.params.id);
+    if (!invoice) return res.status(404).json({ message: "Invoice not found" });
+    res.status(200).json(invoice);
+  } catch (error) {
+    console.error(`Error fetching invoice by ID: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Update invoice status with validation
+const updateInvoiceStatus = async (req, res) => {
+  const { error, value } = statusUpdateSchema.validate(req.body);
+  if (error) return res.status(400).json({ message: error.message });
+
+  try {
+    const invoice = await Invoice.findByIdAndUpdate(
+      req.params.id,
+      { status: value.status },
+      { new: true }
+    );
+    if (!invoice) return res.status(404).json({ message: "Invoice not found" });
+    res.status(200).json(invoice);
+  } catch (error) {
+    console.error(`Error updating invoice status: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Delete an invoice by ID
+const deleteInvoice = async (req, res) => {
+  try {
+    const invoice = await Invoice.findByIdAndDelete(req.params.id);
+    if (!invoice) return res.status(404).json({ message: "Invoice not found" });
+    res.status(200).json({ message: "Invoice deleted successfully" });
+  } catch (error) {
+    console.error(`Error deleting invoice: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Mark overdue invoices
+const markOverdueInvoices = async (req, res) => {
+  try {
+    const overdueInvoices = await Invoice.updateMany(
+      { dueDate: { $lt: new Date() }, status: "Unpaid" },
+      { status: "Overdue" }
+    );
+    res
+      .status(200)
+      .json({
+        message: `${overdueInvoices.nModified} invoices marked as overdue`,
+      });
+  } catch (error) {
+    console.error(`Error marking overdue invoices: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Summary of invoices by status
+const invoiceSummary = async (req, res) => {
+  const { userId } = req.query;
+
+  try {
+    const match = userId ? { userId } : {};
+
+    const summary = await Invoice.aggregate([
+      { $match: match },
+      {
+        $group: {
+          _id: "$status",
+          totalAmount: { $sum: "$amount" },
+          count: { $sum: 1 },
+        },
+      },
+    ]);
+
+    const summaryData = summary.reduce((acc, item) => {
+      acc[item._id] = { totalAmount: item.totalAmount, count: item.count };
+      return acc;
+    }, {});
+
+    res.status(200).json(summaryData);
+  } catch (error) {
+    console.error(`Error generating invoice summary: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+// Bulk invoice generation
+const generateBulkInvoices = async (req, res) => {
+  const { invoices } = req.body;
+
+  if (!Array.isArray(invoices) || invoices.length === 0) {
+    return res.status(400).json({ message: "Invalid invoices data" });
+  }
+
+  const validationErrors = invoices
+    .map((invoiceData, index) => {
+      const { error } = invoiceSchema.validate(invoiceData);
+      return error ? { index, message: error.message } : null;
+    })
+    .filter(Boolean);
+
+  if (validationErrors.length > 0) {
+    return res
+      .status(400)
+      .json({ message: "Validation errors", errors: validationErrors });
+  }
+
+  try {
+    const invoiceDocuments = invoices.map((invoiceData) => ({
+      ...invoiceData,
+      invoiceId: `INV${Date.now() + Math.floor(Math.random() * 1000)}`,
+    }));
+
+    const createdInvoices = await Invoice.insertMany(invoiceDocuments);
+    res.status(201).json(createdInvoices);
+  } catch (error) {
+    console.error(`Error generating bulk invoices: ${error.message}`);
+    res.status(500).json({ message: "Internal server error" });
+  }
+};
+
+module.exports = {
+  generateInvoice,
+  getInvoices,
+  getInvoiceById,
+  updateInvoiceStatus,
+  deleteInvoice,
+  markOverdueInvoices,
+  invoiceSummary,
+  generateBulkInvoices,
+};
diff --git a/backend/controllers/shop/sub-controllers/paymentController.js b/backend/controllers/shop/sub-controllers/paymentController.js
new file mode 100644
index 00000000..0bc6569d
--- /dev/null
+++ b/backend/controllers/shop/sub-controllers/paymentController.js
@@ -0,0 +1,161 @@
+const Payment = require("../models/payment");
+
+// Retrieve all payments
+const getAllPayments = async (req, res) => {
+  try {
+    const payments = await Payment.find();
+    res.status(200).json(payments);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Retrieve payment by ID
+const getPaymentById = async (req, res) => {
+  try {
+    const payment = await Payment.findById(req.params.id);
+    if (!payment) return res.status(404).json({ message: "Payment not found" });
+    res.status(200).json(payment);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Create a new payment
+const createPayment = async (req, res) => {
+  const { orderId, userId, amount, paymentMethod, transactionId } = req.body;
+
+  const newPayment = new Payment({
+    paymentId: `PAY${Date.now()}`,
+    orderId,
+    userId,
+    amount,
+    paymentMethod,
+    transactionId,
+  });
+
+  try {
+    const payment = await newPayment.save();
+    res.status(201).json(payment);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// Update payment status
+const updatePaymentStatus = async (req, res) => {
+  const { paymentStatus } = req.body;
+  try {
+    const payment = await Payment.findByIdAndUpdate(
+      req.params.id,
+      { paymentStatus },
+      { new: true }
+    );
+    if (!payment) return res.status(404).json({ message: "Payment not found" });
+    res.status(200).json(payment);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+const Payment = require("../models/payment");
+
+// Update Payment Method
+const updatePaymentMethod = async (req, res) => {
+  const { paymentMethod } = req.body;
+  try {
+    if (!["Credit Card", "PayPal", "Bank Transfer"].includes(paymentMethod)) {
+      return res.status(400).json({ message: "Invalid payment method" });
+    }
+    const payment = await Payment.findByIdAndUpdate(
+      req.params.id,
+      { paymentMethod },
+      { new: true }
+    );
+    if (!payment) return res.status(404).json({ message: "Payment not found" });
+    res.status(200).json(payment);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Retrieve Payments by Date Range
+const getPaymentsByDateRange = async (req, res) => {
+  const { startDate, endDate } = req.query;
+  try {
+    const payments = await Payment.find({
+      paymentDate: {
+        $gte: new Date(startDate),
+        $lte: new Date(endDate),
+      },
+    });
+    if (!payments.length)
+      return res
+        .status(404)
+        .json({ message: "No payments found in this date range" });
+    res.status(200).json(payments);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Retrieve Payments by Amount Range
+const getPaymentsByAmountRange = async (req, res) => {
+  const { minAmount, maxAmount } = req.query;
+  try {
+    const payments = await Payment.find({
+      amount: { $gte: minAmount, $lte: maxAmount },
+    });
+    if (!payments.length)
+      return res
+        .status(404)
+        .json({ message: "No payments found in this amount range" });
+    res.status(200).json(payments);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Retrieve Payment by Transaction ID
+const getPaymentByTransactionId = async (req, res) => {
+  try {
+    const payment = await Payment.findOne({
+      transactionId: req.params.transactionId,
+    });
+    if (!payment)
+      return res
+        .status(404)
+        .json({ message: "Payment not found with this transaction ID" });
+    res.status(200).json(payment);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+// Count Payments by Status
+const countPaymentsByStatus = async (req, res) => {
+  try {
+    const counts = await Payment.aggregate([
+      {
+        $group: {
+          _id: "$paymentStatus",
+          count: { $sum: 1 },
+        },
+      },
+    ]);
+    res.status(200).json(counts);
+  } catch (error) {
+    res.status(500).json({ message: error.message });
+  }
+};
+
+module.exports = {
+  getAllPayments,
+  getPaymentById,
+  createPayment,
+  updatePaymentStatus,
+  updatePaymentMethod,
+  getPaymentsByDateRange,
+  getPaymentsByAmountRange,
+  getPaymentByTransactionId,
+  countPaymentsByStatus,
+};
diff --git a/backend/controllers/shop/sub-controllers/supplierController.js b/backend/controllers/shop/sub-controllers/supplierController.js
new file mode 100644
index 00000000..c088b5b5
--- /dev/null
+++ b/backend/controllers/shop/sub-controllers/supplierController.js
@@ -0,0 +1,176 @@
+const Supplier = require("../models/Supplier");
+
+exports.createSupplier = async (req, res) => {
+  try {
+    const { name, contactInfo, address, productsSupplied, status } = req.body;
+    const supplier = new Supplier({
+      name,
+      contactInfo,
+      address,
+      productsSupplied,
+      status,
+    });
+    await supplier.save();
+    res.status(201).json(supplier);
+  } catch (err) {
+    res.status(500).json({ message: "Error creating supplier", error: err });
+  }
+};
+
+// Get all Suppliers with pagination and sorting
+exports.getAllSuppliers = async (req, res) => {
+  try {
+    const { page = 1, limit = 10, sort = "createdAt" } = req.query;
+    const suppliers = await Supplier.find()
+      .sort(sort)
+      .skip((page - 1) * limit)
+      .limit(Number(limit));
+    res.json(suppliers);
+  } catch (err) {
+    res.status(500).json({ message: "Error fetching suppliers", error: err });
+  }
+};
+
+// Get a Supplier by ID
+exports.getSupplierById = async (req, res) => {
+  try {
+    const supplier = await Supplier.findById(req.params.id);
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+    res.json(supplier);
+  } catch (err) {
+    res.status(500).json({ message: "Error fetching supplier", error: err });
+  }
+};
+
+// Update a Supplier
+exports.updateSupplier = async (req, res) => {
+  try {
+    const { name, contactInfo, address, productsSupplied, status } = req.body;
+    const supplier = await Supplier.findByIdAndUpdate(
+      req.params.id,
+      {
+        name,
+        contactInfo,
+        address,
+        productsSupplied,
+        status,
+        updatedAt: Date.now(),
+      },
+      { new: true }
+    );
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+    res.json(supplier);
+  } catch (err) {
+    res.status(500).json({ message: "Error updating supplier", error: err });
+  }
+};
+
+// Soft delete a Supplier (set status to inactive)
+exports.deleteSupplier = async (req, res) => {
+  try {
+    const supplier = await Supplier.findByIdAndUpdate(
+      req.params.id,
+      { status: "inactive" },
+      { new: true }
+    );
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+    res.json(supplier);
+  } catch (err) {
+    res.status(500).json({ message: "Error deleting supplier", error: err });
+  }
+};
+
+const Supplier = require("../models/Supplier");
+const Product = require("../models/Product"); // Assuming there's a Product model
+
+// Add a product to a supplier
+exports.addProductToSupplier = async (req, res) => {
+  try {
+    const { productId } = req.body;
+    const supplier = await Supplier.findById(req.params.id);
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+
+    supplier.productsSupplied.push(productId);
+    await supplier.save();
+
+    res.status(200).json(supplier);
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Error adding product to supplier", error: err });
+  }
+};
+
+// Remove a product from a supplier
+exports.removeProductFromSupplier = async (req, res) => {
+  try {
+    const { productId } = req.body;
+    const supplier = await Supplier.findById(req.params.id);
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+
+    supplier.productsSupplied = supplier.productsSupplied.filter(
+      (product) => product.toString() !== productId
+    );
+    await supplier.save();
+
+    res.status(200).json(supplier);
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Error removing product from supplier", error: err });
+  }
+};
+
+// Get all products supplied by a supplier
+exports.getProductsSupplied = async (req, res) => {
+  try {
+    const supplier = await Supplier.findById(req.params.id).populate(
+      "productsSupplied"
+    );
+    if (!supplier) {
+      return res.status(404).json({ message: "Supplier not found" });
+    }
+    res.json(supplier.productsSupplied);
+  } catch (err) {
+    res.status(500).json({ message: "Error fetching products", error: err });
+  }
+};
+
+exports.searchSuppliers = async (req, res) => {
+  try {
+    const { name, status, email, phone } = req.query;
+    const query = {};
+
+    if (name) query.name = { $regex: name, $options: "i" };
+    if (status) query.status = status;
+    if (email) query["contactInfo.email"] = email;
+    if (phone) query["contactInfo.phone"] = phone;
+
+    const suppliers = await Supplier.find(query);
+    res.json(suppliers);
+  } catch (err) {
+    res.status(500).json({ message: "Error searching suppliers", error: err });
+  }
+};
+
+exports.getSuppliersByStatus = async (req, res) => {
+  try {
+    const { status } = req.params;
+    const suppliers = await Supplier.find({ status });
+    res.json(suppliers);
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Error fetching suppliers by status", error: err });
+  }
+};
diff --git a/backend/middleware/sub-ware/authSupplierMiddleware.js b/backend/middleware/sub-ware/authSupplierMiddleware.js
new file mode 100644
index 00000000..adce51f9
--- /dev/null
+++ b/backend/middleware/sub-ware/authSupplierMiddleware.js
@@ -0,0 +1,10 @@
+const isAdmin = (req, res, next) => {
+  // Assuming user object is attached to request after authentication
+  if (req.user && req.user.role === "admin") {
+    next();
+  } else {
+    return res.status(403).json({ message: "Access forbidden: Admins only" });
+  }
+};
+
+module.exports = isAdmin;
diff --git a/backend/middleware/sub-ware/validatePaymentInvoice.js b/backend/middleware/sub-ware/validatePaymentInvoice.js
new file mode 100644
index 00000000..e208773e
--- /dev/null
+++ b/backend/middleware/sub-ware/validatePaymentInvoice.js
@@ -0,0 +1,25 @@
+const validatePaymentData = (req, res, next) => {
+  const { orderId, userId, amount, paymentMethod, transactionId } = req.body;
+
+  if (!orderId || !userId || !amount || !paymentMethod || !transactionId) {
+    return res
+      .status(400)
+      .json({ message: "All fields are required for payment" });
+  }
+
+  next();
+};
+
+const validateInvoiceData = (req, res, next) => {
+  const { orderId, userId, amount, dueDate, paymentId } = req.body;
+
+  if (!orderId || !userId || !amount || !dueDate || !paymentId) {
+    return res
+      .status(400)
+      .json({ message: "All fields are required for invoice" });
+  }
+
+  next();
+};
+
+module.exports = { validatePaymentData, validateInvoiceData };
diff --git a/backend/middleware/sub-ware/validationMiddleware.js b/backend/middleware/sub-ware/validationMiddleware.js
new file mode 100644
index 00000000..c569037d
--- /dev/null
+++ b/backend/middleware/sub-ware/validationMiddleware.js
@@ -0,0 +1,28 @@
+const Joi = require('joi');
+
+// Validation schema for supplier data
+const supplierValidationSchema = Joi.object({
+  name: Joi.string().required(),
+  contactInfo: Joi.object({
+    email: Joi.string().email().required(),
+    phone: Joi.string().required(),
+  }).required(),
+  address: Joi.object({
+    street: Joi.string().required(),
+    city: Joi.string().required(),
+    state: Joi.string().required(),
+    postalCode: Joi.string().required(),
+  }).required(),
+  productsSupplied: Joi.array().items(Joi.string()).required(),
+  status: Joi.string().valid('active', 'inactive').default('active'),
+});
+
+const validateSupplierData = (req, res, next) => {
+  const { error } = supplierValidationSchema.validate(req.body);
+  if (error) {
+    return res.status(400).json({ message: 'Validation Error', details: error.details });
+  }
+  next();
+};
+
+module.exports = validateSupplierData;
diff --git a/backend/model/shop/sub-model/Supplier.js b/backend/model/shop/sub-model/Supplier.js
new file mode 100644
index 00000000..7d466d78
--- /dev/null
+++ b/backend/model/shop/sub-model/Supplier.js
@@ -0,0 +1,58 @@
+const mongoose = require("mongoose");
+
+const supplierSchema = new mongoose.Schema(
+  {
+    name: {
+      type: String,
+      required: true,
+    },
+    contactInfo: {
+      email: {
+        type: String,
+        required: true,
+        unique: true,
+      },
+      phone: {
+        type: String,
+        required: true,
+      },
+    },
+    address: {
+      street: {
+        type: String,
+        required: true,
+      },
+      city: {
+        type: String,
+        required: true,
+      },
+      state: {
+        type: String,
+        required: true,
+      },
+      postalCode: {
+        type: String,
+        required: true,
+      },
+    },
+    productsSupplied: [
+      { type: mongoose.Schema.Types.ObjectId, ref: "Product" },
+    ],
+    status: {
+      type: String,
+      required: true,
+      default: "active",
+    },
+    createdAt: {
+      type: Date,
+      default: Date.now,
+    },
+    updatedAt: {
+      type: Date,
+      default: Date.now,
+    },
+  },
+  { timestamps: true }
+);
+
+module.exports = mongoose.model("Supplier", supplierSchema);
diff --git a/backend/model/shop/sub-model/invoice.js b/backend/model/shop/sub-model/invoice.js
new file mode 100644
index 00000000..5ea2f010
--- /dev/null
+++ b/backend/model/shop/sub-model/invoice.js
@@ -0,0 +1,47 @@
+const mongoose = require("mongoose");
+
+
+const invoiceSchema = new mongoose.Schema(
+  {
+    invoiceId: { type: String, required: true, unique: true },
+    orderId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "Order",
+      required: true,
+    },
+    userId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+      index: true, // Adds index for faster query on user invoices
+    },
+    amount: { type: Number, required: true, min: 0 },
+    invoiceDate: { type: Date, default: Date.now },
+    dueDate: {
+      type: Date,
+      required: true,
+      default: function () {
+        return new Date(+new Date() + 7 * 24 * 60 * 60 * 1000); // Default due date is 7 days from invoice date
+      },
+    },
+    status: {
+      type: String,
+      enum: ["Paid", "Unpaid", "Overdue", "Cancelled"],
+      default: "Unpaid",
+    },
+    paymentId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "Payment",
+      sparse: true, // Allows null value indexing for unpaid invoices
+    },
+  },
+  { timestamps: true }
+);
+
+// Virtual field to check if invoice is overdue
+invoiceSchema.virtual("isOverdue").get(function () {
+  return this.status === "Unpaid" && this.dueDate < new Date();
+});
+
+const Invoice = mongoose.model("Invoice", invoiceSchema);
+module.exports = Invoice;
diff --git a/backend/model/shop/sub-model/payment.js b/backend/model/shop/sub-model/payment.js
new file mode 100644
index 00000000..44182dd7
--- /dev/null
+++ b/backend/model/shop/sub-model/payment.js
@@ -0,0 +1,34 @@
+const mongoose = require("mongoose");
+
+const paymentSchema = new mongoose.Schema(
+  {
+    paymentId: { type: String, required: true, unique: true },
+    orderId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "Order",
+      required: true,
+    },
+    userId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+    },
+    amount: { type: Number, required: true },
+    paymentMethod: {
+      type: String,
+      enum: ["Credit Card", "PayPal", "Bank Transfer"],
+      required: true,
+    },
+    paymentStatus: {
+      type: String,
+      default: "Pending",
+      enum: ["Pending", "Completed", "Failed"],
+    },
+    paymentDate: { type: Date, default: Date.now },
+    transactionId: { type: String, required: true },
+  },
+  { timestamps: true }
+);
+
+const Payment = mongoose.model("Payment", paymentSchema);
+module.exports = Payment;
diff --git a/backend/routes/sub-routes/invoiceRoutes.js b/backend/routes/sub-routes/invoiceRoutes.js
new file mode 100644
index 00000000..a6f30c3d
--- /dev/null
+++ b/backend/routes/sub-routes/invoiceRoutes.js
@@ -0,0 +1,39 @@
+const express = require("express");
+const router = express.Router();
+
+const {
+  generateInvoice,
+  getInvoices,
+  getInvoiceById,
+  updateInvoiceStatus,
+  deleteInvoice,
+  markOverdueInvoices,
+  invoiceSummary,
+  generateBulkInvoices,
+} = require("../controllers/invoiceController");
+
+// Route to generate a new invoice after payment confirmation
+router.post("/generate", generateInvoice);
+
+// Route to retrieve invoices by user, order, status, or date range with pagination and sorting
+router.get("/", getInvoices);
+
+// Route to retrieve a specific invoice by its ID
+router.get("/:id", getInvoiceById);
+
+// Route to update an invoice's status
+router.patch("/:id/status", updateInvoiceStatus);
+
+// Route to delete an invoice by its ID
+router.delete("/:id", deleteInvoice);
+
+// Route to mark overdue invoices (based on the current date)
+router.patch("/mark-overdue", markOverdueInvoices);
+
+// Route to get an invoice summary (by status, optionally by user)
+router.get("/summary", invoiceSummary);
+
+// Route to generate bulk invoices at once
+router.post("/generate-bulk", generateBulkInvoices);
+
+module.exports = router;
diff --git a/backend/routes/sub-routes/paymentRoutes.js b/backend/routes/sub-routes/paymentRoutes.js
new file mode 100644
index 00000000..47c456df
--- /dev/null
+++ b/backend/routes/sub-routes/paymentRoutes.js
@@ -0,0 +1,34 @@
+const express = require("express");
+const router = express.Router();
+const {
+  getAllPayments,
+  getPaymentById,
+  getPaymentsByUserId,
+  getPaymentsByStatus,
+  createPayment,
+  updatePaymentStatus,
+  deletePayment,
+  updatePaymentMethod,
+  getPaymentsByDateRange,
+  getPaymentsByAmountRange,
+  getPaymentByTransactionId,
+  countPaymentsByStatus,
+} = require("../controllers/paymentController");
+
+// Payment routes
+router.get("/", getAllPayments); // Retrieve all payments
+router.get("/:id", getPaymentById); // Retrieve payment by ID
+router.get("/user/:userId", getPaymentsByUserId); // Retrieve payments by User ID
+router.get("/status/:status", getPaymentsByStatus); // Retrieve payments by Status
+router.post("/", createPayment); // Create a new payment
+router.patch("/:id/status", updatePaymentStatus); // Update payment status
+router.patch("/:id/method", updatePaymentMethod); // Update payment method
+router.delete("/:id", deletePayment); // Delete payment
+
+// Additional routes for edge cases
+router.get("/date-range", getPaymentsByDateRange); // Retrieve payments by date range
+router.get("/amount-range", getPaymentsByAmountRange); // Retrieve payments by amount range
+router.get("/transaction/:transactionId", getPaymentByTransactionId); // Retrieve payment by transaction ID
+router.get("/count/status", countPaymentsByStatus); // Count payments by status
+
+module.exports = router;
diff --git a/backend/routes/sub-routes/supplierRoutes.js b/backend/routes/sub-routes/supplierRoutes.js
new file mode 100644
index 00000000..b0fd6295
--- /dev/null
+++ b/backend/routes/sub-routes/supplierRoutes.js
@@ -0,0 +1,50 @@
+const express = require("express");
+const router = express.Router();
+const supplierController = require("../controllers/supplierController");
+const productController = require("../controllers/productController");
+const supplierSearchController = require("../controllers/supplierSearchController");
+const supplierFilterController = require("../controllers/supplierFilterController");
+const validateSupplierData = require("../middlewares/validationMiddleware");
+const isAdmin = require("../middlewares/authMiddleware");
+
+// Routes for suppliers
+router.post(
+  "/api/suppliers",
+  isAdmin,
+  validateSupplierData,
+  supplierController.createSupplier
+); // Admin only
+router.get("/api/suppliers", supplierController.getAllSuppliers);
+router.get("/api/suppliers/:id", supplierController.getSupplierById);
+router.put(
+  "/api/suppliers/:id",
+  isAdmin,
+  validateSupplierData,
+  supplierController.updateSupplier
+); // Admin only
+router.delete("/api/suppliers/:id", isAdmin, supplierController.deleteSupplier); // Admin only
+
+// Routes for managing products supplied by a supplier
+router.post(
+  "/api/suppliers/:id/products",
+  isAdmin,
+  productController.addProductToSupplier
+); // Admin only
+router.delete(
+  "/api/suppliers/:id/products",
+  isAdmin,
+  productController.removeProductFromSupplier
+); // Admin only
+router.get(
+  "/api/suppliers/:id/products",
+  productController.getProductsSupplied
+);
+
+// Routes for searching and filtering suppliers
+router.get("/api/suppliers/search", supplierSearchController.searchSuppliers);
+router.get(
+  "/api/suppliers/status/:status",
+  supplierFilterController.getSuppliersByStatus
+);
+
+module.exports = router;
diff --git a/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx b/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx
index c35d0fc1..61dbc155 100644
--- a/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx
+++ b/frontend/src/AgroShopAI/components/Pages/Admin-Dashboard.jsx
@@ -5,6 +5,7 @@ import { DashboardStats } from "./components/DashboardStats";
 import { useState } from "react";
 import StatisticComponent from "./components/StatisticComponent";
 import ReturnPanel from "./components/ReturnPage";
+import AdminProductManagement from "./ProductManagement";
 export default function AdminDashboard() {
   const [activeView, setActiveView] = useState("dashboard"); // Track active view
 
@@ -23,6 +24,7 @@ export default function AdminDashboard() {
         {activeView === "grievances" && <GrievanceList />}
         {activeView === "analytics" && <StatisticComponent />}
         {activeView === "return" && <ReturnPanel/>}
+        {activeView === "product" && <AdminProductManagement/>}
       </main>
     </div>
   );
diff --git a/frontend/src/AgroShopAI/components/Pages/Affiliate.jsx b/frontend/src/AgroShopAI/components/Pages/Affiliate.jsx
new file mode 100644
index 00000000..1ea85323
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/Affiliate.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import AffiliateHeader from './components/AffiliateHeader';
+import AffiliateJoinSection from './components/AffiliateJoinSection';
+import AffiliateDashboard from './components/AffiliateDashboard';
+import AffiliateMarketingMaterials from './components/AffiliateMarketingMaterials';
+import AffiliateTerms from './components/AffiliateTerms';
+
+
+export default function AffiliateProgramPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [dateRange, setDateRange] = useState('last7days');
+
+  const dummyData = {
+    clicks: 1250,
+    signUps: 75,
+    conversions: 30,
+    commissions: 450.0,
+  };
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    setIsLoggedIn(true);
+  };
+
+  return (
+    <div className="min-h-screen bg-green-100 mt-20 ">
+      <AffiliateHeader />
+      <main className="container mx-auto px-4 py-8">
+        <AffiliateJoinSection />
+        <AffiliateDashboard
+          isLoggedIn={isLoggedIn}
+          handleLogin={handleLogin}
+          dateRange={dateRange}
+          setDateRange={setDateRange}
+          dummyData={dummyData}
+        />
+        <AffiliateMarketingMaterials />
+        <AffiliateTerms />
+      </main>
+
+    </div>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/ProductForm.jsx b/frontend/src/AgroShopAI/components/Pages/ProductForm.jsx
new file mode 100644
index 00000000..492e78d2
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/ProductForm.jsx
@@ -0,0 +1,202 @@
+// ProductForm.js
+import React, { useState } from 'react'
+
+export default function ProductForm({ selectedProduct, isCreating, isEditing, handleSubmit }) {
+  const [product, setProduct] = useState(selectedProduct)
+  const [errors, setErrors] = useState({})
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setProduct(prev => ({
+      ...prev,
+      [name]: name === 'price' || name === 'stockQuantity' ? parseFloat(value) : value
+    }))
+    setErrors(prev => ({ ...prev, [name]: '' }))
+  }
+
+  const handleImageUpload = (e) => {
+    if (e.target.files) {
+      const newImages = Array.from(e.target.files).map(file => URL.createObjectURL(file))
+      setProduct(prev => ({
+        ...prev,
+        images: [...prev.images, ...newImages]
+      }))
+    }
+  }
+
+  const removeImage = (index) => {
+    const newImages = product.images.filter((_, i) => i !== index)
+    setProduct(prev => ({
+      ...prev,
+      images: newImages
+    }))
+  }
+
+  const validateForm = () => {
+    const newErrors = {}
+    if (!product.name) newErrors.name = 'Product name is required'
+    if (!product.category) newErrors.category = 'Category is required'
+    if (product.price <= 0) newErrors.price = 'Price must be greater than 0'
+    if (!product.description) newErrors.description = 'Description is required'
+    if (!product.sku) newErrors.sku = 'SKU is required'
+    if (product.stockQuantity < 0) newErrors.stockQuantity = 'Stock quantity cannot be negative'
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const onSubmit = (e) => {
+    e.preventDefault()
+    if (!validateForm()) return
+    handleSubmit(product)
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+              <h2 className="text-2xl font-semibold mb-6 text-green-700">
+                {isCreating ? 'Create New Product' : 'Edit Product'}
+              </h2>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-gray-700">Product Name</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={selectedProduct.name}
+                    onChange={handleInputChange}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  />
+                  {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="category" className="block text-sm font-medium text-gray-700">Category</label>
+                  <select
+                    id="category"
+                    name="category"
+                    value={selectedProduct.category}
+                    onChange={handleInputChange}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  >
+                    <option value="">Select a category</option>
+                    <option value="fruits">Fruits</option>
+                    <option value="vegetables">Vegetables</option>
+                    <option value="grains">Grains</option>
+                    <option value="dairy">Dairy</option>
+                  </select>
+                  {errors.category && <p className="mt-1 text-sm text-red-600">{errors.category}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="price" className="block text-sm font-medium text-gray-700">Price</label>
+                  <input
+                    type="number"
+                    id="price"
+                    name="price"
+                    value={selectedProduct.price}
+                    onChange={handleInputChange}
+                    min="0"
+                    step="0.01"
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  />
+                  {errors.price && <p className="mt-1 text-sm text-red-600">{errors.price}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
+                  <textarea
+                    id="description"
+                    name="description"
+                    value={selectedProduct.description}
+                    onChange={handleInputChange}
+                    rows={4}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  ></textarea>
+                  {errors.description && <p className="mt-1 text-sm text-red-600">{errors.description}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="sku" className="block text-sm font-medium text-gray-700">SKU</label>
+                  <input
+                    type="text"
+                    id="sku"
+                    name="sku"
+                    value={selectedProduct.sku}
+                    onChange={handleInputChange}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  />
+                  {errors.sku && <p className="mt-1 text-sm text-red-600">{errors.sku}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="stockQuantity" className="block text-sm font-medium text-gray-700">Stock Quantity</label>
+                  <input
+                    type="number"
+                    id="stockQuantity"
+                    name="stockQuantity"
+                    value={selectedProduct.stockQuantity}
+                    onChange={handleInputChange}
+                    min="0"
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50"
+                  />
+                  {errors.stockQuantity && <p className="mt-1 text-sm text-red-600">{errors.stockQuantity}</p>}
+                </div>
+
+                <div>
+                  <label htmlFor="images" className="block text-sm font-medium text-gray-700">Product Images</label>
+                  <input
+                    type="file"
+                    id="images"
+                    name="images"
+                    onChange={handleImageUpload}
+                    multiple
+                    accept="image/*"
+                    className="mt-1 block w-full text-sm text-gray-500
+                      file:mr-4 file:py-2 file:px-4
+                      file:rounded-full file:border-0
+                      file:text-sm file:font-semibold
+                      file:bg-green-50 file:text-green-700
+                      hover:file:bg-green-100"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+                  {selectedProduct.images.map((image, index) => (
+                    <div key={index} className="relative">
+                      <Image src={image} alt={`Product ${index + 1}`} width={150} height={150} className="w-full h-32 object-cover rounded-lg shadow-md" />
+                      <button
+                        type="button"
+                        onClick={() => removeImage(index)}
+                        className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 text-xs hover:bg-red-600 transition transform hover:scale-110"
+                        aria-label="Remove image"
+                      >
+                        &times;
+                      </button>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex justify-end space-x-4 mt-6">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsEditing(false)
+                      setIsCreating(false)
+                      setSelectedProduct(null)
+                    }}
+                    className="px-4 py-2 border border-gray-300 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition transform hover:scale-105"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 border border-transparent rounded-full shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition transform hover:scale-105"
+                  >
+                    {isCreating ? 'Create Product' : 'Update Product'}
+                  </button>
+                </div>
+              </form>
+            </div>
+  )
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/ProductList.jsx b/frontend/src/AgroShopAI/components/Pages/ProductList.jsx
new file mode 100644
index 00000000..aec40dcc
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/ProductList.jsx
@@ -0,0 +1,39 @@
+// ProductList.js
+import React from 'react'
+
+export default function ProductList({ products, handleSelectProduct, handleCreateNewProduct }) {
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-semibold text-green-700">Product List</h2>
+        <button
+          onClick={handleCreateNewProduct}
+          className="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition transform hover:scale-105"
+        >
+          + Add New Product
+        </button>
+      </div>
+      <div className="overflow-y-auto max-h-[calc(100vh-300px)]">
+        <ul className="space-y-4">
+          {products.map(product => (
+            <li key={product.id} className="flex items-center justify-between p-4 hover:bg-green-100 rounded-lg transition">
+              <div className="flex items-center space-x-4">
+                <img src={product.images[0]} alt={product.name} width={50} height={50} className="rounded-full" />
+                <div>
+                  <h3 className="font-semibold">{product.name}</h3>
+                  <p className="text-sm text-gray-500">${product.price.toFixed(2)} - Stock: {product.stockQuantity}</p>
+                </div>
+              </div>
+              <button
+                onClick={() => handleSelectProduct(product)}
+                className="px-3 py-1 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition transform hover:scale-105"
+              >
+                Edit
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/ProductManagement.jsx b/frontend/src/AgroShopAI/components/Pages/ProductManagement.jsx
new file mode 100644
index 00000000..c00dc2c0
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/ProductManagement.jsx
@@ -0,0 +1,114 @@
+// AdminProductManagement.js
+import React, { useState } from 'react'
+import ProductList from './ProductList'
+import ProductForm from './ProductForm'
+
+const dummyProducts = [
+  {
+    id: '1',
+    name: 'Organic Apples',
+    category: 'fruits',
+    price: 2.99,
+    description: 'Fresh, juicy organic apples from local farms.',
+    sku: 'APP001',
+    stockQuantity: 100,
+    images: ['/placeholder.svg?height=150&width=150', '/placeholder.svg?height=150&width=150']
+  },
+  {
+    id: '2',
+    name: 'Farm Fresh Eggs',
+    category: 'dairy',
+    price: 4.50,
+    description: 'Free-range eggs from happy chickens.',
+    sku: 'EGG002',
+    stockQuantity: 50,
+    images: ['/placeholder.svg?height=150&width=150']
+  },
+  {
+    id: '3',
+    name: 'Organic Carrots',
+    category: 'vegetables',
+    price: 1.99,
+    description: 'Crunchy and sweet organic carrots.',
+    sku: 'CAR003',
+    stockQuantity: 200,
+    images: ['/placeholder.svg?height=150&width=150']
+  }
+]
+
+export default function AdminProductManagement() {
+  const [products, setProducts] = useState(dummyProducts)
+  const [selectedProduct, setSelectedProduct] = useState(null)
+  const [isEditing, setIsEditing] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
+
+  const handleSelectProduct = (product) => {
+    setSelectedProduct(product)
+    setIsEditing(true)
+    setIsCreating(false)
+  }
+
+  const handleCreateNewProduct = () => {
+    setSelectedProduct({
+      id: `NEW${Date.now()}`,  // Generate new unique ID
+      name: '',
+      category: '',
+      price: 0,
+      description: '',
+      sku: '',
+      stockQuantity: 0,
+      images: []
+    })
+    setIsCreating(true)
+    setIsEditing(false)
+  }
+
+  const handleSubmit = (product) => {
+    if (isCreating) {
+      setProducts([...products, product])
+    } else {
+      const updatedProducts = products.map(p =>
+        p.id === product.id ? product : p
+      )
+      setProducts(updatedProducts)
+    }
+    setIsEditing(false)
+    setIsCreating(false)
+    setSelectedProduct(null)
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="max-w-7xl mx-auto p-6">
+        <header className="bg-white rounded-lg shadow-lg p-6 mb-8">
+          <h1 className="text-4xl font-bold text-green-800 mb-2">AgroShop Admin</h1>
+          <p className="text-xl text-gray-600">Product Management Dashboard</p>
+        </header>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Product List */}
+          <ProductList 
+            products={products}
+            handleSelectProduct={handleSelectProduct}
+            handleCreateNewProduct={handleCreateNewProduct}
+          />
+
+          {/* Product Edit/Create Form */}
+          {(isEditing || isCreating) && selectedProduct && (
+            <ProductForm
+              selectedProduct={selectedProduct}
+              isCreating={isCreating}
+              isEditing={isEditing}
+              handleSubmit={handleSubmit}
+            />
+          )}
+        </div>
+        {/* Flashy Banner */}
+        <div className="mt-12 bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 rounded-lg shadow-lg p-6 text-white">
+          <h2 className="text-3xl font-bold mb-2">Boost Your Agricultural Business!</h2>
+          <p className="text-xl">Manage your products efficiently with AgroShop's powerful admin tools.</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/Trending.jsx b/frontend/src/AgroShopAI/components/Pages/Trending.jsx
new file mode 100644
index 00000000..a3b34f2a
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/Trending.jsx
@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import Header from "./components/THeader";
+import Banner from "./components/Banner";
+import SearchAndSort from "./components/SearchAndSort";
+import ProductGrid from "./components/ProductGrid";
+
+export default function TrendingProductsPage() {
+  const [sortBy, setSortBy] = useState("trending");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Filtering products based on search term
+  const filteredProducts = trendingProducts.filter((product) =>
+    product.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Sorting products based on selected criteria
+  const sortedProducts = [...filteredProducts].sort((a, b) => {
+    if (sortBy === "price") return a.price - b.price;
+    if (sortBy === "rating") return b.rating - a.rating;
+    return 0;
+  });
+
+  // Simulate loading state
+  const fetchData = async () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 2000);
+  };
+
+  React.useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div className="bg-gray-100">
+      <Header />
+      <Banner />
+      <div className="container mx-auto px-4 py-12">
+        {/* Search and Sort Component */}
+        <SearchAndSort
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          sortBy={sortBy}
+          setSortBy={setSortBy}
+        />
+        {/* Loading state and Product Grid */}
+        {isLoading ? (
+          <div className="text-center py-12 text-xl text-gray-600">
+            Loading...
+          </div>
+        ) : (
+          <ProductGrid sortedProducts={sortedProducts} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const trendingProducts = [
+  {
+    id: 1,
+    name: "Smart Irrigation System",
+    price: 299.99,
+    rating: 4.8,
+    reviews: 120,
+    image:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTkXzsfqi9x6H46rC1Ir7k2WEQ1V0lVv8ONA&s",
+    tag: "Trending Now",
+  },
+  {
+    id: 2,
+    name: "Organic Fertilizer Pack",
+    price: 49.99,
+    rating: 4.5,
+    reviews: 85,
+    image: "https://m.media-amazon.com/images/I/91Y3l-BVm-L.jpg",
+    tag: "Hot Deal",
+  },
+  {
+    id: 3,
+    name: "Drone Crop Sprayer",
+    price: 1299.99,
+    rating: 4.9,
+    reviews: 200,
+    image:
+      "https://5.imimg.com/data5/ANDROID/Default/2022/4/AA/WY/ED/14166347/product-jpeg-500x500.jpg",
+    tag: "Top Rated",
+  },
+  {
+    id: 4,
+    name: "Soil pH Tester",
+    price: 29.99,
+    rating: 4.2,
+    reviews: 60,
+    image: "https://m.media-amazon.com/images/I/71933Pfn55L.jpg",
+    tag: "Trending Now",
+  },
+  {
+    id: 5,
+    name: "Hydroponic Growing Kit",
+    price: 199.99,
+    rating: 4.7,
+    reviews: 150,
+    image:
+      "https://m.media-amazon.com/images/I/81n3GQOCOQL._AC_UF1000,1000_QL80_.jpg",
+    tag: "Hot Deal",
+  },
+  {
+    id: 6,
+    name: "Weather Station",
+    price: 149.99,
+    rating: 4.6,
+    reviews: 95,
+    image:
+      "https://5.imimg.com/data5/YN/KT/YB/SELLER-5098190/weather-station.jpg",
+    tag: "Top Rated",
+  },
+];
diff --git a/frontend/src/AgroShopAI/components/Pages/components/AffiliateDashboard.jsx b/frontend/src/AgroShopAI/components/Pages/components/AffiliateDashboard.jsx
new file mode 100644
index 00000000..bb1bd40c
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/AffiliateDashboard.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+export default function AffiliateDashboard({
+  isLoggedIn,
+  handleLogin,
+  dateRange,
+  setDateRange,
+  dummyData,
+}) {
+  return (
+    <section className="mb-12">
+      <h2 className="text-2xl font-semibold text-green-800 mb-4">Referral Tracking Dashboard</h2>
+      {!isLoggedIn ? (
+        <form onSubmit={handleLogin} className="bg-white p-6 rounded-lg shadow-md">
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-green-700 mb-2">Email</label>
+            <input type="email" id="email" required className="w-full px-3 py-2 border border-green-300 rounded" />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="password" className="block text-green-700 mb-2">Password</label>
+            <input type="password" id="password" required className="w-full px-3 py-2 border border-green-300 rounded" />
+          </div>
+          <button type="submit" className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 transition-colors">
+            Log In
+          </button>
+        </form>
+      ) : (
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-xl font-semibold text-green-800">Your Performance</h3>
+            <select
+              value={dateRange}
+              onChange={(e) => setDateRange(e.target.value)}
+              className="px-3 py-2 border border-green-300 rounded"
+            >
+              <option value="last7days">Last 7 Days</option>
+              <option value="last30days">Last 30 Days</option>
+              <option value="lastMonth">Last Month</option>
+            </select>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Clicks</h4>
+              <p className="text-2xl text-green-600">{dummyData.clicks}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Sign-ups</h4>
+              <p className="text-2xl text-green-600">{dummyData.signUps}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Conversions</h4>
+              <p className="text-2xl text-green-600">{dummyData.conversions}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Commissions</h4>
+              <p className="text-2xl text-green-600">${dummyData.commissions.toFixed(2)}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/AffiliateHeader.jsx b/frontend/src/AgroShopAI/components/Pages/components/AffiliateHeader.jsx
new file mode 100644
index 00000000..7e01ec0b
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/AffiliateHeader.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+export default function AffiliateHeader() {
+  return (
+    <header className="bg-gradient-to-r from-green-700 to-green-900 text-white py-6 pt-10 shadow-md">
+      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between">
+        {/* Logo and Title */}
+        <div className="flex items-center space-x-4">
+          <img
+            src="https://i.pinimg.com/736x/70/4e/fb/704efbd2e3759663b0218421e2670962.jpg"
+            alt="AgroShop Logo"
+            className="w-12 h-12 rounded-full"
+          />
+          <div>
+            <h1 className="text-3xl font-extrabold tracking-wide">
+              AgroShop Affiliate Program
+            </h1>
+            <p className="text-green-200 text-sm">
+              Partner with us to grow together in sustainable agriculture
+            </p>
+          </div>
+        </div>
+
+        {/* Navigation Links */}
+        <nav className="mt-4 md:mt-0">
+          <ul className="flex space-x-6 font-medium text-lg">
+            <li>
+              <a href="#overview" className="hover:text-green-300 transition duration-300">
+                Overview
+              </a>
+            </li>
+            <li>
+              <a href="#materials" className="hover:text-green-300 transition duration-300">
+                Materials
+              </a>
+            </li>
+            <li>
+              <a href="#terms" className="hover:text-green-300 transition duration-300">
+                Terms
+              </a>
+            </li>
+            <li>
+              <a href="#contact" className="hover:text-green-300 transition duration-300">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        {/* Call to Action */}
+        <div className="mt-4 md:mt-0">
+          <a
+            href="#signup"
+            className="bg-white text-green-600 font-semibold py-2 px-6 rounded-full shadow-lg hover:bg-green-50 transition duration-300"
+          >
+            Join Now
+          </a>
+        </div>
+      </div>
+
+      {/* Subtext */}
+      <div className="container mx-auto px-6 mt-4 text-center text-green-200 text-sm md:text-base">
+        <p>Earn commissions, access exclusive materials, and help promote sustainable farming practices!</p>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/AffiliateJoinSection.jsx b/frontend/src/AgroShopAI/components/Pages/components/AffiliateJoinSection.jsx
new file mode 100644
index 00000000..14c49bb7
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/AffiliateJoinSection.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+export default function AffiliateJoinSection() {
+  return (
+    <section className="mb-12 px-6 py-8 bg-gradient-to-r from-green-50 to-green-100 shadow-md rounded-lg">
+      <div className="max-w-3xl mx-auto text-center">
+        <h2 className="text-3xl font-bold text-green-800 mb-6">Join Our Affiliate Program</h2>
+        <p className="text-green-700 mb-6 leading-relaxed">
+          Become a partner with AgroShop and earn commissions by promoting our high-quality agricultural products.
+          Our program offers competitive rates and simple tools to help you maximize your earnings while supporting
+          sustainable agriculture.
+        </p>
+      </div>
+
+      <div className="text-green-800 mb-6">
+        <h3 className="text-2xl font-semibold mb-4 text-center">How It Works</h3>
+        <ol className="list-decimal list-inside text-green-700 space-y-3">
+          <li>Sign up for our affiliate program with quick and easy registration.</li>
+          <li>Receive your unique referral link to track sales and commissions.</li>
+          <li>Promote AgroShop products through your website, blog, or social media.</li>
+          <li>Earn a commission on every sale made through your link.</li>
+        </ol>
+      </div>
+
+      <div className="text-green-800 mb-6">
+        <h3 className="text-2xl font-semibold mb-4 text-center">Program Benefits</h3>
+        <ul className="list-disc list-inside text-green-700 space-y-3">
+          <li>10% commission on all sales - one of the highest in the industry.</li>
+          <li>30-day cookie duration ensures you get credit for returning customers.</li>
+          <li>Monthly payouts directly to your account.</li>
+          <li>Access to exclusive promotions, materials, and early product launches.</li>
+          <li>Dedicated support to help you grow your audience and earnings.</li>
+        </ul>
+      </div>
+
+      <div className="text-center mt-8">
+        <button className="bg-green-600 text-white font-bold px-8 py-3 rounded-full hover:bg-green-700 transition duration-300 shadow-lg">
+          Join Now
+        </button>
+      </div>
+
+      <div className="mt-10 text-center text-green-600">
+        <p className="text-sm italic">
+          Have questions? <a href="#contact" className="text-green-700 font-semibold hover:underline">Contact us</a> for more information
+          about how the AgroShop Affiliate Program can work for you.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/AffiliateMarketingMaterials.jsx b/frontend/src/AgroShopAI/components/Pages/components/AffiliateMarketingMaterials.jsx
new file mode 100644
index 00000000..41599960
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/AffiliateMarketingMaterials.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+export default function AffiliateMarketingMaterials() {
+  return (
+    <section className="mb-12 px-6 py-8 bg-gradient-to-r from-green-50 to-green-100 shadow-lg rounded-lg">
+      <div className="max-w-3xl mx-auto text-center mb-8">
+        <h2 className="text-3xl font-bold text-green-800 mb-4">Marketing Materials</h2>
+        <p className="text-green-700 leading-relaxed">
+          Access a range of professional marketing tools designed to help you promote AgroShop and increase your earnings.
+          Use these assets to engage your audience and drive conversions.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Banners</h3>
+          <p className="text-green-700 mb-3">Choose from a variety of banners tailored to promote AgroShop products effectively.</p>
+          <img src="https://www.creativehatti.com/wp-content/uploads/edd/2021/06/Banner-for-high-quality-seeds-goodness-of-nature-15-large.jpg" alt="Banner Example" className="w-full h-32 object-cover rounded-md mb-4" />
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Banner
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Referral Link</h3>
+          <p className="text-green-700 mb-3">Use your unique referral link below to start earning commissions:</p>
+          <div className="flex items-center gap-2 mb-4">
+            <input
+              type="text"
+              readOnly
+              value="https://www.agroshop.com/referral?code=YOUR_CODE"
+              className="w-full px-3 py-2 border border-green-300 rounded text-gray-600"
+            />
+            <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors">
+              Copy
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Social Media Content</h3>
+          <p className="text-green-700 mb-3">Ready-to-post content for Facebook, Instagram, and Twitter.</p>
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Content Pack
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Email Templates</h3>
+          <p className="text-green-700 mb-3">Engage your subscribers with pre-written, customizable email templates.</p>
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Email Pack
+          </button>
+        </div>
+      </div>
+
+      <div className="text-center mt-8">
+        <p className="text-green-600 italic">Need custom materials? <a href="#contact" className="text-green-700 font-semibold hover:underline">Contact our support team</a> for assistance.</p>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/AffiliateTerms.jsx b/frontend/src/AgroShopAI/components/Pages/components/AffiliateTerms.jsx
new file mode 100644
index 00000000..0db6a2a1
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/AffiliateTerms.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default function AffiliateTerms() {
+  return (
+    <section className="mb-12">
+      <h2 className="text-2xl font-semibold text-green-800 mb-4">Terms and Conditions</h2>
+      <div className="bg-white p-6 rounded-lg shadow-md">
+        <p className="text-green-700 mb-4">
+          By joining the AgroShop Affiliate Program, you agree to the following terms and conditions:
+        </p>
+        <ul className="list-disc list-inside text-green-700 mb-4">
+          <li>You will earn a 10% commission on all qualifying sales.</li>
+          <li>AgroShop reserves the right to modify the commission rate and terms at any time.</li>
+          <li>Affiliate links have a 30-day cookie duration.</li>
+          <li>Payment is processed monthly, with a minimum payout threshold.</li>
+          <li>Affiliates must adhere to AgroShop’s branding guidelines.</li>
+        </ul>
+        <p className="text-green-700">
+          For any questions, please contact our affiliate support team.
+        </p>
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/Banner.jsx b/frontend/src/AgroShopAI/components/Pages/components/Banner.jsx
new file mode 100644
index 00000000..8c1d21e1
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/Banner.jsx
@@ -0,0 +1,37 @@
+export default function Banner() {
+  return (
+    <div className="bg-green-100 py-12 md:py-16">
+      <div className="container mx-auto px-6 md:px-12 text-center">
+        {/* Heading */}
+        <h2 className="text-4xl font-bold text-green-800 mb-4 leading-tight md:text-5xl">
+          Trending in AgroTech
+        </h2>
+
+        {/* Description */}
+        <p className="text-xl text-green-700 mb-6 md:text-2xl">
+          Discover the latest and most popular agricultural innovations! Stay
+          ahead with new technologies.
+        </p>
+
+        {/* Call to Action */}
+        <div className="flex justify-center space-x-4">
+          <button className="bg-green-500 text-white py-3 px-6 rounded-lg text-lg hover:bg-green-600 transition duration-300">
+            Learn More
+          </button>
+          <button className="bg-transparent border-2 border-green-500 text-green-500 py-3 px-6 rounded-lg text-lg hover:bg-green-50 transition duration-300">
+            Explore Products
+          </button>
+        </div>
+
+        {/* Image Section (Optional for added visual appeal) */}
+        <div className="mt-8">
+          <img
+            src="/assets/agriculture-banner.jpg"
+            alt="Agriculture Innovations"
+            className="mx-auto w-full h-[60vh] object-cover rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/Header.jsx b/frontend/src/AgroShopAI/components/Pages/components/Header.jsx
index e8f09a18..f41589d5 100644
--- a/frontend/src/AgroShopAI/components/Pages/components/Header.jsx
+++ b/frontend/src/AgroShopAI/components/Pages/components/Header.jsx
@@ -2,7 +2,7 @@
 export const Header = () => {
   return (
     <header className="flex justify-between items-center mb-8">
-      <h2 className="text-3xl font-bold text-gray-800">Grievance Redressal</h2>
+      <h2 className="text-3xl font-bold text-gray-800">Admin Dashboard</h2>
       <div className="flex items-center">
         <span className="mr-4">Welcome, Admin</span>
         <img
diff --git a/frontend/src/AgroShopAI/components/Pages/components/ProductGrid.jsx b/frontend/src/AgroShopAI/components/Pages/components/ProductGrid.jsx
new file mode 100644
index 00000000..32abf146
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/ProductGrid.jsx
@@ -0,0 +1,12 @@
+
+import ProductCard from "./TProductCard";
+
+export default function ProductGrid({ sortedProducts }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+      {sortedProducts.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/SearchAndSort.jsx b/frontend/src/AgroShopAI/components/Pages/components/SearchAndSort.jsx
new file mode 100644
index 00000000..7daa7f2f
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/SearchAndSort.jsx
@@ -0,0 +1,63 @@
+import { Search, ChevronDown } from "lucide-react";
+
+export default function SearchAndSort({
+  searchTerm,
+  setSearchTerm,
+  sortBy,
+  setSortBy,
+}) {
+  return (
+    <div className="flex flex-col md:flex-row justify-between items-center mb-8 px-4 md:px-8">
+      {/* Search Input */}
+      <div className="relative w-full md:w-72 mb-4 md:mb-0">
+        <label htmlFor="search" className="text-sm text-gray-600 mb-2 block">
+          Search Products
+        </label>
+        <input
+          id="search"
+          type="text"
+          placeholder="Search products..."
+          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 transition duration-200 ease-in-out"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          aria-label="Search products"
+        />
+        <Search className="absolute left-3 top-2.5 text-gray-400" size={20} />
+      </div>
+
+      {/* Sort By Dropdown */}
+      <div className="relative w-full md:w-56">
+        <label htmlFor="sortBy" className="text-sm text-gray-600 mb-2 block">
+          Sort By
+        </label>
+        <select
+          id="sortBy"
+          className="w-full appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-green-500 transition duration-200 ease-in-out"
+          value={sortBy}
+          onChange={(e) => setSortBy(e.target.value)}
+          aria-label="Sort products by"
+        >
+          <option value="trending">Trending Now</option>
+          <option value="price">Price: Low to High</option>
+          <option value="rating">Top Rated</option>
+          <option value="newest">Newest Arrivals</option>
+          <option value="discount">Discounted</option>
+        </select>
+        <ChevronDown
+          className="absolute right-3 top-2.5 text-gray-400 pointer-events-none"
+          size={20}
+        />
+      </div>
+
+      {/* Filter Button */}
+      <div className="w-full md:w-32 mt-4 md:mt-0">
+        <button
+          className="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition duration-200 ease-in-out"
+          onClick={() => alert("Filters Applied")}
+        >
+          Apply Filters
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/Sidebar.jsx b/frontend/src/AgroShopAI/components/Pages/components/Sidebar.jsx
index 92487471..368b45bf 100644
--- a/frontend/src/AgroShopAI/components/Pages/components/Sidebar.jsx
+++ b/frontend/src/AgroShopAI/components/Pages/components/Sidebar.jsx
@@ -5,7 +5,8 @@ import {
   Settings,
   Users,
   TrendingUp,
-  CornerDownLeft
+  CornerDownLeft,
+  FolderKanban
 } from "lucide-react";
 
 export const Sidebar = ({ onViewChange, activeView }) => {
@@ -83,6 +84,17 @@ export const Sidebar = ({ onViewChange, activeView }) => {
               <CornerDownLeft className="mr-2" /> Return
             </a>
           </li>
+          <li>
+            <a
+              href="#"
+              onClick={() => onViewChange("product")}
+              className={`flex items-center py-2 px-4 hover:bg-green-700 rounded ${
+                activeView === "product" ? "bg-green-700" : ""
+              }`}
+            >
+              <FolderKanban className="mr-2" /> Product Management
+            </a>
+          </li>
           <li>
             <a
               href="#"
diff --git a/frontend/src/AgroShopAI/components/Pages/components/THeader.jsx b/frontend/src/AgroShopAI/components/Pages/components/THeader.jsx
new file mode 100644
index 00000000..1e34520c
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/THeader.jsx
@@ -0,0 +1,32 @@
+export default function Header() {
+  return (
+    <header className="bg-green-600 text-white py-4 shadow-md">
+      <div className="container mx-auto flex justify-between items-center px-6">
+        {/* Logo and Title */}
+        <div className="flex items-center space-x-3">
+          <img
+            src="/assets/logo.png"
+            alt="AgroShop Logo"
+            className="w-8 h-8 object-cover rounded-full"
+          />
+          <h1 className="text-3xl font-bold">AgroShop</h1>
+        </div>
+
+        {/* Navigation Links */}
+        <nav className="hidden md:flex space-x-6 text-lg">
+          <a href="/" className="hover:text-green-300 transition duration-200 ease-in-out">Home</a>
+          <a href="/products" className="hover:text-green-300 transition duration-200 ease-in-out">Products</a>
+          <a href="/about" className="hover:text-green-300 transition duration-200 ease-in-out">About Us</a>
+          <a href="/contact" className="hover:text-green-300 transition duration-200 ease-in-out">Contact</a>
+        </nav>
+
+        {/* Mobile Menu Button */}
+        <div className="md:hidden flex items-center">
+          <button className="text-white text-2xl">
+            <i className="fa fa-bars"></i>
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/frontend/src/AgroShopAI/components/Pages/components/TProductCard.jsx b/frontend/src/AgroShopAI/components/Pages/components/TProductCard.jsx
new file mode 100644
index 00000000..c9d405a3
--- /dev/null
+++ b/frontend/src/AgroShopAI/components/Pages/components/TProductCard.jsx
@@ -0,0 +1,59 @@
+import { Star } from "lucide-react";
+
+export default function ProductCard({ product }) {
+  return (
+    <div className="bg-white rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
+      {/* Product Image and Tag */}
+      <div className="relative">
+        <img
+          src={product.image}
+          alt={product.name}
+          className="w-full h-48 object-cover transition duration-300 ease-in-out hover:opacity-80"
+        />
+        <span className="absolute top-2 right-2 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
+          {product.tag}
+        </span>
+      </div>
+
+      {/* Product Details */}
+      <div className="p-4 space-y-4">
+        <div className="flex justify-between items-center">
+          <h3 className="text-xl font-semibold text-gray-900 truncate">
+            {product.name}
+          </h3>
+          <span className="text-gray-500 text-sm">
+            {product.stock} in stock
+          </span>
+        </div>
+
+        {/* Rating and Reviews */}
+        <div className="flex items-center space-x-2">
+          <span className="text-yellow-500 flex items-center">
+            <Star className="fill-current" size={16} />
+            <span className="ml-1">{product.rating}</span>
+          </span>
+          <span className="text-gray-600 text-sm">
+            ({product.reviews} reviews)
+          </span>
+        </div>
+
+        {/* Price */}
+        <p className="text-green-600 font-bold text-2xl">
+          ${product.price.toFixed(2)}
+        </p>
+
+        {/* Add to Cart Button */}
+        <button className="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 focus:outline-none transition duration-300">
+          Add to Cart
+        </button>
+      </div>
+
+      {/* Hover Effect */}
+      <div className="p-4 mt-4 text-center">
+        <span className="text-sm text-gray-500">
+          Free shipping on orders over $50!
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/MainContent.jsx b/frontend/src/MainContent.jsx
index 3268d122..ab665580 100644
--- a/frontend/src/MainContent.jsx
+++ b/frontend/src/MainContent.jsx
@@ -95,6 +95,11 @@ import FlashSale from './AgroShopAI/components/Pages/components/SalePage';
 import WaterManagement from './components/models/WaterManagement';
 import BundledProducts from './AgroShopAI/components/Pages/BulkPage';
 
+import TrendingProductsPage from './AgroShopAI/components/Pages/Trending';
+
+import AffiliateProgramPage from './AgroShopAI/components/Pages/Affiliate';
+
+
 
 
 const MainContent = () => {
@@ -208,12 +213,16 @@ const MainContent = () => {
 
                 <Route path="/agri/seller" element={<SellerAccountPage />} />
                 <Route path="/agri/admin" element={<AdminDashboard />} />
-
+                <Route path="/agri/affiliate" element={<AffiliateProgramPage />} />
                 <Route path="/agri/sale" element={<FlashSale/>} />
                 <Route path="/discussion" element={<DiscussionForum />} />
 
+
                 <Route path="/agri/bulk" element={<BundledProducts/>} />
 
+                <Route path="/agri/trend" element={<TrendingProductsPage/>} />
+
+
               </Routes>
               {checkShop ? <ShopFooter /> : <Footer />}
             </div>