diff --git a/targets/frontend/package.json b/targets/frontend/package.json
index 6ff2c98af..343f9b1fc 100644
--- a/targets/frontend/package.json
+++ b/targets/frontend/package.json
@@ -84,6 +84,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/formidable": "^2.0.5",
+    "@types/jest": "^27.4.0",
+    "@types/jsonwebtoken": "^9.0.3",
+    "@types/lodash.get": "^4.4.7",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^18.0.11",
     "@urql/devtools": "^2.0.3",
diff --git a/targets/frontend/src/pages/api/storage/index.js b/targets/frontend/src/pages/api/storage/index.ts
similarity index 80%
rename from targets/frontend/src/pages/api/storage/index.js
rename to targets/frontend/src/pages/api/storage/index.ts
index c4533567b..b100e7f0b 100644
--- a/targets/frontend/src/pages/api/storage/index.js
+++ b/targets/frontend/src/pages/api/storage/index.ts
@@ -6,13 +6,14 @@ import { getContainerBlobs, uploadBlob } from "src/lib/azure";
 import { isUploadFileSafe } from "src/lib/secu";
 import * as stream from "stream";
 import { HASURA_GRAPHQL_JWT_SECRET } from "../../../config";
+import { NextApiRequest, NextApiResponse } from "next";
 
 const container = process.env.STORAGE_CONTAINER ?? "cdtn-dev";
 const jwtSecret = JSON.parse(HASURA_GRAPHQL_JWT_SECRET);
 
