diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 2cb70bfa..697ebb9c 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -43,7 +43,8 @@ interface PurchaseOrderDetailProps {
 const dummyPurchaseData: Purchase = {
   id: 1,
   pr_number: 'PR-MBU-01837',
-  po_number: 'Belum dibuat',
+  po_number: 'PO-MBU-01837',
+  po_document_path: '/documents/po-mbu-01837.pdf',
   po_date: '2025-01-10T00:00:00Z',
   supplier: {
     id: 1,
@@ -432,7 +433,27 @@ const PurchaseOrderDetail = ({
     {
       accessorKey: 'travel_number_docs',
       header: 'Dokumen Surat Jalan',
-      cell: (props) => props.row.original.travel_number_docs || '-',
+      cell: (props) => {
+        const documentPath = props.row.original.travel_number_docs;
+        return documentPath ? (
+          <Button
+            color='primary'
+            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
+            href={documentPath}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Icon
+              icon='material-symbols:file-open-outline'
+              width={16}
+              height={16}
+            />
+            Lihat Dokumen
+          </Button>
+        ) : (
+          '-'
+        );
+      },
     },
     {
       accessorKey: 'vehicle_number',
@@ -576,7 +597,7 @@ const PurchaseOrderDetail = ({
                     Area
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.area?.name || '-'}
+                    : {purchaseData.area?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -586,7 +607,7 @@ const PurchaseOrderDetail = ({
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.location?.name || '-'}
+                    : {purchaseData.location?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -596,7 +617,7 @@ const PurchaseOrderDetail = ({
                     Gudang
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.warehouse?.name || '-'}
+                    : {purchaseData.warehouse?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -610,7 +631,7 @@ const PurchaseOrderDetail = ({
                     Nama Supplier
                   </span>
                   <span className='text-gray-900 font-medium ml-3 break-all'>
-                    {purchaseData.supplier?.name || '-'}
+                    : {purchaseData.supplier?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -620,7 +641,7 @@ const PurchaseOrderDetail = ({
                     Alamat Supplier
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.supplier?.address || '-'}
+                    : {purchaseData.supplier?.address || '-'}
                   </span>
                 </div>
               </div>
@@ -630,6 +651,7 @@ const PurchaseOrderDetail = ({
                     Tgl. Jatuh Tempo
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
+                    :{' '}
                     {new Date(purchaseData.due_date).toLocaleDateString(
                       'id-ID',
                       {
@@ -648,7 +670,7 @@ const PurchaseOrderDetail = ({
                     Nomor
                   </span>
                   <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseData.pr_number}
+                    : {purchaseData.pr_number}
                   </span>
                 </div>
               </div>
@@ -657,9 +679,40 @@ const PurchaseOrderDetail = ({
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
                     Nomor PO
                   </span>
-                  <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseData.po_number || 'Belum dibuat'}
-                  </span>
+                  <div className='ml-3'>
+                    {purchaseData.po_number &&
+                    purchaseData.po_number !== 'Belum dibuat' ? (
+                      <Button
+                        color='primary'
+                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+                        disabled={!purchaseData.po_document_path}
+                        href={purchaseData.po_document_path ?? undefined}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >
+                        {purchaseData.po_document_path ? (
+                          <>
+                            <Icon
+                              icon='material-symbols:file-open-outline'
+                              width={16}
+                              height={16}
+                            />
+                            {purchaseData.po_number}
+                          </>
+                        ) : (
+                          purchaseData.po_number
+                        )}
+                      </Button>
+                    ) : (
+                      <Button
+                        color='primary'
+                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+                        disabled
+                      >
+                        PO-MBU-01837
+                      </Button>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 561499e2..57a5eb9a 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -28,6 +28,7 @@ export type BasePurchase = {
   id: number;
   pr_number: string;
   po_number: string;
+  po_document_path?: string | null;
   po_date: string;
   supplier: Supplier;
   credit_term: number;