From 502d84a741a8e80fd69b10de50c5440f0e44471f Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Mon, 27 Oct 2025 13:07:02 -0400
Subject: [PATCH] emails for rental cancelation, rental declined, rental
 request confirmation, payout received

---
 backend/models/Rental.js                      |   4 +
 backend/routes/rentals.js                     | 147 +++++-
 backend/services/emailService.js              | 475 +++++++++++++++++-
 backend/services/payoutService.js             |  25 +-
 backend/templates/emails/payoutReceived.html  | 419 +++++++++++++++
 .../rentalCancellationConfirmation.html       | 311 ++++++++++++
 .../rentalCancellationNotification.html       | 310 ++++++++++++
 backend/templates/emails/rentalDeclined.html  | 317 ++++++++++++
 .../emails/rentalRequestConfirmation.html     | 320 ++++++++++++
 backend/utils/logger.js                       |  35 +-
 .../src/components/DeclineRentalModal.tsx     | 252 ++++++++++
 .../components/RentalCancellationModal.tsx    |  29 +-
 frontend/src/pages/MyListings.tsx             |  56 ++-
 frontend/src/pages/MyRentals.tsx              |  21 +-
 frontend/src/pages/Profile.tsx                |   8 +-
 frontend/src/services/api.ts                  |   2 +
 frontend/src/types/index.ts                   |   4 +-
 17 files changed, 2690 insertions(+), 45 deletions(-)
 create mode 100644 backend/templates/emails/payoutReceived.html
 create mode 100644 backend/templates/emails/rentalCancellationConfirmation.html
 create mode 100644 backend/templates/emails/rentalCancellationNotification.html
 create mode 100644 backend/templates/emails/rentalDeclined.html
 create mode 100644 backend/templates/emails/rentalRequestConfirmation.html
 create mode 100644 frontend/src/components/DeclineRentalModal.tsx

