diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index aa22520..d34ec08 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,31 +1,30 @@
 "use client";
 
+// Import necessary hooks and components
 import { useState } from "react";
-import { Button, Card, CardFooter, CardHeader, Container, Heading, Tooltip, useDisclosure } from "@chakra-ui/react";
-// import { QrScanner } from "@yudiel/react-qr-scanner";
-import type { NextPage } from "next";
 import { useAccount } from "wagmi";
+// Import your custom components and hooks
 import { HistoryTable } from "~~/components/HistoryTable";
-import SendModal from "~~/components/SendModalPopup";
+import SendModalPopup from "~~/components/SendModalPopup";
 import { useLightningApp } from "~~/hooks/LightningProvider";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
 
-// Import the CSS file with your animation
-
-const Home: NextPage = () => {
+const Home = () => {
   const { address } = useAccount();
   const { balance } = useAccountBalance(address);
   const { isWebSocketConnected, price } = useLightningApp();
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  const onOpen = () => setIsOpen(true);
   const [balanceVisibility, setBalanceVisibility] = useState(0);
 
   function getBalanceWithVisibility() {
     if (balance === null) return "Loading Balance...";
     if (balanceVisibility === 0) {
-      return Math.floor(balance * 100_000_000).toLocaleString() + " sats";
+      return `${Math.floor(balance * 100_000_000).toLocaleString()} sats`;
     }
     if (balanceVisibility === 1) {
-      return "$" + (balance * price).toFixed(2) + " USD";
+      return `$${(balance * price).toFixed(2)} USD`;
     }
     if (balanceVisibility === 2) {
       return "****** sats";
@@ -33,50 +32,32 @@ const Home: NextPage = () => {
   }
 
   return (
-    <Container alignContent={"center"} h="95%" justifyContent={"center"}>
-      <Card>
-        <CardHeader color={"white"} bg="brand.bg !important">
-          <Heading
-            style={{ cursor: "pointer" }}
+    <div className="font-plex container mx-auto flex h-[95%] items-center justify-center">
+      <div className="card w-[500px] ">
+        <div className="card-header text-white p-4">
+          <h1
+            className="cursor-pointer text-center text-lg font-mono mt-10"
             onClick={() => setBalanceVisibility((balanceVisibility + 1) % 3)}
-            fontFamily={"IBM Plex Mono"}
-            mt="10%"
-            textAlign={"center"}
-            fontSize={"x-large"}
           >
-            {" "}
-            <span>{getBalanceWithVisibility()}</span>
-          </Heading>
-        </CardHeader>
+            {getBalanceWithVisibility()}
+          </h1>
+        </div>
 
         <HistoryTable />
 
-        <CardFooter
-          bg="brand.bg"
-          justify="space-between"
-          flexWrap="wrap"
-          sx={{
-            "& > button": {
-              minW: "136px",
-            },
-          }}
-        >
-          <Tooltip label={!isWebSocketConnected ? "Lightning Service Provider offline, try refreshing the page." : ""}>
-            <Button
-              background={"gray.300 !important"}
-              isDisabled={!isWebSocketConnected}
-              onClick={onOpen}
-              flex="1"
-              _hover={{ bg: "gray.100 !impoprtant" }}
-            >
-              Send over Lightning
-            </Button>
-          </Tooltip>
-        </CardFooter>
-      </Card>
+        <div className="card-footer p-4 flex justify-between flex-wrap">
+          <button
+            className={`btn btn-neutral w-[100%] min-w-[136px] disabled:opacity-50`}
+            disabled={!isWebSocketConnected}
+            onClick={onOpen}
+          >
+            Send over Lightning
+          </button>
+        </div>
+      </div>
 
-      <SendModal isOpen={isOpen} onClose={onClose} />
-    </Container>
+      <SendModalPopup isOpen={isOpen} onClose={onClose} />
+    </div>
   );
 };
 
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index 714887c..2317b00 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import Link from "next/link";
-import { Button } from "@chakra-ui/react";
 import { hardhat } from "viem/chains";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Faucet } from "~~/components/scaffold-eth";
@@ -22,9 +21,9 @@ export const Footer = () => {
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div>
-                <Button>
+                <button className="btn btn-neutral">
                   <span>${nativeCurrencyPrice.toLocaleString()}</span>
-                </Button>
+                </button>
               </div>
             )}
             {isLocalNetwork && (
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 3a00d42..7e0de65 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -3,7 +3,6 @@
 import React, { useCallback, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Button, Image, Text } from "@chakra-ui/react";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useLightningApp } from "~~/hooks/LightningProvider";
@@ -92,13 +91,8 @@ export const Header = () => {
         </div>
 
         <Link color={"white"} href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <Image src="/logo.svg" alt="Botanix Logo" width={"24px"} height={"24px"} />
-          <div className="flex flex-col">
-            <Text fontWeight={"bold"} fontFamily={"IBM Plex Mono"} color={"white"}>
-              {" "}
-              Botanix {"<>"} Lightning{" "}
-            </Text>
-          </div>
+          <img src="/logo.svg" alt="Botanix Logo" width={"24px"} height={"24px"} />
+          <div className="flex flex-col font-plex font-bold text-white">Botanix {"<>"} Lightning </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
           <HeaderMenuLinks />
@@ -106,18 +100,15 @@ export const Header = () => {
       </div>
       <div className="navbar-end flex-grow mr-4">
         {/* a div that shows if the client is connected to the server */}
-        <Button
-          size={"xs"}
-          color={"gray.500"}
-          fontWeight={"light"}
-          background={"transparent"}
+        <button
+          className="btn btn-ghost btn-sm text-white font-plex"
           onClick={() => {
             if (!isWebSocketConnected) reconnect();
           }}
         >
           <div className={`${isWebSocketConnected ? "bg-success" : "bg-error"} rounded-full w-2 h-2 self-center`}></div>
-          &nbsp; {isWebSocketConnected ? "LSP Connected" : "LSP Disconnected"}
-        </Button>
+          {isWebSocketConnected ? "LSP Connected" : "LSP Disconnected"}
+        </button>
         &nbsp;
         <RainbowKitCustomConnectButton />
         <FaucetButton />
diff --git a/packages/nextjs/components/HistoryTable.tsx b/packages/nextjs/components/HistoryTable.tsx
index 8fd3878..496e108 100644
--- a/packages/nextjs/components/HistoryTable.tsx
+++ b/packages/nextjs/components/HistoryTable.tsx
@@ -1,20 +1,5 @@
 import React, { Fragment, useState } from "react";
-import { CopyIcon } from "@chakra-ui/icons";
-import {
-  Box,
-  Button,
-  CardBody,
-  Heading,
-  Icon,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tooltip,
-  Tr,
-  useToast,
-} from "@chakra-ui/react";
+import { useToast } from "@chakra-ui/react";
 import { useWalletClient } from "wagmi";
 import { HistoricalTransaction, useLightningApp } from "~~/hooks/LightningProvider";
 import { useScaffoldContract } from "~~/hooks/scaffold-eth";
@@ -103,90 +88,75 @@ export const HistoryTable = () => {
   }
 
   return (
-    <CardBody color={"white"} bg="brand.bg">
-      <Heading fontFamily={"IBM Plex Mono"} textAlign={"center"} size={"md"} mb="5">
-        History
-      </Heading>
-      <Table size={"sm"}>
-        {transactions.length > 0 && (
-          <>
-            <Thead>
-              <Tr>
-                <Th>Status</Th>
-                <Th>Date</Th>
-                <Th isNumeric>Amount</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {transactions.map((transaction, index) => (
-                <React.Fragment key={index}>
-                  <Tooltip label={getTooltipText(transaction)}>
-                    <Tr
+    <div className="card bg-brand-bg text-white">
+      <div className="card-body p-4">
+        <h2 className="text-center font-mono text-md mb-5">History</h2>
+        <table className="table-auto w-full text-sm">
+          {transactions.length > 0 && (
+            <>
+              <thead>
+                <tr>
+                  <th>Status</th>
+                  <th>Date</th>
+                  <th className="text-right">Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                {transactions.map((transaction, index) => (
+                  <React.Fragment key={index}>
+                    <tr
                       onClick={() => toggleRow(index)}
-                      cursor={"pointer"}
-                      bg={transaction.status === "failed" ? "red.400" : ""}
-                      css={{
-                        "&:hover": {
-                          backgroundColor: "rgba(255, 255, 255, 0.1)",
-                        },
-                      }}
+                      className={`cursor-pointer ${
+                        transaction.status === "failed" ? "bg-red-400" : ""
+                      } hover:bg-white hover:bg-opacity-10`}
                     >
-                      <Td>{transaction.status}</Td>
-
-                      <Td>{transaction.date}</Td>
-                      <Td isNumeric>{transaction.amount} sats</Td>
-                      {/* <Td>
-                      <Icon as={expandedRow === index ? <ChevronUpIcon /> : <ChevronDownIcon />} />
-                    </Td> */}
-                    </Tr>
-                  </Tooltip>
-                  {/* Expandable row for details */}
-                  {expandedRow === index && (
-                    <Tr>
-                      <Td colSpan={3}>
-                        <Box>
-                          TimeLock exiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
-                          <br />
-                          <br />
-                          <Button
-                            colorScheme="blue"
-                            size="xs"
-                            onClick={() => {
-                              toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard");
-                            }}
-                          >
-                            <Icon as={CopyIcon} />
-                          </Button>
-                          &nbsp; txHash: {transaction.txHash.substring(0, 20)}...
-                          <br />
-                          <br />
-                          <Button
-                            colorScheme="blue"
-                            size="xs"
-                            onClick={() => {
-                              toastAndCopy(transaction.contractId, "Contract ID copied to clipboard");
-                            }}
-                          >
-                            <Icon as={CopyIcon} />
-                          </Button>
-                          &nbsp; contractId: {transaction.contractId.substring(0, 16)}...
-                        </Box>
-                      </Td>
-                    </Tr>
-                  )}
-                </React.Fragment>
-              ))}
-            </Tbody>
-          </>
-        )}
-        {transactions.length === 0 && (
-          <Tr>
-            <Td border={"#787878"} borderStyle={"dashed"} textAlign={"center"}>
-              Send your first lightning transaction!
-            </Td>
-          </Tr>
-        )}
-      </Table>
-    </CardBody>
+                      <td>{transaction.status}</td>
+                      <td>{transaction.date}</td>
+                      <td className="text-right">{transaction.amount} sats</td>
+                    </tr>
+                    {expandedRow === index && (
+                      <tr>
+                        <td colSpan={3}>
+                          <div className="p-4">
+                            TimeLock expiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
+                            <br />
+                            <br />
+                            <button
+                              className="btn btn-ghost text-white text-xs p-2"
+                              onClick={() => toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard")}
+                            >
+                              {/* Assuming CopyIcon is a SVG or similar; ensure you have a Tailwind way to display it */}
+                              Copy txHash
+                            </button>
+                            &nbsp; txHash: {transaction.txHash.substring(0, 20)}...
+                            <br />
+                            <br />
+                            <button
+                              className="btn text-white text-xs p-2"
+                              onClick={() => toastAndCopy(transaction.contractId, "Contract ID copied to clipboard")}
+                            >
+                              {/* Assuming CopyIcon is a SVG or similar; ensure you have a Tailwind way to display it */}
+                              Copy contractId
+                            </button>
+                            &nbsp; contractId: {transaction.contractId.substring(0, 16)}...
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </>
+          )}
+          {transactions.length === 0 && (
+            <tr>
+              <td className="border border-gray-400 border-dashed text-center py-4">
+                Send your first lightning transaction!
+              </td>
+            </tr>
+          )}
+        </table>
+      </div>
+    </div>
   );
 };
diff --git a/packages/nextjs/components/PaymentInvoice.tsx b/packages/nextjs/components/PaymentInvoice.tsx
index b802927..9e6a64d 100644
--- a/packages/nextjs/components/PaymentInvoice.tsx
+++ b/packages/nextjs/components/PaymentInvoice.tsx
@@ -1,24 +1,5 @@
 import React from "react";
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Flex,
-  Step,
-  StepDescription,
-  StepIcon,
-  StepIndicator,
-  StepNumber,
-  StepSeparator,
-  StepStatus,
-  StepTitle,
-  Stepper,
-  Table,
-  Tbody,
-  Td,
-  Tr,
-} from "@chakra-ui/react";
-import { DotLoader } from "react-spinners";
+// import { DotLoader } from "react-spinners";
 import { useLightningApp } from "~~/hooks/LightningProvider";
 import { LnPaymentInvoice } from "~~/types/utils";
 
@@ -48,90 +29,68 @@ export const PaymentInvoice = ({ invoice, submitPayment, cancelPayment, step }:
   const expiryDate = new Date(invoice.timeExpireDate * 1000);
   const { price } = useLightningApp();
 
-  return (
-    <Flex h="100%" flexDir={"column"} justifyContent={"space-evenly"} alignContent={"space-evenly"} gap={["", "", "5"]}>
-      <Table color={"white"} size={"xs"}>
-        <Tbody>
-          <Tr>
-            <Td border="transparent">Expiry Time</Td>
-            <Td border="transparent" textAlign={"end"}>
-              {expiryDate.toLocaleString()}
-            </Td>
-          </Tr>
-          <Tr>
-            <Td border="transparent">Amount</Td>
-            <Td border="transparent" textAlign={"end"}>
-              {invoice.satoshis} sats
-            </Td>
-          </Tr>
-          {/* <Tr>
-            <Td border="transparent">USD</Td>
-            <Td border="transparent" textAlign={"end"}>
-              ${invoice.satoshis}
-            </Td>
-          </Tr> */}
-          <Tr>
-            <Td border="transparent">USD</Td>
-            <Td border="transparent" textAlign={"end"}>
-              ${((invoice.satoshis * price) / 100_000_000).toFixed(3)}
-            </Td>
-          </Tr>
-          <Tr>
-            <Td border="transparent">Service Fee</Td>
-            <Td border="transparent" textAlign={"end"}>
-              0 sats
-            </Td>
-          </Tr>
-        </Tbody>
-      </Table>
-
-      <Stepper color={"white"} index={step} orientation="vertical" height="" gap="0">
-        {steps.map((step, index) => (
-          <Step key={index}>
-            <StepIndicator borderColor={"gray.300"}>
-              <StepStatus
-                complete={<StepIcon borderColor={"gray.300"} />}
-                incomplete={<StepNumber />}
-                active={<DotLoader color="#90cdf4" size="42px" />}
-              />
-            </StepIndicator>
+  // Assuming steps is an array of step objects used in your Stepper
 
-            <Box>
-              <StepTitle style={{ color: "white" }}>{step.title}</StepTitle>
-              <StepDescription style={{ color: "gray.100" }}>{step.description}</StepDescription>
-            </Box>
+  return (
+    <div className="flex h-full flex-col justify-evenly content-evenly gap-5">
+      <table className="w-full text-white text-xs">
+        <tbody>
+          <tr>
+            <td className="border-transparent">Expiry Time</td>
+            <td className="border-transparent text-right">{expiryDate.toLocaleString()}</td>
+          </tr>
+          <tr>
+            <td className="border-transparent">Amount</td>
+            <td className="border-transparent text-right">{invoice.satoshis} sats</td>
+          </tr>
+          <tr>
+            <td className="border-transparent">USD</td>
+            <td className="border-transparent text-right">${((invoice.satoshis * price) / 100_000_000).toFixed(3)}</td>
+          </tr>
+          <tr>
+            <td className="border-transparent">Service Fee</td>
+            <td className="border-transparent text-right">0 sats</td>
+          </tr>
+        </tbody>
+      </table>
 
-            <StepSeparator />
-          </Step>
+      {/* Stepper Component */}
+      {/* You'll need to adapt or implement your own stepper logic with Tailwind CSS */}
+      <ul className="steps steps-vertical">
+        {steps.map((stepInfo, index) => (
+          <li key={index} className={`${index < step ? "step step-primary" : "step"} text-white`}>
+            {stepInfo.title}
+          </li>
         ))}
-      </Stepper>
+      </ul>
 
-      {step < 2 && (
-        <ButtonGroup colorScheme="red" width={"100%"} isDisabled={step !== 1}>
-          <Button
-            bg={"red.800 !important"}
-            width={"100%"}
+      {/* Buttons */}
+      {step < 2 ? (
+        <div className="w-full flex justify-between">
+          <button
+            className={`btn btn-error text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
             onClick={() => cancelPayment()}
-            isLoading={step == 2 || step == 3}
+            disabled={step == 2 || step == 3}
           >
             Cancel
-          </Button>
-          <Button
-            bg={"green.800 !important"}
-            colorScheme="green"
-            width={"100%"}
+          </button>
+          <button
+            className={`btn btn-success text-white ${step !== 1 ? "opacity-50 cursor-not-allowed" : ""}`}
             onClick={() => submitPayment()}
-            isLoading={step == 2 || step == 3}
+            disabled={step == 2 || step == 3}
           >
             Pay
-          </Button>
-        </ButtonGroup>
-      )}
-      {step >= 2 && (
-        <Button width={"100%"} onClick={() => cancelPayment()} isDisabled={step == 2 || step == 3}>
+          </button>
+        </div>
+      ) : (
+        <button
+          className="bg-blue-500 w-full text-white"
+          onClick={() => cancelPayment()}
+          disabled={step == 2 || step == 3}
+        >
           Close
-        </Button>
+        </button>
       )}
-    </Flex>
+    </div>
   );
 };
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
index a5288ad..24df593 100644
--- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
+++ b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { ChakraProvider, Flex } from "@chakra-ui/react";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
+import { ChakraProvider } from "@chakra-ui/react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
@@ -11,7 +9,6 @@ import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
-import theme from "~~/components/theme";
 import { LightningProvider, useLightningApp } from "~~/hooks/LightningProvider";
 import { useDarkMode } from "~~/hooks/scaffold-eth/useDarkMode";
 import { useGlobalState } from "~~/services/store/store";
@@ -31,13 +28,11 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <Flex flexDir={"column"} minH={"100vh"} background={"brand.bg"}>
+      <div className="flex flex-col min-h-screen bg-base-200">
         <Header />
-        <Flex dir="col" justifyContent={"center"} flex={1} className="relative flex flex-col flex-1">
-          {children}
-        </Flex>
+        <div className="flex flex-col flex-1 justify-center relative">{children}</div>
         <Footer />
-      </Flex>
+      </div>
       <Toaster />
     </>
   );
@@ -45,27 +40,21 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   const { isDarkMode } = useDarkMode();
-  const emotionCache = createCache({
-    key: "emotion-css-cache",
-    prepend: true, // ensures styles are prepended to the <head>, instead of appended
-  });
 
   return (
-    <CacheProvider value={emotionCache}>
-      <ChakraProvider theme={theme} cssVarsRoot="body">
-        <WagmiConfig config={wagmiConfig}>
-          <ProgressBar />
-          <RainbowKitProvider
-            chains={[...appChains.chains, botanixTestnet]}
-            avatar={BlockieAvatar}
-            theme={isDarkMode ? darkTheme() : lightTheme()}
-          >
-            <LightningProvider>
-              <ScaffoldEthApp>{children}</ScaffoldEthApp>
-            </LightningProvider>
-          </RainbowKitProvider>
-        </WagmiConfig>
-      </ChakraProvider>
-    </CacheProvider>
+    <ChakraProvider>
+      <WagmiConfig config={wagmiConfig}>
+        <ProgressBar />
+        <RainbowKitProvider
+          chains={[...appChains.chains, botanixTestnet]}
+          avatar={BlockieAvatar}
+          theme={isDarkMode ? darkTheme() : lightTheme()}
+        >
+          <LightningProvider>
+            <ScaffoldEthApp>{children}</ScaffoldEthApp>
+          </LightningProvider>
+        </RainbowKitProvider>
+      </WagmiConfig>
+    </ChakraProvider>
   );
 };
diff --git a/packages/nextjs/components/SendModalPopup.tsx b/packages/nextjs/components/SendModalPopup.tsx
index 8f20d59..1041d28 100644
--- a/packages/nextjs/components/SendModalPopup.tsx
+++ b/packages/nextjs/components/SendModalPopup.tsx
@@ -1,20 +1,8 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import {
-  Input,
-  InputGroup,
-  InputLeftAddon,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  VStack,
-  useSteps,
-} from "@chakra-ui/react";
-import { QrScanner } from "@yudiel/react-qr-scanner";
+import { useSteps } from "@chakra-ui/react";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import { PaymentRequestObject, decode } from "bolt11";
 import toast from "react-hot-toast";
 import { useWalletClient } from "wagmi";
@@ -86,7 +74,7 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
 
   function getPaymentHash(requestObject: PaymentRequestObject): `0x${string}` | undefined {
     // go through the tags and find the 'payment_hash' tagName and return the 'data'
-    const paymentHash = requestObject.tags.find(tag => tag.tagName === "payment_hash");
+    const paymentHash = requestObject.tags.find((tag: any) => tag.tagName === "payment_hash");
     if (!paymentHash) {
       return undefined;
     }
@@ -152,67 +140,63 @@ function SendModal({ isOpen, onClose }: SendModalProps) {
 
   return (
     <>
-      <Modal isCentered isOpen={isOpen} onClose={cleanAndClose}>
-        <ModalOverlay />
-        <ModalContent bg="brand.bg" h={["100%", "100%", "min-content"]} m="0">
-          <ModalHeader color={"white !important"} textAlign={"center"}>
-            {lnInvoiceRef.current == null ? "Scan QR Code" : "Review"}
-          </ModalHeader>
-          <ModalCloseButton />
-          <ModalBody
-            display={"flex"}
-            flexDir={"column"}
-            justifyContent={"center"}
-            alignContent={"space-between"}
-            mb={[0, 0, 5]}
-          >
-            {/* Wallet Section */}
-            {!lnInvoiceRef.current && (
-              <VStack alignContent={"space-between"} gap={["20", "20", "5"]}>
-                <QrScanner
-                  scanDelay={1}
-                  onError={handleError}
-                  onResult={result => handleScan(result)}
-                  onDecode={result => handleScan(result)}
-                />
-                <InputGroup>
-                  <InputLeftAddon
-                    style={{ cursor: "pointer" }}
-                    onClick={() => {
-                      navigator.clipboard.readText().then(text => {
-                        handleInvoiceChange(text);
-                      });
-                    }}
-                  >
-                    Paste
-                  </InputLeftAddon>
-                  <Input
-                    type="text"
-                    placeholder="ln1232...."
-                    value={invoice}
-                    onChange={e => handleInvoiceChange(e.target.value)}
+      {isOpen && (
+        <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-40 flex justify-center items-center">
+          <div className="bg-base-200 rounded-lg">
+            <div className="text-white bg-brand-bg text-center p-4 rounded-t-lg">
+              {lnInvoiceRef.current == null ? "Scan QR Code" : "Review"}
+              <button onClick={cleanAndClose} className="absolute top-0 right-0 m-4">
+                X
+              </button>
+            </div>
+            <div className="flex flex-col items-center justify-center p-6">
+              {!lnInvoiceRef.current && (
+                <div className="flex flex-col items-center gap-5">
+                  {/* QR Scanner */}
+                  <Scanner
+                    onError={handleError}
+                    onResult={result => handleScan(result)}
+                    // onDecode={result => handleScan(result)}
                   />
-                </InputGroup>
-              </VStack>
-            )}
-
-            {lnInvoiceRef.current && (
-              <PaymentInvoice
-                invoice={lnInvoiceRef.current}
-                submitPayment={submitPayment}
-                contractId={contractId}
-                step={activeStep}
-                expiryDate={getMinTimelock(lnInvoiceRef.current.timeExpireDate).toString()}
-                cancelPayment={() => {
-                  lnInvoiceRef.current = null;
-                  setInvoice("");
-                  setContractId(null);
-                }}
-              ></PaymentInvoice>
-            )}
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+                  <div className="flex">
+                    <button
+                      className="cursor-pointer bg-gray-200 p-2"
+                      onClick={() => {
+                        navigator.clipboard.readText().then(text => {
+                          handleInvoiceChange(text);
+                        });
+                      }}
+                    >
+                      Paste
+                    </button>
+                    <input
+                      type="text"
+                      placeholder="ln1232...."
+                      className="border p-2"
+                      value={invoice}
+                      onChange={e => handleInvoiceChange(e.target.value)}
+                    />
+                  </div>
+                </div>
+              )}
+              {lnInvoiceRef.current && (
+                <PaymentInvoice
+                  invoice={lnInvoiceRef.current}
+                  submitPayment={submitPayment}
+                  contractId={contractId}
+                  step={activeStep}
+                  expiryDate={getMinTimelock(lnInvoiceRef.current.timeExpireDate).toString()}
+                  cancelPayment={() => {
+                    lnInvoiceRef.current = null;
+                    setInvoice("");
+                    setContractId(null);
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }
diff --git a/packages/nextjs/components/theme.ts b/packages/nextjs/components/theme.ts
deleted file mode 100644
index 7b78247..0000000
--- a/packages/nextjs/components/theme.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-
-// 2. Add your color mode config
-const theme = extendTheme({
-  initialColorMode: "dark",
-  useSystemColorMode: false,
-  colors: {
-    brand: {
-      bg: "#1f1f1f",
-      // ...
-      900: "#1a202c",
-    },
-  },
-  styles: {
-    global: () => ({
-      body: {
-        bg: "",
-      },
-    }),
-  },
-});
-
-// 3. extend the theme
-
-export default theme;
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 5fb2d4b..737743e 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -26,7 +26,7 @@
     "@rainbow-me/rainbowkit": "^1.3.6",
     "@uniswap/sdk-core": "~4.0.1",
     "@uniswap/v2-sdk": "~3.0.1",
-    "@yudiel/react-qr-scanner": "^1.2.6",
+    "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
     "blo": "~1.0.1",
     "bolt11": "^1.4.1",
     "daisyui": "~4.4.19",
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 522d159..fdd42bd 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -6,7 +6,7 @@
 :root,
 [data-theme] {
   background: oklch(var(--b2));
-  font-family: 'IBM Plex Mono';
+  font-family: 'plex';
 }
 
 body {
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index 43ce96d..94b5b33 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
   plugins: [require("daisyui")],
@@ -6,38 +7,38 @@ module.exports = {
   // DaisyUI theme colors
   daisyui: {
     themes: [
-      { 
-      customDark: {
-        primary: "#8A3FFC", // A shade of purple for primary elements
-        "primary-content": "#F9FBFF", // High contrast content color for readability
-        secondary: "#323f61", // A subdued shade for secondary elements
-        "secondary-content": "#F9FBFF",
-        accent: "#BB86FC", // A lighter purple for accent elements
-        "accent-content": "#F9FBFF",
-        neutral: "#2A2E35", // Dark grey for neutral backgrounds
-        "neutral-content": "#F9FBFF", // Content color against the neutral background
-        "base-100": "#121212", // Dark base color for backgrounds
-        "base-200": "#1F1F1F", // Slightly lighter dark shade for layering
-        "base-300": "#242424", // Additional layering shade
-        "base-content": "#E0E0E0", // Greyish color for primary content
-        info: "#3B82F6", // Information messages or icons
-        success: "#4CAF50", // Success states, buttons, or icons
-        warning: "#FB8C00", // Warning messages or icons
-        error: "#F44336", // Error states, messages, or icons
+      {
+        customDark: {
+          primary: "#8A3FFC", // A shade of purple for primary elements
+          "primary-content": "#F9FBFF", // High contrast content color for readability
+          secondary: "#323f61", // A subdued shade for secondary elements
+          "secondary-content": "#F9FBFF",
+          accent: "#BB86FC", // A lighter purple for accent elements
+          "accent-content": "#F9FBFF",
+          neutral: "#2A2E35", // Dark grey for neutral backgrounds
+          "neutral-content": "#F9FBFF", // Content color against the neutral background
+          "base-100": "#121212", // Dark base color for backgrounds
+          "base-200": "#1F1F1F", // Slightly lighter dark shade for layering
+          "base-300": "#242424", // Additional layering shade
+          "base-content": "#E0E0E0", // Greyish color for primary content
+          info: "#3B82F6", // Information messages or icons
+          success: "#4CAF50", // Success states, buttons, or icons
+          warning: "#FB8C00", // Warning messages or icons
+          error: "#F44336", // Error states, messages, or icons
 
-        // Customizations for rounded buttons, tooltips, and links
-        "--rounded-btn": "0.5rem", // Rounded corners for buttons
-        ".tooltip": {
-          "--tooltip-tail": "6px",
-          "--tooltip-color": "oklch(var(--p))",
-        },
-        ".link": {
-          textUnderlineOffset: "2px",
-        },
-        ".link:hover": {
-          opacity: "80%",
+          // Customizations for rounded buttons, tooltips, and links
+          "--rounded-btn": "0.5rem", // Rounded corners for buttons
+          ".tooltip": {
+            "--tooltip-tail": "6px",
+            "--tooltip-color": "oklch(var(--p))",
+          },
+          ".link": {
+            textUnderlineOffset: "2px",
+          },
+          ".link:hover": {
+            opacity: "80%",
+          },
         },
-      }
       },
       {
         scaffoldEth: {
@@ -114,6 +115,9 @@ module.exports = {
       animation: {
         "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
+      fontFamily: {
+        plex: ["IBM Plex Mono"],
+      },
     },
   },
 };
diff --git a/yarn.lock b/yarn.lock
index 0c96a32..9e12221 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3108,7 +3108,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ~5.40.0
     "@uniswap/sdk-core": ~4.0.1
     "@uniswap/v2-sdk": ~3.0.1
-    "@yudiel/react-qr-scanner": ^1.2.6
+    "@yudiel/react-qr-scanner": ^2.0.0-beta.3
     autoprefixer: ~10.4.12
     blo: ~1.0.1
     bolt11: ^1.4.1
@@ -4880,15 +4880,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yudiel/react-qr-scanner@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "@yudiel/react-qr-scanner@npm:1.2.6"
+"@yudiel/react-qr-scanner@npm:^2.0.0-beta.3":
+  version: 2.0.0-beta.3
+  resolution: "@yudiel/react-qr-scanner@npm:2.0.0-beta.3"
   dependencies:
     "@zxing/library": ^0.20.0
   peerDependencies:
-    react: ^18.0.0
-    react-dom: ^18.0.0
-  checksum: 85a621c6eae0ae052f8f9dfe1bf11726fa17b7192be15bd13ee9c7c70ae6388511f2ae309f852a075c487c5cf4e7b258040b83d4b3e4e485fbbdbfa4163d1827
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: fe82275151b51402b37dbd959d0329f807551b96b028dba301b708f3ca26faf7fd599a6056f5eb11221d33d3c12157ecc65225f0262227d3d5543a5e5dee32a2
   languageName: node
   linkType: hard