update to the color

backend/controllers/user.js

@@ -134,6 +134,62 @@ exports.completeSignUp = async (req, res) => {
   }
 };
 
+exports.doLogin = async (req, res) => {
+  const { email, password } = req.body;
+
+  // Input validation
+  if (!email || !password) {
+    return res.status(400).json({
+      found: false,
+      error: "Email and password are required",
+    });
+  }
+
+  try {
+    // Query to find user with matching email
+    const query = "SELECT * FROM User WHERE email = ?";
+    const [data, fields] = await db.execute(query, [email]);
+
+    // Check if user was found
+    if (data && data.length > 0) {
+      const user = data[0];
+
+      // Verify password match
+      if (user.Password === password) {
+        // Consider using bcrypt for secure password comparison
+        // Return user data without password
+        return res.json({
+          found: true,
+          userID: user.UserID,
+          name: user.Name,
+          email: user.Email,
+          UCID: user.UCID,
+          phone: user.Phone,
+          address: user.Address,
+        });
+      } else {
+        // Password doesn't match
+        return res.json({
+          found: false,
+          error: "Invalid email or password",
+        });
+      }
+    } else {
+      // User not found
+      return res.json({
+        found: false,
+        error: "Invalid email or password",
+      });
+    }
+  } catch (error) {
+    console.error("Error logging in:", error);
+    return res.status(500).json({
+      found: false,
+      error: "Database error occurred",
+    });
+  }
+};
+
 exports.getAllUser = async (req, res) => {
   try {
     const [users, fields] = await db.execute("SELECT * FROM User;");
@@ -174,6 +230,7 @@ exports.findUserByEmail = async (req, res) => {
         UCID: user.UCID,
         phone: user.Phone,
         address: user.Address,
+        password: user.Password,
         // Include any other fields your user might have
         // Make sure the field names match exactly with your database column names
       });
@@ -201,7 +258,7 @@ exports.updateUser = async (req, res) => {
     const phone = req.body?.phone;
     const UCID = req.body?.UCID;
     const address = req.body?.address;
-
+    const password = req.body?.password;
     if (!userId) {
       return res.status(400).json({ error: "User ID is required" });
     }
@@ -213,7 +270,7 @@ exports.updateUser = async (req, res) => {
     if (phone) updateData.phone = phone;
     if (UCID) updateData.UCID = UCID;
     if (address) updateData.address = address;
-
+    if (password) updateData.password = password;
     if (Object.keys(updateData).length === 0) {
       return res.status(400).json({ error: "No valid fields to update" });
     }

backend/routes/user.js

@@ -7,6 +7,7 @@ const {
   findUserByEmail,
   updateUser,
   deleteUser,
+  doLogin,
 } = require("../controllers/user");
 
 const router = express.Router();
@@ -26,6 +27,9 @@ router.get("/fetch_all_users", getAllUser);
 //Fetch One user Data with all fields:
 router.post("/find_user", findUserByEmail);
 
+//Fetch One user Data with all fields:
+router.post("/do_login", doLogin);
+
 //Update A uses Data:
 router.post("/update", updateUser);
 

frontend/src/App.jsx

@@ -52,10 +52,9 @@ function App() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-
+  useEffect(() => {
-useEffect(() => {
     sendSessionDataToServer();
-}, []);
+  }, []);
 
   // Send verification code
   const sendVerificationCode = async (userData) => {
@@ -250,7 +249,7 @@ useEffect(() => {
           UCID: formValues.ucid,
           phone: formValues.phone,
           password: formValues.password, // This will be needed for the final signup
-          address: "NOT_GIVEN",
+          address: formValues.address, // Add this line
           client: 1,
           admin: 0,
         };
@@ -266,7 +265,7 @@ useEffect(() => {
 
         // Make API call to localhost:3030/find_user
         const response = await fetch(
-          "http://localhost:3030/api/user/find_user",
+          "http://localhost:3030/api/user/do_login",
           {
             method: "POST",
             headers: {
@@ -301,7 +300,7 @@ useEffect(() => {
           // Save to localStorage to persist across refreshes
           sessionStorage.setItem("isAuthenticated", "true");
           sessionStorage.setItem("user", JSON.stringify(userObj));
-          sendSessionDataToServer(); // Call it after signup
+
           sessionStorage.getItem("user");
 
           console.log("Login successful for:", userData.email);
@@ -370,8 +369,8 @@ useEffect(() => {
     try {
       // Retrieve data from sessionStorage
       const user = JSON.parse(sessionStorage.getItem("user"));
-      const isAuthenticated =
+      // const isAuthenticated =
-        sessionStorage.getItem("isAuthenticated") === "true";
+      //   sessionStorage.getItem("isAuthenticated") === "true";
 
       if (!user || !isAuthenticated) {
         console.log("User is not authenticated");
@@ -532,6 +531,25 @@ useEffect(() => {
                   </div>
                 )}
 
+                {isSignUp && (
+                  <div>
+                    <label
+                      htmlFor="address"
+                      className="block mb-1 text-sm font-medium text-gray-800"
+                    >
+                      Address
+                    </label>
+                    <input
+                      type="text"
+                      id="address"
+                      name="address"
+                      placeholder="Your address"
+                      className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                      required={isSignUp}
+                    />
+                  </div>
+                )}
+
                 <div>
                   <label
                     htmlFor="password"

frontend/src/components/ProductForm.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { X, ChevronLeft, Plus, Trash2 } from "lucide-react";
+import { X, ChevronLeft, Plus, Trash2, Check } from "lucide-react";
 
 const ProductForm = ({
   editingProduct,
@@ -50,12 +50,19 @@ const ProductForm = ({
     }));
   };
 
+  const toggleSoldStatus = () => {
+    setEditingProduct((prev) => ({
+      ...prev,
+      isSold: !prev.isSold,
+    }));
+  };
+
   return (
     <div className="bg-white border border-gray-200 shadow-md p-6">
       {/* Back Button */}
       <button
         onClick={onCancel}
-        className="mb-4 text-blue-600 hover:text-blue-800 flex items-center gap-1"
+        className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
       >
         <ChevronLeft size={16} />
         <span>Back to Listings</span>
@@ -77,7 +84,7 @@ const ProductForm = ({
             onChange={(e) =>
               setEditingProduct({ ...editingProduct, name: e.target.value })
             }
-            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
           />
         </div>
 
@@ -95,10 +102,31 @@ const ProductForm = ({
                 price: e.target.value,
               })
             }
-            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
           />
         </div>
 
+        {/* Sold Status */}
+        <div className="md:col-span-2">
+          <div className="flex items-center mt-2">
+            <input
+              type="checkbox"
+              id="soldStatus"
+              checked={editingProduct.isSold || false}
+              onChange={toggleSoldStatus}
+              className="w-4 h-4 text-emerald-600 rounded focus:ring-emerald-500"
+            />
+            <label htmlFor="soldStatus" className="ml-2 text-sm text-gray-700">
+              Mark as {editingProduct.isSold ? "Available" : "Sold"}
+            </label>
+            {editingProduct.isSold && (
+              <span className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                Sold
+              </span>
+            )}
+          </div>
+        </div>
+
         {/* Categories */}
         <div className="md:col-span-2">
           <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -108,7 +136,7 @@ const ProductForm = ({
             <select
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
-              className="flex-1 px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
+              className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
             >
               <option value="" disabled>
                 Select a category
@@ -127,7 +155,7 @@ const ProductForm = ({
               type="button"
               onClick={addCategory}
               disabled={!selectedCategory}
-              className="px-3 py-2 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
+              className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
             >
               <Plus size={16} />
               <span>Add</span>
@@ -140,13 +168,13 @@ const ProductForm = ({
               {(editingProduct.categories || []).map((category) => (
                 <span
                   key={category}
-                  className="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800"
+                  className="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-800"
                 >
                   {category}
                   <button
                     type="button"
                     onClick={() => removeCategory(category)}
-                    className="ml-1 text-blue-600 hover:text-blue-800"
+                    className="ml-1 text-emerald-600 hover:text-emerald-800"
                   >
                     <X size={14} />
                   </button>
@@ -160,26 +188,6 @@ const ProductForm = ({
           )}
         </div>
 
-        {/* Status */}
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
-            Status
-          </label>
-          <select
-            value={editingProduct.status || "Unsold"}
-            onChange={(e) =>
-              setEditingProduct({
-                ...editingProduct,
-                status: e.target.value,
-              })
-            }
-            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
-          >
-            <option value="Unsold">Unsold</option>
-            <option value="Sold">Sold</option>
-          </select>
-        </div>
-
         {/* Description */}
         <div className="md:col-span-2">
           <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -194,7 +202,7 @@ const ProductForm = ({
               })
             }
             rows="4"
-            className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
+            className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
             placeholder="Describe your product in detail..."
           ></textarea>
         </div>
@@ -223,7 +231,7 @@ const ProductForm = ({
             htmlFor="image-upload"
             className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
           >
-            <span className="text-blue-600 font-medium">
+            <span className="text-emerald-600 font-medium">
               Click to upload images
             </span>
           </label>
@@ -280,21 +288,35 @@ const ProductForm = ({
       </div>
 
       {/* Actions */}
-      <div className="mt-6 flex justify-end gap-3 border-t border-gray-200 pt-4">
+      <div className="mt-6 flex justify-between border-t border-gray-200 pt-4">
+        <button
+          onClick={toggleSoldStatus}
+          className={`flex items-center gap-1 px-4 py-2 rounded-md transition-colors ${
+            editingProduct.isSold
+              ? "bg-green-100 text-green-700 hover:bg-green-200"
+              : "bg-red-100 text-red-700 hover:bg-red-200"
+          }`}
+        >
+          <Check size={16} />
+          <span>Mark as {editingProduct.isSold ? "Available" : "Sold"}</span>
+        </button>
+
+        <div className="flex gap-3">
           <button
             onClick={onCancel}
-          className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200"
+            className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200 rounded-md"
           >
             Cancel
           </button>
           <button
             onClick={onSave}
-          className="bg-blue-600 text-white px-6 py-2 hover:bg-blue-700"
+            className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
           >
             {editingProduct.id ? "Update Product" : "Add Product"}
           </button>
         </div>
       </div>
+    </div>
   );
 };
 

frontend/src/pages/Favorites.jsx

@@ -129,7 +129,7 @@ const Favorites = () => {
           {sortedFavorites.map((product) => (
             <div
               key={product.id}
-              className="border-2 border-gray-200 rounded overflow-hidden hover:shadow-md transition-shadow"
+              className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
             >
               <Link to={`/product/${product.id}`}>
                 <div className="h-48 bg-gray-200 flex items-center justify-center">
@@ -150,10 +150,14 @@ const Favorites = () => {
                       {product.name}
                     </h3>
                     <button
-                      onClick={() => removeFromFavorites(product.id)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        removeFromFavorites(product.id);
+                      }}
                       className="text-red-500 hover:text-red-600"
                     >
-                      <Trash2 size={18} />
+                      <Trash2 size={24} />
                     </button>
                   </div>
 

frontend/src/pages/Home.jsx

@@ -1,6 +1,12 @@
 import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { Tag, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Tag,
+  ChevronLeft,
+  ChevronRight,
+  Bookmark,
+  BookmarkCheck,
+} from "lucide-react";
 
 import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
 
@@ -246,7 +252,7 @@ const Home = () => {
             {/* Scrollable Listings Container */}
             <div
               id="RecomContainer"
-              className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+              className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded"
             >
               {recommended.map((recommended) => (
                 <Link
@@ -267,9 +273,9 @@ const Home = () => {
                         e.preventDefault();
                         toggleFavorite(recommended.id);
                       }}
-                      className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
                     >
-                      <span className="text-xl font-bold text-gray-600">+</span>
+                      <Bookmark className="text-white w-5 h-5" />
                     </button>
                   </div>
 
@@ -362,9 +368,9 @@ const Home = () => {
                         e.preventDefault();
                         toggleFavorite(listing.id);
                       }}
-                      className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
                     >
-                      <span className="text-xl font-bold text-gray-600">+</span>
+                      <Bookmark className="text-white w-5 h-5" />
                     </button>
                   </div>
 
@@ -454,9 +460,9 @@ const Home = () => {
                         e.preventDefault();
                         toggleFavorite(history.id);
                       }}
-                      className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
+                      className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
                     >
-                      <span className="text-xl font-bold text-gray-600">+</span>
+                      <Bookmark className="text-white w-5 h-5" />
                     </button>
                   </div>
 

frontend/src/pages/ProductDetail.jsx

@@ -9,6 +9,7 @@ import {
   Star,
   Phone,
   Mail,
+  Bookmark,
 } from "lucide-react";
 import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
 
@@ -247,7 +248,7 @@ const ProductDetail = () => {
   if (loading.product) {
     return (
       <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-500"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
       </div>
     );
   }
@@ -261,7 +262,7 @@ const ProductDetail = () => {
           <p className="text-gray-600">{error.product}</p>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2 hover:bg-emerald-600"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
           >
             Back to Listings
           </Link>
@@ -278,7 +279,7 @@ const ProductDetail = () => {
           <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
           <Link
             to="/"
-            className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2  hover:bg-emerald-600"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2  hover:bg-green-600"
           >
             Back to Listings
           </Link>
@@ -293,7 +294,7 @@ const ProductDetail = () => {
       <div className="mb-6">
         <Link
           to="/search"
-          className="flex items-center text-emerald-600 hover:text-emerald-700"
+          className="flex items-center text-green-600 hover:text-green-700"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
           <span>Back</span>
@@ -350,7 +351,7 @@ const ProductDetail = () => {
               {product.images.map((image, index) => (
                 <div
                   key={index}
-                  className={`bg-white border ${currentImage === index ? "border-emerald-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                   onClick={() => selectImage(index)}
                 >
                   <img
@@ -375,17 +376,18 @@ const ProductDetail = () => {
                 {product.Name || "Unnamed Product"}
               </h1>
               <button
-                onClick={() => toggleFavorite(product.ProductID)}
+                onClick={(e) => {
-                className="p-2 hover:bg-gray-100"
+                  e.stopPropagation();
-                aria-label={
+                  e.preventDefault();
-                  isFavorite ? "Remove from favorites" : "Add to favorites"
+                  toggleFavorite(product.ProductID);
-                }
+                }}
+                className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
               >
-                <Heart className={`h-6 w-6 ext-red-500 fill-red-500`} />
+                <Bookmark className="text-white w-5 h-5" />
               </button>
             </div>
 
-            <div className="text-2xl font-bold text-emerald-600 mb-4">
+            <div className="text-2xl font-bold text-green-600 mb-4">
               $
               {typeof product.Price === "number"
                 ? product.Price.toFixed(2)
@@ -416,7 +418,7 @@ const ProductDetail = () => {
             <div className="relative">
               <button
                 onClick={() => setShowContactOptions(!showContactOptions)}
-                className="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-3 px-4 mb-3"
+                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
               >
                 Contact Seller
               </button>
@@ -428,7 +430,7 @@ const ProductDetail = () => {
                       href={`tel:${product.SellerPhone}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
                     >
-                      <Phone className="h-5 w-5 text-emerald-500" />
+                      <Phone className="h-5 w-5 text-green-500" />
                       <span>Call Seller</span>
                     </a>
                   )}
@@ -438,7 +440,7 @@ const ProductDetail = () => {
                       href={`mailto:${product.SellerEmail}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50"
                     >
-                      <Mail className="h-5 w-5 text-emerald-500" />
+                      <Mail className="h-5 w-5 text-green-500" />
                       <span>Email Seller</span>
                     </a>
                   )}
@@ -475,7 +477,7 @@ const ProductDetail = () => {
         <div className="bg-white border border-gray-200 p-6">
           {loading.reviews ? (
             <div className="flex justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-500"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
             </div>
           ) : error.reviews ? (
             <div className="text-red-500 mb-4">
@@ -522,7 +524,7 @@ const ProductDetail = () => {
         <div className="mt-4">
           <button
             onClick={() => setShowReviewForm(true)}
-            className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
+            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
           >
             Write a Review
           </button>
@@ -580,7 +582,7 @@ const ProductDetail = () => {
                     id="comment"
                     value={reviewForm.comment}
                     onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
                     rows="4"
                     required
                   ></textarea>
@@ -596,7 +598,7 @@ const ProductDetail = () => {
                   </button>
                   <button
                     type="submit"
-                    className="px-4 py-2 bg-emerald-500 text-white  hover:bg-emerald-600"
+                    className="px-4 py-2 bg-green-500 text-white  hover:bg-green-600"
                     disabled={loading.submitting}
                   >
                     {loading.submitting ? "Submitting..." : "Submit Review"}

frontend/src/pages/Settings.jsx

@@ -10,9 +10,7 @@ const Settings = () => {
     phone: "",
     UCID: "",
     address: "",
-    currentPassword: "",
+    password: "",
-    newPassword: "",
-    confirmPassword: "",
   });
 
   const [isLoading, setIsLoading] = useState(true);
@@ -62,10 +60,7 @@ const Settings = () => {
             UCID: data.UCID || storedUser.UCID || "",
             phone: data.phone || storedUser.phone || "",
             address: data.address || storedUser.address || "",
-            // Reset password fields
+            password: data.password,
-            currentPassword: "",
-            newPassword: "",
-            confirmPassword: "",
           }));
         } else {
           throw new Error(data.error || "Failed to retrieve user data");
@@ -146,41 +141,6 @@ const Settings = () => {
     }
   };
 
-  const handlePasswordUpdate = async (e) => {
-    e.preventDefault();
-    try {
-      // Validate passwords match
-      if (userData.newPassword !== userData.confirmPassword) {
-        alert("New passwords do not match!");
-        return;
-      }
-
-      // TODO: Implement the actual password update API call
-      console.log("Password updated");
-
-      // Update password in localStorage
-      const storedUser = JSON.parse(localStorage.getItem("user"));
-      const updatedUser = {
-        ...storedUser,
-        password: userData.newPassword,
-      };
-      localStorage.setItem("user", JSON.stringify(updatedUser));
-
-      // Reset password fields
-      setUserData((prevData) => ({
-        ...prevData,
-        currentPassword: "",
-        newPassword: "",
-        confirmPassword: "",
-      }));
-
-      alert("Password updated successfully!");
-    } catch (error) {
-      console.error("Error updating password:", error);
-      alert("Failed to update password: " + error.message);
-    }
-  };
-
   const handleDeleteAccount = async () => {
     if (
       window.confirm(
@@ -345,6 +305,21 @@ const Settings = () => {
                   className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
                 />
               </div>
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  password
+                </label>
+                <input
+                  type="text"
+                  id="password"
+                  value={userData.password}
+                  onChange={handleInputChange}
+                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
+                />
+              </div>
             </div>
 
             <button
@@ -357,84 +332,10 @@ const Settings = () => {
         </div>
       </div>
 
-      {/* Security Section */}
-      <div className="bg-white border border-gray-200 mb-6">
-        <div className="border-b border-gray-200 p-4">
-          <div className="flex items-center">
-            <Lock className="h-5 w-5 text-gray-500 mr-2" />
-            <h2 className="text-lg font-medium text-gray-800">Password</h2>
-          </div>
-        </div>
-
-        <div className="p-4">
-          <form onSubmit={handlePasswordUpdate}>
-            <div className="space-y-4 mb-4">
-              <div>
-                <label
-                  htmlFor="currentPassword"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Current Password
-                </label>
-                <input
-                  type="password"
-                  id="currentPassword"
-                  value={userData.currentPassword}
-                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
-                  required
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="newPassword"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  New Password
-                </label>
-                <input
-                  type="password"
-                  id="newPassword"
-                  value={userData.newPassword}
-                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
-                  required
-                />
-              </div>
-
-              <div>
-                <label
-                  htmlFor="confirmPassword"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Confirm New Password
-                </label>
-                <input
-                  type="password"
-                  id="confirmPassword"
-                  value={userData.confirmPassword}
-                  onChange={handleInputChange}
-                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
-                  required
-                />
-              </div>
-            </div>
-
-            <button
-              type="submit"
-              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
-            >
-              Change Password
-            </button>
-          </form>
-        </div>
-      </div>
-
       {/* Privacy Section */}
       {showAlert && (
         <FloatingAlert
-          message="Removed Your History! 😉"
+          message="We Removed Your History! 😉"
           onClose={() => setShowAlert(false)}
         />
       )}
@@ -448,7 +349,7 @@ const Settings = () => {
 
         <div className="p-4">
           <div className="space-y-4">
-            <div className="flex justify-between items-center pb-4 border-b border-gray-100">
+            <div className="flex justify-between items-center">
               <div className="flex items-start">
                 <History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
                 <div>