diff --git a/src/views/reservation/NameCard.jsx b/src/views/reservation/NameCard.jsx
index f19e297..fd8b37e 100644
--- a/src/views/reservation/NameCard.jsx
+++ b/src/views/reservation/NameCard.jsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -7,21 +8,21 @@ const { Title } = Typography;
 function NameCard() {
   const { reservationStore } = useStore();
   const { meetAndGreet } = reservationStore;
+	const docs = [{ uri: "https://www.chinahighlights.com/public/NameCard.doc" }];
 
   return (
     <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
-    <Space direction="vertical" style={{ width: '100%' }}>
-      <Row gutter={{ md: 24 }}>
-        <Col span={24}>
-          <Title level={1}>{meetAndGreet.customerNames}</Title>
-        </Col>
-      </Row>
-      <Row gutter={{ md: 24 }}>
-        <Col span={24}>
-          <Title level={1}>{meetAndGreet.pax}</Title>
-        </Col>
-      </Row>
-    </Space>
+      <DocViewer
+        config={{
+          header: {
+            disableHeader: true,
+            disableFileName: false,
+            retainURLParams: false,
+          },
+        }} 
+        documents={docs} 
+        pluginRenderers={DocViewerRenderers} 
+        style={{ height: 750 }} />
     </Watermark>
   );
 }
diff --git a/src/views/reservation/Print.jsx b/src/views/reservation/Print.jsx
index 48ad0b2..980c57c 100644
--- a/src/views/reservation/Print.jsx
+++ b/src/views/reservation/Print.jsx
@@ -6,42 +6,10 @@ import { Row, Col, Space, Table, Typography, List, Watermark } from "antd";
 import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 import { useStore } from "../../stores/StoreContext.js";
 
-const { Title } = Typography;
-
-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 Print() {
 	const navigate = useNavigate();
 	const { reservationId } = useParams();
-	const { reservationStore } = useStore();
-	const { itineraryList, customerList } = reservationStore;
-	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/SampleSpec.docx" }];
+	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }];
 
 	useEffect(() => {
 		console.info("Detail.useEffect: " + reservationId);
@@ -49,88 +17,17 @@ function Print() {
 
 	return (
 		<Watermark content={["Global Highlights", "Discovery Your Way!"]}>
-			<Space direction="vertical" style={{ width: "100%" }}>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						Stream
-						<DocViewer documents={docs} pluginRenderers={DocViewerRenderers} style={{ height: 800 }} />
-					</Col>
-				</Row>
-
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Booking Number: 220629-W220420009</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Customer Names (Full name as it appears on passport):</Title>
-					</Col>
-				</Row>
-				<Row>
-					<Col span={24}>
-						<List
-							itemLayout="horizontal"
-							dataSource={toJS(customerList)}
-							renderItem={(item, index) => (
-								<List.Item>
-									<List.Item.Meta title={<span>{item.title}</span>} description={item.description} />
-								</List.Item>
-							)}
-						/>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Hotels and Room:</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Guide Language: English</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Notes:</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Itinerary Overview:</Title>
-					</Col>
-				</Row>
-				<Row>
-					<Col span={24}>
-						<Table pagination={false} dataSource={toJS(itineraryList)} columns={itineraryListColumns} />
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Detailed Tour Itinerary</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Packaged Price Includes:</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Packaged Price Excludes:</Title>
-					</Col>
-				</Row>
-				<Row gutter={{ md: 24 }}>
-					<Col span={24}>
-						<Title level={4}>Asia Highlights Contact:</Title>
-					</Col>
-				</Row>
-			</Space>
+			<DocViewer 
+        config={{
+          header: {
+            disableHeader: true,
+            disableFileName: false,
+            retainURLParams: false,
+          },
+        }}
+        documents={docs} 
+        pluginRenderers={DocViewerRenderers} 
+        style={{ height: 750 }} />
 		</Watermark>
 	);
 }