diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx
index 8bc4abd..9feb091 100644
--- a/src/components/MyActiveJobs/ActiveJobMessage.jsx
+++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx
@@ -32,7 +32,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
             {currentActiveJobMesList.map((item, index) => (
             <tr key={index} className='text-slate-500'>
                 <td>
-                    <div className="msg_box">
+                    <div className={`msg_box ${item.who}`}>
                         <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
                         <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
                     </div>
diff --git a/src/index.css b/src/index.css
index 15e7d7c..0bc0a72 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,14 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
+.SENDER{
+  margin-left: 60px !important;
+  background-color: azure;
+}
+.RECIPIENT{
+  margin-right: 60px !important;
+  background-color: lightblue;
+}
 .wallet-box{
   background-color: aliceblue;
   border-radius: 20px;
@@ -47,9 +55,11 @@
   border-radius: 15px;
 }
 .msg_header{
-  background-color: #1a3544;
-  color: white;
+  background-color: white;
+  color: black;
   font-weight: bold;
+  border-radius: 9px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 .siderCardDescription{
   background-color: aliceblue;