diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 7dcf80469d..8ebf0b5328 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -20,6 +20,7 @@ import {
   markMessagesAsReadViaSocket,
 } from '../../../utils/messagingSocket';
 import logo from '../../../assets/images/logo2.png';
+import Header from '../../Header/Header';
 
 export default function LBMessaging() {
   const dispatch = useDispatch();
@@ -56,7 +57,7 @@ export default function LBMessaging() {
   const sidebarContacts = useMemo(() => {
     const chats = [...existingChats];
     const sid = selectedUser?.userId;
-    if (!sid) return chats;
+    if (!sid || !selectedUser?.firstName) return chats;
     const exists = chats.some(c => String(c.userId ?? c._id) === String(sid));
     if (!exists) {
       chats.unshift({
@@ -152,7 +153,7 @@ export default function LBMessaging() {
   useEffect(() => {
     const handleClickOutside = event => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMobileHamMenu(false); // Close the menu if clicked outside
+        setMobileHamMenu(false);
       }
     };
 
@@ -259,7 +260,6 @@ export default function LBMessaging() {
         toast.success('Preferences updated successfully!');
         setBellDropdownActive(false);
 
-        // Refresh preferences after saving
         dispatch(fetchUserPreferences(currentUserId, selectedUser.userId)).then(response => {
           if (response?.payload) {
             setSelectedOption({
@@ -313,6 +313,34 @@ export default function LBMessaging() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  const handleSearchChange = e => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    if (query.trim() === '') {
+      setSearchResults([]);
+    } else {
+      searchUserProfiles(query);
+    }
+  };
+
+  const renderContactButton = (key, user, onClick) => (
+    <button key={key} type="button" className={styles.lbMessagingContact} onClick={onClick}>
+      <img
+        src={user.profilePic || '/pfp-default-header.png'}
+        alt="User Profile"
+        onError={e => {
+          e.target.onerror = null;
+          e.target.src = '/pfp-default-header.png';
+        }}
+      />
+      <div className={styles.lbMessagingContactInfo}>
+        <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
+          {user.firstName} {user.lastName}
+        </div>
+      </div>
+    </button>
+  );
+
   const renderContacts = () => {
     if (sidebarContacts.length === 0) {
       return (
@@ -320,40 +348,21 @@ export default function LBMessaging() {
       );
     }
 
-    return sidebarContacts.map(user => (
-      <button
-        key={user.userId || user._id}
-        type="button"
-        className={`${styles.lbMessagingContact}`}
-        onClick={() => {
-          updateSelection(user);
-          setMobileHamMenu(false);
-        }}
-      >
-        <img
-          src={user.profilePic || '/pfp-default-header.png'}
-          alt="User Profile"
-          onError={e => {
-            e.target.onerror = null;
-            e.target.src = '/pfp-default-header.png';
-          }}
-        />
-        <div className={`${styles.lbMessagingContactInfo}`}>
-          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
-            {user.firstName} {user.lastName}
-          </div>
-        </div>
-      </button>
-    ));
+    return sidebarContacts.map(user =>
+      renderContactButton(user.userId || user._id, user, () => {
+        updateSelection(user);
+        setMobileHamMenu(false);
+      }),
+    );
   };
 
   const renderChatMessages = () => {
     if (messagesLoading) {
-      return <p className={`${styles.lbNoMsgText}`}>Loading messages...</p>;
+      return <p className={styles.lbNoMsgText}>Loading messages...</p>;
     }
 
     if (messages.length === 0) {
-      return <p className={`${styles.lbNoMsgText}`}>No messages to display.</p>;
+      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
     }
 
     const filteredMessages = messages.filter(
@@ -363,12 +372,12 @@ export default function LBMessaging() {
     );
 
     if (filteredMessages.length === 0) {
-      return <p className={`${styles.lbNoMsgText}`}>No messages to display.</p>;
+      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
     }
 
     return (
-      <div className={`${styles.messageList}`}>
-        <div className={`${styles.messageSpacer}`} />
+      <div className={styles.messageList}>
+        <div className={styles.messageSpacer} />
         {filteredMessages.map(message => (
           <div
             key={message._id || message.timestamp}
@@ -376,7 +385,7 @@ export default function LBMessaging() {
               message.sender === currentUserId ? styles.sent : styles.received
             }`}
           >
-            <p className={`${styles.messageText}`}>
+            <p className={styles.messageText}>
               {String(message.content ?? '')
                 .split('\n')
                 .map((line, lineIdx) => (
@@ -396,61 +405,63 @@ export default function LBMessaging() {
   return (
     (users?.userProfilesBasicInfo?.length ?? 0) !== 0 && (
       <div className={`${darkMode ? styles.darkMode : ''}`}>
-        <div className={`${styles.mainContainer}`}>
-          <div className={`${styles.logoContainer}`}>
+        <Header />
+        <div className={styles.mainContainer}>
+          <div className={styles.logoContainer}>
             <img src={logo} alt="One Community Logo" />
           </div>
-          <div className={`${styles.contentContainer}`}>
+          <div className={styles.contentContainer}>
             {mobileView ? (
               <div className={`${styles.containerTop} ${styles.msg}`}>
-                <div className={`${styles.lbMobileMessagingMenu}`}>
-                  <div className={`${styles.lbMobileHeader}`}>
+                <div className={styles.lbMobileMessagingMenu}>
+                  <div className={styles.lbMobileHeader}>
                     <button
                       type="button"
-                      className={`${styles.lbHamBtn}`}
+                      className={styles.lbHamBtn}
                       onClick={() => setMobileHamMenu(prev => !prev)}
                     >
                       ☰
                     </button>
                     {mobileHamMenu && (
-                      <div className={`${styles.lbMobileHamMenu}`} ref={menuRef}>
-                        <div className={`${styles.lbMobileHamMenuHeader}`}>
+                      <div className={styles.lbMobileHamMenu} ref={menuRef}>
+                        <div className={styles.lbMobileHamMenuHeader}>
+                          <div className={styles.lbMobilePanelTopBar}>
+                            <button
+                              type="button"
+                              className={styles.lbMobileCloseBtn}
+                              onClick={() => setMobileHamMenu(false)}
+                            >
+                              ✕
+                            </button>
+                          </div>
                           {showContacts ? (
-                            <div className={`${styles.lbMessagingContactsHeaderMobile}`}>
+                            <div className={styles.lbMessagingContactsHeaderMobile}>
                               <input
                                 type="text"
                                 placeholder={placeholder}
-                                className={`${styles.lbSearchInput}`}
+                                className={styles.lbSearchInput}
                                 value={searchQuery}
-                                onChange={e => {
-                                  const query = e.target.value;
-                                  setSearchQuery(query);
-                                  if (query.trim() === '') {
-                                    setSearchResults([]);
-                                  } else {
-                                    searchUserProfiles(query);
-                                  }
-                                }}
+                                onChange={handleSearchChange}
                               />
                               <button
                                 type="button"
                                 onClick={() => setShowContacts(prev => !prev)}
-                                className={`${styles.lbMsgIconBtn}`} // you can reuse or define styles here
+                                className={styles.lbMsgIconBtn}
                               >
                                 <img
                                   src="https://img.icons8.com/metro/26/multiply.png"
                                   alt="Close"
-                                  className={`${styles.lbMsgIcon}`}
+                                  className={styles.lbMsgIcon}
                                 />
                               </button>
                             </div>
                           ) : (
-                            <div className={`${styles.lbMessagingContactsHeaderMobile}`}>
-                              <h3 className={`${styles.lbContactMsgs}`}>Messages</h3>
-                              <div className={`${styles.lbMessagingSearchIconsMobile}`}>
+                            <div className={styles.lbMessagingContactsHeaderMobile}>
+                              <h3 className={styles.lbContactMsgs}>Messages</h3>
+                              <div className={styles.lbMessagingSearchIconsMobile}>
                                 <FontAwesomeIcon
                                   icon={faSearch}
-                                  className={`${styles.lbMsgIconMobile}`}
+                                  className={styles.lbMsgIconMobile}
                                   onClick={() => setShowContacts(prev => !prev)}
                                 />
                               </div>
@@ -460,35 +471,12 @@ export default function LBMessaging() {
                             className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                           >
                             {showContacts
-                              ? safeSearchResults.map(user => (
-                                  <button
-                                    key={user.userId}
-                                    type="button"
-                                    className={`${styles.lbMessagingContact}`}
-                                    onClick={() => {
-                                      updateSelection(user);
-                                      setMobileHamMenu(false);
-                                    }}
-                                  >
-                                    <img
-                                      src={user.profilePic || '/pfp-default-header.png'}
-                                      alt="User Profile"
-                                      onError={e => {
-                                        e.target.onerror = null;
-                                        e.target.src = '/pfp-default-header.png';
-                                      }}
-                                    />
-                                    <div className={`${styles.lbMessagingContactInfo}`}>
-                                      <div
-                                        className={`${styles.lbMessagingContactName} ${
-                                          mobileView ? styles.black : ''
-                                        }`}
-                                      >
-                                        {user.firstName} {user.lastName}
-                                      </div>
-                                    </div>
-                                  </button>
-                                ))
+                              ? safeSearchResults.map(user =>
+                                  renderContactButton(user.userId, user, () => {
+                                    updateSelection(user);
+                                    setMobileHamMenu(false);
+                                  }),
+                                )
                               : renderContacts()}
                           </div>
                         </div>
@@ -498,46 +486,38 @@ export default function LBMessaging() {
                 </div>
               </div>
             ) : null}
-            <div className={`${styles.containerMainMsg}`}>
+            <div className={styles.containerMainMsg}>
               {/* Contacts Section */}
               {!mobileView && (
-                <div className={`${styles.lbMessagingContacts}`}>
+                <div className={styles.lbMessagingContacts}>
                   {showContacts ? (
-                    <div className={`${styles.lbMessagingContactsHeader}`}>
+                    <div className={styles.lbMessagingContactsHeader}>
                       <input
                         type="text"
                         placeholder={placeholder}
-                        className={`${styles.lbSearchInput}`}
+                        className={styles.lbSearchInput}
                         value={searchQuery}
-                        onChange={e => {
-                          const query = e.target.value;
-                          setSearchQuery(query);
-                          if (query.trim() === '') {
-                            setSearchResults([]);
-                          } else {
-                            searchUserProfiles(query);
-                          }
-                        }}
+                        onChange={handleSearchChange}
                       />
                       <button
                         type="button"
                         onClick={() => setShowContacts(prev => !prev)}
-                        className={`${styles.lbMsgIconBtn}`} // you can reuse or define styles here
+                        className={styles.lbMsgIconBtn}
                       >
                         <img
                           src="https://img.icons8.com/metro/26/multiply.png"
                           alt="Close"
-                          className={`${styles.lbMsgIcon}`}
+                          className={styles.lbMsgIcon}
                         />
                       </button>
                     </div>
                   ) : (
-                    <div className={`${styles.lbMessagingContactsHeader}`}>
-                      <h3 className={`${styles.lbContactMsgs}`}>Messages</h3>
-                      <div className={`${styles.lbMessagingSearchIcons}`}>
+                    <div className={styles.lbMessagingContactsHeader}>
+                      <h3 className={styles.lbContactMsgs}>Messages</h3>
+                      <div className={styles.lbMessagingSearchIcons}>
                         <FontAwesomeIcon
                           icon={faSearch}
-                          className={`${styles.lbMsgIcon}`}
+                          className={styles.lbMsgIcon}
                           onClick={() => setShowContacts(prev => !prev)}
                         />
                       </div>
@@ -547,37 +527,18 @@ export default function LBMessaging() {
                     className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                   >
                     {showContacts
-                      ? safeSearchResults.map(user => (
-                          <button
-                            key={user._id}
-                            type="button"
-                            className={`${styles.lbMessagingContact}`}
-                            onClick={() => updateSelection(user)}
-                          >
-                            <img
-                              src={user.profilePic || '/pfp-default-header.png'}
-                              alt="User Profile"
-                              onError={e => {
-                                e.target.onerror = null;
-                                e.target.src = '/pfp-default-header.png';
-                              }}
-                            />
-                            <div className={`${styles.lbMessagingContactInfo}`}>
-                              <div className={`${styles.lbMessagingContactName}`}>
-                                {user.firstName} {user.lastName}
-                              </div>
-                            </div>
-                          </button>
-                        ))
+                      ? safeSearchResults.map(user =>
+                          renderContactButton(user._id, user, () => updateSelection(user)),
+                        )
                       : renderContacts()}
                   </div>
                 </div>
               )}
 
               {/* Chat Window Section */}
-              <div className={`${styles.lbMessagingMessageWindow}`}>
-                <div className={`${styles.lbMessagingMessageWindowHeader}`}>
-                  <div className={`${styles.lbMessagingHeaderIdentity}`}>
+              <div className={styles.lbMessagingMessageWindow}>
+                <div className={styles.lbMessagingMessageWindowHeader}>
+                  <div className={styles.lbMessagingHeaderIdentity}>
                     <img
                       src={selectedUser.profilePic || '/pfp-default-header.png'}
                       onError={e => {
@@ -586,20 +547,20 @@ export default function LBMessaging() {
                       }}
                       alt="Profile"
                     />
-                    <span className={`${styles.lbMessagingHeaderTitle}`}>
+                    <span className={styles.lbMessagingHeaderTitle}>
                       {selectedUser.firstName
                         ? `${selectedUser.firstName} ${selectedUser.lastName}`
                         : 'Select a user to chat'}
                     </span>
                   </div>
                   {selectedUser.userId && (
-                    <div className={`${styles.lbMessagingHeaderIcons}`}>
+                    <div className={styles.lbMessagingHeaderIcons}>
                       <FontAwesomeIcon
                         icon={faBell}
                         onClick={() => {
                           setBellDropdownActive(prev => !prev);
                         }}
-                        className={`${styles.lgMessagingNotificationBell}`}
+                        className={styles.lgMessagingNotificationBell}
                       />
                       {bellDropdownActive && (
                         <div
@@ -637,7 +598,7 @@ export default function LBMessaging() {
                           </label>
                           <button
                             type="button"
-                            className={`${styles.lgMessagingSaveBtn}`}
+                            className={styles.lgMessagingSaveBtn}
                             onClick={saveUserPreferences}
                           >
                             Save
@@ -647,14 +608,14 @@ export default function LBMessaging() {
                     </div>
                   )}
                 </div>
-                <div className={`${styles.lbMessagingMessageWindowBody}`}>
+                <div className={styles.lbMessagingMessageWindowBody}>
                   {selectedUser.userId ? (
                     renderChatMessages()
                   ) : (
-                    <p className={`${styles.startMsg}`}>Select a user to start chatting</p>
+                    <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..."
@@ -666,12 +627,12 @@ export default function LBMessaging() {
                         handleSendMessage();
                       }
                     }}
-                    className={`${styles.lbMessagingTextarea}`}
+                    className={styles.lbMessagingTextarea}
                     disabled={!selectedUser.userId}
                   />
                   <FontAwesomeIcon
                     icon={faLocationArrow}
-                    className={`${styles.sendButton}`}
+                    className={styles.sendButton}
                     onClick={handleSendMessage}
                   />
                 </div>
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index a5dbcea067..8fc9e924cd 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -56,16 +56,17 @@
   height: 100%;
   flex-direction: column;
   width: 30%;
+  border-right: 1px solid #ccc;
 }
 
-
 .containerTop {
-  display: flex;
+  display: none;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 60px;
+  height: 0;
   background-color: #9dd425;
+  overflow: hidden;
 }
 
 .msg {
@@ -134,14 +135,15 @@
 
 .lbMobileHamMenuHeader {
   display: flex;
-  position: absolute;
+  position: fixed;
   top: 0;
-  right: 0;
+  left: 0;
   flex-direction: column;
-  margin-top: 60px;
-  width: 220px;
+  width: 100vw;
+  height: 100vh;
   background-color: #e9e3e3;
-  z-index: 10;
+  z-index: 1000;
+  overflow-y: auto;
 }
 
 .black {
@@ -149,8 +151,7 @@
 }
 
 .lbMessagingContactsBody {
-  height: 87.5%;
-  max-height: 480px;
+  flex: 1;
   overflow-y: auto;
   display: none;
 }
@@ -199,23 +200,23 @@
   flex-direction: column;
 }
 
-.lbMessagingMessageWindowFooter {
+.lbMessaingMessageWindowFooter {
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   background-color: #e0e0e0;
   color: black;
-  height: 12%;
   padding: 10px 16px;
-  max-height: 50px;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
+  box-sizing: border-box;
 }
 
 .lbMessagingTextarea {
   height: 38px;
-  flex: 1;
-  width: auto;
+  flex: 1 1 0;
+  width: 0;
   padding: 0 14px;
   border: 1px solid #b8b8b8;
   border-radius: 18px;
@@ -262,7 +263,6 @@
   margin-right: 10px;
 }
 
-
 .received {
   justify-content: flex-start !important;
   margin-left: 10px;
@@ -352,7 +352,7 @@
   box-sizing: border-box;
 }
 
-.activeInlgMessagingBellSelectDropdown{
+.activeInlgMessagingBellSelectDropdown {
   display: flex;
 }
 
@@ -512,6 +512,7 @@
   background-color: #4db7ab;
   color: #fff;
   transition: background-color 0.2s ease, transform 0.2s ease;
+  flex-shrink: 0;
 }
 
 .sendButton:hover {
@@ -590,11 +591,72 @@
   object-fit: cover;
 }
 
+.lbMobilePanelTopBar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  background-color: #d0caca;
+}
+
+.lbMobileCloseBtn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+  padding: 4px 8px;
+}
+
 .lbMessagingContactName {
   font-size: 15px;
   font-weight: 500;
 }
 
+/* Mobile: show containerTop */
+@media (max-width: 720px) {
+  .containerTop {
+    display: flex;
+    height: 60px;
+  }
+
+  .lbMessaingMessageWindowFooter {
+    padding: 8px 10px;
+    position: sticky;
+    bottom: 0;
+  }
+
+  .lbMessagingTextarea {
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .containerMainMsg {
+    margin: 0;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .lbMessagingMessageWindow {
+    width: 100%;
+  }
+}
+
+:global(.dark-mode) .lbMobileHamMenuHeader {
+  background-color: #1a1a1a;
+}
+
+:global(.dark-mode) .lbMobilePanelTopBar {
+  background-color: #2a2a2a;
+}
+
+:global(.dark-mode) .lbMobileCloseBtn {
+  color: #f1f1f1;
+}
+
+:global(.dark-mode) .lbMessagingContacts {
+  border-right-color: #2a2a2a;
+}
+
 :global(.dark-mode) .mainContainer,
 :global(.dark-mode) .containerMainMsg {
   background-color: #141414;
@@ -656,7 +718,7 @@
   background-color: #1f1f1f;
 }
 
-:global(.dark-mode) .lbMessagingMessageWindowFooter {
+:global(.dark-mode) .lbMessaingMessageWindowFooter {
   background-color: #2a2a2a;
   color: #f1f1f1;
 }
@@ -723,4 +785,4 @@
 :global(.dark-mode) .lbNoMsgText,
 :global(.dark-mode) .startMsg {
   color: #d0d0d0;
-}
+}
\ No newline at end of file