diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx
index a598790..a94ad0d 100644
--- a/src/views/ChatHistory.jsx
+++ b/src/views/ChatHistory.jsx
@@ -58,11 +58,11 @@ const Index = (props) => {
     <>
       <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
       <Divider plain orientation='left' className='mb-0'></Divider>
-      <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 300px)', height: 'calc(100% - 300px)' }}>
-        <Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)' }}>
+      <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 262px)', height: 'calc(100% - 262px)' }}>
+        <Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 262px)', height: 'calc(100vh - 262px)' }}>
           <ConversationsList {...{ conversationsListLoading, conversationsList, selectedConversation, handleChatItemClick: setSelectedConversation, onLoadMore: getConversationsList, loadMoreVisible: pageParam.loadNextPage }} />
         </Sider>
-        <Content style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)', minWidth: '360px' }}>
+        <Content style={{ maxHeight: 'calc(100vh - 262px)', height: 'calc(100vh - 262px)', minWidth: '360px' }}>
           <Flex className='h-full relative'>
             <MessagesMatchList />
             <MessagesList onOpenEmail={onOpenEmail} />
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index 1eecf19..c1486df 100644
--- a/src/views/Conversations/Conversations.css
+++ b/src/views/Conversations/Conversations.css
@@ -194,10 +194,10 @@
     height: 100%;
 }
 .chatwindow-wrapper .whatsappme-container .rce-mbox{
-    background-color: #ccd5ae;
+    /* background-color: #ccd5ae; */
 }
 .chatwindow-wrapper .whatsappme-container .rce-mbox-right-notch{
-    fill: #ccd5ae;
+    /* fill: #ccd5ae; */
 }
 .chatwindow-wrapper .rce-mbox .rce-mbox-reply {
     background-color: rgba(236, 236, 236, 0.7);
diff --git a/src/views/Conversations/History/MessagesList.jsx b/src/views/Conversations/History/MessagesList.jsx
index 9df424e..4083a6e 100644
--- a/src/views/Conversations/History/MessagesList.jsx
+++ b/src/views/Conversations/History/MessagesList.jsx
@@ -263,9 +263,10 @@ const MessagesList = ({ ...listProps }) => {
                   message.sender === 'me' ? 'whatsappme-container' : '',
                   focusMsg === message.id ? 'message-box-focus' : '',
                   message.status === 'failed' ? 'failed-msg' : '',
+                  message.sender === 'me' ? (message.msg_source.toLowerCase() === 'waba' ? `[&_.rce-mbox]:bg-waba-me` : `[&_.rce-mbox]:bg-whatsapp-me`) : '',
                 ].join(' ')}
                 style={{
-                  backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
+                  // backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
                 }}
                 {...(message.type === 'meetingLink'
                   ? {
@@ -281,7 +282,7 @@ const MessagesList = ({ ...listProps }) => {
                     }
                   : {})}
                 renderAddCmp={
-                  <div key={'msg-prefix'} className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
+                  <div key={'msg-prefix'} className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji ' style={{backgroundColor: 'unset'}}>
                     <span
                       className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `}
                       style={{ backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset' }}>