diff --git a/frontends/web/templates/decode.html b/frontends/web/templates/decode.html
index 36a2597..0e5fd9c 100644
--- a/frontends/web/templates/decode.html
+++ b/frontends/web/templates/decode.html
@@ -6,20 +6,29 @@
 <style>
 /* Accordion styling */
 .step-accordion .accordion-button {
-    background: rgba(30, 40, 50, 0.6);
+    background: rgba(35, 45, 55, 0.8);
     color: #fff;
     padding: 0.75rem 1rem;
-    border-left: 3px solid transparent;
+    border-left: 3px solid rgba(255, 230, 153, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.3s ease;
 }
+.step-accordion .accordion-button:hover {
+    background: rgba(45, 55, 65, 0.9);
+    border-left-color: rgba(255, 230, 153, 0.5);
+}
 .step-accordion .accordion-button:not(.collapsed) {
-    background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%);
+    background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
     color: #fff;
-    box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1);
-    border-left: 3px solid rgba(99, 179, 237, 0.6);
+    box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
+    border-left: 3px solid #ffe699;
 }
 .step-accordion .accordion-button::after {
-    filter: invert(1);
+    filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
+    opacity: 0.7;
+}
+.step-accordion .accordion-button:hover::after {
+    opacity: 1;
 }
 .step-accordion .accordion-body {
     background: rgba(30, 40, 50, 0.4);
diff --git a/frontends/web/templates/encode.html b/frontends/web/templates/encode.html
index 0da0767..ce84b46 100644
--- a/frontends/web/templates/encode.html
+++ b/frontends/web/templates/encode.html
@@ -6,20 +6,29 @@
 <style>
 /* Accordion styling */
 .step-accordion .accordion-button {
-    background: rgba(30, 40, 50, 0.6);
+    background: rgba(35, 45, 55, 0.8);
     color: #fff;
     padding: 0.75rem 1rem;
-    border-left: 3px solid transparent;
+    border-left: 3px solid rgba(255, 230, 153, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.3s ease;
 }
+.step-accordion .accordion-button:hover {
+    background: rgba(45, 55, 65, 0.9);
+    border-left-color: rgba(255, 230, 153, 0.5);
+}
 .step-accordion .accordion-button:not(.collapsed) {
-    background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%);
+    background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
     color: #fff;
-    box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1);
-    border-left: 3px solid rgba(99, 179, 237, 0.6);
+    box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
+    border-left: 3px solid #ffe699;
 }
 .step-accordion .accordion-button::after {
-    filter: invert(1);
+    filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
+    opacity: 0.7;
+}
+.step-accordion .accordion-button:hover::after {
+    opacity: 1;
 }
 .step-accordion .accordion-body {
     background: rgba(30, 40, 50, 0.4);