diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 8908c75..b9f94c7 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -35,6 +35,13 @@ export const fetchAllItinerary = async (reservationId) => {
   return errcode !== 0 ? {} : result
 }
 
+export const fetchTransport = async (reservationId) => {
+  const { errcode, result } = await fetchJSON(
+    `${TGA_HOST}/api/index.php/oversea/transport/`,
+    { group_id: reservationId })
+
+  return errcode !== 0 ? {} : result
+}
 export const fetchAttachList = async (reservationId) => {
 
   const { errcode, result } = await fetchJSON(
@@ -64,11 +71,9 @@ const useReservationStore = create(devtools((set, get) => ({
     total: 0
   },
 
-  confirmationList: [
-  ],
-
-  itineraryList: [
-  ],
+  confirmationList: [],
+  itineraryList: [],
+  flightList: [],
 
   getCityListByReservationId: async (reservationId) => {
     const { selectedAgencyId } = get()
@@ -178,6 +183,8 @@ const useReservationStore = create(devtools((set, get) => ({
     const { planDetail, planChangeList } = await fetchPlanDetail(travelAgencyId, reservationId)
     const attachListJson = await fetchAttachList(reservationId)
     const itineraryListJson = await fetchAllItinerary(reservationId)
+    const transportDetailJson = await fetchTransport(reservationId)
+
 
     const mapConfirmationList = planChangeList.map((data) => {
       const filterAttchList = attachListJson.filter(attch => {
@@ -203,7 +210,8 @@ const useReservationStore = create(devtools((set, get) => ({
         reservationId: reservationId
       },
       confirmationList: mapConfirmationList,
-      itineraryList: itineraryListJson
+      itineraryList: itineraryListJson,
+      flightList: transportDetailJson.flight
     }))
   },
 
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index 2461465..df1f780 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -1,6 +1,6 @@
 import { useParams, useNavigate } from 'react-router-dom'
 import { useEffect, useState } from 'react'
-import { Row, Col, Space, Button, Table, Input, Typography, Modal, Tabs, App, Flex } from 'antd'
+import { Row, Col, Space, Button, Table, Input, Typography, Modal, Descriptions, Tabs, App, Flex } from 'antd'
 import {
   ArrowLeftOutlined
 } from '@ant-design/icons'
@@ -69,9 +69,78 @@ function Detail() {
         return (<span>{itinerary.localAgents} - {itinerary.agentContact} {itinerary.agentMobile}</span>)
       }
     },
+  ];
 
+  const flightColumns = [
+    {
+      title: 'Date',
+      dataIndex: 'FlightDate',
+      key: 'FlightDate',
+    },
+    {
+      title: 'Flight Number',
+      dataIndex: 'FlightNo',
+      key: 'FlightNo',
+    },
+    {
+      title: 'Departure Airport',
+      dataIndex: 'FromAirport',
+      key: 'FromAirport',
+    },
+    {
+      title: 'Terminal',
+      dataIndex: 'FromTerminal',
+      key: 'FromTerminal',
+    },
+    {
+      title: 'Arrival Airport',
+      dataIndex: 'ToAirport',
+      key: 'ToAirport',
+    },
+    {
+      title: 'Terminal',
+      dataIndex: 'ToTerminal',
+      key: 'ToTerminal',
+    },
+    {
+      title: 'Departure Time',
+      dataIndex: 'FlightDate',
+      key: 'FlightDate',
+    },
+    {
+      title: 'Arrival Time',
+      dataIndex: 'FlightEnd',
+      key: 'FlightEnd',
+    },
+    {
+      title: 'Luggage Allowance',
+      dataIndex: 'Baggage',
+      key: 'Baggage',
+    },
+    {
+      title: 'Tickets Number and Passports',
+      dataIndex: 'destinations',
+      key: 'destinations',
+      align: 'left',
+      render: (_, flight) => {
+        return (<Table loading={dataLoading} columns={seatColumns} dataSource={flight.seatList} pagination={false} />)
+      }
+    },
   ];
 
+  const seatColumns = [
+    {
+      title: 'Tickets Number',
+      dataIndex: 'ticketNo',
+      key: 'ticketNo',
+    },
+    {
+      title: 'Passengers',
+      dataIndex: 'memo',
+      key: 'memo',
+    },
+  ]
+
   function detailTextRender(_, confirm) {
     const formattedText = confirm.PCI_ConfirmText;
     return (
@@ -109,9 +178,9 @@ function Detail() {
 
   const { loginToken } = usingStorage()
 
-  const [getReservationDetail, reservationDetail, confirmationList, itineraryList, selectConfirmation, submitConfirmation, selectedAgencyId] =
+  const [getReservationDetail, reservationDetail, confirmationList, itineraryList, flightList, selectConfirmation, submitConfirmation, selectedAgencyId] =
     useReservationStore((state) =>
-      [state.getReservationDetail, state.reservationDetail, state.confirmationList, state.itineraryList, state.selectConfirmation, state.submitConfirmation, state.selectedAgencyId])
+      [state.getReservationDetail, state.reservationDetail, state.confirmationList, state.itineraryList, state.flightList, state.selectConfirmation, state.submitConfirmation, state.selectedAgencyId])
   const randomString = new Date().getTime()
   const officeWebViewerUrl =
     'https://view.officeapps.live.com/op/embed.aspx?wdPrint=1&wdHideGridlines=0&wdHideComments=1&wdEmbedCode=0&src=';
@@ -218,7 +287,8 @@ function Detail() {
         </Col>
       </Row>
       <Row>
-        <Col span={24}><Space direction='vertical' className='w-full'>
+        <Col span={24}>
+        <Space direction='vertical' className='w-full'>
           <Table
             bordered
             loading={dataLoading}
@@ -228,6 +298,13 @@ function Detail() {
           </Space>
         </Col>
       </Row>
+      <Row>
+        <Col span={24}>
+          <Table title={() => 'Flight Tickets Info'}
+            bordered
+            loading={dataLoading} columns={flightColumns} dataSource={flightList} pagination={false} />
+        </Col>
+      </Row>
     </Space>
     </>
   );