diff --git a/app/components/common/Iframe.tsx b/app/components/common/Iframe.tsx
index 7a6de69..4682821 100644
--- a/app/components/common/Iframe.tsx
+++ b/app/components/common/Iframe.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 type IframeProps = {
diff --git a/app/components/common/Image.tsx b/app/components/common/Image.tsx
index bb8a7a3..01c424b 100644
--- a/app/components/common/Image.tsx
+++ b/app/components/common/Image.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 export function Image(props: { src: string; alt: string } & React.ComponentPropsWithoutRef<"img">) {
   return <img {...props} src={props.src} alt={props.alt} loading="lazy" />;
 }
diff --git a/app/components/common/Link.tsx b/app/components/common/Link.tsx
index a9c00ea..0221c40 100644
--- a/app/components/common/Link.tsx
+++ b/app/components/common/Link.tsx
@@ -1,8 +1,9 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { prefetch } from "vike/client/router";
+import React from "react";
 import clsx from "clsx";
 
-export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; className?: string }) {
   const { urlPathname } = usePageContext();
   const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
   const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto"));
diff --git a/app/components/common/Mermaid.tsx b/app/components/common/Mermaid.tsx
deleted file mode 100644
index ccd2021..0000000
--- a/app/components/common/Mermaid.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import MermaidRenderer from "react-mermaid2";
-
-type MermaidProps = {
-  path: string;
-};
-
-export function Mermaid(props: MermaidProps) {
-  return (
-    <MermaidRenderer
-      chart={`
-    sequenceDiagram
-    autonumber
-
-    box rgba(139,92,246,.1) Navigateur
-    actor Utilisateur
-    end
-
-    box rgba(139,92,246,.1) Serveur
-    participant Routeur
-    participant Contrôleur
-    participant Modèle
-    participant Vue
-    end
-
-    participant Base de données
-
-    Utilisateur->>Routeur: Je veux voir la page d'accueil
-    Routeur->>Contrôleur: Appelle la méthode \`home\`
-    alt Si des données sont nécessaires
-        Contrôleur->>Modèle: Demande les données
-        Modèle->>Base de données: Récupère les données
-        Base de données-->>Modèle: Retourne les données
-        Modèle-->>Contrôleur: Retourne les données
-    end
-    Contrôleur->>Vue: Demande le HTML
-    Vue-->>Contrôleur: Retourne le HTML généré
-    Contrôleur->>Utilisateur: Retourne le HTML généré
-  `}
-    />
-  );
-}
diff --git a/app/components/md/Tabs.tsx b/app/components/md/Tabs.tsx
index 84a23f6..4eed3b1 100644
--- a/app/components/md/Tabs.tsx
+++ b/app/components/md/Tabs.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import { Button } from "@syntax/Button";
 import clsx from "clsx";
 
diff --git a/app/components/syntax/Button.tsx b/app/components/syntax/Button.tsx
index fb0a7f2..6b5234d 100644
--- a/app/components/syntax/Button.tsx
+++ b/app/components/syntax/Button.tsx
@@ -1,4 +1,5 @@
 import { Link } from "@/components/common/Link";
+import React from "react";
 import clsx from "clsx";
 
 const variantStyles = {
diff --git a/app/components/syntax/CSRSnippet.tsx b/app/components/syntax/CSRSnippet.tsx
index bd23808..2361fe8 100644
--- a/app/components/syntax/CSRSnippet.tsx
+++ b/app/components/syntax/CSRSnippet.tsx
@@ -1,8 +1,8 @@
 import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { Highlight } from "prism-react-renderer";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
 import Prism from "prismjs";
@@ -40,7 +40,7 @@ export default function CSRSnippet({
                 {label}
               </div>
             )}
-            <pre className={clsx(className, { "pt-11": !!label })} style={style}>
+            <pre className={clsx(className, { "pt-11": label })} style={style}>
               <code>
                 {tokens.map((line, lineIndex) => (
                   <Fragment key={lineIndex}>
@@ -69,7 +69,7 @@ export default function CSRSnippet({
       <Button
         className={clsx(
           "absolute right-2 w-8 h-8 aspect-square opacity-0 group-hover:opacity-50 hover:opacity-100 transition-opacity",
-          !!label ? "top-10" : "top-2",
+          label ? "top-10" : "top-2",
         )}
         size="sm"
         variant="secondary"
diff --git a/app/components/syntax/Callout.tsx b/app/components/syntax/Callout.tsx
index e933547..d3b8a69 100644
--- a/app/components/syntax/Callout.tsx
+++ b/app/components/syntax/Callout.tsx
@@ -1,4 +1,5 @@
 import { Icon } from "@syntax/Icon";
+import React from "react";
 import clsx from "clsx";
 
 const styles = {
@@ -36,10 +37,12 @@ export function Callout({
   type?: keyof typeof styles;
   collapsible?: boolean;
 }) {
-  let IconComponent = icons[type];
+  const IconComponent = icons[type];
 
   return (
-    <div className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container)}>
+    <div
+      className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container, { "cursor-pointer": collapsible })}
+    >
       <div className="flex items-center gap-6">
         <IconComponent className="h-8 w-8 flex-none" />
         <p className={clsx("!m-0 font-display text-xl text-balance", styles[type].title)}>{title}</p>
diff --git a/app/components/syntax/DocsHeader.tsx b/app/components/syntax/DocsHeader.tsx
index 7ab57ea..bab4ce6 100644
--- a/app/components/syntax/DocsHeader.tsx
+++ b/app/components/syntax/DocsHeader.tsx
@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 
 type DocsHeaderProps = {
   title?: string;
diff --git a/app/components/syntax/DocsLayout.tsx b/app/components/syntax/DocsLayout.tsx
index 0e2f85a..7cb4bbb 100644
--- a/app/components/syntax/DocsLayout.tsx
+++ b/app/components/syntax/DocsLayout.tsx
@@ -5,6 +5,7 @@ import { PrevNextLinks } from "@syntax/PrevNextLinks";
 import { collectSections } from "@/lib/sections";
 import { DocsHeader } from "@syntax/DocsHeader";
 import { Prose } from "@syntax/Prose";
+import React from "react";
 
 export function DocsLayout({
   children,
@@ -17,7 +18,7 @@ export function DocsLayout({
   estimatedReadingTime?: string;
   nodes: Array<Node>;
 }) {
-  let tableOfContents = collectSections(nodes);
+  const tableOfContents = collectSections(nodes);
 
   return (
     <>
diff --git a/app/components/syntax/Fence.tsx b/app/components/syntax/Fence.tsx
index 6a138f6..6af6507 100644
--- a/app/components/syntax/Fence.tsx
+++ b/app/components/syntax/Fence.tsx
@@ -1,5 +1,6 @@
 import { clientOnly } from "vike-react/clientOnly";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 
diff --git a/app/components/syntax/Hero.tsx b/app/components/syntax/Hero.tsx
index d30aa1f..39ce8c2 100644
--- a/app/components/syntax/Hero.tsx
+++ b/app/components/syntax/Hero.tsx
@@ -3,8 +3,8 @@ import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { Image } from "@/components/common/Image";
 import { Highlight } from "prism-react-renderer";
+import React, { Fragment } from "react";
 import { Button } from "@syntax/Button";
-import { Fragment } from "react";
 import clsx from "clsx";
 
 const codeLanguage = "javascript";
diff --git a/app/components/syntax/HeroBackground.tsx b/app/components/syntax/HeroBackground.tsx
index 82a7688..5385d69 100644
--- a/app/components/syntax/HeroBackground.tsx
+++ b/app/components/syntax/HeroBackground.tsx
@@ -1,4 +1,4 @@
-import { useId } from "react";
+import React, { useId } from "react";
 
 export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) {
   const id = useId();
diff --git a/app/components/syntax/Icon.tsx b/app/components/syntax/Icon.tsx
index e5c3fde..fd916da 100644
--- a/app/components/syntax/Icon.tsx
+++ b/app/components/syntax/Icon.tsx
@@ -5,7 +5,7 @@ import { PluginsIcon } from "@syntax/icons/PluginsIcon";
 import { PresetsIcon } from "@syntax/icons/PresetsIcon";
 import { ThemingIcon } from "@syntax/icons/ThemingIcon";
 import { WarningIcon } from "@syntax/icons/WarningIcon";
-import { useId } from "react";
+import React, { useId } from "react";
 import clsx from "clsx";
 
 const icons = {
@@ -32,8 +32,8 @@ export function Icon({
   color?: keyof typeof iconStyles;
   icon: keyof typeof icons;
 } & Omit<React.ComponentPropsWithoutRef<"svg">, "color">) {
-  let id = useId();
-  let IconComponent = icons[icon];
+  const id = useId();
+  const IconComponent = icons[icon];
 
   return (
     <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" className={clsx(className, iconStyles[color])} {...props}>
diff --git a/app/components/syntax/Logo.tsx b/app/components/syntax/Logo.tsx
index c7e787e..174c2d3 100644
--- a/app/components/syntax/Logo.tsx
+++ b/app/components/syntax/Logo.tsx
@@ -1,11 +1,6 @@
-function LogomarkPaths() {
-  // return (
-  //   <g fill="none" stroke="#38BDF8" strokeLinejoin="round" strokeWidth={3}>
-  //     <path d="M10.308 5L18 17.5 10.308 30 2.615 17.5 10.308 5z" />
-  //     <path d="M18 17.5L10.308 5h15.144l7.933 12.5M18 17.5h15.385L25.452 30H10.308L18 17.5z" />
-  //   </g>
-  // );
+import React from "react";
 
+function LogomarkPaths() {
   return (
     <>
       <defs>
@@ -33,25 +28,6 @@ function LogomarkPaths() {
   );
 }
 
-export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 231 38" {...props}>
-      <LogomarkPaths />
-      <text
-        className="hidden lg:block fill-zinc-900 dark:fill-zinc-100"
-        fontFamily="Inter Variable, sans-serif"
-        fontSize={24}
-        fontWeight="bold"
-        letterSpacing="-.02em"
-        x={74}
-        y={26}
-      >
-        Memento Dev
-      </text>
-    </svg>
-  );
-}
-
 export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 58 38" {...props}>
diff --git a/app/components/syntax/MobileNavigation.tsx b/app/components/syntax/MobileNavigation.tsx
index e120858..dc8734d 100644
--- a/app/components/syntax/MobileNavigation.tsx
+++ b/app/components/syntax/MobileNavigation.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useCallback, useEffect, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useState } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { Dialog, DialogPanel } from "@headlessui/react";
 import { Navigation } from "@syntax/Navigation";
@@ -32,11 +32,12 @@ function CloseOnNavigation({ close }: { close: () => void }) {
 }
 
 export function MobileNavigation() {
-  let [isOpen, setIsOpen] = useState(false);
-  let close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const [isOpen, setIsOpen] = useState(false);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
   function onLinkClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    let link = event.currentTarget;
+    const link = event.currentTarget;
+
     if (
       link.pathname + link.search + link.hash ===
       window.location.pathname + window.location.search + window.location.hash
diff --git a/app/components/syntax/Navigation.tsx b/app/components/syntax/Navigation.tsx
index 1ae09f1..0793c25 100644
--- a/app/components/syntax/Navigation.tsx
+++ b/app/components/syntax/Navigation.tsx
@@ -1,8 +1,8 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 import { usePageContext } from "vike-react/usePageContext";
+import React, { useEffect, useState } from "react";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
-import { useEffect, useState } from "react";
 import clsx from "clsx";
 
 type NavigationItemProps = {
diff --git a/app/components/syntax/PrevNextLinks.tsx b/app/components/syntax/PrevNextLinks.tsx
index df886aa..5cabe56 100644
--- a/app/components/syntax/PrevNextLinks.tsx
+++ b/app/components/syntax/PrevNextLinks.tsx
@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 import clsx from "clsx";
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
diff --git a/app/components/syntax/Prose.tsx b/app/components/syntax/Prose.tsx
index 01bd70b..a071e13 100644
--- a/app/components/syntax/Prose.tsx
+++ b/app/components/syntax/Prose.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 export function Prose<T extends React.ElementType = "div">({
@@ -7,7 +8,7 @@ export function Prose<T extends React.ElementType = "div">({
 }: React.ComponentPropsWithoutRef<T> & {
   as?: T;
 }) {
-  let Component = as ?? "div";
+  const Component = as ?? "div";
 
   return (
     <Component
diff --git a/app/components/syntax/QuickLinks.tsx b/app/components/syntax/QuickLinks.tsx
index ac0b39f..4d6d551 100644
--- a/app/components/syntax/QuickLinks.tsx
+++ b/app/components/syntax/QuickLinks.tsx
@@ -1,5 +1,6 @@
 import { Link } from "@/components/common/Link";
 import { Icon } from "@syntax/Icon";
+import React from "react";
 
 export function QuickLinks({ children }: { children: React.ReactNode }) {
   return <div className="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">{children}</div>;
diff --git a/app/components/syntax/SSRSnippet.tsx b/app/components/syntax/SSRSnippet.tsx
index c623496..876e295 100644
--- a/app/components/syntax/SSRSnippet.tsx
+++ b/app/components/syntax/SSRSnippet.tsx
@@ -1,7 +1,7 @@
 import { Highlight, Prism } from "prism-react-renderer";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import clsx from "clsx";
 
 export function SSRSnippet({
diff --git a/app/components/syntax/Search.tsx b/app/components/syntax/Search.tsx
index 1bfde89..80c3d5c 100644
--- a/app/components/syntax/Search.tsx
+++ b/app/components/syntax/Search.tsx
@@ -1,4 +1,4 @@
-import { useId, useState, useEffect, createContext, useContext, Fragment } from "react";
+import React, { useId, useState, useEffect, createContext, useContext, Fragment } from "react";
 import { SearchResult } from "@/services/FlexSearchService";
 import { Dialog, DialogPanel } from "@headlessui/react";
 import { useDebounce } from "@/hooks/useDebounce";
diff --git a/app/components/syntax/Snippet.tsx b/app/components/syntax/Snippet.tsx
index 76b58df..c9050de 100644
--- a/app/components/syntax/Snippet.tsx
+++ b/app/components/syntax/Snippet.tsx
@@ -3,6 +3,7 @@ import type { Data } from "@/pages/docs/+data";
 import { clientOnly } from "vike-react/clientOnly";
 import { useData } from "vike-react/useData";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 
diff --git a/app/components/syntax/TableOfContents.tsx b/app/components/syntax/TableOfContents.tsx
index 4c94268..ff0fa6a 100644
--- a/app/components/syntax/TableOfContents.tsx
+++ b/app/components/syntax/TableOfContents.tsx
@@ -1,25 +1,23 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Link } from "@/components/common/Link";
 import clsx from "clsx";
 
 import { type Section, type Subsection } from "@/lib/sections";
 
 export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Section> }) {
-  let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
+  const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
 
-  let getHeadings = useCallback((tableOfContents: Array<Section>) => {
+  const getHeadings = useCallback((tableOfContents: Array<Section>) => {
     return tableOfContents
       .flatMap((node) => [node.id, ...node.children.map((child) => child.id)])
       .map((id) => {
-        let el = document.getElementById(id);
+        const el = document.getElementById(id);
         if (!el) return null;
 
-        let style = window.getComputedStyle(el);
-        let scrollMt = parseFloat(style.scrollMarginTop);
+        const style = window.getComputedStyle(el);
+        const scrollMt = parseFloat(style.scrollMarginTop);
 
-        let top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
+        const top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
         return { id, top };
       })
       .filter((x): x is { id: string; top: number } => x !== null);
@@ -35,11 +33,8 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Se
       let current = headings[0]?.id;
 
       for (const heading of headings) {
-        if (top >= heading.top - 10) {
-          current = heading.id;
-        } else {
-          break;
-        }
+        if (top < heading.top - 10) break;
+        current = heading.id;
       }
       setCurrentSection(current);
     }
@@ -51,12 +46,9 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Se
   }, [getHeadings, tableOfContents]);
 
   function isActive(section: Section | Subsection) {
-    if (section.id === currentSection) {
-      return true;
-    }
-    if (!section.children) {
-      return false;
-    }
+    if (section.id === currentSection) return true;
+    if (!section.children) return false;
+
     return section.children.findIndex(isActive) > -1;
   }
 
diff --git a/app/components/syntax/ThemeSelector.tsx b/app/components/syntax/ThemeSelector.tsx
index a100e94..e067857 100644
--- a/app/components/syntax/ThemeSelector.tsx
+++ b/app/components/syntax/ThemeSelector.tsx
@@ -1,5 +1,5 @@
 import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTheme } from "@/hooks/useTheme";
 import clsx from "clsx";
 
@@ -33,8 +33,8 @@ function DarkIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 }
 
 export function ThemeSelector(props: React.ComponentPropsWithoutRef<typeof Listbox<"div">>) {
-  let [mounted, setMounted] = useState(false);
-  let { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     setMounted(true);
diff --git a/app/components/syntax/icons/InstallationIcon.tsx b/app/components/syntax/icons/InstallationIcon.tsx
index 20c1bc7..f9ed190 100644
--- a/app/components/syntax/icons/InstallationIcon.tsx
+++ b/app/components/syntax/icons/InstallationIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function InstallationIcon({
   id,
diff --git a/app/components/syntax/icons/LightbulbIcon.tsx b/app/components/syntax/icons/LightbulbIcon.tsx
index f0e2439..137f02e 100644
--- a/app/components/syntax/icons/LightbulbIcon.tsx
+++ b/app/components/syntax/icons/LightbulbIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/components/syntax/icons/PluginsIcon.tsx b/app/components/syntax/icons/PluginsIcon.tsx
index 4797471..5dd5de1 100644
--- a/app/components/syntax/icons/PluginsIcon.tsx
+++ b/app/components/syntax/icons/PluginsIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/components/syntax/icons/PresetsIcon.tsx b/app/components/syntax/icons/PresetsIcon.tsx
index d6e29b2..4342463 100644
--- a/app/components/syntax/icons/PresetsIcon.tsx
+++ b/app/components/syntax/icons/PresetsIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/components/syntax/icons/QuestionIcon.tsx b/app/components/syntax/icons/QuestionIcon.tsx
index 2f89f4c..002f853 100644
--- a/app/components/syntax/icons/QuestionIcon.tsx
+++ b/app/components/syntax/icons/QuestionIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/components/syntax/icons/ThemingIcon.tsx b/app/components/syntax/icons/ThemingIcon.tsx
index 15a6960..e68d30c 100644
--- a/app/components/syntax/icons/ThemingIcon.tsx
+++ b/app/components/syntax/icons/ThemingIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/components/syntax/icons/WarningIcon.tsx b/app/components/syntax/icons/WarningIcon.tsx
index 091536f..24e12df 100644
--- a/app/components/syntax/icons/WarningIcon.tsx
+++ b/app/components/syntax/icons/WarningIcon.tsx
@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (
diff --git a/app/eslint.config.js b/app/eslint.config.js
index 1ba6c0c..23320c6 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -1,10 +1,10 @@
 // @ts-nocheck
 
-import eslint from "@eslint/js";
-import prettier from "eslint-plugin-prettier/recommended";
 import react from "eslint-plugin-react/configs/recommended.js";
-import globals from "globals";
+import prettier from "eslint-plugin-prettier/recommended";
 import tseslint from "typescript-eslint";
+import eslint from "@eslint/js";
+import globals from "globals";
 
 export default tseslint.config(
   {
@@ -33,14 +33,10 @@ export default tseslint.config(
   },
   {
     rules: {
-      "@typescript-eslint/no-unused-vars": [
-        1,
-        {
-          argsIgnorePattern: "^_",
-        },
-      ],
+      "@typescript-eslint/no-unused-vars": [1, { argsIgnorePattern: "^_" }],
       "@typescript-eslint/no-namespace": 0,
-      "react/react-in-jsx-scope": false,
+      "react/react-in-jsx-scope": "warn",
+      "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
     },
   },
 
diff --git a/app/hooks/useAutoComplete.ts b/app/hooks/useAutoComplete.ts
deleted file mode 100644
index 41dafa9..0000000
--- a/app/hooks/useAutoComplete.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { SearchResult } from "@/lib/search";
-
-import { useDebounce } from "./useDebounce";
-import { useState, useEffect, use } from "react";
-
-export function useAutoComplete(onSearch: (query: string) => Promise<SearchResult[]>) {
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpened, setIsOpened] = useState(false);
-  const [query, setQuery] = useDebounce();
-
-  useEffect(() => {
-    // Attach the event listener to the window
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setIsOpened(false);
-      } else if (event.key === "K" && (event.ctrlKey || event.metaKey)) {
-        event.preventDefault();
-        setIsOpened(true);
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
-  return {
-    results,
-    isLoading,
-    isOpened,
-    query,
-    setQuery,
-  };
-}
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index 63a98f7..b7c9760 100644
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -2,19 +2,21 @@ import { MobileNavigation } from "@syntax/MobileNavigation";
 import { usePageContext } from "vike-react/usePageContext";
 import { ThemeProvider } from "@/providers/ThemeProvider";
 import { ThemeSelector } from "@syntax/ThemeSelector";
+import { clientOnly } from "vike-react/clientOnly";
+import React, { useEffect, useState } from "react";
+import { ToastContainer } from "react-toastify";
 import { Navigation } from "@syntax/Navigation";
 import { Link } from "@/components/common/Link";
-import { useEffect, useState } from "react";
-import { Search } from "@syntax/Search";
 import { Hero } from "@syntax/Hero";
-import { Logo, LogoWithText } from "@syntax/Logo";
+import { Logo } from "@syntax/Logo";
 import clsx from "clsx";
 
 import "./style.css";
 import "./tailwind.css";
 import "./prism.css";
 import "unfonts.css";
-import { ToastContainer } from "react-toastify";
+
+const Search = clientOnly(() => import("@syntax/Search").then((module) => module.Search));
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
@@ -25,7 +27,7 @@ function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 }
 
 function Header() {
-  let [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     function onScroll() {
@@ -59,7 +61,7 @@ function Header() {
       </div>
 
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-        <Search />
+        <Search fallback={<div className="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />} />
       </div>
 
       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
diff --git a/app/lib/navigation.ts b/app/lib/navigation.ts
index b3e4200..c584b75 100644
--- a/app/lib/navigation.ts
+++ b/app/lib/navigation.ts
@@ -119,16 +119,17 @@ export const navigation: NavigationSection[] = [
   },
 ];
 
+export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
+  return link.subitems.some((subitem) => subitem.href === subitemHref);
+}
+
 export function findNavigationLink(namespace: string, href: string): NavigationLink | undefined {
   const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
 
   const foundLink = navigation
     .flatMap((section) => section.links)
     .find((link) => {
-      link.href === currentUrl ||
-        link.subitems.some((subitem) => {
-          subitem.href === currentUrl;
-        });
+      return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
     });
 
   return foundLink;
diff --git a/app/lib/search.ts b/app/lib/search.ts
index d8d79ff..d56e1e9 100644
--- a/app/lib/search.ts
+++ b/app/lib/search.ts
@@ -5,6 +5,8 @@ import glob from "fast-glob";
 import * as path from "path";
 import * as fs from "fs";
 
+type SearchOptionValue = string | number | boolean | null | undefined | object | unknown;
+
 const slugify = slugifyWithCounter();
 
 interface Node {
@@ -32,28 +34,30 @@ export interface SearchResult {
 
 function toString(node: Node): string {
   let str = node.type === "text" && typeof node.attributes?.content === "string" ? node.attributes.content : "";
+
   if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       str += toString(child);
     }
   }
+
   return str;
 }
 
 function extractSections(node: Node, sections: Section[], isRoot: boolean = true): void {
-  if (isRoot) {
-    slugify.reset();
-  }
+  if (isRoot) slugify.reset();
+
   if (node.type === "heading" || node.type === "paragraph") {
-    let content = toString(node).trim();
-    if (node.type === "heading" && node.attributes?.level! <= 2) {
-      let hash = node.attributes?.id ?? slugify(content);
+    const content = toString(node).trim();
+
+    if (node.attributes?.level && node.type === "heading" && node.attributes.level <= 2) {
+      const hash = node.attributes?.id ?? slugify(content);
       sections.push({ content, hash, subsections: [] });
     } else {
       sections[sections.length - 1].subsections.push(content);
     }
   } else if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       extractSections(child, sections, false);
     }
   }
@@ -111,18 +115,18 @@ export function buildSearchIndex(pagesDir: string): FlexSearch.Document<SearchRe
 export function search(
   sectionIndex: FlexSearch.Document<SearchResult>,
   query: string,
-  options: Record<string, any> = {},
+  options: Record<string, SearchOptionValue> = {},
 ): SearchResult[] {
   const results = sectionIndex.search(query, {
     ...options,
     enrich: true,
   });
 
-  if (results.length === 0) {
-    return [];
-  }
+  if (results.length === 0) return [];
 
-  return results[0].result.map((item: any) => ({
+  const searchResults = results[0].result as unknown as { id: string; doc: { title: string; pageTitle: string } }[];
+
+  return searchResults.map((item) => ({
     url: item.id,
     title: item.doc.title,
     pageTitle: item.doc.pageTitle,
diff --git a/app/lib/sections.ts b/app/lib/sections.ts
index 76d2a7a..2006737 100644
--- a/app/lib/sections.ts
+++ b/app/lib/sections.ts
@@ -41,7 +41,8 @@ function isH3Node(node: Node): node is H3Node {
 
 function getNodeText(node: Node) {
   let text = "";
-  for (let child of node.children ?? []) {
+
+  for (const child of node.children ?? []) {
     if (child.type === "text") {
       text += child.attributes.content;
     }
diff --git a/app/markdoc/Tag.ts b/app/markdoc/Tag.ts
index a02caaf..e50b59d 100644
--- a/app/markdoc/Tag.ts
+++ b/app/markdoc/Tag.ts
@@ -1,21 +1,17 @@
-// Workaround about undefined import only in production build
-
 import type { RenderableTreeNode } from "@markdoc/markdoc";
+import type { ReactNode } from "react";
 
-export class Tag<N extends string = string, A extends Record<string, any> = Record<string, any>> {
-  readonly $$mdtype = "Tag" as const;
+import { Tag as MarkdocTag } from "@markdoc/markdoc";
 
-  static isTag = (tag: any): tag is Tag => {
-    return !!(tag?.$$mdtype === "Tag");
-  };
+type TagAttributesValue = string | number | boolean | null | undefined | object | unknown;
 
-  name: N;
-  attributes: A;
-  children: RenderableTreeNode[];
-
-  constructor(name = "div" as N, attributes = {} as A, children: RenderableTreeNode[] = []) {
-    this.name = name;
-    this.attributes = attributes;
-    this.children = children;
+export class Tag extends MarkdocTag {
+  constructor(
+    name: string | ReactNode,
+    attributes: Record<string, TagAttributesValue>,
+    children: RenderableTreeNode[],
+  ) {
+    // Workaround for TypeScript's type system
+    super(name as unknown as string, attributes, children);
   }
 }
diff --git a/app/markdoc/nodes.tsx b/app/markdoc/nodes.tsx
index 6287a2b..3c32b0f 100644
--- a/app/markdoc/nodes.tsx
+++ b/app/markdoc/nodes.tsx
@@ -1,15 +1,14 @@
 import type { Config, Node } from "@markdoc/markdoc";
 
 import { slugifyWithCounter } from "@sindresorhus/slugify";
+import { nodes as defaultNodes } from "@markdoc/markdoc";
 import { DocsLayout } from "@syntax/DocsLayout";
-import Markdoc from "@markdoc/markdoc";
-import { Fence } from "@syntax/Fence";
-import yaml from "js-yaml";
 import { Link } from "@/components/common/Link";
+import { Fence } from "@syntax/Fence";
+import { Tag } from "./Tag";
+import yaml from "js-yaml";
 
-const { nodes: defaultNodes, Tag } = Markdoc;
-
-let documentSlugifyMap = new Map();
+const documentSlugifyMap = new Map();
 
 const nodes = {
   document: {
@@ -19,7 +18,7 @@ const nodes = {
       documentSlugifyMap.set(config, slugifyWithCounter());
 
       return new Tag(
-        this.render,
+        this.render as unknown as string,
         {
           frontmatter: yaml.load(node.attributes.frontmatter),
           estimatedReadingTime: config?.variables?.estimatedReadingTime,
diff --git a/app/markdoc/tags.tsx b/app/markdoc/tags.tsx
index 8cd4757..9abbbb8 100644
--- a/app/markdoc/tags.tsx
+++ b/app/markdoc/tags.tsx
@@ -1,16 +1,9 @@
 import { QuickLink, QuickLinks } from "@syntax/QuickLinks";
 import { TabContent, Tabs } from "@/components/md/Tabs";
-// import { Fence2 } from "@/components/syntax/Fence2";
-import { Callout } from "@syntax/Callout";
-// import fs from "fs/promises";
-// import { Tag } from "./Tag";
-import React from "react";
 import { Snippet } from "@/components/syntax/Snippet";
 import { Iframe } from "@/components/common/Iframe";
-import { Mermaid } from "@/components/common/Mermaid";
-// import path from "path";
-
-// const __dirname = path.resolve();
+import { Callout } from "@syntax/Callout";
+import React from "react";
 
 const tags = {
   callout: {
@@ -43,10 +36,10 @@ const tags = {
       alt: { type: String },
       caption: { type: String },
     },
-    render: ({ src, alt = "", caption }: { src: string; alt: string; caption: string }) => (
+    render: (props: { src: string; alt: string; caption: string }) => (
       <figure>
-        <img src={src} alt={alt} loading="lazy" />
-        <figcaption>{caption}</figcaption>
+        <img src={props.src} alt={props.alt} loading="lazy" />
+        <figcaption>{props.caption}</figcaption>
       </figure>
     ),
   },
@@ -91,15 +84,9 @@ const tags = {
       },
     },
   },
-  mermaid: {
-    render: Mermaid,
-    attributes: {
-      path: { type: String },
-    },
-  },
   img: {
-    render: ({ src, alt = "", className = "" }: { src: string; alt: string; className: string }) => (
-      <img src={src} alt={alt} className={className} loading="lazy" />
+    render: (props: { src: string; alt: string; className: string }) => (
+      <img src={props.src} alt={props.alt} className={props.className} loading="lazy" />
     ),
     attributes: {
       src: { type: String },
diff --git a/app/pages/+Head.tsx b/app/pages/+Head.tsx
index 48371af..cb6c941 100644
--- a/app/pages/+Head.tsx
+++ b/app/pages/+Head.tsx
@@ -1,4 +1,5 @@
 import logoUrl from "@/assets/logo.svg";
+import React from "react";
 
 export default function HeadDefault() {
   return (
diff --git a/app/pages/_error/+Page.tsx b/app/pages/_error/+Page.tsx
index b8448b0..92d0fa7 100644
--- a/app/pages/_error/+Page.tsx
+++ b/app/pages/_error/+Page.tsx
@@ -1,8 +1,10 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
+import React from "react";
 
 export default function Page() {
   const { is404 } = usePageContext();
+
   if (is404) {
     return (
       <>
@@ -16,7 +18,7 @@ export default function Page() {
               Désolé, nous ne pouvons pas trouver la page que vous recherchez.
             </p>
             <Link href="/" className="mt-8 text-sm font-medium text-slate-900 dark:text-white">
-              Retour à l'accueil
+              Retour à l&apos;accueil
             </Link>
           </div>
         </div>
diff --git a/app/pages/index/+data.ts b/app/pages/index/+data.ts
index d96d7f3..1cc024d 100644
--- a/app/pages/index/+data.ts
+++ b/app/pages/index/+data.ts
@@ -9,7 +9,7 @@ import { render } from "vike/abort";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
-export async function data(pageContext: PageContext) {
+export async function data(_pageContext: PageContext) {
   const config = useConfig();
 
   const doc = await docsService.getDoc("docs", "index");
diff --git a/app/providers/ThemeProvider.tsx b/app/providers/ThemeProvider.tsx
index cabcac4..9d248f4 100644
--- a/app/providers/ThemeProvider.tsx
+++ b/app/providers/ThemeProvider.tsx
@@ -1,5 +1,5 @@
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 type ThemeProviderProps = {
   children: React.ReactNode;
diff --git a/app/services/SnippetsService.ts b/app/services/SnippetsService.ts
index a91393f..5d47b0d 100644
--- a/app/services/SnippetsService.ts
+++ b/app/services/SnippetsService.ts
@@ -1,5 +1,3 @@
-import path from "path";
-
 type SnippetsCache = Map<string, string>;
 
 class SnippetsService {