diff --git a/docs/TEMPLATE.md b/docs/TEMPLATE.md
index 4408e56382a2..bbf4ab96d35f 100644
--- a/docs/TEMPLATE.md
+++ b/docs/TEMPLATE.md
@@ -21,7 +21,7 @@ What options does a user have then interacting with this feature?
 What elements of this feature are pay-walled vs. free?
 -->
 
-# FAQ
+{% include faq-begin.md %}
 <!--
 This section covers the useful but not as vital information, it should capture commonly queried elements which do not organically form part of the About or How-to sections.
 
@@ -32,6 +32,7 @@ This section covers the useful but not as vital information, it should capture c
 - Is there any general troubleshooting for this feature?
  - Note: troubleshooting should generally go in the FAQ, but if there is extensive troubleshooting, such as with integrations, that will be housed in a separate page, stored with and linked from the main page for that feature.
 -->
+{% include faq-end.md %}
 
 # Deep Dive
 <!--
diff --git a/docs/_includes/faq-begin.md b/docs/_includes/faq-begin.md
new file mode 100644
index 000000000000..af1981c242cd
--- /dev/null
+++ b/docs/_includes/faq-begin.md
@@ -0,0 +1,4 @@
+{::options parse_block_html="true" /}
+<details>
+{::options parse_block_html="false" /}
+<summary>FAQ</summary> {: #faq}
\ No newline at end of file
diff --git a/docs/_includes/faq-end.md b/docs/_includes/faq-end.md
new file mode 100644
index 000000000000..32012c1ab5cb
--- /dev/null
+++ b/docs/_includes/faq-end.md
@@ -0,0 +1 @@
+</details>
\ No newline at end of file
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 9276443c3813..cfdf4ff3a2bc 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -46,7 +46,6 @@ blockquote {
 
 article,
 aside,
-details,
 figcaption,
 figure,
 footer,
@@ -55,8 +54,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
-summary {
+section {
     display: block;
 }
 
@@ -99,7 +97,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6, 
+summary {
     color: $color-text;
     font-weight: bold;
     padding-bottom: 12px;
@@ -113,7 +112,25 @@ h6 {
     margin-top: 20px;
 }
 
-h1 {
+#faq::marker {
+    font-size: 1.5em;
+}
+
+details summary { 
+    cursor: pointer;
+    user-select: none;
+}
+
+details > summary {
+    list-style-image: url("/assets/images/arrow-right.svg");
+}
+
+details[open] > summary {
+    list-style-image: url("/assets/images/down.svg");
+}
+
+h1, 
+summary {
     font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-weight: 500;
     font-size: larger;
@@ -398,7 +415,7 @@ button {
             flex-wrap: wrap;
         }
 
-        h1 {
+        h1, summary {
             font-size: 1.5em;
             padding: 20px 0 12px 0;
         }
diff --git a/docs/articles/expensify-classic/getting-started/Using-The-App.md b/docs/articles/expensify-classic/getting-started/Using-The-App.md
index 281a26a4317b..9b8bc530e12e 100644
--- a/docs/articles/expensify-classic/getting-started/Using-The-App.md
+++ b/docs/articles/expensify-classic/getting-started/Using-The-App.md
@@ -39,7 +39,9 @@ SmartScan's performance can vary depending on factors such as receipt quality, l
 **Receipt quality**: The clarity and condition of a receipt can impact SmartScan's accuracy. For best results, ensure your environment is well-lit and the receipt is straight and free of obstructions.
 **Language support**: While SmartScan supports multiple languages, its accuracy may differ from one language to another. Users dealing with non-English receipts should be aware of potential variations in data extraction.
 **Handwriting recognition**: Handwritten receipts might pose challenges for SmartScan. In such cases, manual verification may be necessary to ensure accurate data entry.
-# FAQ
+
+{% include faq-begin.md %}
+
 ## Can I use the mobile app for both personal and business expenses?
 Yes, you can use Expensify for personal and business expenses. It's versatile and suitable for both individual and corporate use. Check out our personal and business plans [here](https://www.expensify.com/pricing) to see what might be right for you.
 ## Is it possible to categorize and tag expenses on the mobile app?
@@ -50,3 +52,5 @@ If you experience issues, first make sure you’re using the most recent version
 Expensify takes security seriously and employs encryption and other security measures to protect your data. It's important to use strong, unique passwords and enable device security features like biometric authentication.
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
+
+{% include faq-end.md %}
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index dde3af22e900..6e154bb09a44 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -190,6 +190,7 @@ window.addEventListener('DOMContentLoaded', () => {
             // Disable the collapsible functionality of the library by
             // setting the maximum number of heading levels (6)
             collapseDepth: 6,
+            headingSelector: 'h1, h2, h3, summary',
 
             // Main class to add to lists.
             listClass: 'lhn-items',