diff --git a/client/public/index.html b/client/public/index.html
index cdbe62d5..bb80fadb 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -138,6 +138,8 @@
       });
     
     </script>
+    <script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
+    <script src="https://files.bpcontent.cloud/2024/10/03/12/20241003121018-G9HC2GOM.js"></script>
     
   </body>
 </html>
diff --git a/client/src/App.js b/client/src/App.js
index 20918ed0..ce7ab7ce 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -39,18 +39,6 @@ function App() {
     backgroundColor: darkMode ? '#333' : '#f4f4f4',
   };
 
-  // Optionally, fetch user data if logged in
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    fetch('http://localhost:5000/auth/current_user', {
-      credentials: 'include',
-    })
-      .then(response => response.json())
-      .then(data => setUser(data))
-      .catch(err => console.error(err));
-  }, []);
-
   return (
     <Router>
       <div className="App" style={appStyle}>
@@ -75,7 +63,7 @@ function App() {
           <Route path="*" element={<NotFound />} /> {/* Fallback route */}
         </Routes>
         <Toast position="bottom-right" />
-        <Footer />
+        <Footer darkMode={darkMode} /> {/* Pass darkMode prop here */}
         <Preloader /> {/* Ensure Preloader is correctly styled */}
         <GoToTop /> {/* Added GoToTop component */}
       </div>
diff --git a/client/src/Components/Footer/Footer.jsx b/client/src/Components/Footer/Footer.jsx
index 218e22b7..f2eafe64 100644
--- a/client/src/Components/Footer/Footer.jsx
+++ b/client/src/Components/Footer/Footer.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Link } from "react-router-dom";
 import { GitHub, LinkedIn, Instagram } from '@mui/icons-material';
 import XIcon from '@mui/icons-material/X';
-import './Footer.css'; 
+import './Footer.css';
 
-function Footer() {
+function Footer({ darkMode }) {
     const [email, setEmail] = useState("");
     const [message, setMessage] = useState("");
 
@@ -14,8 +14,13 @@ function Footer() {
         setEmail("");
     };
 
+    const footerStyle = {
+        backgroundColor: darkMode ? '#1a1a1a' : '#003366', // Darker background in dark mode
+        color: darkMode ? '#f1f1f1' : '#ffffff'  // Light text color in dark mode
+    };
+
     return (
-        <footer className="bg-blue-900 text-white py-8">
+        <footer style={footerStyle} className="py-8">
             <div className="container mx-auto flex flex-wrap justify-between max-w-[90%]">
                 <div className="footer-section">
                     <h2 className="text-lg font-bold mb-4">ABOUT</h2>
@@ -25,7 +30,6 @@ function Footer() {
                         <li><Link to="/" className="hover:text-yellow-300 text-lg">Careers</Link></li>
                         <li><Link to="/" className="hover:text-yellow-300 text-lg">Gift Cards</Link></li>
                         <li><Link to="/contributors" className="hover:text-yellow-300 text-lg">Our Contributors</Link></li>
-
                     </ul>
                 </div>
                 <div className="footer-section">
diff --git a/client/src/Components/NavBar/NavBar.jsx b/client/src/Components/NavBar/NavBar.jsx
index 1a833a90..3601e8ff 100644
--- a/client/src/Components/NavBar/NavBar.jsx
+++ b/client/src/Components/NavBar/NavBar.jsx
@@ -14,9 +14,9 @@ import sunIcon from '../../assets/sun.png'; // Adjust the path as necessary
 import moonIcon from '../../assets/moon.png'; // Adjust the path as necessary
 import logo from '../../assets/Logo.png'; // Adjust the path as necessary
 
-const StyledAppBar = styled(AppBar)({
-  backgroundColor: '#002147', // Adjust color to your preference
-});
+const StyledAppBar = styled(AppBar)(({ darkMode }) => ({
+  backgroundColor: darkMode ? 'black' : '#002147', // Change color based on darkMode
+}));
 
 const Logo = styled('img')({
   width: '220px',
@@ -25,10 +25,10 @@ const Logo = styled('img')({
 });
 
 const StyledButton = styled(Button)({
-  fontSize: '1rem', // Adjust font size
+  fontSize: '1rem',
   '&:hover': {
-    color: '#FFD700', // Adjust hover color
-    textDecoration: 'underline', // Underline on hover
+    color: '#FFD700',
+    textDecoration: 'underline',
   },
 });
 
@@ -36,31 +36,30 @@ const MenuContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
   gap: '10px',
-  marginLeft: 'auto', // Move the menu items to the end (right-aligned)
+  marginLeft: 'auto',
 });
 
 const MobileMenu = styled('div')(({ open }) => ({
   display: open ? 'flex' : 'none',
   flexDirection: 'column',
   position: 'absolute',
-  top: '64px', // Adjust based on AppBar height
+  top: '64px',
   right: '0',
   backgroundColor: '#002147',
   width: '100%',
   padding: '10px',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
-  zIndex: 1000, // Ensure it appears above other content
+  zIndex: 1000,
 }));
 
 const MobileMenuButton = styled(IconButton)({
-  fill: '#fff', // Adjust color as needed
+  fill: '#fff',
 });
 
 function Navbar({ darkMode, toggleDarkMode }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [openMenu, setOpenMenu] = useState(false);
-
   const { userLoggedIn, setUserLoggedIn } = useAuth();
   let navigate = useNavigate();
   const { showToast } = useToast();
@@ -73,30 +72,27 @@ function Navbar({ darkMode, toggleDarkMode }) {
     try {
       const token = sessionStorage.getItem('token');
       if (token) {
-        sessionStorage.removeItem('token'); // Remove the token from sessionStorage
+        sessionStorage.removeItem('token');
       }
     } catch (error) {
       console.error('Error removing token from sessionStorage:', error);
     }
      
     setUserLoggedIn(false);
-    localStorage.removeItem('token'); // Remove the token from localStorage
-     // Update the user logged-in state
-    navigate('/', { replace: true }); // Redirect to home page
+    localStorage.removeItem('token');
+    navigate('/', { replace: true });
     showToast("success", "", "Logged out successfully");
   };
 
   return (
-    <StyledAppBar position="sticky">
+    <StyledAppBar position="sticky" darkMode={darkMode}>
       <Toolbar style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <IconButton component={Link} to="/">
           <Logo src={logo} alt="Logo" />
         </IconButton>
         
-        {/* Desktop or Mobile Menu */}
         {isMobile ? (
           <>
-            {/* Theme Switcher on the left side of the hamburger icon */}
             <IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
               <img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
             </IconButton>
@@ -106,7 +102,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
             </MobileMenuButton>
             
             <MobileMenu open={openMenu}>
-              {/* Menu Items */}
               <StyledButton color="inherit" component={Link} to="/" startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
                 Home
               </StyledButton>
@@ -123,7 +118,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 Orders
               </StyledButton>
 
-              {/* Login inside the menu */}
               <StyledButton
                 color="inherit"
                 component={Link}
@@ -154,7 +148,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
               Orders
             </StyledButton>
 
-            {/* Move these two to the end */}
             <IconButton onClick={toggleDarkMode} style={{ marginLeft: 'auto', marginRight: '10px' }}>
               <img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
             </IconButton>
diff --git a/client/src/Pages/Cart.jsx b/client/src/Pages/Cart.jsx
index fa214712..084c7f6e 100644
--- a/client/src/Pages/Cart.jsx
+++ b/client/src/Pages/Cart.jsx
@@ -1,213 +1,215 @@
-// import React, { useState, useEffect } from "react";
-// import Spinner from "./Spinner";
-// import { fetchCartData, addItemToCart, removeItemFromCart } from "../api/api.js";
-// import "./Cart.css";
-// import Preloader from '../Components/Preloader';
-
-// import { useAuth } from "../Context/AuthContext";
-// import { useToast } from "../Context/ToastContext";
-
-// import { useNavigate } from "react-router-dom";
-
-// function Cart() {
-//   const [isLoading, setIsLoading] = useState(true);
-//   const [data, setData] = useState(null);
-//   const [error, setError] = useState(null);
-//   const [retryCount, setRetryCount] = useState(0);
-//   const navigate = useNavigate();
-//   const isAuthenticated =!! localStorage.getItem('token');
-//   if(!isAuthenticated){
-//     navigate('/login')
-
-//  }
-
-//   const { userLoggedIn } = useAuth();
-//   const { showToast } = useToast();
-//   const navigate = useNavigate();
-
-//   useEffect(() => {
-//     fetchCartData()
-//       .then((cartData) => {
-//         setData(cartData);
-//         setIsLoading(false);
-//         setError(null); // Reset error state on successful data fetch
-//       })
-//       .catch((err) => {
-//         setError("Failed to load cart data. Please try again later.");
-//         setIsLoading(false);
-//         console.error("Error fetching cart data:", err);
-//       });
-//   }, [retryCount]); // Retry whenever retryCount changes
-
-//   useEffect(() => {
-//     if (!userLoggedIn) {
-//       showToast("error", "Please login to view your cart.", undefined, 7000);
-//       setTimeout(() => {
-//         navigate("/login");
-//       }, 3000); // 3000 milliseconds = 3 seconds
-//     }
-//   }, [userLoggedIn]);
-
-//   const handleAddItem = (item) => {
-//     setIsLoading(true);
-//     addItemToCart(item)
-//       .then((updatedCart) => {
-//         setData(updatedCart);
-//         setIsLoading(false);
-//       })
-//       .catch((err) => {
-//         setError("Failed to add item to cart. Please try again later.");
-//         setIsLoading(false);
-//         console.error("Error adding item to cart:", err);
-//       });
-//   };
-
-//   const handleRemoveItem = (itemId) => {
-//     setIsLoading(true);
-//     removeItemFromCart(itemId)
-//       .then((updatedCart) => {
-//         setData(updatedCart);
-//         setIsLoading(false);
-//       })
-//       .catch((err) => {
-//         setError("Failed to remove item from cart. Please try again later.");
-//         setIsLoading(false);
-//         console.error("Error removing item from cart:", err);
-//       });
-//   };
-
-//   const handleRetry = () => {
-//     setRetryCount(retryCount + 1); // Trigger useEffect to retry fetching data
-//   };
-
-//   const renderCartItems = () => {
-//     if (!data || !data.items || data.items.length === 0) {
-//       return (
-//         <tr>
-//           <td colSpan="5" className="dark:text-white">Your cart is empty.</td>
-//         </tr>
-//       );
-//     }
-
-//     return data.items.map((item) => (
-//       <tr key={item.id}>
-//         <td>
-//           <img
-//             src={item.image || "https://via.placeholder.com/150"}
-//             alt={item.name}
-//             className="item-image"
-//           />
-//         </td>
-//         <td>{item.name}</td>
-//         <td>${item.price.toFixed(2)}</td>
-//         <td>
-//           <button
-//             onClick={() => handleRemoveItem(item.id)}
-//             className="quantity-button"
-//           >
-//             -
-//           </button>
-//           <span>{item.quantity}</span>
-//           <button
-//             onClick={() => handleAddItem(item)}
-//             className="quantity-button"
-//           >
-//             +
-//           </button>
-//         </td>
-//         <td>
-//           <button
-//             onClick={() => handleRemoveItem(item.id)}
-//             className="remove-button"
-//           >
-//             Remove
-//           </button>
-//         </td>
-//       </tr>
-//     ));
-//   };
-
-//   const renderSuggestedProducts = () => {
-//     // Replace with actual suggested products logic
-//     return (
-//       <div className="suggested-products">
-//         <h2 className="dark:text-white">Suggested Products</h2>
-//         <ul>
-//           <li className="dark:text-white">Suggested Product 1</li>
-//           <li className="dark:text-white">Suggested Product 2</li>
-//           <li className="dark:text-white">Suggested Product 3</li>
-//         </ul>
-//       </div>
-//     );
-//   };
-
-//   if (isLoading) {
-//     return <Spinner />;
-//   }
-
-//   if (error) {
-//     return (
-//     <>
-//       <Preloader/>
-//       <div className="cart-container dark:bg-[rgb(40,40,40)]">
-//         <h1 className="cart-header dark:text-white">Shopping Cart</h1>
-//         <p className="error-message">{error}</p>
-//         <button onClick={handleRetry} className="retry-button dark:text-white">
-//           Retry
-//         </button>
-//         {/* <hr /> */}
-//         <table className="cart-table">
-//           <thead>
-//             <tr className="dark:bg-[rgb(40,40,40)]">
-//               <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Image</th>
-//               <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Name</th>
-//               <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Price</th>
-//               <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Quantity</th>
-//               <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Action</th>
-//             </tr>
-//           </thead>
-//           <tbody>
-//             {renderCartItems()}
-//           </tbody>
-//         </table>
-//         <div className="cart-summary">
-//           <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
-//           <button className="checkout-button dark:text-white">Proceed to Checkout</button>
-//         </div>
-//         <hr />
-//         {renderSuggestedProducts()}
-//       </div>
-//       </>
-//     );
-//   }
-
-//   return (
-//     <><Preloader/>
-//     <div className="cart-container dark:bg-[rgb(40,40,40)]">
-//       <h1 className="cart-header dark:text-white">Shopping Cart</h1>
-//       <table className="cart-table">
-//         <thead>
-//           <tr>
-//             <th>Image</th>
-//             <th>Name</th>
-//             <th>Price</th>
-//             <th>Quantity</th>
-//             <th>Action</th>
-//           </tr>
-//         </thead>
-//         <tbody>
-//           {renderCartItems()}
-//         </tbody>
-//       </table>
-//       <div className="cart-summary">
-//         <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
-//         <button className="checkout-button dark:text-white">Proceed to Checkout</button>
-//       </div>
-//       {/* <hr /> */}
-//       {renderSuggestedProducts()}
-//     </div>
-//     </>
-//   );
-// }
-
-// export default Cart;
+import React, { useState, useEffect } from "react";
+import Spinner from "./Spinner";
+import { fetchCartData, addItemToCart, removeItemFromCart } from "../api/api.js";
+import "./Cart.css";
+import Preloader from '../Components/Preloader';
+
+import { useAuth } from "../Context/AuthContext";
+import { useToast } from "../Context/ToastContext";
+
+import { useNavigate } from "react-router-dom";
+
+
+function Cart() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [retryCount, setRetryCount] = useState(0);
+  // const navigate = useNavigate();
+  const isAuthenticated =!! localStorage.getItem('token');
+  if(!isAuthenticated){
+    navigate('/login')
+
+ }
+
+  const { userLoggedIn } = useAuth();
+  const { showToast } = useToast();
+  //const navigate = useNavigate();
+
+
+  useEffect(() => {
+    fetchCartData()
+      .then((cartData) => {
+        setData(cartData);
+        setIsLoading(false);
+        setError(null); // Reset error state on successful data fetch
+      })
+      .catch((err) => {
+        setError("Failed to load cart data. Please try again later.");
+        setIsLoading(false);
+        console.error("Error fetching cart data:", err);
+      });
+  }, [retryCount]); // Retry whenever retryCount changes
+
+  useEffect(() => {
+    if (!userLoggedIn) {
+      showToast("error", "Please login to view your cart.", undefined, 7000);
+      setTimeout(() => {
+        navigate("/login");
+      }, 3000); // 3000 milliseconds = 3 seconds
+    }
+  }, [userLoggedIn]);
+
+  const handleAddItem = (item) => {
+    setIsLoading(true);
+    addItemToCart(item)
+      .then((updatedCart) => {
+        setData(updatedCart);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to add item to cart. Please try again later.");
+        setIsLoading(false);
+        console.error("Error adding item to cart:", err);
+      });
+  };
+
+  const handleRemoveItem = (itemId) => {
+    setIsLoading(true);
+    removeItemFromCart(itemId)
+      .then((updatedCart) => {
+        setData(updatedCart);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to remove item from cart. Please try again later.");
+        setIsLoading(false);
+        console.error("Error removing item from cart:", err);
+      });
+  };
+
+  const handleRetry = () => {
+    setRetryCount(retryCount + 1); // Trigger useEffect to retry fetching data
+  };
+
+  const renderCartItems = () => {
+    if (!data || !data.items || data.items.length === 0) {
+      return (
+        <tr>
+          <td colSpan="5" className="dark:text-white">Your cart is empty.</td>
+        </tr>
+      );
+    }
+
+    return data.items.map((item) => (
+      <tr key={item.id}>
+        <td>
+          <img
+            src={item.image || "https://via.placeholder.com/150"}
+            alt={item.name}
+            className="item-image"
+          />
+        </td>
+        <td>{item.name}</td>
+        <td>${item.price.toFixed(2)}</td>
+        <td>
+          <button
+            onClick={() => handleRemoveItem(item.id)}
+            className="quantity-button"
+          >
+            -
+          </button>
+          <span>{item.quantity}</span>
+          <button
+            onClick={() => handleAddItem(item)}
+            className="quantity-button"
+          >
+            +
+          </button>
+        </td>
+        <td>
+          <button
+            onClick={() => handleRemoveItem(item.id)}
+            className="remove-button"
+          >
+            Remove
+          </button>
+        </td>
+      </tr>
+    ));
+  };
+
+  const renderSuggestedProducts = () => {
+    // Replace with actual suggested products logic
+    return (
+      <div className="suggested-products">
+        <h2 className="dark:text-white">Suggested Products</h2>
+        <ul>
+          <li className="dark:text-white">Suggested Product 1</li>
+          <li className="dark:text-white">Suggested Product 2</li>
+          <li className="dark:text-white">Suggested Product 3</li>
+        </ul>
+      </div>
+    );
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  if (error) {
+    return (
+    <>
+      <Preloader/>
+      <div className="cart-container dark:bg-[rgb(40,40,40)]">
+        <h1 className="cart-header dark:text-white">Shopping Cart</h1>
+        <p className="error-message">{error}</p>
+        <button onClick={handleRetry} className="retry-button dark:text-white">
+          Retry
+        </button>
+        {/* <hr /> */}
+        <table className="cart-table">
+          <thead>
+            <tr className="dark:bg-[rgb(40,40,40)]">
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Image</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Name</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Price</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Quantity</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {renderCartItems()}
+          </tbody>
+        </table>
+        <div className="cart-summary">
+          <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
+          <button className="checkout-button dark:text-white">Proceed to Checkout</button>
+        </div>
+        <hr />
+        {renderSuggestedProducts()}
+      </div>
+      </>
+    );
+  }
+
+  return (
+    <><Preloader/>
+    <div className="cart-container dark:bg-[rgb(40,40,40)]">
+      <h1 className="cart-header dark:text-white">Shopping Cart</h1>
+      <table className="cart-table">
+        <thead>
+          <tr>
+            <th>Image</th>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Quantity</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {renderCartItems()}
+        </tbody>
+      </table>
+      <div className="cart-summary">
+        <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
+        <button className="checkout-button dark:text-white">Proceed to Checkout</button>
+      </div>
+      {/* <hr /> */}
+      {renderSuggestedProducts()}
+    </div>
+    </>
+  );
+}
+
+export default Cart;
diff --git a/client/src/Pages/Faq.jsx b/client/src/Pages/Faq.jsx
index 745b17c5..ed4832cf 100644
--- a/client/src/Pages/Faq.jsx
+++ b/client/src/Pages/Faq.jsx
@@ -74,41 +74,42 @@ const FAQ = () => {
     <div className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
       <h2 className="text-3xl font-extrabold text-gray-900 mb-6 text-center dark:text-white">FAQ</h2>
       <dl className="space-y-6">
-        {faqs.map((faq, index) => (
-          <div
-            key={index}
-            className="bg-white border border-gray-300 rounded-lg shadow-sm dark:bg-[rgb(40,40,40)]"
-          >
-            <button
-              onClick={() => toggleFAQ(index)}
-              className="w-full p-4 text-left focus:outline-none dark:bg-[rgb(40,40,40)]"
-              aria-expanded={openIndex === index}
-            >
-              <div className="flex justify-between items-center ">
-                <span className="text-lg font-medium text-gray-900 dark:text-white">{faq.question}</span>
-                <svg
-                  className={`h-6 w-6 transition-transform dark:text-white duration-600 transform ${
-                    openIndex === index ? 'rotate-180' : ''
-                  }`}
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d={openIndex === index ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'}
-                  />
-                </svg>
-              </div>
-            </button>
-            {openIndex === index && (
-              <p className="p-4 text-base text-gray-200">{faq.answer}</p>
-            )}
-          </div>
-        ))}
+      {faqs.map((faq, index) => (
+  <div
+    key={index}
+    className="bg-white border border-gray-300 rounded-lg shadow-sm dark:bg-[rgb(40,40,40)]"
+  >
+    <button
+      onClick={() => toggleFAQ(index)}
+      className="w-full p-4 text-left focus:outline-none dark:bg-[rgb(40,40,40)]"
+      aria-expanded={openIndex === index}
+    >
+      <div className="flex justify-between items-center ">
+        <span className="text-lg font-medium text-gray-900 dark:text-white">{faq.question}</span>
+        <svg
+          className={`h-6 w-6 transition-transform dark:text-white duration-600 transform ${
+            openIndex === index ? 'rotate-180' : ''
+          }`}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d={openIndex === index ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'}
+          />
+        </svg>
+      </div>
+    </button>
+    {openIndex === index && (
+      <p className="p-4 text-base text-gray-900">{faq.answer}</p>
+    )}
+  </div>
+))}
+
       </dl>
     </div>
     </>