diff --git a/src/App.tsx b/src/App.tsx
index fef6093f833bbcfb46b3aba8769445154002ed01..4f806e8629d105c134664ddebc3cffbccdbe7e4d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,7 +24,7 @@ function App() {
         <Routes>
           <Route path='/Balance' element={<Balance/>}/>
           <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
-          <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
+          <Route path='/AvailableOrderDetail/:id' element={<AvailableOrderDetail/>}/>
           <Route path='/PickedOrder' element={<PickedOrder/>}/>
           <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
           <Route path='/History' element={<History/>}/>
diff --git a/src/api/Order.ts b/src/api/Order.ts
index ca415e050fa8e8ea63e26ae649d7fcbe256b7fe3..e40bedb246ddfe487ea4f548abf7369f24b32aee 100644
--- a/src/api/Order.ts
+++ b/src/api/Order.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import OrderInterface from "../interfaces/OrderInterface";
+import OrderDetail from "../interfaces/OrderDetail";
 
 const REST_URL = "http://localhost:5000"; // TODO : using env
 
@@ -12,4 +13,27 @@ export async function fetchAvailableOrder() {
         alert(err);
         throw err;
     }
-}
\ No newline at end of file
+}
+
+export async function fetchOrderById(orderId : number) {
+    try {
+        const API_URL = REST_URL + "/order/order/" + orderId;
+        const response = await axios.get<OrderInterface>(API_URL);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
+
+export async function fetchOrderDetails(orderId : number) {
+    try {
+        const API_URL = REST_URL + "/order/order-details/" + orderId;
+        const response = await axios.get<OrderDetail[]>(API_URL);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
+
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 7d2be41264ce3625c24f195976285272ab094fd5..1ca827c2afb2ebd86a9bd3f1780361d84205650e 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -15,6 +15,8 @@ import OrderInterface from '../interfaces/OrderInterface';
 type paramInterface = {order : OrderInterface};
 
 export default function AvailableOrderCard({order} : paramInterface) {
+  const hrefLink = `/AvailableOrderDetail/${order.id}`;
+  
   return (
   <Card
     width={"80%"}
@@ -26,7 +28,7 @@ export default function AvailableOrderCard({order} : paramInterface) {
     <LinkBox>
       <CardHeader>
         <Heading>
-          <LinkOverlay href="/AvailableOrderDetail">
+          <LinkOverlay href={hrefLink}>
             {order.alamat}
           </LinkOverlay>
         </Heading>
diff --git a/src/interfaces/OrderDetail.ts b/src/interfaces/OrderDetail.ts
index 2c8d017bddb78dd78770a7d24f8794d7c53a9b77..ce03053bba4868c7e5e05c951e0abce99d375a0d 100644
--- a/src/interfaces/OrderDetail.ts
+++ b/src/interfaces/OrderDetail.ts
@@ -1,7 +1,7 @@
 
 export default interface OrderDetail {    
     id_pesanan ?: number
-    nama_produk ?: string
+    nama_product ?: string
     quantity ?: number
     harga ?: number
 }
\ No newline at end of file
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index 04f680c9770c61bba8f2dc804c4d68108e6dc87f..cc02093eb3cf339565324abc81ba687ec47451e8 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -13,39 +13,33 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import OrderDetail from '../interfaces/OrderDetail';
 import OrderInterface from '../interfaces/OrderInterface';
-  
-// TODO : fetch data from SOAP
-const orderDummy : OrderInterface = {
-  alamat : "jl.ngawi",
-  nama_penerima : "rusdi",
-  biaya_pengiriman : 69,
-}
-const detailDummy : OrderDetail[] = [
-  {
-    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
-  },
-]
+import { useParams } from 'react-router-dom';
+import { getOrderById, getOrderDetails } from '../utils/Order';
+
 
 export default function AvailableOrderDetail() {
-  const [order, setOrder] = useState<OrderInterface>(orderDummy);
-  const [orderDetails, setOrderDetails] = useState<OrderDetail[]>(detailDummy);
-  // TODO : implement pick order functionality
+  const { id } = useParams();
+  const orderId = parseInt(id ? id : "0");
+  const [order, setOrder] = useState<OrderInterface>();
+  const [orderDetails, setOrderDetails] = useState<OrderDetail[]>([]);
+
+  useEffect(() => {
+    const orderResponse = getOrderById(orderId);
+    const detailResponse = getOrderDetails(orderId);
+
+    orderResponse.then((response) => {
+      setOrder(response.data);
+      console.log("order", response.data);
+    });
+
+    detailResponse.then((response) => {
+      setOrderDetails(response.data);
+      console.log("detail", response.data);
+    });
+  }, []);
 
   return (
     <Box
@@ -59,7 +53,7 @@ export default function AvailableOrderDetail() {
         py={10}
         >
         <Heading p={5}>
-          {order.alamat}
+          {order?.alamat}
         </Heading>
         
         <Stack divider={<StackDivider/>} spacing={2}>
@@ -68,7 +62,7 @@ export default function AvailableOrderDetail() {
               Nama Pemesan
             </Text>
             <Text>
-              {order.nama_penerima}
+              {order?.nama_penerima}
             </Text>
           </Box>
           <Box>
@@ -76,7 +70,7 @@ export default function AvailableOrderDetail() {
               Ongkos Kirim
             </Text>
             <Text>
-              {order.biaya_pengiriman}
+              {order?.biaya_pengiriman}
             </Text>
           </Box>
           <Box>
@@ -95,13 +89,14 @@ export default function AvailableOrderDetail() {
               <Tbody>
                 {orderDetails.map((detail) => (
                   <Tr>
-                    <Td>{detail.nama_produk}</Td>
+                    <Td>{detail.nama_product}</Td>
                     <Td>{detail.quantity}</Td>
                   </Tr>
                 ))}
               </Tbody>
             </Table>
           </TableContainer>
+          {/* TODO : implement pick order */}
           <Button
             display={{ base: 'none', md: 'inline-flex' }}
             fontSize={'sm'}
diff --git a/src/utils/Order.ts b/src/utils/Order.ts
index ecf087397bdf9f53ceccb4af61cd4f5e3dbacf9c..63a48a6b4d9d751881c1f2268ee503488c4b2bf7 100644
--- a/src/utils/Order.ts
+++ b/src/utils/Order.ts
@@ -1,6 +1,16 @@
-import { fetchAvailableOrder } from "../api/Order";
+import { fetchAvailableOrder, fetchOrderById, fetchOrderDetails } from "../api/Order";
 
 export async function getAvailableOrder() {
     const userDetail = await fetchAvailableOrder();
     return userDetail;
+}
+
+export async function getOrderById(orderId : number) {
+    const userDetail = await fetchOrderById(orderId);
+    return userDetail;
+}
+
+export async function getOrderDetails(orderId : number) {
+    const userDetail = await fetchOrderDetails(orderId);
+    return userDetail;
 }
\ No newline at end of file