diff --git a/site/content/learn/lesson-1/index.html b/site/content/learn/lesson-1/index.html
index 414aa711e..dfa69da6f 100644
--- a/site/content/learn/lesson-1/index.html
+++ b/site/content/learn/lesson-1/index.html
@@ -13,6 +13,7 @@
 hidden_sidenav: true
 previous_lesson: "/learn/lesson-3/"
 next_lesson: "/learn/lesson-2/"
+accordion_section: "headingOne"
 ---
 
 <p>Test text</p>
diff --git a/site/content/learn/lesson-2/index.html b/site/content/learn/lesson-2/index.html
index 38c67a5be..acb56f0be 100644
--- a/site/content/learn/lesson-2/index.html
+++ b/site/content/learn/lesson-2/index.html
@@ -11,6 +11,7 @@
 url: "learn/lesson-2/"
 layout: tutorial
 hidden_sidenav: true
+accordion_section: "headingOne"
 ---
 
 <p>Test text</p>
diff --git a/site/content/learn/lesson-3/index.html b/site/content/learn/lesson-3/index.html
index 58aad81e4..272a7bb2d 100644
--- a/site/content/learn/lesson-3/index.html
+++ b/site/content/learn/lesson-3/index.html
@@ -11,6 +11,7 @@
 url: "learn/lesson-3/"
 layout: tutorial
 hidden_sidenav: true
+accordion_section: "headingOne"
 ---
 
 <p>Test text</p>
diff --git a/site/content/learn/lesson-4/index.html b/site/content/learn/lesson-4/index.html
index bd55c55e4..7435f2879 100644
--- a/site/content/learn/lesson-4/index.html
+++ b/site/content/learn/lesson-4/index.html
@@ -11,6 +11,7 @@
 url: "learn/lesson-4/"
 layout: tutorial
 hidden_sidenav: true
+accordion_section: "headingTwo"
 ---
 
 <p>Test text</p>
diff --git a/site/layouts/_default/tutorial.html b/site/layouts/_default/tutorial.html
index e2546534a..c94dc3b15 100644
--- a/site/layouts/_default/tutorial.html
+++ b/site/layouts/_default/tutorial.html
@@ -35,10 +35,12 @@
 
     <main class="mt-[58px] py-5">
       <div class="contents">
-        <section id="mdb-tutorial-content" class="container mx-auto">
-          <div class="grid grid-cols-12 gap-1">
+        <section
+          id="mdb-tutorial-content"
+          class="mx-auto min-[576px]:max-w-[540px] min-[768px]:max-w-[720px] min-[992px]:max-w-[960px] min-[1200px]:max-w-[1140px] min-[1400px]:max-w-[1320px] ">
+          <div class="grid grid-cols-12">
             <!-- Column: Sidebar -->
-            <div class="col-span-4 mx-5 mb-5 hidden lg:block">
+            <div class="col-span-4 mb-5 hidden px-5 lg:block">
               <div id="tutorials-menu">
                 {{ partial "tutorial/tutorial-navigation.html" . }}
               </div>
@@ -46,18 +48,18 @@
             <!-- Column: Sidebar -->
 
             <!-- Column: Content -->
-            <div class="col-span-8 mb-5">
+            <div class="col-span-8 mb-5 px-6">
               {{ .Content }}
 
 
-              <hr class="hr my-5" />
+              <hr class="hr my-12" />
 
               <!-- Section: Nav buttons -->
               <section class="flex justify-between">
                 <div>
                   <a
                     type="button"
-                    class="inline-block flex rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary-600 outline-none transition duration-300 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-200 active:text-primary-800"
+                    class="flex rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary outline-none transition duration-300 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none focus:ring-0 active:bg-neutral-200 active:text-primary-800"
                     data-te-ripple-init
                     href="https://twitter.com/ascensus_mdb"
                     rel="nofollow"
@@ -67,7 +69,7 @@
                       focusable="false"
                       data-prefix="fas"
                       data-icon="caret-left"
-                      class="ml-1 mr-1 h-4 w-4"
+                      class="ml-1 mr-1 h-3.5 w-3.5"
                       role="img"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 576 512">
@@ -83,14 +85,14 @@
                   {{ if and (isset .Params "previous_lesson") (ne .Params.previous_lesson "") }}
                     <a
                       type="button"
-                      class="mr-3 flex items-center rounded bg-primary-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+                      class="mr-3 flex items-center rounded bg-primary-100 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary-700 shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-accent-100 hover:shadow-lg focus:bg-primary-accent-100 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-accent-200 active:shadow-lg"
                       href="{{ .Params.previous_lesson }}"
                       ><svg
                         aria-hidden="true"
                         focusable="false"
                         data-prefix="fas"
                         data-icon="caret-left"
