diff --git a/src/components/BackBtn.jsx b/src/components/BackBtn.jsx
new file mode 100644
index 0000000..c12978e
--- /dev/null
+++ b/src/components/BackBtn.jsx
@@ -0,0 +1,16 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+import { isNotEmpty } from '@/utils/commons';
+
+const BackBtn = ({to, ...props}) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    <>
+      {isNotEmpty(to) ? <Link to={to}>{t('Back')}l</Link> : <Button type='link' onClick={() => navigate(-1)}>{t('Back')}</Button>}
+    </>
+  );
+};
+export default BackBtn;
diff --git a/src/views/feedback/CustomerDetail.jsx b/src/views/feedback/CustomerDetail.jsx
index 25afcf3..d9f77ce 100644
--- a/src/views/feedback/CustomerDetail.jsx
+++ b/src/views/feedback/CustomerDetail.jsx
@@ -5,6 +5,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import * as config from '@/config';
 import useAuthStore from '@/stores/Auth';
 import { getFeedbackDetail, getCustomerFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
+import BackBtn from '@/components/BackBtn';
 
 const { Title, Text, Paragraph } = Typography;
 
@@ -79,9 +80,7 @@ function Detail() {
       <Row gutter={16}>
         <Col span={20}></Col>
         <Col span={4}>
-          <Button type='link' onClick={() => navigate('/feedback')}>
-            Back
-          </Button>
+          <BackBtn />
         </Col>
       </Row>
       <Row gutter={16}>
diff --git a/src/views/feedback/Detail.jsx b/src/views/feedback/Detail.jsx
index a8f0388..9683fbe 100644
--- a/src/views/feedback/Detail.jsx
+++ b/src/views/feedback/Detail.jsx
@@ -5,6 +5,7 @@ import { PlusOutlined } from "@ant-design/icons";
 import * as config from "@/config";
 import useAuthStore from '@/stores/Auth';
 import { getFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
+import BackBtn from "@/components/BackBtn";
 const { Title, Text, Paragraph } = Typography;
 
 function Detail() {
@@ -81,9 +82,7 @@ function Detail() {
 
 				</Col>
 				<Col span={4}>
-					<Button type="link" onClick={() => navigate("/feedback")}>
-						Back
-					</Button>
+          <BackBtn />
 				</Col>
 			</Row>
 			<Row gutter={16}>
diff --git a/src/views/invoice/Detail.jsx b/src/views/invoice/Detail.jsx
index 626d623..79d2cd4 100644
--- a/src/views/invoice/Detail.jsx
+++ b/src/views/invoice/Detail.jsx
@@ -9,6 +9,7 @@ import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
 import useAuthStore from '@/stores/Auth';
+import BackBtn from '@/components/BackBtn';
 
 const { Title,Text } = Typography;
 const { TextArea } = Input;
@@ -337,9 +338,7 @@ function Detail() {
 						<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
 					</Col>
 					<Col span={4}>
-						<Button type="link" onClick={() => navigate("/invoice")}>
-							Back
-						</Button>
+            <BackBtn />
 					</Col>
 				</Row>
 				<Title level={5}></Title>
diff --git a/src/views/invoice/Paid.jsx b/src/views/invoice/Paid.jsx
index f456ca2..c036e3a 100644
--- a/src/views/invoice/Paid.jsx
+++ b/src/views/invoice/Paid.jsx
@@ -10,6 +10,8 @@ import usePresets from '@/hooks/usePresets';
 import SearchForm from '@/components/SearchForm';
 import useAuthStore from '@/stores/Auth';
 import dayjs from 'dayjs';
+import BackBtn from '@/components/BackBtn';
+
 const { Title } = Typography;
 
 function Paid() {
@@ -87,9 +89,7 @@ function Paid() {
           />
         </Col>
         <Col span={4}>
-          <Button type='link' onClick={() => navigate('/invoice')}>
-            Back
-          </Button>
+          <BackBtn to={'/invoice'} />
         </Col>
       </Row>
       <Row>
diff --git a/src/views/invoice/PaidDetail.jsx b/src/views/invoice/PaidDetail.jsx
index 87ffc26..6b6de86 100644
--- a/src/views/invoice/PaidDetail.jsx
+++ b/src/views/invoice/PaidDetail.jsx
@@ -7,6 +7,7 @@ import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
 import { formatDate, isNotEmpty } from "@/utils/commons";
 import useAuthStore from '@/stores/Auth';
+import BackBtn from '@/components/BackBtn';
 
 const { Title } = Typography;
 
@@ -52,9 +53,7 @@ function PaidDetail(){
 					<Col span={20}>
 					</Col>
 					<Col span={4}>
-						<Button type="link" onClick={() => navigate("/invoice/paid")}>
-							Back
-						</Button>
+            <BackBtn />
 					</Col>
 			</Row>
 			<Title level={3}></Title>
diff --git a/src/views/notice/Detail.jsx b/src/views/notice/Detail.jsx
index 575081b..e4af7f4 100644
--- a/src/views/notice/Detail.jsx
+++ b/src/views/notice/Detail.jsx
@@ -5,6 +5,7 @@ import * as comm from '@/utils/commons';
 import { useTranslation } from 'react-i18next';
 import { fetchNoticeDetail } from '@/stores/Notice';
 import useAuthStore from '@/stores/Auth';
+import BackBtn from '@/components/BackBtn';
 
 const { Title, Paragraph } = Typography;
 
@@ -33,7 +34,7 @@ function Detail() {
           </Paragraph>
         </Col>
         <Col span={4}>
-          <NavLink to='/notice'>{t('Back')}</NavLink>
+          <BackBtn />
         </Col>
       </Row>
     </Space>
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index 8ce7b1b..cc2fb90 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -8,6 +8,7 @@ import {
 } from '@ant-design/icons';
 import { useStore } from '@/stores/StoreContext.js';
 import { useTranslation } from 'react-i18next';
+import BackBtn from '@/components/BackBtn';
 
 const { Title, Paragraph } = Typography;
 const { TextArea } = Input;
@@ -158,7 +159,7 @@ function Detail() {
       <Title level={4}>{t('group:RefNo')}: {reservationDetail.referenceNumber}; {t('group:ArrivalDate')}: {reservationDetail.arrivalDate};</Title>
         </Col>
         <Col span={4}>
-      <Button type="link" onClick={() => navigate('/reservation/newest?back')}>{t('Back')}</Button>
+          <BackBtn to={'/reservation/newest?back'} />
         </Col>
       </Row>
       <Row gutter={{ md: 24 }}>