diff --git a/src/App.css b/src/App.css
index 85a508d..e988da9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -251,6 +251,10 @@ input {
     font-size: 14px;
 }
 
+.font-18{
+    font-size: 18;
+}
+
 .font-16 {
     font-size: 16px;
 }
diff --git a/src/Components/CannotViewModal/CannotView.jsx b/src/Components/CannotViewModal/CannotView.jsx
new file mode 100644
index 0000000..4e433b3
--- /dev/null
+++ b/src/Components/CannotViewModal/CannotView.jsx
@@ -0,0 +1,25 @@
+import Modal from "../Modal/modal";
+import ErrorImage from "../../assets/view-error.png";
+import { useNavigate } from "react-router-dom";
+
+import "./cannotviewmodal.css";
+
+const CannotViewModal = () =>{
+
+    const navigate = useNavigate();
+
+    const handleNavigate = () => {
+        navigate("/");
+    }
+
+    return(
+        <Modal>
+            <div className="cannot-view-modal flex flex-col items-center text-center">
+                <img src={ErrorImage} alt="" />
+                <span className="font-18">You do not have permission to view the contents of this page.</span>
+                <button className="xeggo-btn" onClick={handleNavigate} >Go To Dashboard</button>
+            </div>
+        </Modal>
+    )
+}
+export default CannotViewModal;
\ No newline at end of file
diff --git a/src/Components/CannotViewModal/cannotviewmodal.css b/src/Components/CannotViewModal/cannotviewmodal.css
new file mode 100644
index 0000000..2c37178
--- /dev/null
+++ b/src/Components/CannotViewModal/cannotviewmodal.css
@@ -0,0 +1,5 @@
+.cannot-view-modal{
+    width: 464px;
+    padding:  70px 30px 50px 30px;
+    gap:30px;
+}
\ No newline at end of file
diff --git a/src/Components/InvoiceButton.jsx b/src/Components/InvoiceButton.jsx
index 970a481..a944f0a 100644
--- a/src/Components/InvoiceButton.jsx
+++ b/src/Components/InvoiceButton.jsx
@@ -4,12 +4,14 @@ import { ethers } from "ethers";
 import { networks } from "../network.config.json";
 import { useSelector } from "react-redux/es/exports";
 import { initWeb3 } from "../utils/init";
+import { useState } from 'react';
+import ReceiptModal from './ReceiptModal/ReceiptModal';
 
