diff --git a/src/App.tsx b/src/App.tsx
index 8669e22b71d1d8af3906995c07c59b5130732ed1..6245fc1a63b1ab42772063a60180e128f7626b11 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import Logout from './utils/Logout'
 import { isLoggedIn } from './utils/LocalStorage'
 import Balance from './pages/Balance'
 import AvailableOrder from './pages/AvailableOrder'
+import AvailableOrderDetail from './pages/AvailableOrderDetail'
 
 function App() {
 
@@ -18,6 +19,7 @@ function App() {
         <Routes>
           <Route path='/Balance' element={<Balance/>}/>
           <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
+          <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 458c430847a40c008d4b002affd9cc2d8c0bd518..52c6f10679ec013133a54e9674d0747448e0d64c 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -4,6 +4,8 @@ import {
   CardBody, 
   CardHeader, 
   Heading,
+  LinkBox,
+  LinkOverlay,
   Stack,
   StackDivider,
   Text
@@ -21,31 +23,35 @@ export default function AvailableOrderCard({order} : paramInterface) {
     borderColor={"black"}
     borderRadius={20}
     >
-    <CardHeader>
-      <Heading>
-        {order.address}
-      </Heading>
-    </CardHeader>
-    <CardBody>
-      <Stack divider={<StackDivider/>} spacing={1}>
-        <Box>
-          <Text fontSize={"lg"} fontWeight={"bold"}>
-            Nama Pemesan
-          </Text>
-          <Text>
-            {order.customerName}
-          </Text>
-        </Box>
-        <Box>
-          <Text fontSize={"lg"} fontWeight={"bold"}>
-            Ongkos Kirim
-          </Text>
-          <Text>
-            {order.salary}
-          </Text>
-        </Box>
-      </Stack>
-    </CardBody>
+    <LinkBox>
+      <CardHeader>
+        <Heading>
+          <LinkOverlay href="/AvailableOrderDetail">
+            {order.address}
+          </LinkOverlay>
+        </Heading>
+      </CardHeader>
+      <CardBody>
+        <Stack divider={<StackDivider/>} spacing={1}>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Nama Pemesan
+            </Text>
+            <Text>
+              {order.customerName}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Ongkos Kirim
+            </Text>
+            <Text>
+              {order.salary}
+            </Text>
+          </Box>
+        </Stack>
+      </CardBody>
+    </LinkBox>
   </Card>
   );
 }
diff --git a/src/interfaces/AvailableOrderDetailInterface.ts b/src/interfaces/AvailableOrderDetailInterface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0bb0ca2339b154988613478e9343948fd056cdbe
--- /dev/null
+++ b/src/interfaces/AvailableOrderDetailInterface.ts
@@ -0,0 +1,8 @@
+import OrderDetailInterface from "./OrderDetailInterface"
+
+export default interface AvailableOrderDetailInterface {
+    address : string
+    customerName : string
+    salary : number
+    orderDetails : OrderDetailInterface[]
+}
diff --git a/src/interfaces/AvailableOrderInterface.ts b/src/interfaces/AvailableOrderInterface.ts
index d566fbfe048334cd438bcea593af291a79f8c6e2..450b4550f5e54d1b91c9d3cc448b80e984407b48 100644
--- a/src/interfaces/AvailableOrderInterface.ts
+++ b/src/interfaces/AvailableOrderInterface.ts
@@ -1,6 +1,6 @@
 
 export default interface AvailableOrderInterface {
-    address : string,
-    customerName : string,
+    address : string
+    customerName : string
     salary : number
 }
diff --git a/src/interfaces/OrderDetailInterface.ts b/src/interfaces/OrderDetailInterface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..71920e5744ed5c354ab534723eef823a0021d56e
--- /dev/null
+++ b/src/interfaces/OrderDetailInterface.ts
@@ -0,0 +1,5 @@
+
+export default interface OrderDetailInterface {
+    productName : string
+    quantity : number
+}
\ No newline at end of file
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index 6e698ac8b1616b10c514b1d07970be216f3702ea..ce1d5f28ba80dcac2f258a8cd27f841faef98f4b 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -1 +1,121 @@
-// TODO : 
+import { 
+  Box, 
+  Button, 
+  Heading,
+  Stack,
+  StackDivider,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+import AvailableOrderDetailInterface from '../interfaces/AvailableOrderDetailInterface';
+  
+  // TODO : fetch data from SOAP
+const dummyData : AvailableOrderDetailInterface = {
+  address : "jl.ngawi",
+  customerName : "rusdi",
+  salary : 69,
+  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 AvailableOrderDetail() {
+    const [order, setOrder] = useState<AvailableOrderDetailInterface>(dummyData);
+    // TODO : implement pick order functionality
+  
+    return (
+      <Box
+        minH={"95vh"}
+        py={10}
+        px={50}
+        bg={"red.800"}>
+        <Stack
+          align={'center'}
+          bg={"white"}
+          py={10}
+          >
+          <Heading p={5}>
+            {order.address}
+          </Heading>
+          
+          <Stack divider={<StackDivider/>} spacing={2}>
+            <Box>
+              <Text fontSize={"lg"} fontWeight={"bold"}>
+                Nama Pemesan
+              </Text>
+              <Text>
+                {order.customerName}
+              </Text>
+            </Box>
+            <Box>
+              <Text fontSize={"lg"} fontWeight={"bold"}>
+                Ongkos Kirim
+              </Text>
+              <Text>
+                {order.salary}
+              </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>
+                  {order.orderDetails.map((detail) => (
+                    <Tr>
+                      <Td>{detail.productName}</Td>
+                      <Td>{detail.quantity}</Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+            <Button
+              display={{ base: 'none', md: 'inline-flex' }}
+              fontSize={'sm'}
+              fontWeight={600}
+              bg={"pink.300"}
+              color={'black'}
+              _hover={{
+                bg: 'blue.300',
+              }}
+              >
+              Ambil Order
+            </Button>
+            {/* TODO : table */}
+          </Stack>
+        </Stack>
+      </Box>
+    );
+  }
+  
\ No newline at end of file