diff --git a/src/actions/lbdashboard/bidOverviewActions.js b/src/actions/lbdashboard/bidOverviewActions.js
new file mode 100644
index 0000000000..2027a8b6c9
--- /dev/null
+++ b/src/actions/lbdashboard/bidOverviewActions.js
@@ -0,0 +1,62 @@
+import axios from 'axios';
+import { ENDPOINTS } from '~/utils/URL';
+import {
+  FETCH_UNIT_DETAILS_REQUEST,
+  FETCH_UNIT_DETAILS_SUCCESS,
+  FETCH_UNIT_DETAILS_FAILURE,
+  SUBMIT_BID_REQUEST,
+  SUBMIT_BID_SUCCESS,
+  SUBMIT_BID_FAILURE,
+  NOTIFICATION_SUCCESS,
+  NOTIFICATION_FAILURE,
+} from '../../constants/lbdashboard/bidOverviewConstants';
+
+export const fetchUnitDetails = listingId => async (dispatch) => {
+  try {
+    dispatch({ type: FETCH_UNIT_DETAILS_REQUEST });
+    const url = ENDPOINTS.LB_BID_OVERVIEW(listingId);
+    const { data } = await axios.get(url);
+    dispatch({
+      type: FETCH_UNIT_DETAILS_SUCCESS,
+      payload: data.listingDetail,
+    });
+    return data;
+  } catch (error) {
+    dispatch({
+      type: FETCH_UNIT_DETAILS_FAILURE,
+      payload: error.response?.data?.message || error.message,
+    });
+    return null;
+  }
+};
+
+export const submitBid = (listingId, bidData) => async (dispatch) => {
+  try {
+    dispatch({ type: SUBMIT_BID_REQUEST });
+    const url = ENDPOINTS.LB_SUBMIT_BID(listingId);
+    console.log('Submitting bid to:', url);
+    console.log('Request body:', bidData); 
+    const { data } = await axios.post(url, bidData);
+    dispatch({
+      type: SUBMIT_BID_SUCCESS,
+      payload: data.bid,
+    });
+    if(data.notifications) {
+      dispatch({
+        type: NOTIFICATION_SUCCESS,
+        payload: data.notifications,
+      });
+      console.log('Notifications:', data.notifications);
+    }
+    return data;
+  } catch (error) {
+    dispatch({
+      type: SUBMIT_BID_FAILURE,
+      payload: error.response?.data?.message || error.message,
+    });
+    dispatch({
+      type: NOTIFICATION_FAILURE,
+      payload: error.response?.data?.message || error.message,
+    });
+  }
+};
\ No newline at end of file
diff --git a/src/components/LBDashboard/BiddingOverview/BiddingOverview.jsx b/src/components/LBDashboard/BiddingOverview/BiddingOverview.jsx
index 8413f1e24e..abecedb061 100644
--- a/src/components/LBDashboard/BiddingOverview/BiddingOverview.jsx
+++ b/src/components/LBDashboard/BiddingOverview/BiddingOverview.jsx
@@ -1,44 +1,51 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import styles from './BiddingOverview.module.css';
-
 import logo from '../../../assets/images/logo2.png';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchUnitDetails, submitBid } from '../../../actions/lbdashboard/bidOverviewActions';