-                        class="-mr-1 h-4 w-4"
+                        class=" h-4 w-4"
                         role="img"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 576 512">
@@ -105,7 +107,7 @@
                   {{ if and (isset .Params "next_lesson") (ne .Params.next_lesson "") }}
                     <a
                       type="button"
-                      class="flex items-center rounded bg-primary-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md outline-none transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+                      class="flex items-center rounded bg-primary px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] outline-none transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
                       href="{{ .Params.next_lesson }}">
                       Next
                       <svg
@@ -113,7 +115,7 @@
                         focusable="false"
                         data-prefix="fas"
                         data-icon="caret-right"
-                        class="ml-1 -mr-3 h-4 w-4"
+                        class="ml-3 -mr-3 h-4 w-4"
                         role="img"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 576 512">
@@ -127,7 +129,7 @@
               </section>
               <!-- Section: Nav buttons -->
 
-              <hr class="hr my-5" />
+              <hr class="hr my-12" />
 
               <!-- Section: About author -->
               <section class="">
@@ -137,13 +139,13 @@
                   <img
                     src="https://pbs.twimg.com/profile_images/1154666340298493952/F57OFDN7_400x400.jpg"
                     alt="John Doe"
-                    class="mr-3 rounded-full"
+                    class="mr-4 rounded-full shadow-[0px_2px_25px_-5px_rgba(0,0,0,0.16),_0px_25px_21px_-5px_rgba(0,0,0,0.1)]"
                     style="width: 90px; height: 90px;" />
                   <!-- Body -->
                   <div>
-                    <div class="mb-4 flex justify-between">
+                    <div class="mb-2 flex justify-between">
                       <div>
-                        <p class="mb-2 font-bold" style="color: #757575;">
+                        <p class="mb-4 font-bold" style="color: #757575;">
                           About author
                         </p>
                         <h5 class="font-bold">Michal Szymanski</h5>
@@ -153,8 +155,7 @@ <h5 class="font-bold">Michal Szymanski</h5>
                           href="https://twitter.com/ascensus_mdb"
                           target="_blank"
                           rel="nofollow"
-                          class=" flex"
-                          style=" color: #3b71ca ;">
+                          class="flex text-primary">
                           <svg
                             aria-hidden="true"
                             focusable="false"
@@ -186,7 +187,7 @@ <h5 class="font-bold">Michal Szymanski</h5>
                         >Dancer</a
                       >, nerd & book lover.
                     </p>
-                    <p class="mt-3">
+                    <p class="mt-4">
                       Author of hundreds of articles on programming, business,
                       marketing and productivity. In the past, an educator
                       working with troubled youth in orphanages and correctional
@@ -235,6 +236,9 @@ <h5 class="font-bold">Michal Szymanski</h5>
         links.forEach((link) => {
           if (progress.includes(link.getAttribute("href"))) {
             link.setAttribute("data-te-seen-lesson", true);
+            const childrenSvg = link.querySelector("svg");
+            childrenSvg.classList.add("w-4", "h-4");
+            childrenSvg.classList.remove("w-2.5", "h-2.5", "opacity-40");
             const childrenSvgPath = link.querySelector("path");
             childrenSvgPath.setAttribute("d", checkedLessonSvgPath);
             childrenSvgPath.setAttribute("style", "color:#3b71ca;");
@@ -247,8 +251,16 @@ <h5 class="font-bold">Michal Szymanski</h5>
           );
 
           if (link.href === window.location.href) {
-            currentCollapseToggler.click();
-            link.classList.add("bg-primary-100", "dark:bg-neutral-700");
+            link.classList.add(
+              "bg-[#f3f6fc]",
+              "hover:bg-[#f3f6fc]",
+              "focus:bg-[#f3f6fc]",
+              "text-[#2c58a0]",
+              "dark:bg-neutral-700",
+              "dark:text-primary-300",
+              "dark:hover:bg-neutral-700",
+              "dark:focus:bg-neutral-700"
+            );
           }
         });
 
@@ -259,6 +271,9 @@ <h5 class="font-bold">Michal Szymanski</h5>
             "[data-te-accordion-header]"
           );
           const buttonHeader = accordionHeader.querySelector("button");
+          const buttonSvg = buttonHeader.querySelector("svg");
+          buttonSvg.classList.add("w-4", "h-4");
+          buttonSvg.classList.remove("w-2.5", "h-2.5", "opacity-40");
           const buttonHeaderSvgPath = buttonHeader.querySelector("path");
           buttonHeaderSvgPath.setAttribute("d", checkedLessonSvgPath);
           buttonHeaderSvgPath.setAttribute("style", "color:#3b71ca;");
