diff --git a/Back-End/GestionInscriptions/views.py b/Back-End/GestionInscriptions/views.py
index e5f5143..f7251d4 100644
--- a/Back-End/GestionInscriptions/views.py
+++ b/Back-End/GestionInscriptions/views.py
@@ -133,7 +133,6 @@ class FicheInscriptionView(APIView):
                 di.eleve.responsables.add(responsable)
                 di.save()
 
-            ficheInscriptions_List=bdd.getAllObjects(FicheInscription)
             return JsonResponse(ficheEleve_serializer.data, safe=False)
 
         return JsonResponse(ficheEleve_serializer.errors, safe=False)
diff --git a/Front-End/src/app/[locale]/admin/subscriptions/page.js b/Front-End/src/app/[locale]/admin/subscriptions/page.js
index 0e3e3ff..551a710 100644
--- a/Front-End/src/app/[locale]/admin/subscriptions/page.js
+++ b/Front-End/src/app/[locale]/admin/subscriptions/page.js
@@ -183,7 +183,7 @@ export default function Page({ params: { locale } }) {
   useEffect(() => {
     fetchClasses();
     fetchStudents();
-  }, []);
+  }, [fichesInscriptionsDataEnCours]);
 
   useEffect(() => {
     const fetchDataAndSetState = () => {
@@ -302,9 +302,17 @@ export default function Page({ params: { locale } }) {
       })
       .then(response => response.json())
       .then(data => {
-          console.log('Success:', data);
-          setFichesInscriptionsDataEnCours(prevState => [...prevState, data]);
-          setTotalPending(totalPending+1);
+        console.log('Success:', data);
+        setFichesInscriptionsDataEnCours(prevState => {
+          if (prevState && prevState.length > 0) {
+              return [...prevState, data];
+          }
+          return prevState;
+        });
+        setTotalPending(totalPending+1);
+        if (updatedData.autoMail) {
+          sendConfirmFicheInscription(data.eleve.id, updatedData.eleveNom, updatedData.elevePrenom);
+        }
       })
       .catch((error) => {
           console.error('Error:', error);
@@ -344,7 +352,7 @@ export default function Page({ params: { locale } }) {
                             responsables: [
                                 {
                                     mail: updatedData.responsableEmail,
-                                    //telephone: telephoneResponsable,
+                                    telephone: updatedData.responsableTel,
                                     profilAssocie: idProfil // Association entre le reponsable de l'élève et le profil créé par défaut précédemment
                                 }
                             ],
@@ -363,9 +371,17 @@ export default function Page({ params: { locale } }) {
                 })
                 .then(response => response.json())
                 .then(data => {
-                    console.log('Success:', data);        
-                    setFichesInscriptionsDataEnCours(prevState => [...prevState, data]);
-                    setTotalPending(totalPending+1);
+                  console.log('Success:', data);        
+                  setFichesInscriptionsDataEnCours(prevState => {
+                    if (prevState && prevState.length > 0) {
+                        return [...prevState, data];
+                    }
+                    return prevState;
+                  });
+                  setTotalPending(totalPending+1);
+                  if (updatedData.autoMail) {
+                    sendConfirmFicheInscription(data.eleve.id, updatedData.eleveNom, updatedData.elevePrenom);
+                  }
                 })
                 .catch((error) => {
                     console.error('Error:', error);
@@ -623,9 +639,10 @@ const columnsSubscribed = [
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
                 title={"Création d'un nouveau dossier d'inscription"}
+                size='sm:w-1/4'
                 ContentComponent={() => (
-                                          <InscriptionForm  eleves={eleves} 
-                                                            onSubmit={createDI} 
+                                          <InscriptionForm  eleves={eleves}
+                                                            onSubmit={createDI}
                                           />
                                       )}
               />
diff --git a/Front-End/src/components/Inscription/InscriptionForm.js b/Front-End/src/components/Inscription/InscriptionForm.js
index 47b262b..f9cbac8 100644
--- a/Front-End/src/components/Inscription/InscriptionForm.js
+++ b/Front-End/src/components/Inscription/InscriptionForm.js
@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import { User, Mail, Phone, UserCheck } from 'lucide-react';
+import InputTextIcon from '@/components/InputTextIcon';
 
 const InscriptionForm = ( { eleves, onSubmit }) => {
     const [formData, setFormData] = useState({
         eleveNom: '',
         elevePrenom: '',
         responsableEmail: '',
+        responsableTel: '',
         selectedResponsables: [],
         responsableType: 'new'
     });
@@ -12,6 +15,13 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
     const [step, setStep] = useState(1);
     const [selectedEleve, setSelectedEleve] = useState('');
     const [existingResponsables, setExistingResponsables] = useState([]);
+    const [autoMail, setAutoMail] = useState(false);
+    const maxStep = 4
+
+    const handleToggleChange = () => { 
+        setAutoMail(!autoMail); 
+        setFormData({ ...formData, autoMail: !autoMail });
+    };
 
     const handleChange = (e) => {
         const { name, value, type } = e.target;
@@ -22,7 +32,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
     };
 
     const nextStep = () => {
-        if (step < 3) {
+        if (step < maxStep) {
             setStep(step + 1);
         }
     };
@@ -52,149 +62,192 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
     };
 
     const submit = () => {
-        onSubmit(formData);
+        onSubmit({ ...formData, autoMail });
     }
 
-    console.log(eleves)
-
     return (
         <div className="space-y-4 mt-8">
             {step === 1 && (
                 <div>
                     <h2 className="text-2xl font-bold mb-4">Nouvel élève</h2>
-                    <input
-                        type="text"
-                        placeholder="Nom de l'élève"
-                        name="eleveNom"
+                    <InputTextIcon 
+                        name="eleveNom" 
+                        type="text" 
+                        IconItem={User}
+                        placeholder="Nom de l'élève" 
                         value={formData.eleveNom}
                         onChange={handleChange}
-                        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
+                        className="w-full"
                     />
-                    <input
-                        type="text"
-                        placeholder="Prénom de l'élève"
-                        name="elevePrenom"
+                    <InputTextIcon 
+                        name="elevePrenom" 
+                        type="text" 
+                        IconItem={User}
+                        placeholder="Prénom de l'élève" 
                         value={formData.elevePrenom}
                         onChange={handleChange}
-                        className="mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
+                        className="w-full"
                     />
                 </div>
             )}
 
             {step === 2 && (
                 <div className="mt-6">
-                <h2 className="text-2xl font-bold mb-4">Responsable(s)</h2>
-                <div className="flex flex-col space-y-4">
-                    <label className="flex items-center space-x-3">
-                        <input
-                            type="radio"
-                            name="responsableType"
-                            value="new"
-                            checked={formData.responsableType === 'new'}
-                            onChange={handleChange}
-                            className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
-                        />
-                        <span className="text-gray-900">Nouveau Responsable</span>
-                    </label>
-                    <label className="flex items-center space-x-3">
-                        <input
-                            type="radio"
-                            name="responsableType"
-                            value="existing"
-                            checked={formData.responsableType === 'existing'}
-                            onChange={handleChange}
-                            className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
-                        />
-                        <span className="text-gray-900">Responsable Existant</span>
-                    </label>
-                </div>
-                {formData.responsableType === 'new' && (
-                    <div className="mt-4">
-                        <input
-                            type="email"
-                            placeholder="Email du responsable"
-                            name="responsableEmail"
+                    <h2 className="text-2xl font-bold mb-4">Responsable(s)</h2>
+                    <div className="flex flex-col space-y-4">
+                        <label className="flex items-center space-x-3">
+                            <input
+                                type="radio"
+                                name="responsableType"
+                                value="new"
+                                checked={formData.responsableType === 'new'}
+                                onChange={handleChange}
+                                className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
+                            />
+                            <span className="text-gray-900">Nouveau Responsable</span>
+                        </label>
+                        <label className="flex items-center space-x-3">
+                            <input
+                                type="radio"
+                                name="responsableType"
+                                value="existing"
+                                checked={formData.responsableType === 'existing'}
+                                onChange={handleChange}
+                                className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
+                            />
+                            <span className="text-gray-900">Responsable Existant</span>
+                        </label>
+                    </div>
+                    {formData.responsableType === 'new' && (
+                        <InputTextIcon 
+                            name="responsableEmail" 
+                            type="email" 
+                            IconItem={Mail}
+                            placeholder="Email du responsable" 
                             value={formData.responsableEmail}
                             onChange={handleChange}
-                            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 italic"
+                            className="w-full mt-4"
                         />
-                    </div>
-                )}
-            
-                {formData.responsableType === 'existing' && (
-                    <div className="mt-4">
-                        <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                            <table className="min-w-full bg-white border">
-                                <thead>
-                                    <tr>
-                                        <th className="px-4 py-2 border">Nom</th>
-                                        <th className="px-4 py-2 border">Prénom</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {eleves.map((eleve, index) => (
-                                        <tr
-                                            key={eleve.id}
-                                            className={`cursor-pointer ${selectedEleve && selectedEleve.id === eleve.id ? 'bg-emerald-600 text-white' : index % 2 === 0 ? 'bg-emerald-100' : ''}`}
-                                            onClick={() => handleEleveSelection(eleve)}
-                                        >
-                                            <td className="px-4 py-2 border">{eleve.nom}</td>
-                                            <td className="px-4 py-2 border">{eleve.prenom}</td>
+                    )}
+                
+                    {formData.responsableType === 'existing' && (
+                        <div className="mt-4">
+                            <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                                <table className="min-w-full bg-white border">
+                                    <thead>
+                                        <tr>
+                                            <th className="px-4 py-2 border">Nom</th>
+                                            <th className="px-4 py-2 border">Prénom</th>
                                         </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </div>
-                        {selectedEleve && (
-                            <div className="mt-4">
-                                <h3 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h3>
-                                {existingResponsables.map((responsable) => (
-                                    <div key={responsable.id}>
-                                        <label className="flex items-center space-x-3 mt-2">
-                                            <input 
-                                                type="checkbox" 
-                                                checked={formData.selectedResponsables.includes(responsable.id)}
-                                                className="form-checkbox h-5 w-5 text-emerald-600" 
-                                                onChange={() => handleResponsableSelection(responsable.id)}
-                                            />
-                                            <span className="text-gray-900">
-                                                {responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `adresse mail : ${responsable.mail}`}
-                                            </span>
-                                        </label>
-                                    </div>
-                                ))}
+                                    </thead>
+                                    <tbody>
+                                        {eleves.map((eleve, index) => (
+                                            <tr
+                                                key={eleve.id}
+                                                className={`cursor-pointer ${selectedEleve && selectedEleve.id === eleve.id ? 'bg-emerald-600 text-white' : index % 2 === 0 ? 'bg-emerald-100' : ''}`}
+                                                onClick={() => handleEleveSelection(eleve)}
+                                            >
+                                                <td className="px-4 py-2 border">{eleve.nom}</td>
+                                                <td className="px-4 py-2 border">{eleve.prenom}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
                             </div>
-                        )}
-                    </div>
-                )}
-            </div>
+                            {selectedEleve && (
+                                <div className="mt-4">
+                                    <h3 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h3>
+                                    {existingResponsables.map((responsable) => (
+                                        <div key={responsable.id}>
+                                            <label className="flex items-center space-x-3 mt-2">
+                                                <input 
+                                                    type="checkbox" 
+                                                    checked={formData.selectedResponsables.includes(responsable.id)}
+                                                    className="form-checkbox h-5 w-5 text-emerald-600" 
+                                                    onChange={() => handleResponsableSelection(responsable.id)}
+                                                />
+                                                <span className="text-gray-900">
+                                                    {responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : `adresse mail : ${responsable.mail}`}
+                                                </span>
+                                            </label>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
             )}
 
             {step === 3 && (
+                <div className="mt-6">
+                    <h2 className="text-2xl font-bold mb-4">Téléphone (optionnel)</h2>
+                    <InputTextIcon 
+                        name="responsableTel" 
+                        type="tel" 
+                        IconItem={Phone}
+                        placeholder="Numéro de téléphone" 
+                        value={formData.responsableTel}
+                        onChange={handleChange}
+                        className="w-full mt-4"
+                    />
+                </div>
+            )}
+
+            {step === maxStep && (
                 <div>
                     <h2 className="text-2xl font-bold mb-4">Récapitulatif</h2>
-                    <div className="mb-4">
-                        <h3 className="text-xl font-semibold">Élève</h3>
-                        <p>Nom : {formData.eleveNom}</p>
-                        <p>Prénom : {formData.elevePrenom}</p>
-                    </div>
-                    <div className="mb-4">
-                        <h3 className="text-xl font-semibold">Responsable(s)</h3>
-                        {formData.responsableType === 'new' && (
-                            <p>Email du nouveau responsable : {formData.responsableEmail}</p>
-                        )}
-                        {formData.responsableType === 'existing' && selectedEleve && (
+                    <div className="flex items-center justify-between space-x-4">
+                        <div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center w-1/2 mb-4">
+                            <User className="w-10 h-10 text-gray-300 mr-4" />
                             <div>
-                                <h4 className="font-bold">Responsables associés à {selectedEleve.nom} {selectedEleve.prenom} :</h4>
-                                <ul className="list-disc ml-6">
-                                    {existingResponsables.filter(responsable => formData.selectedResponsables.includes(responsable.id)).map((responsable) => (
-                                        <li key={responsable.id}>
-                                            {responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : responsable.mail}
-                                        </li>
-                                    ))}
-                                </ul>
+                                <p className="italic text-gray-600">Élève</p>
+                                <p>Nom : {formData.eleveNom}</p>
+                                <p>Prénom : {formData.elevePrenom}</p>
                             </div>
-                        )}
+                        </div>
+                    </div>
+                    <div className="flex items-center justify-between space-x-4">
+                        <div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center w-1/2">
+                            <UserCheck className="w-10 h-10 text-gray-300 mr-4" />
+                            {formData.responsableType === 'new' && (
+                                <div>
+                                    <p className="italic text-gray-600">Responsable</p>
+                                    <p>Email : {formData.responsableEmail}</p>
+                                    <p>Téléphone : {formData.responsableTel}</p>
+                                </div>
+                            )}
+                            {formData.responsableType === 'existing' && selectedEleve && (
+                                <div>
+                                    <p className="italic text-gray-600">Responsable(s)</p>
+                                    <p>Associé(s) à : {selectedEleve.nom} {selectedEleve.prenom}</p>
+                                    <ul className="list-disc ml-6">
+                                        {existingResponsables.filter(responsable => formData.selectedResponsables.includes(responsable.id)).map((responsable) => (
+                                            <li key={responsable.id}>
+                                                {responsable.nom && responsable.prenom ? `${responsable.nom} ${responsable.prenom}` : responsable.mail}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            )}
+                        </div>
+                    </div>                    
+                    <div className="flex items-center mt-4">
+                        <label className="mr-2 text-gray-600">Envoi automatique</label>
+                        <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                            <input 
+                                type="checkbox" 
+                                name="toggle" 
+                                id="toggle" 
+                                checked={autoMail}
+                                onChange={handleToggleChange}
+                                className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 focus:border-emerald-500 focus:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500"
+                            />
+                            <label 
+                                htmlFor="toggle" 
+                                className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${autoMail ? 'bg-emerald-300' : 'bg-gray-300'}`}
+                            ></label>
+                        </div>
                     </div>
                 </div>
             )}
@@ -208,7 +261,7 @@ const InscriptionForm = ( { eleves, onSubmit }) => {
                         Précédent
                     </button>
                 )}
-                {step < 3 ? (
+                {step < maxStep ? (
                     <button
                         onClick={nextStep}
                         className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
diff --git a/Front-End/src/components/Modal.js b/Front-End/src/components/Modal.js
index 70a12fd..18c36d0 100644
--- a/Front-End/src/components/Modal.js
+++ b/Front-End/src/components/Modal.js
@@ -1,12 +1,12 @@
 import * as Dialog from '@radix-ui/react-dialog';
 
-const Modal = ({ isOpen, setIsOpen, title, ContentComponent }) => {
+const Modal = ({ isOpen, setIsOpen, title, ContentComponent, size }) => {
     return (
         <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
             <Dialog.Portal>
                 <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
                 <Dialog.Content className="fixed inset-0 flex items-center justify-center">
-                    <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
+                    <div className={`inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:p-6 ${size ? size : 'sm:w-full' }`}>
                         <Dialog.Title className="text-lg font-medium text-gray-900">
                         {title}
                         </Dialog.Title>