diff --git a/packages/components/src/components/accordion-group/accordion-group.stories.ts b/packages/components/src/components/accordion-group/accordion-group.stories.ts
index 6685345a7..b11843432 100644
--- a/packages/components/src/components/accordion-group/accordion-group.stories.ts
+++ b/packages/components/src/components/accordion-group/accordion-group.stories.ts
@@ -103,3 +103,55 @@ export const Mouseless = {
     });
   }
 };
+
+/**
+ * Accordion group can be used with background options of white, neutral-100 and primary-100.
+ */
+
+export const Samples = {
+  render: () => {
+    return html`
+      <div class="w-full flex gap-8 flex-col">
+        <div>
+          <div class="p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">white</div>
+
+          <sd-accordion-group class="w-1/2 bg-white p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+
+        <div>
+          <div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">neutral-100</div>
+          <sd-accordion-group class="w-1/2 bg-neutral-100 p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+
+        <div>
+          <div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">primary-100</div>
+          <sd-accordion-group class="w-1/2 bg-primary-100 p-8">
+            <sd-accordion summary="Accordion 1"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 2"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            ><sd-accordion summary="Accordion 3"
+              ><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
+            >
+          </sd-accordion-group>
+        </div>
+      </div>
+    `;
+  }
+};
diff --git a/packages/components/src/components/accordion/accordion.ts b/packages/components/src/components/accordion/accordion.ts
index 26937f9d9..f6c2e31ce 100644
--- a/packages/components/src/components/accordion/accordion.ts
+++ b/packages/components/src/components/accordion/accordion.ts
@@ -150,13 +150,12 @@ export default class SdAccordion extends SolidElement {
 
   render() {
     return html`
-      <div part="base" class="outline outline-1 outline-neutral-400 -outline-offset-1">
+      <div part="base" class="border-y-[1px] border-neutral-400">
         <header
           part="header"
           id="header"
           class=${cx(
-            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline',
-            this.open ? 'bg-white text-accent hover:bg-neutral-200' : 'text-primary bg-neutral-100 hover:bg-neutral-200'
+            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group'
           )}
           role="button"
           aria-expanded=${this.open ? 'true' : 'false'}
@@ -165,6 +164,12 @@ export default class SdAccordion extends SolidElement {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
+          <div
+            class=${cx(
+              !this.open && 'opacity-0',
+              'w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full'
+            )}
+          ></div>
           <slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>
 
           <span
diff --git a/packages/components/src/components/carousel/carousel.stories.ts b/packages/components/src/components/carousel/carousel.stories.ts
index 3125797e2..4d979ee24 100644
--- a/packages/components/src/components/carousel/carousel.stories.ts
+++ b/packages/components/src/components/carousel/carousel.stories.ts
@@ -2,7 +2,6 @@
 import '../../solid-components';
 import { html } from 'lit';
 import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
-import { userEvent } from '@storybook/testing-library';
 import { waitUntil } from '@open-wc/testing-helpers';
 
 const { argTypes, parameters } = storybookDefaults('sd-carousel');
@@ -243,7 +242,8 @@ export const Mouseless = {
 
   play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {
     const el = canvasElement.querySelector('.mouseless sd-carousel');
-    await waitUntil(() => el?.shadowRoot?.querySelector('scroll-container'));
-    await userEvent.type(el!.shadowRoot!.querySelector('scroll-container')!, '{space}', { pointerEventsCheck: 0 });
+    await waitUntil(() => el?.shadowRoot?.querySelector('#scroll-container'));
+
+    el?.shadowRoot?.querySelector<HTMLElement>('#scroll-container')!.focus();
   }
 };