diff --git a/app/views/partials/messageInbox.scala.html b/app/views/partials/messageInbox.scala.html
index 28df557..4b01608 100644
--- a/app/views/partials/messageInbox.scala.html
+++ b/app/views/partials/messageInbox.scala.html
@@ -25,7 +25,7 @@
 
 
 @@media screen and (max-width: 414px) {
- 
+
   .mob-align-right {
     text-align: right
   }
@@ -41,7 +41,13 @@
 
 }
 
+.govuk-table__cell {
+    padding: 10px 20px 10px 0;
+}
 
+.govuk-table__cell:last-child, .govuk-table__header:last-child {
+    padding-right: 0;
+}
 
 .conversation-status-marker {
   display:inline-block;
@@ -53,7 +59,6 @@
   color:#0b0c0c;
 }
 
-
 .dot-unread {
   height: 10px;
   width: 10px;
@@ -64,7 +69,6 @@
   text-indent: -99999px;
 }
 
-
 .underline {
   text-decoration: underline !important;
 }
@@ -86,27 +90,19 @@
 }
 
 
-.break-long {
-  word-break: break-word;
-}
-
-
-.grid-header-row { 
+.grid-header-row {
   border-bottom:1px solid rgba(177, 180, 182,0.75);
-  padding:10px; 
+  padding:10px;
 }
 
+        .black-text {
+            color: #0b0c0c;
+        }
 
-
-.message {margin-bottom: 10px; }
-
-.message-row:hover { background-color:#f3f2f1; }
-.message-row a:focus {  background-color: #f3f2f1;}
-.message-row:focus-within {  background-color:#f3f2f1;}
-
-.message-row a:focus {
-    outline: 0 !important;
-}
+       .black-text:hover {
+          color: #003078;
+          border-bottom-color: #003078;
+        }
 
 
 a.underline-fix { text-decoration: none; }
@@ -115,6 +111,22 @@
 .status-align {
   text-align: right;
 }
+
+
+     .hover-effect {
+      color: #0b0c0c;
+
+    }
+
+    .hover-effect:hover {
+      color: #003078;
+    }
+
+    .default-color{
+    color:  #0b0c0c;
+    }
+
+
 </style>
 
 <h1 class="govuk-heading-xl">@heading</h1>
@@ -137,7 +149,7 @@ <h1 class="govuk-heading-xl">@heading</h1>
 
   @for((conversationHeader,index) <- conversationHeaders.zipWithIndex) {
     <tr class="govuk-table__row message-row" >
-   
+
 <!-- status -->    
   <td class="govuk-table__cell status-align">
       @{
@@ -150,54 +162,44 @@ <h1 class="govuk-heading-xl">@heading</h1>
     }
 </td>
 
-
-
-<td class="govuk-table__cell ">
-      <a href=@{getMessageUrl(clientService,conversationHeader)} tabindex="-1" target="_self" data-sso="false" class="underline-fix no--underline" >
-      
-      <div>@{
+<td class="govuk-table__cell" >
+    <a href=@{getMessageUrl(clientService,conversationHeader)} class="govuk-!-font-weight-bold hover-effect" style="font-weight:400; text-decoration: none;" data-sso="false" >
+        @{
         val senderSpan = if(conversationHeader.unreadMessages){
-          <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.from")}:</span><span class="govuk-!-font-weight-bold black-text break-long ">{getSenderName(conversationHeader)}<span class="govuk-visually-hidden">.&nbsp;</span></span>
+        <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.from")}:</span><span>{getSenderName(conversationHeader)}<span class="govuk-visually-hidden">.&nbsp;</span></span>
         } else {
-          <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.from")}:</span><span class='black-text break-long '>{getSenderName(conversationHeader)}<span class="govuk-visually-hidden">.&nbsp;</span></span>
+        <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.from")}:</span><span style="font-weight:400; text-decoration: none;">{getSenderName(conversationHeader)} yet<span class="govuk-visually-hidden">.&nbsp;</span></span>
         }
         senderSpan
-      }</div>
-
-     
-
-      <div>
-        <span>@{
-          val subjectMaybeRead = if(conversationHeader.unreadMessages){
-            <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.subject")}:</span> 
-            <span class="govuk-!-font-weight-bold underline black-text break-long ">{conversationHeader.subject}</span> <span class="govuk-visually-hidden">,&nbsp;</span>
-          } else {
-            <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.subject")}:</span> 
-            <span class="underline black-text break-long ">{conversationHeader.subject}</span><span class="govuk-visually-hidden">,&nbsp;</span>
-          }
-          val subjectMaybeWithCount = if(conversationHeader.count > 1){
-            subjectMaybeRead ++ <span aria-hidden="true" class="message-counter non-breaking">({conversationHeader.count})</span><span class="govuk-visually-hidden">{conversationHeader.count}  
+        }
+    </a>
+<br>
+    <div class="govuk-task-list__name-and-hint black-text">
+        <a class="govuk-link"  href=@{getMessageUrl(clientService,conversationHeader)} aria-describedby="company-details-1-status" data-sso="false">
+            @{
+            val subjectMaybeRead = if(conversationHeader.unreadMessages){
+            <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.subject")}:</span>
+            <span class="govuk-!-font-weight-bold black-text">{conversationHeader.subject}</span> <span class="govuk-visually-hidden">,&nbsp;</span>
+            } else {
+            <span class="govuk-visually-hidden">{messages("conversation.inbox.heading.subject")}:</span>
+            <span class="black-text no--underline">{conversationHeader.subject}</span><span class="govuk-visually-hidden">,&nbsp;</span>
+            }
+            val subjectMaybeWithCount = if(conversationHeader.count > 1){
+            subjectMaybeRead ++ <span aria-hidden="true" class="message-counter non-breaking">({conversationHeader.count})</span><span class="govuk-visually-hidden">{conversationHeader.count}
               {messages("conversation.inbox.subject.count")}.</span>
-          } else {
+            } else {
             subjectMaybeRead
-          }
-          subjectMaybeWithCount
-        }</span>
-      </div>
-
-    </a>
-  
+            }
+            subjectMaybeWithCount
+            }
+        </a>
+    </div>
    </td>
 
+ <td class="govuk-table__cell mob-align-right">
 
+    <span class='@{if(conversationHeader.unreadMessages){"govuk-!-font-weight-bold"}}'>@{getMessageDate(conversationHeader)}</span>
 
-
-
-
- <td class="govuk-table__cell mob-align-right">
-  <a aria-hidden="true" href=@{getMessageUrl(clientService,conversationHeader)} tabindex="-1" target="_self" data-sso="false" class="underline-fix no--underline" >
-    <span class='@{if(conversationHeader.unreadMessages){"govuk-!-font-weight-bold"}} black-text'>@{getMessageDate(conversationHeader)}</span>
-  </a>
   <span class="govuk-visually-hidden">@{getMessageDate(conversationHeader)}</span>
  </td>
 
diff --git a/project/AppDependencies.scala b/project/AppDependencies.scala
index aa9a555..44c5081 100644
--- a/project/AppDependencies.scala
+++ b/project/AppDependencies.scala
@@ -19,7 +19,7 @@ import sbt._
 
 object AppDependencies {
 
-  private val bootstrapVersion = "9.0.0"
+  private val bootstrapVersion = "9.2.0"
 
   val compile = Seq(
     "uk.gov.hmrc"    %% "bootstrap-frontend-play-30" % bootstrapVersion,