diff --git a/src/api/History.ts b/src/api/History.ts
index 1057526b064a5a51cc95ed5e0eda023967570a24..41c7f69f470a18caca904076bae801597ddab599 100644
--- a/src/api/History.ts
+++ b/src/api/History.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import HistoryInterface from "../interfaces/HistoryInterface";
+import HistoryDetailInterface from "../interfaces/HistoryDetailInterface";
 
 const REST_URL = "http://localhost:5000"; // TODO : using env
 
@@ -14,3 +15,25 @@ export async function fetchHistory(username : string) {
     }
 }
 
+export async function fetchHistoryById(historyId : number) {
+    try {
+        const API_URL = REST_URL + "/history/history/" + historyId;
+        const response = await axios.get<HistoryInterface>(API_URL);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
+
+export async function fetchHistoryDetails(historyId : number) {
+    try {
+        const API_URL = REST_URL + "/history/detail/" + historyId;
+        const response = await axios.get<HistoryDetailInterface[]>(API_URL);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
+
diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
index 5c83e149cf2156d53d5701a17d1a833a985553dc..6e4d352af2c68bb9677d2d6d0da99a58cda83561 100644
--- a/src/components/HistoryCard.tsx
+++ b/src/components/HistoryCard.tsx
@@ -29,7 +29,7 @@ export default function HistoryCard({history} : paramInterface) {
       <CardHeader>
         <Heading>
           <LinkOverlay href={hrefLink}>
-            {history.address}
+            {history.alamat_tujuan}
           </LinkOverlay>
         </Heading>
       </CardHeader>
@@ -40,7 +40,7 @@ export default function HistoryCard({history} : paramInterface) {
               Nama Pemesan
             </Text>
             <Text>
-              {history.customerName}
+              {history.nama_penerima}
             </Text>
           </Box>
           <Box>
@@ -48,7 +48,7 @@ export default function HistoryCard({history} : paramInterface) {
               Ongkos Kirim
             </Text>
             <Text>
-              {history.salary}
+              {history.biaya_pengiriman}
             </Text>
           </Box>
           <Box>
diff --git a/src/interfaces/HistoryDetailInterface.ts b/src/interfaces/HistoryDetailInterface.ts
index c4403ffb9ca9e6d72bb03eff2615ccf5e5d847ce..43d5480bc5e6f2da26d192f148cecd93e0fd09b0 100644
--- a/src/interfaces/HistoryDetailInterface.ts
+++ b/src/interfaces/HistoryDetailInterface.ts
@@ -1,9 +1,8 @@
-import OrderDetail from "./OrderDetail"
 
 export default interface HistoryDetailInterface {
-    address : string
-    customerName : string
-    salary : number
-    rating : number
-    orderDetails : OrderDetail[]
+    id: number
+    history_id : number
+    product_name: string
+    quantity: number
+    price : number
 }
diff --git a/src/interfaces/HistoryInterface.ts b/src/interfaces/HistoryInterface.ts
index 59a10c4e1ae7fa2946f8394b503e96955ce5aef5..3a9c6b7e13ac2a8d8fd60f3934968fa72ae77b75 100644
--- a/src/interfaces/HistoryInterface.ts
+++ b/src/interfaces/HistoryInterface.ts
@@ -1,8 +1,10 @@
 
-export default interface HistoryInterface {
-    id : number;
-    address : string
-    customerName : string
-    salary : number
+export default interface History {
+    id: number
+    user_id : number
+    alamat_tujuan : string
+    id_penerima : number
+    nama_penerima : string
+    biaya_pengiriman : number
     rating : number
 }
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index 23d65079accab97edf56d06830f99066e2f6c506..ad57adfc14341fc61c834c95592bcaf6160870c7 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react'
 import HistoryCard from '../components/HistoryCard';
 import { getUser } from '../utils/LocalStorage';
 import { getHistory } from '../utils/History';
-import { getUserDetail } from '../utils/Profile';
 
 
 export default function History() {
diff --git a/src/pages/HistoryDetail.tsx b/src/pages/HistoryDetail.tsx
index ad6647b900ed95be78bc4193d80ed3c437885aa6..a57925740332c91c3b0f1ea886f7c7f330327664 100644
--- a/src/pages/HistoryDetail.tsx
+++ b/src/pages/HistoryDetail.tsx
@@ -12,38 +12,33 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom';
+import HistoryInterface from '../interfaces/HistoryInterface';
+import { getHistoryById, getHistoryDetails } from '../utils/History';
 import HistoryDetailInterface from '../interfaces/HistoryDetailInterface';
   
-// TODO : fetch data from SOAP
-const dummyData : HistoryDetailInterface = {
-  address : "jl.ngawi",
-  customerName : "rusdi",
-  salary : 69,
-  rating : 0,
-  orderDetails : [
-    {
-      nama_produk : "pisau cukur",
-      quantity : 69
-    },
-    {
-      nama_produk : "ivan gunawan",
-      quantity : 420
-    },
-    {
-      nama_produk : "pisau cukur 2",
-      quantity : 692
-    },
-    {
-      nama_produk : "ivan gunawan 2",
-      quantity : 4202
-    },
-  ]
-}
 
 export default function HistoryDetail() {
-  const [history, setHistory] = useState<HistoryDetailInterface>(dummyData);
-  // TODO : implement pick history functionality
+  const { id } = useParams();
+  const historyId= parseInt(id ? id : "0");
+  const [history, setHistory] = useState<HistoryInterface>();
+  const [historyDetails, setHistoryDetails] = useState<HistoryDetailInterface[]>([]);
+
+  useEffect(() => {
+    const historyResponse = getHistoryById(historyId);
+    const detailResponse = getHistoryDetails(historyId);
+
+    historyResponse.then((response) => {
+      setHistory(response);
+      console.log("history", response);
+    });
+
+    detailResponse.then((response) => {
+      setHistoryDetails(response);
+      console.log("detail", response);
+    });
+  }, []);
 
   return (
     <Box
@@ -57,7 +52,7 @@ export default function HistoryDetail() {
         py={10}
         >
         <Heading p={5}>
-          {history.address}
+          {history?.alamat_tujuan}
         </Heading>
         
         <Stack divider={<StackDivider/>} spacing={2}>
@@ -66,7 +61,7 @@ export default function HistoryDetail() {
               Nama Pemesan
             </Text>
             <Text>
-              {history.customerName}
+              {history?.nama_penerima}
             </Text>
           </Box>
           <Box>
@@ -74,7 +69,7 @@ export default function HistoryDetail() {
               Ongkos Kirim
             </Text>
             <Text>
-              {history.salary}
+              {history?.biaya_pengiriman}
             </Text>
           </Box>
           <Box>
@@ -82,7 +77,7 @@ export default function HistoryDetail() {
               Rating
             </Text>
             <Text>
-              {history.rating === 0 ? "Belum di rating" : history.rating}
+              {history?.rating === 0 ? "Belum di rating" : history?.rating}
             </Text>
           </Box>
           <Box>
@@ -99,9 +94,9 @@ export default function HistoryDetail() {
                 </Tr>
               </Thead>
               <Tbody>
-                {history.orderDetails.map((detail) => (
+                {historyDetails?.map((detail) => (
                   <Tr>
-                    <Td>{detail.nama_produk}</Td>
+                    <Td>{detail.product_name}</Td>
                     <Td>{detail.quantity}</Td>
                   </Tr>
                 ))}
diff --git a/src/utils/History.ts b/src/utils/History.ts
index 332f45b622c12f4d1a7806ccb827d1b7062e1248..f366baadb1c4cb43b414e5f34a250569025a2d63 100644
--- a/src/utils/History.ts
+++ b/src/utils/History.ts
@@ -1,7 +1,19 @@
-import { fetchHistory } from "../api/History";
+import { fetchHistory, fetchHistoryById, fetchHistoryDetails } from "../api/History";
 
 export async function getHistory(username : string) {
     const response = await fetchHistory(username);
     const histories = response.data;
     return histories;
 }
+
+export async function getHistoryById(historyId : number) {
+    const response = await fetchHistoryById(historyId);
+    const histories = response.data;
+    return histories;
+}
+
+export async function getHistoryDetails(historyId : number) {
+    const response = await fetchHistoryDetails(historyId);
+    const histories = response.data;
+    return histories;
+}