diff --git a/client/src/components/Chatbot/Chatbot.css b/client/src/components/Chatbot/Chatbot.css
index 3729b8f..2b9113f 100644
--- a/client/src/components/Chatbot/Chatbot.css
+++ b/client/src/components/Chatbot/Chatbot.css
@@ -1,8 +1,8 @@
 /* Chatbot Floating Action Button */
 .chatbot-fab {
   position: fixed;
-  bottom: 20px;
-  right: 90px; /* Moved left to avoid scroll-to-top button */
+  bottom: 20px; /* Positioned above scroll-to-top button */
+  right: 20px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
@@ -14,7 +14,7 @@
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow), 0 4px 20px rgba(255, 226, 110, 0.4);
-  z-index: 1000;
+  z-index: 999;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   animation: pulse 2s infinite;
 }
@@ -76,11 +76,11 @@
 /* Chatbot Container */
 .chatbot-container {
   position: fixed;
-  bottom: 20px;
-  right: 90px; /* Moved left to avoid scroll-to-top button */
+  bottom: 90px; /* Positioned above scroll-to-top button */
+  right: 20px;
   width: 380px;
   height: 600px;
-  z-index: 1000;
+  z-index: 999;
   font-family: 'Roboto', sans-serif;
 }
 
diff --git a/client/src/components/Footer/Footer.css b/client/src/components/Footer/Footer.css
index d489bbc..11a6a38 100644
--- a/client/src/components/Footer/Footer.css
+++ b/client/src/components/Footer/Footer.css
@@ -422,10 +422,10 @@ footer svg {
     background: linear-gradient(135deg, var(--accent-color) 0%, #FFD700 100%);
     width: 45px;
     height: 45px;
-    position: fixed;
+    position: fixed !important;
     z-index: 1000;
-    bottom: 30px;
-    right: 40px;
+    bottom: 20px !important; /* Same bottom as chatbot */
+    right: 95px !important; /* To the left of chatbot (chatbot right 20px + chatbot width 60px + gap 15px) */
     border-radius: 50%;
     border: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -478,8 +478,8 @@ footer svg {
     }
 
     .scroll-to-top {
-        bottom: 20px;
-        right: 20px;
+        bottom: 20px !important;
+        right: 85px !important; /* Adjusted for smaller mobile screens */
         width: 40px;
         height: 40px;
     }
diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js
index afa9c65..82ee918 100644
--- a/client/src/components/Footer/Footer.js
+++ b/client/src/components/Footer/Footer.js
@@ -7,7 +7,6 @@ import EmailIcon from "@mui/icons-material/Email";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import YouTubeIcon from "@mui/icons-material/YouTube";
-import TwitterIcon from "@mui/icons-material/Twitter";
 import TelegramIcon from "@mui/icons-material/Telegram";
 import PinterestIcon from "@mui/icons-material/Pinterest";
 import LocalShippingIcon from "@mui/icons-material/LocalShipping";
@@ -17,9 +16,7 @@ import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
 import KeyboardDoubleArrowUpIcon from "@mui/icons-material/KeyboardDoubleArrowUp";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import SendIcon from "@mui/icons-material/Send";
 import { SiX } from "react-icons/si";
-import Cart from "../Card/Cart/Cart";
 
 const Footer = () => {
   const [isVisible, setIsVisible] = React.useState(false);
@@ -128,8 +125,8 @@ const Footer = () => {
             height: "45px",
             position: "fixed",
             zIndex: "1000",
-            bottom: "30px",
-            right: "40px",
+            bottom: "20px",
+            right: "95px",
             borderRadius: "50%",
             border: "none",
             transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
diff --git a/client/src/components/Item/Description/Description.js b/client/src/components/Item/Description/Description.js
index 5b70414..0fdf2bc 100644
--- a/client/src/components/Item/Description/Description.js
+++ b/client/src/components/Item/Description/Description.js
@@ -1,11 +1,8 @@
 
 import "./Description.css";
-import { useContext, useMemo, useState } from "react";
-import { Button, IconButton, Rating } from "@mui/material";
-import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import { useMemo, useState } from "react";
+import { Button, Rating } from "@mui/material";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import { CartItemsContext } from "../../../Context/CartItemsContext";
-import { WishItemsContext } from "../../../Context/WishItemsContext";
 
 /* 🔹 Review Form Component */
 const ReviewForm = ({ item, onReviewAdded }) => {
@@ -139,14 +136,7 @@ const DeliveryOffers = ({ delivery, offers }) => {
 
 /* 🔹 Main Description Component with Tabs */
 const Description = ({ item }) => {
-  const cartItems = useContext(CartItemsContext);
-  const wishItems = useContext(WishItemsContext);
-
-  const handleAddToCart = () => cartItems.addItem(item);
-  const handleAddToWish = () => wishItems.addItem(item);
-
   // Safe access with optional chaining and defaults
-  const images = item?.images || ["https://via.placeholder.com/400"];
   const name = item?.name || "Product Name";
   const price = item?.price || 0;
   const details = item?.details || "No details available.";
diff --git a/client/src/routes/ContactUs.css b/client/src/routes/ContactUs.css
index a8ae7d4..ec77e99 100644
--- a/client/src/routes/ContactUs.css
+++ b/client/src/routes/ContactUs.css
@@ -3,7 +3,7 @@
   background-color: var(--bg-primary);
   padding: 5rem 2rem;
   color: var(--text-primary);
-  font-family: 'Poppins', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
   overflow: hidden;
   position: relative;
 }
@@ -662,14 +662,16 @@
   font-weight: 800;
   color: #000;
   margin-bottom: 1rem;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
 }
 
 .contact__hero__subtitle {
   font-size: 1.25rem;
   color: #333;
-  line-height: 1.6;
+  line-height: 1.7;
   font-weight: 400;
+  letter-spacing: 0.01em;
 }
 
 .contact__hero__decoration {
@@ -696,21 +698,37 @@
 }
 
 .contact__card {
-  background: var(--bg-secondary);
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   padding: 2.5rem 2rem;
   border-radius: 18px;
   text-align: center;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
+  border: 2px solid rgba(255, 226, 110, 0.3);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }
 
+.contact__card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.contact__card:hover::before {
+  opacity: 1;
+}
+
 .contact__card:hover {
-  transform: translateY(-6px);
+  transform: translateY(-8px);
   border-color: var(--accent-color);
-  box-shadow: 0 10px 35px rgba(255, 226, 110, 0.25);
+  box-shadow: 0 12px 35px rgba(255, 226, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
 .contact__card__icon {
@@ -725,26 +743,51 @@
   box-shadow: 0 5px 15px rgba(255, 226, 110, 0.35);
 }
 
+.contact__card__icon svg,
+.contact__card__icon .MuiSvgIcon-root {
+  color: #000000 !important;
+  font-size: 30px;
+}
+
+/* Dark mode: Keep icons black for visibility */
+.dark-mode .contact__card__icon svg,
+.dark-mode .contact__card__icon .MuiSvgIcon-root {
+  color: #000000 !important;
+}
+
 .contact__card h3 {
-  font-size: 1.3rem;
+  font-size: 1.4rem;
   font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 0.5rem;
+  color: #000000;
+  margin-bottom: 0.7rem;
+  letter-spacing: -0.01em;
+  text-align: center;
 }
 
 .contact__card p {
-  font-size: 1.05rem;
-  color: var(--text-secondary);
+  font-size: 1.1rem;
+  color: #333333;
   font-weight: 500;
+  letter-spacing: 0.005em;
+  text-align: center;
+}
+
+.contact__card__subtitle {
+  font-size: 0.9rem;
+  color: #666666;
+  margin-top: 0.5rem;
+  display: block;
+  font-weight: 400;
+  text-align: center;
 }
 
 /* ========== FORM SECTION ========== */
 .contact__form__section {
-  background: var(--bg-secondary);
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   padding: 3rem;
   border-radius: 22px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+  border: 2px solid rgba(255, 226, 110, 0.3);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .contact__form__header {
@@ -755,13 +798,14 @@
 .contact__form__header h2 {
   font-size: 2.2rem;
   font-weight: 700;
-  color: var(--text-primary);
+  color: #000000;
   margin-bottom: 1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .contact__form__header p {
   font-size: 1.1rem;
-  color: var(--text-secondary);
+  color: #555555;
   line-height: 1.6;
   max-width: 500px;
   margin: 0 auto;
@@ -795,14 +839,13 @@
   height: 48px;
   width: 48px;
   min-width: 48px;
-  border-radius: 444px;
-  background: var(--bg-tertiary);
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
   padding: 0.5rem;
-  border: 1px solid var(--border-color);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
+  border: 2px solid rgba(255, 226, 110, 0.3);
+  box-shadow: 0 2px 8px rgba(255, 226, 110, 0.2);
   margin-bottom: auto;
   /* No bottom/top margin */
-
 }
 
 
@@ -812,7 +855,7 @@
   display: block;
   width: 24px;
   height: 24px;
-  color: var(--text-secondary);
+  color: #000000 !important;
   stroke-width: 1.5;
 }
 
@@ -1023,5 +1066,12 @@
 }
 
 .dark-mode .input__icon {
-  background: var(--bg-primary);
+  background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
+  border-color: rgba(255, 226, 110, 0.3);
+  box-shadow: 0 2px 8px rgba(255, 226, 110, 0.2);
+}
+
+.dark-mode .input__icon svg,
+.dark-mode .input__icon .MuiSvgIcon-root {
+  color: #000000 !important;
 }
\ No newline at end of file
diff --git a/client/src/routes/ContactUs.js b/client/src/routes/ContactUs.js
index 4d26dba..4718baa 100644
--- a/client/src/routes/ContactUs.js
+++ b/client/src/routes/ContactUs.js
@@ -86,7 +86,7 @@ const ContactUs = () => {
         <div className="contact__cards__section">
           <div className="contact__card" data-aos="zoom-in" data-aos-delay="100">
             <div className="contact__card__icon">
-              <EmailIcon sx={{ fontSize: 30, color: '#FFE26E' }} />
+              <EmailIcon sx={{ fontSize: 30 }} />
             </div>
             <h3>Email Us</h3>
             <p>shop@trendhora.com</p>
@@ -95,7 +95,7 @@ const ContactUs = () => {
 
           <div className="contact__card" data-aos="zoom-in" data-aos-delay="200">
             <div className="contact__card__icon">
-              <PhoneIcon sx={{ fontSize: 30, color: '#FFE26E' }} />
+              <PhoneIcon sx={{ fontSize: 30 }} />
             </div>
             <h3>Call Us</h3>
             <p>+91 93190-42075</p>
@@ -104,7 +104,7 @@ const ContactUs = () => {
 
           <div className="contact__card" data-aos="zoom-in" data-aos-delay="300">
             <div className="contact__card__icon">
-              <LocationOnIcon sx={{ fontSize: 30, color: '#FFE26E' }} />
+              <LocationOnIcon sx={{ fontSize: 30 }} />
             </div>
             <h3>Visit Us</h3>
             <p>Delhi, India</p>
@@ -125,7 +125,7 @@ const ContactUs = () => {
               {/* Full Name */}
               <div className="input__group" data-aos="fade-right">
                 <div className="input__icon">
-                  <PersonIcon sx={{ fontSize: 20, color: '#6c757d' }} />
+                  <PersonIcon sx={{ fontSize: 20 }} />
                 </div>
                 <div className="input__content">
                   <label className="input__label">Full Name *</label>
@@ -144,7 +144,7 @@ const ContactUs = () => {
               {/* Email Address */}
               <div className="input__group" data-aos="fade-left">
                 <div className="input__icon">
-                  <EmailIcon sx={{ fontSize: 20, color: '#6c757d' }} />
+                  <EmailIcon sx={{ fontSize: 20 }} />
                 </div>
                 <div className="input__content">
                   <label className="input__label">Email Address *</label>
@@ -164,7 +164,7 @@ const ContactUs = () => {
             {/* Subject */}
             <div className="input__group" data-aos="fade-right">
               <div className="input__icon">
-                <SubjectIcon sx={{ fontSize: 20, color: '#6c757d' }} />
+                <SubjectIcon sx={{ fontSize: 20 }} />
               </div>
               <div className="input__content" style={{ marginTop: '1.5rem' }}>
                 <label className="input__label">Subject *</label>
@@ -183,7 +183,7 @@ const ContactUs = () => {
             {/* Message */}
             <div className="input__group" data-aos="fade-left">
               <div className="input__icon">
-                <MessageIcon sx={{ fontSize: 20, color: '#6c757d' }} />
+                <MessageIcon sx={{ fontSize: 20 }} />
               </div>
               <div className="input__content" style={{ marginTop: '1.5rem' }}>
                 <label className="input__label">Message *</label>