+import Header from '../../Header/Header';
+import { BsChat } from 'react-icons/bs';
+import { IoNotificationsOutline } from 'react-icons/io5';
+import { FiUser } from 'react-icons/fi';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 function BiddingOverview() {
+  const { listingId } = useParams();
+  const dispatch = useDispatch();
+
+  const userId = useSelector(state => state.auth.user.userid);
+  const auth = useSelector(state => state.auth);
+  const firstName = auth.firstName || auth.user?.firstName || auth.user?.username || 'User';
+  const unitDetails = useSelector(state => state.bidOverview.unitDetails);
+  const notifications = useSelector(state => state.bidOverview.notifications);
+  const loading = useSelector(state => state.bidOverview.loading);
+  const error = useSelector(state => state.bidOverview.error);
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   const [rentingFrom, setRentingFrom] = useState('');
   const [rentingTo, setRentingTo] = useState('');
   const [name, setName] = useState('');
   const [biddingPrice, setBiddingPrice] = useState('');
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [imageScale, setImageScale] = useState(1);
 
-  const unitDetails = {
-    unitNumber: '405',
-    villageName: 'Earthbag Village',
-    description:
-      "If you wish to book it in advance bid your price and leave your details below and we'll get back to you if you are our highest bidder. Make sure your starting date is at least 2 weeks from now.",
-    currentBid: '40$',
-    unitAmenities: [
-      { id: 'ua1', text: 'Artistic Interiors' },
-      { id: 'ua2', text: 'Artistic Interiors' },
-      { id: 'ua3', text: 'Artistic Interiors' },
-    ],
+  // Header state
+  const [selectedVillage, setSelectedVillage] = useState('Village 1');
+  const [showNotifications, setShowNotifications] = useState(false);
 
-    villageAmenities: [
-      'Central Tropical',
-      'Eco-Conscious Water System',
-      'Solar Power Infrastructure',
-      'Passive Heating and Cooling',
-      'Community Gardens',
-      'Rainwater Harvesting Systems',
-      'Workshops and Demonstration Spaces',
-    ],
-    images: [
-      'https://www.chromethemer.com/backgrounds/google/images/beautiful-morning-4k-google-background.jpg',
-      'https://wallpaper.forfun.com/fetch/1d/1d033e2b725d21df94f9f6f8c289a2ba.jpeg',
-    ],
-  };
+  const flatNotifications = Array.isArray(notifications) ? notifications.flat() : [];
+  const notificationCount = flatNotifications.length;
+
+  useEffect(() => {
+    if (listingId) {
+      dispatch(fetchUnitDetails(listingId));
+    }
+  }, [dispatch, listingId]);
 
   const navigateImages = direction => {
+    if (!unitDetails.images || unitDetails.images.length === 0) return;
     if (direction === 'next') {
       setCurrentImageIndex(prevIndex =>
         prevIndex === unitDetails.images.length - 1 ? 0 : prevIndex + 1,
@@ -51,237 +58,306 @@ function BiddingOverview() {
   };
 
   const handleBiddingPriceChange = ({ target: { value } }) => {
-    // Allow only empty string or digits
     if (value === '' || /^\d+$/.test(value)) {
       setBiddingPrice(value);
     }
   };
 
-  useEffect(() => {
-    const fetchUnitDetails = async () => {
-      try {
-        // Placeholder for API call
-      } catch (error) {
-        // Handle error fetching unit details if needed (e.g., send to a logging service)
-      }
-    };
-
-    fetchUnitDetails();
-  }, []);
-
   const handleSubmit = e => {
     e.preventDefault();
-    // Handle form submission logic here
-    // Example: Send data to backend API
+    if (!rentingFrom || !rentingTo || !name || !biddingPrice) {
+      alert('Please fill in all fields.');
+      return;
+    }
+    const bidData = {
+      user_id: userId,
+      property_id: listingId,
+      bid_amount: Number.parseInt(biddingPrice, 10),
+      start_date: rentingFrom,
+      end_date: rentingTo,
+    };
+    dispatch(submitBid(listingId, bidData));
+    alert('Bid submitted successfully!');
+    setRentingFrom('');
+    setRentingTo('');
+    setName(firstName || '');
+    setBiddingPrice('');
   };
 
+  if (loading || !unitDetails) {
+    return <div className={styles.loading}>Loading...</div>;
+  }
+  if (error) {
+    return <div className={styles.error}>Error: {error}</div>;
+  }
+
   return (
-    <div className={`${styles.biddingPage}`}>
-      <div className={`${styles.topLogoContainer}`}>
-        <img src={logo} alt="One Community Logo" className={`${styles.topLogo}`} />
-      </div>
-      <div className={`${styles.boxContainer}`}>
-        <header className={`${styles.biddingHeader}`}>
-          <div className={`${styles.headerLeft}`}>
-            <div className="village-selector">
+    <div className={styles.biddingPage}>
+      {/* Top site-wide header */}
+      <Header />
+
+      <div className={`${styles.biddingPage} ${darkMode ? styles.darkMode : ''}`}>
+        {/* Logo */}
+        <div className={styles.topLogoContainer}>
+          <img src={logo} alt="One Community Logo" className={styles.topLogo} />
+        </div>
+
+        <div className={styles.boxContainer}>
+          {/* ── Inlined LBDashboardHeader ── */}
+          <nav className={styles.lbHeader}>
+            {/* Left: village selector */}
+            <div className={styles.lbHeaderLeft}>
               <select
-                id="village"
-                className={`${styles.villageSelect}`}
-                aria-label="Choose your Village"
+                className={styles.villageSelect}
+                value={selectedVillage}
+                onChange={e => setSelectedVillage(e.target.value)}
               >
-                <option value="">Choose your Village</option>
-                <option value="earthbag">Earthbag Village</option>
-                <option value="strawbale">Straw Bale Village</option>
-                <option value="cob">Cob Village</option>
+                <option value="Village 1">Village 1</option>
+                <option value="Village 2">Village 2</option>
+                <option value="Village 3">Village 3</option>
               </select>
+              <button type="button" className={styles.goButton}>
+                Go
+              </button>
             </div>
-            <button type="button" className={`${styles.goButton}`}>
-              Go
-            </button>
-          </div>
 
-          <div className={`${styles.headerRight}`}>
-            <span className={`${styles.welcomeText}`}>WELCOME USER_NAME</span>
-            {/* Replace USER_NAME */}
-            <div className={`${styles.iconContainer}`}>
-              <div className={`${styles.iconBadge}`}>
-                <i className={`fa fa-comment ${styles.messageIcon}`} />
-                <span className={`${styles.badge}`} />
-              </div>
-              <div className={`${styles.iconBadge}`}>
-                <i className={`fa fa-bell ${styles.notificationIcon}`} />
-                <span className={`${styles.badge}`} />
-              </div>
-              <i className={`fa fa-user ${styles.userIcon}`} />
-            </div>
-          </div>
-        </header>
+            {/* Right: welcome + icons */}
+            <div className={styles.lbHeaderRight}>
+              <span className={styles.welcomeText}>WELCOME {firstName.toUpperCase()}</span>
+              <div className={styles.iconContainer}>
+                {/* Chat */}
+                <Link to="/bidding" className={styles.iconLink} aria-label="Chat">
+                  <BsChat className={styles.navIcon} />
+                </Link>
 
-        <main className={`${styles.biddingContainer}`}>
-          <div className={`${styles.biddingCard}`}>
-            <div className={`${styles.biddingLeft}`}>
-              <div className={`${styles.currentBid}`}>
-                Current bid: {unitDetails.currentBid} /night
-              </div>
-              <div className={`${styles.biddingImage}`}>
-                <img
-                  src={unitDetails.images[currentImageIndex]}
-                  alt={`Unit ${unitDetails.unitNumber} ${unitDetails.villageName}`}
-                />
+                {/* Notifications */}
                 <button
                   type="button"
-                  className={`${styles.imageNavButton} ${styles.leftNav}`}
-                  onClick={() => navigateImages('prev')}
-                  aria-label="Previous image"
+                  className={styles.iconLink}
+                  onClick={() => setShowNotifications(true)}
+                  aria-label="Notifications"
                 >
-                  <i className="fa fa-chevron-left" />
+                  <IoNotificationsOutline className={styles.navIcon} />
+                  {notificationCount > 0 && (
+                    <span className={styles.badge}>{notificationCount}</span>
+                  )}
                 </button>
-                <button
-                  type="button"
-                  className={`${styles.imageNavButton} ${styles.rightNav}`}
-                  onClick={() => navigateImages('next')}
-                  aria-label="Next image"
-                >
-                  <i className="fa fa-chevron-right" />
-                </button>
-                <div className={`${styles.imageDots}`}>
-                  {unitDetails.images.map((image, index) => (
-                    <span
-                      key={image} // Using unique image URL as key is correct here
-                      className={`image-dot ${index === currentImageIndex ? 'active' : ''}`}
-                      onClick={() => setCurrentImageIndex(index)}
-                      onKeyDown={e => {
-                        // Added for accessibility
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          setCurrentImageIndex(index);
-                        }
-                      }}
-                      role="button" // Added for accessibility
-                      tabIndex={0} // Added for accessibility
-                      aria-label={`Go to image ${index + 1}`}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className={`${styles.amenitiesContainer}`}>
-                <div className={`${styles.amenitiesSection}`}>
-                  <h4>Available amenities in this Unit:</h4>
-                  <ol>
-                    {/* FIXED: Use the unique 'id' property as the key */}
-                    {unitDetails.unitAmenities.map(amenity => (
-                      <li key={amenity.id}>{amenity.text}</li>
-                    ))}
-                  </ol>
-                </div>
-
-                <div className={`${styles.amenitiesSection}`}>
-                  <h4>Village level amenities:</h4>
-                  <ol>
-                    {unitDetails.villageAmenities.map(amenity => (
-                      // Using unique amenity string as key is correct here
-                      <li key={amenity}>{amenity}</li>
-                    ))}
-                  </ol>
-                </div>
-              </div>
 
-              <div className={`${styles.mapLinkContainer}`}>
-                <Link to="/property-map" className={`${styles.mapLink}`}>
-                  <i className={`fa fa-map-marker ${styles.locationIcon}`} />
-                  View on Property Map
+                {/* User */}
+                <Link to="/bidding" className={styles.iconLink} aria-label="Profile">
+                  <FiUser className={styles.navIcon} />
                 </Link>
               </div>
             </div>
+          </nav>
 
-            <div className={`${styles.biddingRight}`}>
-              <div className={`${styles.unitHeader}`}>
-                <h2 className={`${styles.unitTitle}`}>Unit {unitDetails.unitNumber}</h2>
-                <h3 className={`${styles.unitSubtitle}`}>{unitDetails.villageName}</h3>
-              </div>
+          {/* Notifications modal */}
+          <Modal show={showNotifications} onHide={() => setShowNotifications(false)} centered>
+            <Modal.Header closeButton>
+              <Modal.Title>Notifications</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              {flatNotifications.length > 0 ? (
+                <ul>
+                  {flatNotifications.map((notif, idx) => (
+                    <li key={notif._id || idx}>
+                      {notif.message ? notif.message : 'No message available'}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p>No notifications.</p>
+              )}
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="secondary" onClick={() => setShowNotifications(false)}>
+                Close
+              </Button>
+            </Modal.Footer>
+          </Modal>
+          {/* ── End inlined header ── */}
 
-              <p className={`${styles.unitDescription}`}>{unitDetails.description}</p>
+          <main className={styles.biddingContainer}>
+            <div className={styles.biddingCard}>
+              {/* Left column */}
+              <div className={styles.biddingLeft}>
+                <div className={styles.currentBid}>Current bid: {unitDetails.bidAmount} /night</div>
 
-              <form className={`${styles.biddingForm}`} onSubmit={handleSubmit}>
-                <div className={`${styles.formRowContainer}`}>
-                  <div className={`${styles.formGroup} ${styles.biddingFormGroup}`}>
-                    <label htmlFor="rentingFrom">Renting from:</label>
-                    <div className={`${styles.inputWithIcon}`}>
-                      <input
-                        type="date"
-                        id="rentingFrom"
-                        value={rentingFrom}
-                        onChange={e => setRentingFrom(e.target.value)}
-                        required // Added basic validation
+                <div className={styles.biddingImage}>
+                  <img
+                    src={unitDetails.images[currentImageIndex]}
+                    alt={`Unit ${unitDetails.unitNumber} ${unitDetails.villageName}`}
+                    style={{ transform: `scale(${imageScale})`, transition: 'transform 0.2s' }}
+                  />
+                  <div className={styles.imageZoomControls}>
+                    <button
+                      type="button"
+                      onClick={() => setImageScale(prev => Math.min(prev + 0.2, 3))}
+                    >
+                      +
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setImageScale(prev => Math.max(prev - 0.2, 0.5))}
+                    >
+                      -
+                    </button>
+                    <button type="button" onClick={() => setImageScale(1)}>
+                      Reset
+                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    className={`${styles.imageNavButton} ${styles.leftNav}`}
+                    onClick={() => navigateImages('prev')}
+                    aria-label="Previous image"
+                  >
+                    <i className="fa fa-chevron-left" />
+                  </button>
+                  <button
+                    type="button"
+                    className={`${styles.imageNavButton} ${styles.rightNav}`}
+                    onClick={() => navigateImages('next')}
+                    aria-label="Next image"
+                  >
+                    <i className="fa fa-chevron-right" />
+                  </button>
+                  <div className={styles.imageDots}>
+                    {unitDetails.images.map((image, index) => (
+                      <span
+                        key={image}
+                        className={`${styles.imageDot} ${
+                          index === currentImageIndex ? styles.active : ''
+                        }`}
+                        onClick={() => setCurrentImageIndex(index)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') setCurrentImageIndex(index);
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={`Go to image ${index + 1}`}
                       />
-                    </div>
+                    ))}
                   </div>
+                </div>
 
-                  <div className={`${styles.formGroup} ${styles.biddingFormGroup}`}>
-                    <label htmlFor="rentingTo">Renting to:</label>
-                    <div className={`${styles.inputWithIcon}`}>
-                      <input
-                        type="date"
-                        id="rentingTo"
-                        value={rentingTo}
-                        onChange={e => setRentingTo(e.target.value)}
-                        required // Added basic validation
-                      />
-                    </div>
+                <div className={styles.amenitiesContainer}>
+                  <div className={styles.amenitiesSection}>
+                    <h4>Available amenities in this Unit:</h4>
+                    <ol>
+                      {unitDetails.unitAmenities.map(amenity => (
+                        <li key={amenity}>{amenity}</li>
+                      ))}
+                    </ol>
+                  </div>
+                  <div className={styles.amenitiesSection}>
+                    <h4>Village level amenities:</h4>
+                    <ol>
+                      {unitDetails.villageAmenities.map(amenity => (
+                        <li key={amenity}>{amenity}</li>
+                      ))}
+                    </ol>
                   </div>
                 </div>
 
-                <div
-                  className={`${styles.formGroup} ${styles.fullWidth} ${styles.biddingFormGroup}`}
-                >
-                  <label htmlFor="name">Name</label>
-                  <input
-                    type="text"
-                    id="name"
-                    placeholder="Your Name"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    required // Added basic validation
-                  />
+                <div className={styles.mapLinkContainer}>
+                  <Link to="/property-map" className={styles.mapLink}>
+                    <i className={`fa fa-map-marker ${styles.locationIcon}`} />
+                    View on Property Map
+                  </Link>
                 </div>
+              </div>
 
-                <div
-                  className={`${styles.formGroup} ${styles.fullWidth} ${styles.biddingFormGroup}`}
-                >
-                  <label htmlFor="biddingPrice">Bidding Price ($/night)</label>
-                  <input
-                    type="text" // Keep as text to allow custom validation logic
-                    id="biddingPrice"
-                    placeholder="Enter your bid amount"
-                    value={biddingPrice}
-                    onChange={handleBiddingPriceChange}
-                    pattern="\d+"
-                    title="Please enter numbers only."
-                    required // Added basic validation
-                  />
+              {/* Right column */}
+              <div className={styles.biddingRight}>
+                <div className={styles.unitHeader}>
+                  <h2 className={styles.unitTitle}>{unitDetails.title}</h2>
                 </div>
+                <p className={styles.unitDescription}>{unitDetails.description}</p>
 
-                <div className="submit-button-container">
-                  <button type="submit" className={`${styles.submitButton1}`}>
-                    Proceed to submit with details{' '}
+                <form className={styles.biddingForm} onSubmit={handleSubmit}>
+                  <div className={styles.formRowContainer}>
+                    <div className={`${styles.formGroup} ${styles.biddingFormGroup}`}>
+                      <label htmlFor="rentingFrom">Renting from:</label>
+                      <div className={styles.inputWithIcon}>
+                        <input
+                          type="date"
+                          id="rentingFrom"
+                          value={rentingFrom}
+                          onChange={e => setRentingFrom(e.target.value)}
+                          required
+                        />
+                      </div>
+                    </div>
+                    <div className={`${styles.formGroup} ${styles.biddingFormGroup}`}>
+                      <label htmlFor="rentingTo">Renting to:</label>
+                      <div className={styles.inputWithIcon}>
+                        <input
+                          type="date"
+                          id="rentingTo"
+                          value={rentingTo}
+                          onChange={e => setRentingTo(e.target.value)}
+                          required
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    className={`${styles.formGroup} ${styles.fullWidth} ${styles.biddingFormGroup}`}
+                  >
+                    <label htmlFor="name">Name</label>
+                    <input
+                      type="text"
+                      id="name"
+                      placeholder="Your Name"
+                      value={name}
+                      onChange={e => setName(e.target.value)}
+                      required
+                    />
+                  </div>
+
+                  <div
+                    className={`${styles.formGroup} ${styles.fullWidth} ${styles.biddingFormGroup}`}
+                  >
+                    <label htmlFor="biddingPrice">Bidding Price ($/night)</label>
+                    <input
+                      type="text"
+                      id="biddingPrice"
+                      placeholder="Enter your bid amount"
+                      value={biddingPrice}
+                      onChange={handleBiddingPriceChange}
+                      pattern="\d+"
+                      title="Please enter numbers only."
+                      required
+                    />
+                  </div>
+
+                  <div className={styles.submitButtonContainer}>
+                    <button type="submit" className={styles.submitButton1}>
+                      Proceed to submit with details
+                    </button>
+                  </div>
+                </form>
+
+                <div className={styles.biddingActions}>
+                  <button
+                    type="button"
+                    className={`${styles.actionButton} ${styles.reviewsButton}`}
+                  >
+                    <i className="fa fa-star" /> Reviews
+                  </button>
+                  <button type="button" className={`${styles.actionButton} ${styles.saveButton}`}>
+                    <i className="fa fa-heart" /> Save
+                  </button>
+                  <button type="button" className={`${styles.actionButton} ${styles.chatButton}`}>
+                    <i className="fa fa-comment" /> CHAT WITH HOST
                   </button>
                 </div>
-              </form>
-
-              <div className={`${styles.biddingActions}`}>
-                <button type="button" className={`${styles.actionButton} reviews-button`}>
-                  <i className="fa fa-star" /> Reviews
-                </button>
-                <button type="button" className={`${styles.actionButton} ${styles.saveButton}`}>
-                  <i className="fa fa-heart" /> Save
-                </button>
-                <button type="button" className={`${styles.actionButton} ${styles.chatButton}`}>
-                  <i className="fa fa-comment" /> CHAT WITH HOST
-                </button>
               </div>
             </div>
-          </div>
-        </main>
+          </main>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/LBDashboard/BiddingOverview/BiddingOverview.module.css b/src/components/LBDashboard/BiddingOverview/BiddingOverview.module.css
index 73ea016c89..ce6cd15895 100644
--- a/src/components/LBDashboard/BiddingOverview/BiddingOverview.module.css
+++ b/src/components/LBDashboard/BiddingOverview/BiddingOverview.module.css
@@ -14,11 +14,19 @@
   background-color: #e5e5e5;
 }
 
+.dark {
+  background: #181818 !important;
+  color: #f1f1f1 !important;
+  min-height: 100vh;
+  width: 100vw;
+}
+
 .boxContainer {
   max-width: 1200px;
   background-color: #fff;
   align-self: center;
   margin-bottom: 60px;
+  width: 100%;
 }
 
 /* Top Logo Area */
@@ -35,79 +43,105 @@
   margin-bottom: 0.25rem;
 }
 
-/* Header Styles */
-.biddingHeader {
+/* ── Inlined LBDashboardHeader styles ── */
+.lbHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #9bcc3f;
-  padding: 0.75rem 2rem;
+  padding: 0.6rem 1.5rem;
+  width: 100%;
 }
 
-.headerLeft {
+.lbHeaderLeft {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
 .villageSelect {
-  padding: 0.5rem;
+  padding: 0.4rem 0.6rem;
   border-radius: 4px;
   border: 1px solid #ccc;
-  width: 250px;
+  font-size: 0.9rem;
+  background-color: #fff;
+  min-width: 160px;
+  cursor: pointer;
 }
 
 .goButton {
   background-color: #e5e5e5;
   border: 1px solid #ccc;
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 1rem;
   border-radius: 4px;
   cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
 }
 
-/* Right side of header */
-.headerRight {
+.goButton:hover {
+  background-color: #d0d0d0;
+}
+
+.lbHeaderRight {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 1.25rem;
 }
 
 .welcomeText {
   font-weight: bold;
+  font-size: 1rem;
+  color: #1a1a1a;
 }
 
 .iconContainer {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
-.iconBadge {
+.iconLink {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #1a1a1a;
+  text-decoration: none;
+  padding: 0;
 }
 
-.messageIcon,
-.notificationIcon,
-.userIcon {
-  font-size: 1.5rem;
-  cursor: pointer;
+.navIcon {
+  font-size: 1.4rem;
+  color: #1a1a1a;
+}
+
+.navIcon:hover {
+  color: #444;
 }
 
 .badge {
   position: absolute;
-  top: -8px;
-  right: -8px;
+  top: -6px;
+  right: -6px;
   background-color: red;
-  color: white;
+  color: #fff;
   border-radius: 50%;
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
+  font-size: 0.65rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.7rem;
+  font-weight: bold;
+  z-index: 1;
 }
 
+/* ── End inlined header styles ── */
+
 /* Main Container */
 .biddingContainer {
   display: flex;
@@ -139,22 +173,55 @@
   font-weight: bold;
 }
 
+/* Image container */
 .biddingImage {
   position: relative;
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-bottom: 4rem;
   align-self: center;
   width: 100%;
+  height: 320px;
+  overflow: hidden;
 }
 
 .biddingImage img {
-  display: block;
   width: 100%;
-  height: 300px;
+  height: 100%;
   object-fit: cover;
+  transition: transform 0.2s;
+  display: block;
+}
+
+.imageZoomControls {
+  position: absolute;
+  bottom: 15px;
+  left: 35%;
+  display: flex;
+  gap: 8px;
+  z-index: 20;
+  background: transparent;
+  padding: 0;
+  border-radius: 8px;
+}
+
+.imageZoomControls button {
+  padding: 4px 12px;
+  font-size: 1rem;
+  border-radius: 4px;
+  border: none;
+  background: rgb(255 255 255 / 30%);
+  cursor: pointer;
+  color: #333;
+  font-weight: bold;
+  transition: background 0.2s;
+}
+
+.imageZoomControls button:hover {
+  background: rgb(255 255 255 / 70%);
 }
 
-/* Ensure navigation buttons stay attached to the image */
 .imageNavButton {
   position: absolute;
   top: 50%;
@@ -200,7 +267,7 @@
 }
 
 .imageDot.active {
-  background-color: white;
+  background-color: #fff;
 }
 
 .amenitiesContainer {
@@ -269,8 +336,8 @@
 .unitTitle {
   font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 0;
   color: #333;
+  text-align: center;
 }
 
 .unitSubtitle {
@@ -291,26 +358,30 @@
   display: flex;
   flex-direction: column;
   margin-bottom: 11.5rem;
+  gap: 1.5rem;
 }
 
 .formRowContainer {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 
 .formGroup {
   display: flex;
   flex-direction: column;
   flex: 1;
+  gap: 0.5rem;
 }
 
 .fullWidth {
   width: 37%;
+  flex: 1 1 100%;
 }
 
 .formGroup label {
-  margin-bottom: 0.25rem;
   font-size: 0.9rem;
+  margin-bottom: 0;
 }
 
 .inputWithIcon {
@@ -319,19 +390,18 @@
 
 .inputWithIcon input {
   width: 100%;
-  padding: 0.5rem;
+  padding: 0.6rem 0.75rem;
   border: 1px solid #ccc;
-  border-radius: 2px;
+  border-radius: 4px;
+  font-size: 0.9rem;
 }
 
-/* Style for date inputs */
 input[type='date'] {
-  /* width: 77%; */
   padding: 0.5rem;
   border: 1px solid #ccc;
   border-radius: 2px;
   appearance: none;
-  background-color: white;
+  background-color: #fff;
   background-repeat: no-repeat;
   background-position: right 8px center;
 }
@@ -342,13 +412,26 @@ input[type='date'] {
   border-radius: 2px;
 }
 
+.submitButtonContainer {
+  display: flex;
+  justify-content: flex-start;
+}
+
 .submitButton1 {
   background-color: #4caf50;
-  color: white;
+  color: #fff;
   font-weight: bold;
   white-space: nowrap;
   min-width: 300px;
   padding: 0.75rem;
+  margin-top: 1.5rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.submitButton1:hover {
+  background-color: #43a047;
 }
 
 /* Bidding Actions (Buttons) */
@@ -362,7 +445,7 @@ input[type='date'] {
 .actionButton {
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;
-  background-color: white;
+  background-color: #fff;
   cursor: pointer;
   border-radius: 4px;
   display: flex;
@@ -377,7 +460,7 @@ input[type='date'] {
 }
 
 .chatButton {
-  background-color: white;
+  background-color: #fff;
   color: #333;
   font-weight: bold;
 }
@@ -392,3 +475,95 @@ input[type='date'] {
     flex-direction: column;
   }
 }
+
+/* Loading / Error */
+.loading,
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  font-size: 1.1rem;
+}
+
+/* ── Dark mode ── */
+.darkMode {
+  background-color: #1b2a41;
+  color: #f5f5f5;
+}
+
+.darkMode .boxContainer {
+  background-color: #1e1e1e;
+}
+
+.darkMode .lbHeader {
+  background-color: #1b2a41;
+}
+
+.darkMode .welcomeText,
+.darkMode .navIcon {
+  color: #f5f5f5;
+}
+
+.darkMode .villageSelect,
+.darkMode .goButton {
+  background-color: #253342;
+  color: #f5f5f5;
+  border: 1px solid #555;
+}
+
+.darkMode .biddingCard {
+  background-color: #2b3e59;
+  border: 3px solid #30b8f8;
+}
+
+.darkMode .unitTitle,
+.darkMode .unitSubtitle,
+.darkMode .unitDescription,
+.darkMode .currentBid,
+.darkMode .formGroup label {
+  color: #fff;
+}
+
+.darkMode input[type='date'],
+.darkMode .biddingFormGroup input {
+  background-color: #253342;
+  color: #fff;
+  border: 1px solid #555;
+}
+
+.darkMode .inputWithIcon input {
+  background-color: #253342;
+  color: #fff;
+  border: 1px solid #555;
+}
+
+.darkMode .submitButton1 {
+  background-color: #388e3c;
+}
+
+.darkMode .actionButton,
+.darkMode .chatButton,
+.darkMode .saveButton {
+  background-color: #2b3e59;
+  color: #fff;
+  border: 1px solid #555;
+}
+
+.darkMode .actionButton:hover,
+.darkMode .chatButton:hover {
+  background-color: #3a4f6d;
+  border-color: #777;
+}
+
+.darkMode .mapLink {
+  color: #4fc3f7;
+}
+
+.darkMode .imageDot {
+  background-color: rgb(255 255 255 / 30%);
+}
+
+.darkMode .imageDot.active {
+  background-color: #f5f5f5;
+}
\ No newline at end of file
diff --git a/src/components/LBDashboard/Header.jsx b/src/components/LBDashboard/Header.jsx
index 4e5ec5e041..e4e40d7ace 100644
--- a/src/components/LBDashboard/Header.jsx
+++ b/src/components/LBDashboard/Header.jsx
@@ -6,10 +6,11 @@ import { Link } from 'react-router-dom';
 import Navbar from 'react-bootstrap/Navbar';
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
-
 import { FiUser } from 'react-icons/fi';
 import { BsChat } from 'react-icons/bs';
 import { IoNotificationsOutline } from 'react-icons/io5';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
 
 import itemStyles from './WishList/ItemOverview.module.css';
 import ThemeIconToggle from './ThemeIconToggle';
@@ -18,8 +19,10 @@ const cx = (base, darkClass, darkMode) => `${base} ${darkMode ? darkClass : ''}`
 
 const getUserProfilePath = authUser => (authUser?.userid ? `/userprofile/${authUser.userid}` : '/');
 
-function LBDashboardHeader({ authUser, villages, onVillageChange }) {
+function LBDashboardHeader({ notifications, authUser, villages, onVillageChange }) {
   const [selectedVillage, setSelectedVillage] = useState('');
+  const [showNotifications, setShowNotifications] = useState(false);
+  const notificationCount = notifications?.length ?? 0;
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const selectorStyle = darkMode
@@ -41,107 +44,131 @@ function LBDashboardHeader({ authUser, villages, onVillageChange }) {
   };
 
   return (
-    <Navbar
-      expand="lg"
-      className={cx(itemStyles.item__navbar, itemStyles['item__navbar--dark'], darkMode)}
-    >
-      <Container fluid className={itemStyles.item__navbarContainer}>
-        <div className={itemStyles.item__navbarToolbar}>
-          <div className={itemStyles['item__navbar-left']}>
-            <div
-              className={`${itemStyles.item__selector} ${
-                darkMode ? itemStyles['item__selector--dark'] : ''
-              }`}
-            >
-              <select
-                value={selectedVillage}
-                onChange={e => setSelectedVillage(e.target.value)}
-                style={selectorStyle}
-                aria-label="Filter by village"
+    <>
+      <Navbar
+        expand="lg"
+        className={cx(itemStyles.item__navbar, itemStyles['item__navbar--dark'], darkMode)}
+      >
+        <Container fluid className={itemStyles.item__navbarContainer}>
+          <div className={itemStyles.item__navbarToolbar}>
+            <div className={itemStyles['item__navbar-left']}>
+              <div
+                className={`${itemStyles.item__selector} ${
+                  darkMode ? itemStyles['item__selector--dark'] : ''
+                }`}
               >
-                <option value="">All Villages</option>
-                {villages.map(village => (
-                  <option key={village} value={village}>
-                    {village}
-                  </option>
-                ))}
-              </select>
-            </div>
+                <select
+                  value={selectedVillage}
+                  onChange={e => setSelectedVillage(e.target.value)}
+                  style={selectorStyle}
+                  aria-label="Filter by village"
+                >
+                  <option value="">All Villages</option>
+                  {villages.map(village => (
+                    <option key={village} value={village}>
+                      {village}
+                    </option>
+                  ))}
+                </select>
+              </div>
 
-            <button
-              type="button"
-              className={itemStyles.item__button}
-              style={goButtonStyle}
-              onClick={handleGoClick}
-            >
-              <p>Go</p>
-            </button>
-          </div>
+              <button
+                type="button"
+                className={itemStyles.item__button}
+                style={goButtonStyle}
+                onClick={handleGoClick}
+              >
+                <p>Go</p>
+              </button>
+            </div>
 
-          <Navbar.Toggle aria-controls="basic-navbar-nav" />
-          <Navbar.Collapse id="basic-navbar-nav" className={itemStyles.item__navbarCollapse}>
-            <div
-              className={cx(
-                itemStyles['item__navbar-right'],
-                itemStyles['item__navbar-right--dark'],
-                darkMode,
-              )}
-            >
-              <h2>WELCOME {authUser?.name || 'USER_NAME'}</h2>
-
-              <div className={itemStyles.item__icons}>
-                <Nav className="ml-auto">
-                  <ThemeIconToggle
-                    buttonClassName={`${cx(
-                      itemStyles['item__nav-link'],
-                      itemStyles['item__nav-link--dark'],
-                      darkMode,
-                    )} ${itemStyles.item__themeIconBtn}`}
-                    iconClassName={itemStyles['item__nav-icon']}
-                  />
-
-                  <Nav.Link
-                    as={Link}
-                    to="/lbdashboard/messaging"
-                    className={cx(
-                      itemStyles['item__nav-link'],
-                      itemStyles['item__nav-link--dark'],
-                      darkMode,
-                    )}
-                  >
-                    <BsChat className={itemStyles['item__nav-icon']} />
-                  </Nav.Link>
-
-                  <Nav.Link
-                    as={Link}
-                    to="/lbdashboard/bidding"
-                    className={cx(
-                      itemStyles['item__nav-link'],
-                      itemStyles['item__nav-link--dark'],
-                      darkMode,
-                    )}
-                  >
-                    <IoNotificationsOutline className={itemStyles['item__nav-icon']} />
-                  </Nav.Link>
-
-                  <Nav.Link
-                    as={Link}
-                    to={getUserProfilePath(authUser)}
-                    className={cx(
-                      itemStyles['item__nav-link'],
-                      itemStyles['item__nav-link--dark'],
-                      darkMode,
-                    )}
-                  >
-                    <FiUser className={itemStyles['item__nav-icon']} />
-                  </Nav.Link>
-                </Nav>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav" className={itemStyles.item__navbarCollapse}>
+              <div
+                className={cx(
+                  itemStyles['item__navbar-right'],
+                  itemStyles['item__navbar-right--dark'],
+                  darkMode,
+                )}
+              >
+                <h2>WELCOME {authUser?.name || 'USER_NAME'}</h2>
+                <div className={itemStyles.item__icons}>
+                  <Nav className="ml-auto">
+                    <ThemeIconToggle
+                      buttonClassName={`${cx(
+                        itemStyles['item__nav-link'],
+                        itemStyles['item__nav-link--dark'],
+                        darkMode,
+                      )} ${itemStyles.item__themeIconBtn}`}
+                      iconClassName={itemStyles['item__nav-icon']}
+                    />
+                    <Nav.Link
+                      as={Link}
+                      to="/lbdashboard/messaging"
+                      className={cx(
+                        itemStyles['item__nav-link'],
+                        itemStyles['item__nav-link--dark'],
+                        darkMode,
+                      )}
+                    >
+                      <BsChat className={itemStyles['item__nav-icon']} />
+                    </Nav.Link>
+                    <Nav.Link
+                      as="button"
+                      type="button"
+                      onClick={() => setShowNotifications(true)}
+                      aria-label={`Notifications (${notificationCount})`}
+                      className={cx(
+                        itemStyles['item__nav-link'],
+                        itemStyles['item__nav-link--dark'],
+                        darkMode,
+                      )}
+                    >
+                      <IoNotificationsOutline className={itemStyles['item__nav-icon']} />
+                    </Nav.Link>
+                    <Nav.Link
+                      as={Link}
+                      to={getUserProfilePath(authUser)}
+                      className={cx(
+                        itemStyles['item__nav-link'],
+                        itemStyles['item__nav-link--dark'],
+                        darkMode,
+                      )}
+                    >
+                      <FiUser className={itemStyles['item__nav-icon']} />
+                    </Nav.Link>
+                  </Nav>
+                </div>
               </div>
-            </div>
-          </Navbar.Collapse>
-        </div>
-      </Container>
-    </Navbar>
+            </Navbar.Collapse>
+          </div>
+        </Container>
+      </Navbar>
+
+      <Modal show={showNotifications} onHide={() => setShowNotifications(false)} centered>
+        <Modal.Header closeButton>
+          <Modal.Title>Notifications</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {notifications && notifications.length > 0 ? (
+            <ul>
+              {notifications.map((notif, idx) => (
+                <li key={notif._id || idx}>
+                  {notif.message ? notif.message : 'No message available'}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p>No notifications.</p>
+          )}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={() => setShowNotifications(false)}>
+            Close
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
   );
 }
 
@@ -150,12 +177,19 @@ LBDashboardHeader.propTypes = {
     name: PropTypes.string,
     userid: PropTypes.string,
   }),
+  notifications: PropTypes.arrayOf(
+    PropTypes.shape({
+      _id: PropTypes.string,
+      message: PropTypes.string,
+    }),
+  ),
   villages: PropTypes.arrayOf(PropTypes.string),
   onVillageChange: PropTypes.func,
 };
 
 LBDashboardHeader.defaultProps = {
   authUser: null,
+  notifications: [],
   villages: [],
   onVillageChange: () => {},
 };
diff --git a/src/constants/lbdashboard/bidOverviewConstants.js b/src/constants/lbdashboard/bidOverviewConstants.js
new file mode 100644
index 0000000000..7cf39b2167
--- /dev/null
+++ b/src/constants/lbdashboard/bidOverviewConstants.js
@@ -0,0 +1,10 @@
+export const FETCH_UNIT_DETAILS_REQUEST = 'FETCH_UNIT_DETAILS_REQUEST';
+export const FETCH_UNIT_DETAILS_SUCCESS = 'FETCH_UNIT_DETAILS_SUCCESS';
+export const FETCH_UNIT_DETAILS_FAILURE = 'FETCH_UNIT_DETAILS_FAILURE';
+
+export const SUBMIT_BID_REQUEST = 'SUBMIT_BID_REQUEST';
+export const SUBMIT_BID_SUCCESS = 'SUBMIT_BID_SUCCESS';
+export const SUBMIT_BID_FAILURE = 'SUBMIT_BID_FAILURE';
+
+export const NOTIFICATION_SUCCESS = 'NOTIFICATION_SUCCESS';
+export const NOTIFICATION_FAILURE = 'NOTIFICATION_FAILURE';
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 68ca63e94b..4f9b186096 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -99,6 +99,8 @@ import {
   listingBookingReducer,
 } from './listBidDashboard/listOverviewReducer';
 
+import bidOverviewReducer from './listBidDashboard/bidOverviewReducer';
+
 // pr analytics
 import reviewsInsightReducer from './prAnalytics/reviewsInsightReducer';
 
@@ -173,6 +175,7 @@ const localReducers = {
   dashboard: dashboardReducer,
   injuries: injuriesReducer,
   weeklyProjectSummary: weeklyProjectSummaryReducer,
+  bidOverview: bidOverviewReducer,
   costBreakdown: costBreakdownReducer,
 
   // lbdashboard
diff --git a/src/reducers/listBidDashboard/bidOverviewReducer.js b/src/reducers/listBidDashboard/bidOverviewReducer.js
new file mode 100644
index 0000000000..f3ed20e356
--- /dev/null
+++ b/src/reducers/listBidDashboard/bidOverviewReducer.js
@@ -0,0 +1,46 @@
+import {
+  FETCH_UNIT_DETAILS_SUCCESS,
+  FETCH_UNIT_DETAILS_REQUEST,
+  FETCH_UNIT_DETAILS_FAILURE,
+  SUBMIT_BID_SUCCESS,
+  SUBMIT_BID_REQUEST,
+  SUBMIT_BID_FAILURE,
+  NOTIFICATION_SUCCESS,
+  NOTIFICATION_FAILURE,
+} from '../../constants/lbdashboard/bidOverviewConstants';
+
+const initialState = {
+  loading: false,
+  unitDetails: null,
+  error: null,
+  bidResponse: null,
+  notifications: [],
+};
+
+const bidOverviewReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_UNIT_DETAILS_REQUEST:
+      return { ...state, loading: true, error: null };
+    case FETCH_UNIT_DETAILS_SUCCESS:
+      return { ...state, loading: false, unitDetails: action.payload };
+    case FETCH_UNIT_DETAILS_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    case SUBMIT_BID_REQUEST:
+      return { ...state, loading: true, error: null };
+    case SUBMIT_BID_SUCCESS:
+      return { ...state, loading: false, bidResponse: action.payload };
+    case SUBMIT_BID_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    case NOTIFICATION_SUCCESS:
+      return {
+        ...state,
+        notifications: Array.isArray(action.payload) ? action.payload : [action.payload],
+      };
+    case NOTIFICATION_FAILURE:
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default bidOverviewReducer;
diff --git a/src/routes.jsx b/src/routes.jsx
index 6cf79f3a29..4156a623ee 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -293,10 +293,11 @@ export default (
       )}
     />
     <LBProtectedRoute path="/lbdashboard/listOverview" exact component={ListOveriew} />
-    <LBProtectedRoute path="/lbdashboard/bidoverview" exact component={LBBidOverview} />
+    <LBProtectedRoute path="/lbdashboard/bidOverview/:listingId" exact component={LBBidOverview} />
     <LBProtectedRoute path="/lbdashboard/bidding" exact component={BiddingHomepage} />
     <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} />
     <LBProtectedRoute path="/lbdashboard/masterplan" exact component={MasterPlan} />
+
     <LBProtectedRoute
       exact
       path="/lbdashboard/wishlists"
diff --git a/src/utils/URL.js b/src/utils/URL.js
index a3274bfff3..38a7ef47e4 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -564,6 +564,8 @@ export const ENDPOINTS = {
   LB_GET_USER_PREFERENCES: `${APIEndpoint}/lb/preferences`,
   LB_UPDATE_USER_PREFERENCES: `${APIEndpoint}/lb/preferences`,
   LB_MARK_MESSAGES_AS_READ: `${APIEndpoint}/lb/messages/mark-as-read`,
+  LB_BID_OVERVIEW: listingId =>`${APIEndpoint}/lb/bidoverview/${listingId}`,
+  LB_SUBMIT_BID: listingId => `${APIEndpoint}/lb/bidoverview/placeBid/${listingId}`,
 
   // Injuries endpoints
   INJURIES: `${APIEndpoint}/injuries`,