diff --git a/src/stores/Reservation.js b/src/stores/Reservation.js
index 4f5081a..33c1b1f 100644
--- a/src/stores/Reservation.js
+++ b/src/stores/Reservation.js
@@ -75,6 +75,16 @@ class Reservation {
               customerNames: json.JJPInfo[0].CustomerName, referenceNumber: json.JJPInfo[0].GroupName, pax: json.JJPInfo[0].Str_PersonNum
             };
             this.customerNames = json.CusAndRequest[0].GCI_CustomerList;
+            this.confirmationList = json.PlanChange.map((data, index) => {
+              return {
+                key: data.PCI_SN,
+                PCI_Changetext: data.PCI_Changetext,
+                PCI_SendDate: data.PCI_SendDate,
+                ConfirmPerson: data.ConfirmPerson,
+                PCI_ConfirmText: data.PCI_ConfirmText,
+                PCI_ConfirmDate: data.PCI_ConfirmDate
+              }
+            });
           } else {
             throw new Error(json.errmsg + ': ' + json.errcode);
           }
@@ -109,22 +119,6 @@ class Reservation {
       });
   }
 
-  setupCityGuide(cityId, guideId) {
-    let formData = new FormData();
-    formData.append('GRI_SN', this.selectedReservation.reservationId);
-    formData.append('VEI_SN', this.root.authStore.login.travelAgencyId);
-    formData.append('TGI_SN', guideId);
-    formData.append('CII_SN', cityId);
-    formData.append('GetDate', this.selectedReservation.reservationDate);
-    formData.append('LMI_SN', this.root.authStore.login.userId);
-    const postUrl = HT_HOST + '/service-cusservice/PTAddGuide';
-
-    return postForm(postUrl, formData)
-      .then(json => {
-        console.info(json);
-      });
-  }
-
   fetchGuideList() {
     const fetchUrl = prepareUrl(HT_HOST + '/service-cusservice/PTGetGuideList')
       .append('VEI_SN', 628)//this.root.authStore.login.travelAgencyId)
@@ -148,14 +142,44 @@ class Reservation {
       });
   }
 
-  editReservation(reservation) {
-    this.selectedReservation = reservation;
+  setupCityGuide(cityId, guideId) {
+    let formData = new FormData();
+    formData.append('GRI_SN', this.selectedReservation.reservationId);
+    formData.append('VEI_SN', this.root.authStore.login.travelAgencyId);
+    formData.append('TGI_SN', guideId);
+    formData.append('CII_SN', cityId);
+    formData.append('GetDate', this.selectedReservation.reservationDate);
+    formData.append('LMI_SN', this.root.authStore.login.userId);
+    const postUrl = HT_HOST + '/service-cusservice/PTAddGuide';
+
+    return postForm(postUrl, formData)
+      .then(json => {
+        console.info(json);
+      });
+  }
+
+  submitConfirmation(confirmText) {
+    let formData = new FormData();
+    formData.append('PCI_SN', this.selectedConfirmation.key);
+    formData.append('OPSN', this.root.authStore.login.userId);
+    formData.append('ConfirmText', confirmText);
+    const postUrl = HT_HOST + '/service-cusservice/PTConfirmPlanChange';
+
+    return postForm(postUrl, formData)
+      .then(json => {
+        console.info(json);
+      });
+  }
+
+  editConfirmation(confirmation) {
+    this.selectedConfirmation = confirmation;
   }
 
   guideList = [];
   cityList = [];
 
   selectedReservation = null;
+  selectedConfirmation = null;
 
   reservationList = [];
 
@@ -175,6 +199,9 @@ class Reservation {
 
   itineraryList = [
   ];
+  
+  confirmationList = [
+  ];
 
   customerNames = '';
 }
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index b178a83..53bb003 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -2,47 +2,103 @@ import { useParams, useNavigate } 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, List, App } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, Modal, App } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
 const { TextArea } = Input;
 
