diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
index d8f3d21a1..2aa9e0f3b 100644
--- a/packages/webapp/src/components/App.tsx
+++ b/packages/webapp/src/components/App.tsx
@@ -32,7 +32,9 @@ const RegisterVerify = lazy(
 const OneClickDemoPage = lazy(
   () => import('@/containers/OneClickDemo/OneClickDemoPage'),
 );
-
+const PaymentPortalPage = lazy(
+  () => import('@/containers/PaymentPortal/PaymentPortalPage'),
+);
 /**
  * App inner.
  */
@@ -57,6 +59,7 @@ function AppInsider({ history }) {
                 children={<EmailConfirmation />}
               />
               <Route path={'/auth'} children={<AuthenticationPage />} />
+              <Route path={'/payment'} children={<PaymentPortalPage />} />
               <Route path={'/'} children={<DashboardPrivatePages />} />
             </Switch>
           </Router>
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
new file mode 100644
index 000000000..6baf62ae9
--- /dev/null
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
@@ -0,0 +1,88 @@
+
+.companyLogoWrap {
+  height: 50px;
+  width :50px;
+  border-radius: 50px;
+  background-color: #fff;
+  background: #dfdfdf;
+}
+
+.root {
+  border-radius: 8px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  width: 600px;
+  margin: 40px auto;
+  color: #000;
+  background-color: #fff;
+}
+
+.bigTitle{
+  margin: 0;
+  font-weight: 500;
+  color: #111;
+  font-size: 26px;
+}
+
+.invoiceDueDate{
+  font-size: 16px;
+}
+
+.invoiceNumber {
+  font-size: 18px;
+  color: #333;
+}
+
+.body {
+  padding: 30px;
+}
+
+.footer{
+  padding: 20px 30px;
+  background-color: #FAFAFA;
+  border-top: 1px solid #DCE0E5;
+  border-radius: 0 0 8px 8px;
+  color: #333;
+  font-size: 12px;
+}
+
+.customerName{
+  font-size: 16px;
+  font-weight: 600;
+}
+.totals {
+
+}
+
+.totalItem {
+  padding: 6px 0;
+
+  &.borderBottomGray {
+    border-bottom: 1px solid #DADADA;
+  }
+  &.borderBottomDark{
+    border-bottom: 1px solid #000;
+  }
+}
+
+.footerButton{
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+}
+.downloadInvoiceButton:global(.bp4-button.bp4-minimal){
+  box-shadow: 0 0 0 1px #DCE0E5;
+}
+.viewInvoiceButton:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)){
+  background-color: #EDEFF2;
+}
+.buyButton{
+
+}
+
+.footerText{
+  color: #666;
+}
+
+.buyNote{
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
new file mode 100644
index 000000000..875909bc6
--- /dev/null
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
@@ -0,0 +1,112 @@
+import { Text, Classes, Button, Intent } from '@blueprintjs/core';
+import clsx from 'classnames';
+import { Box, Group, Stack } from '@/components';
+import styles from './PaymentPortal.module.scss';
+
+export function PaymentPortal() {
+  return (
+    <Box className={styles.root}>
+      <Stack className={styles.body}>
+        <Group spacing={8}>
+          <Box className={styles.companyLogoWrap}></Box>
+          <Text>Bigcapital Technology, Inc.</Text>
+        </Group>
+
+        <Stack spacing={6}>
+          <h1 className={styles.bigTitle}>
+            Bigcapital Technology, Inc. Sent an Invoice for $1000.00
+          </h1>
+          <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
+            Invoice due September 13, 2024
+          </Text>
+        </Stack>
+
+        <Stack spacing={2}>
+          <Box className={styles.customerName}>Ahmed Bouhuolia</Box>
+          <Box>Bigcapital Technology, Inc.</Box>
+          <Box>131 Continental Dr Suite 305 Newark,</Box>
+          <Box>Delaware 19713</Box>
+          <Box>United States</Box>
+          <Box>ahmed@bigcapital.app</Box>
+        </Stack>
+
+        <h2 className={styles.invoiceNumber}>Invoice INV-000001</h2>
+
+        <Stack spacing={0} className={styles.totals}>
+          <Group
+            position={'apart'}
+            className={clsx(styles.totalItem, styles.borderBottomGray)}
+          >
+            <Text>Sub Total</Text>
+            <Text>11.00</Text>
+          </Group>
+
+          <Group position={'apart'} className={styles.totalItem}>
+            <Text>Total</Text>
+            <Text style={{ fontWeight: 600 }}>11.00</Text>
+          </Group>
+
+          <Group
+            position={'apart'}
+            className={clsx(styles.totalItem, styles.borderBottomDark)}
+          >
+            <Text>Paid Amount (-)</Text>
+            <Text>11.00</Text>
+          </Group>
+
+          <Group
+            position={'apart'}
+            className={clsx(styles.totalItem, styles.borderBottomDark)}
+          >
+            <Text>Due Amount</Text>
+            <Text style={{ fontWeight: 600 }}>11.00</Text>
+          </Group>
+        </Stack>
+
+        <Stack spacing={8}>
+          <Button
+            minimal
+            className={clsx(styles.footerButton, styles.downloadInvoiceButton)}
+          >
+            Download Invoice
+          </Button>
+          <Button
+            className={clsx(styles.footerButton, styles.viewInvoiceButton)}
+          >
+            View Invoice
+          </Button>
+          <Button
+            intent={Intent.PRIMARY}
+            className={clsx(styles.footerButton, styles.buyButton)}
+          >
+            Pay $10,000.00
+          </Button>
+        </Stack>
+
+        <Text className={clsx(Classes.TEXT_MUTED, styles.buyNote)}>
+          By confirming your payment, you allow Bigcapital Technology, Inc. to
+          charge you for this payment and save your payment information in
+          accordance with their terms.
+        </Text>
+      </Stack>
+
+      <Stack className={styles.footer}>
+        <Stack spacing={0}>
+          <Box>
+            <strong>Bigcapital Technology, Inc.</strong>
+          </Box>
+          <Box>131 Continental Dr Suite 305 Newark,</Box>
+          <Box>Delaware 19713</Box>
+          <Box>United States</Box>
+          <Box>ahmed@bigcapital.app</Box>
+        </Stack>
+
+        <Stack spacing={0} className={styles.footerText}>
+          © 2024 Bigcapital Technology, Inc.
+          <br />
+          All rights reserved.
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
new file mode 100644
index 000000000..c9e3d1bb6
--- /dev/null
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+interface PaymentPortalContextType {
+  // Define the context type here
+  paymentAmount: number;
+  setPaymentAmount: (amount: number) => void;
+}
+
+const PaymentPortalContext = createContext<PaymentPortalContextType>(
+  {} as PaymentPortalContextType,
+);
+
+export const PaymentPortalBoot: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [paymentAmount, setPaymentAmount] = React.useState<number>(0);
+
+  return (
+    <PaymentPortalContext.Provider value={{ paymentAmount, setPaymentAmount }}>
+      {children}
+    </PaymentPortalContext.Provider>
+  );
+};
+
+export const usePaymentPortalBoot = (): PaymentPortalContextType => {
+  const context = useContext(PaymentPortalContext);
+
+  if (!context) {
+    throw new Error(
+      'usePaymentPortal must be used within a PaymentPortalProvider',
+    );
+  }
+  return context;
+};
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
new file mode 100644
index 000000000..cdadb8df3
--- /dev/null
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
@@ -0,0 +1,5 @@
+import { PaymentPortal } from './PaymentPortal';
+
+export default function PaymentPortalPage() {
+  return <PaymentPortal />;
+}