diff --git a/package-lock.json b/package-lock.json
index 2e838c8..8931d0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,33 +1,34 @@
 {
     "name": "bluelib",
-    "version": "1.1.1",
+    "version": "2.1.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "bluelib",
-            "version": "1.1.1",
+            "version": "2.1.1",
             "license": "AGPL-3.0-or-later",
             "dependencies": {
                 "@babel/preset-env": "^7.12.11",
                 "@babel/preset-react": "^7.12.10",
                 "@matejmazur/react-katex": "^3.1.3",
-                "@reach/router": "^1.3.4",
                 "classnames": "^2.2.6",
                 "color": "^3.1.3",
                 "katex": "^0.12.0",
                 "prop-types": "^15.7.2",
-                "react": "16.x",
+                "react": "^17.0.2",
                 "react-dom": "^17.0.1",
+                "react-router": "^5.2.0",
+                "react-router-dom": "^5.2.0",
                 "react-syntax-highlighter": "^15.4.3",
                 "strip-indent": "^3.0.0"
             },
             "devDependencies": {
                 "nwb": "0.25.x",
-                "react-styleguidist": "^11.1.5"
+                "react-styleguidist": "^11.1.6"
             },
             "peerDependencies": {
-                "react": "16.x"
+                "react": "^17.0.2"
             }
         },
         "node_modules/@babel/cli": {
@@ -1456,17 +1457,6 @@
             "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==",
             "dev": true
         },
-        "node_modules/@reach/router": {
-            "version": "1.3.4",
-            "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
-            "integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==",
-            "dependencies": {
-                "create-react-context": "0.3.0",
-                "invariant": "^2.2.3",
-                "prop-types": "^15.6.1",
-                "react-lifecycles-compat": "^3.0.4"
-            }
-        },
         "node_modules/@tippyjs/react": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz",
@@ -4042,15 +4032,6 @@
                 "sha.js": "^2.4.8"
             }
         },
-        "node_modules/create-react-context": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
-            "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
-            "dependencies": {
-                "gud": "^1.0.0",
-                "warning": "^4.0.3"
-            }
-        },
         "node_modules/cross-spawn": {
             "version": "7.0.2",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
@@ -6510,11 +6491,6 @@
                 "node": ">=4.x"
             }
         },
-        "node_modules/gud": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-            "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-        },
         "node_modules/gzip-size": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -6758,6 +6734,19 @@
                 "node": "*"
             }
         },
+        "node_modules/history": {
+            "version": "4.10.1",
+            "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+            "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+            "dependencies": {
+                "@babel/runtime": "^7.1.2",
+                "loose-envify": "^1.2.0",
+                "resolve-pathname": "^3.0.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0",
+                "value-equal": "^1.0.1"
+            }
+        },
         "node_modules/hmac-drbg": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6769,6 +6758,14 @@
                 "minimalistic-crypto-utils": "^1.0.1"
             }
         },
+        "node_modules/hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
         "node_modules/hpack.js": {
             "version": "2.1.6",
             "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -7298,6 +7295,7 @@
             "version": "2.2.4",
             "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
             "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.0.0"
             }
@@ -9143,6 +9141,19 @@
                 "node": ">=4"
             }
         },
+        "node_modules/mini-create-react-context": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+            "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.1",
+                "tiny-warning": "^1.0.3"
+            },
+            "peerDependencies": {
+                "prop-types": "^15.0.0",
+                "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+            }
+        },
         "node_modules/mini-css-extract-plugin": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -12211,14 +12222,13 @@
             }
         },
         "node_modules/react": {
-            "version": "16.14.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-            "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+            "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
             "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2"
+                "object-assign": "^4.1.1"
             },
             "engines": {
                 "node": ">=0.10.0"
@@ -12599,11 +12609,6 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
-        "node_modules/react-lifecycles-compat": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-        },
         "node_modules/react-refresh": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.2.tgz",
