diff --git a/src/api/Order.ts b/src/api/Order.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca415e050fa8e8ea63e26ae649d7fcbe256b7fe3
--- /dev/null
+++ b/src/api/Order.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+import OrderInterface from "../interfaces/OrderInterface";
+
+const REST_URL = "http://localhost:5000"; // TODO : using env
+
+export async function fetchAvailableOrder() {
+    try {
+        const API_URL = REST_URL + "/order/available-order";
+        const response = await axios.get<OrderInterface[]>(API_URL);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/AvailableOrder.tsx b/src/pages/AvailableOrder.tsx
index 8a9b30b11e85b72de782a64ca012f7ba8e65d521..4850810c4aad2aeb1b9a612e5e5ff8e704099717 100644
--- a/src/pages/AvailableOrder.tsx
+++ b/src/pages/AvailableOrder.tsx
@@ -6,46 +6,17 @@ import {
 import OrderInterface from '../interfaces/OrderInterface';
 import { useEffect, useState } from 'react'
 import AvailableOrderCard from '../components/AvailableOrderCard';
-
-// TODO : fetch data from SOAP
-const dummyData : OrderInterface[] = [
-  {
-    alamat : "jl. imam bonjol no.69",
-    nama_penerima : "ukin",
-    biaya_pengiriman : 100
-  },
-  {
-    alamat : "bullet",
-    nama_penerima : "ishraul",
-    biaya_pengiriman : 1111
-  },
-  {
-    alamat : "jl.ngawi",
-    nama_penerima : "rusdi",
-    biaya_pengiriman : 69
-  },
-  {
-    alamat : "jl.ngawi",
-    nama_penerima : "rusdi",
-    biaya_pengiriman : 69
-  },
-  {
-    alamat : "jl.ngawi",
-    nama_penerima : "rusdi",
-    biaya_pengiriman : 69
-  },
-  {
-    alamat : "jl.ngawi",
-    nama_penerima : "rusdi",
-    biaya_pengiriman : 69
-  }
-];
+import { getAvailableOrder } from '../utils/Order';
 
 export default function AvailableOrder() {
-  const [orders, setOrders] = useState<OrderInterface[]>(dummyData);
+  const [orders, setOrders] = useState<OrderInterface[]>([]);
 
   useEffect(() => {
-    
+    const response = getAvailableOrder();
+    response.then((availableOrder) => {
+      console.log(availableOrder.data);
+      setOrders(availableOrder.data);
+    });
   }, []);
 
   return (
diff --git a/src/utils/Order.ts b/src/utils/Order.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecf087397bdf9f53ceccb4af61cd4f5e3dbacf9c
--- /dev/null
+++ b/src/utils/Order.ts
@@ -0,0 +1,6 @@
+import { fetchAvailableOrder } from "../api/Order";
+
+export async function getAvailableOrder() {
+    const userDetail = await fetchAvailableOrder();
+    return userDetail;
+}
\ No newline at end of file