diff --git a/content/developer/howtos.rst b/content/developer/howtos.rst
index 071e6c06e..ffc996c6e 100644
--- a/content/developer/howtos.rst
+++ b/content/developer/howtos.rst
@@ -1,4 +1,5 @@
-:nosearch:
+:show-content:
+:hide-page-toc:
 
 =========
 Tutorials
@@ -16,3 +17,120 @@ Tutorials
     howtos/company
     howtos/accounting_localization
     howtos/translations
+
+.. raw:: html
+
+   <!-- 12 col on small screen, 6 on md, 3 on xl, 3 on xxl -->
+   <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">
+       <!-- Big card with badge rounded-pill -->
+       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="howtos/rdtraining.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Getting started</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to develop your own module with the Odoo framework. This
+                       step-by-step tutorial is crafted for newcomers and any other individual
+                       curious about Odoo development.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
+               </div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="howtos/discover_js_framework.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Discover the JavaScript Framework</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn everything you need to know about the JavaScript framework of Odoo.
+                       This tutorial will teach you how to build custom components and views, give
+                       life to your application, and even re-introduce the kitten mode.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
+               </div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/scss_tips.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Write lean easy-to-maintain CSS</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Follow this guide to keep the technical debt of your CSS code under control.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+               </div>
+           </div>
+       </a>
+
+       <!-- Small card with badge rounded-pill -->
+       <a class="o_toctree_card col" href="howtos/website.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Building a website</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Build your first website modules with Odoo.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
+               </div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/web_services.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Web services</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn more about Odoo's web services.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/company.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Multi-company guidelines</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to manage multiple companies and deal with the records-related
+                       specificities of a multi-company environment.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/accounting_localization.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Accounting localization</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to build a localization module, create bank operation models and
+                       dynamic reports.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/translations.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Translating modules</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to provide translation abilities to your module.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+   </div>
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
index c7fc2d232..a4e53a708 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
@@ -103,3 +103,6 @@ $accordion-icon-transform:                  rotate(0deg) !default;
 $alert-border-width:                        3px;
 $alert-border-scale:                        0;
 $alert-border-radius:                       0 3px 3px 0;
+
+// Card
+$card-cap-bg:                               transparent;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index d68a2d254..3345d6486 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -1057,6 +1057,28 @@ header {
     }
 }
 
+//------------------------------------------------------------------------------
+// Cards
+//------------------------------------------------------------------------------
+
+.o_toctree_card {
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+
+        .card {
+            background-color: rgba($teal-100, 0.2);
+        }
+
+    }
+
+    .card {
+        transition: all 200ms;
+    }
+
+}
+
 //------------------------------------------------------------------------------
 // Content Tabs
 //------------------------------------------------------------------------------