@@ -12613,6 +12618,56 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-router": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+            "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+            "dependencies": {
+                "@babel/runtime": "^7.1.2",
+                "history": "^4.9.0",
+                "hoist-non-react-statics": "^3.1.0",
+                "loose-envify": "^1.3.1",
+                "mini-create-react-context": "^0.4.0",
+                "path-to-regexp": "^1.7.0",
+                "prop-types": "^15.6.2",
+                "react-is": "^16.6.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=15"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+            "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+            "dependencies": {
+                "@babel/runtime": "^7.1.2",
+                "history": "^4.9.0",
+                "loose-envify": "^1.3.1",
+                "prop-types": "^15.6.2",
+                "react-router": "5.2.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=15"
+            }
+        },
+        "node_modules/react-router/node_modules/isarray": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+            "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "node_modules/react-router/node_modules/path-to-regexp": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+            "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+            "dependencies": {
+                "isarray": "0.0.1"
+            }
+        },
         "node_modules/react-simple-code-editor": {
             "version": "0.10.0",
             "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz",
@@ -12620,9 +12675,9 @@
             "dev": true
         },
         "node_modules/react-styleguidist": {
-            "version": "11.1.5",
-            "resolved": "https://registry.npmjs.org/react-styleguidist/-/react-styleguidist-11.1.5.tgz",
-            "integrity": "sha512-19svre3SvBfhiVWuZoKHUmiodW5IZcXSr1JgalGgWrOy0JXOQOR3d3iFH7WMKzUWqi2JK4CJ17LTGqpjCXQb5w==",
+            "version": "11.1.6",
+            "resolved": "https://registry.npmjs.org/react-styleguidist/-/react-styleguidist-11.1.6.tgz",
+            "integrity": "sha512-ZO4tS8/cPwpabz5S3kZ6hRFcvdgsJwWnus6MC23BiNXCpTvoiRlnF8C90gry63acgVqeaZZb35+P/MZ4AVRdUg==",
             "dev": true,
             "dependencies": {
                 "@tippyjs/react": "4.1.0",
@@ -12694,6 +12749,14 @@
             },
             "engines": {
                 "node": ">=10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/styleguidist"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
             }
         },
         "node_modules/react-styleguidist/node_modules/commander": {
@@ -13332,6 +13395,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/resolve-pathname": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+            "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+        },
         "node_modules/resolve-url": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14969,11 +15037,15 @@
             "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
             "optional": true
         },
+        "node_modules/tiny-invariant": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+            "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+        },
         "node_modules/tiny-warning": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
-            "dev": true
+            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
         },
         "node_modules/tippy.js": {
             "version": "6.2.7",
@@ -15586,6 +15658,11 @@
                 "uuid": "bin/uuid"
             }
         },
+        "node_modules/value-equal": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+            "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15661,14 +15738,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/warning": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-            "dependencies": {
-                "loose-envify": "^1.0.0"
-            }
-        },
         "node_modules/watchpack": {
             "version": "1.7.5",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -18161,17 +18230,6 @@
             "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==",
             "dev": true
         },
-        "@reach/router": {
-            "version": "1.3.4",
-            "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
-            "integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==",
-            "requires": {
-                "create-react-context": "0.3.0",
-                "invariant": "^2.2.3",
-                "prop-types": "^15.6.1",
-                "react-lifecycles-compat": "^3.0.4"
-            }
-        },
         "@tippyjs/react": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz",
@@ -20446,15 +20504,6 @@
                 "sha.js": "^2.4.8"
             }
         },
-        "create-react-context": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
-            "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
-            "requires": {
-                "gud": "^1.0.0",
-                "warning": "^4.0.3"
-            }
-        },
         "cross-spawn": {
             "version": "7.0.2",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
@@ -22546,11 +22595,6 @@
             "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
             "dev": true
         },
-        "gud": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-            "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-        },
         "gzip-size": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -22755,6 +22799,19 @@
             "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.5.0.tgz",
             "integrity": "sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw=="
         },
+        "history": {
+            "version": "4.10.1",
+            "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+            "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+            "requires": {
+                "@babel/runtime": "^7.1.2",
+                "loose-envify": "^1.2.0",
+                "resolve-pathname": "^3.0.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0",
+                "value-equal": "^1.0.1"
+            }
+        },
         "hmac-drbg": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -22766,6 +22823,14 @@
                 "minimalistic-crypto-utils": "^1.0.1"
             }
         },