diff --git a/backend/models/Rental.js b/backend/models/Rental.js
index 653ef2a..27ebeb6 100644
--- a/backend/models/Rental.js
+++ b/backend/models/Rental.js
@@ -55,6 +55,7 @@ const Rental = sequelize.define("Rental", {
     type: DataTypes.ENUM(
       "pending",
       "confirmed",
+      "declined",
       "active",
       "completed",
       "cancelled",
@@ -98,6 +99,9 @@ const Rental = sequelize.define("Rental", {
   cancelledAt: {
     type: DataTypes.DATE,
   },
+  declineReason: {
+    type: DataTypes.TEXT,
+  },
   stripePaymentMethodId: {
     type: DataTypes.STRING,
   },
diff --git a/backend/routes/rentals.js b/backend/routes/rentals.js
index 0cb6d01..0afd412 100644
--- a/backend/routes/rentals.js
+++ b/backend/routes/rentals.js
@@ -296,12 +296,30 @@ router.post("/", authenticateToken, requireVerifiedEmail, async (req, res) => {
       // Log error but don't fail the request
       const reqLogger = logger.withRequestId(req.id);
       reqLogger.error("Failed to send rental request email", {
-        error: emailError.message,
+        error: emailError,
         rentalId: rental.id,
         ownerId: rentalWithDetails.ownerId,
       });
     }
 
+    // Send rental request confirmation to renter
+    try {
+      await emailService.sendRentalRequestConfirmationEmail(rentalWithDetails);
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.info("Rental request confirmation sent to renter", {
+        rentalId: rental.id,
+        renterId: rentalWithDetails.renterId,
+      });
+    } catch (emailError) {
+      // Log error but don't fail the request
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.error("Failed to send rental request confirmation email", {
+        error: emailError,
+        rentalId: rental.id,
+        renterId: rentalWithDetails.renterId,
+      });
+    }
+
     res.status(201).json(rentalWithDetails);
   } catch (error) {
     res.status(500).json({ error: "Failed to create rental" });
@@ -477,6 +495,105 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
   }
 });
 
+// Decline rental request (owner only)
+router.put("/:id/decline", authenticateToken, async (req, res) => {
+  try {
+    const { reason } = req.body;
+
+    // Validate that reason is provided
+    if (!reason || reason.trim() === "") {
+      return res.status(400).json({
+        error: "A reason for declining is required",
+      });
+    }
+
+    const rental = await Rental.findByPk(req.params.id, {
+      include: [
+        { model: Item, as: "item" },
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+        {
+          model: User,
+          as: "renter",
+          attributes: ["id", "username", "firstName", "lastName", "email"],
+        },
+      ],
+    });
+
+    if (!rental) {
+      return res.status(404).json({ error: "Rental not found" });
+    }
+
+    // Only owner can decline
+    if (rental.ownerId !== req.user.id) {
+      return res
+        .status(403)
+        .json({ error: "Only the item owner can decline rental requests" });
+    }
+
+    // Can only decline pending rentals
+    if (rental.status !== "pending") {
+      return res.status(400).json({
+        error: "Can only decline pending rental requests",
+      });
+    }
+
+    // Update rental status to declined
+    await rental.update({
+      status: "declined",
+      declineReason: reason,
+    });
+
+    const updatedRental = await Rental.findByPk(rental.id, {
+      include: [
+        { model: Item, as: "item" },
+        {
+          model: User,
+          as: "owner",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+        {
+          model: User,
+          as: "renter",
+          attributes: ["id", "username", "firstName", "lastName"],
+        },
+      ],
+    });
+
+    // Send decline notification email to renter
+    try {
+      await emailService.sendRentalDeclinedEmail(updatedRental, reason);
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.info("Rental decline notification sent to renter", {
+        rentalId: rental.id,
+        renterId: updatedRental.renterId,
+      });
+    } catch (emailError) {
+      // Log error but don't fail the request
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.error("Failed to send rental decline email", {
+        error: emailError,
+        rentalId: rental.id,
+        renterId: updatedRental.renterId,
+      });
+    }
+
+    res.json(updatedRental);
+  } catch (error) {
+    const reqLogger = logger.withRequestId(req.id);
+    reqLogger.error("Error declining rental", {
+      error: error.message,
+      stack: error.stack,
+      rentalId: req.params.id,
+      userId: req.user.id,
+    });
+    res.status(500).json({ error: "Failed to decline rental" });
+  }
+});
+
 // Owner reviews renter
 router.post("/:id/review-renter", authenticateToken, async (req, res) => {
   try {
@@ -738,10 +855,15 @@ router.post("/:id/cancel", authenticateToken, async (req, res) => {
   try {
     const { reason } = req.body;
 
+    // Validate that reason is provided
+    if (!reason || !reason.trim()) {
+      return res.status(400).json({ error: "Cancellation reason is required" });
+    }
+
     const result = await RefundService.processCancellation(
       req.params.id,
       req.user.id,
-      reason
+      reason.trim()
     );
 
     // Return the updated rental with refund information
@@ -761,6 +883,27 @@ router.post("/:id/cancel", authenticateToken, async (req, res) => {
       ],
     });
 
+    // Send cancellation notification emails
+    try {
+      await emailService.sendRentalCancellationEmails(
+        updatedRental,
+        result.refund
+      );
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.info("Cancellation emails sent", {
+        rentalId: updatedRental.id,
+        cancelledBy: updatedRental.cancelledBy,
+      });
+    } catch (emailError) {
+      // Log error but don't fail the request
+      const reqLogger = logger.withRequestId(req.id);
+      reqLogger.error("Failed to send cancellation emails", {
+        error: emailError.message,
+        rentalId: updatedRental.id,
+        cancelledBy: updatedRental.cancelledBy,
+      });
+    }
+
     res.json({
       rental: updatedRental,
       refund: result.refund,
diff --git a/backend/services/emailService.js b/backend/services/emailService.js
index 13b0411..a14f7d5 100644
--- a/backend/services/emailService.js
+++ b/backend/services/emailService.js
@@ -42,6 +42,11 @@ class EmailService {
         "damageReportCS.html",
         "lostItemCS.html",
         "rentalRequest.html",
+        "rentalRequestConfirmation.html",
+        "rentalCancellationConfirmation.html",
+        "rentalCancellationNotification.html",
+        "rentalDeclined.html",
+        "payoutReceived.html",
       ];
 
       for (const templateFile of templateFiles) {
@@ -50,12 +55,14 @@ class EmailService {
           const templateContent = await fs.readFile(templatePath, "utf-8");
           const templateName = path.basename(templateFile, ".html");
           this.templates.set(templateName, templateContent);
+          console.log(`✓ Loaded template: ${templateName}`);
         } catch (error) {
-          console.warn(`Template ${templateFile} not found, will use fallback`);
+          console.error(`✗ Failed to load template ${templateFile}:`, error.message);
+          console.error(`  Template path: ${path.join(templatesDir, templateFile)}`);
         }
       }
 
-      console.log(`Loaded ${this.templates.size} email templates`);
+      console.log(`Loaded ${this.templates.size} of ${templateFiles.length} email templates`);
     } catch (error) {
       console.warn("Templates directory not found, using fallback templates");
     }
@@ -290,6 +297,93 @@ class EmailService {
         <p>Please respond to this request within 24 hours.</p>
       `
       ),
+
+      rentalRequestConfirmation: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{renterName}},</p>
+        <h2>Your Rental Request Has Been Submitted!</h2>
+        <p>Your request to rent <strong>{{itemName}}</strong> has been sent to the owner.</p>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Rental Period:</strong> {{startDate}} to {{endDate}}</p>
+        <p><strong>Delivery Method:</strong> {{deliveryMethod}}</p>
+        <p><strong>Total Amount:</strong> \${{totalAmount}}</p>
+        <p>{{paymentMessage}}</p>
+        <p>You'll receive an email notification once the owner responds to your request.</p>
+        <p><a href="{{viewRentalsUrl}}" class="button">View My Rentals</a></p>
+      `
+      ),
+
+      rentalCancellationConfirmation: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{recipientName}},</p>
+        <h2>Rental Cancelled Successfully</h2>
+        <p>This confirms that your rental for <strong>{{itemName}}</strong> has been cancelled.</p>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Start Date:</strong> {{startDate}}</p>
+        <p><strong>End Date:</strong> {{endDate}}</p>
+        <p><strong>Cancelled On:</strong> {{cancelledAt}}</p>
+        {{refundSection}}
+      `
+      ),
+
+      rentalCancellationNotification: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{recipientName}},</p>
+        <h2>Rental Cancellation Notice</h2>
+        <p>{{cancellationMessage}}</p>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Start Date:</strong> {{startDate}}</p>
+        <p><strong>End Date:</strong> {{endDate}}</p>
+        <p><strong>Cancelled On:</strong> {{cancelledAt}}</p>
+        {{additionalInfo}}
+        <p>If you have any questions or concerns, please reach out to our support team.</p>
+      `
+      ),
+
+      payoutReceived: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{ownerName}},</p>
+        <h2 style="color: #28a745;">Earnings Received: \${{payoutAmount}}</h2>
+        <p>Great news! Your earnings from the rental of <strong>{{itemName}}</strong> have been transferred to your account.</p>
+        <h3>Rental Details</h3>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Rental Period:</strong> {{startDate}} to {{endDate}}</p>
+        <p><strong>Transfer ID:</strong> {{stripeTransferId}}</p>
+        <h3>Earnings Breakdown</h3>
+        <p><strong>Rental Amount:</strong> \${{totalAmount}}</p>
+        <p><strong>Platform Fee (20%):</strong> -\${{platformFee}}</p>
+        <p style="font-size: 18px; color: #28a745;"><strong>Your Earnings:</strong> \${{payoutAmount}}</p>
+        <p>Funds are typically available in your bank account within 2-3 business days.</p>
+        <p><a href="{{earningsDashboardUrl}}" class="button">View Earnings Dashboard</a></p>
+        <p>Thank you for being a valued member of the RentAll community!</p>
+      `
+      ),
+
+      rentalDeclined: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{renterName}},</p>
+        <h2>Rental Request Declined</h2>
+        <p>Thank you for your interest in renting <strong>{{itemName}}</strong>. Unfortunately, the owner is unable to accept your rental request at this time.</p>
+        <h3>Request Details</h3>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Start Date:</strong> {{startDate}}</p>
+        <p><strong>End Date:</strong> {{endDate}}</p>
+        <p><strong>Delivery Method:</strong> {{deliveryMethod}}</p>
+        {{ownerMessage}}
+        <div class="info-box">
+          <p><strong>What happens next?</strong></p>
+          <p>{{paymentMessage}}</p>
+          <p>We encourage you to explore other similar items available for rent on RentAll. There are many great options waiting for you!</p>
+        </div>
+        <p style="text-align: center;"><a href="{{browseItemsUrl}}" class="button">Browse Available Items</a></p>
+        <p>If you have any questions or concerns, please don't hesitate to contact our support team.</p>
+      `
+      ),
     };
 
     return (
@@ -456,6 +550,7 @@ class EmailService {
         ? parseFloat(rental.payoutAmount).toFixed(2)
         : "0.00",
       deliveryMethod: rental.deliveryMethod || "Not specified",
+      rentalNotes: rental.notes || "No additional notes provided",
       approveUrl: approveUrl,
     };
 
@@ -468,6 +563,382 @@ class EmailService {
     );
   }
 
+  async sendRentalRequestConfirmationEmail(rental) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+    const viewRentalsUrl = `${frontendUrl}/my-rentals`;
+
+    // Fetch renter details
+    const renter = await User.findByPk(rental.renterId, {
+      attributes: ["email", "firstName", "lastName"],
+    });
+
+    if (!renter) {
+      console.error(
+        "Renter not found for rental request confirmation notification"
+      );
+      return { success: false, error: "Renter not found" };
+    }
+
+    // Determine payment message based on rental amount
+    const totalAmount = parseFloat(rental.totalAmount) || 0;
+    const paymentMessage =
+      totalAmount > 0
+        ? "The owner will review your request. You'll only be charged if they approve it."
+        : "The owner will review your request and respond soon.";
+
+    const variables = {
+      renterName: renter.firstName || "there",
+      itemName: rental.item?.name || "the item",
+      startDate: rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      endDate: rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      totalAmount: totalAmount.toFixed(2),
+      deliveryMethod: rental.deliveryMethod || "Not specified",
+      paymentMessage: paymentMessage,
+      viewRentalsUrl: viewRentalsUrl,
+    };
+
+    const htmlContent = this.renderTemplate(
+      "rentalRequestConfirmation",
+      variables
+    );
+
+    return await this.sendEmail(
+      renter.email,
+      `Rental Request Submitted - ${rental.item?.name || "Item"}`,
+      htmlContent
+    );
+  }
+
+  async sendRentalDeclinedEmail(rental, declineReason) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+    const browseItemsUrl = `${frontendUrl}/`;
+
+    // Fetch renter details
+    const renter = await User.findByPk(rental.renterId, {
+      attributes: ["email", "firstName", "lastName"],
+    });
+
+    if (!renter) {
+      console.error(
+        "Renter not found for rental decline notification"
+      );
+      return { success: false, error: "Renter not found" };
+    }
+
+    // Determine payment message based on rental amount
+    const totalAmount = parseFloat(rental.totalAmount) || 0;
+    const paymentMessage =
+      totalAmount > 0
+        ? "Since your request was declined before payment was processed, you will not be charged."
+        : "No payment was required for this rental request.";
+
+    // Build owner message section if decline reason provided
+    const ownerMessage = declineReason
+      ? `
+        <div class="notice-box">
+          <p><strong>Message from the owner:</strong></p>
+          <p>${declineReason}</p>
+        </div>
+      `
+      : "";
+
+    const variables = {
+      renterName: renter.firstName || "there",
+      itemName: rental.item?.name || "the item",
+      startDate: rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      endDate: rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      deliveryMethod: rental.deliveryMethod || "Not specified",
+      paymentMessage: paymentMessage,
+      ownerMessage: ownerMessage,
+      browseItemsUrl: browseItemsUrl,
+      payoutAmount: rental.payoutAmount
+        ? parseFloat(rental.payoutAmount).toFixed(2)
+        : "0.00",
+      totalAmount: totalAmount.toFixed(2),
+    };
+
+    const htmlContent = this.renderTemplate(
+      "rentalDeclined",
+      variables
+    );
+
+    return await this.sendEmail(
+      renter.email,
+      `Rental Request Declined - ${rental.item?.name || "Item"}`,
+      htmlContent
+    );
+  }
+
+  async sendPayoutReceivedEmail(rental) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+    const earningsDashboardUrl = `${frontendUrl}/earnings`;
+
+    // Fetch owner details
+    const owner = await User.findByPk(rental.ownerId, {
+      attributes: ["email", "firstName", "lastName"],
+    });
+
+    if (!owner) {
+      console.error("Owner not found for payout notification");
+      return { success: false, error: "Owner not found" };
+    }
+
+    // Format currency values
+    const totalAmount = parseFloat(rental.totalAmount) || 0;
+    const platformFee = parseFloat(rental.platformFee) || 0;
+    const payoutAmount = parseFloat(rental.payoutAmount) || 0;
+
+    const variables = {
+      ownerName: owner.firstName || "there",
+      itemName: rental.item?.name || "your item",
+      startDate: rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      endDate: rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      totalAmount: totalAmount.toFixed(2),
+      platformFee: platformFee.toFixed(2),
+      payoutAmount: payoutAmount.toFixed(2),
+      stripeTransferId: rental.stripeTransferId || "N/A",
+      earningsDashboardUrl: earningsDashboardUrl,
+    };
+
+    const htmlContent = this.renderTemplate("payoutReceived", variables);
+
+    return await this.sendEmail(
+      owner.email,
+      `Earnings Received - $${payoutAmount.toFixed(2)} for ${rental.item?.name || "Your Item"}`,
+      htmlContent
+    );
+  }
+
+  async sendRentalCancellationEmails(rental, refundInfo) {
+    const results = {
+      confirmationEmailSent: false,
+      notificationEmailSent: false,
+    };
+
+    try {
+      const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+      const browseUrl = `${frontendUrl}/`;
+
+      // Fetch both owner and renter details
+      const owner = await User.findByPk(rental.ownerId, {
+        attributes: ["email", "firstName", "lastName"],
+      });
+      const renter = await User.findByPk(rental.renterId, {
+        attributes: ["email", "firstName", "lastName"],
+      });
+
+      if (!owner || !renter) {
+        console.error(
+          "Owner or renter not found for rental cancellation emails"
+        );
+        return { success: false, error: "User not found" };
+      }
+
+      const cancelledBy = rental.cancelledBy; // 'owner' or 'renter'
+      const itemName = rental.item?.name || "the item";
+      const startDate = rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified";
+      const endDate = rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified";
+      const cancelledAt = rental.cancelledAt
+        ? new Date(rental.cancelledAt).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified";
+
+      // Determine who gets confirmation and who gets notification
+      let confirmationRecipient, notificationRecipient;
+      let confirmationRecipientName, notificationRecipientName;
+      let cancellationMessage, additionalInfo;
+
+      if (cancelledBy === "owner") {
+        // Owner cancelled: owner gets confirmation, renter gets notification
+        confirmationRecipient = owner.email;
+        confirmationRecipientName = owner.firstName || "there";
+        notificationRecipient = renter.email;
+        notificationRecipientName = renter.firstName || "there";
+
+        cancellationMessage = `The owner has cancelled the rental for <strong>${itemName}</strong>. We apologize for any inconvenience this may cause.`;
+
+        // Only show refund info if rental had a cost
+        if (rental.totalAmount > 0) {
+          additionalInfo = `
+            <div class="info-box">
+              <p><strong>Full Refund Processed</strong></p>
+              <p>You will receive a full refund of $${refundInfo.amount.toFixed(2)}. The refund will appear in your account within 5-10 business days.</p>
+            </div>
+            <div style="text-align: center">
+              <a href="${browseUrl}" class="button">Browse Other Items</a>
+            </div>
+          `;
+        } else {
+          additionalInfo = `
+            <div class="info-box">
+              <p>This rental has been cancelled by the owner. We apologize for any inconvenience.</p>
+            </div>
+            <div style="text-align: center">
+              <a href="${browseUrl}" class="button">Browse Other Items</a>
+            </div>
+          `;
+        }
+      } else {
+        // Renter cancelled: renter gets confirmation, owner gets notification
+        confirmationRecipient = renter.email;
+        confirmationRecipientName = renter.firstName || "there";
+        notificationRecipient = owner.email;
+        notificationRecipientName = owner.firstName || "there";
+
+        cancellationMessage = `The renter has cancelled their rental for <strong>${itemName}</strong>.`;
+        additionalInfo = `
+          <div class="info-box">
+            <p><strong>Your item is now available</strong></p>
+            <p>Your item is now available for other renters to book for these dates.</p>
+          </div>
+        `;
+      }
+
+      // Build refund section for confirmation email (only for paid rentals)
+      let refundSection = "";
+      if (rental.totalAmount > 0) {
+        if (refundInfo.amount > 0) {
+          const refundPercentage = (refundInfo.percentage * 100).toFixed(0);
+          refundSection = `
+            <h2>Refund Information</h2>
+            <div class="refund-amount">$${refundInfo.amount.toFixed(2)}</div>
+            <div class="info-box">
+              <p><strong>Refund Amount:</strong> $${refundInfo.amount.toFixed(2)} (${refundPercentage}% of total)</p>
+              <p><strong>Reason:</strong> ${refundInfo.reason}</p>
+              <p><strong>Processing Time:</strong> Refunds typically appear within 5-10 business days.</p>
+            </div>
+          `;
+        } else {
+          refundSection = `
+            <h2>Refund Information</h2>
+            <div class="warning-box">
+              <p><strong>No Refund Available</strong></p>
+              <p>${refundInfo.reason}</p>
+            </div>
+          `;
+        }
+      }
+      // For free rentals (totalAmount = 0), refundSection stays empty
+
+      // Send confirmation email to canceller
+      try {
+        const confirmationVariables = {
+          recipientName: confirmationRecipientName,
+          itemName: itemName,
+          startDate: startDate,
+          endDate: endDate,
+          cancelledAt: cancelledAt,
+          refundSection: refundSection,
+        };
+
+        const confirmationHtml = this.renderTemplate(
+          "rentalCancellationConfirmation",
+          confirmationVariables
+        );
+
+        const confirmationResult = await this.sendEmail(
+          confirmationRecipient,
+          `Cancellation Confirmed - ${itemName}`,
+          confirmationHtml
+        );
+
+        if (confirmationResult.success) {
+          console.log(
+            `Cancellation confirmation email sent to ${cancelledBy}: ${confirmationRecipient}`
+          );
+          results.confirmationEmailSent = true;
+        }
+      } catch (error) {
+        console.error(
+          `Failed to send cancellation confirmation email to ${cancelledBy}:`,
+          error.message
+        );
+      }
+
+      // Send notification email to other party
+      try {
+        const notificationVariables = {
+          recipientName: notificationRecipientName,
+          itemName: itemName,
+          startDate: startDate,
+          endDate: endDate,
+          cancelledAt: cancelledAt,
+          cancellationMessage: cancellationMessage,
+          additionalInfo: additionalInfo,
+        };
+
+        const notificationHtml = this.renderTemplate(
+          "rentalCancellationNotification",
+          notificationVariables
+        );
+
+        const notificationResult = await this.sendEmail(
+          notificationRecipient,
+          `Rental Cancelled - ${itemName}`,
+          notificationHtml
+        );
+
+        if (notificationResult.success) {
+          console.log(
+            `Cancellation notification email sent to ${cancelledBy === "owner" ? "renter" : "owner"}: ${notificationRecipient}`
+          );
+          results.notificationEmailSent = true;
+        }
+      } catch (error) {
+        console.error(
+          `Failed to send cancellation notification email:`,
+          error.message
+        );
+      }
+    } catch (error) {
+      console.error("Error sending cancellation emails:", error);
+    }
+
+    return results;
+  }
+
   async sendTemplateEmail(toEmail, subject, templateName, variables = {}) {
     const htmlContent = this.renderTemplate(templateName, variables);
     return await this.sendEmail(toEmail, subject, htmlContent);
diff --git a/backend/services/payoutService.js b/backend/services/payoutService.js
index 88d7f8a..9e0f066 100644
--- a/backend/services/payoutService.js
+++ b/backend/services/payoutService.js
@@ -1,5 +1,6 @@
-const { Rental, User } = require("../models");
+const { Rental, User, Item } = require("../models");
 const StripeService = require("./stripeService");
+const emailService = require("./emailService");
 const { Op } = require("sequelize");
 
 class PayoutService {
@@ -21,6 +22,10 @@ class PayoutService {
               },
             },
           },
+          {
+            model: Item,
+            as: "item",
+          },
         ],
       });
 
