diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx b/src/pages/Profile/components/SettingsModal/SettingsModal.jsx
deleted file mode 100644
index c5e0ff3..0000000
--- a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import Modal from "../../../../components/ui/modal/modal.tsx";
-import Button from "../../../../components/ui/button/button.tsx";
-import styles from "./SettingsModal.module.css"
-import { useContext, useState } from "react";
-import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
-import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
-import TextInput from "../../../../components/ui/input/input.tsx";
-import updateUser from "../../../../utils/users/updateUser.js";
-import deleteUser from "../../../../utils/users/deleteUser.js";
-
-
-export default function SettingsModal() {
-
-    const { user, logout, update } = useContext(AuthContext);
-
-    const [open, setOpen] = useState(false);
-    const [isDelete, setIsDelete] = useState(false);
-
-    const [name, setName] = useState(user?.name);
-    const [lastname, setLastName] = useState(user?.lastname);
-    const [phone, setPhone] = useState(user?.phone);
-
-    const handleLogout = () => {
-        logout();
-    }
-
-    const handleSubmit = async () => {
-        await updateUser(name, lastname, phone);
-        update();
-    }
-
-    const handleDelete = async () => {
-        await deleteUser();
-        update();
-    }
-
-    return (
-        <>
-            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
-                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
-            </Button>
-
-            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
-                <div className={styles.content}>
-
-                    <div className={styles.section}>
-                        <h3>Compte</h3>
-                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
-                        <Button variant={"danger"} onClick={() => setIsDelete(true)}> Supprimer le compte </Button>
-
-                        <div className={styles.section}>
-                            <h4>Changer de Prénom</h4>
-                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
-                        </div>
-
-                        <div className={styles.section}>
-                            <h4>Changer de nom</h4>
-                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
-                        </div>
-
-                        <div className={styles.section}>
-                            <h4>Changer de numéro de téléphone</h4>
-                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
-                        </div>
-
-                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
-
-                    </div>
-
-                    <div className={styles.section}>
-                        <h3>Apparence</h3>
-                        <ThemeSwitcher />
-                    </div>
-                </div>
-            </Modal>
-
-
-            <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
-                <div className={styles.section}>
-                    <p className={styles.alignText}> Êtes vous vraiment sûr de vouloir supprimer votre compte ?</p>
-                    <Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>Confirmer</Button>
-                </div>
-            </Modal>
-        </>
-    )
-}
\ No newline at end of file
diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
new file mode 100644
index 0000000..fa6701f
--- /dev/null
+++ b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
@@ -0,0 +1,167 @@
+import {useContext, useState, ChangeEvent} from "react";
+import Modal from "../../../../components/ui/modal/modal";
+import Button from "../../../../components/ui/button/button";
+import styles from "./SettingsModal.module.css";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import {AuthContext} from "../../../../contexts/auth/AuthContext";
+import TextInput from "../../../../components/ui/input/input";
+import updateUser from "../../../../utils/users/updateUser.js";
+import deleteUser from "../../../../utils/users/deleteUser.js";
+
+interface TaskType {
+    id: number;
+    title?: string;
+    completed?: boolean;
+
+    [key: string]: unknown;
+}
+
+interface User {
+    id: number;
+    name: string;
+    lastname: string;
+    role: string;
+    email: string;
+    phone: string | null;
+    created_at: string;
+    isAdmin: boolean;
+    tasks: TaskType[];
+}
+
+interface AuthContextType {
+    user: User;
+    update: () => void;
+    logout: () => void;
+}
+
+export default function SettingsModal() {
+    const {user, logout, update} = useContext(AuthContext) as AuthContextType;
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [isDelete, setIsDelete] = useState<boolean>(false);
+
+    const [name, setName] = useState<string>(user?.name ?? "");
+    const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
+    const [phone, setPhone] = useState<string>(user?.phone ?? "");
+
+    const handleLogout = (): void => {
+        logout();
+    };
+
+    const handleSubmit = async (): Promise<void> => {
+        await updateUser(name, lastname, phone || null);
+        update();
+        setOpen(false);
+    };
+
+    const handleDelete = async (): Promise<void> => {
+        await deleteUser();
+        update();
+    };
+
+    const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setName(e.target.value);
+    };
+
+    const handleLastnameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setLastName(e.target.value);
+    };
+
+    const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setPhone(e.target.value);
+    };
+
+
+    return (
+        <>
+            <Button variant="transparent" onClick={() => setOpen((prev) => !prev)}>
+                <img
+                    src="/icons/settings-wheel.svg"
+                    alt="Modify btn"
+                    className={styles.modifyIcon}
+                />
+            </Button>
+
+            <Modal
+                title="Paramètres"
+                open={open}
+                onClose={() => setOpen(false)}
+            >
+                <div className={styles.content}>
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+
+                        <Button variant="danger" onClick={handleLogout}>
+                            Déconnexion
+                        </Button>
+
+                        <Button
+                            variant="danger"
+                            onClick={() => setIsDelete(true)}
+                        >
+                            Supprimer le compte
+                        </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput
+                                value={name}
+                                onChange={handleNameChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput
+                                value={lastname}
+                                onChange={handleLastnameChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput
+                                value={phone}
+                                onChange={handlePhoneChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <Button
+                            className={styles.submitBtn}
+                            onClick={handleSubmit}
+                        >
+                            Confirmer
+                        </Button>
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher/>
+                    </div>
+                </div>
+            </Modal>
+
+            <Modal
+                title="Validation"
+                open={isDelete}
+                onClose={() => setIsDelete(false)}
+            >
+                <div className={styles.section}>
+                    <p className={styles.alignText}>
+                        Êtes vous vraiment sûr de vouloir supprimer votre compte ?
+                    </p>
+                    <Button
+                        variant="danger"
+                        className={styles.submitBtn}
+                        onClick={handleDelete}
+                    >
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}
\ No newline at end of file