diff --git a/dist/css/styles.css b/dist/css/styles.css
index be1d93c..c1d8818 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -1779,55 +1779,15 @@ th {
 }
 
 .status-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.9rem;
-  height: 1.9rem;
-  border-radius: var(--radius-full);
-  border: 1.5px solid color-mix(in srgb, var(--border-secondary) 70%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
-  color: var(--text-secondary);
-  font-weight: var(--font-semibold);
-  letter-spacing: .02em;
-  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
-}
-
-.status-indicator::before {
-  content: attr(data-symbol);
+  display: inline-block;
+  font-size: 1.25rem;
   line-height: 1;
-  font-size: .9rem;
-}
-
-.status-indicator[data-supported="true"] {
-  background: linear-gradient(145deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .08));
-  border-color: rgba(16, 185, 129, .55);
-  color: color-mix(in srgb, var(--success) 92%, #fff 8%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
-}
-
-[data-theme="dark"] .status-indicator[data-supported="true"] {
-  background: linear-gradient(145deg, rgba(16, 185, 129, .32), rgba(16, 185, 129, .18));
-  border-color: rgba(16, 185, 129, .7);
-  box-shadow: inset 0 1px 0 rgba(16, 185, 129, .25);
-}
-
-.status-indicator[data-supported="false"] {
-  background: linear-gradient(145deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .06));
-  border-color: rgba(239, 68, 68, .45);
-  color: color-mix(in srgb, var(--error) 90%, #fff 10%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
-}
-
-[data-theme="dark"] .status-indicator[data-supported="false"] {
-  background: linear-gradient(145deg, rgba(239, 68, 68, .28), rgba(239, 68, 68, .15));
-  border-color: rgba(239, 68, 68, .55);
-  box-shadow: inset 0 1px 0 rgba(239, 68, 68, .2);
+  transition: transform var(--transition-fast), opacity var(--transition-fast);
 }
 
 .status-cell:hover .status-indicator,
 .support-status:hover .status-indicator {
-  opacity: 0.9;
+  transform: scale(1.1);
 }
 
 .empty-state-row {
diff --git a/dist/js/app.js b/dist/js/app.js
index 125404e..33dc8a0 100644
--- a/dist/js/app.js
+++ b/dist/js/app.js
@@ -357,7 +357,7 @@ class TableManager {
             const indicator = document.createElement("span");
             indicator.className = "status-indicator";
             indicator.dataset.supported = isSupported ? "true" : "false";
-            indicator.dataset.symbol = isSupported ? "✓" : "✕";
+            indicator.textContent = isSupported ? "✅" : "❌";
             indicator.setAttribute("aria-hidden", "true");
 
             const srText = document.createElement("span");
@@ -675,10 +675,10 @@ class ComparisonManager {
         const getStatusCell = (supported) => {
             const supportedClass = supported ? "supported" : "not-supported";
             const supportedFlag = supported ? "true" : "false";
-            const symbol = supported ? "✓" : "✕";
+            const emoji = supported ? "✅" : "❌";
             return `
                 <td class="support-status ${supportedClass}" data-supported="${supportedFlag}">
-                    <span class="status-indicator" data-supported="${supportedFlag}" data-symbol="${symbol}" aria-hidden="true"></span>
+                    <span class="status-indicator" data-supported="${supportedFlag}" aria-hidden="true">${emoji}</span>
                     <span class="visually-hidden">${supported ? "Supported" : "Not supported"}</span>
                 </td>
             `;