diff --git a/doc/_static/css/custom.css b/doc/_static/css/custom.css
new file mode 100644
index 0000000000..28754fd7dd
--- /dev/null
+++ b/doc/_static/css/custom.css
@@ -0,0 +1,20 @@
+/* Center and make the title bold */
+.my-custom-card .grid-item-card-title {
+ text-align: center;
+ font-weight: bold;
+}
+
+/* Default style for hover content (hidden) */
+.my-custom-card .hover-content {
+ display: none;
+ text-align: center;
+}
+
+/* Show the hover content when hovering over the card */
+.my-custom-card:hover .default-title {
+ display: none;
+}
+
+.my-custom-card:hover .hover-content {
+ display: block;
+}
diff --git a/doc/conf.py b/doc/conf.py
index e3d58ca8f2..db16269991 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -109,8 +109,10 @@
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
-# html_static_path = ['_static']
-
+html_static_path = ['_static']
+html_css_files = [
+ 'css/custom.css',
+]
html_favicon = "images/favicon-32x32.png"
diff --git a/doc/index.rst b/doc/index.rst
index ed443e4200..57a0c95443 100644
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -51,6 +51,7 @@ SpikeInterface is made of several modules to deal with different aspects of the
overview
get_started/index
+ tutorials_custom_index
tutorials/index
how_to/index
modules/index
diff --git a/doc/tutorials_custom_index.rst b/doc/tutorials_custom_index.rst
new file mode 100644
index 0000000000..a058b0fed2
--- /dev/null
+++ b/doc/tutorials_custom_index.rst
@@ -0,0 +1,254 @@
+.. This page provides a custom index to the 'Tutorials' page, rather than the default sphinx-gallery
+.. generated page. The benefits of this are flexibility in design and inclusion of non-sphinx files in the index.
+..
+.. To update this index with a new documentation page
+.. 1) Copy the grid-item-card and associated ".. raw:: html" section.
+.. 2) change :link: to a link to your page. If this is an `.rst` file, point to the rst file directly.
+.. If it is a sphinx-gallery generated file, format the path as separated by underscore and prefix `sphx_glr`,
+.. pointing to the .py file. e.g. `tutorials/my/page.py` -> `sphx_glr_tutorials_my_page.py
+.. 3) Change :img-top: to point to the thumbnail image of your choosing. You can point to images generated
+.. in the sphinx gallery page if you wish.
+.. 4) In the `html` section, change the `default-title` to your pages title and `hover-content` to the subtitle.
+
+:orphan:
+
+TutorialsNew
+============
+
+Longer form tutorials about using SpikeInterface. Many of these are downloadable as notebooks or Python scripts so that you can "code along" with the tutorials.
+
+If you're new to SpikeInterface, we recommend trying out the :ref:`get_started/quickstart:Quickstart tutorial` first.
+
+Updating from legacy
+--------------------
+
+.. toctree::
+ :maxdepth: 1
+
+ tutorials/waveform_extractor_to_sorting_analyzer
+
+Core tutorials
+--------------
+
+These tutorials focus on the :py:mod:`spikeinterface.core` module.
+
+.. grid:: 1 2 2 3
+ :gutter: 2
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_1_recording_extractor.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_1_recording_extractor_thumb.png
+ :img-alt: Recording objects
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Recording objects
+ Manage loaded recordings in SpikeInterface
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_2_sorting_extractor.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_2_sorting_extractor_thumb.png
+ :img-alt: Sorting objects
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Sorting objects
+ Explore sorting extractor features
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_3_handle_probe_info.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_3_handle_probe_info_thumb.png
+ :img-alt: Handling probe information
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Handling probe information
+ Handle and visualize probe information
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_4_sorting_analyzer.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_4_sorting_analyzer_thumb.png
+ :img-alt: SortingAnalyzer
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ SortingAnalyzer
+ Analyze sorting results with ease
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_5_append_concatenate_segments.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_5_append_concatenate_segments_thumb.png
+ :img-alt: Append/Concatenate segments
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Append and/or concatenate segments
+ Combine segments efficiently
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_core_plot_6_handle_times.py
+ :img-top: /tutorials/core/images/thumb/sphx_glr_plot_6_handle_times_thumb.png
+ :img-alt: Handle time information
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Handle time information
+ Manage and analyze time information
+
+Extractors tutorials
+--------------------
+
+The :py:mod:`spikeinterface.extractors` module is designed to load and save recorded and sorted data, and to handle probe information.
+
+.. grid:: 1 2 2 3
+ :gutter: 2
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_extractors_plot_1_read_various_formats.py
+ :img-top: /tutorials/extractors/images/thumb/sphx_glr_plot_1_read_various_formats_thumb.png
+ :img-alt: Read various formats
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Read various formats
+ Read different recording formats efficiently
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_extractors_plot_2_working_with_unscaled_traces.py
+ :img-top: /tutorials/extractors/images/thumb/sphx_glr_plot_2_working_with_unscaled_traces_thumb.png
+ :img-alt: Unscaled traces
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Working with unscaled traces
+ Learn about managing unscaled traces
+
+Quality metrics tutorial
+------------------------
+
+The :code:`spikeinterface.qualitymetrics` module allows users to compute various quality metrics to assess the goodness of a spike sorting output.
+
+.. grid:: 1 2 2 3
+ :gutter: 2
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_qualitymetrics_plot_3_quality_mertics.py
+ :img-top: /tutorials/qualitymetrics/images/thumb/sphx_glr_plot_3_quality_mertics_thumb.png
+ :img-alt: Quality Metrics
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Quality Metrics
+ Evaluate sorting quality using metrics
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_qualitymetrics_plot_4_curation.py
+ :img-top: /tutorials/qualitymetrics/images/thumb/sphx_glr_plot_4_curation_thumb.png
+ :img-alt: Curation Tutorial
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Curation Tutorial
+ Learn how to curate spike sorting data
+
+Comparison tutorial
+-------------------
+
+The :code:`spikeinterface.comparison` module allows you to compare sorter outputs or benchmark against ground truth.
+
+.. grid:: 1 2 2 3
+ :gutter: 2
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_comparison_plot_5_comparison_sorter_weaknesses.py
+ :img-top: /tutorials/comparison/images/thumb/sphx_glr_plot_5_comparison_sorter_weaknesses_thumb.png
+ :img-alt: Sorter Comparison
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Sorter Comparison
+ Compare sorter outputs and assess weaknesses
+
+Widgets tutorials
+-----------------
+
+The :code:`widgets` module contains several plotting routines (widgets) for visualizing recordings, sorting data, probe layout, and more.
+
+.. grid:: 1 2 2 3
+ :gutter: 2
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_widgets_plot_1_rec_gallery.py
+ :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_1_rec_gallery_thumb.png
+ :img-alt: Recording Widgets
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ RecordingExtractor Widgets
+ Visualize recordings with widgets
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_widgets_plot_2_sort_gallery.py
+ :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_2_sort_gallery_thumb.png
+ :img-alt: Sorting Widgets
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ SortingExtractor Widgets
+ Explore sorting data using widgets
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_widgets_plot_3_waveforms_gallery.py
+ :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_3_waveforms_gallery_thumb.png
+ :img-alt: Waveforms Widgets
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Waveforms Widgets
+ Display waveforms using SpikeInterface
+
+ .. grid-item-card::
+ :link-type: ref
+ :link: sphx_glr_tutorials_widgets_plot_4_peaks_gallery.py
+ :img-top: /tutorials/widgets/images/thumb/sphx_glr_plot_4_peaks_gallery_thumb.png
+ :img-alt: Peaks Widgets
+ :class-card: my-custom-card
+
+ .. raw:: html
+
+ Peaks Widgets
+ Visualize detected peaks
+
+Download All Examples
+---------------------
+
+- :download:`Download all examples in Python source code `
+- :download:`Download all examples in Jupyter notebooks `