diff --git a/assets/components/Utils/MapWrapper.jsx b/assets/components/Utils/MapWrapper.jsx
deleted file mode 100644
index e85a7f1c..00000000
--- a/assets/components/Utils/MapWrapper.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import PropTypes from "prop-types";
-import React, { useEffect, useRef } from "react";
-
-import Map from "ol/Map";
-import View from "ol/View";
-import WMTSCapabilities from "ol/format/WMTSCapabilities";
-import TileLayer from "ol/layer/Tile";
-import { fromLonLat } from "ol/proj";
-import WMTS, { optionsFromCapabilities } from "ol/source/WMTS";
-import olDefaults from "../../data/ol-defaults.json";
-import "./../../sass/components/zoom-range.scss";
-
-const MapWrapper = (props) => {
-    // const [map, setMap] = useState(); // NOTE : code non-utilisé commenté temporairement pour que le GitHub Action passe
-
-    // get ref to div element - OpenLayers will render into this div
-    const mapElement = useRef();
-
-    useEffect(() => {
-        const center = props.center ?? olDefaults.center; // Paris
-
-        // create map
-        const initialMap = new Map({
-            target: mapElement.current,
-            view: new View({
-                projection: "EPSG:3857",
-                center: fromLonLat(center),
-                zoom: props.zoom,
-            }),
-            controls: [],
-        });
-        // setMap(initialMap); // NOTE : code non-utilisé commenté temporairement pour que le GitHub Action passe
-
-        // Ajout de la couche PLANIGNV2
-        fetch("https://wxs.ign.fr/cartes/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities")
-            .then((response) => {
-                if (!response.ok) {
-                    throw response.statusText;
-                }
-                return response.text();
-            })
-            .then((response) => {
-                const format = new WMTSCapabilities();
-                const capabilities = format.read(response);
-
-                const wmtsOptions = optionsFromCapabilities(capabilities, {
-                    layer: olDefaults.default_background_layer,
-                    matrixSet: "EPSG:3857",
-                });
-
-                const layer = new TileLayer({
-                    opacity: 1,
-                    source: new WMTS(wmtsOptions),
-                });
-                initialMap.addLayer(layer);
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-
-        /* We set map target to undefined to represent a
-         * nonexistent HTML element ID, when the React component is unmounted.
-         * This prevents multiple maps being added to the map container on a
-         * re-render.
-         */
-        return () => initialMap.setTarget(undefined);
-    }, [props]);
-
-    return <div ref={mapElement} className={props.className} id={props.id} />;
-};
-
-MapWrapper.propTypes = {
-    id: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    zoom: PropTypes.number.isRequired,
-    center: PropTypes.arrayOf(PropTypes.number),
-};
-
-export default MapWrapper;
diff --git a/assets/pages/Home.jsx b/assets/pages/Home.tsx
similarity index 72%
rename from assets/pages/Home.jsx
rename to assets/pages/Home.tsx
index 28393a4b..be673b26 100644
--- a/assets/pages/Home.jsx
+++ b/assets/pages/Home.tsx
@@ -16,7 +16,7 @@ const Home = () => {
 
     return (
         <AppLayout navItems={defaultNavItems} documentTitle="Le service public des cartes et données du territoire">
-            {params.authentication_failed === 1 && (
+            {params?.["authentication_failed"] === 1 && (
                 <Alert
                     severity="error"
                     closable={true}
@@ -30,12 +30,12 @@ const Home = () => {
             )}
 
             {/* Section : Présentation */}
-            <div className={fr.cx("c-section", "c-section--gray")}>
+            <div className="c-section c-section--gray">
                 <div className={fr.cx("fr-container--fluid")}>
                     <div className={fr.cx("fr-container")}>
                         <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
-                            <div className={fr.cx("fr-col-12", "fr-col-lg-6", "fr-px-0v", "fr-pl-md-14v")}>
-                                <p className={fr.cx("fr-mt-4w", "fr-mt-md-7w", "fr-display--xxs")}>
+                            <div className={fr.cx("fr-col-12", "fr-col-lg-6", "fr-px-0", "fr-pl-md-14v")}>
+                                <p className={fr.cx("fr-mt-4w", "fr-mt-md-7w") + " fr-display--xxs"}>
                                     Construisons ensemble le futur portail de la connaissance du territoire
                                 </p>
 
@@ -79,43 +79,28 @@ const Home = () => {
             <div className={fr.cx("fr-container", "fr-mt-8v", "fr-pb-3v", "fr-mt-md-10v", "fr-mb-2v", "fr-mb-md-8v")}>
                 <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
                     <div className={fr.cx("fr-col-12")}>
-                        <h2 className={fr.cx("fr-my-5w", "fr-text--center")}>Ce que vous pouvez faire avec cartes.gouv.fr</h2>
+                        <h2 className={fr.cx("fr-my-5w") + " fr-text--center"}>Ce que vous pouvez faire avec cartes.gouv.fr</h2>
                     </div>
                 </div>
 
-                <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-text--center")}>
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/digital/internet.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-fc-finger")}
-                            alt=""
-                            role="presentation"
-                        />
+                <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters") + " fr-text--center"}>
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/digital/internet.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Consommez des services</h3>
                         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
-                        <Badge small className={fr.cx("fr-badge--pink")}>
+                        <Badge small className={"fr-badge--pink"}>
                             Prochainement
                         </Badge>
                     </div>
 
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/environment/human-cooperation.svg`}
-                            className={fr.cx("fin-service-pict", "svg-fin-majorite")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/environment/human-cooperation.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Stocker et partager des géodonnées</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
 
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/digital/data-visualization.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-procuration")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/digital/data-visualization.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Effectuer des traitements</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                         {/* <p>
@@ -137,26 +122,16 @@ const Home = () => {
                             )}
                         </p> */}
                     </div>
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/map/map.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-service-picto")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-md-6", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/map/map.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Lorem ipsum dolor</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
                 </div>
 
-                <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-text--center")}>
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/digital/data-visualization.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-procuration")}
-                            alt=""
-                            role="presentation"
-                        />
+                <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters") + " fr-text--center"}>
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/digital/data-visualization.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Consectetur adipiscing elit</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                         {/* <p>
@@ -179,37 +154,22 @@ const Home = () => {
                         </p> */}
                     </div>
 
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/map/map.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-service-picto")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/map/map.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Sit amet</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
 
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/digital/internet.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-fc-finger")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/digital/internet.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Dolor sit amet consectetur</h3>
                         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
-                        <Badge small className={fr.cx("fr-badge--pink")}>
+                        <Badge small className={"fr-badge--pink"}>
                             Prochainement
                         </Badge>
                     </div>
-                    <div className={fr.cx("fr-col-lg-3", "fr-col-12", "fr-text--center")}>
-                        <img
-                            src={`${appRoot}/dsfr/artwork/pictograms/environment/human-cooperation.svg`}
-                            className={fr.cx("fin-service-picto", "svg-fin-majorite")}
-                            alt=""
-                            role="presentation"
-                        />
+                    <div className={fr.cx("fr-col-lg-3", "fr-col-12") + " fr-text--center"}>
+                        <img src={`${appRoot}/dsfr/artwork/pictograms/environment/human-cooperation.svg`} alt="" role="presentation" />
                         <h3 className={fr.cx("fr-text--lead")}>Adipiscing elits</h3>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
diff --git a/assets/pages/users/Me.jsx b/assets/pages/users/Me.jsx
deleted file mode 100644
index 59beb50f..00000000
--- a/assets/pages/users/Me.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-
-import AppLayout from "../../components/Layout/AppLayout";
-import BtnBackToHome from "../../components/Utils/BtnBackToHome";
-import { defaultNavItems } from "../../config/navItems";
-import functions from "../../functions";
-import useUser from "../../hooks/useUser";
-
-const Me = () => {
-    const { user } = useUser();
-
-    return (
-        <AppLayout navItems={defaultNavItems} documentTitle="Mon compte">
-            <h1>Mon compte</h1>
-            <p>
-                <strong>Prénom</strong> : {user.firstName}
-            </p>
-            <p>
-                <strong>Nom</strong> : {user.lastName}
-            </p>
-            <p>
-                <strong>Email</strong> : {user.email}
-            </p>
-            <p>
-                <strong>{"Date d'inscription"}</strong> : {functions.date.format(user.accountCreationDate)}
-            </p>
-            <p>
-                <strong>Identifiant technique</strong> : {user.id}
-            </p>
-
-            <BtnBackToHome />
-        </AppLayout>
-    );
-};
-
-export default Me;
diff --git a/assets/pages/users/Me.tsx b/assets/pages/users/Me.tsx
new file mode 100644
index 00000000..c3c7cf28
--- /dev/null
+++ b/assets/pages/users/Me.tsx
@@ -0,0 +1,39 @@
+import AppLayout from "../../components/Layout/AppLayout";
+import BtnBackToHome from "../../components/Utils/BtnBackToHome";
+import { defaultNavItems } from "../../config/navItems";
+import functions from "../../functions";
+import useUser from "../../hooks/useUser";
+
+const Me = () => {
+    const { user } = useUser();
+
+    return (
+        <AppLayout navItems={defaultNavItems} documentTitle="Mon compte">
+            <h1>Mon compte</h1>
+
+            {user && (
+                <>
+                    <p>
+                        <strong>Prénom</strong> : {user.firstName}
+                    </p>
+                    <p>
+                        <strong>Nom</strong> : {user.lastName}
+                    </p>
+                    <p>
+                        <strong>Email</strong> : {user.email}
+                    </p>
+                    <p>
+                        <strong>{"Date d'inscription"}</strong> : {functions.date.format(user.accountCreationDate)}
+                    </p>
+                    <p>
+                        <strong>Identifiant technique</strong> : {user.id}
+                    </p>
+                </>
+            )}
+
+            <BtnBackToHome />
+        </AppLayout>
+    );
+};
+
+export default Me;
diff --git a/assets/router/RouterRenderer.jsx b/assets/router/RouterRenderer.tsx
similarity index 97%
rename from assets/router/RouterRenderer.jsx
rename to assets/router/RouterRenderer.tsx
index 14c24e6f..4ee644bf 100644
--- a/assets/router/RouterRenderer.jsx
+++ b/assets/router/RouterRenderer.tsx
@@ -1,10 +1,10 @@
-import SymfonyRouting from "../modules/Routing";
-import React, { Suspense, lazy } from "react";
+import { JSX, Suspense, lazy } from "react";
 
 import AppLayout from "../components/Layout/AppLayout";
 import LoadingText from "../components/Utils/LoadingText";
 import { defaultNavItems } from "../config/navItems";
 import useUser from "../hooks/useUser";
+import SymfonyRouting from "../modules/Routing";
 import Home from "../pages/Home";
 import Redirect from "../pages/Redirect";
 import PageNotFound from "../pages/error/PageNotFound";
@@ -45,7 +45,7 @@ function RouterRenderer() {
     const { user } = useUser();
 
     // vérification si la route demandée est bien connue/enregistrée
-    if (!knownRoutes.includes(route.name)) {
+    if (route.name === false || !knownRoutes.includes(route.name)) {
         return <PageNotFound />;
     }
 
@@ -58,7 +58,7 @@ function RouterRenderer() {
         }
     }
 
-    let content = null;
+    let content: JSX.Element;
 
     switch (route.name) {
         case "home":