diff --git a/site/layouts/partials/tutorial/tutorial-nav-link.html b/site/layouts/partials/tutorial/tutorial-nav-link.html
index a86b47965..419b75508 100644
--- a/site/layouts/partials/tutorial/tutorial-nav-link.html
+++ b/site/layouts/partials/tutorial/tutorial-nav-link.html
@@ -1,19 +1,23 @@
-<a href="{{ .href }}" class="flex w-full items-center rounded-lg p-4">
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    data-prefix="fas"
-    data-icon="circle"
-    class="mr-2 h-3 w-3"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 576 512"
-    style="color: #757575;">
-    <path
-      id="dupa"
-      fill="currentColor"
-      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
-  </svg>
+<a
+  href="{{ .href }}"
+  class="flex w-full items-center rounded-lg py-2 px-4 text-[0.9rem] leading-[1.6] outline-none transition-colors duration-500 ease-in-out hover:bg-neutral-100 focus:bg-neutral-100 motion-reduce:transition-none dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+  <span class="mr-2 mt-[-1px] flex h-3.5 w-3.5 items-center justify-center">
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fas"
+      data-icon="circle"
+      class="mx-auto h-2.5 w-2.5 opacity-40"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      style="color: #757575;">
+      <path
+        id="dupa"
+        fill="currentColor"
+        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
+    </svg>
+  </span>
   {{ .text | markdownify }}
   {{ .Title }}
 </a>
diff --git a/site/layouts/partials/tutorial/tutorial-navigation.html b/site/layouts/partials/tutorial/tutorial-navigation.html
index 0ce05f718..568deb406 100644
--- a/site/layouts/partials/tutorial/tutorial-navigation.html
+++ b/site/layouts/partials/tutorial/tutorial-navigation.html
@@ -1,32 +1,40 @@
+{{ $accordion_section := .Params.accordion_section }}
+
+
 <div
   data-te-accordion-item
   class="rounded-t-[0.25rem] border-0 bg-white dark:bg-neutral-800">
   <h2 data-te-accordion-header class="mb-0" id="headingOne">
     <button
