diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index c74122a0fad72df20f250907bcee2eeda40d0fbb..6d8b027c9c425ac31cce7d10b507fb01f28bffc1 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -71,10 +71,10 @@
   }
 
   .hy-accordion__button {
-    @include font-size(22px, 28px);
+    @include font-size(18px, 22px);
     align-items: flex-start;
-    border: none;
     background-color: var(--grayscale-background-box);
+    border: none;
     color: var(--brand-main-nearly-black);
     display: flex;
     flex-direction: row;
@@ -82,7 +82,7 @@
     font-weight: bold;
     height: 100%;
     justify-content: flex-start;
-    letter-spacing: -0.7px;
+    letter-spacing: -0.45px;
     padding: 1.125rem 1rem 1.125rem 1rem;
     transition: all 0.35s ease-in;
     width: 100%;
@@ -92,11 +92,21 @@
     }
 
     @include breakpoint($narrow) {
-      @include font-size(26px, 32px);
-      letter-spacing: -0.8px;
       padding: 1rem 2rem 1rem 1.25rem;
     }
 
+    @include breakpoint($xlarge) {
+      @include font-size(20px, 24px);
+      letter-spacing: -0.5px;
+    }
+
+    &--large {
+      @include breakpoint($extrawide) {
+        @include font-size(20px, 24px);
+        letter-spacing: -0.5px;
+      }
+    }
+
     &[aria-expanded='true'] {
       background: none;
     }
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 7a68ff6d51d6dc9cc0b0babb7832dbf918a87a16..397959a5d537967f5f2758dfa2091d191e1da473 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -222,7 +222,7 @@ export class AccordionItem {
               <button
                 aria-expanded="false"
                 aria-controls={`${titleAsId}--content`}
-                class="hy-accordion__button"
+                class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}
                 id={`${titleAsId}--title`}
               >
                 <span class="hy-accordion--heading__icon">