diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ef1b3531..3e744e9b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -45,6 +45,7 @@
         "react-icons": "^5.3.0",
         "react-leaflet": "^4.2.1",
         "react-modal": "^3.16.1",
+        "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^6.24.1",
         "react-toastify": "^10.0.6",
         "react-tsparticles": "^2.12.2",
@@ -6527,6 +6528,17 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-fontawesome": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
@@ -6623,6 +6635,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.26.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a4d00ba7..3568443f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,6 +47,7 @@
     "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
     "react-modal": "^3.16.1",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.24.1",
     "react-toastify": "^10.0.6",
     "react-tsparticles": "^2.12.2",
diff --git a/frontend/src/AgroRentAI/RentUserDashboard.jsx b/frontend/src/AgroRentAI/RentUserDashboard.jsx
index 0756aa13..c00c2d1a 100644
--- a/frontend/src/AgroRentAI/RentUserDashboard.jsx
+++ b/frontend/src/AgroRentAI/RentUserDashboard.jsx
@@ -12,6 +12,8 @@ import {
   LifeBuoy,
   FileText,
   Package,
+  AlertTriangle,
+  Settings,
 } from "lucide-react";
 import ProfileComponent from "./components/AccountInformation";
 import RentalHistoryComponent from "./components/RentalHistory";
@@ -23,6 +25,8 @@ import SecurityPrivacyComponent from "./components/SecurityPrivacyComponent";
 import SupportAssistanceComponent from "./components/SupportAssistance";
 import SubscriptionMembershipComponent from "./components/Subscription";
 import OrderDeliveryTrackingComponent from "./components/OrderTracking";
