diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index 57fc04e12..847c04204 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -133,9 +133,9 @@
             </th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-100">
+        <tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
           <% @recent_runs.each do |run| %>
-            <tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if run.failed? %>">
+            <tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if run.failed? %>">
               <td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
                 <%= run.executed_at.strftime("%b %d, %Y %I:%M %p") %>
               </td>
@@ -155,7 +155,7 @@
                   <% end %>
                   <% if run.failed? && run.error_message.present? %>
                     <div data-controller="tooltip" data-tooltip-content-value="<%= run.error_message %>">
-                      <%= icon("info", size: "sm", class: "text-red-500") %>
+                      <%= icon("info", size: "sm", color: "destructive") %>
                     </div>
                   <% end %>
                 </div>
diff --git a/app/views/settings/llm_usages/show.html.erb b/app/views/settings/llm_usages/show.html.erb
index 50d05f649..681aa2341 100644
--- a/app/views/settings/llm_usages/show.html.erb
+++ b/app/views/settings/llm_usages/show.html.erb
@@ -115,9 +115,9 @@
               <th class="px-4 py-3 text-right text-xs font-medium text-secondary uppercase"><%= t(".col_cost") %></th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-100">
+          <tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
             <% @llm_usages.each do |usage| %>
-              <tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if usage.failed? %>">
+              <tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if usage.failed? %>">
                 <td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
                   <%= usage.created_at.strftime("%b %d, %Y %I:%M %p") %>
                 </td>
@@ -131,8 +131,8 @@
                   <% if usage.failed? %>
                     <div data-controller="tooltip" class="inline-flex justify-end">
                       <div class="inline-flex items-center gap-1 cursor-help">
-                        <%= icon "alert-circle", class: "w-4 h-4 text-red-600 theme-dark:text-red-400" %>
-                        <span class="text-red-600 theme-dark:text-red-400 font-medium"><%= t(".failed") %></span>
+                        <%= icon "alert-circle", size: "sm", color: "destructive" %>
+                        <span class="text-destructive font-medium"><%= t(".failed") %></span>
                       </div>
                       <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-2 rounded-md w-64 text-left break-words whitespace-normal hidden">
                         <div class="text-inverse">