diff --git a/src/App.tsx b/src/App.tsx
index c523cd33aa85fea101802f6c288fda927d9310a1..8669e22b71d1d8af3906995c07c59b5130732ed1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import NotFound from './pages/NotFound'
 import Logout from './utils/Logout'
 import { isLoggedIn } from './utils/LocalStorage'
 import Balance from './pages/Balance'
+import AvailableOrder from './pages/AvailableOrder'
 
 function App() {
 
@@ -16,6 +17,7 @@ function App() {
         <Navbar/>
         <Routes>
           <Route path='/Balance' element={<Balance/>}/>
+          <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 6e698ac8b1616b10c514b1d07970be216f3702ea..458c430847a40c008d4b002affd9cc2d8c0bd518 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -1 +1,51 @@
-// TODO : 
+import { 
+  Box, 
+  Card, 
+  CardBody, 
+  CardHeader, 
+  Heading,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import AvailableOrderInterface from '../interfaces/AvailableOrderInterface';
+
+type paramInterface = {order : AvailableOrderInterface};
+
+export default function AvailableOrderCard({order} : paramInterface) {
+  return (
+  <Card
+    width={"80%"}
+    marginY={3}
+    marginX={10}
+    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>
+  </Card>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 86abc1131e1b16b18f6c1987bce2a62859060b01..4981eaf5322714cb1af26b9326d71c617a1e11aa 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -30,8 +30,8 @@ const NAV_ITEMS: Array<NavItem> = [
     href: 'Balance',
   },
   {
-    label: 'History',
-    href: 'History',
+    label: 'Available Order',
+    href: 'AvailableOrder',
   },
   {
     label: 'Promo',
diff --git a/src/interfaces/AvailableOrderInterface.ts b/src/interfaces/AvailableOrderInterface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d566fbfe048334cd438bcea593af291a79f8c6e2
--- /dev/null
+++ b/src/interfaces/AvailableOrderInterface.ts
@@ -0,0 +1,6 @@
+
+export default interface AvailableOrderInterface {
+    address : string,
+    customerName : string,
+    salary : number
+}
diff --git a/src/pages/AvailableOrder.tsx b/src/pages/AvailableOrder.tsx
index dbc863a88f22c12f02dd23a9a2fff585025fd028..baa890db0200ec4a091f7715bfc192f43ad23cca 100644
--- a/src/pages/AvailableOrder.tsx
+++ b/src/pages/AvailableOrder.tsx
@@ -1 +1,65 @@
-// TODO : 
\ No newline at end of file
+import { 
+  Box, 
+  Heading,
+  Stack,
+} from '@chakra-ui/react'
+import AvailableOrderInterface from '../interfaces/AvailableOrderInterface';
+import { useState } from 'react'
+import AvailableOrderCard from '../components/AvailableOrderCard';
+
+// TODO : fetch data from SOAP
+const dummyData : AvailableOrderInterface[] = [
+  {
+    address : "jl. imam bonjol no.69",
+    customerName : "ukin",
+    salary : 100
+  },
+  {
+    address : "bullet",
+    customerName : "ishraul",
+    salary : 1111
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  }
+];
+
+export default function AvailableOrder() {
+  const [orders, setOrders] = useState<AvailableOrderInterface[]>(dummyData);
+
+  return (
+    <Box
+      bg={"red.800"}>
+      <Stack
+        minH={'90vh'}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        align={'center'}
+        >
+        <Heading>
+          Pesanan yang tersedia
+        </Heading>
+        {orders.map(order => (
+          <AvailableOrderCard order={order}/>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
index 165720109eac19cd6de60f36432fd1a5d40d8a8f..0908398406539abae956fe3416e9e58e0806a37d 100644
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -44,7 +44,7 @@ export default function Balance() {
       console.log(res);
       setBalance(res.data);
     });
-  }, []);
+  }, [username]);
 
   return (
     <Flex