diff --git a/apps/documentation/src/components/sidebar/SidebarLink.tsx b/apps/documentation/src/components/sidebar/SidebarLink.tsx
deleted file mode 100644
index 5271e0b0..00000000
--- a/apps/documentation/src/components/sidebar/SidebarLink.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NavLink, type NavLinkProps } from '@mantine/core'
-import type { CSSProperties, ReactNode } from 'react'
-import { Link, useRouter } from 'tuono'
-
-interface SidebarLinkProps {
-  label: string
-  href: string
-  onClick?: () => void
-  children?: ReactNode
-}
-
-const styles: CSSProperties = {
-  borderRadius: 8,
-  marginTop: '0.25rem',
-  lineHeight: '1.25rem',
-  fontWeight: 'bold',
-}
-
-export default function SidebarLink(
-  props: SidebarLinkProps & NavLinkProps,
-): JSX.Element {
-  const { pathname } = useRouter()
-
-  return (
-    <NavLink
-      component={props.href.startsWith('#') ? 'button' : Link}
-      style={
-        pathname === props.href
-          ? {
-              color: 'var(--mantine-color-violet-4)',
-              ...styles,
-            }
-          : styles
-      }
-      {...props}
-    />
-  )
-}
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.module.css b/apps/documentation/src/components/sidebar/sidebar-link.module.css
new file mode 100644
index 00000000..9bd68cae
--- /dev/null
+++ b/apps/documentation/src/components/sidebar/sidebar-link.module.css
@@ -0,0 +1,6 @@
+.link {
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1.25rem;
+  font-weight: bold;
+}
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx
new file mode 100644
index 00000000..facab497
--- /dev/null
+++ b/apps/documentation/src/components/sidebar/sidebar-link.tsx
@@ -0,0 +1,45 @@
+import { NavLink, type NavLinkProps } from '@mantine/core'
+import { useState, type ReactNode } from 'react'
+import { Link, useRouter } from 'tuono'
+import { IconChevronRight } from '@tabler/icons-react'
+
+import styles from './sidebar-link.module.css'
+
+interface SidebarLinkProps {
+  label: string
+  href: string
+  onClick?: () => void
+  children?: ReactNode
+}
+
+export default function SidebarLink(
+  props: SidebarLinkProps & NavLinkProps,
+): JSX.Element {
+  const { pathname } = useRouter()
+  const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
+
+  return (
+    <NavLink
+      component={props.href.startsWith('#') ? 'button' : Link}
+      active={pathname === props.href}
+      className={styles.link}
+      rightSection={
+        props.children && (
+          <IconChevronRight
+            size="1.2rem"
+            stroke={1.5}
+            className="mantine-rotate-rtl"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsOpen((state) => !state)
+            }}
+          />
+        )
+      }
+      opened={isOpen}
+      autoContrast
+      {...props}
+    />
+  )
+}
diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
index 3ddb4c25..6527de0d 100644
--- a/apps/documentation/src/components/sidebar/sidebar.tsx
+++ b/apps/documentation/src/components/sidebar/sidebar.tsx
@@ -1,5 +1,5 @@
 import { AppShell } from '@mantine/core'
-import SidebarLink from './SidebarLink'
+import SidebarLink from './sidebar-link'
 
 export default function Sidebar({ close }: { close: () => void }): JSX.Element {
   return (
@@ -16,17 +16,18 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
         label="Installation"
         onClick={close}
       />
-      <SidebarLink label="Routing" href="#required-for-focus" defaultOpened>
+      <SidebarLink label="Routing" href="/documentation/routing" defaultOpened>
         <SidebarLink
           href="/documentation/routing/intro"
-          label="FS routing"
+          label="Project structure"
           onClick={close}
         />
       </SidebarLink>
       <SidebarLink
-        label="✨ Contributing"
+        label="Contributing"
         href="/documentation/contributing"
         onClick={close}
+        leftSection="✨"
       />
     </AppShell.Navbar>
   )
diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx
new file mode 100644
index 00000000..634a99b7
--- /dev/null
+++ b/apps/documentation/src/routes/documentation/routing/index.mdx
@@ -0,0 +1,7 @@
+import { Head } from 'tuono'
+
+<Head>
+  <title>Tuono - Routing</title>
+</Head>
+
+# Routing index
diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx
index e611e7a2..e230165b 100644
--- a/apps/documentation/src/routes/documentation/routing/intro.mdx
+++ b/apps/documentation/src/routes/documentation/routing/intro.mdx
@@ -4,6 +4,6 @@ import { Head } from 'tuono'
   <title>Tuono - Routing</title>
 </Head>
 
-# Routing
+# Project structure
 
 Todo