diff --git a/src/App.tsx b/src/App.tsx
index 2149260ace8787ed3ea675e0ce69df4565239d03..21a935332c2dfe833c4ad0380c37fd1be8eecd91 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import AvailableOrderDetail from './pages/AvailableOrderDetail'
 import PickedOrder from './pages/PickedOrder'
 import PickedOrderDetail from './pages/PickedOrderDetail'
 import History from './pages/History'
+import HistoryDetail from './pages/HistoryDetail'
 
 function App() {
 
@@ -26,6 +27,7 @@ function App() {
           <Route path='/PickedOrder' element={<PickedOrder/>}/>
           <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
           <Route path='/History' element={<History/>}/>
+          <Route path='/HistoryDetail' element={<HistoryDetail/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/interfaces/HistoryDetailInterface.ts b/src/interfaces/HistoryDetailInterface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4403ffb9ca9e6d72bb03eff2615ccf5e5d847ce
--- /dev/null
+++ b/src/interfaces/HistoryDetailInterface.ts
@@ -0,0 +1,9 @@
+import OrderDetail from "./OrderDetail"
+
+export default interface HistoryDetailInterface {
+    address : string
+    customerName : string
+    salary : number
+    rating : number
+    orderDetails : OrderDetail[]
+}
diff --git a/src/pages/HistoryDetail.tsx b/src/pages/HistoryDetail.tsx
index 537f243314c39c49997fa6e76e465f587e4c0381..53751a0cf04eaad9ac4be45fb06e83736eb84814 100644
--- a/src/pages/HistoryDetail.tsx
+++ b/src/pages/HistoryDetail.tsx
@@ -1,3 +1,117 @@
-// TODO : 
+import { 
+  Box, 
+  Button, 
+  Heading,
+  Stack,
+  StackDivider,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+import HistoryDetailInterface from '../interfaces/HistoryDetailInterface';
+  
+// TODO : fetch data from SOAP
+const dummyData : HistoryDetailInterface = {
+  address : "jl.ngawi",
+  customerName : "rusdi",
+  salary : 69,
+  rating : 0,
+  orderDetails : [
+    {
+      productName : "pisau cukur",
+      quantity : 69
+    },
+    {
+      productName : "ivan gunawan",
+      quantity : 420
+    },
+    {
+      productName : "pisau cukur 2",
+      quantity : 692
+    },
+    {
+      productName : "ivan gunawan 2",
+      quantity : 4202
+    },
+  ]
+}
 
+export default function HistoryDetail() {
+  const [history, setHistory] = useState<HistoryDetailInterface>(dummyData);
+  // TODO : implement pick history functionality
 
+  return (
+    <Box
+      minH={"95vh"}
+      py={10}
+      px={50}
+      bg={"red.800"}>
+      <Stack
+        align={'center'}
+        bg={"white"}
+        py={10}
+        >
+        <Heading p={5}>
+          {history.address}
+        </Heading>
+        
+        <Stack divider={<StackDivider/>} spacing={2}>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Nama Pemesan
+            </Text>
+            <Text>
+              {history.customerName}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Ongkos Kirim
+            </Text>
+            <Text>
+              {history.salary}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Rating
+            </Text>
+            <Text>
+              {history.rating === 0 ? "Belum di rating" : history.rating}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"} align={"center"}>
+              Detail Pesanan
+            </Text>
+          </Box>
+          <TableContainer>
+            <Table variant='simple'>
+              <Thead>
+                <Tr>
+                  <Th>Nama Produk</Th>
+                  <Th>Jumlah</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {history.orderDetails.map((detail) => (
+                  <Tr>
+                    <Td>{detail.productName}</Td>
+                    <Td>{detail.quantity}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+  
\ No newline at end of file