diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 20c5d84b16..82dac7f8e7 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -42,6 +42,8 @@ export default function LBMessaging() {
   const existingChats = useSelector(state => state.messages.existingChats);
   const { messages, loading: messagesLoading } = messagesState;
 
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   useEffect(() => {
     if (messageEndRef.current) {
       messageEndRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -213,14 +215,16 @@ export default function LBMessaging() {
 
   const renderContacts = () => {
     if (existingChats.length === 0) {
-      return <p>No chats available.</p>;
+      return <p className={`${darkMode ? 'text-light' : ''}`}>No chats available.</p>;
     }
 
     return existingChats.map(user => (
       <button
         key={user.userId}
         type="button"
-        className={`${styles.lbMessagingContact}`}
+        className={`${`${styles.lbMessagingContact} ${
+          darkMode ? ` bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}` : ''
+        }`}`}
         onClick={() => {
           updateSelection(user);
           setMobileHamMenu(false);
@@ -235,7 +239,11 @@ export default function LBMessaging() {
           }}
         />
         <div className={styles.lbMessagingContactInfo}>
-          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
+          <div
+            className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''} ${
+              darkMode ? 'text-light' : ''
+            }`}
+          >
             {user.firstName} {user.lastName}
           </div>
         </div>
@@ -245,11 +253,19 @@ export default function LBMessaging() {
 
   const renderChatMessages = () => {
     if (messagesLoading) {
-      return <p className={styles.lbNoMsgText}>Loading messages...</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          Loading messages...
+        </p>
+      );
     }
 
     if (messages.length === 0) {
-      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          No messages to display.
+        </p>
+      );
     }
 
     const filteredMessages = messages.filter(
@@ -259,7 +275,11 @@ export default function LBMessaging() {
     );
 
     if (filteredMessages.length === 0) {
-      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          No messages to display.
+        </p>
+      );
     }
 
     return (
@@ -272,7 +292,7 @@ export default function LBMessaging() {
               message.sender === auth.userid ? styles.sent : styles.received
             }`}
           >
-            <p className={styles.messageText}>
+            <p className={`${styles.messageText} ${darkMode ? ` bg-azure text-light` : ''}`}>
               {message.content.split('\n').map(line => (
                 <span key={message._id + line}>
                   {line}
@@ -289,12 +309,16 @@ export default function LBMessaging() {
 
   return (
     users.userProfilesBasicInfo.length !== 0 && (
-      <div className={styles.mainContainer}>
-        <div className={styles.logoContainer}>
+      <div className={`${styles.mainContainer} ${darkMode ? ' bg-oxford-blue' : ''}`}>
+        <div className={`${styles.logoContainer} ${darkMode ? ' bg-oxford-blue' : ''}`}>
           <img src={logo} alt="One Community Logo" />
         </div>
-        <div className={styles.contentContainer}>
-          <div className={`${styles.containerTop} ${styles.msg}`}>
+        <div
+          className={`${styles.contentContainer} ${
+            darkMode ? ` bg-yinmn-blue ${styles.darkModeBorder}` : ''
+          }`}
+        >
+          <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? ' bg-azure' : ''}`}>
             {mobileView && (
               <div className={styles.lbMobileMessagingMenu}>
                 <div className={styles.lbMobileHeader}>
@@ -309,11 +333,17 @@ export default function LBMessaging() {
                     <div className={styles.lbMobileHamMenu} ref={menuRef}>
                       <div className={styles.lbMobileHamMenuHeader}>
                         {showContacts ? (
-                          <div className={styles.lbMessagingContactsHeaderMobile}>
+                          <div
+                            className={`${styles.lbMessagingContactsHeaderMobile} ${
+                              darkMode ? ' bg-space-cadet' : ''
+                            }`}
+                          >
                             <input
                               type="text"
                               placeholder={placeholder}
-                              className={styles.lbSearchInput}
+                              className={`${styles.lbSearchInput} ${
+                                darkMode ? ` bg-yinmn-blue text-light` : ''
+                              }`}
                               value={searchQuery}
                               onChange={e => {
                                 const query = e.target.value;
@@ -331,33 +361,53 @@ export default function LBMessaging() {
                               className={styles.lbMsgIconBtn} // you can reuse or define styles here
                             >
                               <img
-                                src="https://img.icons8.com/metro/26/multiply.png"
+                                src={
+                                  darkMode
+                                    ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
+                                    : 'https://img.icons8.com/metro/26/multiply.png'
+                                }
                                 alt="Close"
                                 className={styles.lbMsgIcon}
                               />
                             </button>
                           </div>
                         ) : (
-                          <div className={styles.lbMessagingContactsHeaderMobile}>
-                            <h3 className={styles.lbContactMsgs}>Messages</h3>
+                          <div
+                            className={`${styles.lbMessagingContactsHeaderMobile} ${
+                              darkMode ? ' bg-space-cadet' : ''
+                            }`}
+                          >
+                            <h3
+                              className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}
+                            >
+                              Messages
+                            </h3>
                             <div className={styles.lbMessagingSearchIconsMobile}>
                               <FontAwesomeIcon
                                 icon={faSearch}
-                                className={styles.lbMsgIconMobile}
+                                className={`${styles.lbMsgIconMobile} ${
+                                  darkMode ? styles.darkModeIcon : ''
+                                }`}
                                 onClick={() => setShowContacts(prev => !prev)}
                               />
                             </div>
                           </div>
                         )}
                         <div
-                          className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                          className={`${styles.lbMessagingContactsBody} ${
+                            styles.activeInlbMessagingContactsBody
+                          } ${darkMode ? ' bg-oxford-blue' : ''}`}
                         >
                           {showContacts
                             ? searchResults.map(user => (
                                 <button
                                   key={user.userId}
                                   type="button"
-                                  className={styles.lbMessagingContact}
+                                  className={`${styles.lbMessagingContact} ${
+                                    darkMode
+                                      ? ` bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                                      : ''
+                                  }`}
                                   onClick={() => {
                                     updateSelection(user);
                                     setMobileHamMenu(false);
@@ -375,7 +425,7 @@ export default function LBMessaging() {
                                     <div
                                       className={`${styles.lbMessagingContactName} ${
                                         mobileView ? styles.black : ''
-                                      }`}
+                                      } ${darkMode ? 'text-light' : ''}`}
                                     >
                                       {user.firstName} {user.lastName}
                                     </div>
@@ -391,16 +441,22 @@ export default function LBMessaging() {
               </div>
             )}
           </div>
-          <div className={styles.containerMainMsg}>
+          <div className={`${styles.containerMainMsg} ${darkMode ? ' bg-oxford-blue' : ''}`}>
             {/* Contacts Section */}
             {!mobileView && (
               <div className={styles.lbMessagingContacts}>
                 {showContacts ? (
-                  <div className={styles.lbMessagingContactsHeader}>
+                  <div
+                    className={`${styles.lbMessagingContactsHeader} ${
+                      darkMode ? ' bg-space-cadet' : ''
+                    }`}
+                  >
                     <input
                       type="text"
                       placeholder={placeholder}
-                      className={styles.lbSearchInput}
+                      className={`${styles.lbSearchInput} ${
+                        darkMode ? ` bg-yinmn-blue text-light` : ''
+                      }`}
                       value={searchQuery}
                       onChange={e => {
                         const query = e.target.value;
@@ -415,36 +471,52 @@ export default function LBMessaging() {
                     <button
                       type="button"
                       onClick={() => setShowContacts(prev => !prev)}
-                      className={styles.lbMsgIconBtn} // you can reuse or define styles here
+                      className={`${styles.lbMsgIconBtn} ${darkMode ? styles.darkModeIcon : ''}`} // you can reuse or define styles here
                     >
                       <img
-                        src="https://img.icons8.com/metro/26/multiply.png"
+                        src={
+                          darkMode
+                            ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
+                            : 'https://img.icons8.com/metro/26/multiply.png'
+                        }
                         alt="Close"
                         className={styles.lbMsgIcon}
                       />
                     </button>
                   </div>
                 ) : (
-                  <div className={styles.lbMessagingContactsHeader}>
-                    <h3 className={styles.lbContactMsgs}>Messages</h3>
+                  <div
+                    className={`${styles.lbMessagingContactsHeader} ${
+                      darkMode ? ' bg-space-cadet' : ''
+                    }`}
+                  >
+                    <h3 className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}>
+                      Messages
+                    </h3>
                     <div className={styles.lbMessagingSearchIcons}>
                       <FontAwesomeIcon
                         icon={faSearch}
-                        className={styles.lbMsgIcon}
+                        className={`${styles.lbMsgIcon} ${darkMode ? styles.darkModeIcon : ''}`}
                         onClick={() => setShowContacts(prev => !prev)}
                       />
                     </div>
                   </div>
                 )}
                 <div
-                  className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                  className={`${styles.lbMessagingContactsBody} ${
+                    styles.activeInlbMessagingContactsBody
+                  } ${darkMode ? ' bg-oxford-blue' : ''}`}
                 >
                   {showContacts
                     ? searchResults.map(user => (
                         <button
                           key={user._id}
                           type="button"
-                          className={styles.lbMessagingContact}
+                          className={`${styles.lbMessagingContact} ${
+                            darkMode
+                              ? ` bg-yinmn-blue  ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                              : ''
+                          }`}
                           onClick={() => updateSelection(user)}
                         >
                           <img
@@ -456,7 +528,11 @@ export default function LBMessaging() {
                             }}
                           />
                           <div className={styles.lbMessagingContactInfo}>
-                            <div className={styles.lbMessagingContactName}>
+                            <div
+                              className={`${styles.lbMessagingContactName} ${
+                                darkMode ? 'text-light' : ''
+                              }`}
+                            >
                               {user.firstName} {user.lastName}
                             </div>
                           </div>
@@ -469,8 +545,12 @@ export default function LBMessaging() {
 
             {/* Chat Window Section */}
             <div className={styles.lbMessagingMessageWindow}>
-              <div className={styles.lbMessagingMessageWindowHeader}>
-                <div>
+              <div
+                className={`${styles.lbMessagingMessageWindowHeader} ${
+                  darkMode ? ' bg-oxford-blue' : ''
+                }`}
+              >
+                <div className={darkMode ? 'text-light' : ''}>
                   <img
                     src={selectedUser.profilePic || '/pfp-default-header.png'}
                     onError={e => {
@@ -491,15 +571,17 @@ export default function LBMessaging() {
                       onClick={() => {
                         setBellDropdownActive(prev => !prev);
                       }}
-                      className={styles.lgMessagingNotificationBell}
+                      className={`${styles.lgMessagingNotificationBell} ${
+                        darkMode ? styles.darkModeIcon : ''
+                      }`}
                     />
                     {bellDropdownActive && (
                       <div
                         className={`${styles.lgMessagingBellSelectDropdown} ${
                           bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                        }`}
+                        } ${darkMode ? ' bg-yinmn-blue' : ''}`}
                       >
-                        <label>
+                        <label className={darkMode ? 'text-light' : ''}>
                           <input
                             type="checkbox"
                             checked={selectedOption.notifyInApp || false}
@@ -513,7 +595,7 @@ export default function LBMessaging() {
                           />
                           In App
                         </label>
-                        <label>
+                        <label className={darkMode ? 'text-light' : ''}>
                           <input
                             type="checkbox"
                             checked={selectedOption.notifyEmail || false}
@@ -539,14 +621,24 @@ export default function LBMessaging() {
                   </div>
                 )}
               </div>
-              <div className={styles.lbMessagingMessageWindowBody}>
+              <div
+                className={`${styles.lbMessagingMessageWindowBody} ${
+                  darkMode ? ' bg-yinmn-blue' : ''
+                }`}
+              >
                 {selectedUser.userId ? (
                   renderChatMessages()
                 ) : (
-                  <p className={styles.startMsg}>Select a user to start chatting</p>
+                  <p className={`${styles.startMsg} ${darkMode ? 'text-light' : ''}`}>
+                    Select a user to start chatting
+                  </p>
                 )}
               </div>
-              <div className={styles.lbMessaingMessageWindowFooter}>
+              <div
+                className={`${styles.lbMessaingMessageWindowFooter} ${
+                  darkMode ? ' bg-oxford-blue' : ''
+                }`}
+              >
                 <textarea
                   type="text"
                   placeholder="Type a message..."
@@ -558,7 +650,9 @@ export default function LBMessaging() {
                       handleSendMessage();
                     }
                   }}
-                  className={styles.lbMessagingTextarea}
+                  className={`${styles.lbMessagingTextarea} ${
+                    darkMode ? ` bg-yinmn-blue text-light` : ''
+                  }`}
                   disabled={!selectedUser.userId}
                 />
                 <FontAwesomeIcon
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index c8992afc6d..5fcf7b1366 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -120,7 +120,7 @@
 .lbMsgIconMobile {
   height: 100%;
   width: auto !important;
-  color: black !important;
+  color: black
 }
 
 .lbMobileHamMenuHeader {
@@ -437,3 +437,21 @@
 .lbMsgIcon {
   cursor: pointer;
 }
+
+/* Dark Mode Styles */
+
+.contactYinmBlue {
+   /* empty class to provide hovering capabilty to contacts in dark mode  */
+}
+
+.contactYinmBlue:hover {
+  background-color: #1c2541 !important; /* Space Cadet for hover effect */
+}
+
+.darkModeBorder {
+  border-color: black;
+}
+
+.darkModeIcon {
+  color: white;
+}