diff --git a/src/App.js b/src/App.js
index b681309..8bc9b9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,6 +27,7 @@ import { db } from './firebase';
 import SellerForm from './pages/SellerRegistration';
 import GoToTop from './components/GoToTop/GoToTop';
 import { Account } from './components/AccountDetails/Account';
+import Compare from './pages/Compare';
 
 const MyContext = createContext();
 
@@ -49,10 +50,12 @@ function App() {
   const [data, setData] = useState([]);
   const [cartCount, setCartCount] = useState(0);
   const [wishlistCount, setWishlistCount] = useState(0);
+  const [compareCount, setCompareCount] = useState(0);
 
   useEffect(() => {
     fetchCartProducts();
     fetchWishlistProducts();
+    fetchCompareProducts();
   }, [isLogin]);
 
   const fetchCartProducts = async () => {
@@ -111,12 +114,26 @@ function App() {
 
     const is_Login = localStorage.getItem('isLogin');
     setIsLogin(is_Login);
-
+    
     setTimeout(() => {
       setProductData(data[1]);
       setIsloading(false);
     }, 3000);
   }, [isLogin]);
+  const fetchCompareProducts = async () => {
+    try {
+      const compareRef = doc(db, 'compare', uid);
+      const productsCollectionRef = collection(compareRef, 'products');
+      const querySnapshot = await getDocs(productsCollectionRef);
+      let products = [];
+      querySnapshot.forEach((doc) => {
+        products.push({ id: doc.id, ...doc.data() });
+      });
+      setCompareCount(products.length);
+    } catch (error) {
+      console.error('Error fetching compare products:', error);
+    }
+  };
 
   const getData = async (url) => {
     try {
@@ -222,7 +239,10 @@ function App() {
     wishlistCount,
     setWishlistCount,
     fetchCartProducts,
-    fetchWishlistProducts
+    fetchWishlistProducts,
+    fetchCompareProducts,
+    compareCount,
+    setCompareCount
   };
 
   return data && data.productData ? (
@@ -260,6 +280,7 @@ function App() {
           />
           <Route exact={true} path="/cart" element={<Cart />} />
           <Route exact={true} path="/wishlist" element={<Wishlist />} />
+          <Route exact={true} path="/compare" element={<Compare data={data} />} />
           <Route exact={true} path="/account" element={<Account />} />
 
           {/* sign in , signup Protection */}
diff --git a/src/components/header/header.js b/src/components/header/header.js
index 167032f..3754938 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -40,7 +40,7 @@ const Header = (props) => {
   const [isOpenNav, setIsOpenNav] = useState(false);
   const { cartCount, setCartCount } = useContext(MyContext);
   const { wishlistCount, setWishlistCount } = useContext(MyContext);
-
+  const { compareCount } = useContext(MyContext)
   const headerRef = useRef();
   const searchInput = useRef();
   const [profile, setProfile] = useState('');
@@ -254,13 +254,13 @@ const Header = (props) => {
                       <li className="list-inline-item">
                         <span>
                           <Link
-                            to={'/wishlist'}
+                            to={'/compare'}
                             style={{ textDecoration: 'none' }}
                           >
                             {' '}
                             <img src={IconCompare} />
                             <span className="badge bg-success rounded-circle">
-                              3
+                              {compareCount}
                             </span>
                             Compare
                           </Link>
@@ -395,7 +395,7 @@ const Header = (props) => {
             </li>
             <li>
               <Button className="align-items-center">
-                <Link to="">
+                <Link to="/compare">
                   {' '}
                   <img src={IconCompare} />
                   Compare
diff --git a/src/pages/Compare/index.js b/src/pages/Compare/index.js
new file mode 100644
index 0000000..3d3ffb2
--- /dev/null
+++ b/src/pages/Compare/index.js
@@ -0,0 +1,274 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import './style.css';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import Rating from '@mui/material/Rating';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Typography
+} from '@mui/material';
+import QuantityBox from '../../components/quantityBox';
+import { MyContext } from '../../App';
+import { getDatabase, ref, onValue, remove } from 'firebase/database';
+import { useNavigate } from 'react-router-dom';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import MapComponent from '../../components/map/ITEMmap';
+import { db } from '../../firebase';
+import {
+  collection,
+  deleteDoc,
+  doc,
+  getDocs,
+  onSnapshot
+} from 'firebase/firestore';
+const Compare = ({data}) => {
+  const [compareItems, setCompareItems] = useState([]);
+  const [error, setError] = useState(null);
+  const context = useContext(MyContext);
+  const navigate = useNavigate();
+  const [uid, setUid] = useState(localStorage.getItem('uid'));
+  useEffect(() => {
+    try {
+      if (context.isLogin === 'true') {
+        fetchCompareProducts();
+      } else {
+        navigate('/signIn'); // Navigate to About Us page if not logged in
+      }
+
+      window.scrollTo(0, 0);
+    } catch (error) {
+      console.error('Error:', error);
+      setError('Failed to fetch data from the server'); // Set error state if there's an error with database connection
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCompareProducts();
+  }, [db, uid]);
+
+  const fetchCompareProducts = async () => {
+    try {
+      const compareRef = doc(db, 'compare', uid);
+      const productsCollectionRef = collection(compareRef, 'products');
+      const querySnapshot = await getDocs(productsCollectionRef);
+      let products = [];
+      querySnapshot.forEach((doc) => {
+        products.push({ id: doc.id, ...doc.data() });
+      });
+      context.setCompareCount(products.length);
+      setCompareItems(products);
+    } catch (error) {
+      console.error('Error fetching compare products:', error);
+    }
+  };
+  const deleteCompareItem = async (uid, compareItemId) => {
+    const compareItemRef = doc(
+      db,
+      'compare',
+      uid,
+      'products',
+      compareItemId
+    );
+
+    try {
+      await deleteDoc(compareItemRef);
+      fetchCompareProducts();
+      console.log('Compare item deleted successfully.');
+    } catch (error) {
+      console.error('Error deleting Compare item:', error);
+    }
+  };
+
+  const deleteAllCompareItems = async (uid) => {
+    const productsCollectionRef = collection(db, 'compare', uid, 'products');
+
+    try {
+      const querySnapshot = await getDocs(productsCollectionRef);
+      querySnapshot.forEach(async (doc) => {
+        await deleteDoc(doc.ref);
+      });
+      await fetchCompareProducts();
+      console.log('All compare items deleted successfully.');
+    } catch (error) {
+      console.error('Error deleting compare items:', error);
+    }
+  };
+
+  return (
+    <>
+      {compareItems.length > 0 ? (
+        // Render cart section if cartItems array is not empty
+        <>
+          {context.windowWidth > 992 && (
+            <div className="breadcrumbWrapper mb-4">
+              <div className="container-fluid">
+                <ul className="breadcrumb breadcrumb2 mb-0">
+                  <li>
+                    <Link to={'/'}>Home</Link>
+                  </li>
+                  <li>Shop</li>
+                  <li>Compare</li>
+                </ul>
+              </div>
+            </div>
+          )}
+          <section className="cartSection mb-5">
+            <div className="container-fluid">
+              <div className={context.windowWidth > 770 && 'row'}>
+                <div
+                  className={`${
+                    context.windowWidth < 770 ? 'col-md-full' : 'col-md-7'
+                  }`}
+                >
+                  <div className="d-flex align-items-center w-100">
+                    <div className="left">
+                      <h1 className="hd mb-0">Your Compare Items</h1>
+                      <p>
+                        There are{' '}
+                        <span className="text-g">{compareItems.length}</span>{' '}
+                        products in your Compare List
+                      </p>
+                    </div>
+
+                    <span
+                      className="ml-auto clearCart d-flex align-items-center cursor "
+                      onClick={() => deleteAllCompareItems(uid)}
+                    >
+                      <DeleteOutlineOutlinedIcon /> Clear Compare
+                    </span>
+                  </div>
+                  <MapComponent data={compareItems} />
+                  <div className="cartWrapper mt-4">
+                    <div className="table-responsive">
+                      <table className="table">
+                        <thead>
+                          <tr>
+                            <th>Product</th>
+                            <th>Unit Price</th>
+                            <th>Brand</th>
+                            <th>Shop</th>
+                            <th>Remove</th>
+                          </tr>
+                        </thead>
+
+                        <tbody>
+                          {compareItems.length !== 0 &&
+                            compareItems.map((item, index) => {
+                              return (
+                                <>
+                                <tr>
+                                  <td width={'50%'}>
+                                    <div className="d-flex align-items-center">
+                                      <div className="img">
+                                        <Link to={`/product/${item.id}`}>
+                                          <img
+                                            src={
+                                              item.catImg +
+                                              '?im=Resize=(100,100)'
+                                            }
+                                            className="w-100"
+                                          />
+                                        </Link>
+                                      </div>
+
+                                      <div className="info pl-4">
+                                        <Link to={`/product/${item.id}`}>
+                                          <h4>{item.productName}</h4>
+                                        </Link>
+                                        <Rating
+                                          name="half-rating-read"
+                                          value={parseFloat(item.rating)}
+                                          precision={0.5}
+                                          readOnly
+                                        />{' '}
+                                        <span className="text-light">
+                                          ({parseFloat(item.rating)})
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </td>
+
+                                  <td width="20%">
+                                    <span>
+                                      Rs:{' '}
+                                      {parseInt(item.price.split(',').join(''))}
+                                    </span>
+                                  </td>
+
+                                  <td width="20%">
+                                    <span>{item.brand}</span>
+                                  </td>
+
+                                  <td>
+                                    <span width="20%">
+                                      {item.shop_name}
+                                    </span>
+                                  </td>
+
+                                  <td align="center">
+                                    <span
+                                      className="cursor"
+                                      onClick={() =>
+                                        deleteCompareItem(uid, `${item?.id}`)
+                                      }
+                                    >
+                                      <DeleteOutlineOutlinedIcon />
+                                    </span>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <div style={{display:"flex"}}>
+
+                                  </div>
+                                </tr>
+                                </>
+                              );
+                            })}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+
+                  <br />
+
+                  <div className="d-flex align-items-center">
+                    <Link to="/">
+                      <Button className="btn-g">
+                        <KeyboardBackspaceIcon /> Continue Shopping
+                      </Button>
+                    </Link>
+                    {/* <Button className='btn-g ml-auto' onClick={updateCartData}>
+                    <RefreshIcon /> Update Cart</Button> */}
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </section>{' '}
+        </>
+      ) : (
+        // Render message indicating cart is empty if cartItems array is empty
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col d-flex align-items-center justify-content-center mt-4 mb-4">
+              <div className="text-center">
+                <h2>Nothing to Compare</h2>
+                <p>Please add some products to Compare</p>
+                <Link to="/">
+                  <Button className="btn-g">
+                    <KeyboardBackspaceIcon /> Start Comparing
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Compare;
diff --git a/src/pages/Compare/style.css b/src/pages/Compare/style.css
new file mode 100644
index 0000000..9ff9509
--- /dev/null
+++ b/src/pages/Compare/style.css
@@ -0,0 +1,78 @@
+.cartSection {
+    width: 100%;
+    height: auto;
+    padding: 10px 0px;
+    display: flex;
+    justify-content: center;
+  }
+  .cartSection .clearCart {
+    font-weight: 600;
+    font-size: 18px;
+  }
+  .cartSection .clearCart svg {
+    font-size: 25px !important;
+  }
+  
+  .cartWrapper table thead {
+    background: #f1f1f1;
+    overflow: hidden;
+  }
+  .cartWrapper table thead th:first-child {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+  .cartWrapper table thead th:last-child {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+  
+  .cartWrapper table tbody td {
+    vertical-align: middle;
+  }
+  .cartWrapper table tbody td .img {
+    width: 30%;
+    height: 150px;
+    padding: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+  }
+  .cartWrapper table tbody td .img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .cartWrapper table tbody td .info {
+    width: 70%;
+  }
+  .cartWrapper table tbody td .info a {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .cartWrapper table tbody td .info a:hover {
+    text-decoration: none;
+  }
+  
+  .cartWrapper table tbody td span {
+    font-weight: 600;
+    font-size: 28px;
+  }
+  .cartWrapper table tbody td span.text-g {
+    font-weight: bold;
+  }
+  
+  .cartRightBox {
+    padding-left: 100px;
+    padding-bottom: 30px;
+    height: auto;
+  }
+  .cartRightBox .card {
+    position: sticky;
+    top: 150px;
+    height: auto;
+    margin: auto;
+    max-width: 430px;
+  }
+
+  .cartSection > div > div{
+    display: flex;
+    justify-content: center;
+  }
\ No newline at end of file
diff --git a/src/pages/Details/index.js b/src/pages/Details/index.js
index ce7eb51..8a9c7f2 100644
--- a/src/pages/Details/index.js
+++ b/src/pages/Details/index.js
@@ -73,6 +73,8 @@ const DetailsPage = (props) => {
   const [isAlreadyAddedInCart, setisAlreadyAddedInCart] = useState(false);
   const [isAlreadyAddedInWishlist, setisAlreadyAddedInWishlist] =
     useState(false);
+    const [isAlreadyAddedInCompare, setIsAlreadyAddedInCompare] =
+    useState(false);
 
   const [reviewFields, setReviewFields] = useState({
     review: '',
@@ -185,6 +187,8 @@ const DetailsPage = (props) => {
 
     fetchWishlistProducts();
 
+    fetchCompareProducts();
+
     setIsLoading(false);
   }, []);
 
@@ -267,10 +271,8 @@ const DetailsPage = (props) => {
   };
 
   const toggleWishlistItem = async (item) => {
-    console.log('addToWishlist');
 
     if (!isAlreadyAddedInWishlist) {
-      console.log('Not isAlreadyAddedInWishlist');
       try {
         const user = localStorage.getItem('uid');
         const wishlistRef = doc(db, 'wishlists', user);
@@ -300,6 +302,34 @@ const DetailsPage = (props) => {
     }
   };
 
+  const toggleCompareItem = async (item) => {
+    if (!isAlreadyAddedInCompare) {
+      try {
+        const user = localStorage.getItem('uid');
+        const compareRef = doc(db, 'compare', user);
+        const productRef = doc(compareRef, 'products', `${item.id}`);
+        await setDoc(productRef, item);
+        setIsAlreadyAddedInCompare(true);
+        context.setCompareCount(context.compareCount + 1);
+      } catch (error) {
+        console.error('Error adding item to compare:', error);
+      }
+    } else {
+      const user = localStorage.getItem('uid');
+
+      const compareItemRef = doc(db, `compare/${user}/products/${item.id}`);
+
+      try {
+        await deleteDoc(compareItemRef);
+        setIsAlreadyAddedInCompare(false);
+        context.setCompareCount(context.compareCount - 1);
+        console.log('compare item deleted successfully.');
+      } catch (error) {
+        console.error('Error deleting compare item:', error);
+      }
+    }
+  };
+
   const fetchCartProducts = async () => {
     try {
       const cartRef = doc(db, 'carts', localStorage.getItem('uid'));
@@ -330,24 +360,22 @@ const DetailsPage = (props) => {
     }
   };
 
-  const deleteWishlistItem = async (uid, wishlistItemId) => {
-    const wishlistItemRef = doc(
-      db,
-      'wishlists',
-      uid,
-      'products',
-      wishlistItemId
-    );
-
+  const fetchCompareProducts = async () => {
     try {
-      await deleteDoc(wishlistItemRef);
-      fetchWishlistProducts();
-      console.log('Wishlist item deleted successfully.');
+      const compareRef = doc(db, 'compare', localStorage.getItem('uid'));
+      const productsCollectionRef = collection(compareRef, 'products');
+      const querySnapshot = await getDocs(productsCollectionRef);
+      querySnapshot.forEach((doc) => {
+        if (parseInt(doc.data()?.id) === parseInt(id)) {
+          setIsAlreadyAddedInCompare(true);
+        }
+      });
     } catch (error) {
-      console.error('Error deleting wishlist item:', error);
+      console.error('Error fetching compare products:', error);
     }
   };
 
+
   return (
     <>
       {context.windowWidth < 992 && (
@@ -578,7 +606,11 @@ const DetailsPage = (props) => {
                   >
                     <FavoriteBorderOutlinedIcon />{' '}
                   </Button>
-                  <Button className=" btn-lg addtocartbtn ml-3 btn-border">
+                  <Button onClick={() => toggleCompareItem(currentProduct)}  className={`btn-lg addtocartbtn ml-3 ${
+                      isAlreadyAddedInCompare === true
+                        ? 'btn-borderWishlistAlreadyAdded'
+                        : 'btn-border'
+                    }`}>
                     <CompareArrowsIcon />
                   </Button>
                 </div>