diff --git a/readthedocsext/theme/templates/mfa/recovery_codes/index.html b/readthedocsext/theme/templates/mfa/recovery_codes/index.html
index 0d97b855..538b6f1b 100644
--- a/readthedocsext/theme/templates/mfa/recovery_codes/index.html
+++ b/readthedocsext/theme/templates/mfa/recovery_codes/index.html
@@ -21,13 +21,12 @@
     </p>
 
     <div class="ui raised segment">
-      <div class="ui list">
-        {% for code in unused_codes %}
-          <div class="item">
-            <code>{{ code }}</code>
-          </div>
-        {% endfor %}
-      </div>
+      <p>
+        <details>
+          <summary>{% trans "View recovery codes" %}</summary>
+          {% for code in unused_codes %}<code>{{ code }} </code>{% endfor %}
+        </details>
+      </p>
 
       <input type="hidden"
              id="mfa-recovery-codes"