diff --git a/src/pages/users/List.tsx b/src/pages/users/List.tsx
index 0e063f7..4c93b21 100644
--- a/src/pages/users/List.tsx
+++ b/src/pages/users/List.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye, Trash } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
 import { Link, useNavigate } from 'react-router-dom'
@@ -12,6 +12,7 @@ import PageLoading from '../../components/PageLoading'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
 import Pagination from '../../components/Pagination'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
 const UsersList: FC = () => {
 
     const navigate = useNavigate()
@@ -90,13 +91,15 @@ const UsersList: FC = () => {
                                                 <Td text={item.firstName + ' ' + item.lastName} />
                                                 <Td text={item.email} />
                                                 <Td text={''}>
-                                                    {
-                                                        item.roles.map((role) => (
-                                                            <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
-                                                                {role.name}
-                                                            </div>
-                                                        ))
-                                                    }
+                                                    <div className='flex flex-wrap gap-2'>
+                                                        {
+                                                            item.roles.map((role) => (
+                                                                <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
+                                                                    {role.name}
+                                                                </div>
+                                                            ))
+                                                        }
+                                                    </div>
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-2'>
@@ -104,10 +107,11 @@ const UsersList: FC = () => {
                                                             <Eye size={20} color='#8C90A3' />
                                                         </Link>
 
-                                                        <Trash
+                                                        <TrashWithConfrim
                                                             size={20}
                                                             color='#8C90A3'
-                                                            onClick={() => handleDeleteUser(item.id)}
+                                                            onDelete={() => handleDeleteUser(item.id)}
+                                                            isLoading={deleteUser.isPending}
                                                         />
                                                     </div>
                                                 </Td>