diff --git a/src/api/Order.ts b/src/api/Order.ts
index 8d2b175aead105b04f1f331b6a4cbb6e8244eca0..baa654832ebed0a42e88179f2a5982fe56853ce9 100644
--- a/src/api/Order.ts
+++ b/src/api/Order.ts
@@ -48,3 +48,15 @@ export async function fetchOrderByCourier(courierId : number) {
     }
 }
 
+export async function pickOrderAPI(orderId : number, username : string) {
+    try {
+        const API_URL = REST_URL + "/order/pick-order";
+        const data = {orderId : orderId, username : username};
+        const response = await axios.put(API_URL, data);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
+
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index cc02093eb3cf339565324abc81ba687ec47451e8..7fd9a22316b163996650e1c0c0fabedd96112745 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -16,8 +16,9 @@ import {
 import { useEffect, useState } from 'react'
 import OrderDetail from '../interfaces/OrderDetail';
 import OrderInterface from '../interfaces/OrderInterface';
-import { useParams } from 'react-router-dom';
-import { getOrderById, getOrderDetails } from '../utils/Order';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getOrderById, getOrderDetails, pickOrder } from '../utils/Order';
+import { getUser } from '../utils/LocalStorage';
 
 
 export default function AvailableOrderDetail() {
@@ -25,6 +26,18 @@ export default function AvailableOrderDetail() {
   const orderId = parseInt(id ? id : "0");
   const [order, setOrder] = useState<OrderInterface>();
   const [orderDetails, setOrderDetails] = useState<OrderDetail[]>([]);
+  const navigate = useNavigate();
+
+  function pickOrderAction() {
+    const username = getUser();
+    if(!username) {
+      alert("Perlu log in");
+      return;
+    }
+    
+    pickOrder(orderId, username);
+    navigate("/PickedOrder");
+  }
 
   useEffect(() => {
     const orderResponse = getOrderById(orderId);
@@ -96,7 +109,6 @@ export default function AvailableOrderDetail() {
               </Tbody>
             </Table>
           </TableContainer>
-          {/* TODO : implement pick order */}
           <Button
             display={{ base: 'none', md: 'inline-flex' }}
             fontSize={'sm'}
@@ -106,6 +118,7 @@ export default function AvailableOrderDetail() {
             _hover={{
               bg: 'blue.300',
             }}
+            onClick={pickOrderAction}
             >
             Ambil Order
           </Button>
diff --git a/src/utils/Order.ts b/src/utils/Order.ts
index d71de5c4cec530bc92034c4daaea8573a4d0afd6..30f227f8e0fd44870f22f28c761b85360f4e3d37 100644
--- a/src/utils/Order.ts
+++ b/src/utils/Order.ts
@@ -1,4 +1,4 @@
-import { fetchAvailableOrder, fetchOrderByCourier, fetchOrderById, fetchOrderDetails } from "../api/Order";
+import { fetchAvailableOrder, fetchOrderByCourier, fetchOrderById, fetchOrderDetails, pickOrderAPI } from "../api/Order";
 
 export async function getAvailableOrder() {
     const availableOrders = await fetchAvailableOrder();
@@ -18,4 +18,9 @@ export async function getOrderDetails(orderId : number) {
 export async function getOrderByCourier(courierId : number) {
     const orders = await fetchOrderByCourier(courierId);
     return orders;
+}
+
+export async function pickOrder(orderId : number, username : string) {
+    const response = await pickOrderAPI(orderId, username);
+    return response;
 }
\ No newline at end of file