diff --git a/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx
index b04f1c6b9..9f1373401 100644
--- a/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx
@@ -70,14 +70,30 @@ const NavigationPage = async ({ params: { locale, navigationPageSlug } }: Params
           ) : null;
         case 'ComponentComponentsUtrechtAccordion':
           return (
-            <AccordionProvider
-              sections={component.item.map(({ id, label, body }: any) => ({
-                id,
-                label,
-                headingLevel: 3,
-                body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
-              }))}
-            />
+            <div>
+              <h2>Details/Summary</h2>
+              <div>
+                {component.item.map(({ id, label, body }: any) => (
+                  <details key={id} className="utrecht-accordion">
+                    <summary className="utrecht-accordion__section">
+                      <h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
+                    </summary>
+                    <div className="utrecht-accordion__panel">
+                      <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
+                    </div>
+                  </details>
+                ))}
+              </div>
+              <h2>Original AccordionProvider</h2>
+              <AccordionProvider
+                sections={component.item.map(({ id, label, body }: any) => ({
+                  id,
+                  label,
+                  headingLevel: 3,
+                  body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
+                }))}
+              />
+            </div>
           );
         default:
           return null;
diff --git a/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx
index 0ac07363d..bfedcfca9 100644
--- a/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx
@@ -126,14 +126,30 @@ const ArticlePage = async ({ params: { locale, articleSlug } }: Params) => {
           ) : null;
         case 'ComponentComponentsUtrechtAccordion':
           return (
-            <AccordionProvider
-              sections={component.item.map(({ id, label, body }: any) => ({
-                id,
-                label,
-                headingLevel: 3,
-                body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
-              }))}
-            />
+            <div>
+              <h2>Details/Summary</h2>
+              <div>
+                {component.item.map(({ id, label, body }: any) => (
+                  <details key={id} className="utrecht-accordion">
+                    <summary className="utrecht-accordion__section">
+                      <h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
+                    </summary>
+                    <div className="utrecht-accordion__panel">
+                      <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
+                    </div>
+                  </details>
+                ))}
+              </div>
+              <h2>Original AccordionProvider</h2>
+              <AccordionProvider
+                sections={component.item.map(({ id, label, body }: any) => ({
+                  id,
+                  label,
+                  headingLevel: 3,
+                  body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
+                }))}
+              />
+            </div>
           );
         default:
           return null;
diff --git a/apps/vth-frontend/src/app/[locale]/print/page.tsx b/apps/vth-frontend/src/app/[locale]/print/page.tsx
index 0b569c0b9..3c74f6a4f 100644
--- a/apps/vth-frontend/src/app/[locale]/print/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/print/page.tsx
@@ -180,15 +180,30 @@ const DynamicContent: React.FC<{
             ) : null;
           case 'ComponentComponentsUtrechtAccordion':
             return (
-              <AccordionProvider
-                key={index}
-                sections={component.item?.map(({ id, label, body }: any) => ({
-                  id,
-                  label,
-                  headingLevel: 3,
-                  body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
-                }))}
-              />
+              <div>
+                <h2>Details/Summary</h2>
+                <div>
+                  {component.item.map(({ id, label, body }: any) => (
+                    <details key={id} className="utrecht-accordion">
+                      <summary className="utrecht-accordion__section">
+                        <h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
+                      </summary>
+                      <div className="utrecht-accordion__panel">
+                        <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
+                      </div>
+                    </details>
+                  ))}
+                </div>
+                <h2>Original AccordionProvider</h2>
+                <AccordionProvider
+                  sections={component.item.map(({ id, label, body }: any) => ({
+                    id,
+                    label,
+                    headingLevel: 3,
+                    body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
+                  }))}
+                />
+              </div>
             );
           default:
             return null;
diff --git a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx
index 2106d6cf6..89ebd3cc2 100644
--- a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx
@@ -107,14 +107,30 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => {
           ) : null;
         case 'ComponentComponentsUtrechtAccordion':
           return (
-            <AccordionProvider
-              sections={component.item.map(({ id, label, body }: any) => ({
-                id,
-                label,
-                headingLevel: 3,
-                body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
-              }))}
-            />
+            <div>
+              <h2>Details/Summary</h2>
+              <div>
+                {component.item.map(({ id, label, body }: any) => (
+                  <details key={id} className="utrecht-accordion">
+                    <summary className="utrecht-accordion__section">
+                      <h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
+                    </summary>
+                    <div className="utrecht-accordion__panel">
+                      <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
+                    </div>
+                  </details>
+                ))}
+              </div>
+              <h2>Original AccordionProvider</h2>
+              <AccordionProvider
+                sections={component.item.map(({ id, label, body }: any) => ({
+                  id,
+                  label,
+                  headingLevel: 3,
+                  body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
+                }))}
+              />
+            </div>
           );
         default:
           return null;
diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css
index b35ce0f6b..c756a86d5 100644
--- a/apps/vth-frontend/src/styles/globals.css
+++ b/apps/vth-frontend/src/styles/globals.css
@@ -129,6 +129,29 @@ a {
   margin-inline: 1rem;
 }
 
+.utrecht-accordion__panel {
+  background-attachment: local, local, scroll, scroll;
+  background-image:
+    /* Shadows */
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    /* Shadow covers */ linear-gradient(to right, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%)),
+    linear-gradient(to left, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%));
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center;
+  background-repeat: no-repeat;
+  background-size:
+    /* left */
+    20px 100%,
+    /* right */ 20px 100%,
+    /* left */ 10px 100%,
+    /* right */ 10px 100%;
+  overflow: auto;
+}
+
 @media print {
   .utrecht-accordion__panel {
     display: block;
@@ -173,3 +196,46 @@ a {
     --utrecht-navigation-toggle-button-padding-end: 32px;
   }
 }
+
+/* Experiment */
+details summary::-webkit-details-marker,
+details summary::marker {
+  content: "";
+  display: none;
+}
+
+/* stylelint-disable property-disallowed-list */
+/* stylelint-disable length-zero-no-unit */
+summary h3 {
+  margin: 0px;
+}
+
+summary h3::after {
+  --utrecht-accordion-button-icon-background-color: #fc0;
+  --utrecht-accordion-button-icon-size: 24px;
+
+  background-color: var(--utrecht-accordion-button-icon-background-color);
+  background-image: var(
+    --utrecht-accordion-icon-arrow-down,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E")
+  );
+  background-position: 50%;
+  background-repeat: no-repeat;
+  block-size: var(--utrecht-accordion-button-icon-size);
+  content: " ";
+  display: block;
+  inline-size: var(--utrecht-accordion-button-icon-size);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+}
+
+details[open] summary h3::after {
+  background-image: var(
+    --utrecht-accordion-icon-arrow-up,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E")
+  );
+}