diff --git a/src/stores/Auth.js b/src/stores/Auth.js
index 72b9122..3ce7cd4 100644
--- a/src/stores/Auth.js
+++ b/src/stores/Auth.js
@@ -7,7 +7,11 @@ class Auth {
     this.root = root;
   }
 
-  loginUser = 'LiaoYijun(IT)';
+  login = {
+    userId: 1,
+    username: 'LiaoYijun(IT)',
+    travelAgencyId: 628
+  }
 }
 
 export default Auth;
\ No newline at end of file
diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 28aebfb..5b068b0 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from "mobx";
-import * as req from '@/utils/request';
+import { fetchJSON } from '@/utils/request';
 import { HT_HOST } from "@/config";
 import { prepareUrl } from '@/utils/commons';
 
@@ -11,9 +11,8 @@ class Reservation {
   }
 
   fetchReservation(referenceNo, fromDate, thruDate) {
-    
     const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanSearchList')
-    .append('VEISn', 628)
+    .append('VEISn', this.root.authStore.login.travelAgencyId)
     .append('GroupNo', referenceNo)
     .append('DateStart', fromDate)
     .append('DataEnd', thruDate)
@@ -22,70 +21,28 @@ class Reservation {
     .append('PageNum', 0)
     .append('PageIndex', 1)
     .build();
-    req.fetchJSON(fetchUrl)
-    .then(json => {
-      runInAction(() => {
-        this.reservationList = json.data.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,
+
+    return fetchJSON(fetchUrl)
+      .then(json => {
+        runInAction(() => {
+          if (json.errcode == 0) {
+            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);
           }
         });
       });
-    })
-    .then(() => {
-    });
-
-    // runInAction(() => {
-    //   this.reservationList = [
-    //     {
-    //       key: '1',
-    //       id: '1',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-04-08',
-    //       pax: '5AD 1CH',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-04-08 19:31',
-    //       guide: 'Bill',
-    //     },
-    //     {
-    //       key: '2',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-04-08',
-    //       pax: '5AD 1CH',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-04-08 19:31',
-    //       guide: 'Jim',
-    //     },
-    //     {
-    //       key: '3',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-05-08',
-    //       pax: '3AD',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-01-08 19:31',
-    //       guide: 'Giffigan',
-    //     },
-    //     {
-    //       key: '3',
-    //       id: '3',
-    //       referenceNumber: '111029-N111025076',
-    //       arrivalDate: '2023-05-08',
-    //       pax: '3AD',
-    //       status: 'Confirm',
-    //       reservationDate: '2023-01-08 19:31',
-    //       guide: 'Laurie Notaro',
-    //     },
-    //   ];
-    // });
   }
 
   reservationList = [];
diff --git a/src/views/App.jsx b/src/views/App.jsx
index fa3e6c4..11d08cc 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -1,7 +1,7 @@
 import { Outlet, Link, useHref, useLocation } from "react-router-dom";
 import { useEffect } from 'react';
 import { observer } from "mobx-react";
-import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
+import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, App as AntApp } from 'antd';
 import {
   DownOutlined
 } from '@ant-design/icons';
@@ -64,6 +64,7 @@ function App() {
         algorithm: theme.defaultAlgorithm,
       }}
     >
+      <AntApp>
       <Layout
         style={{
           minHeight: "100vh",
@@ -88,7 +89,7 @@ function App() {
               >
                 <a onClick={(e) => e.preventDefault()}>
                   <Space>
-                    {authStore.loginUser}
+                    {authStore.login.username}
                     <DownOutlined />
                   </Space>
                 </a>
@@ -108,6 +109,7 @@ function App() {
         <Footer>
         </Footer>
       </Layout>
+      </AntApp>
     </ConfigProvider>
   );
 }
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 0a74b2e..2e8c1ee 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -2,7 +2,7 @@ import { NavLink } from "react-router-dom";
 import { useEffect, useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -64,6 +64,8 @@ function Newest() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDateRange, onDateRangeChange] = useState([]);
   const [referenceNo, onNumberChange] = useState('');
+  const [tableLoading, setTableLoading] = useState(false);
+  const { notification } = App.useApp();
 
   const showModal = () => {
     setIsModalOpen(true);
@@ -74,15 +76,25 @@ function Newest() {
   const handleCancel = () => {
     setIsModalOpen(false);
   };
-
+  
   useEffect(() => {
     console.info('Newest.useEffect');
   }, []);
 
-  const onSearchClick = () => {
-    console.info(selectedDateRange);
-    console.info(referenceNo);
-    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1]);
+  const onSearchClick = () => {    
+    setTableLoading(true);
+    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1])
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setTableLoading(false);
+      });
   }
 
   return (
@@ -196,6 +208,7 @@ function Newest() {
             <Table
               title={() => 'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'}
               bordered
+              loading={tableLoading}
               pagination={{
                 position: ['bottomCenter'],
                 current: 1,