diff --git "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/FormulaireAttestationConformit\303\251.tsx" "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/FormulaireAttestationConformit\303\251.tsx"
index bd9b78435e..d65f5f361a 100644
--- "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/FormulaireAttestationConformit\303\251.tsx"
+++ "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/FormulaireAttestationConformit\303\251.tsx"
@@ -1,3 +1,4 @@
+'use client';
 import { FC, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
diff --git "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/modifier/modifierAttestationConformit\303\251.page.tsx" "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/modifier/modifierAttestationConformit\303\251.page.tsx"
index cb5cfdcac0..39c5ddf08e 100644
--- "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/modifier/modifierAttestationConformit\303\251.page.tsx"
+++ "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/modifier/modifierAttestationConformit\303\251.page.tsx"
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { PageTemplate } from '@/components/templates/Page.template';
diff --git "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/transmettre/transmettreAttestationConformit\303\251.page.tsx" "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/transmettre/transmettreAttestationConformit\303\251.page.tsx"
index 83fefd2a19..54a8e5201a 100644
--- "a/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/transmettre/transmettreAttestationConformit\303\251.page.tsx"
+++ "b/packages/applications/ssr/src/components/pages/attestation-conformit\303\251/transmettre/transmettreAttestationConformit\303\251.page.tsx"
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { PageTemplate } from '@/components/templates/Page.template';
diff --git "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.form.tsx" "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.form.tsx"
new file mode 100644
index 0000000000..decd0a9faa
--- /dev/null
+++ "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.form.tsx"
@@ -0,0 +1,71 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { Input } from '@codegouvfr/react-dsfr/Input';
+import { useState } from 'react';
+
+import { Routes } from '@potentiel-applications/routes';
+
+import { SubmitButton } from '@/components/atoms/form/SubmitButton';
+import { Form } from '@/components/atoms/form/Form';
+
+import { ajouterGestionnaireRéseauAction } from './ajouterGestionnaireRéseau.action';
+
+export const AjouterGestionnaireRéseauForm = () => {
+  const router = useRouter();
+
+  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
+  return (
+    <Form
+      action={ajouterGestionnaireRéseauAction}
+      method="post"
+      encType="multipart/form-data"
+      onSuccess={() => router.push(Routes.Gestionnaire.lister)}
+      onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
+    >
+      <Input
+        label="Code EIC ou gestionnaire"
+        id="identifiantGestionnaireReseau"
+        nativeInputProps={{ name: 'identifiantGestionnaireReseau' }}
+        state={validationErrors.includes('identifiantGestionnaireReseau') ? 'error' : 'default'}
+        stateRelatedMessage="Code EIC ou gestionnaire à préciser"
+      />
+
+      <Input
+        label="Raison sociale"
+        id="raisonSociale"
+        nativeInputProps={{ name: 'raisonSociale' }}
+        state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
+        stateRelatedMessage="Raison sociale à préciser"
+      />
+
+      <Input
+        label="Format de l'identifiant du dossier de raccordement (optionnel)"
+        id="format"
+        nativeInputProps={{ name: 'format' }}
+        state={validationErrors.includes('format') ? 'error' : 'default'}
+        stateRelatedMessage="Format à préciser"
+        hintText="Exemple : XXX-RP-AAAA-999999"
+      />
+
+      <Input
+        label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
+        id="legende"
+        nativeInputProps={{ name: 'legende' }}
+        state={validationErrors.includes('legende') ? 'error' : 'default'}
+        stateRelatedMessage="Légende à préciser"
+        hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
+      />
+
+      <Input
+        label="Expression régulière (optionnel)"
+        id="expressionReguliere"
+        nativeInputProps={{ name: 'expressionReguliere' }}
+        state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
+        stateRelatedMessage="expression régulière à préciser"
+        hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
+      />
+
+      <SubmitButton>Envoyer</SubmitButton>
+    </Form>
+  );
+};
diff --git "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.page.tsx" "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.page.tsx"
index 20bdabc6b9..5452fd42b4 100644
--- "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.page.tsx"
+++ "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/ajouter/AjouterGestionnaireR\303\251seau.page.tsx"
@@ -1,78 +1,16 @@
-'use client';
-
-import { FC, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Input from '@codegouvfr/react-dsfr/Input';
-
-import { Routes } from '@potentiel-applications/routes';
+import { FC } from 'react';
 
 import { Heading1 } from '@/components/atoms/headings';
 import { PageTemplate } from '@/components/templates/Page.template';
-import { Form } from '@/components/atoms/form/Form';
-import { SubmitButton } from '@/components/atoms/form/SubmitButton';
 
-import { ajouterGestionnaireRéseauAction } from './ajouterGestionnaireRéseau.action';
+import { AjouterGestionnaireRéseauForm } from './AjouterGestionnaireRéseau.form';
 
 export const AjouterGestionnaireRéseauPage: FC = () => {
-  const router = useRouter();
-
-  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
   return (
     <PageTemplate
       banner={<Heading1 className="text-theme-white">Ajouter un gestionnaire de réseau</Heading1>}
     >
-      <Form
-        action={ajouterGestionnaireRéseauAction}
-        method="post"
-        encType="multipart/form-data"
-        onSuccess={() => router.push(Routes.Gestionnaire.lister)}
-        onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
-      >
-        <Input
-          label="Code EIC ou gestionnaire"
-          id="identifiantGestionnaireReseau"
-          nativeInputProps={{ name: 'identifiantGestionnaireReseau' }}
-          state={validationErrors.includes('identifiantGestionnaireReseau') ? 'error' : 'default'}
-          stateRelatedMessage="Code EIC ou gestionnaire à préciser"
-        />
-
-        <Input
-          label="Raison sociale"
-          id="raisonSociale"
-          nativeInputProps={{ name: 'raisonSociale' }}
-          state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
-          stateRelatedMessage="Raison sociale à préciser"
-        />
-
-        <Input
-          label="Format de l'identifiant du dossier de raccordement (optionnel)"
-          id="format"
-          nativeInputProps={{ name: 'format' }}
-          state={validationErrors.includes('format') ? 'error' : 'default'}
-          stateRelatedMessage="Format à préciser"
-          hintText="Exemple : XXX-RP-AAAA-999999"
-        />
-
-        <Input
-          label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
-          id="legende"
-          nativeInputProps={{ name: 'legende' }}
-          state={validationErrors.includes('legende') ? 'error' : 'default'}
-          stateRelatedMessage="Légende à préciser"
-          hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
-        />
-
-        <Input
-          label="Expression régulière (optionnel)"
-          id="expressionReguliere"
-          nativeInputProps={{ name: 'expressionReguliere' }}
-          state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
-          stateRelatedMessage="expression régulière à préciser"
-          hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
-        />
-
-        <SubmitButton>Envoyer</SubmitButton>
-      </Form>
+      <AjouterGestionnaireRéseauForm />
     </PageTemplate>
   );
 };
diff --git "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.form.tsx" "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.form.tsx"
new file mode 100644
index 0000000000..419ff9d14f
--- /dev/null
+++ "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.form.tsx"
@@ -0,0 +1,125 @@
+'use client';
+import Input from '@codegouvfr/react-dsfr/Input';
+import { FC, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { Routes } from '@potentiel-applications/routes';
+import { PlainType } from '@potentiel-domain/core';
+import { ExpressionRegulière, Email } from '@potentiel-domain/common';
+import { Option } from '@potentiel-libraries/monads';
+import { GestionnaireRéseau } from '@potentiel-domain/reseau';
+
+import { Form } from '@/components/atoms/form/Form';
+import { SubmitButton } from '@/components/atoms/form/SubmitButton';
+
+import { modifierGestionnaireRéseauAction } from './modifierGestionnaireRéseau.action';
+
+export type ModifierGestionnaireRéseauFormProps =
+  PlainType<GestionnaireRéseau.ConsulterGestionnaireRéseauReadModel>;
+
+export const ModifierGestionnaireRéseauForm: FC<ModifierGestionnaireRéseauFormProps> = ({
+  identifiantGestionnaireRéseau,
+  raisonSociale,
+  aideSaisieRéférenceDossierRaccordement: { format, légende, expressionReguliere },
+  contactEmail,
+}) => {
+  const router = useRouter();
+  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
+
+  // Ici on match bind pour montrer un cas d'utilisation simple vu que c'est
+  // la première mise en place de Option et ValueType en mode Isomorphique.
+  // Utiliser bind uniquement si besoin d'une fonctionnalité avancée du ValueType (exemple: comparaison de date)
+  const contactEmailValue = Option.match(contactEmail)
+    .some((email) => {
+      const emailValueType = Email.bind(email);
+      return emailValueType.formatter();
+    })
+    .none(() => '');
+
+  const expressionReguliereValue = ExpressionRegulière.bind(expressionReguliere).formatter();
+
+  const identifiantGestionnaireReseauValue = GestionnaireRéseau.IdentifiantGestionnaireRéseau.bind(
+    identifiantGestionnaireRéseau,
+  ).formatter();
+  return (
+    <Form
+      action={modifierGestionnaireRéseauAction}
+      method="post"
+      encType="multipart/form-data"
+      onSuccess={() => router.push(Routes.Gestionnaire.lister)}
+      onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
+    >
+      <div className="mb-6">
+        <label>Code EIC ou Gestionnaire: {identifiantGestionnaireReseauValue}</label>
+      </div>
+
+      <input
+        type={'hidden'}
+        value={identifiantGestionnaireReseauValue}
+        name="identifiantGestionnaireReseau"
+      />
+
+      <input type={'hidden'} value={contactEmailValue} name="contactEmail" />
+
+      <Input
+        label="Raison sociale"
+        id="raisonSociale"
+        nativeInputProps={{
+          name: 'raisonSociale',
+          defaultValue: raisonSociale,
+        }}
+        state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
+        stateRelatedMessage="Raison sociale à préciser"
+      />
+
+      <Input
+        label="Courriel de contact"
+        id="contactEmail"
+        nativeInputProps={{
+          name: 'contactEmail',
+          defaultValue: contactEmailValue,
+        }}
+        state={validationErrors.includes('contactEmail') ? 'error' : 'default'}
+        stateRelatedMessage="Contact à préciser"
+      />
+
+      <Input
+        label="Format de l'identifiant du dossier de raccordement (optionnel)"
+        id="format"
+        nativeInputProps={{
+          name: 'format',
+          defaultValue: format,
+        }}
+        state={validationErrors.includes('format') ? 'error' : 'default'}
+        stateRelatedMessage="Format à préciser"
+        hintText="Exemple : XXX-RP-AAAA-999999"
+      />
+
+      <Input
+        label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
+        id="legende"
+        nativeInputProps={{
+          name: 'legende',
+          defaultValue: légende,
+        }}
+        state={validationErrors.includes('legende') ? 'error' : 'default'}
+        stateRelatedMessage="Légende à préciser"
+        hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
+      />
+
+      <Input
+        label="Expression régulière (optionnel)"
+        id="expressionReguliere"
+        nativeInputProps={{
+          name: 'expressionReguliere',
+          value: expressionReguliereValue,
+        }}
+        state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
+        stateRelatedMessage="Expression régulière à préciser"
+        hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
+      />
+
+      <SubmitButton>Envoyer</SubmitButton>
+    </Form>
+  );
+};
diff --git "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.page.tsx" "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.page.tsx"
index 8d37b1afeb..95e0c0ae57 100644
--- "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.page.tsx"
+++ "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.page.tsx"
@@ -1,49 +1,21 @@
-'use client';
+import { FC } from 'react';
 
-import Input from '@codegouvfr/react-dsfr/Input';
-import { useRouter } from 'next/navigation';
-import { FC, useState } from 'react';
-
-import { Routes } from '@potentiel-applications/routes';
-import { PlainType } from '@potentiel-domain/core';
-import { ExpressionRegulière, Email } from '@potentiel-domain/common';
-import { Option } from '@potentiel-libraries/monads';
-import { GestionnaireRéseau } from '@potentiel-domain/reseau';
-
-import { Form } from '@/components/atoms/form/Form';
-import { SubmitButton } from '@/components/atoms/form/SubmitButton';
 import { Heading1 } from '@/components/atoms/headings';
 import { PageTemplate } from '@/components/templates/Page.template';
 
-import { modifierGestionnaireRéseauAction } from './modifierGestionnaireRéseau.action';
+import {
+  ModifierGestionnaireRéseauForm,
+  ModifierGestionnaireRéseauFormProps,
+} from './ModifierGestionnaireRéseau.form';
 
-export type ModifierGestionnaireRéseauProps =
-  PlainType<GestionnaireRéseau.ConsulterGestionnaireRéseauReadModel>;
+export type ModifierGestionnaireRéseauPageProps = ModifierGestionnaireRéseauFormProps;
 
-export const ModifierGestionnaireRéseauPage: FC<ModifierGestionnaireRéseauProps> = ({
+export const ModifierGestionnaireRéseauPage: FC<ModifierGestionnaireRéseauPageProps> = ({
   identifiantGestionnaireRéseau,
   raisonSociale,
-  aideSaisieRéférenceDossierRaccordement: { format, légende, expressionReguliere },
+  aideSaisieRéférenceDossierRaccordement,
   contactEmail,
 }) => {
-  const router = useRouter();
-  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
-
-  // Ici on match bind pour montrer un cas d'utilisation simple vu que c'est
-  // la première mise en place de Option et ValueType en mode Isomorphique.
-  // Utiliser bind uniquement si besoin d'une fonctionnalité avancée du ValueType (exemple: comparaison de date)
-  const contactEmailValue = Option.match(contactEmail)
-    .some((email) => {
-      const emailValueType = Email.bind(email);
-      return emailValueType.formatter();
-    })
-    .none(() => '');
-
-  const expressionReguliereValue = ExpressionRegulière.bind(expressionReguliere).formatter();
-
-  const identifiantGestionnaireReseauValue = GestionnaireRéseau.IdentifiantGestionnaireRéseau.bind(
-    identifiantGestionnaireRéseau,
-  ).formatter();
   return (
     <PageTemplate
       banner={
@@ -52,85 +24,12 @@ export const ModifierGestionnaireRéseauPage: FC<ModifierGestionnaireRéseauProp
         </Heading1>
       }
     >
-      <Form
-        action={modifierGestionnaireRéseauAction}
-        method="post"
-        encType="multipart/form-data"
-        onSuccess={() => router.push(Routes.Gestionnaire.lister)}
-        onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
-      >
-        <div className="mb-6">
-          <label>Code EIC ou Gestionnaire: {identifiantGestionnaireReseauValue}</label>
-        </div>
-
-        <input
-          type={'hidden'}
-          value={identifiantGestionnaireReseauValue}
-          name="identifiantGestionnaireReseau"
-        />
-
-        <input type={'hidden'} value={contactEmailValue} name="contactEmail" />
-
-        <Input
-          label="Raison sociale"
-          id="raisonSociale"
-          nativeInputProps={{
-            name: 'raisonSociale',
-            defaultValue: raisonSociale,
-          }}
-          state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
-          stateRelatedMessage="Raison sociale à préciser"
-        />
-
-        <Input
-          label="Courriel de contact"
-          id="contactEmail"
-          nativeInputProps={{
-            name: 'contactEmail',
-            defaultValue: contactEmailValue,
-          }}
-          state={validationErrors.includes('contactEmail') ? 'error' : 'default'}
-          stateRelatedMessage="Contact à préciser"
-        />
-
-        <Input
-          label="Format de l'identifiant du dossier de raccordement (optionnel)"
-          id="format"
-          nativeInputProps={{
-            name: 'format',
-            defaultValue: format,
-          }}
-          state={validationErrors.includes('format') ? 'error' : 'default'}
-          stateRelatedMessage="Format à préciser"
-          hintText="Exemple : XXX-RP-AAAA-999999"
-        />
-
-        <Input
-          label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
-          id="legende"
-          nativeInputProps={{
-            name: 'legende',
-            defaultValue: légende,
-          }}
-          state={validationErrors.includes('legende') ? 'error' : 'default'}
-          stateRelatedMessage="Légende à préciser"
-          hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
-        />
-
-        <Input
-          label="Expression régulière (optionnel)"
-          id="expressionReguliere"
-          nativeInputProps={{
-            name: 'expressionReguliere',
-            value: expressionReguliereValue,
-          }}
-          state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
-          stateRelatedMessage="Expression régulière à préciser"
-          hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
-        />
-
-        <SubmitButton>Envoyer</SubmitButton>
-      </Form>
+      <ModifierGestionnaireRéseauForm
+        identifiantGestionnaireRéseau={identifiantGestionnaireRéseau}
+        raisonSociale={raisonSociale}
+        aideSaisieRéférenceDossierRaccordement={aideSaisieRéférenceDossierRaccordement}
+        contactEmail={contactEmail}
+      />
     </PageTemplate>
   );
 };
diff --git "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.stories.tsx" "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.stories.tsx"
index 79c315e21d..d0b02c561d 100644
--- "a/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.stories.tsx"
+++ "b/packages/applications/ssr/src/components/pages/r\303\251seau/gestionnaire/modifier/ModifierGestionnaireR\303\251seau.stories.tsx"
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import {
   ModifierGestionnaireRéseauPage,
-  ModifierGestionnaireRéseauProps,
+  ModifierGestionnaireRéseauPageProps,
 } from './ModifierGestionnaireRéseau.page';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -12,7 +12,7 @@ const meta = {
   parameters: {},
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<ModifierGestionnaireRéseauProps>;
+} satisfies Meta<ModifierGestionnaireRéseauPageProps>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;