diff --git a/src/pages/product/attribute/AttributeValues.tsx b/src/pages/product/attribute/AttributeValues.tsx
index 6eb0949..8576ec7 100644
--- a/src/pages/product/attribute/AttributeValues.tsx
+++ b/src/pages/product/attribute/AttributeValues.tsx
@@ -1,14 +1,29 @@
 import { type FC } from 'react'
 import { useParams } from 'react-router-dom'
-import { useGetAttributeValues } from '../hooks/useProductData'
+import { useDeleteAttributeValue, useGetAttributeValues } from '../hooks/useProductData'
 import CreateValue from '../components/CreateValue'
 import Table from '@/components/Table'
 import UpdateValue from '../components/UpdateValue'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const AttributeValues: FC = () => {
 
     const { id } = useParams()
     const { data, refetch } = useGetAttributeValues(Number(id))
+    const { mutate: deleteValue, isPending } = useDeleteAttributeValue()
+
+    const handleDelete = (id: number) => {
+        deleteValue(id, {
+            onSuccess: () => {
+                refetch()
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
 
     return (
         <div className='mt-5'>
@@ -42,6 +57,12 @@ const AttributeValues: FC = () => {
                                             id={item.id}
                                             refetch={refetch}
                                         />
+
+                                        <TrashWithConfrim
+                                            onDelete={() => handleDelete(item.id)}
+                                            colorIcon='red'
+                                            isloading={isPending}
+                                        />
                                     </div>
                                 )
                             }
diff --git a/src/pages/product/hooks/useProductData.ts b/src/pages/product/hooks/useProductData.ts
index ff45794..50fbad7 100644
--- a/src/pages/product/hooks/useProductData.ts
+++ b/src/pages/product/hooks/useProductData.ts
@@ -180,3 +180,9 @@ export const useGetAttributeValueDetail = (id: number, enabled: boolean) => {
     enabled: !!id && enabled,
   });
 };
+
+export const useDeleteAttributeValue = () => {
+  return useMutation({
+    mutationFn: (id: number) => api.deleteAttributeValue(id),
+  });
+};
diff --git a/src/pages/product/service/ProductService.ts b/src/pages/product/service/ProductService.ts
index ef629a6..f1bc832 100644
--- a/src/pages/product/service/ProductService.ts
+++ b/src/pages/product/service/ProductService.ts
@@ -94,4 +94,9 @@ export const updateAttributeValues = async (id: number, params:CreateAttributeVa
 export const getAttributeValueDetail = async (id: number) => {
   const { data } = await axios.get<AttributeValueDetailResponseType>(`/admin/products/attributes/value/${id}`);
   return data;
+};
+
+export const deleteAttributeValue = async (id: number) => {
+  const { data } = await axios.delete(`/admin/products/attributes/value/${id}`);
+  return data;
 };
\ No newline at end of file