+import RentalRemindersComponent from "./components/RentalReminders";
+import PersonalizationSettingsComponent from "./components/PersonalizationSettings";
 
 const RentUserDashboard = () => {
   const [profile, setProfile] = useState({
@@ -125,6 +129,10 @@ const RentUserDashboard = () => {
         return <SubscriptionMembershipComponent />;
       case "Order & Delivery Tracking":
         return <OrderDeliveryTrackingComponent rentals={rentals} />;
+        case "Rental Reminders":
+          return <RentalRemindersComponent  />;
+        case "Personalization Settings":
+          return <PersonalizationSettingsComponent />;
       default:
         return null;
     }
@@ -182,6 +190,9 @@ const RentUserDashboard = () => {
           <li className="cursor-pointer" onClick={() => setActiveSection("Order & Delivery Tracking")}>
             <Package className="inline mr-2" /> Order & Delivery Tracking
           </li>
+          <li onClick={() => setActiveSection("Rental Reminders")}><AlertTriangle className="inline mr-2" /> Rental Reminders</li>
+          <li onClick={() => setActiveSection("Personalization Settings")}><Settings className="inline mr-2" /> Personalization Settings</li>
+          
         </ul>
       </div>
 
diff --git a/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx b/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx
new file mode 100644
index 00000000..377f0d9f
--- /dev/null
+++ b/frontend/src/AgroRentAI/components/PersonalizationSettings.jsx
@@ -0,0 +1,115 @@
+// src/components/PersonalizationSettings.js
+import React, { useState } from "react";
+
+const PersonalizationSettingsComponent = () => {
+  const [emailNotifications, setEmailNotifications] = useState(true);
+  const [promoNotifications, setPromoNotifications] = useState(false);
+  const [favoriteCategories, setFavoriteCategories] = useState(["Agriculture", "Gardening"]);
+  const [preferredDuration, setPreferredDuration] = useState("Weekly");
+  const [budgetRange, setBudgetRange] = useState(100);
+  const [themePreference, setThemePreference] = useState("Light");
+
+  const handleEmailNotificationToggle = () => setEmailNotifications(!emailNotifications);
+  const handlePromoNotificationToggle = () => setPromoNotifications(!promoNotifications);
+  const handleCategoryChange = (event) => {
+    const category = event.target.value;
+    setFavoriteCategories((prevCategories) =>
+      prevCategories.includes(category)
+        ? prevCategories.filter((cat) => cat !== category)
+        : [...prevCategories, category]
+    );
+  };
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-md">
+      <h3 className="text-xl font-semibold text-green-700 mb-4">Personalization Settings</h3>
+
+      {/* Email Notifications */}
+      <div className="mb-6">
+        <label className="flex items-center">
+          <input
+            type="checkbox"
+            checked={emailNotifications}
+            onChange={handleEmailNotificationToggle}
+            className="mr-2"
+          />
+          Receive Email Notifications
+        </label>
+      </div>
+
+      {/* Promotional Notifications */}
+      <div className="mb-6">
+        <label className="flex items-center">
+          <input
+            type="checkbox"
+            checked={promoNotifications}
+            onChange={handlePromoNotificationToggle}
+            className="mr-2"
+          />
+          Receive Promotional Offers Notifications
+        </label>
+      </div>
+
+      {/* Favorite Categories */}
+      <div className="mb-6">
+        <h4 className="font-semibold text-gray-700 mb-2">Favorite Categories</h4>
+        {["Agriculture", "Gardening", "Landscaping", "Tools", "Machinery"].map((category) => (
+          <label key={category} className="flex items-center mb-2">
+            <input
+              type="checkbox"
+              value={category}
+              checked={favoriteCategories.includes(category)}
+              onChange={handleCategoryChange}
+              className="mr-2"
+            />
+            {category}
+          </label>
+        ))}
+      </div>
+
+      {/* Preferred Rental Duration */}
+      <div className="mb-6">
+        <h4 className="font-semibold text-gray-700 mb-2">Preferred Rental Duration</h4>
+        <select
+          value={preferredDuration}
+          onChange={(e) => setPreferredDuration(e.target.value)}
+          className="p-2 border border-gray-300 rounded-lg w-full"
+        >
+          <option value="Daily">Daily</option>
+          <option value="Weekly">Weekly</option>
+          <option value="Monthly">Monthly</option>
+        </select>
+      </div>
+
+      {/* Budget Range */}
+      <div className="mb-6">
+        <h4 className="font-semibold text-gray-700 mb-2">Rental Budget Range</h4>
+        <input
+          type="range"
+          min="50"
+          max="500"
+          value={budgetRange}
+          onChange={(e) => setBudgetRange(e.target.value)}
+          className="w-full"
+        />
+        <div className="text-gray-600 mt-2">Selected Budget: ${budgetRange}</div>
+      </div>
+
+      {/* Theme Preference */}
+      <div className="mb-6">
+        <h4 className="font-semibold text-gray-700 mb-2">Theme Preference</h4>
+        <select
+          value={themePreference}
+          onChange={(e) => setThemePreference(e.target.value)}
+          className="p-2 border border-gray-300 rounded-lg w-full"
+        >
+          <option value="Light">Light</option>
+          <option value="Dark">Dark</option>
+          <option value="System Default">System Default</option>
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalizationSettingsComponent;
diff --git a/frontend/src/AgroRentAI/components/RentalReminders.jsx b/frontend/src/AgroRentAI/components/RentalReminders.jsx
new file mode 100644
index 00000000..4b7bd175
--- /dev/null
+++ b/frontend/src/AgroRentAI/components/RentalReminders.jsx
@@ -0,0 +1,97 @@
+// src/components/RentalReminders.js
+import React from "react";
+import { toast, ToastContainer } from "react-toastify";
+
+const RentalRemindersComponent = () => {
+  // Dummy reminders data
+  const reminders = [
+    {
+      id: 1,
+      itemName: "Tractor",
+      dueDate: "2024-11-15",
+      status: "Active",
+      duration: 7,
+      remainingDays: 3,
+      cost: 150,
+    },
+    {
+      id: 2,
+      itemName: "Plow",
+      dueDate: "2024-11-18",
+      status: "Active",
+      duration: 5,
+      remainingDays: 6,
+      cost: 80,
+    },
+    {
+      id: 3,
+      itemName: "Seeder",
+      dueDate: "2024-11-20",
+      status: "Overdue",
+      duration: 10,
+      remainingDays: -2,
+      cost: 200,
+    },
+  ];
+
+  const handleExtendRental = (id) => {
+    toast.success(`Extend rental for item ID: ${id}`);
+  };
+
+  const handleViewDetails = (id) => {
+   return;
+  };
+
+  const handleContactSupport = (id) => {
+  return
+  };
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-md">
+        <ToastContainer/>
+      <h3 className="text-xl font-semibold text-green-700 mb-4">Rental Reminders</h3>
+      {reminders.length > 0 ? (
+        reminders.map((reminder) => (
+          <div key={reminder.id} className="p-4 mb-4 bg-green-50 border border-green-200 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-lg font-semibold text-gray-800">{reminder.itemName}</h4>
+              <span className="text-sm text-gray-600">Due Date: {reminder.dueDate}</span>
+            </div>
+
+            <div className="text-gray-800 mb-2">
+              <p><strong>Status:</strong> {reminder.status}</p>
+              <p><strong>Rental Duration:</strong> {reminder.duration} days</p>
+              <p><strong>Days Left:</strong> {reminder.remainingDays >= 0 ? `${reminder.remainingDays} days` : "Overdue"}</p>
+              <p><strong>Total Rental Cost:</strong> ${reminder.cost}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 mt-3">
+              <button
+                className="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded-lg text-sm"
+                onClick={() => handleExtendRental(reminder.id)}
+              >
+                Extend Rental
+              </button>
+              <button
+                className="bg-yellow-500 hover:bg-yellow-600 text-white py-1 px-3 rounded-lg text-sm"
+                onClick={() => handleViewDetails(reminder.id)}
+              >
+                View Details
+              </button>
+              <button
+                className="bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded-lg text-sm"
+                onClick={() => handleContactSupport(reminder.id)}
+              >
+                Contact Support
+              </button>
+            </div>
+          </div>
+        ))
+      ) : (
+        <p className="text-gray-500">No rental reminders at this time.</p>
+      )}
+    </div>
+  );
+};
+
+export default RentalRemindersComponent;
diff --git a/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx b/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx
index 5010350e..42e3e4cc 100644
--- a/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx
+++ b/frontend/src/AgroRentAI/components/sub-components/Recommendations.jsx
@@ -1,16 +1,44 @@
 import React from "react";
 import ProductCard from "./ProductCard";
+import { motion } from "framer-motion";
+import { BsArrowRight } from "react-icons/bs"; // Importing an icon for CTA button
+import { Carousel } from "react-responsive-carousel"; // Carousel package
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // Carousel styling
 
 const Recommendations = ({ products }) => {
-  const recommended = products.slice(0, 4); // Just a slice for demonstration
+  const recommended = products.slice(0, 8); // More recommendations for a full carousel
 
   return (
-    <div className="my-8">
-      <h3 className="text-2xl font-semibold mb-6 text-center">Recommended Products</h3>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+    <div className="my-10 py-10 bg-gradient-to-r from-green-100 to-green-200 rounded-lg shadow-lg">
+      <h3 className="text-3xl font-semibold text-center text-green-800 mb-6">Recommended for You</h3>
+
+      {/* Carousel for recommended products */}
+      <Carousel
+        showArrows
+        infiniteLoop
+        showThumbs={false}
+        autoPlay
+        interval={4000}
+        transitionTime={600}
+        className="max-w-6xl mx-auto"
+      >
         {recommended.map((product) => (
-          <ProductCard key={product._id} product={product} />
+          <motion.div
+            key={product._id}
+            className="p-4"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <ProductCard product={product} />
+          </motion.div>
         ))}
+      </Carousel>
+
+      {/* "View All" CTA button */}
+      <div className="flex justify-center mt-8">
+        <button className="flex items-center bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-all">
+          View All <BsArrowRight className="ml-2" />
+        </button>
       </div>
     </div>
   );