diff --git a/src/app/(dashboard)/etage/CreateEtage.jsx b/src/app/(dashboard)/etage/CreateEtage.jsx
index 2d16cebac618d8f66a40d831cfda4d2e19dca3e3..5259b4902664544db649bf3f4f390aced4825e2b 100644
--- a/src/app/(dashboard)/etage/CreateEtage.jsx
+++ b/src/app/(dashboard)/etage/CreateEtage.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 import Loader from '@/components/Loader/Loader'
 import React, { useRef, useState, useEffect } from 'react'
@@ -5,7 +6,9 @@ import fetchRequest from '../../lib/fetchRequest'
 import { useNotification } from "@/context/NotificationContext";
 import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
-
+import ImageIcon from "@/static/image/svg/image.svg"
+import ColoredImageIcon from "@/static/image/svg/image2.svg"
+import CrossIcon from "@/static/image/svg/cancel.svg"
 
 const CreateEtage = ({ appendEtage, cancelCreate }) => {
     const [isLoading, setIsLoading] = useState(false)
@@ -15,12 +18,17 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         setNumeroEtage(event.target.value)
     }
     const inputRef = useRef(null)
+    const imageInput = useRef(null)
+    const [image, setImage] = useState(null)
     const handleSubmit = async (event) => {
         event.preventDefault()
         setIsLoading(true)
+        const formData = new FormData()
+        formData.append("numero", numeroEtage)
+        formData.append("image", image)
         const { data, errors, isSuccess } = await fetchRequest("/zoaning/etages/", {
             method: "POST",
-            body: JSON.stringify({ numero: numeroEtage })
+            body: formData,
         })
         if (isSuccess) {
             setIsLoading(false)
@@ -36,6 +44,13 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         } else {
             setIsLoading(false)
             if (errors.type === "ValidationError") {
+                if (errors.detail.image) {
+                    toggleNotification({
+                        type: "warning",
+                        message: "Le type de l'image n'est pas supporté",
+                        visible: true,
+                    })
+                }
                 if (errors.detail.name) {
                     toggleNotification({
                         type: "warning",
@@ -93,9 +108,88 @@ const CreateEtage = ({ appendEtage, cancelCreate }) => {
         }
     }, [])
 
+
+    const removeImage = () => {
+        imageInput.current.value = "";
+        setImage(null);
+        setIsDisplayingImage(false)
+    };
+
+    const handleChangeImage = (e) => {
+        if (imageInput.current.value !== "") {
+            const supportedType = ["image/jpg", "image/jpeg", "image/png"];
+            if (supportedType.includes(imageInput.current.files[0].type)) {
+                setImage(imageInput.current.files[0]);
+            } else {
+                removeImage();
+                setIsDisplayingImage(false)
+                toggleNotification({
+                    type: "warning",
+                    message: "Le type de l'image n'est pas supporté",
+                    visible: true
+                })
+            }
+        } else {
+            setImage(null);
+            setIsDisplayingImage(false)
+        }
+    };
+    const [isDisplayingImage, setIsDisplayingImage] = useState(false)
+    const viewImage = () => {
+        setIsDisplayingImage(true)
+    }
+
     return <tr ref={rowRef} className='bg-white'>
         <td className="border-2 border-white py-2 px-3">
-            <input ref={inputRef} onChange={handlePrivilegeNameChange} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+            <input ref={inputRef} onChange={handlePrivilegeNameChange} type='text' className='disabled:bg-white w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-14 outline-none' />
+        </td>
+        <td className="border-2 border-white py-2 px-3">
+            {(!image) && <>
+                <label htmlFor='zoneImage' className='flex w-[29rem] justify-center border-dashed items-center border-2 h-14 border-slate-300 rounded-lg px-5 gap-5'>
+                    <div className='flex p-1.5 rounded-md bg-slate-100/80'>
+                        <ImageIcon className="etageRowCreationSVG fill-slate-500 m-auto h-5 w-5" />
+                    </div>
+                    <div className='flex flex-col w-fit font-medium'>
+                        <p className='text-xs text-slate-500 text-nowrap'>Téléchargez une image pour illustrer votre étage.</p>
+                        <p className='text-xs text-slate-500/70 text-nowrap'>PNG, JPG (rec. ?x?px)</p>
+                    </div>
+                    <div className='rounded-full py-1 border-2 border-slate-300 flex h-fit items-center justify-center cursor-pointer px-2 text-xs text-slate-400'>parcourir</div>
+                </label>
+            </>}
+
+            <input ref={imageInput} onChange={handleChangeImage} id='zoneImage' type="file" accept="image/png, image/jpeg, image/svg+xml" className='hidden' />
+
+            {(image) && <>
+                <div className='flex flex-col justify-center bg-indigo-100/70 py-2.5 px-3 rounded-md h-14 w-[29rem]'>
+                    <div className='flex gap-x-2 w-full'>
+                        <div className='h-7 w-7'>
+                            <ColoredImageIcon className="etageRowCreationSVG m-auto h-full" />
+                        </div>
+                        <div className='flex flex-col'>
+                            <p className='text-xs font-medium text-ellipsis w-60 text-nowrap overflow-hidden'>{image.name}</p>
+                            <p className='text-[0.6rem] font-medium'>{Math.round((image.size / (1024 * 1024)) * 100) / 100}Mo</p>
+                        </div>
+                        <div className='h-auto flex items-center ml-2'>
+                            <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium'>Voir l'image</p>
+                        </div>
+                        {(isDisplayingImage) && <div className='fixed inset-0 flex items-center justify-center bg-neutral-900/40 backdrop-blur-[1px] z-50'>
+                            <div className='flex flex-col items-center'>
+                                <div onMouseUp={() => setIsDisplayingImage(false)} className='ml-auto relative bottom-3'>
+                                    <CrossIcon className="etageRowCreationSVG h-9 w-9 fill-neutral-900 cursor-pointer" />
+                                </div>
+                                <div className='h-auto overflow-hidden max-w-[90%] flex items-center justify-center'>
+                                    <img src={URL.createObjectURL(image)} style={{ maxWidth: '100%', height: 'auto', maxHeight: "90dvh" }} alt="User uploaded" />
+                                </div>
+                            </div>
+                        </div>}
+                        <div className='h-auto ml-auto'>
+                            <div onMouseUp={removeImage}>
+                                <CrossIcon className="etageRowCreationSVG h-4 w-4 fill-neutral-600 cursor-pointer" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>}
         </td>
         <td className="border-2 border-white w-28 bg-white">
             <div className='flex items-center justify-end w-full gap-x-2'>
diff --git a/src/app/(dashboard)/etage/EtageTableRow.jsx b/src/app/(dashboard)/etage/EtageTableRow.jsx
index ff162b580369800b60cdeb49623f554d924fce04..0cc0af12b1223920ff1f2a5ae24fa82c30988ab1 100644
--- a/src/app/(dashboard)/etage/EtageTableRow.jsx
+++ b/src/app/(dashboard)/etage/EtageTableRow.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
 import fetchRequest from '../../lib/fetchRequest'
@@ -8,7 +9,9 @@ import CancelIcon from "@/static/image/svg/cancel.svg"
 import CheckIcon from "@/static/image/svg/check.svg"
 import { useNotification } from '@/context/NotificationContext'
 import ConfirmationModal from '../../ui/ConfirmationModal'
-const EtageTableRow = ({ id, numero, setEtages }) => {
+import CrossIcon from "@/static/image/svg/cancel.svg"
+
+const EtageTableRow = ({ id, numero, setEtages, image }) => {
     const [numeroEtage, setNumeroEtage] = useState(numero)
     const [loadingStatus, setLoadingStatus] = useState(false)
     const { toggleNotification } = useNotification()
@@ -68,11 +71,33 @@ const EtageTableRow = ({ id, numero, setEtages }) => {
             document.removeEventListener("click", handleUpdateBlur);
         }
     }
+    const [isDisplayingImage, setIsDisplayingImage] = useState(false)
+    const viewImage = () => {
+        setIsDisplayingImage(true)
+    }
     return (
         <>
             <tr className='even:bg-chicago-100/60' ref={rowRef}>
                 <td className="border-2 border-white py-2 px-3">
-                    <input ref={inputRef} disabled={true} onChange={(event) => setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+                    <input ref={inputRef} disabled={true} onChange={(event) => setNumeroEtage(event.target.value)} defaultValue={numero} type='text' className='w-full min-w-80 border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' />
+                </td>
+                <td className='border-2 border-white w-[29rem]'>
+                    {(isDisplayingImage && image) && <div className='fixed inset-0 flex items-center justify-center bg-neutral-900/40 backdrop-blur-[1px] z-50'>
+                        <div className='flex flex-col items-center'>
+                            <div onMouseUp={() => setIsDisplayingImage(false)} className='ml-auto relative bottom-3'>
+                                <CrossIcon className="etageRowCreationSVG h-9 w-9 fill-neutral-900 cursor-pointer" />
+                            </div>
+                            <div className='h-auto overflow-hidden max-w-[90%] flex items-center justify-center'>
+                                <img src={image} style={{ maxWidth: '100%', height: 'auto', maxHeight: "90dvh" }} alt="User uploaded" />
+                            </div>
+                        </div>
+                    </div>}
+                    {!image && <p className='text-center py-2.5 px-3 text-xs text-neutral-500'>
+                        Aucune image n'est associée à cet étage.
+                    </p>}
+                    {(image) && <div className='flex flex-col justify-center items-center py-2.5 px-3 rounded-md h-14'>
+                        <p onClick={viewImage} className='hover:underline text-xs text-indigo-500 cursor-pointer font-medium text-center'>Voir l'image</p>
+                    </div>}
                 </td>
                 <td className="border-2 border-white w-28 bg-white">
                     <div className='flex items-center justify-center w-full gap-x-2'>
diff --git a/src/app/(dashboard)/etage/page.jsx b/src/app/(dashboard)/etage/page.jsx
index 8deae510305aed6510cf98a804356ea6650668fe..c4dc6c726a9c501f76d55e480dc3723e1625271e 100644
--- a/src/app/(dashboard)/etage/page.jsx
+++ b/src/app/(dashboard)/etage/page.jsx
@@ -47,6 +47,7 @@ const Etage = () => {
                         <table className="min-w-full bg-white border-collapse border border-white">
                             <tr>
                                 <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Numéro Étage</th>
+                                <th className="py-2 text-neutral-700 text-left border-b border-gray-200">Image</th>
                                 <th className="py-2 text-center text-neutral-700 border-b border-white">Actions</th>
                             </tr>
                             {(isCreating) && <CreateEtage cancelCreate={() => setIsCreating(false)} appendEtage={appendEtage} />}
diff --git a/src/app/lib/fetchRequest.js b/src/app/lib/fetchRequest.js
index db2aa42c283fbd6f28b038af117d253871396c2c..6ad19f127dc48270e51e39674f2811c72bfb8bf7 100644
--- a/src/app/lib/fetchRequest.js
+++ b/src/app/lib/fetchRequest.js
@@ -11,7 +11,6 @@ const fetchRequest = async (url, options = {}) => {
         ...options.headers,
         // add authorization header with token if there is jwtDecrypted.sessionData.token
         Authorization: jwtDecrypted?.sessionData?.token ? `Token ${jwtDecrypted.sessionData.token}` : undefined,
-        'Content-Type': 'application/json',
     };
 
     const response = await fetch(`${BASE_URL}${url}`, {
diff --git a/src/static/image/svg/image.svg b/src/static/image/svg/image.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0f7ca5d797cd4bbe659c28de3b59f74a8a4c9a09
--- /dev/null
+++ b/src/static/image/svg/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="image"><path d="M24 1H8a7 7 0 0 0-7 7v16a7 7 0 0 0 7 7h16a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7ZM8 3h16a5 5 0 0 1 5 5v9.26L25.36 13A3 3 0 0 0 23 12a3 3 0 0 0-2.29 1.17l-3.61 4.67a1 1 0 0 1-.68.38 1 1 0 0 1-.75-.22l-3.58-3a3 3 0 0 0-4 .13L3 20V8a5 5 0 0 1 5-5Zm16 26H8a5 5 0 0 1-5-5v-1.22l6.49-6.16a1 1 0 0 1 1.32 0l3.58 3a3 3 0 0 0 4.29-.48l3.62-4.67a1 1 0 0 1 .76-.39 1 1 0 0 1 .78.35l5.16 6V24a5 5 0 0 1-5 5Z"></path><path d="M8.5 12A3.5 3.5 0 1 0 5 8.5 3.5 3.5 0 0 0 8.5 12Zm0-5A1.5 1.5 0 1 1 7 8.5 1.5 1.5 0 0 1 8.5 7Z"></path></svg>
\ No newline at end of file
diff --git a/src/static/image/svg/image2.svg b/src/static/image/svg/image2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d8ea1ce901c9ba7cacd89b71081f2ad50ecac0f
--- /dev/null
+++ b/src/static/image/svg/image2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" id="image"><path fill="#d8d8ff" d="M13.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path><path fill="#b2b1ff" d="M19 2H5a3.009 3.009 0 0 0-3 3v8.86l3.88-3.88a3.075 3.075 0 0 1 4.24 0l2.871 2.887.888-.888a3.008 3.008 0 0 1 4.242 0L22 15.86V5a3.009 3.009 0 0 0-3-3zm-5.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path><path fill="#6563ff" d="M10.12 9.98a3.075 3.075 0 0 0-4.24 0L2 13.86V19a3.009 3.009 0 0 0 3 3h14c.815 0 1.595-.333 2.16-.92L10.12 9.98z"></path><path fill="#d8d8ff" d="m22 15.858-3.879-3.879a3.008 3.008 0 0 0-4.242 0l-.888.888 8.165 8.209c.542-.555.845-1.3.844-2.076v-3.142z"></path></svg>
\ No newline at end of file