diff --git a/src/stores/Auth.js b/src/stores/Auth.js
index 3ce7cd4..c547088 100644
--- a/src/stores/Auth.js
+++ b/src/stores/Auth.js
@@ -9,7 +9,7 @@ class Auth {
 
   login = {
     userId: 1,
-    username: 'LiaoYijun(IT)',
+    username: 'Giffigan(Discova)',
     travelAgencyId: 628
   }
 }
diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 5b068b0..4fc465d 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -10,7 +10,7 @@ class Reservation {
     this.root = root;
   }
 
-  fetchReservation(referenceNo, fromDate, thruDate) {
+  fetchReservationList(referenceNo, fromDate, thruDate) {
     const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanSearchList')
     .append('VEISn', this.root.authStore.login.travelAgencyId)
     .append('GroupNo', referenceNo)
@@ -45,6 +45,36 @@ class Reservation {
       });
   }
 
+  fetchReservation(reservationId) {
+    const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanInfo')
+    .append('VEI_SN', this.root.authStore.login.travelAgencyId)
+    .append('GRI_SN', reservationId)
+    .build();
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        runInAction(() => {
+          if (json.errcode == 0) {
+            console.info(json);
+            // this.reservationList = json.Result.map((data, index) => {
+            //   return {
+            //     key: data.vas_gri_sn,
+            //     id: data.vas_gri_sn,
+            //     referenceNumber: data.GriName,
+            //     arrivalDate: data.GetGDate,
+            //     pax: data.PersonNum,
+            //     status: data.GState,
+            //     reservationDate: data.GetGDate,
+            //     guide: data.Guide,
+            //   }
+            // });
+          } else {
+            throw new Error(json.errmsg + ': ' + json.errcode);
+          }
+        });
+      });
+  }
+
   reservationList = [];
 
   customerList = [
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index 9dcfe22..b5bed7c 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import moment from "moment";
-import { Row, Col, Space, Button, Table, Input, Typography, List } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, List, App } from 'antd';
 import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -39,12 +39,22 @@ const itineraryListColumns = [
 
 function Detail() {
   const navigate = useNavigate();
+  const { notification } = App.useApp();
   const { reservationId } = useParams();
   const { reservationStore } = useStore();
   const { itineraryList, customerList } = reservationStore;
 
   useEffect(() => {
-    console.info('Detail.useEffect: ' + reservationId);
+    console.info('Detail.useEffect: ' + reservationId);    
+    reservationStore.fetchReservation(reservationId)
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      });
   }, [reservationId]);
 
   return (
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 2e8c1ee..a047964 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -83,7 +83,7 @@ function Newest() {
 
   const onSearchClick = () => {    
     setTableLoading(true);
-    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1])
+    reservationStore.fetchReservationList(referenceNo, selectedDateRange[0], selectedDateRange[1])
       .catch(ex => {
         notification.error({
           message: `Notification`,