diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index e28cf66..63e9f9a 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -26,9 +26,9 @@ class Reservation {
 
     return fetchJSON(fetchUrl)
       .then(json => {
-        runInAction(() => {
-          if (json.errcode == 0) {
-            this.reservationList = json.Result.map((data, index) => {
+        if (json.errcode == 0) {
+          runInAction(() => {
+            this.reservationList = (json?.Result ?? []).map((data, index) => {
               return {
                 key: data.vas_gri_sn,
                 reservationId: data.vas_gri_sn,
@@ -40,11 +40,11 @@ class Reservation {
                 guide: data.Guide
               }
             });
-            this.reservationPage.total = json.Result[0].RsTotal;
-          } else {
-            throw new Error(json.errmsg + ': ' + json.errcode);
-          }
-        });
+            this.reservationPage.total = (json?.Result ?? [{RsTotal: 0}]).RsTotal;
+          });
+        } else {
+          throw new Error(json.errmsg + ': ' + json.errcode);
+        }
       });
   }
 
@@ -58,7 +58,7 @@ class Reservation {
       .then(json => {
         if (json.errcode == 0) {
           runInAction(() => {
-            this.itineraryList = json.VendorTour.map((data, index) => {
+            this.itineraryList = (json?.VendorTour ?? []).map((data, index) => {
               return {
                 key: data.GRD_SN,
                 day: data.GRD_OrderDate,
@@ -72,7 +72,7 @@ class Reservation {
               referenceNumber: json.PlanDetail[0].GRI_Name, tourGuide: json.PlanDetail[0].Guide, arrivalDate: json.PlanDetail[0].eoi_getdate
             };
             this.customerNames = json.CusAndRequest[0].GCI_CustomerList;
-            this.confirmationList = json.PlanChange.map((data, index) => {
+            this.confirmationList = (json?.PlanChange ?? []).map((data, index) => {
               return {
                 key: data.PCI_SN,
                 PCI_Changetext: data.PCI_Changetext,
diff --git a/src/views/App.jsx b/src/views/App.jsx
index 65b949f..8e02070 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -1,13 +1,15 @@
 import { Outlet, Link, useHref, useLocation, NavLink } from "react-router-dom";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Alert, App as AntApp } from "antd";
+import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Alert, Typography, Divider, App as AntApp } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import "antd/dist/reset.css";
 import AppLogo from "@/assets/logo-gh.png";
 import { useStore } from "@/stores/StoreContext.js";
 
 const { Header, Content, Footer } = Layout;
+const { Title } = Typography;
+
 const items = [
 	{
 		label: <Link to="/account/change-password">Change password</Link>,
@@ -62,8 +64,8 @@ function App() {
 						minHeight: "100vh",
 					}}>
 					<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
-						<Row gutter={{ md: 24 }} justify="end">
-							<Col span={20}>
+						<Row gutter={{ md: 24 }} justify="end"  align="middle">
+							<Col span={18}>
 								<NavLink to="/">
 									<img src={AppLogo} className="logo" alt="App logo" />
 								</NavLink>
@@ -79,6 +81,9 @@ function App() {
 									]}
 								/>
 							</Col>
+							<Col span={2}>
+              <Title level={3} style={{color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end'}}>{authStore.login.travelAgencyName}</Title>
+							</Col>
 							<Col span={4}>
 								<Dropdown
 									menu={{
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index b674157..795e694 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -1,5 +1,5 @@
 import { NavLink } from "react-router-dom";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd';
@@ -73,6 +73,7 @@ function Newest() {
         allowClear
         placeholder="Select a guide"
         optionFilterProp="children"
+        defaultValue={city.tourGuideId}
         onChange={(guideId) => {
           reservationStore.setupCityGuide(city.cityId, guideId);
         }}
@@ -92,7 +93,7 @@ function Newest() {
   
 	const arrivalDateFrom = dayjs().startOf("M");
 	const arrivalDateThru = dayjs().endOf("M");
-  const [arrivalDateRange, onDateRangeChange] = useState([]);
+  const [arrivalDateRange, onDateRangeChange] = useState([arrivalDateFrom, arrivalDateThru]);
   const [referenceNo, onNumberChange] = useState('');
   const [dataLoading, setDataLoading] = useState(false);
   const { notification } = App.useApp();
@@ -104,6 +105,24 @@ function Newest() {
     }
   });
 
+  useEffect(() => {
+    setDataLoading(true);
+    reservationStore.fetchReservationList(
+      1, referenceNo, 
+      arrivalDateRange[0].format('YYYY-MM-DD'), arrivalDateRange[1].format('YYYY-MM-DD'))
+      .catch(ex => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: 'top',
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setDataLoading(false);
+      });
+  }, []);
+
   const showCityGuideModal = (reservation) => {  
     setDataLoading(true);  
     setIsModalOpen(true);
@@ -192,7 +211,7 @@ function Newest() {
                 allowClear={true}
                 inputReadOnly={true}
                 presets={DATE_PRESETS}
-                value={[arrivalDateFrom, arrivalDateThru]}
+                defaultValue={[arrivalDateFrom, arrivalDateThru]}
                 placeholder={['From', 'Thru']}
                 onChange={(date, dateRange) => { onDateRangeChange(dateRange)}}
               />