diff --git a/src/pages/product/attribute/List.tsx b/src/pages/product/attribute/List.tsx
index 6e769fc..b4e7c8e 100644
--- a/src/pages/product/attribute/List.tsx
+++ b/src/pages/product/attribute/List.tsx
@@ -3,13 +3,29 @@ import { Paths } from '@/config/Paths'
 import { AddSquare, Edit } from 'iconsax-react'
 import { type FC } from 'react'
 import { Link, useParams } from 'react-router-dom'
-import { useGetAttributes } from '../hooks/useProductData'
+import { useDeleteAttribute, useGetAttributes } from '../hooks/useProductData'
 import Table from '@/components/Table'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const AttributeList: FC = () => {
 
     const { id } = useParams()
-    const { data } = useGetAttributes(Number(id))
+    const { mutate: deleteAttribute, isPending } = useDeleteAttribute()
+    const { data, refetch } = useGetAttributes(Number(id))
+
+    const handleDelete = (id: number) => {
+        deleteAttribute(id, {
+            onSuccess: () => {
+                refetch()
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
+
 
     return (
         <div className='mt-5'>
@@ -62,6 +78,12 @@ const AttributeList: FC = () => {
                                                 size={20}
                                             />
                                         </Link>
+
+                                        <TrashWithConfrim
+                                            isloading={isPending}
+                                            colorIcon='red'
+                                            onDelete={() => handleDelete(item.id)}
+                                        />
                                     </div>
                                 )
                             }
diff --git a/src/pages/product/hooks/useProductData.ts b/src/pages/product/hooks/useProductData.ts
index 4127cbd..b7502d0 100644
--- a/src/pages/product/hooks/useProductData.ts
+++ b/src/pages/product/hooks/useProductData.ts
@@ -97,9 +97,9 @@ export const useCreateAttribute = () => {
   return useMutation({
     mutationFn: ({ id, params }: { id: number; params: CreateAttributeType }) =>
       api.createAttribute(id, params),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["product-attributes"],
+    onSuccess: (_, params) => {
+      queryClient.refetchQueries({
+        queryKey: ["product-attributes", params.id],
       });
     },
   });
@@ -133,3 +133,9 @@ export const useUpdateAttribute = () => {
     },
   });
 };
+
+export const useDeleteAttribute = () => {
+  return useMutation({
+    mutationFn: (id: number) => api.deleteAttributes(id),
+  });
+};
diff --git a/src/pages/product/service/ProductService.ts b/src/pages/product/service/ProductService.ts
index fc1f85a..db6259a 100644
--- a/src/pages/product/service/ProductService.ts
+++ b/src/pages/product/service/ProductService.ts
@@ -69,4 +69,9 @@ export const getAttributeDetail = async (id: number) => {
 export const updateAttribute = async (id: number, params:CreateAttributeType) => {
   const { data } = await axios.patch(`/admin/products/attributes/${id}`, params);
   return data;
+};
+
+export const deleteAttributes = async (id: number) => {
+  const { data } = await axios.delete(`/admin/products/attributes/${id}`);
+  return data;
 };
\ No newline at end of file