diff --git a/app/assets/images/email/info.png b/app/assets/images/email/info.png
index 67da418b193..6acbec7fd01 100644
Binary files a/app/assets/images/email/info.png and b/app/assets/images/email/info.png differ
diff --git a/app/assets/images/email/warning.png b/app/assets/images/email/warning.png
index b746e680e84..0f948e08c0d 100644
Binary files a/app/assets/images/email/warning.png and b/app/assets/images/email/warning.png differ
diff --git a/app/assets/stylesheets/email.css.scss b/app/assets/stylesheets/email.css.scss
index acbd6d0c650..9c8f9cad514 100644
--- a/app/assets/stylesheets/email.css.scss
+++ b/app/assets/stylesheets/email.css.scss
@@ -117,27 +117,25 @@ h6 {
   }
 }
 
-.info-alert,
-.warning-alert {
-  padding: 0 units(0.5);
+.usa-alert {
+  border-left: units($theme-alert-bar-width) solid;
 
   td {
-    padding: units(1.5);
-    padding-right: units(1);
+    padding: units(1.5) 0;
 
-    & + td {
-      padding-left: 0;
-      padding-right: units(1.5);
+    &:first-child {
+      padding-left: $alert-icon-optical-padding;
+      padding-right: units(1);
     }
   }
-}
 
-.info-alert {
-  background-color: color('info-lighter');
-}
+  &.usa-alert--info {
+    @include alert-status-wrapper-styles('info');
+  }
 
-.warning-alert {
-  background-color: color('warning-lighter');
+  &.usa-alert--warning {
+    @include alert-status-wrapper-styles('warning');
+  }
 }
 
 .process-list td {
diff --git a/app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb b/app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb
index 31d9484affe..b64af462add 100644
--- a/app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb
+++ b/app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb
@@ -1,8 +1,8 @@
 <% if @presenter.outage_message_enabled? %>
-<table class="warning-alert margin-y-4">
+<table class="usa-alert usa-alert--warning margin-y-4">
   <tr>
     <td style="width:16px;">
-      <%= image_tag('email/warning.png', width: 16, height: 16, alt: '') %>
+      <%= image_tag('email/warning.png', width: 16, height: 14, alt: '', style: 'margin-top: 5px;') %>
     </td>
     <td>
       <%= render 'shared/outage_alert', date: @presenter.formatted_outage_expected_update_date, email_date: @presenter.formatted_outage_emailed_by_date %>
@@ -35,10 +35,10 @@
 </div>
 
 <%# Alert %>
-<table class="info-alert margin-y-4 radius-lg">
+<table class="usa-alert usa-alert--info margin-y-4">
   <tr>
     <td style="width:16px;">
-      <%= image_tag('email/info.png', width: 16, height: 16, alt: '') %>
+      <%= image_tag('email/info.png', width: 16, height: 16, alt: '', style: 'margin-top: 4px;') %>
     </td>
     <td>
       <p class="margin-bottom-1"><strong><%= t('in_person_proofing.body.barcode.deadline', deadline: @presenter.formatted_due_date) %></strong></p>
@@ -103,7 +103,7 @@
               <p class="margin-bottom-0"><%= t('in_person_proofing.process.real_id_and_supporting_docs.info') %></p>
               <ul class="usa-list margin-top-0">
                 <% t('in_person_proofing.process.eipp_state_id_supporting_docs.info_list').each do |doc| %>
-                  <li><%= doc %></li> 
+                  <li><%= doc %></li>
                 <% end %>
               </ul>
             </td>
@@ -185,7 +185,7 @@
             <p class="margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_supporting_docs.info') %></p>
             <ul class="usa-list margin-top-0">
               <% t('in_person_proofing.process.eipp_state_id_supporting_docs.info_list').each do |doc| %>
-                <li><%= doc %></li> 
+                <li><%= doc %></li>
               <% end %>
             </ul>
           </td>
@@ -236,7 +236,7 @@
       </td>
     </tr>
   </table>
-  
+
   <% if !@is_enhanced_ipp %>
     <p class="margin-bottom-0 padding-bottom-4">
       <%= t('in_person_proofing.body.barcode.questions') %>