diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 05688f7a20..32a81fc4fd 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import styles from './LBMessaging.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBell, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faLocationArrow, faSearch, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { getUserProfileBasicInfo } from '~/actions/userManagement';
 import {
@@ -273,7 +273,7 @@ export default function LBMessaging() {
               message.sender === auth.userid ? styles.sent : styles.received
             }`}
           >
-            <p className={`${styles.messageText}`}>
+            <p className={`${styles.messageText} ${darkMode ? styles.lightBackground : ''}`}>
               {message.content.split('\n').map(line => (
                 <span key={message._id + line}>
                   {line}
@@ -290,12 +290,12 @@ export default function LBMessaging() {
 
   return (
     users.userProfilesBasicInfo.length !== 0 && (
-      <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${darkMode ? styles.darkMode : styles.lightMode}`}>
         <div className={`${styles.mainContainer}`}>
           <div className={`${styles.logoContainer}`}>
             <img src={logo} alt="One Community Logo" />
           </div>
-          <div className={`${styles.contentContainer}`}>
+          <div className={`${styles.contentContainer} ${darkMode ? styles.darkMode2 : ''}`}>
             <div className={`${styles.containerTop} ${styles.msg}`}>
               {mobileView && (
                 <div className={`${styles.lbMobileMessagingMenu}`}>
@@ -315,7 +315,9 @@ export default function LBMessaging() {
                               <input
                                 type="text"
                                 placeholder={placeholder}
-                                className={`${styles.lbSearchInput}`}
+                                className={`${styles.lbSearchInput} ${
+                                  darkMode ? styles.lightBackground : ''
+                                }`}
                                 value={searchQuery}
                                 onChange={e => {
                                   const query = e.target.value;
@@ -332,10 +334,11 @@ export default function LBMessaging() {
                                 onClick={() => setShowContacts(prev => !prev)}
                                 className={`${styles.lbMsgIconBtn}`} // you can reuse or define styles here
                               >
-                                <img
-                                  src="https://img.icons8.com/metro/26/multiply.png"
+                                {/* Removed Image and used Font Awesome icon for DarkMode support */}
+                                <FontAwesomeIcon
+                                  icon={faXmark}
                                   alt="Close"
-                                  className={`${styles.lbMsgIcon}`}
+                                  className={`${styles.lbClose}`}
                                 />
                               </button>
                             </div>
@@ -352,7 +355,9 @@ export default function LBMessaging() {
                             </div>
                           )}
                           <div
-                            className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                            className={`${styles.lbMessagingContactsBody} ${
+                              styles.activeInlbMessagingContactsBody
+                            } ${darkMode ? styles.darkMode2 : ''}`}
                           >
                             {showContacts
                               ? searchResults.map(user => (
@@ -402,7 +407,9 @@ export default function LBMessaging() {
                       <input
                         type="text"
                         placeholder={placeholder}
-                        className={`${styles.lbSearchInput}`}
+                        className={`${styles.lbSearchInput} ${
+                          darkMode ? styles.lightBackground : ''
+                        }`}
                         value={searchQuery}
                         onChange={e => {
                           const query = e.target.value;
@@ -419,10 +426,11 @@ export default function LBMessaging() {
                         onClick={() => setShowContacts(prev => !prev)}
                         className={`${styles.lbMsgIconBtn}`} // you can reuse or define styles here
                       >
-                        <img
-                          src="https://img.icons8.com/metro/26/multiply.png"
+                        {/* Removed Image and used Font Awesome icon for DarkMode support */}
+                        <FontAwesomeIcon
+                          icon={faXmark}
                           alt="Close"
-                          className={`${styles.lbMsgIcon}`}
+                          className={`${styles.lbClose}`}
                         />
                       </button>
                     </div>
@@ -472,7 +480,7 @@ export default function LBMessaging() {
               {/* Chat Window Section */}
               <div className={`${styles.lbMessagingMessageWindow}`}>
                 <div className={`${styles.lbMessagingMessageWindowHeader}`}>
-                  <div>
+                  <div className={`${styles.displayItems}`}>
                     <img
                       src={selectedUser.profilePic || '/pfp-default-header.png'}
                       onError={e => {
@@ -480,6 +488,7 @@ export default function LBMessaging() {
                         e.target.src = '/pfp-default-header.png';
                       }}
                       alt="Profile"
+                      className={`${styles.profile}`}
                     />
                     {selectedUser.firstName
                       ? `${selectedUser.firstName} ${selectedUser.lastName}`
@@ -498,7 +507,8 @@ export default function LBMessaging() {
                         <div
                           className={`${styles.lgMessagingBellSelectDropdown} ${
                             bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                          }`}
+                          }
+                          ${darkMode ? styles.darkMode2 : ''}`}
                         >
                           <label>
                             <input
@@ -541,14 +551,18 @@ export default function LBMessaging() {
                     </div>
                   )}
                 </div>
-                <div className={`${styles.lbMessagingMessageWindowBody}`}>
+                <div
+                  className={`${styles.lbMessagingMessageWindowBody} ${
+                    darkMode ? styles.darkMode1 : ''
+                  }`}
+                >
                   {selectedUser.userId ? (
                     renderChatMessages()
                   ) : (
                     <p className={`${styles.startMsg}`}>Select a user to start chatting</p>
                   )}
                 </div>
-                <div className={`${styles.lbMessaingMessageWindowFooter}`}>
+                <div className={`${styles.lbMessaingMessageWindowFooter} `}>
                   <textarea
                     type="text"
                     placeholder="Type a message..."
@@ -560,7 +574,7 @@ export default function LBMessaging() {
                         handleSendMessage();
                       }
                     }}
-                    className={`${styles.lbMessagingTextarea}`}
+                    className={`${styles.lbMessagingTextarea} ${darkMode ? styles.darkMode2 : ''}`}
                     disabled={!selectedUser.userId}
                   />
                   <FontAwesomeIcon
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index c8992afc6d..75870d82ec 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -1,20 +1,17 @@
 /* Main container styles */
 .containerMainMsg {
-  background-color: #e0e0e0;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  margin: 20px 40px 30px 40px;
   padding: 0;
   width: auto;
-  min-height: 560px;
+  min-height:550px;
   height: auto;
 }
 .mainContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #e0e0e0;
   width: 100%;
   min-height: 100vh;
   padding: 20px;
@@ -26,7 +23,6 @@
   justify-content: center;
   align-items: center;
   padding: 20px 0;
-  background: #e5e5e5;
   width: 100%
 }
 
@@ -39,12 +35,12 @@
 .contentContainer {
   display: flex;
   flex-direction: column;
-  background-color: white;
   border: 1px solid #ccc;
   border-radius: 8px;
   width: 85%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   height: max-content;
+  overflow: hidden;
 }
 
 /* Contacts section */
@@ -68,21 +64,25 @@
   position: relative;
 }
 
-.lbMessagingContact {
-  display: flex;
-  padding: 2px;
-  margin: 2px;
+.lbMessagingContact {  
+  align-items: center; 
   cursor: pointer;
-  background-color: white;
-  border-radius: 5px;
+  border-radius: 5px;  
+  border-bottom: 1px solid #eee;
+  display: flex;
+  width: 100%;
+  padding: 8px;
 }
 
 .lbMessagingContact:hover {
-  background-color: #e9e3e3;
+  background-color: #a9b7be;
 }
 
 .lbMessagingContact img {
-  border-radius: 20%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
 }
 
 .lbMessagingContactInfo {
@@ -91,20 +91,22 @@
   font-size: 10px;
   margin-top: auto;
   margin-bottom: auto;
+  text-align:left;
 }
 
 .lbMessagingContactsHeader {
-  background-color: #8b8888;
-  height: 12.5%;
+  background-color: #869aa3;
+  height: 3em;
   max-height: 70px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 5px;
+  padding: 1px 0px 1px 5px;
+  margin: 1px;
 }
 
 .lbMessagingContactsHeaderMobile {
-  background-color: #8b8888;
+  background-color: #869aa3;
   max-height: 70px;
   display: flex;
   justify-content: space-between;
@@ -154,7 +156,6 @@
 .lbMessagingMessageWindow {
   width: 80%;
   height: 100%;
-  background-color: white;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -164,7 +165,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #e0e0e0;
+  background-color: #869aa3;
   height: 12.5%;
   max-height: 70px;
   font-size: 15px;
@@ -176,11 +177,12 @@
   height: 75.5%;
   padding: 10px 0 0 0;
   min-height: 450px;
+  background-color: #fff;
 }
 
 .lbMessaingMessageWindowFooter {
   display: flex;
-  background-color: #e0e0e0;
+  /* background-color: #e0e0e0; */
   color: black;
   height: 12%;
   padding: 2.5px;
@@ -200,10 +202,9 @@
   outline: none;
   color: black;
   overflow: hidden;
-  background-color: #eae3e3;
-  resize: none;
   padding: 1%;
   margin: 5px;
+  resize: none;
 }
 
 .messageList {
@@ -228,7 +229,6 @@
   margin: 0;
   padding: 2px 10px;
   max-width: 50%;
-  text-wrap: wrap;
   border-radius: 10px;
   text-align: left;
 }
@@ -255,13 +255,11 @@
 }
 
 .lbSearchInput {
-  width: 75%;
-  background-color: #8b8888;
+  width: 90%;
   color: #000000;
-  outline: none;
-  border: 1px solid #000000;
+  outline: none; 
   border-radius: 5px;
-  padding: 1px 0 1px 5px;
+  padding: 5px;
 }
 
 .lbSearchInput::placeholder {
@@ -291,6 +289,7 @@
 .lbMsgIcon {
   height: 100%;
   width: 75% !important;
+  cursor: pointer;
 }
 
 .lgMessagingBellSelectDropdown {
@@ -307,6 +306,7 @@
   align-items: center;
   z-index: 100;
   padding: 5px;
+  width: max-content;
 }
 
 .activeInlgMessagingBellSelectDropdown{
@@ -414,26 +414,48 @@
   padding: 10px;
 }
 
-.lbMessagingContact {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-  cursor: pointer;
-}
-
-.lbMessagingContact img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: 10px;
-}
-
 .lbMessagingContactName {
   font-size: 15px;
   font-weight: 500;
+  color: black;
 }
 
-.lbMsgIcon {
-  cursor: pointer;
+.darkMode{
+  background-color: #1b2a41;
+}
+.lightMode{
+  background-color: #e0e0e0;
+}
+.profile{
+  width: 50px;
+  height: 50px;
+}
+.darkMode1{
+  background-color: #203844;
+}
+.darkMode2{  
+  background-color: #526e7c;
+}
+.darkMode2::placeholder{
+  color: #fff;
+}
+.lightBackground{
+  background-color: #869aa3;
+  color: white;
 }
+.lightBackground::placeholder{
+  background-color: #869aa3;
+  color: #fff;
+  outline: none;
+}
+.lbClose{
+  font-size: x-large;
+  color:#000;
+  padding: 3px;
+}
+.displayItems{
+  display: flex;
+  gap: 5px;
+  flex-direction: row;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index 7e47f9b897..5d2429435c 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -317,7 +317,7 @@ export default (
     <LBProtectedRoute path="/lbdashboard" component={LBDashboard} />
 
     <LBProtectedRoute path="/lbdashboard/home" component={LBHome} />
-    <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} />
+    {/* <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} /> */}
     <LBProtectedRoute path="/lbdashboard/map/masterplan" component={MasterPlan} />
     <LBProtectedRoute path="/lbdashboard/listingoverview" component={ListOveriew} />
     <LBProtectedRoute path="/lbdashboard/biddingoverview" component={LBBidOverview} />
@@ -769,7 +769,7 @@ export default (
         <LBProtectedRoute path="/lbdashboard/masterplan" exact component={MasterPlan} />
         <Route path="/lbdashboard/login" component={LBLogin} />
         <Route path="/lbdashboard/register" component={LBRegister} />
-        <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} />
+        {/* <LBProtectedRoute path="/lbdashboard/messaging" component={LBMessaging} /> */}
         <Route // Should be LBProtectedRoute
           path="/lbdashboard/listingshome"
           render={() => (