diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index 26314d7..ccde8dc 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -11,7 +11,9 @@
     <div class="jumping-circle" id="jc2"></div>
     <div class="jumping-circle" id="jc3"></div>
   </div>
-  <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
+  <div class="tfw-grid-message"
+       *ngFor="let message of messages.slice().reverse(); let first = first"
+       [class.highlighted-message]="first">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index 59daafd..3f4e6c8 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -34,6 +34,12 @@
   animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
 }
 
+.highlighted-message {
+  border-style: solid;
+  border-width: 1px;
+  border-color: $tao-blue-100;
+}
+
 @keyframes inflate {
   0%   { transform: scale(0,0); }
   100% { transform: scale(1,1); }