diff --git a/apps/block_scout_web/assets/css/_typography.scss b/apps/block_scout_web/assets/css/_typography.scss
index f29c6bc34e..9086a8b7df 100644
--- a/apps/block_scout_web/assets/css/_typography.scss
+++ b/apps/block_scout_web/assets/css/_typography.scss
@@ -94,3 +94,11 @@ label, textarea.form-control {
       color: $teal;
     }
 }
+
+[data-transaction-status="Success"] {
+  color: $success;
+}
+
+[data-transaction-status^="Error"] {
+  color: $danger;
+}
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
index d8a7628e91..2a7bc573a5 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
@@ -32,7 +32,7 @@
           </span>
           <div class="d-flex flex-row justify-content-start text-muted">
             <span class="mr-4 text-<%= BlockScoutWeb.TransactionView.type_suffix(@transaction) %>"><%= BlockScoutWeb.TransactionView.transaction_display_type(@transaction) %></span>
-            <span class="mr-4"><%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %></span>
+            <span class="mr-4" data-transaction-status="<%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %>"><%= BlockScoutWeb.TransactionView.formatted_status(@transaction) %></span>
             <span class="mr-4">
               <%= if block do %>
                 <span data-from-now="<%= @transaction.block.timestamp %>"></span>