+        "hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "requires": {
+                "react-is": "^16.7.0"
+            }
+        },
         "hpack.js": {
             "version": "2.1.6",
             "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -23212,6 +23277,7 @@
             "version": "2.2.4",
             "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
             "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dev": true,
             "requires": {
                 "loose-envify": "^1.0.0"
             }
@@ -24725,6 +24791,15 @@
             "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
             "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
         },
+        "mini-create-react-context": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+            "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+            "requires": {
+                "@babel/runtime": "^7.12.1",
+                "tiny-warning": "^1.0.3"
+            }
+        },
         "mini-css-extract-plugin": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -27343,14 +27418,13 @@
             }
         },
         "react": {
-            "version": "16.14.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-            "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+            "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
             "peer": true,
             "requires": {
                 "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2"
+                "object-assign": "^4.1.1"
             }
         },
         "react-dev-utils": {
@@ -27652,17 +27726,58 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
-        "react-lifecycles-compat": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-        },
         "react-refresh": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.2.tgz",
             "integrity": "sha512-n8GXxo3DwM2KtFEL69DAVhGc4A1THn2qjmfvSo3nze0NLCoPbywazeJPqdp0RdSGLmyhQzeyA+XPXOobbYlkzg==",
             "dev": true
         },
+        "react-router": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+            "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+            "requires": {
+                "@babel/runtime": "^7.1.2",
+                "history": "^4.9.0",
+                "hoist-non-react-statics": "^3.1.0",
+                "loose-envify": "^1.3.1",
+                "mini-create-react-context": "^0.4.0",
+                "path-to-regexp": "^1.7.0",
+                "prop-types": "^15.6.2",
+                "react-is": "^16.6.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0"
+            },
+            "dependencies": {
+                "isarray": {
+                    "version": "0.0.1",
+                    "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+                    "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+                },
+                "path-to-regexp": {
+                    "version": "1.8.0",
+                    "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+                    "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+                    "requires": {
+                        "isarray": "0.0.1"
+                    }
+                }
+            }
+        },
+        "react-router-dom": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+            "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+            "requires": {
+                "@babel/runtime": "^7.1.2",
+                "history": "^4.9.0",
+                "loose-envify": "^1.3.1",
+                "prop-types": "^15.6.2",
+                "react-router": "5.2.0",
+                "tiny-invariant": "^1.0.2",
+                "tiny-warning": "^1.0.0"
+            }
+        },
         "react-simple-code-editor": {
             "version": "0.10.0",
             "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz",
@@ -27670,9 +27785,9 @@
             "dev": true
         },
         "react-styleguidist": {
-            "version": "11.1.5",
-            "resolved": "https://registry.npmjs.org/react-styleguidist/-/react-styleguidist-11.1.5.tgz",
-            "integrity": "sha512-19svre3SvBfhiVWuZoKHUmiodW5IZcXSr1JgalGgWrOy0JXOQOR3d3iFH7WMKzUWqi2JK4CJ17LTGqpjCXQb5w==",
+            "version": "11.1.6",
+            "resolved": "https://registry.npmjs.org/react-styleguidist/-/react-styleguidist-11.1.6.tgz",
+            "integrity": "sha512-ZO4tS8/cPwpabz5S3kZ6hRFcvdgsJwWnus6MC23BiNXCpTvoiRlnF8C90gry63acgVqeaZZb35+P/MZ4AVRdUg==",
             "dev": true,
             "requires": {
                 "@tippyjs/react": "4.1.0",
@@ -28273,6 +28388,11 @@
             "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
             "dev": true
         },
+        "resolve-pathname": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+            "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+        },
         "resolve-url": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -29694,11 +29814,15 @@
             "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
             "optional": true
         },
+        "tiny-invariant": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+            "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+        },
         "tiny-warning": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
-            "dev": true
+            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
         },
         "tippy.js": {
             "version": "6.2.7",
@@ -30217,6 +30341,11 @@
             "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
             "dev": true
         },
+        "value-equal": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+            "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+        },
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -30282,14 +30411,6 @@
             "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
             "dev": true
         },
