diff --git a/src/main.jsx b/src/main.jsx
index 7c6c9f8..1713825 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -24,6 +24,7 @@ import NoticeIndex from '@/views/notice/Index'
 import NoticeDetail from '@/views/notice/Detail'
 import InvoiceIndex from '@/views/invoice/Index'
 import InvoiceDetail from '@/views/invoice/Detail'
+import InvoiceHistory from '@/views/invoice/History'
 import InvoicePaid from '@/views/invoice/Paid'
 import InvoicePaidDetail from '@/views/invoice/PaidDetail'
 import Airticket from '@/views/airticket/Index'
@@ -64,6 +65,7 @@ const initRouter = async () => {
         { path: 'notice/:CCP_BLID', element: <NoticeDetail />},
         { path: 'invoice',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceIndex /></RequireAuth>},
         { path: 'invoice/detail/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceDetail /></RequireAuth>},
+        { path: 'invoice/history/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceHistory /></RequireAuth>},
         { path: 'invoice/paid',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaid /></RequireAuth>},
         { path: 'invoice/paid/detail/:flid', element: <RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaidDetail /></RequireAuth>},
         { path: 'airticket',element: <RequireAuth subject={PERM_AIR_TICKET} result={true}><Airticket /></RequireAuth>},
diff --git a/src/views/invoice/Detail.jsx b/src/views/invoice/Detail.jsx
index 5b8b6cb..a41f12c 100644
--- a/src/views/invoice/Detail.jsx
+++ b/src/views/invoice/Detail.jsx
@@ -1,7 +1,7 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions, Image } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import { PlusOutlined,AuditOutlined } from "@ant-design/icons";
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
@@ -224,7 +224,7 @@ function Detail() {
 											<Descriptions column={1}>
 												<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
 												<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
-												<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
+												<Descriptions.Item label="Due Date">{data.GMD_PayDate}</Descriptions.Item>
 												<Descriptions.Item label="Status">{invoiceStatus(data.FKState)}</Descriptions.Item>
 											</Descriptions>
 										</Col>
@@ -358,6 +358,9 @@ function Detail() {
 					</Col>
 					<Col span={4}>
 						<BackBtn />
+						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/history/0/338787`)}>
+							Billing Records
+						</Button>
 					</Col>
 				</Row>
 				<Title level={5}></Title>
diff --git a/src/views/invoice/History.jsx b/src/views/invoice/History.jsx
new file mode 100644
index 0000000..1238718
--- /dev/null
+++ b/src/views/invoice/History.jsx
@@ -0,0 +1,130 @@
+import { useParams, NavLink, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Row, Col, Space, Table, Image,App } from "antd";
+import { formatDate, isNotEmpty } from "@/utils/commons";
+import SearchForm from "@/components/SearchForm";
+import dayjs from "dayjs";
+import BackBtn from "@/components/BackBtn";
+import { fetchInvoiceDetail } from "@/stores/Invoice";
+import useInvoiceStore from "@/stores/Invoice";
+import { usingStorage } from "@/hooks/usingStorage";
+
+function History() {
+  const { travelAgencyId } = usingStorage();
+  const { GMDSN, GSN } = useParams();
+  const [dataLoading, setDataLoading] = useState(false);
+  const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
+  const { notification } = App.useApp();
+
+  useEffect(() => {
+    defaultShow();
+  }, [GMDSN, GSN]);
+
+  function defaultShow() {
+    setDataLoading(true);
+
+    fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
+      .then((json) => {
+        //console.log("id:"+travelAgencyId+",gmdsn:"+GMDSN+",GSN:"+GSN+"#13"+json);
+        setInvoiceZDDetail(json.invoiceZDDetail);
+      })
+      .catch((ex) => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: "top",
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setDataLoading(false);
+      });
+  }
+
+  const invoicePaidColumns = [
+    {
+      title: "ID",
+      dataIndex: "GMD_SN",
+      key: "GMD_SN",
+    },
+    {
+      title: "Due Date",
+      key: "GMD_PayDate",
+      dataIndex: "GMD_PayDate",
+      render: (text, record) =>
+        isNotEmpty(text) ? formatDate(new Date(text)) : "",
+    },
+    {
+      title: "Amount",
+      key: "GMD_Cost",
+      dataIndex: "GMD_Cost",
+    },
+    {
+      title: "Currency",
+      key: "GMD_Currency",
+      dataIndex: "GMD_Currency",
+    },
+    {
+      title: "Status",
+      key: "FKState",
+      dataIndex: "FKState",
+      render: (text, record) => (isNotEmpty(record.FKState) ? invoiceStatus(record.FKState) : text),
+    },
+    {
+      title: "Invoice",
+      key: "GMD_Pic",
+      dataIndex: "GMD_Pic",
+      render: showPIc,
+    },
+  ];
+
+  const invoiceStatus = (FKState) => {
+    switch (FKState - 1) {
+      case 1:
+        return "Submitted";
+      case 2:
+        return "Travel Advisor";
+      case 3:
+        return "Finance Dept";
+      case 4:
+        return "Paid";
+      default:
+        return "";
+    }
+  };
+
+  function showPIc(text, record) {
+    let strPic = record.GMD_Pic;
+    //console.log(JSON.parse(strPic));
+    if (isNotEmpty(strPic)) {
+      return JSON.parse(strPic).map((item, index) => {
+        return <Image key={index} width={90} src={item.url} />;
+      });
+    } else {
+      return "";
+    }
+  }
+
+  return (
+    <Space direction="vertical" style={{ width: "100%" }}>
+      <Row gutter={16}>
+        <Col span={20}></Col>
+        <Col span={4}>
+          <BackBtn />
+        </Col>
+      </Row>
+      <Row>
+        <Col md={24} lg={24} xxl={24}>
+          <Table
+            rowKey={"GMD_SN"}
+            bordered
+            columns={invoicePaidColumns}
+            dataSource={invoiceZDDetail}
+          />
+        </Col>
+      </Row>
+    </Space>
+  );
+}
+
+export default History;
diff --git a/src/views/invoice/Index.jsx b/src/views/invoice/Index.jsx
index 559a718..a36f9b4 100644
--- a/src/views/invoice/Index.jsx
+++ b/src/views/invoice/Index.jsx
@@ -72,33 +72,35 @@ function Index() {
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
 			<Row gutter={16}>
-				<Col flex="auto">
-      <SearchForm
-        initialValue={{
-          dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-        }}
-        fieldsConfig={{
-          shows: ['referenceNo', 'invoiceStatus', 'dates'],
-          fieldProps: {
-            referenceNo: { col: 7 },
-            invoiceStatus: { col: 4},
-            dates: { col: 10 },
-          },
-        }}
-        onSubmit={(err, formVal, filedsVal) => {
-          fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus);
-        }}
-        />
-        </Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
-						Misc. Invoice
-					</Button>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
-						Bank statement
-					</Button>
-        </Col>
-        </Row>
+				<Col md={16} sm={16} xs={24}  >
+					<SearchForm
+					initialValue={{
+					dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
+					}}
+					fieldsConfig={{
+					shows: ['referenceNo', 'invoiceStatus', 'dates'],
+					fieldProps: {
+						referenceNo: { col: 7 },
+						invoiceStatus: { col: 4},
+						dates: { col: 10 },
+					},
+					}}
+					onSubmit={(err, formVal, filedsVal) => {
+					fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus);
+					}}
+					/>
+				</Col>
+				<Col md={8} sm={8} xs={24} >
+					<Space>
+						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/395074`)}>
+							Misc. Invoice
+						</Button>
+						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
+							Bank statement
+						</Button>
+					</Space>
+				</Col>
+			</Row>
 			<Row>
 				<Col md={24} lg={24} xxl={24}>
 					<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={(invoiceList)} />