-const InvoiceButton = ({ invoice, account, contract }) => {
+const InvoiceButton = ({ invoice, invoiceData, account, contract }) => {
   const { chainId, isSupported } = useSelector((state) => state.network);
   const web3 = initWeb3();
 
-  console.log(invoice)
+  const [modal, setModal] = useState(false);
 
   const payHandler = async (
     e,
@@ -65,16 +67,21 @@ const InvoiceButton = ({ invoice, account, contract }) => {
     }
   };
 
+  const openDownloadModal = () => {
+    setModal(true);
+  }
+
   return (
+    <>
     <div>
       {invoice.invoiceCreator === account ? (
         <div onClick={(e) => e.stopPropagation()}>
           {invoice.isCancelled ? (
-            <button className='xeggo-button'>
+            <button className='xeggo-button' onClick={openDownloadModal}>
               Cancelled
             </button>
           ) : invoice.isPaid ? (
-            <button className='xeggo-button'>
+            <button className='xeggo-button' onClick={openDownloadModal}>
               Paid
             </button>
           ) : (
@@ -89,11 +96,11 @@ const InvoiceButton = ({ invoice, account, contract }) => {
       ) : (
         <div onClick={(e) => e.stopPropagation()}>
           {invoice.isPaid ? (
-            <button className='xeggo-button'>
+            <button className='xeggo-button' onClick={openDownloadModal}>
               Paid
             </button>
           ) : invoice.isCancelled ? (
-              <button className='xeggo-button'>
+              <button className='xeggo-button' onClick={openDownloadModal}>
                 Cancelled
               </button>
           ) : (
@@ -107,6 +114,8 @@ const InvoiceButton = ({ invoice, account, contract }) => {
         </div>
       )}
     </div>
+    {modal && <ReceiptModal invoice={invoice} invoiceData={invoiceData} closeModal={()=>setModal(false)} />}
+    </>
   );
 };
  
diff --git a/src/Components/LinksModal/LinksModal.jsx b/src/Components/LinksModal/LinksModal.jsx
index 06bf6a6..eb2fe39 100644
--- a/src/Components/LinksModal/LinksModal.jsx
+++ b/src/Components/LinksModal/LinksModal.jsx
@@ -10,7 +10,6 @@ const LinksModal = ({closeModal, link}) => {
                 </div>
                 <div className="modal-nav">
                     <span className="modal-nav-link active">Share Link</span>
-                    <span className="modal-nav-link ">Download</span>
                 </div>
                 <div className="mb-20">
                     <span className="font-12 line-18 width-230 inline-block">Share the payment link by copying the web address below</span>
diff --git a/src/Components/ProfileDetails/profiledetails.css b/src/Components/ProfileDetails/profiledetails.css
index 393e300..b72c60e 100644
--- a/src/Components/ProfileDetails/profiledetails.css
+++ b/src/Components/ProfileDetails/profiledetails.css
@@ -62,7 +62,7 @@
 .modal-button button {
     width: 100%;
     height: 60px;
-    background: var(--content-background);
+    background: var(--xeggo-gradient);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     font-size: 16px;
diff --git a/src/Components/ReceiptModal/ReceiptModal.jsx b/src/Components/ReceiptModal/ReceiptModal.jsx
new file mode 100644
index 0000000..d3d9631
--- /dev/null
+++ b/src/Components/ReceiptModal/ReceiptModal.jsx
@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import Modal from "../Modal/modal";
+
+import "./receiptmodal.css"
+
+const ReceiptModal = ({invoice,invoiceData, closeModal}) => {
+
+    useEffect(()=>{
+        console.log({invoice, invoiceData}, "This is my invoice data")
+    }, [invoice])
+    return ( 
+        <Modal closeFunction={closeModal}>
+            <div className="receipt-modal">
+                <div className="mb-50">
+                    <div className="weight-600">You have successfully paid for</div>
+                    <div className="weight-600">Invoice #{invoiceData.invoice_id}</div>
+                </div>
+                <div className="modal-nav">
+                    <span className="modal-nav-link active">Invoice Details</span>
+                </div>
+                <div>
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Invoice Paid To:</span>
+                        <span className="font-12 line-18 weight-600" >{invoiceData.sender_name}</span>
+                    </div>
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Invoice No:</span>
+                        <span className="font-12 line-18 weight-600" >#{invoiceData.invoice_id}</span>
+                    </div>
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Asset:</span>
+                        <span className="font-12 line-18  weight-600" >cUSD(Celo)</span>
+                    </div>
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Item Description:</span>
+                        <span className="font-12 line-18  weight-600" >Amount</span>
+                    </div>
+                    {invoiceData.items.map(item=>(
+                        <div className="flex space-between mb-10">
+                            <span className="faded font-12 line-18 weight-600">{item.item} x{item.quantity}:</span>
+                            <span className="font-12 line-18 faded weight-600" >{item.price}</span>
+                        </div>
+                    ))}
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Total Net Amount:</span>
+                        <span className="font-12 line-18 faded weight-600" >{invoiceData.net_amount}</span>
+                    </div>
+                    <div className="flex space-between mb-10">
+                        <span className="font-12 line-18 weight-600">Total Vat Amount:</span>
+                        <span className="font-12 line-18 faded weight-600" >{invoiceData.vat_amount}</span>
+                    </div>
+                    <div className="flex space-between mb-30">
+                        <span className="font-12 line-18 weight-600">Total Gross Amount:</span>
+                        <span className="font-12 line-18 faded weight-600" >{invoiceData.gross_amount}</span>
+                    </div>
+                </div>
+                <div className="text-center">
+                    <button className="xeggo-btn">Download as PDF</button>
+                </div>
+            </div>
+        </Modal>
+    );
+}
+ 
+export default ReceiptModal;
\ No newline at end of file
diff --git a/src/Components/ReceiptModal/receiptmodal.css b/src/Components/ReceiptModal/receiptmodal.css
new file mode 100644
index 0000000..e231af1
--- /dev/null
+++ b/src/Components/ReceiptModal/receiptmodal.css
@@ -0,0 +1,47 @@
+.receipt-modal{
+    width: 380px;
+    padding: 45px 25px 25px 25px; 
+}
+
+.receipt-modal .text{
+    width: 250px;
+}
+
+.modal-nav{
+    border-bottom: 1px solid var(--light-dark);
+    margin-bottom: 30px;
+}
+
+
+.modal-nav-link {
+    display: inline-block;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--nav-link-text);
+    margin-right: 30px;
+    cursor: pointer;
+}
+
+.modal-nav-link.active{
+    font-weight: 500;
+    color: var(--secondary-text);
+    position: relative;
+    cursor: default;
+}
+
+.modal-nav-link.active::after {
+    position: absolute;
+    bottom: -3.5px;
+    left:0;
+    display: block;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background: var(--xeggo-gradient);
+    border-radius: 10px;
+}
+
+.faded{
+    color: #BABABA;
+}
\ No newline at end of file
diff --git a/src/Pages/CreateInvoice/CreateInvoice.jsx b/src/Pages/CreateInvoice/CreateInvoice.jsx
index 92a2a1e..9cacfb9 100644
--- a/src/Pages/CreateInvoice/CreateInvoice.jsx
+++ b/src/Pages/CreateInvoice/CreateInvoice.jsx
@@ -355,8 +355,8 @@ const CreateInvoice = ({contract, account}) => {
                                     <input type="text" value={row.vat_rate} onChange={(e)=>handleRow(e,i,"vat_rate")} placeholder='-' className='center-input pr-10' />
                                     <span className='vat' >%</span>
                                 </td>
-                                <td><input type="number" value={amounts[i].vat_amount} onChange={(e)=>handleRow(e,i,"vat_amount")} placeholder='-' className='center-input' /></td>
-                                <td><input type="number" value={amounts[i].gross_amount} onChange={(e)=>handleRow(e,i,"gross_amount")} placeholder='-' className='center-input' /></td>
+                                <td><input type="number" value={amounts[i].vat_amount} onChange={(e)=>handleRow(e,i,"vat_amount")} placeholder='-' className='center-input' readOnly /></td>
+                                <td><input type="number" value={amounts[i].gross_amount} onChange={(e)=>handleRow(e,i,"gross_amount")} placeholder='-' className='center-input' readOnly /></td>
                                 {i > 0 && <td><span className='pointer' onClick={()=>removeRow(i)}><img src={BinIcon} alt="Delete" /></span></td>}
                             </tr>
                         </tbody>
diff --git a/src/Pages/InvoicePage.jsx b/src/Pages/InvoicePage.jsx
index 20efaa1..73d195c 100644
--- a/src/Pages/InvoicePage.jsx
+++ b/src/Pages/InvoicePage.jsx
@@ -6,6 +6,7 @@ import moment from 'moment';
 import TickIcon from "../assets/tick.svg";
 import { getParticularInvoice } from "../utils/dbQueries";
 import LinksModal from "../Components/LinksModal/LinksModal";
+import CannotViewModal from "../Components/CannotViewModal/CannotView";
 
 
 const InvoicePage = ({invoices, account, contract, web3}) => {
@@ -13,6 +14,7 @@ const InvoicePage = ({invoices, account, contract, web3}) => {
     const [invoice, setInvoice] = useState(false);
     const [invoiceData, setInvoiceData] = useState(false);
     const [link, setLink] = useState("");
+    const [loading, setLoading] = useState(true)
 
     useEffect(()=>{
         const accountInvoice = invoices.find((invoice) => {
@@ -22,7 +24,12 @@ const InvoicePage = ({invoices, account, contract, web3}) => {
     }, [invoices]);
 
     useEffect(()=>{
-        handleInvoiceData(invoice.invoiceID);
+        (async ()=>{
+            if(invoice){
+                await handleInvoiceData(invoice.invoiceID);
+                await setLoading(false)
+            }
+        })()
     },[invoice])
 
     const handleInvoiceData = async (invoice_id) => {
@@ -130,14 +137,14 @@ const InvoicePage = ({invoices, account, contract, web3}) => {
                     {invoiceData.total_items?.map((row,i) => (
                             <tr key={i}>
                                 <td><input value={row.item}  type="text" placeholder='Enter Item Description' /></td>
-                                <td><input value={row.quantity}  type="number" placeholder='-' className='center-input' /></td>
-                                <td><input value={row.price}  type="number" placeholder='-' className='center-input' /></td>
+                                <td><input value={row.quantity}  type="number" placeholder='-' className='center-input' readOnly /></td>
+                                <td><input value={row.price}  type="number" placeholder='-' className='center-input' readOnly /></td>
                                 <td className='relative'>
-                                    <input type="text" value={row.vat_rate}  placeholder='-' className='center-input pr-10' />
+                                    <input type="text" value={row.vat_rate}  placeholder='-' className='center-input pr-10' readOnly />
                                     <span className='vat' >%</span>
                                 </td>
-                                <td><input type="number" value={row.vat_amount}  placeholder='-' className='center-input' /></td>
-                                <td><input type="number" value={row.gross_amount}  placeholder='-' className='center-input' /></td>
+                                <td><input type="number" value={row.vat_amount}  placeholder='-' className='center-input' readOnly /></td>
+                                <td><input type="number" value={row.gross_amount}  placeholder='-' className='center-input' readOnly /></td>
                             </tr>
                     ))}
                     </tbody>
@@ -194,14 +201,16 @@ const InvoicePage = ({invoices, account, contract, web3}) => {
                 <div className="invoice-buttons">
                     <div className="flex gap-20">
                         <button className='xeggo-btn-outline' onClick={openLinksModal}>Generate Payment Link</button>
-                        <InvoiceButton invoice={invoice} contract={contract} account={account} />
+                        <InvoiceButton invoice={invoice} invoiceData={invoiceData} contract={contract} account={account} />
                     </div>
                 </div>
             </div>
             </div>
         </div>
-        ) : (
-            <h1>Loading...</h1>
+        ) : !loading && (
+            <div className="body-container">
+                <CannotViewModal />
+            </div>
         )}
         {link.length > 0 && <LinksModal closeModal={()=>setLink(false)} link={link} />}
         </>
diff --git a/src/assets/error-circle.png b/src/assets/error-circle.png
new file mode 100644
index 0000000..f8b594d
Binary files /dev/null and b/src/assets/error-circle.png differ
diff --git a/src/assets/view-error.png b/src/assets/view-error.png
new file mode 100644
index 0000000..8bf849f
Binary files /dev/null and b/src/assets/view-error.png differ