diff --git a/.env b/.env
index 4f195586d..f975063c9 100644
--- a/.env
+++ b/.env
@@ -32,3 +32,5 @@ HASURA_GRAPHQL_UNAUTHORIZED_ROLE=public
 # webhook
 ACCOUNT_EMAIL_SECRET=a random string that will be verify when calling the webhook
 PUBLICATION_SECRET=a random string that will be verify when calling the webhook
+
+NEXT_PUBLIC_CONTAINER_NAME=cdtn-dev
diff --git a/targets/frontend/package.json b/targets/frontend/package.json
index 640b8579c..268f618f7 100644
--- a/targets/frontend/package.json
+++ b/targets/frontend/package.json
@@ -64,7 +64,7 @@
     "strip-markdown": "^4.0.0",
     "styled-components": "^5.2.1",
     "swr": "^0.3.11",
-    "theme-ui": "0.6.0-alpha.3",
+    "theme-ui": "0.6.0-alpha.4",
     "unified": "^9.2.0",
     "unist-util-parents": "^1.0.3",
     "unist-util-select": "^3.0.4",
diff --git a/targets/frontend/src/components/alerts/AlertTitle.js b/targets/frontend/src/components/alerts/AlertTitle.js
index 0830a28df..2b812b942 100644
--- a/targets/frontend/src/components/alerts/AlertTitle.js
+++ b/targets/frontend/src/components/alerts/AlertTitle.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { IoIosLink, IoMdChatbubbles } from "react-icons/io";
@@ -28,7 +30,7 @@ export function AlertTitle({ alertId, info, ...props }) {
           </IconButton>
         </a>
       )}
-      <div sx={{ flex: "1 1 0" }} />
+      <Box sx={{ flex: "1 1 0" }} />
       <IconButton
         sx={{ justifyItems: "flex-end" }}
         variant="secondary"
diff --git a/targets/frontend/src/components/alerts/Status.js b/targets/frontend/src/components/alerts/Status.js
index 15a7adee1..7be2db155 100644
--- a/targets/frontend/src/components/alerts/Status.js
+++ b/targets/frontend/src/components/alerts/Status.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { IoIosCheckmark, IoIosClose } from "react-icons/io";
 import { useMutation } from "urql";
