diff --git a/package.json b/package.json
index 2aee161..1a7b137 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "antd": "^5.4.2",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
-    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0"
diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 37158a2..28aebfb 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -10,14 +10,24 @@ class Reservation {
     this.root = root;
   }
 
-  fetchRecent() {
+  fetchReservation(referenceNo, fromDate, thruDate) {
     
-    req.fetchJSON(HT_HOST + '/service-tourdesign/GetPlanSearchList?VEISn=628&GroupNo=&DateStart=2023-01-01&DataEnd=2023-05-01&ReTotal=0&PageSize=10&PageNum=0&PageIndex=1')
+    const fetchUrl = prepareUrl(HT_HOST + '/service-tourdesign/GetPlanSearchList')
+    .append('VEISn', 628)
+    .append('GroupNo', referenceNo)
+    .append('DateStart', fromDate)
+    .append('DataEnd', thruDate)
+    .append('ReTotal', 0)
+    .append('PageSize', 0)
+    .append('PageNum', 0)
+    .append('PageIndex', 1)
+    .build();
+    req.fetchJSON(fetchUrl)
     .then(json => {
       runInAction(() => {
         this.reservationList = json.data.map((data, index) => {
           return {
-            key: '1',
+            key: data.vas_gri_sn,
             id: data.vas_gri_sn,
             referenceNumber: data.GriName,
             arrivalDate: data.GetGDate,
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 27a4684..0a74b2e 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -62,6 +62,8 @@ function Newest() {
   const { reservationStore } = useStore();
   const { reservationList } = reservationStore;
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedDateRange, onDateRangeChange] = useState([]);
+  const [referenceNo, onNumberChange] = useState('');
 
   const showModal = () => {
     setIsModalOpen(true);
@@ -77,6 +79,12 @@ function Newest() {
     console.info('Newest.useEffect');
   }, []);
 
+  const onSearchClick = () => {
+    console.info(selectedDateRange);
+    console.info(referenceNo);
+    reservationStore.fetchReservation(referenceNo, selectedDateRange[0], selectedDateRange[1]);
+  }
+
   return (
     <>
       <Modal
@@ -166,7 +174,7 @@ function Newest() {
         <Title level={3}>Newest Reservations</Title>
         <Row gutter={{ md: 24 }}>
           <Col span={4}>
-            <Input placeholder="Reference number" />
+            <Input placeholder="Reference number" onChange={(e) => {onNumberChange(e.target.value)}} />
           </Col>
           <Col span={6}>
             <Space direction="horizontal">
@@ -175,11 +183,12 @@ function Newest() {
                 allowClear={true}
                 inputReadOnly={true}
                 placeholder={['From', 'Thru']}
+                onChange={(date, dateRange) => { onDateRangeChange(dateRange)}}
               />
             </Space>
           </Col>
           <Col span={14}>
-            <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
+            <Button type='primary' onClick={() => onSearchClick()}>Search</Button>
           </Col>
         </Row>
         <Row>