diff --git a/src/main.jsx b/src/main.jsx
index f65faa8..4b86cb3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -46,7 +46,7 @@ const router = createBrowserRouter([
       { path: "account/change-password", element: <ChangePassword />},
       { path: "account/profile", element: <AccountProfile />},
       { path: "feedback", element: <FeedbackIndex />},
-      { path: "feedback/:GRI_SN", element: <FeedbackDetail />},
+      { path: "feedback/:GRI_SN/:RefNo", element: <FeedbackDetail />},
       { path: "notice", element: <NoticeIndex />},
       { path: "notice/:CCP_BLID", element: <NoticeDetail />},
       { path: "invoice",element:<InvoiceIndex />},
diff --git a/src/views/feedback/Detail.jsx b/src/views/feedback/Detail.jsx
index 6fe5070..6de7453 100644
--- a/src/views/feedback/Detail.jsx
+++ b/src/views/feedback/Detail.jsx
@@ -2,7 +2,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { toJS, runInAction } from "mobx";
-import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App } from "antd";
+import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
 import { useStore } from "../../stores/StoreContext.js";
 import { PlusOutlined } from "@ant-design/icons";
 const { Title, Text, Paragraph } = Typography;
@@ -10,7 +10,7 @@ import * as config from "@/config";
 
 function Detail() {
 	const navigate = useNavigate();
-	const { GRI_SN } = useParams();
+	const { GRI_SN,RefNo } = useParams();
 	const { feedbackStore, authStore } = useStore();
 	const { feedbackRate, feedbackReview, feedbackImages, feedbackInfo } = feedbackStore;
 	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
@@ -72,7 +72,7 @@ function Detail() {
 		<Space direction="vertical" style={{ width: "100%" }}>
 			<Row gutter={16}>
 				<Col span={20}>
-					<Title level={4}>Post Survey - Albee221228017</Title>
+					
 				</Col>
 				<Col span={4}>
 					<Button type="link" onClick={() => navigate("/feedback")}>
@@ -83,6 +83,7 @@ function Detail() {
 			<Row gutter={16}>
 				<Col span={4}></Col>
 				<Col span={18}>
+				<Card  type="inner" title={<Title level={4}>Post Survey {RefNo}</Title>}>
 					<Form labelCol={{ span: 5 }}>
 						<Divider orientation="left">How satisfied were you with your general experience?</Divider>
 						<Form.Item label="Tour Guide Service">
@@ -134,28 +135,18 @@ function Detail() {
 						</Paragraph>
 						<Divider orientation="left">Other thoughts you want to share with us:</Divider>
 						<Text>{OtherThoughts}</Text>
-					</Form>
+					</Form></Card>
 				</Col>
 				<Col span={4}></Col>
 			</Row>
 
-			<Row gutter={16}>
-				<Col span={20}>
-					<Title level={4}>External Reviews</Title>
-				</Col>
-				<Col span={4}></Col>
-			</Row>
+
 			<Row gutter={16}>
 				<Col span={4}></Col>
 				<Col span={18}>
+				<Card type="inner" title={<Title level={4}>External Reviews</Title>}>
 					<Text>{ECI_Content}</Text>
-				</Col>
-				<Col span={4}></Col>
-			</Row>
-
-			<Row gutter={16}>
-				<Col span={20}>
-					<Title level={4}>Send Feedback</Title>
+					</Card>
 				</Col>
 				<Col span={4}></Col>
 			</Row>
@@ -163,40 +154,41 @@ function Detail() {
 			<Row gutter={16}>
 				<Col span={4}></Col>
 				<Col span={18}>
-					<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
-						<Divider orientation="left">Upload photos</Divider>
-						<Form.Item>
-							<Upload
-								name="ghhfile"
-								// accept="image/*"
-								multiple={true}
-								action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
-								fileList={fileList}
-								listType="picture-card"
-								onChange={handleChange}
-								onRemove={handRemove}>
-								<div>
-									<PlusOutlined />
-									<div style={{ marginTop: 8 }}>Click to Upload</div>
-								</div>
-							</Upload>
-						</Form.Item>
-						<Form.Item
-							name="info_content"
-							rules={[
-								{
-									required: true,
-									message: "Please input your messages!",
-								},
-							]}>
-							<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
-						</Form.Item>
-						<Form.Item>
-							<Button type="primary" htmlType="submit">
-								Submit
-							</Button>
-						</Form.Item>
-					</Form>
+					<Card  type="inner" title={<Title level={4}>Feedback from local agent</Title>}>
+						<Form name="feedback_detail_from" onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
+							<Form.Item>
+								<Upload
+									name="ghhfile"
+									// accept="image/*"
+									multiple={true}
+									action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
+									fileList={fileList}
+									listType="picture-card"
+									onChange={handleChange}
+									onRemove={handRemove}>
+									<div>
+										<PlusOutlined />
+										<div style={{ marginTop: 8 }}>Upload photos</div>
+									</div>
+								</Upload>
+							</Form.Item>
+							<Form.Item
+								name="info_content"
+								rules={[
+									{
+										required: true,
+										message: "Please input your messages!",
+									},
+								]}>
+								<Input.TextArea rows={6} placeholder="Any feedback for this group you would like to send to Asia Highlights"></Input.TextArea>
+							</Form.Item>
+							<Form.Item>
+								<Button type="primary" htmlType="submit">
+									Submit
+								</Button>
+							</Form.Item>
+						</Form>
+					</Card>
 				</Col>
 				<Col span={4}></Col>
 			</Row>
diff --git a/src/views/feedback/Index.jsx b/src/views/feedback/Index.jsx
index 7624832..817e738 100644
--- a/src/views/feedback/Index.jsx
+++ b/src/views/feedback/Index.jsx
@@ -11,7 +11,7 @@ const feedbackListColumns = [
 	{
 		title: "Ref.No",
 		dataIndex: "EOI_Group_Name",
-		render: (text, record) => <NavLink to={`/feedback/${record.EOI_GRI_SN}`}>{text}</NavLink>,
+		render: (text, record) => <NavLink to={`/feedback/${record.EOI_GRI_SN}/${record.EOI_Group_Name}`}>{text}</NavLink>,
 	},
 	{
 		title: "Arrival Date",