diff --git a/src/components/DefaulModal.tsx b/src/components/DefaulModal.tsx
index 67729e8..4136d77 100644
--- a/src/components/DefaulModal.tsx
+++ b/src/components/DefaulModal.tsx
@@ -27,7 +27,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
                     <Fragment>
                         <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[9999999]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                             <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full outline-none focus:outline-none bg-card border border-border'>
+                                <div className='h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full outline-none focus:outline-none bg-card border border-border bg-white'>
 
                                     {
                                         props.isHeader && props.title_header &&
diff --git a/src/components/ModalConfrim.tsx b/src/components/ModalConfrim.tsx
new file mode 100644
index 0000000..5fc3fc2
--- /dev/null
+++ b/src/components/ModalConfrim.tsx
@@ -0,0 +1,65 @@
+import { type FC, useState } from 'react'
+import DefaulModal from './DefaulModal'
+import Button from './Button'
+import Textarea from './Textarea'
+
+type Props = {
+    isloading?: boolean,
+    close: () => void,
+    isOpen: boolean,
+    onConfrim: (text?: string) => void,
+    label?: string,
+    isHasDescription?: boolean
+}
+
+const ModalConfrim: FC<Props> = (props: Props) => {
+
+    const [description, setDescription] = useState<string>('')
+
+    return (
+        <DefaulModal
+            open={props.isOpen}
+            close={props.close}
+            title_header={'حذف'}
+            isHeader
+        >
+            <div className='mt-6'>
+                <div className='text-sm text-center'>
+                    {
+                        props.label ?
+                            props.label
+                            :
+                            'برای حذف این آیتم مطمئن هستید؟'
+                    }
+
+                    {
+                        props.isHasDescription &&
+                        <div className='mt-4'>
+                            <Textarea
+                                placeholder={'توضیحات'}
+                                onChange={(e) => setDescription(e.target.value)}
+                                value={description}
+                                className='bg-transparent border border-gray-500 rounded-xl w-[300px] p-2'
+                            />
+                        </div>
+                    }
+                </div>
+
+                <div className='flex gap-4 justify-center mt-10'>
+                    <Button
+                        label={'بله'}
+                        onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
+                        isLoading={props.isloading}
+                    />
+                    <Button
+                        label={'لغو'}
+                        className='bg-transparent text-black border border-primary'
+                        onClick={props.close}
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default ModalConfrim
\ No newline at end of file
diff --git a/src/components/TrashWithConfrim.tsx b/src/components/TrashWithConfrim.tsx
new file mode 100644
index 0000000..1a712e9
--- /dev/null
+++ b/src/components/TrashWithConfrim.tsx
@@ -0,0 +1,30 @@
+import { Trash } from 'iconsax-react'
+import { type FC, useState } from 'react'
+import ModalConfrim from './ModalConfrim'
+
+interface Props {
+    onDelete: () => void,
+    isloading?: boolean
+}
+
+const TrashWithConfrim: FC<Props> = ({ onDelete, isloading = false }) => {
+    const [isConfirm, setIsConfirm] = useState(false)
+    return (
+        <div>
+            <Trash
+                onClick={() => setIsConfirm(true)}
+                className='size-5'
+                color='#888'
+            />
+
+            <ModalConfrim
+                isOpen={isConfirm}
+                close={() => setIsConfirm(false)}
+                onConfrim={() => onDelete()}
+                isloading={isloading}
+            />
+        </div>
+    )
+}
+
+export default TrashWithConfrim
\ No newline at end of file
diff --git a/src/pages/product/category/List.tsx b/src/pages/product/category/List.tsx
index e389c56..2b8c590 100644
--- a/src/pages/product/category/List.tsx
+++ b/src/pages/product/category/List.tsx
@@ -1,13 +1,28 @@
 import { type FC } from 'react'
-import { useGetCategory } from '../hooks/useProductData'
+import { useDeleteCategory, useGetCategory } from '../hooks/useProductData'
 import Table from '@/components/Table'
 import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
 import type { CategoryType } from '../types/Types'
 import { Edit } from 'iconsax-react'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const CategoryList: FC = () => {
 
-    const { data } = useGetCategory()
+    const { data, refetch } = useGetCategory()
+    const { mutate, isPending } = useDeleteCategory()
+
+    const handleDelete = (id: string) => {
+        mutate(id, {
+            onSuccess: () => {
+                refetch()
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
 
     const column: ColumnType<CategoryType>[] = [
         {
@@ -41,7 +56,7 @@ const CategoryList: FC = () => {
         {
             title: '',
             key: 'action',
-            render: () => {
+            render: (item) => {
                 return (
                     <div className='flex items-center gap-2'>
                         <Edit
@@ -49,6 +64,10 @@ const CategoryList: FC = () => {
                             color='#8C90A3'
                         />
 
+                        <TrashWithConfrim
+                            onDelete={() => handleDelete(item.id)}
+                            isloading={isPending}
+                        />
 
                     </div>
                 )
diff --git a/src/pages/product/hooks/useProductData.ts b/src/pages/product/hooks/useProductData.ts
index 49424d0..279d4fc 100644
--- a/src/pages/product/hooks/useProductData.ts
+++ b/src/pages/product/hooks/useProductData.ts
@@ -13,3 +13,9 @@ export const useCreateCategory = () => {
     mutationFn: api.createCategory,
   });
 };
+
+export const useDeleteCategory = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteCategory(id),
+  });
+};
diff --git a/src/pages/product/service/ProductService.ts b/src/pages/product/service/ProductService.ts
index a7ba062..7b43b19 100644
--- a/src/pages/product/service/ProductService.ts
+++ b/src/pages/product/service/ProductService.ts
@@ -9,4 +9,9 @@ export const getCategory = async () => {
 export const createCategory = async (params:CreateCategoryType) => {
   const { data } = await axios.post("/admin/category", params);
   return data;
-};
\ No newline at end of file
+};
+
+export const deleteCategory = async(id:string) => {
+  const { data } = await axios.delete(`/admin/category/${id}`)
+  return data
+}
\ No newline at end of file