diff --git a/src/components/accordion/accordion.astro b/src/components/accordion/accordion.astro
index d4a3ca670..fa74a2379 100644
--- a/src/components/accordion/accordion.astro
+++ b/src/components/accordion/accordion.astro
@@ -7,22 +7,27 @@ export interface Props {
 const { title, id } = Astro.props;
 ---
 
-<details class="group mb-4" id={id} data-faq>
+<details class="group mb-4 md:w-[65ch]" id={id} data-faq>
   <summary
     aria-expanded="false"
     aria-controls={id}
-    class="cursor-pointer flex justify-between p-2 rounded-md border-t border-b focus:ring-2"
+    class="cursor-pointer flex justify-between p-2 bg-[#d4d5e5] focus:ring-2"
   >
     <span class="font-semibold">{title}</span>
-    <span aria-hidden="true" class="group-open:hidden">+</span>
-    <span aria-hidden="true" class="group-open:block hidden">−</span>
+    <span aria-hidden="true" class="group-open:hidden arrow">▼</span>
+    <span aria-hidden="true" class="group-open:block hidden arrow">▲</span>
   </summary>
 
   <div class="pl-4">
     <slot />
   </div>
 </details>
-
+<style>
+  .arrow {
+    font-size:25px;
+    line-height: 1.25;
+  }
+</style>
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const hash = window.location.hash.substring(1); // Remove #