diff --git a/targets/frontend/src/components/button/CopyButton.js b/targets/frontend/src/components/button/CopyButton.js
index 54132d21c..ecb8722b7 100644
--- a/targets/frontend/src/components/button/CopyButton.js
+++ b/targets/frontend/src/components/button/CopyButton.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { IoMdCheckmark, IoMdClipboard } from "react-icons/io";
diff --git a/targets/frontend/src/components/button/GitlabButton.js b/targets/frontend/src/components/button/GitlabButton.js
index a870ca45f..f90daf66f 100644
--- a/targets/frontend/src/components/button/GitlabButton.js
+++ b/targets/frontend/src/components/button/GitlabButton.js
@@ -20,12 +20,7 @@ function fetchPipelines(url) {
 export function GitlabButton({ env, children }) {
   const [status, setStatus] = useState("disabled");
   const token = getToken();
-  const { error, data, isValidating, mutate } = useSWR(
-    `/api/pipelines`,
-    fetchPipelines
-  );
-
-  console.log("swr", { data, error, isValidating });
+  const { error, data, mutate } = useSWR(`/api/pipelines`, fetchPipelines);
 
   async function clickHandler() {
     if (isDisabled) {
diff --git a/targets/frontend/src/components/button/index.js b/targets/frontend/src/components/button/index.js
index bcb567c4e..975af2c01 100644
--- a/targets/frontend/src/components/button/index.js
+++ b/targets/frontend/src/components/button/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import {
   AccordionButton as ReachAccordionButton,
   useAccordionItemContext,
@@ -124,7 +126,7 @@ const OutlineButton = React.forwardRef(function _OutlineButton(
 OutlineButton.propTypes = buttonPropTypes;
 
 export const IconButton = React.forwardRef(function _IconButton(
-  { variant = "primary", size = "large", ...props },
+  { variant = "primary", size = "large", sx, ...props },
   ref
 ) {
   return (
@@ -147,6 +149,7 @@ export const IconButton = React.forwardRef(function _IconButton(
         fontSize: size,
         lineHeight: 1,
         overflow: "hidden",
+        ...sx,
       }}
     />
   );
diff --git a/targets/frontend/src/components/changes/ChangeGroup.js b/targets/frontend/src/components/changes/ChangeGroup.js
index dcd2253d7..742d74cc6 100644
--- a/targets/frontend/src/components/changes/ChangeGroup.js
+++ b/targets/frontend/src/components/changes/ChangeGroup.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { AccordionItem, AccordionPanel } from "@reach/accordion";
 import PropTypes from "prop-types";
 import { AccordionButton } from "src/components/button";
diff --git a/targets/frontend/src/components/changes/ViewDiff.js b/targets/frontend/src/components/changes/ViewDiff.js
index 200042195..84eb32f4d 100644
--- a/targets/frontend/src/components/changes/ViewDiff.js
+++ b/targets/frontend/src/components/changes/ViewDiff.js
@@ -1,10 +1,12 @@
-// adapted from https://github.com/davidmason/react-stylable-diff/blob/master/lib/react-diff.js
+/** @jsxImportSource theme-ui */
 
 import PropTypes from "prop-types";
 import { useState } from "react";
 
 var jsdiff = require("diff");
 
+// adapted from https://github.com/davidmason/react-stylable-diff/blob/master/lib/react-diff.js
+
 const fnMap = {
   chars: jsdiff.diffChars,
   json: jsdiff.diffJson,
diff --git a/targets/frontend/src/components/comments/Comment.js b/targets/frontend/src/components/comments/Comment.js
index 1d2223557..2f720ce7a 100644
--- a/targets/frontend/src/components/comments/Comment.js
+++ b/targets/frontend/src/components/comments/Comment.js
@@ -1,16 +1,20 @@
 import PropTypes from "prop-types";
-import { Box } from "theme-ui";
+import { Box, Text } from "theme-ui";
 
 export function Comment({ comment }) {
   return (
     <Box sx={{ alignItems: "center" }}>
       <Box>
-        <b sx={{ color: "secondary" }}>{comment.user.name}</b>{" "}
-        <span sx={{ color: "muted" }}>
+        <Text sx={{ color: "secondary", fontWeight: "600" }}>
+          {comment.user.name}
+        </Text>{" "}
+        <Text sx={{ color: "muted" }}>
           {new Date(comment.createdAt).toLocaleDateString()}
-        </span>
+        </Text>
       </Box>
-      <p sx={{ margin: 0, padding: 0 }}>{comment.text}</p>
+      <Text as="p" m="0" p="0">
+        {comment.text}
+      </Text>
     </Box>
   );
 }
diff --git a/targets/frontend/src/components/comments/CommentForm.js b/targets/frontend/src/components/comments/CommentForm.js
index 55366ae49..be90f0d23 100644
--- a/targets/frontend/src/components/comments/CommentForm.js
+++ b/targets/frontend/src/components/comments/CommentForm.js
@@ -1,6 +1,7 @@
 import VisuallyHidden from "@reach/visually-hidden";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
+import { Input, Label } from "theme-ui";
 
 import { Button } from "../button";
 
@@ -18,8 +19,8 @@ export function CommentForm({ onSubmit }) {
 
   return (
     <form onSubmit={handleSubmit(submitHandler)}>
-      <label sx={{ alignItems: "center", display: "flex" }}>
-        <input
+      <Label sx={{ alignItems: "center", display: "flex" }}>
+        <Input
           sx={{
             border: "1px solid",
             borderColor: "neutral",
@@ -37,7 +38,7 @@ export function CommentForm({ onSubmit }) {
         <VisuallyHidden>
           <Button type="submit">Envoyer le commentaire</Button>
         </VisuallyHidden>
-      </label>
+      </Label>
     </form>
   );
 }
diff --git a/targets/frontend/src/components/comments/CommentList.js b/targets/frontend/src/components/comments/CommentList.js
index 17b97ef0c..25d3a001a 100644
--- a/targets/frontend/src/components/comments/CommentList.js
+++ b/targets/frontend/src/components/comments/CommentList.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useLayoutEffect, useRef } from "react";
-import { Text } from "theme-ui";
+import { Box, Text } from "theme-ui";
 
 import { Stack } from "../layout/Stack";
 import { Comment, commentPropTypes } from "./Comment";
@@ -13,7 +13,7 @@ export function CommentList({ comments }) {
     }
   });
   return (
-    <div
+    <Box
       ref={scrollContainer}
       sx={{ maxHeight: "200px", overflow: "hidden", overflowY: "auto" }}
     >
@@ -28,7 +28,7 @@ export function CommentList({ comments }) {
           </Text>
         )}
       </Stack>
-    </div>
+    </Box>
   );
 }
 
diff --git a/targets/frontend/src/components/comments/index.js b/targets/frontend/src/components/comments/index.js
index f741846bb..8314fd122 100644
--- a/targets/frontend/src/components/comments/index.js
+++ b/targets/frontend/src/components/comments/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useMemo } from "react";
 import { useUser } from "src/hooks/useUser";
diff --git a/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js b/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js
index c38a31a8d..be4337439 100644
--- a/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js
+++ b/targets/frontend/src/components/editorialContent/ContentSections/MarkdownPreviewModal.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import micromark from "micromark";
 import PropTypes from "prop-types";
 import { useState } from "react";
@@ -33,6 +35,7 @@ export const MarkdownPreviewModal = ({ markdown }) => {
           maxHeight: "90vh",
           maxWidth: "50rem",
           overflow: "auto",
+          position: "absolute",
           top: "50%",
           transform: "translate(-50%, -50%)",
           width: "90vw",
diff --git a/targets/frontend/src/components/editorialContent/ContentSections/Section.js b/targets/frontend/src/components/editorialContent/ContentSections/Section.js
index 9b850cd48..832516163 100644
--- a/targets/frontend/src/components/editorialContent/ContentSections/Section.js
+++ b/targets/frontend/src/components/editorialContent/ContentSections/Section.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 import { useWatch } from "react-hook-form";
@@ -12,8 +14,9 @@ import { Button, IconButton } from "src/components/button";
 import { ReferenceBlocks } from "src/components/editorialContent/ReferenceBlocks";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { Stack } from "src/components/layout/Stack";
+import { Li } from "src/components/list";
 import { MarkdownLink } from "src/components/MarkdownLink";
-import { Container, Field, Flex, Label, Radio, Textarea } from "theme-ui";
+import { Box, Container, Field, Flex, Label, Radio, Textarea } from "theme-ui";
 
 import { MarkdownPreviewModal } from "./MarkdownPreviewModal";
 
@@ -64,7 +67,7 @@ const RootSection = ({
   }, [errors, setOpen]);
 
   return (
-    <li sx={{ listStyleType: "none" }}>
+    <Li>
       <Container
         key={block.key}
         bg="highlight"
@@ -78,7 +81,7 @@ const RootSection = ({
             }}
           >
             {numberOfBlocks > 1 && <DragHandle />}
-            <div sx={{ flex: "1 0 auto", mx: "small", my: "0" }}>
+            <Box mx="small" my="0" sx={{ flex: "1 0 auto" }}>
               <Field
                 name={`${name}.title`}
                 label="Titre de la section"
@@ -91,8 +94,8 @@ const RootSection = ({
                 })}
               />
               <FormErrorMessage errors={errors} fieldName="title" />
-            </div>
-            <div sx={{ mt: "medium" }}>
+            </Box>
+            <Box mt="medium">
               <Button
                 type="button"
                 variant="secondary"
@@ -109,9 +112,9 @@ const RootSection = ({
                   />
                 )}
               </Button>
-            </div>
+            </Box>
           </Flex>
-          <div sx={{ display: isOpen ? "block" : "none" }}>
+          <Box sx={{ display: isOpen ? "block" : "none" }}>
             <Stack>
               <div>
                 <Flex sx={{ justifyContent: "flex-start" }}>
@@ -150,7 +153,7 @@ const RootSection = ({
                   >
                     Graphique{" "}
                     <Radio
-                      sx={{ ml: "xxsmall" }}
+                      ml="xxsmall"
                       name={`${name}.type`}
                       value={TYPES.GRAPHIC}
                       defaultChecked={block.type === TYPES.GRAPHIC}
@@ -273,10 +276,10 @@ const RootSection = ({
                 />
               </div>
             </Stack>
-          </div>
+          </Box>
         </Stack>
       </Container>
-    </li>
+    </Li>
   );
 };
 
diff --git a/targets/frontend/src/components/editorialContent/ContentSections/index.js b/targets/frontend/src/components/editorialContent/ContentSections/index.js
index 7c7d104ed..cbd9c5830 100644
--- a/targets/frontend/src/components/editorialContent/ContentSections/index.js
+++ b/targets/frontend/src/components/editorialContent/ContentSections/index.js
@@ -4,12 +4,13 @@ import { useFieldArray } from "react-hook-form";
 import { IoMdAdd } from "react-icons/io";
 import { SortableContainer } from "react-sortable-hoc";
 import { Button } from "src/components/button";
+import { List } from "src/components/list";
 
 import { SortableSection, TYPES } from "./Section";
 
 const SortableSectionList = SortableContainer(
   ({ blocks, errors, name, ...props }) => (
-    <ul sx={{ listStyleType: "none", m: 0, p: 0 }}>
+    <List>
       {blocks.map((block, index) => (
         <SortableSection
           {...props}
@@ -23,7 +24,7 @@ const SortableSectionList = SortableContainer(
           blockIndex={index}
         />
       ))}
-    </ul>
+    </List>
   )
 );
 
@@ -35,7 +36,7 @@ export function ContentSections({ control, name, register, errors }) {
   });
 
   return (
-    <>
+    <div>
       <SortableSectionList
         blocks={blocks}
         control={control}
@@ -53,12 +54,13 @@ export function ContentSections({ control, name, register, errors }) {
         }}
       />
       <Button
-        sx={{ mb: "medium" }}
+        mb="medium"
         type="button"
         size="small"
         variant="secondary"
         onClick={() => append({ type: TYPES.MARKDOWN })}
       >
+        {/* todo refactor to a ButtonWithicon since sx props not working */}
         <IoMdAdd
           sx={{
             height: "iconSmall",
@@ -68,7 +70,7 @@ export function ContentSections({ control, name, register, errors }) {
         />
         Ajouter une section supplémentaire
       </Button>
-    </>
+    </div>
   );
 }
 
diff --git a/targets/frontend/src/components/editorialContent/Form.js b/targets/frontend/src/components/editorialContent/Form.js
index 6e20e87e4..16af9e984 100644
--- a/targets/frontend/src/components/editorialContent/Form.js
+++ b/targets/frontend/src/components/editorialContent/Form.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { ErrorMessage } from "@hookform/error-message";
 import slugify from "@socialgouv/cdtn-slugify";
 import { SOURCES } from "@socialgouv/cdtn-sources";
@@ -11,7 +13,7 @@ import { ContentSections } from "src/components/editorialContent/ContentSections
 import { ReferenceBlocks } from "src/components/editorialContent/ReferenceBlocks";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { MarkdownLink } from "src/components/MarkdownLink";
-import { Field, Flex, Label, NavLink, Textarea } from "theme-ui";
+import { Box, Field, Flex, Label, NavLink, Textarea } from "theme-ui";
 
 import { TYPES as SECTION_TYPES } from "./ContentSections/Section";
 
@@ -60,7 +62,7 @@ const EditorialContentForm = ({
   return (
     <form onSubmit={handleSubmit(addComputedFields(onSubmit))}>
       <>
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             sx={{ width: "10rem" }}
             name="document.date"
@@ -77,15 +79,15 @@ const EditorialContentForm = ({
             errors={errors}
             name="document.date"
             render={() => (
-              <div sx={{ color: "critical" }}>
+              <Box color="critical">
                 La date n’est pas formatée correctement. Le format attendu est
                 &quot;jour/mois/année&quot;
-              </div>
+              </Box>
             )}
           />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="title"
@@ -96,9 +98,9 @@ const EditorialContentForm = ({
             })}
           />
           <FormErrorMessage errors={errors} fieldName="title" />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="metaDescription"
@@ -106,9 +108,9 @@ const EditorialContentForm = ({
             defaultValue={content.metaDescription}
             ref={register}
           />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Label htmlFor={"description"}>Description</Label>
           <Textarea
             name="document.description"
@@ -120,8 +122,8 @@ const EditorialContentForm = ({
             })}
           />
           <FormErrorMessage errors={errors} fieldName="document.description" />
-        </div>
-        <div sx={{ mb: "small" }}>
+        </Box>
+        <Box mb="small">
           <Label htmlFor={"intro"}>
             Introduction&nbsp;
             <MarkdownLink />
@@ -133,7 +135,7 @@ const EditorialContentForm = ({
             defaultValue={content.document?.intro}
             ref={register}
           />
-        </div>
+        </Box>
         <ContentSections
           control={control}
           register={register}
@@ -149,7 +151,7 @@ const EditorialContentForm = ({
           />
         </Flex>
 
-        <Flex sx={{ alignItems: "center", mt: "medium" }}>
+        <Flex mt="medium" sx={{ alignItems: "center" }}>
           <Button
             variant="secondary"
             disabled={hasError || loading || !isDirty}
@@ -171,7 +173,7 @@ const EditorialContentForm = ({
                 e.preventDefault();
                 router.back();
               }}
-              sx={{ ml: "medium" }}
+              ml="medium"
             >
               Annuler
             </NavLink>
diff --git a/targets/frontend/src/components/editorialContent/ReferenceBlocks/References.js b/targets/frontend/src/components/editorialContent/ReferenceBlocks/References.js
index c3e25c1e6..3297f44f5 100644
--- a/targets/frontend/src/components/editorialContent/ReferenceBlocks/References.js
+++ b/targets/frontend/src/components/editorialContent/ReferenceBlocks/References.js
@@ -1,10 +1,12 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useEffect } from "react";
 import { useFieldArray } from "react-hook-form";
 import { IoMdClose } from "react-icons/io";
 import { Button } from "src/components/button";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
-import { Field, Flex } from "theme-ui";
+import { Box, Field, Flex } from "theme-ui";
 
 export const References = ({ control, nestName, register, errors }) => {
   const { fields: references, append, remove } = useFieldArray({
@@ -25,7 +27,7 @@ export const References = ({ control, nestName, register, errors }) => {
           sx={{ alignItems: "flex-start", flexWrap: "wrap" }}
           key={reference.key}
         >
-          <div sx={{ flex: "1 0 auto", mr: "small" }}>
+          <Box mr="small" sx={{ flex: "1 0 auto" }}>
             <Field
               type="text"
               label="Label"
@@ -42,8 +44,8 @@ export const References = ({ control, nestName, register, errors }) => {
               errors={errors}
               fieldName={`${nestName}[${index}].title`}
             />
-          </div>
-          <div sx={{ flex: "1 0 auto", mr: "small" }}>
+          </Box>
+          <Box mr="small" sx={{ flex: "1 0 auto" }}>
             <Field
               type="text"
               label="URL"
@@ -60,7 +62,7 @@ export const References = ({ control, nestName, register, errors }) => {
               errors={errors}
               fieldName={`${nestName}[${index}].url`}
             />
-          </div>
+          </Box>
           {references.length > 1 && (
             <Button
               type="button"
diff --git a/targets/frontend/src/components/editorialContent/ReferenceBlocks/index.js b/targets/frontend/src/components/editorialContent/ReferenceBlocks/index.js
index f8e9430e1..fe7eaec41 100644
--- a/targets/frontend/src/components/editorialContent/ReferenceBlocks/index.js
+++ b/targets/frontend/src/components/editorialContent/ReferenceBlocks/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useFieldArray } from "react-hook-form";
 import { IoMdAdd, IoMdTrash } from "react-icons/io";
diff --git a/targets/frontend/src/components/forms/ContentPicker/ContentSearch.js b/targets/frontend/src/components/forms/ContentPicker/ContentSearch.js
index 881565927..fda5e5b32 100644
--- a/targets/frontend/src/components/forms/ContentPicker/ContentSearch.js
+++ b/targets/frontend/src/components/forms/ContentPicker/ContentSearch.js
@@ -1,9 +1,11 @@
+/** @jsxImportSource theme-ui */
+
 import { getLabelBySource, SOURCES } from "@socialgouv/cdtn-sources";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import Autosuggest from "react-autosuggest";
 import { useDebouncedState } from "src/hooks/index";
-import { Input } from "theme-ui";
+import { Box, Input } from "theme-ui";
 import { useQuery } from "urql";
 
 const sources = [
@@ -134,15 +136,9 @@ function shouldRenderSuggestions(value) {
 }
 function renderSectionTitle(section) {
   return section.suggestions.length ? (
-    <div
-      sx={{
-        bg: "neutral",
-        fontWeight: "bold",
-        p: "xxsmall",
-      }}
-    >
+    <Box bg="neutral" fontWeight="bold" p="xxsmall">
       {section.title}
-    </div>
+    </Box>
   ) : null;
 }
 
diff --git a/targets/frontend/src/components/forms/ContentPicker/SortableList.js b/targets/frontend/src/components/forms/ContentPicker/SortableList.js
index df87a0771..0d5f0f0ec 100644
--- a/targets/frontend/src/components/forms/ContentPicker/SortableList.js
+++ b/targets/frontend/src/components/forms/ContentPicker/SortableList.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { getLabelBySource } from "@socialgouv/cdtn-sources";
 import { IoIosReorder, IoMdTrash } from "react-icons/io";
 import {
diff --git a/targets/frontend/src/components/forms/ErrorMessage.js b/targets/frontend/src/components/forms/ErrorMessage.js
index 378fc637b..b0573cf52 100644
--- a/targets/frontend/src/components/forms/ErrorMessage.js
+++ b/targets/frontend/src/components/forms/ErrorMessage.js
@@ -1,12 +1,13 @@
 import { ErrorMessage } from "@hookform/error-message";
 import PropTypes from "prop-types";
+import { Box } from "theme-ui";
 
 export function FormErrorMessage({ errors = {}, fieldName }) {
   return (
     <ErrorMessage
       errors={errors}
       name={fieldName}
-      render={({ message }) => <div sx={{ color: "critical" }}>{message}</div>}
+      render={({ message }) => <Box sx={{ color: "critical" }}>{message}</Box>}
     />
   );
 }
diff --git a/targets/frontend/src/components/forms/IconPicker.js b/targets/frontend/src/components/forms/IconPicker.js
index a69478306..9193548df 100644
--- a/targets/frontend/src/components/forms/IconPicker.js
+++ b/targets/frontend/src/components/forms/IconPicker.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { icons } from "@socialgouv/react-ui";
 import PropTypes from "prop-types";
 import { useState } from "react";
diff --git a/targets/frontend/src/components/forms/Lister/List.js b/targets/frontend/src/components/forms/Lister/List.js
index 672e715be..e98038c88 100644
--- a/targets/frontend/src/components/forms/Lister/List.js
+++ b/targets/frontend/src/components/forms/Lister/List.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { IoMdClose } from "react-icons/io";
 import { IconButton } from "src/components/button";
@@ -30,11 +32,7 @@ export const List = ({
         >
           <Flex>
             {!disabled && (
-              <Flex
-                sx={{
-                  mr: "xxsmall",
-                }}
-              >
+              <Flex mr="xxsmall">
                 <IconButton
                   sx={{ flex: "0 0 auto", padding: "small" }}
                   type="button"
diff --git a/targets/frontend/src/components/forms/Lister/index.js b/targets/frontend/src/components/forms/Lister/index.js
index a6a0d9991..c7c32cad4 100644
--- a/targets/frontend/src/components/forms/Lister/index.js
+++ b/targets/frontend/src/components/forms/Lister/index.js
@@ -6,7 +6,7 @@ import { Flex, Input } from "theme-ui";
 
 import { List } from "./List";
 
-const Lister = ({ defaultValue = "[]", disabled, ...props }) => {
+const Lister = ({ defaultValue = [], disabled, ...props }) => {
   return (
     <Controller
       {...props}
@@ -52,7 +52,7 @@ function RootLister({ disabled, value: entries, onChange, name }) {
       {!disabled && (
         <Flex>
           <Input
-            sx={{ p: "xxsmall" }}
+            p="xxsmall"
             id={name}
             name={name}
             ref={inputRef}
@@ -63,7 +63,8 @@ function RootLister({ disabled, value: entries, onChange, name }) {
             onClick={onAddEntry}
             variant="secondary"
             type="button"
-            sx={{ flex: "1 0 auto", ml: "xxsmall" }}
+            sx={{ flex: "1 0 auto" }}
+            ml="xxsmall"
           >
             Ajouter
           </Button>
diff --git a/targets/frontend/src/components/glossary/TermForm.js b/targets/frontend/src/components/glossary/TermForm.js
index 25d348622..ce7513332 100644
--- a/targets/frontend/src/components/glossary/TermForm.js
+++ b/targets/frontend/src/components/glossary/TermForm.js
@@ -8,7 +8,7 @@ import { Button } from "src/components/button";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { Lister } from "src/components/forms/Lister";
 import { MarkdownLink } from "src/components/MarkdownLink";
-import { Field, Flex, Label, NavLink, Textarea } from "theme-ui";
+import { Box, Field, Flex, Label, NavLink, Text, Textarea } from "theme-ui";
 import { useMutation } from "urql";
 
 const editTermMutation = `
@@ -67,7 +67,7 @@ export const TermForm = ({ term = {} }) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <>
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="term"
@@ -80,11 +80,11 @@ export const TermForm = ({ term = {} }) => {
           />
           <FormErrorMessage errors={errors} fieldName="term" />
           {duplicateTermError && (
-            <div sx={{ color: "critical" }}>Ce terme existe déjà !</div>
+            <Text color="critical">Ce terme existe déjà !</Text>
           )}
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Label htmlFor={"definition"}>
             Définition&nbsp;
             <MarkdownLink />
@@ -98,7 +98,7 @@ export const TermForm = ({ term = {} }) => {
               required: { message: "Ce champ est requis", value: true },
             })}
           />
-        </div>
+        </Box>
 
         <Flex
           sx={{
@@ -109,7 +109,7 @@ export const TermForm = ({ term = {} }) => {
             mb: "small",
           }}
         >
-          <div sx={{ flex: "1 1 auto" }}>
+          <Box sx={{ flex: "1 1 auto" }}>
             <Label htmlFor={"variants"}>Variantes / Synonymes</Label>
             <Lister
               control={control}
@@ -117,8 +117,8 @@ export const TermForm = ({ term = {} }) => {
               id="variants"
               defaultValue={term.variants}
             />
-          </div>
-          <div sx={{ flex: "1 1 auto" }}>
+          </Box>
+          <Box sx={{ flex: "1 1 auto" }}>
             <Label htmlFor={"abbreviations"}>Abréviations</Label>
             <Lister
               control={control}
@@ -126,8 +126,8 @@ export const TermForm = ({ term = {} }) => {
               id="abbreviations"
               defaultValue={term.abbreviations}
             />
-          </div>
-          <div sx={{ flex: "1 1 auto" }}>
+          </Box>
+          <Box sx={{ flex: "1 1 auto" }}>
             <Label htmlFor={"references"}>Références</Label>
             <Lister
               control={control}
@@ -135,7 +135,7 @@ export const TermForm = ({ term = {} }) => {
               id="references"
               defaultValue={term.references}
             />
-          </div>
+          </Box>
         </Flex>
 
         <Flex sx={{ alignItems: "center", mt: "medium" }}>
diff --git a/targets/frontend/src/components/glossary/TermList.js b/targets/frontend/src/components/glossary/TermList.js
index 2f2377585..21eceb7f3 100644
--- a/targets/frontend/src/components/glossary/TermList.js
+++ b/targets/frontend/src/components/glossary/TermList.js
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
-import { Flex } from "theme-ui";
+import { Li, List } from "src/components/list";
+import { Box, Flex, NavLink, Text } from "theme-ui";
 
 export const TermList = React.memo(function _TermList({ termsByLetters = [] }) {
   return (
@@ -8,25 +9,25 @@ export const TermList = React.memo(function _TermList({ termsByLetters = [] }) {
       {termsByLetters.map(
         ({ letter, terms }) =>
           terms.length > 0 && (
-            <div
+            <Box
               key={letter}
               sx={{
                 border: "2px solid",
                 borderColor: "neutral",
                 borderRadius: "small",
                 flex: "1 0 auto",
-                p: "xsmall",
               }}
+              p="xsmall"
             >
-              <h2 id={`ancre-${letter}`} sx={{ fontSize: "xlarge", mt: 0 }}>
+              <Text as="h2" id={`ancre-${letter}`} fontSize="xlarge" mt="0">
                 {letter}
-              </h2>
-              <ul sx={{ listStyleType: "none", m: 0, p: 0 }}>
+              </Text>
+              <List>
                 {terms.map(({ term, id }) => (
-                  <li key={id}>
+                  <Li key={id}>
                     <Link href={`/glossary/edit/${id}`} passHref>
                       {/* eslint-disable-next-line */}
-                      <a
+                      <NavLink
                         sx={{
                           display: "inline-block",
                           p: "0.2rem 0",
@@ -34,12 +35,12 @@ export const TermList = React.memo(function _TermList({ termsByLetters = [] }) {
                         }}
                       >
                         {term}
-                      </a>
+                      </NavLink>
                     </Link>
-                  </li>
+                  </Li>
                 ))}
-              </ul>
-            </div>
+              </List>
+            </Box>
           )
       )}
     </Flex>
diff --git a/targets/frontend/src/components/highlights/Form.js b/targets/frontend/src/components/highlights/Form.js
index f9f654fc1..f1f500833 100644
--- a/targets/frontend/src/components/highlights/Form.js
+++ b/targets/frontend/src/components/highlights/Form.js
@@ -6,7 +6,7 @@ import { IoMdCheckmark } from "react-icons/io";
 import { Button } from "src/components/button";
 import { ContentPicker } from "src/components/forms/ContentPicker/index";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
-import { Field, Flex, NavLink } from "theme-ui";
+import { Box, Field, Flex, NavLink } from "theme-ui";
 
 const HighlightsForm = React.memo(function _HighlightsForm({
   content = { contentRelations: [] },
@@ -28,7 +28,7 @@ const HighlightsForm = React.memo(function _HighlightsForm({
       )}
     >
       <>
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="title"
@@ -39,8 +39,8 @@ const HighlightsForm = React.memo(function _HighlightsForm({
             })}
           />
           <FormErrorMessage errors={errors} fieldName="title" />
-        </div>
-        <div sx={{ mb: "small" }}>
+        </Box>
+        <Box mb="small">
           <Field
             type="text"
             name="slug"
@@ -51,7 +51,7 @@ const HighlightsForm = React.memo(function _HighlightsForm({
             })}
           />
           <FormErrorMessage errors={errors} fieldName="slug" />
-        </div>
+        </Box>
 
         <h3>Contenus: </h3>
         <ContentPicker
diff --git a/targets/frontend/src/components/layout/Container.js b/targets/frontend/src/components/layout/Container.js
index 8f06b1def..d47193e40 100644
--- a/targets/frontend/src/components/layout/Container.js
+++ b/targets/frontend/src/components/layout/Container.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 export function Container(props) {
   return (
     <div
diff --git a/targets/frontend/src/components/layout/Stack.js b/targets/frontend/src/components/layout/Stack.js
index 581a9524b..8c30453f6 100644
--- a/targets/frontend/src/components/layout/Stack.js
+++ b/targets/frontend/src/components/layout/Stack.js
@@ -1,8 +1,10 @@
+import { Box } from "theme-ui";
+
 import { spacePropTypes } from "./spaces";
 
 export function Stack({ gap = "medium", ...props }) {
   return (
-    <div
+    <Box
       {...props}
       sx={{
         display: "grid",
diff --git a/targets/frontend/src/components/layout/header.js b/targets/frontend/src/components/layout/header.js
index d66744b00..d246d50b7 100644
--- a/targets/frontend/src/components/layout/header.js
+++ b/targets/frontend/src/components/layout/header.js
@@ -1,8 +1,10 @@
+/** @jsxImportSource theme-ui */
+
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { IoMdContact } from "react-icons/io";
 import { MenuButton, MenuItem } from "src/components/button";
-import { Box, Image, Text } from "theme-ui";
+import { Box, Flex, Image, NavLink, Text } from "theme-ui";
 
 import { useUser } from "../../hooks/useUser";
 
@@ -13,19 +15,19 @@ export function Header() {
     router.push("/user/account");
   }
   return (
-    <header
+    <Flex
+      as="header"
       sx={{
         boxShadow: "medium",
-        display: "flex",
         flexWrap: "wrap",
         justifyContent: "space-between",
         position: "relative",
-        px: ["small", "large"],
-        py: "xxsmall",
       }}
+      px={["small", "large"]}
+      py="xxsmall"
     >
       <Link href="/">
-        <a
+        <NavLink
           sx={{
             "&:hover": {
               color: "secondary",
@@ -47,19 +49,17 @@ export function Header() {
             }}
           />
           <Box paddingLeft="small">
-            <Text sx={{ fontSize: "large", lineHeight: "heading" }}>
+            <Box sx={{ fontSize: "large", lineHeight: "heading" }}>
               veille & administration
-            </Text>
-            <Text sx={{ fontSize: "small", fontWeight: 300 }}>
+            </Box>
+            <Box sx={{ fontSize: "small", fontWeight: 300 }}>
               Code du travail numérique
-            </Text>
+            </Box>
           </Box>
-        </a>
+        </NavLink>
       </Link>
       {user && (
-        <div
-          sx={{ alignItems: "center", display: "flex", flexDirection: "row" }}
-        >
+        <Flex sx={{ alignItems: "center", flexDirection: "row" }}>
           {" "}
           <IoMdContact sx={{ fontSize: "icons" }} />
           <Text color="heading" sx={{ fontWeight: "semibold", px: "xsmall" }}>
@@ -69,8 +69,8 @@ export function Header() {
             <MenuItem onSelect={updateProfile}>Mon compte</MenuItem>
             <MenuItem onSelect={logout}>Déconnexion</MenuItem>
           </MenuButton>
-        </div>
+        </Flex>
       )}
-    </header>
+    </Flex>
   );
 }
diff --git a/targets/frontend/src/components/list/index.js b/targets/frontend/src/components/list/index.js
index ae6929f9d..babb90ba6 100644
--- a/targets/frontend/src/components/list/index.js
+++ b/targets/frontend/src/components/list/index.js
@@ -1,10 +1,11 @@
 import PropTypes from "prop-types";
+import { Box } from "theme-ui";
 
 export function List({ className, children }) {
   return (
-    <ul className={className} sx={{ margin: 0, px: 0 }}>
+    <Box as="ul" className={className} m="0" px="0">
       {children}
-    </ul>
+    </Box>
   );
 }
 List.propTypes = {
@@ -13,7 +14,11 @@ List.propTypes = {
 };
 
 export function Li({ children }) {
-  return <li sx={{ listStyle: "none" }}>{children}</li>;
+  return (
+    <Box as="li" sx={{ listStyle: "none" }}>
+      {children}
+    </Box>
+  );
 }
 Li.propTypes = {
   children: PropTypes.node,
diff --git a/targets/frontend/src/components/storage/DropZone.js b/targets/frontend/src/components/storage/DropZone.js
index 51b29e4b8..ab8271839 100644
--- a/targets/frontend/src/components/storage/DropZone.js
+++ b/targets/frontend/src/components/storage/DropZone.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
-import { Spinner } from "theme-ui";
+import { Box, Input, Spinner } from "theme-ui";
 
 const defaultStyles = {
   border: "2px dotted silver",
@@ -35,10 +35,10 @@ export function DropZone({ onDrop: onDropCallback, uploading, customStyles }) {
     delete defaultStyles.backgroundColor;
   }
   return (
-    <div {...getRootProps()} sx={{ ...defaultStyles, ...customStyles }}>
-      <input {...getInputProps()} />
+    <Box {...getRootProps()} sx={{ ...defaultStyles, ...customStyles }}>
+      <Input {...getInputProps()} />
       {uploading ? <Spinner /> : <p>Glissez vos fichiers ici</p>}
-    </div>
+    </Box>
   );
 }
 
diff --git a/targets/frontend/src/components/tabs/index.js b/targets/frontend/src/components/tabs/index.js
index 42940b976..8135a0bf0 100644
--- a/targets/frontend/src/components/tabs/index.js
+++ b/targets/frontend/src/components/tabs/index.js
@@ -1,8 +1,10 @@
 import PropTypes from "prop-types";
+import { Box } from "theme-ui";
 
 export function Tabs(props) {
   return (
-    <ul
+    <Box
+      as="ul"
       sx={{
         borderBottom: "1px solid",
         borderColor: "neutral",
@@ -19,7 +21,8 @@ export function Tabs(props) {
 
 export function TabItem({ selected, controls, ...props }) {
   return (
-    <li
+    <Box
+      as="li"
       role="tab"
       sx={{
         border: "1px solid",
diff --git a/targets/frontend/src/components/themes/Form.js b/targets/frontend/src/components/themes/Form.js
index 237b9308a..a22ceeccf 100644
--- a/targets/frontend/src/components/themes/Form.js
+++ b/targets/frontend/src/components/themes/Form.js
@@ -5,7 +5,7 @@ import { Button } from "src/components/button";
 import { ContentPicker } from "src/components/forms/ContentPicker/index";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { IconPicker } from "src/components/forms/IconPicker";
-import { Field, Flex, Label, NavLink, Textarea } from "theme-ui";
+import { Box, Field, Flex, Label, NavLink, Textarea } from "theme-ui";
 
 const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
   const { control, register, handleSubmit, errors } = useForm();
@@ -21,7 +21,7 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <>
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="title"
@@ -32,9 +32,9 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
             })}
           />
           <FormErrorMessage errors={errors} fieldName="title" />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="shortTitle"
@@ -42,9 +42,9 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
             defaultValue={theme.document?.shortTitle}
             ref={register}
           />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Field
             type="text"
             name="metaDescription"
@@ -52,9 +52,9 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
             defaultValue={theme.metaDescription}
             ref={register}
           />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Label htmlFor={"description"}>Description</Label>
           <Textarea
             name="description"
@@ -63,9 +63,9 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
             defaultValue={theme.document?.description}
             ref={register}
           />
-        </div>
+        </Box>
 
-        <div sx={{ mb: "small" }}>
+        <Box mb="small">
           <Label htmlFor={"icon"}>Icône</Label>
           <IconPicker
             control={control}
@@ -73,9 +73,9 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
             id="icon"
             defaultValue={theme.document?.icon}
           />
-        </div>
+        </Box>
 
-        <div sx={{ my: "larger" }}>
+        <Box my="larger">
           <h2>Contenus du thème</h2>
           <ContentPicker
             control={control}
@@ -92,7 +92,7 @@ const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
               []
             }
           />
-        </div>
+        </Box>
 
         <Flex sx={{ alignItems: "center", mt: "medium" }}>
           <Button variant="secondary" disabled={hasError || loading}>
diff --git a/targets/frontend/src/components/themes/List.js b/targets/frontend/src/components/themes/List.js
index dcf7d23df..bd920b431 100644
--- a/targets/frontend/src/components/themes/List.js
+++ b/targets/frontend/src/components/themes/List.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import Link from "next/link";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
diff --git a/targets/frontend/src/components/themes/Map.js b/targets/frontend/src/components/themes/Map.js
index 72159198e..1b6e99021 100644
--- a/targets/frontend/src/components/themes/Map.js
+++ b/targets/frontend/src/components/themes/Map.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import * as d3 from "d3";
 import { hierarchy, tree } from "d3-hierarchy";
 import { useRouter } from "next/router";
diff --git a/targets/frontend/src/components/themes/MapModal.js b/targets/frontend/src/components/themes/MapModal.js
index 1848b23b4..97350df39 100644
--- a/targets/frontend/src/components/themes/MapModal.js
+++ b/targets/frontend/src/components/themes/MapModal.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { IoMdMap } from "react-icons/io";
 import { Button } from "src/components/button";
 import { Dialog } from "src/components/dialog";
-import { Flex } from "theme-ui";
+import { Box, Flex } from "theme-ui";
 
 import { Map } from "./Map";
 
@@ -33,16 +33,16 @@ export const MapModal = () => {
           width: "90vw",
         }}
       >
-        <div
+        <Box
           sx={{
             maxHeight: "90vh",
             maxWidth: "100%",
             overflow: "scroll",
-            padding: "2rem",
           }}
+          p="2rem"
         >
           <Map setShowThemeMap={setShowThemeMap} />
-        </div>
+        </Box>
       </Dialog>
     </>
   );
diff --git a/targets/frontend/src/components/user/List.js b/targets/frontend/src/components/user/List.js
index 2d3f64852..d7c91cc6b 100644
--- a/targets/frontend/src/components/user/List.js
+++ b/targets/frontend/src/components/user/List.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import { useState } from "react";
diff --git a/targets/frontend/src/pages/contenus/edit/[id].js b/targets/frontend/src/pages/contenus/edit/[id].js
index 605c60c92..b76a46d4d 100644
--- a/targets/frontend/src/pages/contenus/edit/[id].js
+++ b/targets/frontend/src/pages/contenus/edit/[id].js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import slugify from "@socialgouv/cdtn-slugify";
 import { SOURCES } from "@socialgouv/cdtn-sources";
 import { useRouter } from "next/router";
@@ -14,7 +16,7 @@ import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { previewContentAction } from "src/lib/preview/preview.gql";
 import { RELATIONS } from "src/lib/relations";
-import { Spinner } from "theme-ui";
+import { Flex, Spinner } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
 const getContentQuery = `
@@ -216,12 +218,11 @@ export function EditInformationPage() {
             </Dialog>
             {content.cdtnId && (
               <>
-                <div
+                <Flex
                   sx={{
-                    display: "flex",
                     justifyContent: "flex-end",
-                    mb: "small",
                   }}
+                  mb="small"
                 >
                   <Button
                     type="button"
@@ -238,7 +239,7 @@ export function EditInformationPage() {
                     />
                     Supprimer le contenu
                   </Button>
-                </div>
+                </Flex>
                 <ContentForm
                   content={content}
                   loading={updating || deleting}
diff --git a/targets/frontend/src/pages/contenus/index.js b/targets/frontend/src/pages/contenus/index.js
index 9f60fbbcb..9d9f681b9 100644
--- a/targets/frontend/src/pages/contenus/index.js
+++ b/targets/frontend/src/pages/contenus/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { getLabelBySource, SOURCES } from "@socialgouv/cdtn-sources";
 import Link from "next/link";
 import { useRouter } from "next/router";
diff --git a/targets/frontend/src/pages/glossary/edit/[[...id]].js b/targets/frontend/src/pages/glossary/edit/[[...id]].js
index 6db775986..52c069a55 100644
--- a/targets/frontend/src/pages/glossary/edit/[[...id]].js
+++ b/targets/frontend/src/pages/glossary/edit/[[...id]].js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { IoMdTrash } from "react-icons/io";
@@ -9,7 +11,7 @@ import { Inline } from "src/components/layout/Inline";
 import { Stack } from "src/components/layout/Stack";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
-import { Spinner } from "theme-ui";
+import { Flex, Spinner } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
 const getTermQuery = `
@@ -83,12 +85,11 @@ export function EditTermPage() {
                     </Inline>
                   </>
                 </Dialog>
-                <div
+                <Flex
                   sx={{
-                    display: "flex",
                     justifyContent: "flex-end",
-                    mb: "small",
                   }}
+                  mb="small"
                 >
                   <Button
                     type="button"
@@ -101,7 +102,7 @@ export function EditTermPage() {
                     />
                     Supprimer le terme
                   </Button>
-                </div>
+                </Flex>
               </>
             )}
             <TermForm term={term} />
diff --git a/targets/frontend/src/pages/glossary/index.js b/targets/frontend/src/pages/glossary/index.js
index 6b2391613..d0e8742a2 100644
--- a/targets/frontend/src/pages/glossary/index.js
+++ b/targets/frontend/src/pages/glossary/index.js
@@ -8,7 +8,7 @@ import { Stack } from "src/components/layout/Stack";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { useDebouncedState } from "src/hooks/";
-import { Flex, Input, Label, Spinner } from "theme-ui";
+import { Flex, Input, Label, NavLink, Spinner, Text } from "theme-ui";
 import { useQuery } from "urql";
 
 const getGlossaryQuery = `
@@ -79,37 +79,49 @@ export function GlossaryPage() {
             <Flex sx={{ justifyContent: "flex-end" }}>
               <AddATermButton />
             </Flex>
-            <ul
+            <Flex
+              as="ul"
+              p="0"
               sx={{
+                alignItems: "center",
                 display: "flex",
                 flex: "1 1 auto",
                 flexWrap: "wrap",
                 listStyleType: "none",
-                m: 0,
-                p: 0,
               }}
             >
               {termsByLetters.map(({ letter, terms }) => (
-                <li key={`letter-${letter}`} sx={{ fontSize: "large" }}>
+                <li key={`letter-${letter}`}>
                   {terms.length > 0 ? (
-                    <a
+                    <NavLink
                       href={`#ancre-${letter}`}
-                      sx={{ padding: "xxsmall", ...linkStyles }}
+                      sx={{
+                        fontSize: "large",
+                        textDecoration: "underline",
+                        ...linkStyles,
+                        padding: "xxsmall",
+                      }}
                     >
                       {letter}
-                    </a>
+                    </NavLink>
                   ) : (
-                    <span sx={{ color: "muted", padding: "xxsmall" }}>
+                    <Text
+                      sx={{
+                        color: "muted",
+                        fontSize: "large",
+                        padding: "xxsmall",
+                      }}
+                    >
                       {letter}
-                    </span>
+                    </Text>
                   )}
                 </li>
               ))}
-            </ul>
-            <form
+            </Flex>
+            <Flex
+              as="form"
               sx={{
                 alignItems: "center",
-                display: "flex",
                 justifyContent: "flex-start",
               }}
             >
@@ -145,7 +157,7 @@ export function GlossaryPage() {
                   <IoMdCloseCircleOutline />
                 </IconButton>
               )}
-            </form>
+            </Flex>
             {isSearching ? (
               <Spinner />
             ) : displayedTerms?.length ? (
diff --git a/targets/frontend/src/pages/kali/blocks.js b/targets/frontend/src/pages/kali/blocks.js
index 30a2e39e6..059fb3b2c 100644
--- a/targets/frontend/src/pages/kali/blocks.js
+++ b/targets/frontend/src/pages/kali/blocks.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { useEffect, useMemo, useState } from "react";
 import { IoMdSave } from "react-icons/io";
 import { Button } from "src/components/button";
diff --git a/targets/frontend/src/pages/login.js b/targets/frontend/src/pages/login.js
index 1c7c86d0f..cedf5dbe7 100644
--- a/targets/frontend/src/pages/login.js
+++ b/targets/frontend/src/pages/login.js
@@ -4,7 +4,7 @@ import { Header } from "src/components/layout/header";
 import LoginForm from "src/components/login";
 import { setToken } from "src/lib/auth/token";
 import { request } from "src/lib/request";
-import { Box } from "theme-ui";
+import { Box, Flex } from "theme-ui";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -35,10 +35,9 @@ export default function LoginPage() {
         <title>login | Admin cdtn</title>
       </Head>
       <Header />
-      <div
+      <Flex
         sx={{
           alignItems: "center",
-          display: "flex",
           minHeight: "90vh",
         }}
       >
@@ -49,7 +48,7 @@ export default function LoginPage() {
             onSuccess={goAdmin}
           />
         </Box>
-      </div>
+      </Flex>
     </>
   );
 }
diff --git a/targets/frontend/src/pages/storage/[container]/index.js b/targets/frontend/src/pages/storage/[container]/index.js
index 946aed6df..e920723a9 100644
--- a/targets/frontend/src/pages/storage/[container]/index.js
+++ b/targets/frontend/src/pages/storage/[container]/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import { useRouter } from "next/router";
 import prettyBytes from "pretty-bytes";
 import { useEffect, useRef, useState } from "react";
@@ -9,6 +11,7 @@ import {
 import { Button, IconButton } from "src/components/button";
 import { CopyButton } from "src/components/button/CopyButton";
 import { Layout } from "src/components/layout/auth.layout";
+import { Li, List } from "src/components/list";
 import { DropZone } from "src/components/storage/DropZone";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
@@ -17,7 +20,17 @@ import { getToken } from "src/lib/auth/token";
 import { timeSince } from "src/lib/duration";
 import { request } from "src/lib/request";
 import useSWR, { mutate } from "swr";
-import { Card, Field, Flex, Label, Message, Select, Spinner } from "theme-ui";
+import {
+  Box,
+  Card,
+  Field,
+  Flex,
+  Label,
+  Message,
+  Select,
+  Spinner,
+  Text,
+} from "theme-ui";
 
 const listFiles = (container) => () =>
   request(`/api/storage/${container}`, {
@@ -109,12 +122,7 @@ function FilesPage() {
           });
         }}
       />
-      <form
-        sx={{
-          display: "flex",
-          my: "medium",
-        }}
-      >
+      <Flex as="form" my="medium">
         <Flex sx={{ alignItems: "flex-end" }}>
           <Field
             id="search"
@@ -172,15 +180,15 @@ function FilesPage() {
             <option value="word">document word</option>
           </Select>
         </Flex>
-      </form>
+      </Flex>
       {isSearching || isValidating ? (
         <Spinner />
       ) : displayedFiles.length > 0 ? (
         <>
-          <ul sx={{ listStyleType: "none", m: 0, p: 0 }}>
+          <List sx={{ listStyleType: "none", m: 0, p: 0 }}>
             {displayedFiles.map((file) => {
               return (
-                <li key={file.name}>
+                <Li key={file.name}>
                   <Card
                     as="a"
                     target="_blank"
@@ -200,8 +208,8 @@ function FilesPage() {
                     <IoMdDownload
                       sx={{ flex: "0 0 auto", mr: "small", ...iconSx }}
                     />
-                    <div sx={{ flex: "1 1 auto", minWidth: 0 }}>
-                      <div
+                    <Box sx={{ flex: "1 1 auto", minWidth: 0 }}>
+                      <Box
                         sx={{
                           fontSize: "1.1rem",
                           fontWeight: "bold",
@@ -211,13 +219,13 @@ function FilesPage() {
                         }}
                       >
                         {file.name}
-                      </div>
-                      <div sx={{ fontSize: "small" }}>
-                        <span sx={{ fontWeight: "bold" }}>Poids&nbsp;:</span>{" "}
+                      </Box>
+                      <Box sx={{ fontSize: "small" }}>
+                        <Text sx={{ fontWeight: "bold" }}>Poids&nbsp;:</Text>{" "}
                         {prettyBytes(file.contentLength)} | Mise en ligne il y a{" "}
                         {timeSince(file.lastModified)}
-                      </div>
-                    </div>
+                      </Box>
+                    </Box>
                     <CopyButton
                       {...buttonProps}
                       variant="secondary"
@@ -239,10 +247,10 @@ function FilesPage() {
                       Supprimer
                     </Button>
                   </Card>
-                </li>
+                </Li>
               );
             })}
-          </ul>
+          </List>
         </>
       ) : (
         <>Pas de résultats</>
diff --git a/targets/frontend/src/pages/themes/[[...id]].js b/targets/frontend/src/pages/themes/[[...id]].js
index 735a588f1..81b4b0aca 100644
--- a/targets/frontend/src/pages/themes/[[...id]].js
+++ b/targets/frontend/src/pages/themes/[[...id]].js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import Link from "next/link";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
@@ -10,7 +12,7 @@ import { MapModal } from "src/components/themes/MapModal";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { RELATIONS } from "src/lib/relations";
-import { Box, Card, Flex, Spinner } from "theme-ui";
+import { Box, Card, Flex, Spinner, Text } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
 const getThemeQuery = `
@@ -126,7 +128,9 @@ export function ThemePage() {
                   </Button>
                 </Link>
               </Flex>
-              <h3 sx={{ mr: "small" }}>Niveau précédent</h3>
+              <Text as="h3" mr="small">
+                Niveau précédent
+              </Text>
               {themeData?.parentRelations.length === 0 ? (
                 <ParentLink>Racine des thèmes</ParentLink>
               ) : (
@@ -137,7 +141,9 @@ export function ThemePage() {
                 ))
               )}
 
-              <h3 sx={{ mt: "medium" }}>Sous-thèmes</h3>
+              <Text as="h3" mt="medium">
+                Sous-thèmes
+              </Text>
             </>
             <List
               relations={
@@ -166,9 +172,9 @@ export function ThemePage() {
 export default withCustomUrqlClient(withUserProvider(ThemePage));
 
 const AddAThemeButton = ({ themeId }) => (
-  <Box sx={{ mt: "medium" }}>
+  <Box mt="medium">
     <Link href={`/themes/${themeId ? `${themeId}/` : ""}create`} passHref>
-      <Button as="a" sx={{ mr: "medium" }}>
+      <Button as="a" mr="medium">
         <IoMdAdd
           sx={{ height: "iconMedium", mr: "xxsmall", width: "iconMedium" }}
         />
@@ -192,9 +198,9 @@ const ParentLink = ({ id, ...props }) => (
         color: "text",
         cursor: "pointer",
         display: "block",
-        mb: "small",
         textDecoration: "none",
       }}
+      mb="small"
     >
       <Flex sx={{ alignItems: "center" }}>
         <IoIosArrowDropleftCircle
diff --git a/targets/frontend/src/pages/themes/edit/[id].js b/targets/frontend/src/pages/themes/edit/[id].js
index 48dfc1970..b058daa82 100644
--- a/targets/frontend/src/pages/themes/edit/[id].js
+++ b/targets/frontend/src/pages/themes/edit/[id].js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import slugify from "@socialgouv/cdtn-slugify";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -15,7 +17,7 @@ import {
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { RELATIONS } from "src/lib/relations";
-import { Message, Spinner } from "theme-ui";
+import { Flex, Message, Spinner } from "theme-ui";
 import { useMutation, useQuery } from "urql";
 
 const getThemeQuery = `
@@ -157,12 +159,12 @@ export function EditThemePage() {
             </Dialog>
             {theme?.cdtnId && (
               <>
-                <div
+                <Flex
                   sx={{
                     display: "flex",
                     justifyContent: "flex-end",
-                    mb: "small",
                   }}
+                  mb="small"
                 >
                   {theme?.childRelations.length ? (
                     <Message variant="secondary">
@@ -186,7 +188,7 @@ export function EditThemePage() {
                       Supprimer le thème
                     </Button>
                   )}
-                </div>
+                </Flex>
               </>
             )}
             <ThemeForm
diff --git a/yarn.lock b/yarn.lock
index f92d7b915..678c023ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2979,7 +2979,7 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@theme-ui/color-modes@0.6.0-alpha.4", "@theme-ui/color-modes@^0.6.0-alpha.3":
+"@theme-ui/color-modes@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.6.0-alpha.4.tgz#29c28ddfb6661e602b28ffeb63c1be528b3b2bfe"
   integrity sha512-ITxREmiUL5lkAhndLIWP3GYwfOr+iYG+OAiHRFgUoqxM7fH+5YI2UM44VerCC6HGMtoi+QYCymNnpwbwCrm7yw==
@@ -2989,7 +2989,7 @@
     "@theme-ui/css" "0.6.0-alpha.4"
     deepmerge "^4.2.2"
 
-"@theme-ui/components@^0.6.0-alpha.3":
+"@theme-ui/components@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.6.0-alpha.4.tgz#b1ecf71c2d60e03af99042082e3a11679e61faff"
   integrity sha512-7szq3qLp4VGSxqSK0ObsX5xAOLrE3lvuJvi50aR1yRM8Sdoz/It1xLxQhjEFfnvXM8TBlJehhrqp76QbkusMBA==
@@ -3002,16 +3002,6 @@
     "@theme-ui/css" "0.6.0-alpha.4"
     "@types/styled-system" "^5.1.10"
 
-"@theme-ui/core@0.6.0-alpha.1":
-  version "0.6.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.6.0-alpha.1.tgz#2d424a4ef95166a66a21f8d1c7e4907ea71215a3"
-  integrity sha512-bk7CjHONGZnAfi4sLLXZMl3aSARrFslD9hnJMct68L0dI+MO7f5Qrl5q1ClJkj+7fiTswQ9U2rbgXLYMzI2nYw==
-  dependencies:
-    "@emotion/react" "^11.1.1"
-    "@theme-ui/css" "0.6.0-alpha.1"
-    "@theme-ui/parse-props" "0.6.0-alpha.1"
-    deepmerge "^4.2.2"
-
 "@theme-ui/core@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.6.0-alpha.4.tgz#2fe0bfe2a452befd496f64dd18a3a9c9de12e410"
@@ -3022,14 +3012,6 @@
     "@theme-ui/parse-props" "0.6.0-alpha.4"
     deepmerge "^4.2.2"
 
-"@theme-ui/css@0.6.0-alpha.1":
-  version "0.6.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.6.0-alpha.1.tgz#461b0789f1b5a4c13503ee0350c3ff3bff11e766"
-  integrity sha512-jfT2PUD3K7I4BoQVQu7e0LgFuGp9X32s/daAIkGBlnH8hAI/KeL311BRnnK26YVFCv/4kvcYHmyeC/IjiO/46Q==
-  dependencies:
-    "@emotion/react" "^11.1.1"
-    csstype "^3.0.5"
-
 "@theme-ui/css@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.6.0-alpha.4.tgz#1207af2f4968528931580be650fa492d28dee397"
@@ -3038,17 +3020,6 @@
     "@emotion/react" "^11.1.1"
     csstype "^3.0.5"
 
-"@theme-ui/mdx@0.6.0-alpha.1":
-  version "0.6.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.6.0-alpha.1.tgz#13a84246e37b3889426ee337fecdda9b92577d20"
-  integrity sha512-BNIdRKIuIeDRwccGhb2FnHnNnaRPXAvWZldFsiPNYlA9wVGpQPkKj5je6e2+TYOd8g8ii9PplVnpKeAIu2XR9g==
-  dependencies:
-    "@emotion/react" "^11.1.1"
-    "@emotion/styled" "^11.0.0"
-    "@mdx-js/react" "^1.0.0"
-    "@theme-ui/core" "0.6.0-alpha.1"
-    "@theme-ui/css" "0.6.0-alpha.1"
-
 "@theme-ui/mdx@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.6.0-alpha.4.tgz#3c59a30c9c057629771f04567966072f25007744"
@@ -3060,14 +3031,6 @@
     "@theme-ui/core" "0.6.0-alpha.4"
     "@theme-ui/css" "0.6.0-alpha.4"
 
-"@theme-ui/parse-props@0.6.0-alpha.1":
-  version "0.6.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.6.0-alpha.1.tgz#145a238d3011c76ebe045cf97843a5033e117d53"
-  integrity sha512-HdD+rEu2wYh9PVuOGjY8AUv/gfJ3z7GYzH22hZ4HPB0MFlRhreCsZHHFG8ufjvqdxnDeQTihzW0i7PjX7DHryw==
-  dependencies:
-    "@emotion/react" "^11.1.1"
-    "@theme-ui/css" "0.6.0-alpha.1"
-
 "@theme-ui/parse-props@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.6.0-alpha.4.tgz#819147c2d7897a3580c6eea978b5c284e6e8a83f"
@@ -3076,7 +3039,7 @@
     "@emotion/react" "^11.1.1"
     "@theme-ui/css" "0.6.0-alpha.4"
 
-"@theme-ui/theme-provider@^0.6.0-alpha.3":
+"@theme-ui/theme-provider@0.6.0-alpha.4":
   version "0.6.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.6.0-alpha.4.tgz#aa61cbb2b2343f97541e3ddcf205670fa8ee804b"
   integrity sha512-584vX116SOeVe+Z8KHl+IMGWg2+rt2C74g6xcEyLRq3ehnBMY4Lji1CBx/9GFEF0W2LM6CNHPSrMeBVtOXb+Ng==
@@ -13913,17 +13876,17 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-theme-ui@0.6.0-alpha.3:
-  version "0.6.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.6.0-alpha.3.tgz#0157676995c15da690dc01ed1744ecab1960409d"
-  integrity sha512-o+6LoXmM/xDnzgeofMgbb6OOwOp43PMgTQ0gi56F2J1smC6usfBPBMM6DDvh7ELZYN23eUW1tIPkPLQoxY7x8g==
-  dependencies:
-    "@theme-ui/color-modes" "^0.6.0-alpha.3"
-    "@theme-ui/components" "^0.6.0-alpha.3"
-    "@theme-ui/core" "0.6.0-alpha.1"
-    "@theme-ui/css" "0.6.0-alpha.1"
-    "@theme-ui/mdx" "0.6.0-alpha.1"
-    "@theme-ui/theme-provider" "^0.6.0-alpha.3"
+theme-ui@0.6.0-alpha.4:
+  version "0.6.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.6.0-alpha.4.tgz#aba6de398847697bbc6ab37bb2b626b3db64c6d0"
+  integrity sha512-VOGNpPO3eDKmM5QZZ7efWnXqnrow1hPbimR7bdQvBX7FcImGOG387uHVlGm4rGyIZvnQW/ExwQW+zJPsaxznlQ==
+  dependencies:
+    "@theme-ui/color-modes" "0.6.0-alpha.4"
+    "@theme-ui/components" "0.6.0-alpha.4"
+    "@theme-ui/core" "0.6.0-alpha.4"
+    "@theme-ui/css" "0.6.0-alpha.4"
+    "@theme-ui/mdx" "0.6.0-alpha.4"
+    "@theme-ui/theme-provider" "0.6.0-alpha.4"
 
 thenify-all@^1.0.0:
   version "1.6.0"