-const itineraryListColumns = [
-  {
-    title: 'Day',
-    dataIndex: 'day',
-    key: 'day',
-  },
-  {
-    title: 'Place & Transport',
-    dataIndex: 'placeTransport',
-    key: 'placeTransport',
-  },
-  {
-    title: 'Today’s Activities',
-    dataIndex: 'todayActivities',
-    key: 'todayActivities',
-  },
-  {
-    title: 'Accommodation',
-    dataIndex: 'accommodation',
-    key: 'accommodation',
-  },
-  {
-    title: 'Meals',
-    dataIndex: 'meals',
-    key: 'meals',
-  },
-];
-
 function Detail() {
+
+  const itineraryListColumns = [
+    {
+      title: 'Day',
+      dataIndex: 'day',
+      key: 'day',
+    },
+    {
+      title: 'Place & Transport',
+      dataIndex: 'placeTransport',
+      key: 'placeTransport',
+    },
+    {
+      title: 'Today’s Activities',
+      dataIndex: 'todayActivities',
+      key: 'todayActivities',
+    },
+    {
+      title: 'Accommodation',
+      dataIndex: 'accommodation',
+      key: 'accommodation',
+    },
+    {
+      title: 'Meals',
+      dataIndex: 'meals',
+      key: 'meals',
+    },
+  ];
+
+  const confirmationListColumns = [
+    {
+      title: 'PCI_Changetext',
+      dataIndex: 'PCI_Changetext',
+    },
+    {
+      title: 'PCI_SendDate',
+      dataIndex: 'PCI_SendDate',
+    },
+    {
+      title: 'ConfirmPerson',
+      dataIndex: 'ConfirmPerson',
+    },
+    {
+      title: 'PCI_ConfirmText',
+      dataIndex: 'PCI_ConfirmText',
+    },
+    {
+      title: 'PCI_ConfirmDate',
+      dataIndex: 'PCI_ConfirmDate',
+    },
+    {
+      title: 'Action',
+      render: confirmRender
+    },
+  ];
+    
+  function confirmRender(text, confirm) {
+    return (
+      <Button type="link" onClick={() => showConfirmModal(confirm)}>Confirm</Button>
+    );
+  }
+
   const navigate = useNavigate();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
   const { notification } = App.useApp();
   const { reservationId } = useParams();
   const { reservationStore } = useStore();
   const [dataLoading, setDataLoading] = useState(false);
-  const { itineraryList, customerNames, customerList, reservationDetail } = reservationStore;
+  const { itineraryList, customerNames, confirmationList, reservationDetail } = reservationStore;
+
+  const showConfirmModal = (confirm) => { 
+    setIsModalOpen(true);
+    setConfirmText(confirm.PCI_ConfirmText);
+    reservationStore.editConfirmation(confirm);
+    console.info(confirm);
+  };
+
+  const handleOk = () => {
+    setConfirmLoading(true);
+    reservationStore.submitConfirmation(confirmText)
+      .finally(() => {
+        setIsModalOpen(false);
+        setConfirmLoading(false);
+      });
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
 
   useEffect(() => {
     setDataLoading(true);
@@ -61,6 +117,22 @@ function Detail() {
   }, [reservationId]);
 
   return (
+    <>
+    <Modal
+        centered
+        confirmLoading={confirmLoading}
+        open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+      >
+        <Title level={4}>Confirm</Title>
+        <TextArea
+          value={confirmText}
+          onChange={(e) => setConfirmText(e.target.value)}
+          autoSize={{
+            minRows: 3,
+            maxRows: 5,
+          }}
+        />
+      </Modal>
     <Space direction="vertical" style={{ width: '100%' }}>
     <Row gutter={{ md: 24 }}>
         <Col span={20}>
@@ -100,21 +172,17 @@ function Detail() {
       <Row>
         <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
           <Title level={5}>Confirmation</Title>
-          <TextArea rows={4} 
-            autoSize={{
-              minRows: 2,
-              maxRows: 6,
-            }}
-        value="------变更内容 (2023-04-17):------
-客人火车变更：
-4月27日 D2952(1249-1549)(一等)北站
-4月30日 D1761(1646-2006)(一等)西站
-======收到后请速确认并回执，谢谢!  变更日期：2023-04-16" maxLength={6} />
-<Button type="primary" onClick={() => console.info('submit')}>Submit</Button>
+          <Table 
+            bordered
+            loading={dataLoading}
+            pagination={false}
+            dataSource={toJS(confirmationList)} columns={confirmationListColumns} 
+          />
           </Space>      
         </Col>
       </Row>
     </Space>
+    </>
   );
 }
 
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 368fbc4..496f4c6 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -119,9 +119,11 @@ function Newest() {
   };
   const handleOk = () => {
     setIsModalOpen(false);
+    setDataLoading(false);
   };
   const handleCancel = () => {
     setIsModalOpen(false);
+    setDataLoading(false);
   };
   
   const onSearchClick = (current=1) => {