-        "warning": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-            "requires": {
-                "loose-envify": "^1.0.0"
-            }
-        },
         "watchpack": {
             "version": "1.7.5",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index 1662e62..b657bf8 100644
--- a/package.json
+++ b/package.json
@@ -20,22 +20,23 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
         "@matejmazur/react-katex": "^3.1.3",
-        "@reach/router": "^1.3.4",
         "classnames": "^2.2.6",
         "color": "^3.1.3",
         "katex": "^0.12.0",
         "prop-types": "^15.7.2",
-        "react": "16.x",
+        "react": "^17.0.2",
         "react-dom": "^17.0.1",
+        "react-router": "^5.2.0",
+        "react-router-dom": "^5.2.0",
         "react-syntax-highlighter": "^15.4.3",
         "strip-indent": "^3.0.0"
     },
     "peerDependencies": {
-        "react": "16.x"
+        "react": "^17.0.2"
     },
     "devDependencies": {
         "nwb": "0.25.x",
-        "react-styleguidist": "^11.1.5"
+        "react-styleguidist": "^11.1.6"
     },
     "author": "Stefano Pigozzi <me@steffo.eu>",
     "license": "AGPL-3.0-or-later",
diff --git a/src/components/Align/index.js b/src/components/Align/index.js
index 8736fac..96448de 100644
--- a/src/components/Align/index.js
+++ b/src/components/Align/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import PropTypes from "prop-types";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import React from "react"
+import PropTypes from "prop-types"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
 
 
 export default function Align({children, className, value, ...props}) {
diff --git a/src/components/Anchor/index.js b/src/components/Anchor/index.js
index d76ccbc..6fb3cd7 100644
--- a/src/components/Anchor/index.js
+++ b/src/components/Anchor/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Anchor({children, className, href, ...props}) {
diff --git a/src/components/Aside/index.js b/src/components/Aside/index.js
index 3bc2854..de03be4 100644
--- a/src/components/Aside/index.js
+++ b/src/components/Aside/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Aside({children, className, ...props}) {
diff --git a/src/components/BaseLink/Readme.md b/src/components/BaseLink/Readme.md
index e97ffd5..befe28b 100644
--- a/src/components/BaseLink/Readme.md
+++ b/src/components/BaseLink/Readme.md
@@ -1,3 +1,3 @@
-A router-aware version of [`<Anchor>`](#anchor). It becomes bold if the current location matches its `href` property, 
+A router-aware version of [`<Anchor>`](#anchor). It becomes bold if the current location matches its `href` property,
 and can be disabled with the `disabled` prop.
 
diff --git a/src/components/BaseLink/index.js b/src/components/BaseLink/index.js
index 2ca0c55..03abe55 100644
--- a/src/components/BaseLink/index.js
+++ b/src/components/BaseLink/index.js
@@ -1,14 +1,17 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
-import { Link, useMatch } from "@reach/router"
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
+import {Link, useRouteMatch} from "react-router-dom"
 
 
 export default function BaseLink({children, className, href, disabled, ...props}) {
-    const locationMatch = useMatch(href);
+    const locationMatch = useRouteMatch(href)
 
-    const activeClassNames = useBluelibClassNames("style-bold", className);
-    if(locationMatch) {
+    const activeClassNames = useBluelibClassNames("style-bold", className)
+    const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className)
+    const enabledClassNames = useBluelibClassNames("element-anchor", className)
+
+    if (locationMatch) {
         return (
             <span className={activeClassNames} {...props}>
                 {children}
@@ -16,8 +19,7 @@ export default function BaseLink({children, className, href, disabled, ...props}
         )
     }
 
-    const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className);
-    if(disabled) {
+    if (disabled) {
         return (
             <span className={disabledClassNames} {...props}>
                 {children}
@@ -25,7 +27,6 @@ export default function BaseLink({children, className, href, disabled, ...props}
         )
     }
 
-    const enabledClassNames = useBluelibClassNames("element-anchor", className)
     return (
         <Link to={href} className={enabledClassNames} {...props}>
             {children}
diff --git a/src/components/Blockquote/index.js b/src/components/Blockquote/index.js
index f8c17a9..db306e8 100644
--- a/src/components/Blockquote/index.js
+++ b/src/components/Blockquote/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Blockquote({children, className, ...props}) {
diff --git a/src/components/Bluelib/BluelibContainer/index.js b/src/components/Bluelib/BluelibContainer/index.js
index 35b9a1e..7a5e4bf 100644
--- a/src/components/Bluelib/BluelibContainer/index.js
+++ b/src/components/Bluelib/BluelibContainer/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function BluelibContainer({children, className}) {
diff --git a/src/components/Bluelib/BluelibProvider/Readme.md b/src/components/Bluelib/BluelibProvider/Readme.md
index acb8a84..88f3b3b 100644
--- a/src/components/Bluelib/BluelibProvider/Readme.md
+++ b/src/components/Bluelib/BluelibProvider/Readme.md
@@ -3,4 +3,5 @@ A provider for the `ContextBluelibSkin` context.
 A skin can be selected by passing either a CSS module or a string to the `skin` prop.
 
 Valid strings are:
+
 - `"rygblue"`
diff --git a/src/components/Bluelib/BluelibProvider/index.js b/src/components/Bluelib/BluelibProvider/index.js
index fd78780..888e8b4 100644
--- a/src/components/Bluelib/BluelibProvider/index.js
+++ b/src/components/Bluelib/BluelibProvider/index.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React from "react"
 
-import skinRygblue from "../../../bluelib/src/targets/rygblue.module.css";
-import ContextBluelibSkin from "../../../contexts/ContextBluelibSkin";
-import isString from "../../../utils/isString";
-import PropTypes from "prop-types";
+import skinRygblue from "../../../bluelib/src/targets/rygblue.module.css"
+import ContextBluelibSkin from "../../../contexts/ContextBluelibSkin"
+import isString from "../../../utils/isString"
+import PropTypes from "prop-types"
 
 
 const builtinSkins = {
@@ -13,7 +13,7 @@ const builtinSkins = {
 
 export default function BluelibProvider({skin, children}) {
     // If the skin is a string, try to get the corresponding builtin skin
-    if(isString(skin)) {
+    if (isString(skin)) {
         skin = builtinSkins[skin]
     }
 
diff --git a/src/components/Bluelib/Readme.md b/src/components/Bluelib/Readme.md
index 5fb45c0..200e183 100644
--- a/src/components/Bluelib/Readme.md
+++ b/src/components/Bluelib/Readme.md
@@ -1,4 +1,4 @@
-The main component for Bluelib, composed by a [`<BluelibContainer>`](#bluelibcontainer) and a 
+The main component for Bluelib, composed by a [`<BluelibContainer>`](#bluelibcontainer) and a
 [`<BluelibProvider>`](#bluelibprovider).
 
 **Bluelib components won't work unless they're inside a `<Bluelib>` component!**
@@ -6,6 +6,7 @@ The main component for Bluelib, composed by a [`<BluelibContainer>`](#bluelibcon
 A skin can be selected by passing either a CSS module or a string to the `skin` prop.
 
 Valid strings are:
+
 - `"rygblue"`
 
 ```jsx
diff --git a/src/components/Bluelib/index.js b/src/components/Bluelib/index.js
index 2e03bfa..b61ba4c 100644
--- a/src/components/Bluelib/index.js
+++ b/src/components/Bluelib/index.js
@@ -1,7 +1,7 @@
-import React from "react";
-import BluelibProvider from "./BluelibProvider";
-import BluelibContainer from "./BluelibContainer";
-import PropTypes from "prop-types";
+import React from "react"
+import BluelibProvider from "./BluelibProvider"
+import BluelibContainer from "./BluelibContainer"
+import PropTypes from "prop-types"
 
 
 export default function Bluelib({className, children, skin}) {
diff --git a/src/components/Bold/index.js b/src/components/Bold/index.js
index 01cf07a..cc2e936 100644
--- a/src/components/Bold/index.js
+++ b/src/components/Bold/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Bold({children, className, ...props}) {
diff --git a/src/components/Box/index.js b/src/components/Box/index.js
index 7a07296..8157ff8 100644
--- a/src/components/Box/index.js
+++ b/src/components/Box/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Box({children, className, ...props}) {
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 59d2fb5..b34b4ec 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -5,7 +5,16 @@ import classNames from "classnames"
 
 export default function Button({children, className, disabled, ...props}) {
     return (
-        <button className={useBluelibClassNames(classNames("button", disabled ? "status-disabled" : "status-clickable"), className)} {...props}>
+        <button
+            className={useBluelibClassNames(
+                classNames(
+                    "button",
+                    disabled ? "status-disabled" : "status-clickable"
+                ),
+                className
+            )}
+            {...props}
+        >
             {children}
         </button>
     )
diff --git a/src/components/Code/index.js b/src/components/Code/index.js
index 59bb91a..7abc7ed 100644
--- a/src/components/Code/index.js
+++ b/src/components/Code/index.js
@@ -1,13 +1,13 @@
-import React, {useContext} from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import ContextCodeLanguage from "../../contexts/ContextCodeLanguage";
-import ContextCodeSkin from "../../contexts/ContextCodeSkin";
-import stripIndent from "strip-indent";
+import React, {useContext} from "react"
+import SyntaxHighlighter from "react-syntax-highlighter"
+import ContextCodeLanguage from "../../contexts/ContextCodeLanguage"
+import ContextCodeSkin from "../../contexts/ContextCodeSkin"
+import stripIndent from "strip-indent"
 
 
 export default function Code({children, style, language, skin, ...props}) {
-    let ctxLanguage = useContext(ContextCodeLanguage);
-    let ctxSkin = useContext(ContextCodeSkin);
+    let ctxLanguage = useContext(ContextCodeLanguage)
+    let ctxSkin = useContext(ContextCodeSkin)
 
     return (
         <SyntaxHighlighter
diff --git a/src/components/Color/Readme.md b/src/components/Color/Readme.md
index 0c15b6f..5418b5f 100644
--- a/src/components/Color/Readme.md
+++ b/src/components/Color/Readme.md
@@ -1,8 +1,9 @@
 Change the **bluelib color** of the contained elements.
 
-The color can chosen through either the `builtin` prop or the `custom` prop. 
+The color can chosen through either the `builtin` prop or the `custom` prop.
 
 By using the `builtin` prop, the color will automatically adapt itself to the theme. Possible builtin colors are:
+
 - `"red"`
 - `"orange"`
 - `"yellow"`
diff --git a/src/components/Color/index.js b/src/components/Color/index.js
index e2f1162..d8149c9 100644
--- a/src/components/Color/index.js
+++ b/src/components/Color/index.js
@@ -1,6 +1,6 @@
 import React, {Fragment} from "react"
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 import classNames from "classnames"
 import color from "color"
 
@@ -8,27 +8,27 @@ import color from "color"
 export default function Color({children, builtin, custom}) {
     const potentialClassName = useBluelibClassNames(`color-${builtin}`)
 
-    if(builtin && custom) {
+    if (builtin && custom) {
         throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
     }
 
-    let extraClassName = "";
-    let extraStyle = {};
+    let extraClassName = ""
+    let extraStyle = {}
 
-    if(builtin !== undefined) {
+    if (builtin !== undefined) {
         extraClassName = potentialClassName
 
     }
-    if(custom !== undefined) {
-        let c = color(custom);
+    if (custom !== undefined) {
+        let c = color(custom)
         extraStyle["--bluelib-color-r"] = c.red()
         extraStyle["--bluelib-color-g"] = c.green()
         extraStyle["--bluelib-color-b"] = c.blue()
     }
 
     children = React.Children.map(children, child => {
-        if(!child.props) {
-            return child;
+        if (!child.props) {
+            return child
         }
         return React.cloneElement(child, {
             className: classNames(child.props.className, extraClassName),
diff --git a/src/components/Help/index.js b/src/components/Help/index.js
index 7195596..a007a8a 100644
--- a/src/components/Help/index.js
+++ b/src/components/Help/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Help({children, className, text, ...props}) {
diff --git a/src/components/Italic/index.js b/src/components/Italic/index.js
index 5f84f9e..4660c01 100644
--- a/src/components/Italic/index.js
+++ b/src/components/Italic/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Italic({children, className, ...props}) {
diff --git a/src/components/LatexMath/index.js b/src/components/LatexMath/index.js
index a918c57..11b541e 100644
--- a/src/components/LatexMath/index.js
+++ b/src/components/LatexMath/index.js
@@ -1,7 +1,7 @@
-import React from "react";
-import "katex/dist/katex.css";
-import TeX from '@matejmazur/react-katex';
-import PropTypes from "prop-types";
+import React from "react"
+import "katex/dist/katex.css"
+import TeX from '@matejmazur/react-katex'
+import PropTypes from "prop-types"
 
 
 export default function LatexMath({children, block, ...props}) {
diff --git a/src/components/ListItem/index.js b/src/components/ListItem/index.js
index 3027ec2..214675d 100644
--- a/src/components/ListItem/index.js
+++ b/src/components/ListItem/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function ListItem({children, className, ...props}) {
diff --git a/src/components/Main/index.js b/src/components/Main/index.js
index f855617..53a7e9d 100644
--- a/src/components/Main/index.js
+++ b/src/components/Main/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Main({children, className, ...props}) {
diff --git a/src/components/Paragraph/index.js b/src/components/Paragraph/index.js
index 3f78f3b..e6a74c0 100644
--- a/src/components/Paragraph/index.js
+++ b/src/components/Paragraph/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Paragraph({children, className, ...props}) {
diff --git a/src/components/Separator/index.js b/src/components/Separator/index.js
index ca8e810..51335d0 100644
--- a/src/components/Separator/index.js
+++ b/src/components/Separator/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Separator({className, ...props}) {
diff --git a/src/components/Size/Readme.md b/src/components/Size/Readme.md
index ae38e67..1652d34 100644
--- a/src/components/Size/Readme.md
+++ b/src/components/Size/Readme.md
@@ -1,6 +1,7 @@
 Change the **size** of the contained text.
 
 The size can be configured with the `value` prop:
+
 - `xxl`
 - `xl`
 - `l`
diff --git a/src/components/Size/index.js b/src/components/Size/index.js
index 8bc75bc..04bfd1b 100644
--- a/src/components/Size/index.js
+++ b/src/components/Size/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Size({children, className, value, ...props}) {
diff --git a/src/components/Split/Readme.md b/src/components/Split/Readme.md
index 5baa082..773fa0b 100644
--- a/src/components/Split/Readme.md
+++ b/src/components/Split/Readme.md
@@ -1,4 +1,4 @@
-A **panel** which splits horizontally the contained panels into multiple columns of the same size (if possible). 
+A **panel** which splits horizontally the contained panels into multiple columns of the same size (if possible).
 
 ```jsx
 import Bluelib from "../Bluelib";
diff --git a/src/components/Split/index.js b/src/components/Split/index.js
index 4df041d..e0991d8 100644
--- a/src/components/Split/index.js
+++ b/src/components/Split/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Split({children, className, ...props}) {
diff --git a/src/components/Spoiler/index.js b/src/components/Spoiler/index.js
index 6d3999b..f6fb2ad 100644
--- a/src/components/Spoiler/index.js
+++ b/src/components/Spoiler/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Spoiler({children, className, ...props}) {
diff --git a/src/components/Strike/index.js b/src/components/Strike/index.js
index d44cac0..ffd1b40 100644
--- a/src/components/Strike/index.js
+++ b/src/components/Strike/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Strike({children, className, ...props}) {
diff --git a/src/components/Title/Readme.md b/src/components/Title/Readme.md
index 71c904c..6bca7b2 100644
--- a/src/components/Title/Readme.md
+++ b/src/components/Title/Readme.md
@@ -1,6 +1,7 @@
 Format the text like a **title**, changing its font and centering it.
 
 The size can be configured with the `size` prop:
+
 - `xxl`
 - `xl` (equivalent to `<h1>` and `<h2>`)
 - `l` (equivalent to `<h3>`)
diff --git a/src/components/Title/index.js b/src/components/Title/index.js
index 52b7e28..d1fefa3 100644
--- a/src/components/Title/index.js
+++ b/src/components/Title/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Title({children, className, size, ...props}) {
diff --git a/src/components/Underline/index.js b/src/components/Underline/index.js
index 5c247bc..5e074e9 100644
--- a/src/components/Underline/index.js
+++ b/src/components/Underline/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import useBluelibClassNames from "../../hooks/useBluelibClassNames";
-import PropTypes from "prop-types";
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
 
 
 export default function Underline({children, className, ...props}) {
diff --git a/src/components/VisualErrorBoundary/index.js b/src/components/VisualErrorBoundary/index.js
index b092ec4..ec8d4e5 100644
--- a/src/components/VisualErrorBoundary/index.js
+++ b/src/components/VisualErrorBoundary/index.js
@@ -1,25 +1,24 @@
-import React from "react";
-import VisualLog from "../VisualLog";
+import React from "react"
+import VisualLog from "../VisualLog"
 
 
 export default class VisualErrorBoundary extends React.Component {
     constructor(props) {
-        super(props);
-        this.state = {"error": null, "errorInfo": null};
+        super(props)
+        this.state = {"error": null, "errorInfo": null}
     }
 
     componentDidCatch(error, errorInfo) {
-        this.setState({"error": error, "errorInfo": errorInfo});
+        this.setState({"error": error, "errorInfo": errorInfo})
     }
 
     render() {
-        if(this.state.error) {
+        if (this.state.error) {
             return (
                 <VisualLog level={"error"}>{this.state.error.toString()}</VisualLog>
             )
-        }
-        else {
-            return this.props.children;
+        } else {
+            return this.props.children
         }
     }
 }
diff --git a/src/components/VisualLog/index.js b/src/components/VisualLog/index.js
index eac454d..e7d6f19 100644
--- a/src/components/VisualLog/index.js
+++ b/src/components/VisualLog/index.js
@@ -1,6 +1,6 @@
-import React from "react";
-import Color from "../Color";
-import PropTypes from "prop-types";
+import React from "react"
+import Color from "../Color"
+import PropTypes from "prop-types"
 
 
 const COLORS = {
diff --git a/src/components/index.js b/src/components/index.js
index 5ce5cba..ba8d68c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,27 +1,27 @@
-export {default as Align} from "./Align";
-export {default as Anchor} from "./Anchor";
-export {default as Aside} from "./Aside";
-export {default as Blockquote} from "./Blockquote";
-export {default as Bluelib} from "./Bluelib";
-export {default as Bold} from "./Bold";
-export {default as Box} from "./Box";
-export {default as Code} from "./Code";
-export {default as Color} from "./Color";
-export {default as Help} from "./Help";
-export {default as Italic} from "./Italic";
+export {default as Align} from "./Align"
+export {default as Anchor} from "./Anchor"
+export {default as Aside} from "./Aside"
+export {default as Blockquote} from "./Blockquote"
+export {default as Bluelib} from "./Bluelib"
+export {default as Bold} from "./Bold"
+export {default as Box} from "./Box"
+export {default as Code} from "./Code"
+export {default as Color} from "./Color"
+export {default as Help} from "./Help"
+export {default as Italic} from "./Italic"
 // export {default as LatexMath} from "./LatexMath";  // Do not export this, it should use dynamic load if imported
-export {default as ListItem} from "./ListItem";
-export {default as Main} from "./Main";
-export {default as Paragraph} from "./Paragraph";
-export {default as Separator} from "./Separator";
-export {default as Size} from "./Size";
-export {default as Split} from "./Split";
-export {default as Spoiler} from "./Spoiler";
-export {default as Strike} from "./Strike";
-export {default as Title} from "./Title";
-export {default as Underline} from "./Underline";
-export {default as BaseLink} from "./BaseLink";
-export {default as VisualErrorBoundary} from "./VisualErrorBoundary";
-export {default as VisualLog} from "./VisualLog";
-export {default as Button} from "./Button";
-export {default as ButtonToggle} from "./ButtonToggle";
+export {default as ListItem} from "./ListItem"
+export {default as Main} from "./Main"
+export {default as Paragraph} from "./Paragraph"
+export {default as Separator} from "./Separator"
+export {default as Size} from "./Size"
+export {default as Split} from "./Split"
+export {default as Spoiler} from "./Spoiler"
+export {default as Strike} from "./Strike"
+export {default as Title} from "./Title"
+export {default as Underline} from "./Underline"
+export {default as BaseLink} from "./BaseLink"
+export {default as VisualErrorBoundary} from "./VisualErrorBoundary"
+export {default as VisualLog} from "./VisualLog"
+export {default as Button} from "./Button"
+export {default as ButtonToggle} from "./ButtonToggle"