diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
index eeec2809..4034068c 100644
--- a/packages/frontend/src/features/menu/ClauseMenu.tsx
+++ b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -7,13 +7,15 @@ import { Divider, Flex, Stack, styled } from "#styled-system/jsx";
 import { Fragment } from "react/jsx-runtime";
 import { MenuTitle } from "./MenuTitle";
 import type { ModalContentProps } from "./MenuButton";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { css } from "#styled-system/css";
 import { Clause_v2 } from "@cr-vif/electric-client/frontend";
 import Input from "@codegouvfr/react-dsfr/Input";
 import { FormProvider, useFieldArray, useForm, useFormContext } from "react-hook-form";
 import { useMutation } from "@tanstack/react-query";
+import Select from "@codegouvfr/react-dsfr/Select";
+import { v4 } from "uuid";
 
 export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & ModalContentProps) => {
   const user = useUser()!;
@@ -31,6 +33,14 @@ export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & M
 
   if (!clausesQuery.updatedAt) return <Spinner />;
 
+  if (isNational)
+    return (
+      <>
+        <ClauseTitle isNational={isNational} buttons={null} {...props} />
+        <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
+      </>
+    );
+
   return (
     <ClauseForm
       clauses={clausesQuery.results?.map((c) => ({ ...c, text: c.text?.replaceAll("\\n", "\n") ?? "" })) ?? []}
@@ -54,13 +64,17 @@ const getDiff = (baseClauses: Clause_v2[], modifiedClauses: Clause_v2[]) => {
 
   return { newClauses: newClauses, updatedClauses: updatedClauses, deletedClauses };
 };
+type Mode = "view" | "add" | "edit";
 
 const ClauseForm = ({
   clauses,
   isNational,
   ...props
 }: { clauses: Clause_v2[]; isNational: boolean } & ModalContentProps) => {
-  const [isEditing, setIsEditing] = useState(false);
+  const [mode, setMode] = useState<Mode>("view");
+
+  const isEditing = mode === "edit";
+  const isAdding = mode === "add";
 
   const form = useForm<Form>({
     defaultValues: {
@@ -75,6 +89,7 @@ const ClauseForm = ({
   const { fields } = useFieldArray({
     name: "clauses",
     control: form.control,
+    keyName: "_id",
   });
 
   const applyDiffMutation = useMutation(
@@ -87,7 +102,7 @@ const ClauseForm = ({
       }
     },
     {
-      onSuccess: () => setIsEditing(false),
+      onSuccess: () => setMode("view"),
     },
   );
 
@@ -97,70 +112,107 @@ const ClauseForm = ({
   };
 
   const fieldsWithIndex = fields.map((field, index) => ({ ...field, _index: index }));
-  const groupedByKey = groupBy(fieldsWithIndex, "key");
 
-  const buttons = isEditing ? (
-    <>
-      <Button
-        className={css({
-          "&::before": {
-            ml: "0 !important",
-            mr: { base: "0 !important", lg: "8px !important" },
-          },
-        })}
-        disabled={applyDiffMutation.isLoading}
-        iconId="ri-save-fill"
-        priority="primary"
-        type="submit"
-      >
-        <styled.span hideBelow="lg">Enregistrer</styled.span>
-      </Button>
-    </>
-  ) : (
+  const buttons =
+    isEditing || isAdding ? (
+      <>
+        <Button
+          className={css({
+            "&::before": {
+              ml: "0 !important",
+              mr: { base: "0 !important", lg: "8px !important" },
+            },
+          })}
+          disabled={applyDiffMutation.isLoading}
+          iconId="ri-save-fill"
+          priority="primary"
+          type="submit"
+          nativeButtonProps={{
+            form: isEditing ? "edit-form" : "add-form",
+          }}
+        >
+          <styled.span hideBelow="lg">Enregistrer</styled.span>
+        </Button>
+      </>
+    ) : (
+      <>
+        <Button
+          className={css({
+            "&::before": {
+              ml: "0 !important",
+              mr: { base: "0 !important", lg: "8px !important" },
+            },
+          })}
+          nativeButtonProps={{ type: "button" }}
+          iconId="ri-pencil-fill"
+          priority="secondary"
+          onClick={(e) => {
+            e.preventDefault();
+            setMode("edit");
+          }}
+        >
+          <styled.span hideBelow="lg">Modifier</styled.span>
+        </Button>
+        <Button
+          className={css({
+            "&::before": {
+              ml: "0 !important",
+              mr: { base: "0 !important", lg: "8px !important" },
+            },
+          })}
+          nativeButtonProps={{ type: "button" }}
+          iconId="ri-add-fill"
+          priority="secondary"
+          onClick={(e) => {
+            e.preventDefault();
+            setMode("add");
+          }}
+        >
+          <styled.span hideBelow="lg">Ajouter</styled.span>
+        </Button>
+      </>
+    );
+
+  return (
     <>
-      <Button
-        className={css({
-          "&::before": {
-            ml: "0 !important",
-            mr: { base: "0 !important", lg: "8px !important" },
-          },
-        })}
-        nativeButtonProps={{ type: "button" }}
-        iconId="ri-pencil-fill"
-        priority="secondary"
-        onClick={(e) => {
-          e.preventDefault();
-          setIsEditing((isEditing) => !isEditing);
-        }}
-      >
-        <styled.span hideBelow="lg">Modifier</styled.span>
-      </Button>
+      <ClauseTitle isNational={isNational} buttons={buttons} {...props} />
+      {isAdding ? <ClauseAdd onSuccess={() => setMode("view")} isNational={isNational} /> : null}
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} id="edit-form">
+          <ClauseList clauses={fieldsWithIndex} isEditing={isEditing} />
+        </form>
+      </FormProvider>
     </>
   );
+};
+
+const ClauseTitle = ({
+  isNational,
+  buttons,
+  ...props
+}: { isNational: boolean; buttons?: ReactNode; isEditing?: boolean } & ModalContentProps) => (
+  <MenuTitle {...props} buttons={buttons}>
+    Clauses {isNational ? "nationales" : "départementales"}
+  </MenuTitle>
+);
+
+const ClauseList = ({ clauses, isEditing }: { clauses: ClauseWithIndex[]; isEditing: boolean }) => {
+  const groupedByKey = groupBy(clauses, "key");
 
   return (
-    <FormProvider {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <MenuTitle {...props} buttons={<Flex>{buttons}</Flex>}>
-          Clauses {isNational ? "nationales" : "départementales"}
-        </MenuTitle>
-        <Stack>
-          {Object.entries(groupedByKey).map(([key, clauses], index) => (
-            <Fragment key={key}>
-              <Stack gap="16px">
-                <styled.h2 fontSize="24px" fontWeight="bold">
-                  {(clauseNameMap as any)[key] ?? key}
-                </styled.h2>
-                {clauses.map((clause) => (
-                  <DivOrTextarea key={clause.id} clause={clause} isEditing={isEditing} />
-                ))}
-              </Stack>
-              {index < Object.keys(groupedByKey).length - 1 && <Divider height="1px" my="16px" color="#C1C1FB" />}
-            </Fragment>
-          ))}
-        </Stack>
-      </form>
-    </FormProvider>
+    <Stack>
+      {Object.entries(groupedByKey).map(([key, clauses], index) => (
+        <Fragment key={key}>
+          <Stack gap="24px">
+            <styled.h2 fontSize="20px">{(clauseNameMap as any)[key] ?? key}</styled.h2>
+            {clauses.map((clause) => (
+              <DivOrTextarea key={clause.id} clause={clause} isEditing={isEditing ?? false} />
+            ))}
+          </Stack>
+          {index < Object.keys(groupedByKey).length - 1 && <Divider height="1px" my="16px" color="#C1C1FB" />}
+        </Fragment>
+      ))}
+    </Stack>
   );
 };
 
@@ -191,11 +243,32 @@ const ClauseView = ({ clause }: { clause: ClauseWithIndex }) => {
 const ClauseEdit = ({ clause }: { clause: ClauseWithIndex }) => {
   const form = useFormContext<Form>();
 
+  const deleteClauseMutation = useMutation(
+    async () => {
+      await db.clause_v2.delete({ where: { id: clause.id } });
+    },
+    {
+      onSuccess: () => {},
+    },
+  );
+
   return (
     <Flex flexDir="column">
-      <styled.div color="text-action-high-blue-france" fontWeight="bold">
-        {clause.value}
-      </styled.div>
+      <Flex justifyContent="space-between" alignItems="center" w="100%">
+        <styled.div color="text-action-high-blue-france" fontWeight="bold">
+          {clause.value}
+        </styled.div>
+        <Button
+          iconId="ri-delete-bin-fill"
+          disabled={deleteClauseMutation.isLoading}
+          onClick={() => deleteClauseMutation.mutate()}
+          priority="secondary"
+          type="button"
+          size="small"
+        >
+          <styled.span hideBelow="lg">Supprimer</styled.span>
+        </Button>
+      </Flex>
 
       <Input
         label=""
@@ -209,6 +282,48 @@ const ClauseEdit = ({ clause }: { clause: ClauseWithIndex }) => {
   );
 };
 
+const ClauseAdd = ({ onSuccess, isNational }: { onSuccess: () => void; isNational: boolean }) => {
+  const user = useUser()!;
+  const form = useForm<Clause_v2>({
+    defaultValues: { key: "", value: "", text: "", id: v4(), udap_id: isNational ? "ALL" : user.udap_id },
+  });
+  const keyOptions = Object.entries(clauseNameMap)
+    .map(([key, label]) => ({ value: key, label }))
+    .filter(({ value }) => {
+      const isNationalClause = nationalClauses.includes(value);
+      return isNational ? isNationalClause : !isNationalClause;
+    });
+
+  const addClauseMutation = useMutation(
+    async (clause: Clause_v2) => {
+      await db.clause_v2.create({ data: clause });
+    },
+    {
+      onSuccess,
+    },
+  );
+
+  return (
+    <form onSubmit={form.handleSubmit((data) => addClauseMutation.mutate(data))} id="add-form">
+      <Stack mb="48px">
+        <Select label="Catégorie" nativeSelectProps={form.register("key")}>
+          {keyOptions.map(({ value, label }) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </Select>
+
+        <Input label="Intitulé" nativeInputProps={form.register("value")} />
+
+        <Input label="Texte" textArea nativeTextAreaProps={{ rows: 6, ...form.register("text") }} />
+      </Stack>
+    </form>
+  );
+};
+
+const nationalClauses = ["type-espace", "decision"];
+
 const clauseNameMap = {
   "type-espace": "Type d'espace",
   decision: "Décision",
diff --git a/packages/frontend/src/features/menu/MenuTitle.tsx b/packages/frontend/src/features/menu/MenuTitle.tsx
index e70769e5..4c62675c 100644
--- a/packages/frontend/src/features/menu/MenuTitle.tsx
+++ b/packages/frontend/src/features/menu/MenuTitle.tsx
@@ -31,9 +31,9 @@ export const MenuTitle = ({
       >
         {children}
       </styled.span>
-      <styled.div pl={{ base: "0", lg: "10px" }} fontSize="20px" fontWeight="bold" nowrap>
+      <Flex gap="16px" pl={{ base: "0", lg: "10px" }} fontSize="20px" fontWeight="bold" nowrap>
         {buttons}
-      </styled.div>
+      </Flex>
       <button
         className="fr-btn--close fr-btn"
         title="Fermer"