diff --git a/src/pages/Watchhistory.jsx b/src/pages/Watchhistory.jsx
index 7a1fc33..8ad7449 100644
--- a/src/pages/Watchhistory.jsx
+++ b/src/pages/Watchhistory.jsx
@@ -1,9 +1,28 @@
 import { faHouse, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 function Watchhistory() {
+  const [allHisPlaylist, setallHisPlaylist] = useState([])
+
+  const getAllHistory = async()=>{
+    const result = await getAudiobookHistoryApi()
+    setallHisPlaylist(result.data);
+    
+  }
+
+  console.log(allHisPlaylist);
+  
+  const handleDelete = async(id)=>{
+    const result = await deleteHistoryAudiobookApi(id)
+    console.log(result);
+    
+  }
+
+  useEffect(()=>{
+    getAllHistory()
+  },[])
   return (
     <div className='p-4'>
       <div className="flex items-center mt-5">
@@ -18,7 +37,7 @@ function Watchhistory() {
       <div className="container mx-auto mt-5">
         <div className="flex justify-center">
           <div className="w-full max-w-4xl p-3 overflow-auto">
-            <table className='min-w-full mt-5 border border-gray-200'>
+           {allHisPlaylist?.length>0? <table className='min-w-full mt-5 border border-gray-200'>
               <thead>
                 <tr className="bg-gray-100">
                   <th className="px-4 py-2 text-left border-b border-gray-200">SL.NO</th>
@@ -29,20 +48,24 @@ function Watchhistory() {
                 </tr>
               </thead>
               <tbody>
-                <tr>
+                {allHisPlaylist?.map((item)=>(
+                  <tr>
                   <td className="px-4 py-2 border-b border-gray-200">1</td>
                   <td className="px-4 py-2 border-b border-gray-200">dummy</td>
                   <td className="px-4 py-2 border-b border-gray-200">dummy</td>
                   <td className="px-4 py-2 border-b border-gray-200">dummy</td>
                   <td className="px-4 py-2 border-b border-gray-200">
-                    <button className='text-red-600 hover:text-red-800'>
+                    <button onClick={()=>handleDelete(item?.id)} className='text-red-600 hover:text-red-800'>
                       <FontAwesomeIcon icon={faTrash} />
                     </button>
                   </td>
                 </tr>
+                ))
+                }
               </tbody>
             </table>
-            <h3 className='text-yellow-500 text-center mt-4'>History Cleared</h3>
+              :
+            <h3 className='text-yellow-500 text-center mt-4'>History Cleared</h3>}
           </div>
         </div>
       </div>
diff --git a/src/services/allApi.js b/src/services/allApi.js
index 13107ff..11d3371 100644
--- a/src/services/allApi.js
+++ b/src/services/allApi.js
@@ -4,4 +4,20 @@ import {serverurl} from "./serverurl"
 
  export const AddCategoryApi = async(reqbody)=>{
     return await commonApi('POST',`${serverurl}/category`,reqbody)
- }
\ No newline at end of file
+ }
+
+  //add audiobook history
+
+  export const addAudiobookHistoryApi = async(reqBody)=>{
+   return await commonApi('POST',`${serverurl}/history`,reqBody)
+}
+
+// get audiobook from history
+export const getAudiobookHistoryApi = async()=>{
+   return await commonApi('GET',`${serverurl}/history`)
+}
+
+//delete audiobook from history
+export const deleteHistoryAudiobookApi = async(id)=>{
+   return await commonApi('DELETE',`${serverurl}/history/${id}`)
+} 
\ No newline at end of file