-      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-4 px-5 text-left text-base text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-zinc-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-primary-100 [&:not([data-te-collapse-collapsed])]:text-primary dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
+      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-[0.9rem] px-[1.4rem] text-left text-base leading-none text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-[#f3f6fc] [&:not([data-te-collapse-collapsed])]:text-[#2c58a0] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
       type="button"
       data-te-collapse-init
-      data-te-collapse-collapsed
+      {{ if ne $accordion_section "headingOne" }}
+        data-te-collapse-collapsed
+      {{ end }}
       data-te-target="#collapseOne"
       aria-expanded="true"
       aria-controls="collapseOne">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        data-prefix="fas"
-        data-icon="circle"
-        class="check-button mr-2 h-3 w-3 align-middle"
-        role="img"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 576 512"
-        style="color: #757575;">
-        <path
-          fill="currentColor"
-          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
-      </svg>
+      <span class="mr-2 mt-[-1px] flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="circle"
+          class="mx-auto h-2.5 w-2.5 opacity-40"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          style="color: #757575;">
+          <path
+            id="dupa"
+            fill="currentColor"
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
+        </svg>
+      </span>
       Accordion Item #1
       <span
-        class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
+        class="ml-auto h-3.5 w-3.5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
           <path
             fill-rule="evenodd"
@@ -37,11 +45,16 @@ <h2 data-te-accordion-header class="mb-0" id="headingOne">
   </h2>
   <div
     id="collapseOne"
-    class="group !visible hidden"
+    class="{{ if ne $accordion_section "headingOne" }}
+      hidden
+    {{ end }} group !visible"
     data-te-collapse-item
+    {{ if eq $accordion_section "headingOne" }}
+      data-te-collapse-show
+    {{ end }}
     aria-labelledby="headingOne"
     data-te-parent="#tutorials-menu">
-    <div class="px-5 pt-2">
+    <div class="px-6 py-[1.15rem]">
       <div class="flex justify-center">
         <ul class="w-96 text-gray-800 dark:text-gray-200">
           {{ partial "tutorial/tutorial-nav-link.html" (dict "context" . "href" "/learn/lesson-1/" "text"
@@ -58,33 +71,38 @@ <h2 data-te-accordion-header class="mb-0" id="headingOne">
     </div>
   </div>
 </div>
-<div data-te-accordion-item class="border-0 bg-white dark:bg-zinc-800">
+<div data-te-accordion-item class="border-0 bg-white dark:bg-neutral-800">
   <h2 data-te-accordion-header class="mb-0" id="headingTwo">
     <button
-      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-4 px-5 text-left text-base text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-zinc-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-primary-100 [&:not([data-te-collapse-collapsed])]:text-primary dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
+      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-[0.9rem] px-[1.4rem] text-left text-base leading-none text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-[#f3f6fc] [&:not([data-te-collapse-collapsed])]:text-[#2c58a0] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
       type="button"
       data-te-collapse-init
-      data-te-collapse-collapsed
+      {{ if ne $accordion_section "headingTwo" }}
+        data-te-collapse-collapsed
+      {{ end }}
       data-te-target="#collapseTwo"
       aria-expanded="false"
       aria-controls="collapseTwo">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        data-prefix="fas"
-        data-icon="circle"
-        class="check-button mr-2 h-3 w-3 align-middle"
-        role="img"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 576 512"
-        style="color: #757575;">
-        <path
-          fill="currentColor"
-          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
-      </svg>
+      <span class="mr-2 mt-[-1px] flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="circle"
+          class="mx-auto h-2.5 w-2.5 opacity-40"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          style="color: #757575;">
+          <path
+            id="dupa"
+            fill="currentColor"
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
+        </svg>
+      </span>
       Accordion Item #2
       <span
-        class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
+        class="ml-auto h-3.5 w-3.5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
           <path
             fill-rule="evenodd"
@@ -95,8 +113,11 @@ <h2 data-te-accordion-header class="mb-0" id="headingTwo">
   </h2>
   <div
     id="collapseTwo"
-    class="!visible hidden"
+    class="{{ if ne $accordion_section "headingTwo" }}hidden{{ end }} !visible"
     data-te-collapse-item
+    {{ if eq $accordion_section "headingTwo" }}
+      data-te-collapse-show
+    {{ end }}
     aria-labelledby="headingTwo"
     data-te-parent="#tutorials-menu">
     <div class="px-5 pt-2">
@@ -118,33 +139,38 @@ <h2 data-te-accordion-header class="mb-0" id="headingTwo">
 </div>
 <div
   data-te-accordion-item
-  class="rounded-b-[0.25rem] border-0 bg-white dark:bg-zinc-800">
+  class="rounded-b-[0.25rem] border-0 bg-white dark:bg-neutral-800">
   <h2 data-te-accordion-header class="mb-0" id="headingThree">
     <button
-      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-4 px-5 text-left text-base text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-zinc-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-primary-100 [&:not([data-te-collapse-collapsed])]:text-primary dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
+      class="group relative flex w-full items-center rounded-lg border-0 bg-white py-[0.9rem] px-[1.4rem] text-left text-base leading-none text-gray-800 outline-none transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-[#f3f6fc] [&:not([data-te-collapse-collapsed])]:text-[#2c58a0] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-700 dark:[&:not([data-te-collapse-collapsed])]:text-primary-300"
       type="button"
       data-te-collapse-init
-      data-te-collapse-collapsed
+      {{ if ne $accordion_section "headingThree" }}
+        data-te-collapse-collapsed
+      {{ end }}
       data-te-target="#collapseThree"
       aria-expanded="false"
       aria-controls="collapseThree">
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        data-prefix="fas"
-        data-icon="circle"
-        class="check-button mr-2 h-3 w-3 align-middle"
-        role="img"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 576 512"
-        style="color: #757575;">
-        <path
-          fill="currentColor"
-          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
-      </svg>
+      <span class="mr-2 mt-[-1px] flex h-3.5 w-3.5 items-center justify-center">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="circle"
+          class="mx-auto h-2.5 w-2.5 opacity-40"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          style="color: #757575;">
+          <path
+            id="dupa"
+            fill="currentColor"
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
+        </svg>
+      </span>
       Accordion Item #3
       <span
-        class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
+        class="ml-auto h-3.5 w-3.5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
           <path
             fill-rule="evenodd"
@@ -155,8 +181,13 @@ <h2 data-te-accordion-header class="mb-0" id="headingThree">
   </h2>
   <div
     id="collapseThree"
-    class="!visible hidden"
+    class="{{ if ne $accordion_section "headingThree" }}
+      hidden
+    {{ end }} !visible"
     data-te-collapse-item
+    {{ if eq $accordion_section "headingThree" }}
+      data-te-collapse-show
+    {{ end }}
     aria-labelledby="headingThree"
     data-te-parent="#tutorials-menu">
     <div class="px-5 pt-2">