diff --git a/src/components.d.ts b/src/components.d.ts
index e993421a7ee09305274628af857fdf16abd63d16..e72be24ac57466e309be89d8ecb17fdb2877b845 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -61,6 +61,7 @@ export namespace Components {
   }
   interface HyAccordionItem {
     accordiontitle?: string;
+    headerstyle: string;
     variant: AccordionVariants;
   }
   interface HyAdjacentImageText {
@@ -1347,6 +1348,7 @@ declare namespace LocalJSX {
   }
   interface HyAccordionItem {
     accordiontitle?: string;
+    headerstyle?: string;
     variant?: AccordionVariants;
   }
   interface HyAdjacentImageText {
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 217d1f30fbd8700f872219bc3f0aff9ea20dcdbb..2e4bf823e0a472f095396d7b05e157eaa589a879 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -10,7 +10,7 @@
     border-left: 1px solid var(--grayscale-medium);
     border-right: 1px solid var(--grayscale-medium);
     border-top: 2px solid var(--grayscale-medium);
-    box-shadow: 0px 2px 12px 1px rgba(#000000, 10%);
+    box-shadow: 0 2px 12px 1px rgba(#000000, 10%);
 
     .hy-accordion--heading {
       margin: 0 auto;
@@ -194,29 +194,36 @@
 .hy-accordion__content {
   display: block;
   height: 0;
-  overflow: hidden;
   padding: 0;
   transition: all 0.25s ease-in-out;
 
   &--inner-wrapper {
     display: block;
-  }
-
-  > hy-box {
     padding: 20px 16px 0;
-
     @include breakpoint($narrow) {
       padding: 20px 24px 0;
     }
-
     @include breakpoint($extrawide) {
+      // there is a sidebar
+      &--common {
+        padding: 20px 24px 0;
+      }
+      // without sidebar
+      &--large {
+        padding: 24px 32px 0;
+      }
+    }
+    @include breakpoint($xlarge) {
       padding: 24px 32px 0;
     }
-  }
-}
 
-.hy-accordion__content.mini {
-  hy-box {
-    padding: 0;
+    &--mini {
+      padding: 0;
+      .course-heading {
+        h4 {
+          padding-top: 0 !important;
+        }
+      }
+    }
   }
 }
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 3b3360c0f2bdcbd4200f78bc3b549a75ddfad611..7a68ff6d51d6dc9cc0b0babb7832dbf918a87a16 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -21,10 +21,18 @@ export class AccordionItem {
   @Element() el: HTMLElement;
   @Prop() accordiontitle?: string;
   @Prop() variant: AccordionVariants = AccordionVariants.default;
+  @Prop() headerstyle: string = 'common';
   @State() ready: boolean = false;
 
   componentDidLoad() {
     this.ready = true;
+
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
   }
 
   componentDidRender() {
@@ -192,7 +200,16 @@ export class AccordionItem {
     const classAttributes = ['hy-accordion__item', this.variant].join(' ');
     const classInnerWrapper = ['hy-accordion__item--container', this.variant].join(' ');
     const classHeadingAttributes = ['hy-accordion--heading', this.variant].join(' ');
-    const classContentAttributes = ['hy-accordion__content', this.variant].join(' ');
+    const classContentAttributes = [
+      'hy-accordion__content',
+      `hy-accordion__content--${this.variant}`,
+      this.variant,
+    ].join(' ');
+    const classContentInnerWrapper = [
+      'hy-accordion__content--inner-wrapper',
+      `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
+      `hy-accordion__content--inner-wrapper--${this.variant}`,
+    ].join(' ');
 
     const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
     const accordionItemHref = '#' + titleAsId + '--title';
@@ -223,11 +240,9 @@ export class AccordionItem {
             aria-hidden="true"
             style={{display: 'none'}}
           >
-            <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
-              <div class="hy-accordion__content--inner-wrapper">
-                <slot></slot>
-              </div>
-            </hy-box>
+            <div class={classContentInnerWrapper}>
+              <slot></slot>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/accordion-item/readme.md b/src/components/accordion-item/readme.md
index 858fdfd91a7f60426bbc714012699a76a7194c8b..b23350237b8e938fb5e37dae4ba20ac192c9c849 100644
--- a/src/components/accordion-item/readme.md
+++ b/src/components/accordion-item/readme.md
@@ -42,6 +42,7 @@ Accordion component
 | Property         | Attribute        | Description | Type                                                  | Default                     |
 | ---------------- | ---------------- | ----------- | ----------------------------------------------------- | --------------------------- |
 | `accordiontitle` | `accordiontitle` |             | `string`                                              | `undefined`                 |
+| `headerstyle`    | `headerstyle`    |             | `string`                                              | `'common'`                  |
 | `variant`        | `variant`        |             | `AccordionVariants.default \| AccordionVariants.mini` | `AccordionVariants.default` |
 
 ## Dependencies
@@ -53,14 +54,12 @@ Accordion component
 ### Depends on
 
 - [hy-icon](../icon)
-- [hy-box](../hy-box)
 
 ### Graph
 
 ```mermaid
 graph TD;
   hy-accordion-item --> hy-icon
-  hy-accordion-item --> hy-box
   hy-footer-info --> hy-accordion-item
   style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/src/components/footer/hy-footer-info/readme.md b/src/components/footer/hy-footer-info/readme.md
index 7293a998ff1b0618cc44f08863445302e5283ccd..bd941092c893254f3e2086d3552ae38628eca947 100644
--- a/src/components/footer/hy-footer-info/readme.md
+++ b/src/components/footer/hy-footer-info/readme.md
@@ -35,7 +35,6 @@ graph TD;
   hy-button --> hy-icon
   hy-accordion-container --> hy-box
   hy-accordion-item --> hy-icon
-  hy-accordion-item --> hy-box
   hy-footer-link-item --> hy-icon
   hy-footer-link-item --> hy-heading
   style hy-footer-info fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index 1329f8a9a91aa8a056c8d65763b03da4ee78eb6a..c31049caf136fe67b4ae102b00519274826907f4 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -28,7 +28,6 @@
 ### Used by
 
 - [hy-accordion-container](../accordion-container)
-- [hy-accordion-item](../accordion-item)
 - [hy-adjacent-image-text](../adjacent-image-text)
 - [hy-banner](../hy-banner)
 - [hy-heading](../heading)
@@ -48,7 +47,6 @@
 ```mermaid
 graph TD;
   hy-accordion-container --> hy-box
-  hy-accordion-item --> hy-box
   hy-adjacent-image-text --> hy-box
   hy-banner --> hy-box
   hy-heading --> hy-box