diff --git a/extensions/odoo_theme/static/js/page_toc.js b/extensions/odoo_theme/static/js/page_toc.js
index 1f7f83ca0..f660061c2 100644
--- a/extensions/odoo_theme/static/js/page_toc.js
+++ b/extensions/odoo_theme/static/js/page_toc.js
@@ -117,20 +117,45 @@
 
     /**
      * Update the page TOC entries and heading references to allow collapsing them.
+     *
+     * The typical structure of a TOC menu is a follows:
+     * <ul><li>
+     *     <a href="#"/>
+     *     <ul>
+     *         <li><a href="#heading_without_child"/></li>
+     *         <li>
+     *             <a href="#heading_with_children"/>
+     *             <ul>...</ul>
+     *         </li>
+     *     </ul>
+     * </li></ul>
+     *
+     * Since a <ul> is always preceded by a <a>, and since we only need to make change to <a>
+     * elements followed by a <ul>, we simply loop on <ul> elements to access all parts of the DOM
+     * that need to be modified.
+     *
+     * For a given <a> and <ul> pair, the final structure must look like this:
+     * <a href="#heading_with_children">
+     *     <i data-bs-target="#o_target_heading_with_children" data-bs-toggle="collapse"
+     *        class="i-chevron-right"/>
+     * </a>
+     * <ul id="o_target_heading_with_children" class="collapse">...</ul>
      */
     const _prepareAccordion = () => {
         // Start at the second TOC entry list (<ul>) to avoid collapsing the entire TOC
         const pageTocRoot = this.pageToc.querySelectorAll('ul')[1];
         pageTocRoot.querySelectorAll('ul').forEach(tocEntryList => {
             const relatedHeadingRef = tocEntryList.previousSibling; // The preceding <a> element
+            // Modify the <ul> element
             tocEntryList.id = `o_target_${relatedHeadingRef.getAttribute('href').replace('#', '')}`
             tocEntryList.classList.add('collapse');
-            relatedHeadingRef.setAttribute('data-bs-target', `#${tocEntryList.id}`);
-            relatedHeadingRef.setAttribute('data-bs-toggle', 'collapse');
+            // Create and configure an <li> element and insert it in the <a> element
+            const arrowButton = document.createElement('I');
+            arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`);
+            arrowButton.setAttribute('data-bs-toggle', 'collapse');
+            arrowButton.classList.add('i-chevron-right');
+            relatedHeadingRef.insertBefore(arrowButton, relatedHeadingRef.firstChild);
         });
-        // TODO [ANV]
-        // current output: <a class="reference internal collapsed" href="#text" data-bs-target="#o_target_text" data-bs-toggle="collapse" aria-expanded="false">Text</a>
-        // desired output: <a class="reference internal" href="#text"><i class="i-chevron-right collapsed" data-bs-target="#o_target_text" data-bs-toggle="collapse" aria-expanded="false"></i> Text</a>
 
     };
 
diff --git a/requirements.txt b/requirements.txt
index 564f9d7bf..ed001db85 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,3 @@
-docutils~=0.14
 pygments~=2.6.1
 pysass~=0.1.0
 sphinx~=3.0