diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index a7364192..c7958c17 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -8,13 +8,13 @@
 }
 
 .messageItem {
-  margin-bottom: 35px;
+  margin-bottom: 38px;
 
   /* Clearfix */
   @apply --clearfix;
 
   @media (--viewportMedium) {
-    margin-bottom: 40px;
+    margin-bottom: 41px;
   }
 
   &:last-of-type {
@@ -41,7 +41,11 @@
 
 .avatar {
   flex-shrink: 0;
-  margin: 9px 12px 0 0;
+  margin: 6px 12px 0 0;
+
+  @media (--viewportMedium) {
+    margin: 9px 12px 0 0;
+  }
 }
 
 .messageContent,
@@ -49,11 +53,12 @@
   @apply --marketplaceMessageFontStyles;
 
   margin: 0;
-  padding: 15px 14px 11px 14px;
+  padding: 12px 14px 11px 14px;
   border-radius: 8px;
   box-shadow: var(--boxShadow);
 
   @media (--viewportMedium) {
+    padding: 14px 14px 11px 14px;
     margin: 0;
   }
 }
@@ -83,7 +88,7 @@
 }
 
 .transitionItem {
-  margin-bottom: 34px;
+  margin-bottom: 36px;
 
   /* Clearfix */
   @apply --clearfix;
@@ -100,32 +105,26 @@
 .transition {
   display: flex;
   flex-direction: row;
-  margin: -1px 0 1px 0;
+  padding: 3px 0 2px 0;
 
   @media (--viewportMedium) {
-    margin: 0;
+    padding: 0;
   }
 }
 
 .transitionContent {
+  @apply --marketplaceTxTransitionFontStyles;
   margin: 0;
-
-  /* Font */
-  font-family: 'sofiapro', Helvetica, Arial, sans-serif;
-  font-weight: var(--fontWeightRegular);
-  font-size: 16px;
-  line-height: 20px;
-
-  @media (--viewportMedium) {
-    font-size: 20px;
-    line-height: 32px;
-    margin: 1px 0 -1px 0;
-  }
 }
+
 .transitionDate {
   @apply --marketplaceMessageDateFontStyles;
-  margin: 0;
   color: var(--matterColorAnti);
+  margin: 7px 0 0 0;
+
+  @media (--viewportMedium) {
+    margin: -1px 0 1px 0;
+  }
 }
 
 .bullet {
diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js
index f23b47f5..f16ad482 100644
--- a/src/components/Messages/Messages.example.js
+++ b/src/components/Messages/Messages.example.js
@@ -47,6 +47,32 @@ export const WithCurrentUser = {
 };
 
 export const WithTransitions = {
+  component: Messages,
+  props: {
+    messages: [],
+    transaction: createTransaction({
+      customer: createUser('user1'),
+      provider: createUser('user2'),
+      listing: createListing('Listing'),
+      transitions: [
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 8, 10)),
+          by: propTypes.TX_TRANSITION_ACTOR_CUSTOMER,
+          transition: propTypes.TX_TRANSITION_PREAUTHORIZE,
+        }),
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 8, 12)),
+          by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
+          transition: propTypes.TX_TRANSITION_ACCEPT,
+        }),
+      ],
+    }),
+    currentUser: createCurrentUser('user2'),
+  },
+  group: 'messages',
+};
+
+export const WithMessagesAndTransitions = {
   component: Messages,
   props: {
     messages: [
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index 5ef40a57..64b3c4f3 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -231,6 +231,18 @@
     }
   }
 
+  --marketplaceTxTransitionFontStyles {
+    font-family: 'sofiapro', Helvetica, Arial, sans-serif;
+    font-weight: var(--fontWeightMedium);
+    font-size: 16px;
+    line-height: 18px;
+
+    @media (--viewportMedium) {
+      font-size: 20px;
+      line-height: 32px;
+    }
+  }
+
   /* ================ Tabbed navigation font styles ================ */
 
   --marketplaceTabNavFontStyles {