diff --git a/app/views/mfa/backup_codes.html.erb b/app/views/mfa/backup_codes.html.erb
index e46840303..6292d9be2 100644
--- a/app/views/mfa/backup_codes.html.erb
+++ b/app/views/mfa/backup_codes.html.erb
@@ -13,7 +13,7 @@
     <div class="space-y-6">
       <div class="grid grid-cols-2 gap-4">
         <% @backup_codes.each do |code| %>
-          <div class="p-3 bg-gray-100 rounded-lg font-mono text-lg">
+          <div class="p-3 bg-surface-inset rounded-lg font-mono text-lg">
             <%= code %>
           </div>
         <% end %>