diff --git a/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx b/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
index 59f3a402..dba88ed5 100644
--- a/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
+++ b/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
@@ -29,7 +29,15 @@ function getIdFrom(children: ReactNode): string {
     ? children.map(getTextContent).join('')
     : getTextContent(children)
 
-  return textContent.toLowerCase().replace(/[\s\W_]+/g, '-')
+    return textContent
+    .normalize('NFKD') // separate accented characters into their base form and diacritical marks
+    .replace(/[\u0300-\u036f]/g, '') // remove all the accents
+    .trim()
+    .toLowerCase()
+    .replace(/\./g, '-') // some titles (configuration) contain keypath, so replace dots with hyphens
+    .replace(/[^a-z0-9 -]/g, '') // remove non-alphanumeric characters
+    .replace(/\s+/g, '-') // replace spaces with hyphens
+    .replace(/-+/g, '-') // remove consecutive hyphens
 }
 
 export const h = (order: 1 | 2 | 3 | 4 | 5 | 6): ElementType<TitleProps> => {