diff --git a/webapp/public/index.html b/webapp/public/index.html
index b1f4286..3497aeb 100644
--- a/webapp/public/index.html
+++ b/webapp/public/index.html
@@ -39,5 +39,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+     <!-- Include Payhere JS library as follows -->
+     <script type="text/javascript" src="https://www.payhere.lk/lib/payhere.js"></script>
   </body>
 </html>
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 01b5895..e9468d2 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,18 +1,25 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './App.css';
-import AllRoutes from './routes/AllRoutes'
-import { ModalProvider } from './context/ModalContext';
-import ModalComponent from './components/ModalComponent';
-import { DeviceWidthProvider } from './context/DeviceWidthContext';
-import { AuthProvider } from './context/AuthContext';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
+import AllRoutes from "./routes/AllRoutes";
+import { ModalProvider } from "./context/ModalContext";
+import ModalComponent from "./components/ModalComponent";
+import { DeviceWidthProvider } from "./context/DeviceWidthContext";
+import { AuthProvider } from "./context/AuthContext";
 
 function App() {
   return (
     <AuthProvider>
       <DeviceWidthProvider>
         <ModalProvider>
-          <div style={{backgroundColor: "white",minHeight:'100vh', margin:"0", padding:"0"}} >
-            <div  style={{minHeight:'100vh',margin:"0", padding:"0"}} >
+          <div
+            style={{
+              backgroundColor: "white",
+              minHeight: "100vh",
+              margin: "0",
+              padding: "0",
+            }}
+          >
+            <div style={{ minHeight: "100vh", margin: "0", padding: "0" }}>
               <AllRoutes />
             </div>
           </div>
diff --git a/webapp/src/PaymentModal/PaymentModal.js b/webapp/src/PaymentModal/PaymentModal.js
new file mode 100644
index 0000000..b0691b8
--- /dev/null
+++ b/webapp/src/PaymentModal/PaymentModal.js
@@ -0,0 +1,55 @@
+import React from 'react';
+
+const PaymentModal = ({ orderId, name, amount }) => {
+    
+  // Put the payment variables here
+  var payment = {
+    sandbox: true, // if the account is sandbox or real
+    merchant_id: '1223868', // Replace your Merchant ID
+    return_url: 'http://localhost:3000/dashboard',
+    cancel_url: 'http://localhost:3000/dashboard',
+    notify_url: 'http://sample.com/notify',
+    order_id: orderId,
+    items: name,
+    amount: amount, 
+    currency: 'LKR',
+    first_name: 'Saman',
+    last_name: 'Perera',
+    email: 'samanp@gmail.com',
+    phone: '0771234567',
+    address: 'No.1, Galle Road',
+    city: 'Colombo',
+    country: 'Sri Lanka',
+    delivery_address: 'No. 46, Galle road, Kalutara South', // optional field
+    delivery_city: 'Kalutara', // optional field
+    delivery_country: 'Sri Lanka', // optional field
+    custom_1: '', // optional field
+    custom_2: '', // optional field
+  };
+    
+  // Called when user completed the payment. It can be a successful payment or failure
+  window.payhere.onCompleted = function onCompleted(orderId) {
+    console.log("Payment completed. OrderID:" + orderId);
+    //Note: validate the payment and show success or failure page to the customer
+  };
+
+  // Called when user closes the payment without completing
+  window.payhere.onDismissed = function onDismissed() {
+    //Note: Prompt user to pay again or show an error page
+    console.log("Payment dismissed");
+  };
+
+  // Called when error happens when initializing payment such as invalid parameters
+  window.payhere.onError = function onError(error) {
+    // Note: show an error page
+    console.log("Error:"  + error);
+  };
+
+  function pay(){
+    window.payhere.startPayment(payment);
+  }
+
+  return <button className="btn btn-success mt-4" onClick={pay}>Pay with Payhere</button>;
+};
+
+export default PaymentModal;
\ No newline at end of file
diff --git a/webapp/src/views/PremiumView.js b/webapp/src/views/PremiumView.js
index 6418965..0cdd036 100644
--- a/webapp/src/views/PremiumView.js
+++ b/webapp/src/views/PremiumView.js
@@ -1,56 +1,92 @@
-import '../assets/CSS/premiumStyle.css'
-import React, { useState } from 'react';
-import FrameComponent from '../components/FrameComponent';
+import "../assets/CSS/premiumStyle.css";
+import React, { useState } from "react";
+import FrameComponent from "../components/FrameComponent";
+import PaymentModal from "../PaymentModal/PaymentModal";
 
 const PremiumView = () => {
   const [agree, setAgree] = useState(false);
+  const [payment, setPayment] = useState(false);
 
   const checkboxHandler = () => {
     setAgree(!agree);
-  }
+  };
   const btnHandler = () => {
-    alert('The button is clickable!');
+    setPayment(true);
   };
 
   return (
     <FrameComponent>
-    <section>
-      <div className="container premium__container">
-        <div className='premium__title'>
-          <h1 className="text-center">Unlock Your Premium Features</h1>
-        </div>
-        <div className='premium__content'>
-          <div className='premium__paragraph'>
-            <h4>UPGRADE TO PREMIUM</h4>
-            <h6>Boost your learning today - go premium with a one-time payment of 400.00 LKR. 
-              Get access to exclusive study materials, videos, and interactive quizzes!</h6>
-            <h6>අදම ඔබේ ඉගෙනීම ඉහළ නංවන්න - වාරිකය 400/= කට පමණයි. සුවිශේෂී අධ්‍යයන ද්‍රව්‍ය, 
-              වීඩියෝ සහ අන්තර්ක්‍රියාකාරී ප්‍රශ්නාවලිය වෙත ප්‍රවේශය ලබා ගන්න!</h6>
-            <h6>இன்றே உங்கள் கற்றலை அதிகரிக்கவும் 400.00 LKR ஒரு முறை செலுத்துவதன் மூலம் பிரீமியத்திற்கு செல்லுங்கள். 
-              பிரத்தியேக வீடியோக்கள் மற்றும் வினாடி வினாக்களுக்கான அணுகலைப் பெறுங்கள்!</h6>
+      <section>
+        <div className="container premium__container">
+          <div className="premium__title">
+            <h1 className="text-center">Unlock Your Premium Features</h1>
           </div>
-          <div>
-            <input type="checkbox" id="agree" onChange={checkboxHandler} />
-            <label htmlFor="agree"> I agree to <b>terms and conditions</b></label>
-          </div>
-          <div className='premium__btn'>
-            <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}>
-              Unlock Sinhala
-            </button>
-            <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}>
-              Unlock Tamil
-            </button>
-            <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}>
-              Unlock English
-            </button>
-            {/* <a href='##' className='btn btn-primary' disabled={!agree}>Unlock Tamil</a>
+          <div className="premium__content">
+            <div className="premium__paragraph">
+              <h4>UPGRADE TO PREMIUM</h4>
+              <h6>
+                Boost your learning today - go premium with a one-time payment
+                of 400.00 LKR. Get access to exclusive study materials, videos,
+                and interactive quizzes!
+              </h6>
+              <h6>
+                අදම ඔබේ ඉගෙනීම ඉහළ නංවන්න - වාරිකය 400/= කට පමණයි. සුවිශේෂී
+                අධ්‍යයන ද්‍රව්‍ය, වීඩියෝ සහ අන්තර්ක්‍රියාකාරී ප්‍රශ්නාවලිය වෙත
+                ප්‍රවේශය ලබා ගන්න!
+              </h6>
+              <h6>
+                இன்றே உங்கள் கற்றலை அதிகரிக்கவும் 400.00 LKR ஒரு முறை
+                செலுத்துவதன் மூலம் பிரீமியத்திற்கு செல்லுங்கள். பிரத்தியேக
+                வீடியோக்கள் மற்றும் வினாடி வினாக்களுக்கான அணுகலைப் பெறுங்கள்!
+              </h6>
+            </div>
+            <div>
+              <input type="checkbox" id="agree" onChange={checkboxHandler} />
+              <label htmlFor="agree">
+                {" "}
+                I agree to <b>terms and conditions</b>
+              </label>
+            </div>
+            <div className="premium__btn">
+              <button
+                disabled={!agree}
+                className="btn btn-primary"
+                onClick={btnHandler}
+              >
+                Unlock Sinhala
+              </button>
+              <button
+                disabled={!agree}
+                className="btn btn-primary"
+                onClick={btnHandler}
+              >
+                Unlock Tamil
+              </button>
+              <button
+                disabled={!agree}
+                className="btn btn-primary"
+                onClick={btnHandler}
+              >
+                Unlock English
+              </button>
+              {/* <a href='##' className='btn btn-primary' disabled={!agree}>Unlock Tamil</a>
             <a href='###' className='btn btn-primary' disabled={!agree}>Unlock English</a> */}
-          </div> 
+            </div>
+            {payment ? (
+              <div className="App">
+                <PaymentModal
+                  // Use a unique value for the orderId
+                  orderId={45896588}
+                  name="Subscription for Premium"
+                  amount="1500"
+                />
+              </div>
+            ) : null}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
     </FrameComponent>
-  )
-}
+  );
+};
 
 export default PremiumView;