@@ -75,6 +80,20 @@ class PayoutService {
         `Payout completed for rental ${rental.id}: $${rental.payoutAmount} to ${rental.owner.stripeConnectedAccountId}`
       );
 
+      // Send payout notification email to owner
+      try {
+        await emailService.sendPayoutReceivedEmail(rental);
+        console.log(
+          `Payout notification email sent to owner for rental ${rental.id}`
+        );
+      } catch (emailError) {
+        // Log error but don't fail the payout
+        console.error(
+          `Failed to send payout notification email for rental ${rental.id}:`,
+          emailError.message
+        );
+      }
+
       return {
         success: true,
         transferId: transfer.id,
@@ -151,6 +170,10 @@ class PayoutService {
               },
             },
           },
+          {
+            model: Item,
+            as: "item",
+          },
         ],
       });
 
diff --git a/backend/templates/emails/payoutReceived.html b/backend/templates/emails/payoutReceived.html
new file mode 100644
index 0000000..52e65fe
--- /dev/null
+++ b/backend/templates/emails/payoutReceived.html
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Earnings Received - RentAll</title>
+    <style>
+      /* Reset styles */
+      body,
+      table,
+      td,
+      p,
+      a,
+      li,
+      blockquote {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      table,
+      td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      img {
+        -ms-interpolation-mode: bicubic;
+      }
+
+      /* Base styles */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        min-width: 100%;
+        height: 100%;
+        background-color: #f8f9fa;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #212529;
+      }
+
+      /* Container */
+      .email-container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header */
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 40px 30px;
+        text-align: center;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: 700;
+        color: #ffffff;
+        text-decoration: none;
+        letter-spacing: -1px;
+      }
+
+      .tagline {
+        color: #e9ecef;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+
+      /* Content */
+      .content {
+        padding: 40px 30px;
+      }
+
+      .content h1 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: #212529;
+      }
+
+      .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 30px 0 15px 0;
+        color: #495057;
+      }
+
+      .content p {
+        margin: 0 0 16px 0;
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .content strong {
+        color: #495057;
+      }
+
+      /* Earnings amount display */
+      .earnings-display {
+        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+        padding: 30px;
+        border-radius: 8px;
+        text-align: center;
+        margin: 30px 0;
+        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+      }
+
+      .earnings-label {
+        color: #ffffff;
+        font-size: 14px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 10px;
+        opacity: 0.9;
+      }
+
+      .earnings-amount {
+        color: #ffffff;
+        font-size: 48px;
+        font-weight: 700;
+        margin: 0;
+        line-height: 1;
+      }
+
+      .earnings-subtitle {
+        color: #ffffff;
+        font-size: 14px;
+        margin-top: 10px;
+        opacity: 0.9;
+      }
+
+      /* Button */
+      .button {
+        display: inline-block;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff !important;
+        text-decoration: none;
+        padding: 16px 32px;
+        border-radius: 6px;
+        font-weight: 600;
+        margin: 20px 0;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      /* Success box */
+      .success-box {
+        background-color: #d4edda;
+        border-left: 4px solid #28a745;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .success-box p {
+        margin: 0 0 10px 0;
+        color: #155724;
+      }
+
+      .success-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Info box */
+      .info-box {
+        background-color: #e7f3ff;
+        border-left: 4px solid #0066cc;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .info-box p {
+        margin: 0 0 10px 0;
+        color: #004085;
+      }
+
+      .info-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Info table */
+      .info-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .info-table th,
+      .info-table td {
+        padding: 15px;
+        text-align: left;
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      .info-table th {
+        background-color: #e9ecef;
+        font-weight: 600;
+        color: #495057;
+        width: 40%;
+      }
+
+      .info-table td {
+        color: #6c757d;
+      }
+
+      .info-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      /* Breakdown table with emphasis */
+      .breakdown-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #ffffff;
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .breakdown-table td {
+        padding: 12px 15px;
+        border-bottom: 1px solid #e9ecef;
+      }
+
+      .breakdown-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      .breakdown-label {
+        color: #6c757d;
+        font-size: 14px;
+      }
+
+      .breakdown-amount {
+        color: #495057;
+        font-weight: 600;
+        text-align: right;
+      }
+
+      .breakdown-earnings {
+        background-color: #d4edda;
+        font-weight: 700;
+      }
+
+      .breakdown-earnings .breakdown-label {
+        color: #155724;
+        font-size: 16px;
+      }
+
+      .breakdown-earnings .breakdown-amount {
+        color: #155724;
+        font-size: 18px;
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #f8f9fa;
+        padding: 30px;
+        text-align: center;
+        border-top: 1px solid #e9ecef;
+      }
+
+      .footer p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #6c757d;
+      }
+
+      .footer a {
+        color: #667eea;
+        text-decoration: none;
+      }
+
+      .footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* Responsive */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          margin: 0;
+          border-radius: 0;
+        }
+
+        .header,
+        .content,
+        .footer {
+          padding: 20px;
+        }
+
+        .logo {
+          font-size: 28px;
+        }
+
+        .content h1 {
+          font-size: 22px;
+        }
+
+        .earnings-amount {
+          font-size: 36px;
+        }
+
+        .button {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .info-table th,
+        .info-table td {
+          padding: 10px;
+          font-size: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="header">
+        <div class="logo">RentAll</div>
+        <div class="tagline">Earnings Received</div>
+      </div>
+
+      <div class="content">
+        <p>Hi {{ownerName}},</p>
+
+        <p>Great news! Your earnings have been transferred to your account.</p>
+
+        <div class="earnings-display">
+          <div class="earnings-label">You Earned</div>
+          <div class="earnings-amount">${{payoutAmount}}</div>
+          <div class="earnings-subtitle">
+            From rental of {{itemName}}
+          </div>
+        </div>
+
+        <h2>Rental Details</h2>
+        <table class="info-table">
+          <tr>
+            <th>Item Rented</th>
+            <td>{{itemName}}</td>
+          </tr>
+          <tr>
+            <th>Rental Period</th>
+            <td>{{startDate}} to {{endDate}}</td>
+          </tr>
+          <tr>
+            <th>Transfer ID</th>
+            <td>{{stripeTransferId}}</td>
+          </tr>
+        </table>
+
+        <h2>Earnings Breakdown</h2>
+        <table class="breakdown-table">
+          <tr>
+            <td class="breakdown-label">Rental Amount (charged to renter)</td>
+            <td class="breakdown-amount">${{totalAmount}}</td>
+          </tr>
+          <tr>
+            <td class="breakdown-label">Platform Fee (20%)</td>
+            <td class="breakdown-amount">-${{platformFee}}</td>
+          </tr>
+          <tr class="breakdown-earnings">
+            <td class="breakdown-label">Your Earnings</td>
+            <td class="breakdown-amount">${{payoutAmount}}</td>
+          </tr>
+        </table>
+
+        <div class="info-box">
+          <p><strong>When will I receive the funds?</strong></p>
+          <p>
+            Funds are typically available in your bank account within
+            <strong>2-3 business days</strong> from the transfer date.
+          </p>
+          <p>
+            You can track this transfer in your Stripe Dashboard using the
+            Transfer ID above.
+          </p>
+        </div>
+
+        <div style="text-align: center">
+          <a href="{{earningsDashboardUrl}}" class="button"
+            >View Earnings Dashboard</a
+          >
+        </div>
+
+        <p>
+          Thank you for being a valued member of the RentAll community! Keep
+          sharing your items to earn more.
+        </p>
+      </div>
+
+      <div class="footer">
+        <p><strong>RentAll</strong></p>
+        <p>
+          This is a notification about your earnings. You received this message
+          because a payout was successfully processed for your rental.
+        </p>
+        <p>If you have any questions, please contact our support team.</p>
+        <p>&copy; 2024 RentAll. All rights reserved.</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/emails/rentalCancellationConfirmation.html b/backend/templates/emails/rentalCancellationConfirmation.html
new file mode 100644
index 0000000..47e3b9b
--- /dev/null
+++ b/backend/templates/emails/rentalCancellationConfirmation.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Cancellation Confirmed - RentAll</title>
+    <style>
+      /* Reset styles */
+      body,
+      table,
+      td,
+      p,
+      a,
+      li,
+      blockquote {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      table,
+      td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      img {
+        -ms-interpolation-mode: bicubic;
+      }
+
+      /* Base styles */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        min-width: 100%;
+        height: 100%;
+        background-color: #f8f9fa;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #212529;
+      }
+
+      /* Container */
+      .email-container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header */
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 40px 30px;
+        text-align: center;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: 700;
+        color: #ffffff;
+        text-decoration: none;
+        letter-spacing: -1px;
+      }
+
+      .tagline {
+        color: #e9ecef;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+
+      /* Content */
+      .content {
+        padding: 40px 30px;
+      }
+
+      .content h1 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: #212529;
+      }
+
+      .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 30px 0 15px 0;
+        color: #495057;
+      }
+
+      .content p {
+        margin: 0 0 16px 0;
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .content strong {
+        color: #495057;
+      }
+
+      /* Success box */
+      .success-box {
+        background-color: #d4edda;
+        border-left: 4px solid #28a745;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .success-box p {
+        margin: 0;
+        color: #155724;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      /* Info box */
+      .info-box {
+        background-color: #e7f3ff;
+        border-left: 4px solid #2196f3;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .info-box p {
+        margin: 0 0 10px 0;
+        color: #004085;
+      }
+
+      .info-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Warning box */
+      .warning-box {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .warning-box p {
+        margin: 0 0 10px 0;
+        color: #856404;
+      }
+
+      .warning-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Info table */
+      .info-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .info-table th,
+      .info-table td {
+        padding: 15px;
+        text-align: left;
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      .info-table th {
+        background-color: #e9ecef;
+        font-weight: 600;
+        color: #495057;
+      }
+
+      .info-table td {
+        color: #6c757d;
+      }
+
+      .info-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      /* Refund highlight */
+      .refund-amount {
+        font-size: 28px;
+        font-weight: 700;
+        color: #28a745;
+        text-align: center;
+        margin: 20px 0;
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #f8f9fa;
+        padding: 30px;
+        text-align: center;
+        border-top: 1px solid #e9ecef;
+      }
+
+      .footer p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #6c757d;
+      }
+
+      .footer a {
+        color: #667eea;
+        text-decoration: none;
+      }
+
+      .footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* Responsive */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          margin: 0;
+          border-radius: 0;
+        }
+
+        .header,
+        .content,
+        .footer {
+          padding: 20px;
+        }
+
+        .logo {
+          font-size: 28px;
+        }
+
+        .content h1 {
+          font-size: 22px;
+        }
+
+        .info-table th,
+        .info-table td {
+          padding: 10px;
+          font-size: 14px;
+        }
+
+        .refund-amount {
+          font-size: 24px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="header">
+        <div class="logo">RentAll</div>
+        <div class="tagline">Cancellation Confirmation</div>
+      </div>
+
+      <div class="content">
+        <p>Hi {{recipientName}},</p>
+
+        <div class="success-box">
+          <p>Your cancellation has been confirmed</p>
+        </div>
+
+        <h1>Rental Cancelled Successfully</h1>
+
+        <p>
+          This confirms that your rental for <strong>{{itemName}}</strong> has
+          been cancelled.
+        </p>
+
+        <h2>Cancelled Rental Details</h2>
+        <table class="info-table">
+          <tr>
+            <th>Item</th>
+            <td>{{itemName}}</td>
+          </tr>
+          <tr>
+            <th>Start Date</th>
+            <td>{{startDate}}</td>
+          </tr>
+          <tr>
+            <th>End Date</th>
+            <td>{{endDate}}</td>
+          </tr>
+          <tr>
+            <th>Cancelled On</th>
+            <td>{{cancelledAt}}</td>
+          </tr>
+        </table>
+
+        {{refundSection}}
+
+        <p>
+          If you have any questions about this cancellation, please don't
+          hesitate to contact our support team.
+        </p>
+      </div>
+
+      <div class="footer">
+        <p><strong>RentAll</strong></p>
+        <p>
+          This is a confirmation of your rental cancellation. You received this
+          message because you cancelled a rental on RentAll.
+        </p>
+        <p>If you have any questions, please contact our support team.</p>
+        <p>&copy; 2024 RentAll. All rights reserved.</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/emails/rentalCancellationNotification.html b/backend/templates/emails/rentalCancellationNotification.html
new file mode 100644
index 0000000..d873077
--- /dev/null
+++ b/backend/templates/emails/rentalCancellationNotification.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Rental Cancelled - RentAll</title>
+    <style>
+      /* Reset styles */
+      body,
+      table,
+      td,
+      p,
+      a,
+      li,
+      blockquote {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      table,
+      td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      img {
+        -ms-interpolation-mode: bicubic;
+      }
+
+      /* Base styles */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        min-width: 100%;
+        height: 100%;
+        background-color: #f8f9fa;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #212529;
+      }
+
+      /* Container */
+      .email-container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header */
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 40px 30px;
+        text-align: center;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: 700;
+        color: #ffffff;
+        text-decoration: none;
+        letter-spacing: -1px;
+      }
+
+      .tagline {
+        color: #e9ecef;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+
+      /* Content */
+      .content {
+        padding: 40px 30px;
+      }
+
+      .content h1 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: #212529;
+      }
+
+      .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 30px 0 15px 0;
+        color: #495057;
+      }
+
+      .content p {
+        margin: 0 0 16px 0;
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .content strong {
+        color: #495057;
+      }
+
+      .content ul {
+        margin: 16px 0;
+        padding-left: 24px;
+        color: #6c757d;
+      }
+
+      .content li {
+        margin-bottom: 8px;
+      }
+
+      /* Button */
+      .button {
+        display: inline-block;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff !important;
+        text-decoration: none;
+        padding: 16px 32px;
+        border-radius: 6px;
+        font-weight: 600;
+        margin: 20px 0;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      /* Info box */
+      .info-box {
+        background-color: #e7f3ff;
+        border-left: 4px solid #2196f3;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .info-box p {
+        margin: 0 0 10px 0;
+        color: #004085;
+      }
+
+      .info-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Warning box */
+      .warning-box {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .warning-box p {
+        margin: 0 0 10px 0;
+        color: #856404;
+      }
+
+      .warning-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Info table */
+      .info-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .info-table th,
+      .info-table td {
+        padding: 15px;
+        text-align: left;
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      .info-table th {
+        background-color: #e9ecef;
+        font-weight: 600;
+        color: #495057;
+      }
+
+      .info-table td {
+        color: #6c757d;
+      }
+
+      .info-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #f8f9fa;
+        padding: 30px;
+        text-align: center;
+        border-top: 1px solid #e9ecef;
+      }
+
+      .footer p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #6c757d;
+      }
+
+      .footer a {
+        color: #667eea;
+        text-decoration: none;
+      }
+
+      .footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* Responsive */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          margin: 0;
+          border-radius: 0;
+        }
+
+        .header,
+        .content,
+        .footer {
+          padding: 20px;
+        }
+
+        .logo {
+          font-size: 28px;
+        }
+
+        .content h1 {
+          font-size: 22px;
+        }
+
+        .button {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .info-table th,
+        .info-table td {
+          padding: 10px;
+          font-size: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="header">
+        <div class="logo">RentAll</div>
+        <div class="tagline">Rental Update</div>
+      </div>
+
+      <div class="content">
+        <p>Hi {{recipientName}},</p>
+
+        <h1>Rental Cancellation Notice</h1>
+
+        <p>{{cancellationMessage}}</p>
+
+        <h2>Cancelled Rental Details</h2>
+        <table class="info-table">
+          <tr>
+            <th>Item</th>
+            <td>{{itemName}}</td>
+          </tr>
+          <tr>
+            <th>Start Date</th>
+            <td>{{startDate}}</td>
+          </tr>
+          <tr>
+            <th>End Date</th>
+            <td>{{endDate}}</td>
+          </tr>
+          <tr>
+            <th>Cancelled On</th>
+            <td>{{cancelledAt}}</td>
+          </tr>
+        </table>
+
+        {{additionalInfo}}
+
+        <p>
+          We understand this may be inconvenient. If you have any questions or
+          concerns, please don't hesitate to reach out to our support team.
+        </p>
+      </div>
+
+      <div class="footer">
+        <p><strong>RentAll</strong></p>
+        <p>
+          This is a notification about a rental cancellation. You received this
+          message because you were involved in a rental on RentAll.
+        </p>
+        <p>If you have any questions, please contact our support team.</p>
+        <p>&copy; 2024 RentAll. All rights reserved.</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/emails/rentalDeclined.html b/backend/templates/emails/rentalDeclined.html
new file mode 100644
index 0000000..648403c
--- /dev/null
+++ b/backend/templates/emails/rentalDeclined.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Rental Request Declined - RentAll</title>
+    <style>
+      /* Reset styles */
+      body,
+      table,
+      td,
+      p,
+      a,
+      li,
+      blockquote {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      table,
+      td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      img {
+        -ms-interpolation-mode: bicubic;
+      }
+
+      /* Base styles */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        min-width: 100%;
+        height: 100%;
+        background-color: #f8f9fa;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #212529;
+      }
+
+      /* Container */
+      .email-container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header */
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 40px 30px;
+        text-align: center;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: 700;
+        color: #ffffff;
+        text-decoration: none;
+        letter-spacing: -1px;
+      }
+
+      .tagline {
+        color: #e9ecef;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+
+      /* Content */
+      .content {
+        padding: 40px 30px;
+      }
+
+      .content h1 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: #212529;
+      }
+
+      .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 30px 0 15px 0;
+        color: #495057;
+      }
+
+      .content p {
+        margin: 0 0 16px 0;
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .content strong {
+        color: #495057;
+      }
+
+      /* Button */
+      .button {
+        display: inline-block;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff !important;
+        text-decoration: none;
+        padding: 16px 32px;
+        border-radius: 6px;
+        font-weight: 600;
+        margin: 20px 0;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      /* Info box */
+      .info-box {
+        background-color: #e7f3ff;
+        border-left: 4px solid #0066cc;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .info-box p {
+        margin: 0 0 10px 0;
+        color: #004085;
+      }
+
+      .info-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Notice box */
+      .notice-box {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .notice-box p {
+        margin: 0 0 10px 0;
+        color: #856404;
+      }
+
+      .notice-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Info table */
+      .info-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .info-table th,
+      .info-table td {
+        padding: 15px;
+        text-align: left;
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      .info-table th {
+        background-color: #e9ecef;
+        font-weight: 600;
+        color: #495057;
+      }
+
+      .info-table td {
+        color: #6c757d;
+      }
+
+      .info-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #f8f9fa;
+        padding: 30px;
+        text-align: center;
+        border-top: 1px solid #e9ecef;
+      }
+
+      .footer p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #6c757d;
+      }
+
+      .footer a {
+        color: #667eea;
+        text-decoration: none;
+      }
+
+      .footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* Responsive */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          margin: 0;
+          border-radius: 0;
+        }
+
+        .header,
+        .content,
+        .footer {
+          padding: 20px;
+        }
+
+        .logo {
+          font-size: 28px;
+        }
+
+        .content h1 {
+          font-size: 22px;
+        }
+
+        .button {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .info-table th,
+        .info-table td {
+          padding: 10px;
+          font-size: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="header">
+        <div class="logo">RentAll</div>
+        <div class="tagline">Rental Request Update</div>
+      </div>
+
+      <div class="content">
+        <p>Hi {{renterName}},</p>
+
+        <p>
+          Thank you for your interest in renting <strong>{{itemName}}</strong>.
+          Unfortunately, the owner is unable to accept your rental request at
+          this time.
+        </p>
+
+        <h2>Request Details</h2>
+        <table class="info-table">
+          <tr>
+            <th>Item</th>
+            <td>{{itemName}}</td>
+          </tr>
+          <tr>
+            <th>Start Date</th>
+            <td>{{startDate}}</td>
+          </tr>
+          <tr>
+            <th>End Date</th>
+            <td>{{endDate}}</td>
+          </tr>
+          <tr>
+            <th>Delivery Method</th>
+            <td>{{deliveryMethod}}</td>
+          </tr>
+        </table>
+
+        {{ownerMessage}}
+
+        <div class="info-box">
+          <p><strong>What happens next?</strong></p>
+          <p>
+            {{paymentMessage}}
+          </p>
+          <p>
+            We encourage you to explore other similar items available for rent
+            on RentAll. There are many great options waiting for you!
+          </p>
+        </div>
+
+        <div style="text-align: center">
+          <a href="{{browseItemsUrl}}" class="button">Browse Available Items</a>
+        </div>
+
+        <p>
+          If you have any questions or concerns, please don't hesitate to
+          contact our support team.
+        </p>
+      </div>
+
+      <div class="footer">
+        <p><strong>RentAll</strong></p>
+        <p>
+          This is a notification about your rental request. You received this
+          message because you submitted a rental request on RentAll.
+        </p>
+        <p>If you have any questions, please contact our support team.</p>
+        <p>&copy; 2024 RentAll. All rights reserved.</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/emails/rentalRequestConfirmation.html b/backend/templates/emails/rentalRequestConfirmation.html
new file mode 100644
index 0000000..212256b
--- /dev/null
+++ b/backend/templates/emails/rentalRequestConfirmation.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Rental Request Submitted - RentAll</title>
+    <style>
+      /* Reset styles */
+      body,
+      table,
+      td,
+      p,
+      a,
+      li,
+      blockquote {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      table,
+      td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      img {
+        -ms-interpolation-mode: bicubic;
+      }
+
+      /* Base styles */
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100% !important;
+        min-width: 100%;
+        height: 100%;
+        background-color: #f8f9fa;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #212529;
+      }
+
+      /* Container */
+      .email-container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Header */
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 40px 30px;
+        text-align: center;
+      }
+
+      .logo {
+        font-size: 32px;
+        font-weight: 700;
+        color: #ffffff;
+        text-decoration: none;
+        letter-spacing: -1px;
+      }
+
+      .tagline {
+        color: #e9ecef;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+
+      /* Content */
+      .content {
+        padding: 40px 30px;
+      }
+
+      .content h1 {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: #212529;
+      }
+
+      .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 30px 0 15px 0;
+        color: #495057;
+      }
+
+      .content p {
+        margin: 0 0 16px 0;
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .content strong {
+        color: #495057;
+      }
+
+      /* Button */
+      .button {
+        display: inline-block;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff !important;
+        text-decoration: none;
+        padding: 16px 32px;
+        border-radius: 6px;
+        font-weight: 600;
+        margin: 20px 0;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      /* Info box */
+      .info-box {
+        background-color: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .info-box p {
+        margin: 0 0 10px 0;
+        color: #856404;
+      }
+
+      .info-box p:last-child {
+        margin-bottom: 0;
+      }
+
+      /* Success box */
+      .success-box {
+        background-color: #d4edda;
+        border-left: 4px solid #28a745;
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 0 6px 6px 0;
+      }
+
+      .success-box p {
+        margin: 0;
+        color: #155724;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      /* Info table */
+      .info-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .info-table th,
+      .info-table td {
+        padding: 15px;
+        text-align: left;
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      .info-table th {
+        background-color: #e9ecef;
+        font-weight: 600;
+        color: #495057;
+      }
+
+      .info-table td {
+        color: #6c757d;
+      }
+
+      .info-table tr:last-child td {
+        border-bottom: none;
+      }
+
+      /* Footer */
+      .footer {
+        background-color: #f8f9fa;
+        padding: 30px;
+        text-align: center;
+        border-top: 1px solid #e9ecef;
+      }
+
+      .footer p {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #6c757d;
+      }
+
+      .footer a {
+        color: #667eea;
+        text-decoration: none;
+      }
+
+      .footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* Responsive */
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          margin: 0;
+          border-radius: 0;
+        }
+
+        .header,
+        .content,
+        .footer {
+          padding: 20px;
+        }
+
+        .logo {
+          font-size: 28px;
+        }
+
+        .content h1 {
+          font-size: 22px;
+        }
+
+        .button {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .info-table th,
+        .info-table td {
+          padding: 10px;
+          font-size: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="header">
+        <div class="logo">RentAll</div>
+        <div class="tagline">Request Submitted</div>
+      </div>
+
+      <div class="content">
+        <p>Hi {{renterName}},</p>
+
+        <div class="success-box">
+          <p>Your rental request has been submitted!</p>
+        </div>
+
+        <p>
+          Your request to rent <strong>{{itemName}}</strong> has been sent to
+          the owner. They'll review your request and respond soon.
+        </p>
+
+        <h2>Request Details</h2>
+        <table class="info-table">
+          <tr>
+            <th>Item</th>
+            <td>{{itemName}}</td>
+          </tr>
+          <tr>
+            <th>Start Date</th>
+            <td>{{startDate}}</td>
+          </tr>
+          <tr>
+            <th>End Date</th>
+            <td>{{endDate}}</td>
+          </tr>
+          <tr>
+            <th>Delivery Method</th>
+            <td>{{deliveryMethod}}</td>
+          </tr>
+          <tr>
+            <th>Total Amount</th>
+            <td>${{totalAmount}}</td>
+          </tr>
+        </table>
+
+        <div class="info-box">
+          <p><strong>What happens next?</strong></p>
+          <p>
+            {{paymentMessage}}
+          </p>
+          <p>
+            You'll receive an email notification once the owner responds to your
+            request.
+          </p>
+        </div>
+
+        <div style="text-align: center">
+          <a href="{{viewRentalsUrl}}" class="button">View My Rentals</a>
+        </div>
+
+        <p>
+          <strong>Need to make changes?</strong> If you need to cancel or modify
+          your request, you can do so from the My Rentals page.
+        </p>
+      </div>
+
+      <div class="footer">
+        <p><strong>RentAll</strong></p>
+        <p>
+          This is a confirmation email for your rental request. You received
+          this message because you submitted a rental request on RentAll.
+        </p>
+        <p>If you have any questions, please contact our support team.</p>
+        <p>&copy; 2024 RentAll. All rights reserved.</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/utils/logger.js b/backend/utils/logger.js
index 0bc9f47..db6a264 100644
--- a/backend/utils/logger.js
+++ b/backend/utils/logger.js
@@ -25,15 +25,43 @@ const level = () => {
   return isDevelopment ? 'debug' : process.env.LOG_LEVEL || 'info';
 };
 
+// Custom format to extract stack traces from Error objects in metadata
+const extractErrorStack = winston.format((info) => {
+  // Check if any metadata value is an Error object and extract its stack
+  Object.keys(info).forEach(key => {
+    if (info[key] instanceof Error) {
+      info[key] = {
+        message: info[key].message,
+        stack: info[key].stack,
+        name: info[key].name
+      };
+    }
+  });
+  return info;
+});
+
 // Define log format
 const logFormat = winston.format.combine(
   winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss:ms' }),
   winston.format.colorize({ all: true }),
+  extractErrorStack(),
   winston.format.printf((info) => {
-    if (info.stack) {
-      return `${info.timestamp} ${info.level}: ${info.message}\n${info.stack}`;
+    const { timestamp, level, message, stack, ...metadata } = info;
+    let output = `${timestamp} ${level}: ${message}`;
+
+    // Check for stack trace in the info object itself
+    if (stack) {
+      output += `\n${stack}`;
     }
-    return `${info.timestamp} ${info.level}: ${info.message}`;
+
+    // Check for Error objects in metadata
+    Object.keys(metadata).forEach(key => {
+      if (metadata[key] && metadata[key].stack) {
+        output += `\n${key}: ${metadata[key].message}\n${metadata[key].stack}`;
+      }
+    });
+
+    return output;
   }),
 );
 
@@ -41,6 +69,7 @@ const logFormat = winston.format.combine(
 const jsonFormat = winston.format.combine(
   winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss:ms' }),
   winston.format.errors({ stack: true }),
+  extractErrorStack(),
   winston.format.json()
 );
 
diff --git a/frontend/src/components/DeclineRentalModal.tsx b/frontend/src/components/DeclineRentalModal.tsx
new file mode 100644
index 0000000..60570cd
--- /dev/null
+++ b/frontend/src/components/DeclineRentalModal.tsx
@@ -0,0 +1,252 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { rentalAPI } from "../services/api";
+import { Rental } from "../types";
+
+interface DeclineRentalModalProps {
+  show: boolean;
+  onHide: () => void;
+  rental: Rental;
+  onDeclineComplete: (updatedRental: Rental) => void;
+}
+
+const DeclineRentalModal: React.FC<DeclineRentalModalProps> = ({
+  show,
+  onHide,
+  rental,
+  onDeclineComplete,
+}) => {
+  const [processing, setProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [reason, setReason] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [updatedRental, setUpdatedRental] = useState<Rental | null>(null);
+
+  const handleDecline = async () => {
+    if (!reason.trim()) {
+      setError("Please provide a reason for declining this request");
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      setError(null);
+
+      const response = await rentalAPI.declineRental(rental.id, reason.trim());
+
+      // Store updated rental data for later callback
+      setUpdatedRental(response.data);
+
+      // Show success confirmation
+      setSuccess(true);
+    } catch (error: any) {
+      setError(
+        error.response?.data?.error || "Failed to decline rental request"
+      );
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleClose = () => {
+    // Call parent callback with updated rental data if we have it
+    if (updatedRental) {
+      onDeclineComplete(updatedRental);
+    }
+
+    // Reset all states when closing
+    setProcessing(false);
+    setError(null);
+    setReason("");
+    setSuccess(false);
+    setUpdatedRental(null);
+    onHide();
+  };
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget && !processing) {
+        handleClose();
+      }
+    },
+    [handleClose, processing]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !processing) {
+        handleClose();
+      }
+    },
+    [handleClose, processing]
+  );
+
+  useEffect(() => {
+    if (show) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "unset";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "unset";
+    };
+  }, [show, handleKeyDown]);
+
+  if (!show) return null;
+
+  return (
+    <div
+      className="modal d-block"
+      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      onClick={handleBackdropClick}
+    >
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">
+              {success ? "Request Declined" : "Decline Rental Request"}
+            </h5>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={handleClose}
+              disabled={processing}
+              aria-label="Close"
+            ></button>
+          </div>
+          <div className="modal-body">
+            {success ? (
+              <div className="text-center py-4">
+                <div className="mb-4">
+                  <i
+                    className="bi bi-check-circle-fill text-success"
+                    style={{ fontSize: "4rem" }}
+                  ></i>
+                </div>
+                <h3 className="text-success mb-3">Request Declined</h3>
+                <div className="alert alert-info">
+                  <p className="mb-0">
+                    The renter has been notified that their request was
+                    declined.
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className="mb-4">
+                  <h6>Rental Details</h6>
+                  <div className="bg-light p-3 rounded">
+                    <p className="mb-2">
+                      <strong>Item:</strong> {rental.item?.name}
+                    </p>
+                    <p className="mb-2">
+                      <strong>Renter:</strong> {rental.renter?.firstName}{" "}
+                      {rental.renter?.lastName}
+                    </p>
+                    <p className="mb-2">
+                      <strong>Start:</strong>{" "}
+                      {new Date(rental.startDateTime).toLocaleString()}
+                    </p>
+                    <p className="mb-0">
+                      <strong>End:</strong>{" "}
+                      {new Date(rental.endDateTime).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="alert alert-danger mb-3" role="alert">
+                    {error}
+                  </div>
+                )}
+
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleDecline();
+                  }}
+                >
+                  <div className="mb-3">
+                    <label className="form-label">
+                      Reason for Declining{" "}
+                      <span className="text-danger">*</span>
+                    </label>
+                    <textarea
+                      className="form-control"
+                      rows={4}
+                      value={reason}
+                      onChange={(e) => {
+                        setReason(e.target.value);
+                        setError(null);
+                      }}
+                      placeholder="Please explain why you're unable to accept this rental request..."
+                      maxLength={500}
+                      required
+                      disabled={processing}
+                    />
+                    <div className="form-text text-muted">
+                      {reason.length}/500 characters (Required)
+                    </div>
+                  </div>
+
+                  <div className="alert alert-warning">
+                    <i className="bi bi-exclamation-triangle-fill me-2"></i>
+                    <strong>Note:</strong> The renter will see your reason for
+                    declining. No payment has been processed for this request.
+                  </div>
+                </form>
+              </>
+            )}
+          </div>
+          <div className="modal-footer">
+            {success ? (
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={handleClose}
+              >
+                Done
+              </button>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={handleClose}
+                  disabled={processing}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={handleDecline}
+                  disabled={processing || !reason.trim()}
+                >
+                  {processing ? (
+                    <>
+                      <div
+                        className="spinner-border spinner-border-sm me-2"
+                        role="status"
+                      >
+                        <span className="visually-hidden">Loading...</span>
+                      </div>
+                      Declining...
+                    </>
+                  ) : (
+                    "Submit"
+                  )}
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeclineRentalModal;
diff --git a/frontend/src/components/RentalCancellationModal.tsx b/frontend/src/components/RentalCancellationModal.tsx
index 57d7f69..7af2161 100644
--- a/frontend/src/components/RentalCancellationModal.tsx
+++ b/frontend/src/components/RentalCancellationModal.tsx
@@ -39,6 +39,21 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     try {
       setLoading(true);
       setError(null);
+
+      // Check if rental status allows cancellation before making API call
+      if (rental.status !== "pending" && rental.status !== "confirmed") {
+        let errorMessage = "This rental cannot be cancelled";
+        if (rental.status === "active") {
+          errorMessage = "Cannot cancel rental - the rental period has already started";
+        } else if (rental.status === "completed") {
+          errorMessage = "Cannot cancel rental - the rental has already been completed";
+        } else if (rental.status === "cancelled") {
+          errorMessage = "This rental has already been cancelled";
+        }
+        setError(errorMessage);
+        return;
+      }
+
       const response = await rentalAPI.getRefundPreview(rental.id);
       setRefundPreview(response.data);
     } catch (error: any) {
@@ -53,11 +68,18 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
   const handleCancel = async () => {
     if (!refundPreview) return;
 
+    // Validate reason is provided
+    const trimmedReason = reason.trim();
+    if (!trimmedReason) {
+      setError("Please provide a cancellation reason");
+      return;
+    }
+
     try {
       setProcessing(true);
       setError(null);
 
-      const response = await rentalAPI.cancelRental(rental.id, reason.trim());
+      const response = await rentalAPI.cancelRental(rental.id, trimmedReason);
       
       // Store refund details for confirmation screen
       setProcessedRefund({
@@ -262,7 +284,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
                 <form>
                   <div className="mb-3">
                     <label className="form-label">
-                      Cancellation Reason (Optional)
+                      Cancellation Reason <span className="text-danger">*</span>
                     </label>
                     <textarea
                       className="form-control"
@@ -271,6 +293,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
                       onChange={(e) => setReason(e.target.value)}
                       placeholder="Please provide a reason for cancellation..."
                       maxLength={500}
+                      required
                     />
                     <div className="form-text text-muted">
                       {reason.length}/500 characters
@@ -306,7 +329,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
                     type="button"
                     className="btn btn-danger"
                     onClick={handleCancel}
-                    disabled={processing || loading}
+                    disabled={processing || loading || !reason.trim()}
                   >
                     {processing ? (
                       <>
diff --git a/frontend/src/pages/MyListings.tsx b/frontend/src/pages/MyListings.tsx
index e9fce46..05c2fed 100644
--- a/frontend/src/pages/MyListings.tsx
+++ b/frontend/src/pages/MyListings.tsx
@@ -6,6 +6,7 @@ import { Item, Rental } from "../types";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
 import ReviewRenterModal from "../components/ReviewRenterModal";
 import RentalCancellationModal from "../components/RentalCancellationModal";
+import DeclineRentalModal from "../components/DeclineRentalModal";
 import ConditionCheckModal from "../components/ConditionCheckModal";
 import ReturnStatusModal from "../components/ReturnStatusModal";
 
@@ -51,6 +52,8 @@ const MyListings: React.FC = () => {
     useState<Rental | null>(null);
   const [showCancelModal, setShowCancelModal] = useState(false);
   const [rentalToCancel, setRentalToCancel] = useState<Rental | null>(null);
+  const [showDeclineModal, setShowDeclineModal] = useState(false);
+  const [rentalToDecline, setRentalToDecline] = useState<Rental | null>(null);
   const [isProcessingPayment, setIsProcessingPayment] = useState<string>("");
   const [processingSuccess, setProcessingSuccess] = useState<string>("");
   const [showConditionCheckModal, setShowConditionCheckModal] = useState(false);
@@ -179,14 +182,20 @@ const MyListings: React.FC = () => {
     }
   };
 
-  const handleRejectRental = async (rentalId: string) => {
-    try {
-      await rentalAPI.updateRentalStatus(rentalId, "cancelled");
-      fetchOwnerRentals();
-    } catch (err) {
-      console.error("Failed to reject rental request:", err);
-      alert("Failed to reject rental request");
-    }
+  const handleDeclineClick = (rental: Rental) => {
+    setRentalToDecline(rental);
+    setShowDeclineModal(true);
+  };
+
+  const handleDeclineComplete = (updatedRental: Rental) => {
+    // Update the rental in the owner rentals list
+    setOwnerRentals((prev) =>
+      prev.map((rental) =>
+        rental.id === updatedRental.id ? updatedRental : rental
+      )
+    );
+    setShowDeclineModal(false);
+    setRentalToDecline(null);
   };
 
   const handleCompleteClick = (rental: Rental) => {
@@ -252,9 +261,7 @@ const MyListings: React.FC = () => {
 
   // Filter owner rentals - exclude cancelled (shown in Rental History)
   const allOwnerRentals = ownerRentals
-    .filter((r) =>
-      ["pending", "confirmed", "active"].includes(r.status)
-    )
+    .filter((r) => ["pending", "confirmed", "active"].includes(r.status))
     .sort((a, b) => {
       const statusOrder = { pending: 0, confirmed: 1, active: 2 };
       return (
@@ -408,12 +415,12 @@ const MyListings: React.FC = () => {
                                       Loading...
                                     </span>
                                   </div>
-                                  Processing Payment...
+                                  Confirming...
                                 </>
                               ) : processingSuccess === rental.id ? (
                                 <>
                                   <i className="bi bi-check-circle me-1"></i>
-                                  Payment Success!
+                                  Confirmed!
                                 </>
                               ) : (
                                 "Accept"
@@ -421,15 +428,9 @@ const MyListings: React.FC = () => {
                             </button>
                             <button
                               className="btn btn-sm btn-danger"
-                              onClick={() => handleRejectRental(rental.id)}
+                              onClick={() => handleDeclineClick(rental)}
                             >
-                              Reject
-                            </button>
-                            <button
-                              className="btn btn-sm btn-outline-danger"
-                              onClick={() => handleCancelClick(rental)}
-                            >
-                              Cancel
+                              Decline
                             </button>
                           </>
                         )}
@@ -649,6 +650,19 @@ const MyListings: React.FC = () => {
         />
       )}
 
+      {/* Decline Modal */}
+      {rentalToDecline && (
+        <DeclineRentalModal
+          show={showDeclineModal}
+          onHide={() => {
+            setShowDeclineModal(false);
+            setRentalToDecline(null);
+          }}
+          rental={rentalToDecline}
+          onDeclineComplete={handleDeclineComplete}
+        />
+      )}
+
       {/* Condition Check Modal */}
       {conditionCheckData && (
         <ConditionCheckModal
diff --git a/frontend/src/pages/MyRentals.tsx b/frontend/src/pages/MyRentals.tsx
index 0506920..c1ebd7e 100644
--- a/frontend/src/pages/MyRentals.tsx
+++ b/frontend/src/pages/MyRentals.tsx
@@ -170,9 +170,9 @@ const MyRentals: React.FC = () => {
     );
   };
 
-  // Filter rentals - only show active rentals (pending, confirmed, active)
+  // Filter rentals - show active and declined rentals
   const renterActiveRentals = rentals.filter((r) =>
-    ["pending", "confirmed", "active"].includes(r.status)
+    ["pending", "confirmed", "declined", "active"].includes(r.status)
   );
 
   if (loading) {
@@ -251,6 +251,8 @@ const MyRentals: React.FC = () => {
                             ? "bg-warning"
                             : rental.status === "confirmed"
                             ? "bg-info"
+                            : rental.status === "declined"
+                            ? "bg-secondary"
                             : "bg-danger"
                         }`}
                       >
@@ -258,6 +260,8 @@ const MyRentals: React.FC = () => {
                           ? "Awaiting Owner Approval"
                           : rental.status === "confirmed"
                           ? "Confirmed & Paid"
+                          : rental.status === "declined"
+                          ? "Declined by Owner"
                           : rental.status.charAt(0).toUpperCase() +
                             rental.status.slice(1)}
                       </span>
@@ -295,14 +299,15 @@ const MyRentals: React.FC = () => {
                         </div>
                       )}
 
+                    {rental.status === "declined" && rental.declineReason && (
+                      <div className="alert alert-warning mt-2 mb-1 p-2 small">
+                        <strong>Decline reason:</strong>{" "}
+                        {rental.declineReason}
+                      </div>
+                    )}
+
                     {rental.status === "cancelled" && (
                       <>
-                        {rental.rejectionReason && (
-                          <div className="alert alert-warning mt-2 mb-1 p-2 small">
-                            <strong>Rejection reason:</strong>{" "}
-                            {rental.rejectionReason}
-                          </div>
-                        )}
                         {rental.refundAmount !== undefined && (
                           <div className="alert alert-info mt-2 mb-1 p-2 small">
                             <strong>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 134ccc3..44c8e46 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -940,11 +940,11 @@ const Profile: React.FC = () => {
                                   </p>
                                 )}
 
-                                {rental.status === "cancelled" &&
-                                  rental.rejectionReason && (
+                                {rental.status === "declined" &&
+                                  rental.declineReason && (
                                     <div className="alert alert-warning mt-2 mb-1 p-2 small">
-                                      <strong>Rejection reason:</strong>{" "}
-                                      {rental.rejectionReason}
+                                      <strong>Decline reason:</strong>{" "}
+                                      {rental.declineReason}
                                     </div>
                                   )}
 
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 122f861..df06bdf 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -219,6 +219,8 @@ export const rentalAPI = {
     }),
   cancelRental: (id: string, reason?: string) =>
     api.post(`/rentals/${id}/cancel`, { reason }),
+  declineRental: (id: string, reason?: string) =>
+    api.put(`/rentals/${id}/decline`, { reason }),
   // Return status marking
   markReturn: (
     id: string,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ba8ac5f..f64f7ff 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -110,10 +110,12 @@ export interface Rental {
   status:
     | "pending"
     | "confirmed"
+    | "declined"
     | "active"
     | "completed"
     | "cancelled"
     | "returned_late"
+    | "returned_late_and_damaged"
     | "damaged"
     | "lost";
   paymentStatus: "pending" | "paid" | "refunded";
@@ -135,7 +137,7 @@ export interface Rental {
   notes?: string;
   rating?: number;
   review?: string;
-  rejectionReason?: string;
+  declineReason?: string;
   // New review fields
   itemRating?: number;
   itemReview?: string;