diff --git a/src/app/admin/admins/page.tsx b/src/app/admin/admins/page.tsx
index 49c8cd8..fb2e7f8 100644
--- a/src/app/admin/admins/page.tsx
+++ b/src/app/admin/admins/page.tsx
@@ -193,7 +193,7 @@ export default function Admins() {
                     width={24}
                     height={24}
                     src={icons.editIcon}
-                    className="cursor-pointer"
+                    className="cursor-pointer responsive-icon"
                   />
                 </div>
               }
@@ -258,7 +258,7 @@ export default function Admins() {
                   <Image
                     alt="Supprimer"
                     src={icons.trash}
-                    className="cursor-pointer"
+                    className="cursor-pointer responsive-icon"
                   />
                 </div>
               }
diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index a6d5cdd..d87b1eb 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -17,6 +17,7 @@ export default function HomePage () {
   const {data: session, status} = useSession()
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   console.log("Session = ", session)
 
@@ -128,55 +129,67 @@ export default function HomePage () {
   },
   {
     id: "delete",
-    cell: ({ cell }) => {
-        const id = String(cell.row.original.id)
-        return (
-          <div className="relative p-2 cursor-pointer"
-            // onClick={() => { mutate(id) }}
-          >
-            <Modal 
-              open={open}
-              onOpenChange={(isOpen)=>{
-                if(!isOpen) {
-                  setOpen(isOpen)
-                }
-              }}
-              trigger={
-                <div onClick={() => setOpen(true)}>
-                  <Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
-                </div>
+    cell: ({ row }) => {
+      const id = String(row.original.id);
+      return (
+        <div className="relative p-2 cursor-pointer">
+          <Modal
+            open={selectedId === id}
+            onOpenChange={(isOpen) => {
+              if (!isOpen) {
+                setSelectedId(null);
               }
-              title={
-                <p className="font-bold text-3xl">Supprimer une organisation</p>
-              }
-              content={
-                <div>
-                  <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
+            }}
+            trigger={
+              <div
+                onClick={() => {
+                  setSelectedId(id);
+                }}
+              >
+                <Image
+                  alt=""
+                  src={icons.trash}
+                  className="cursor-pointer responsive-icon"
+                />
+              </div>
+            }
+            title={
+              <p className="font-bold text-3xl">
+                Supprimer cette organisation
+              </p>
+            }
+            content={
+              <div>
+                <p className="text-center">
+                  Voulez-vous vraiment supprimer cette organisation ?
+                </p>
 
-                  <div className="grid grid-cols-2 gap-3 mt-3">
-                    <button 
-                      className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
-                      onClick={() => { setOpen(false) }}
-                      >
-                      Annuler
-                    </button>
-                    <button 
-                      className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
-                      onClick={() => { 
-                        mutate(id)
-                        setOpen(false) 
-                      }}
-                    >
-                      Supprimer
-                    </button>
-                  </div>
+                <div className="grid grid-cols-2 gap-3 mt-3">
+                  <button
+                    className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
+                    onClick={() => {
+                      setSelectedId(null);
+                    }}
+                  >
+                    Annuler
+                  </button>
+                  <button
+                    className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
+                    onClick={() => {
+                      mutate(id);
+                      setSelectedId(null);
+                    }}
+                  >
+                    Supprimer
+                  </button>
                 </div>
-              }
-            />
-          </div>  
-        )
-    }
-  }
+              </div>
+            }
+          />
+        </div>
+      );
+    },
+  },
 ]
 
   return(
diff --git a/src/app/admin/organizations/page.tsx b/src/app/admin/organizations/page.tsx
index 4018bb0..1a400c1 100644
--- a/src/app/admin/organizations/page.tsx
+++ b/src/app/admin/organizations/page.tsx
@@ -239,7 +239,7 @@ export default function Organizations() {
                       <Image
                         alt="Supprimer"
                         src={icons.trash}
-                        className="cursor-pointer"
+                        className="cursor-pointer responsive-icon"
                       />
                     </div>
                   }
diff --git a/src/app/globals.css b/src/app/globals.css
index 3cfcd0b..87fa3c8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -88,4 +88,26 @@ body {
   color: white;
   width: 100%;
   padding: 8px;
+}
+
+.responsive-icon {
+  min-width: 16px;
+  min-height: 16px;
+  width: 24px;
+  height: 24px;
+  transition: width 0.2s, height 0.2s;
+}
+
+@media (max-width: 768px) {
+  .responsive-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .responsive-icon {
+    width: 16px;
+    height: 16px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 7ffc8cd..e392269 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -99,78 +99,80 @@ export default function Table<TData, TValue>({
     }
 
     return(
-        <div>
+        <div className="w-full">
             {render()}
 
             <div className="rounded-lg border border-gray-200 w-auto">
-                <table className="w-full overflow-x-auto rounded-lg">
-                    <thead className="h-10">
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <tr key={headerGroup.id} className="rounded-lg">
-                                {header
-                                ?
-                                <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
-                                    
-                                </th>
-                                :
-                                <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
-                                    <input 
-                                        ref={headerCheckboxRef}
-                                        checked={!!table.getIsAllPageRowsSelected()} 
-                                        onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
-                                        type="checkbox" name="" id="" 
-                                    />
-                                </th>
-                                }
-                                {headerGroup.headers.map((header) => {
-                                    return(
-                                        <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
-                                            {flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                        </th>
-                                    )
-                                })}
-                            </tr>
-                        ))}
-                    </thead>
-                    <tbody>
-                        {table.getRowModel().rows.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
-                                    <td className="p-3 text-start">
+                <div className="overflow-x-auto">
+                    <table className="w-full overflow-x-auto rounded-lg">
+                        <thead className="h-10">
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <tr key={headerGroup.id} className="rounded-lg">
+                                    {header
+                                    ?
+                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
+                                        
+                                    </th>
+                                    :
+                                    <th className="bg-[#E9F0FF] p-3 text-start first:rounded-tl-lg">
                                         <input 
-                                            checked={row.getIsSelected()} 
-                                            onChange={(e) => row.toggleSelected(e.target.checked)} 
+                                            ref={headerCheckboxRef}
+                                            checked={!!table.getIsAllPageRowsSelected()} 
+                                            onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)} 
                                             type="checkbox" name="" id="" 
                                         />
-                                    </td>
-                                    {row.getVisibleCells().map((cell) => (
-                                        <td key={cell.id} className="p-3 text-start">
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </td>
-                                    ))}
+                                    </th>
+                                    }
+                                    {headerGroup.headers.map((header) => {
+                                        return(
+                                            <th key={header.id} className="bg-[#E9F0FF] p-3 text-start last:rounded-tr-lg">
+                                                {flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                            </th>
+                                        )
+                                    })}
                                 </tr>
-                            ))
-                        )
-                        : isDataLoading ?
-                        (
-                            <tr>
-                                <td colSpan={columns.length} className="h-20 text-center">
-                                    Chargement...
-                                </td>
-                            </tr>
-                        ) 
-                        : (
-                            <tr>
-                                <td colSpan={columns.length} className="h-20 text-center">
-                                    Aucun résultats
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
+                            ))}
+                        </thead>
+                        <tbody>
+                            {table.getRowModel().rows.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <tr key={row.id} className={clsx('hover:bg-gray-100 border-t border-gray-200', { 'bg-gray-300': row.getIsSelected()})}>
+                                        <td className="p-3 text-start">
+                                            <input 
+                                                checked={row.getIsSelected()} 
+                                                onChange={(e) => row.toggleSelected(e.target.checked)} 
+                                                type="checkbox" name="" id="" 
+                                            />
+                                        </td>
+                                        {row.getVisibleCells().map((cell) => (
+                                            <td key={cell.id} className="p-3 text-start">
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </td>
+                                        ))}
+                                    </tr>
+                                ))
+                            )
+                            : isDataLoading ?
+                            (
+                                <tr>
+                                    <td colSpan={columns.length} className="h-20 text-center">
+                                        Chargement...
+                                    </td>
+                                </tr>
+                            ) 
+                            : (
+                                <tr>
+                                    <td colSpan={columns.length} className="h-20 text-center">
+                                        Aucun résultats
+                                    </td>
+                                </tr>
+                            )}
+                        </tbody>
+                    </table>
+                </div>
             </div>
 
             <div className="flex items-center justify-end space-x-2 py-4">