diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index c934cd8..e867ad0 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1687,20 +1687,30 @@ div.message-ribbon {
 /* ALERT END */
 
 
-/* hidden control area */
-.hidden-control {
-   display: none;
+/* Pure CSS toggle using <details> element */
+.toggle-summary {
+    cursor: pointer;
+    list-style: none;
+    color: var(--primary-color);
+    text-decoration: underline;
 }
 
-#toggle:checked ~ .hidden-control {
-    display: block;
+.toggle-summary::-webkit-details-marker {
+    display: none;
 }
 
-/* Stripe toggle */
-#toggle-stripe:checked ~ .hidden-control {
-    display: block;
+.toggle-summary::marker {
+    display: none;
+    content: "";
+}
+
+.api-key-details {
+    margin-top: 10px;
+}
+
+.api-key-fields {
+    margin-top: 10px;
 }
-/* hidden control area */
 
 /* Status and message styling */
 .status-message {
diff --git a/make_post_sell/templates/shop_settings.j2 b/make_post_sell/templates/shop_settings.j2
index a2ca7ff..abe94c0 100644
--- a/make_post_sell/templates/shop_settings.j2
+++ b/make_post_sell/templates/shop_settings.j2
@@ -128,14 +128,10 @@
     <form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
       <input type="hidden" name="form_section" value="stripe-settings" />
 
-      <label for="stripe_public_api_key_input">Stripe API Keys</label>
+      <details class="api-key-details">
+      <summary class="toggle-summary">Show Public & Secret Stripe API Keys</summary>
 
-      <br />
-
-      <input type="checkbox" id="toggle-stripe">
-      <label for="toggle-stripe" class="inline-label">Show Public & Secret Stripe API Keys</label>
-
-      <div class="hidden-control">
+      <div class="api-key-fields">
 
       <br />
 
@@ -185,8 +181,7 @@
       {% endif %}
 
       </div>
-      
-      <br />
+      </details>
 
       <br />
       <br />
@@ -209,14 +204,10 @@
     <form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
       <input type="hidden" name="form_section" value="paypal-settings" />
 
-      <label for="paypal_client_id_input">PayPal API Keys</label>
+      <details class="api-key-details">
+      <summary class="toggle-summary">Show PayPal Client ID & Secret API Keys</summary>
 
-      <br />
-
-      <input type="checkbox" id="toggle-paypal">
-      <label for="toggle-paypal" class="inline-label">Show PayPal Client ID & Secret API Keys</label>
-
-      <div class="hidden-control">
+      <div class="api-key-fields">
 
       <br />
 
@@ -266,8 +257,7 @@
       {% endif %}
 
       </div>
-
-      <br />
+      </details>
 
       <br />
       <br />
@@ -290,14 +280,10 @@
     <form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
       <input type="hidden" name="form_section" value="adyen-settings" />
 
-      <label for="adyen_api_key_input">Adyen API Keys</label>
+      <details class="api-key-details">
+      <summary class="toggle-summary">Show Adyen API Keys</summary>
 
-      <br />
-
-      <input type="checkbox" id="toggle-adyen">
-      <label for="toggle-adyen" class="inline-label">Show Adyen API Keys</label>
-
-      <div class="hidden-control" id="adyen-controls">
+      <div class="api-key-fields">
 
       <br />
 
@@ -375,8 +361,7 @@
       {% endif %}
 
       </div>
-
-      <br />
+      </details>
 
       <br />
       <br />
@@ -822,33 +807,23 @@ Existing sales honored for download buy purchasers.
 
 
 <script>
-// Use localStorage to remember toggle states across page refreshes
 document.addEventListener('DOMContentLoaded', function() {
+    // Crypto wallets toggle (still uses checkbox pattern)
     const cryptoCheckbox = document.getElementById('show-crypto-wallets');
     const cryptoWallets = document.getElementById('crypto-wallets');
-    const stripeToggle = document.getElementById('toggle-stripe');
-    const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
-    
-    // Restore crypto wallet toggle state from localStorage
-    const cryptoState = localStorage.getItem('show-crypto-wallets') === 'true';
-    cryptoCheckbox.checked = cryptoState;
-    cryptoWallets.style.display = cryptoState ? 'block' : 'none';
-    
-    // Restore Stripe toggle state from localStorage
-    if (stripeToggle && stripeControls) {
-        const stripeState = localStorage.getItem('show-stripe-keys') === 'true';
-        stripeToggle.checked = stripeState;
-        stripeControls.style.display = stripeState ? 'block' : 'none';
+
+    if (cryptoCheckbox && cryptoWallets) {
+        const cryptoState = localStorage.getItem('show-crypto-wallets') === 'true';
+        cryptoCheckbox.checked = cryptoState;
+        cryptoWallets.style.display = cryptoState ? 'block' : 'none';
     }
-    
+
     // Handle shop theme radio buttons for immediate preview
     const shopThemeRadios = document.querySelectorAll('input[name="default_theme"]');
     shopThemeRadios.forEach(function(radio) {
         radio.addEventListener('change', function() {
-            // Apply new theme immediately for preview
             const newTheme = this.value === '0' ? 'dark' : 'light';
             document.documentElement.setAttribute('data-theme', newTheme);
-            // Update shop owner's personal preference so they see the same theme
             localStorage.setItem('theme-preference', newTheme);
         });
     });
@@ -857,50 +832,10 @@ document.addEventListener('DOMContentLoaded', function() {
 function toggleCryptoWallets() {
     const checkbox = document.getElementById('show-crypto-wallets');
     const wallets = document.getElementById('crypto-wallets');
-    
-    // Save state to localStorage
+
     localStorage.setItem('show-crypto-wallets', checkbox.checked);
-    
-    if (checkbox.checked) {
-        wallets.style.display = 'block';
-    } else {
-        wallets.style.display = 'none';
-    }
+    wallets.style.display = checkbox.checked ? 'block' : 'none';
 }
-
-// Add onchange handler for Stripe toggle to save state
-document.addEventListener('DOMContentLoaded', function() {
-    const stripeToggle = document.getElementById('toggle-stripe');
-    if (stripeToggle) {
-        stripeToggle.addEventListener('change', function() {
-            const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
-
-            // Save state to localStorage
-            localStorage.setItem('show-stripe-keys', this.checked);
-
-            if (stripeControls) {
-                stripeControls.style.display = this.checked ? 'block' : 'none';
-            }
-        });
-    }
-
-    // Adyen toggle
-    const adyenToggle = document.getElementById('toggle-adyen');
-    const adyenControls = document.getElementById('adyen-controls');
-
-    if (adyenToggle && adyenControls) {
-        // Restore state from localStorage
-        const adyenState = localStorage.getItem('show-adyen-keys') === 'true';
-        adyenToggle.checked = adyenState;
-        adyenControls.style.display = adyenState ? 'block' : 'none';
-
-        adyenToggle.addEventListener('change', function() {
-            // Save state to localStorage
-            localStorage.setItem('show-adyen-keys', this.checked);
-            adyenControls.style.display = this.checked ? 'block' : 'none';
-        });
-    }
-});
 </script>
 
 {%- endblock -%}