-async function endPoint(req, res) {
+async function endPoint(req: NextApiRequest, res: NextApiResponse) {
   const apiError = createErrorFor(res);
-  const { token } = req.headers;
+  const { token }: any = req.headers;
 
   if (!token || !verify(token, jwtSecret.key, { algorithms: jwtSecret.type })) {
     return apiError(Boom.badRequest("wrong token"));
@@ -30,12 +31,12 @@ async function endPoint(req, res) {
   }
 }
 
-const errored = (res, err) => {
+const errored = (res: NextApiResponse, err: any) => {
   console.error("[storage]", err);
   res.status(400).json({ success: false });
 };
 
-const done = (res) => res.status(200).json({ success: true });
+const done = (res: NextApiResponse) => res.status(200).json({ success: true });
 
 const ALLOWED_EXTENSIONS = [
   "pdf",
@@ -52,10 +53,10 @@ const ALLOWED_EXTENSIONS = [
   "odt",
 ];
 
-const isAllowedFile = (part) =>
+const isAllowedFile = (part: any) =>
   ALLOWED_EXTENSIONS.includes(part.name.toLowerCase().split(".").reverse()[0]);
 
-function uploadFiles(req, res) {
+function uploadFiles(req: NextApiRequest, res: NextApiResponse) {
   const form = new IncomingForm({ multiples: true });
   // we need to override the onPart method to directly
   // stream the data to azure
@@ -63,8 +64,8 @@ function uploadFiles(req, res) {
   form.onPart = async function (part) {
     try {
       uploadingFilesNumber++;
-      const streamCheckup = part.pipe(new stream.PassThrough());
-      const streamUpload = part.pipe(new stream.PassThrough());
+      const streamCheckup: any = part.pipe(new stream.PassThrough());
+      const streamUpload: any = part.pipe(new stream.PassThrough());
       streamUpload.name = part.name;
       streamUpload.mimetype = part.mimetype;
 
@@ -99,7 +100,7 @@ function uploadFiles(req, res) {
   });
 }
 
-async function getFiles(req, res) {
+async function getFiles(_req: NextApiRequest, res: NextApiResponse) {
   res.json(await getContainerBlobs(container));
 }
 
diff --git a/targets/frontend/src/pages/fichiers.js b/targets/frontend/src/pages/fichiers.tsx
similarity index 90%
rename from targets/frontend/src/pages/fichiers.js
rename to targets/frontend/src/pages/fichiers.tsx
index 1387d8a4f..ad21fb562 100644
--- a/targets/frontend/src/pages/fichiers.js
+++ b/targets/frontend/src/pages/fichiers.tsx
@@ -32,21 +32,21 @@ import {
 const listFiles = () =>
   request(`/api/storage`, {
     headers: { token: getToken()?.jwt_token || "" },
-  });
+  } as any);
 
-const uploadFiles = (formData) =>
+const uploadFiles = (formData: any) =>
   request(`/api/storage`, {
     body: formData,
     headers: { token: getToken()?.jwt_token || "" },
-  });
+  } as any);
 
-const deleteFile = (path) =>
+const deleteFile = (path: any) =>
   request(`/api/storage/${path}`, {
     headers: { token: getToken()?.jwt_token || "" },
     method: "DELETE",
-  });
+  } as any);
 
-const onDeleteClick = function (file) {
+const onDeleteClick = function (file: any) {
   const confirmed = confirm(
     `Êtes-vous sûr(e) de vouloir définitivement supprimer ${file.name} ?`
   );
@@ -64,9 +64,9 @@ const onDeleteClick = function (file) {
 function FilesPage() {
   const { data, error, isValidating } = useSWR("files", listFiles, {
     initialData: undefined,
-  });
+  } as any);
   const [search, setSearch, setDebouncedSearch] = useDebouncedState("", 400);
-  const searchInputEl = useRef(null);
+  const searchInputEl = useRef<any>(null);
   const [isSearching, setSearching] = useState(false);
   const [filter, setFilter] = useState("");
   const [sort, setSort] = useState("mostRecent");
@@ -101,7 +101,7 @@ function FilesPage() {
           });
         }}
       />
-      <Box sx={{ display: "flex" }} as="form" my="medium">
+      <Box sx={{ display: "flex" }} component="form" my="medium">
         <Box
           sx={{ display: "flex", alignItems: "flex-end", position: "relative" }}
         >
@@ -180,7 +180,7 @@ function FilesPage() {
           <List sx={{ listStyleType: "none", m: 0, p: 0 }}>
             {data
               .filter(
-                (file) =>
+                (file: any) =>
                   filterCallback(filter, file) &&
                   (search
                     ? file.name
@@ -189,7 +189,7 @@ function FilesPage() {
                     : true)
               )
               .sort(getSortCallback(sort))
-              .map((file) => {
+              .map((file: any) => {
                 return (
                   <ListItem
                     key={file.name}
@@ -198,6 +198,7 @@ function FilesPage() {
                     }}
                   >
                     <Card
+                      component="a"
                       target="_blank"
                       rel="noopener noreferrer"
                       href={file.url}
@@ -253,17 +254,17 @@ function FilesPage() {
                         variant="secondary"
                         text={file.name}
                         copied={currentClip === file.name}
-                        onClip={(text) => {
+                        onClip={(text: any) => {
                           setCurrentClip(text);
                         }}
                       />
                       <Button
-                        {...buttonProps}
                         variant="outlined"
                         onClick={(evt) => {
                           evt.preventDefault();
                           onDeleteClick(file);
                         }}
+                        sx={{ flex: "0 0 auto", mx: theme.space.xsmall }}
                       >
                         <IoIosTrash style={iconSx} />
                         Supprimer
@@ -285,7 +286,7 @@ export default withCustomUrqlClient(withUserProvider(FilesPage));
 
 const buttonProps = {
   outline: true,
-  size: "small",
+  size: theme.space.small,
   sx: { flex: "0 0 auto", mx: theme.space.xsmall },
   type: "button",
 };
@@ -296,7 +297,7 @@ const iconSx = {
   width: theme.sizes.iconSmall,
 };
 
-const filterCallback = (filter, file) => {
+const filterCallback = (filter: any, file: any) => {
   const extension = file.name.split(".").pop().toLowerCase();
   switch (filter) {
     case "jpg":
@@ -314,23 +315,23 @@ const filterCallback = (filter, file) => {
   }
 };
 
-const getSortCallback = (sort) => {
+const getSortCallback = (sort: any) => {
   switch (sort) {
     case "alphabetic":
-      return (a, b) => a.name.localeCompare(b.name);
+      return (a: any, b: any) => a.name.localeCompare(b.name);
     case "reverse-alphabetic":
-      return (a, b) => b.name.localeCompare(a.name);
+      return (a: any, b: any) => b.name.localeCompare(a.name);
     case "oldest":
-      return (a, b) =>
+      return (a: any, b: any) =>
         new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime();
     case "mostRecent":
-      return (a, b) =>
+      return (a: any, b: any) =>
         new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime();
     case "lightest":
-      return (a, b) => a.contentLength - b.contentLength;
+      return (a: any, b: any) => a.contentLength - b.contentLength;
     case "heaviest":
-      return (a, b) => b.contentLength - a.contentLength;
+      return (a: any, b: any) => b.contentLength - a.contentLength;
     default:
-      return (a, b) => a.name.localeCompare(b.name);
+      return (a: any, b: any) => a.name.localeCompare(b.name);
   }
 };
diff --git a/yarn.lock b/yarn.lock
index 1f32f55a8..efd482884 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6494,7 +6494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^27.0.0, @types/jest@npm:^27.0.1, @types/jest@npm:^27.4.1":
+"@types/jest@npm:^27.0.0, @types/jest@npm:^27.0.1, @types/jest@npm:^27.4.0, @types/jest@npm:^27.4.1":
   version: 27.5.2
   resolution: "@types/jest@npm:27.5.2"
   dependencies:
@@ -6529,6 +6529,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jsonwebtoken@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "@types/jsonwebtoken@npm:9.0.3"
+  dependencies:
+    "@types/node": "*"
+  checksum: 2debf3adb19b827a023205234ec439b7258aee6ca9273472abe360738a84f08db78c6e853172e842ec303169ec0bb2df39701ab9a13b9e7868fe284ef9136567
+  languageName: node
+  linkType: hard
+
 "@types/keyv@npm:^3.1.1, @types/keyv@npm:^3.1.4":
   version: 3.1.4
   resolution: "@types/keyv@npm:3.1.4"
@@ -6538,6 +6547,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.get@npm:^4.4.7":
+  version: 4.4.7
+  resolution: "@types/lodash.get@npm:4.4.7"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 0dbf1960606e4707c34e8ffbe97ffaad0e47fc5df7a6e24ea6e4fe5838d2468aa13360f38815c77b06e3c9932631ae15662b4139036a69ee16aeb54827a21405
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.199
+  resolution: "@types/lodash@npm:4.14.199"
+  checksum: e68d1fcbbfce953ed87b296a628573f62939227bcda0c934954e862b421e8a34c5e71cad6fea27b9980567909e6a4698f09025692958e36d64ea9ed99ec6fb2e
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.11
   resolution: "@types/mdast@npm:3.0.11"
@@ -12324,6 +12349,9 @@ __metadata:
     "@tiptap/react": ^2.1.10
     "@tiptap/starter-kit": ^2.0.3
     "@types/formidable": ^2.0.5
+    "@types/jest": ^27.4.0
+    "@types/jsonwebtoken": ^9.0.3
+    "@types/lodash.get": ^4.4.7
     "@types/react": ^17.0.24
     "@types/react-dom": ^18.0.11
     "@urql/devtools": ^2.0.3