diff --git a/package.json b/package.json
index b1b9765b33..cefca37e89 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,7 @@
     "puppeteer": "^21.0.3",
     "stream-browserify": "^3.0.0",
     "swc-loader": "^0.2.3",
+    "tailwindcss-3d": "^1.0.0",
     "terser-webpack-plugin": "^5.3.9",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",
diff --git a/scripts/check-changed-translations.js b/scripts/check-changed-translations.js
index afa6f26622..8607a0827b 100644
--- a/scripts/check-changed-translations.js
+++ b/scripts/check-changed-translations.js
@@ -18,7 +18,7 @@ function compareObjects(obj1, obj2, parentPath = "") {
           obj2[key],
           parentPath ? `${parentPath}.${key}` : key
         );
-      } else if (obj1[key] !== obj2[key]) {
+      } else if (obj1[key] !== obj2[key] && obj2[key] !== undefined) {
         const title = `Translation source ${parentPath}.${key} has changed`;
         const message = `Consider running \`node scripts/remove-outdated-translations.js ${parentPath}.${key}\` to reset existing translations.`;
         console.log(
diff --git a/src/app/components/Avatar/index.tsx b/src/app/components/Avatar/index.tsx
index a53718a533..169c28789f 100644
--- a/src/app/components/Avatar/index.tsx
+++ b/src/app/components/Avatar/index.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useRef } from "react";
 import { generateSvgGAvatar } from "~/app/components/Avatar/generator";
+import { classNames } from "~/app/utils";
 
 type Props = {
   name: string;
   size: number;
   url?: string;
+  className?: string;
 };
 
 const Avatar = (props: Props) => {
@@ -20,6 +22,7 @@ const Avatar = (props: Props) => {
 const AvatarImage = (props: Props) => {
   return (
     <div
+      className={classNames("translate-z-0 bg-white", props.className ?? "")}
       style={{
         width: `${props.size}px`,
         height: `${props.size}px`,
@@ -48,11 +51,10 @@ const AvatarSVG = (props: Omit<Props, "url">) => {
 
   return (
     <svg
-      className="rounded-full overflow-hidden"
-      style={{
-        transform:
-          "translateZ(0)" /* Forced GPU render to avoid ugly borders when switching accounts */,
-      }}
+      className={classNames(
+        "rounded-full overflow-hidden translate-z-0",
+        props.className ?? ""
+      )}
       ref={svgRef}
       width={props.size}
       height={props.size}
diff --git a/src/app/components/BalanceBox/index.tsx b/src/app/components/BalanceBox/index.tsx
index adb674c3e3..6ce52f42a7 100644
--- a/src/app/components/BalanceBox/index.tsx
+++ b/src/app/components/BalanceBox/index.tsx
@@ -33,9 +33,9 @@ function BalanceBox({ className }: Props) {
       </div>
 
       {accountLoading ? (
-        <SkeletonLoader containerClassName="mt-2" className="w-16" />
+        <SkeletonLoader containerClassName="mt-1" className="w-16" />
       ) : (
-        <div className="text-gray-500 mt-2">
+        <div className="text-gray-500 mt-1">
           {balancesDecorated.fiatBalance && (
             <>~{balancesDecorated.fiatBalance}</>
           )}
diff --git a/src/app/components/BudgetControl/index.tsx b/src/app/components/BudgetControl/index.tsx
index 50a7ddd151..bf684228da 100644
--- a/src/app/components/BudgetControl/index.tsx
+++ b/src/app/components/BudgetControl/index.tsx
@@ -10,6 +10,7 @@ type Props = {
   budget: string;
   onBudgetChange: ChangeEventHandler<HTMLInputElement>;
   fiatAmount: string;
+  disabled?: boolean;
 };
 
 function BudgetControl({
@@ -18,6 +19,7 @@ function BudgetControl({
   budget,
   onBudgetChange,
   fiatAmount,
+  disabled = false,
 }: Props) {
   const { t } = useTranslation("components", {
     keyPrefix: "budget_control",
@@ -27,12 +29,13 @@ function BudgetControl({
 
   return (
     <div className="mb-4">
-      <div className="flex items-center">
+      <div className={`flex items-center`}>
         <Checkbox
           id="remember_me"
           name="remember_me"
           checked={remember}
           onChange={onRememberChange}
+          disabled={disabled}
         />
         <label
           htmlFor="remember_me"
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index 488c510b65..256d4b239c 100644
--- a/src/app/components/Header/index.tsx
+++ b/src/app/components/Header/index.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 function Header({ children, headerLeft, headerRight }: Props) {
   return (
-    <div className="bg-white py-2 border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
+    <div className="bg-white py-[6px] border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
       <div className="flex justify-between items-center container max-w-screen-lg px-4 mx-auto">
         <div className="w-8 h-8">{headerLeft}</div>
         <h1 className="text-lg font-medium dark:text-white" tabIndex={0}>
diff --git a/src/app/components/IconButton/index.tsx b/src/app/components/IconButton/index.tsx
index 8a0bc572cb..9e882212c7 100644
--- a/src/app/components/IconButton/index.tsx
+++ b/src/app/components/IconButton/index.tsx
@@ -6,7 +6,7 @@ type Props = {
 function IconButton({ onClick, icon }: Props) {
   return (
     <button
-      className="flex justify-center items-center w-8 h-8 dark:text-white rounded-md border border-gray-300 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-08dp transition-colors duration-200"
+      className="flex justify-center items-center w-8 h-8 dark:text-white rounded-md border border-gray-200 dark:border-neutral-700 hover:bg-gray-50 dark:hover:bg-surface-08dp transition-colors duration-200"
       onClick={onClick}
     >
       {icon}
diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
new file mode 100644
index 0000000000..94898f5913
--- /dev/null
+++ b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -0,0 +1,35 @@
+import { CaretRightIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+
+export type IconLinkCardProps = {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+};
+
+export function IconLinkCard({
+  icon,
+  title,
+  description,
+  onClick,
+}: IconLinkCardProps) {
+  return (
+    <div
+      className="shadow rounded-md p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
+      onClick={onClick}
+    >
+      <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
+      <div className="flex-grow">
+        <div className="font-medium leading-5 text-sm md:text-base">
+          {title}
+        </div>
+        <div className="text-gray-600 dark:text-neutral-400 text-xs leading-4 md:text-sm">
+          {description}
+        </div>
+      </div>
+      <div className="flex-shrink-0 flex justify-end ">
+        <CaretRightIcon className="w-8" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx
index 91be06cfce..56c5a2b3c9 100644
--- a/src/app/components/Navbar/Navbar.tsx
+++ b/src/app/components/Navbar/Navbar.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 export default function Navbar({ children }: Props) {
   return (
-    <div className="py-2 bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
+    <div className="py-[6px] bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
       <div className="max-w-screen-lg px-4 flex justify-between items-center mx-auto w-full">
         <div className="flex">
           <UserMenu />
diff --git a/src/app/components/QRCode/index.tsx b/src/app/components/QRCode/index.tsx
new file mode 100644
index 0000000000..faf5719506
--- /dev/null
+++ b/src/app/components/QRCode/index.tsx
@@ -0,0 +1,25 @@
+import ReactQRCode from "react-qr-code";
+import { classNames, useTheme } from "~/app/utils";
+
+export type Props = {
+  value: string;
+  size?: number;
+  className?: string;
+};
+
+export default function QRCode({ value, size, className }: Props) {
+  const theme = useTheme();
+  const fgColor = theme === "dark" ? "#FFFFFF" : "#000000";
+  const bgColor = theme === "dark" ? "#000000" : "#FFFFFF";
+
+  return (
+    <ReactQRCode
+      value={value}
+      size={size}
+      className={classNames("rounded-md", className ?? "")}
+      fgColor={fgColor}
+      bgColor={bgColor}
+      level="M"
+    />
+  );
+}
diff --git a/src/app/components/SkeletonLoader/index.tsx b/src/app/components/SkeletonLoader/index.tsx
index 52df819b4a..79820aba3f 100644
--- a/src/app/components/SkeletonLoader/index.tsx
+++ b/src/app/components/SkeletonLoader/index.tsx
@@ -2,17 +2,25 @@ import Skeleton from "react-loading-skeleton";
 import { classNames } from "~/app/utils";
 
 export type Props = {
+  circle?: boolean;
   className?: string;
   containerClassName?: string;
+  opaque?: boolean;
 };
 
-function SkeletonLoader({ className, containerClassName }: Props) {
+function SkeletonLoader({
+  className,
+  containerClassName,
+  circle,
+  opaque = true,
+}: Props) {
   return (
     <Skeleton
-      className={classNames(className ?? "", "opacity-20")}
-      containerClassName={containerClassName}
       baseColor="#AAA"
       highlightColor="#FFF"
+      className={classNames(opaque ? "opacity-20" : "", className ?? "")}
+      containerClassName={containerClassName}
+      circle={circle}
     />
   );
 }
diff --git a/src/app/components/form/Checkbox.tsx b/src/app/components/form/Checkbox.tsx
index 5b94383958..47085f50b6 100644
--- a/src/app/components/form/Checkbox.tsx
+++ b/src/app/components/form/Checkbox.tsx
@@ -3,6 +3,7 @@ function Checkbox({
   name,
   checked,
   onChange,
+  disabled,
 }: React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <input
@@ -11,6 +12,7 @@ function Checkbox({
       type="checkbox"
       checked={checked}
       onChange={onChange}
+      disabled={disabled}
       className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded cursor-pointer"
     />
   );
diff --git a/src/app/hooks/useLightningAddress.ts b/src/app/hooks/useLightningAddress.ts
new file mode 100644
index 0000000000..ff6fd53d94
--- /dev/null
+++ b/src/app/hooks/useLightningAddress.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useAccount } from "~/app/context/AccountContext";
+import api from "~/common/lib/api";
+
+export const useLightningAddress = () => {
+  const { account } = useAccount();
+  const [lightningAddress, setLightningAddress] = useState("");
+  const [loadingLightningAddress, setLoadingLightningAddress] = useState(false);
+
+  useEffect(() => {
+    // TODO: replace with connector-supported functionality
+    if (account?.connectorType !== "alby") {
+      setLightningAddress("");
+      setLoadingLightningAddress(false);
+      return;
+    }
+    (async () => {
+      setLoadingLightningAddress(true);
+      const response = await api.getAccountInfo();
+      const lightningAddress = response.info.lightning_address;
+      if (lightningAddress) setLightningAddress(lightningAddress);
+      setLoadingLightningAddress(false);
+    })();
+  }, [account?.connectorType]);
+
+  return {
+    loadingLightningAddress,
+    lightningAddress,
+  };
+};
diff --git a/src/app/icons/RedeemIcon.tsx b/src/app/icons/RedeemIcon.tsx
new file mode 100644
index 0000000000..59310689fe
--- /dev/null
+++ b/src/app/icons/RedeemIcon.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from "react";
+
+const RedeemIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="27"
+    height="27"
+    viewBox="0 0 27 27"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4.6909 6.29089H5.26233H4.6909ZM6.83947 4.14232V4.71375V4.14232ZM6.83947 25.8566V25.2852V25.8566ZM4.6909 23.708H4.11947H4.6909ZM21.8795 23.708H22.4509H21.8795ZM19.7309 25.8566V26.428V25.8566ZM21.8795 6.29089H21.308H21.8795ZM19.7309 4.14232V3.57089V4.14232ZM12.7068 19.5709C12.7068 19.8865 12.9627 20.1423 13.2783 20.1423C13.5939 20.1423 13.8497 19.8865 13.8497 19.5709H12.7068ZM13.8497 9.8566C13.8497 9.54101 13.5939 9.28518 13.2783 9.28518C12.9627 9.28518 12.7068 9.54101 12.7068 9.8566H13.8497ZM17.499 17.2935C17.7247 17.073 17.7289 16.7112 17.5084 16.4854C17.2878 16.2597 16.926 16.2555 16.7003 16.476L17.499 17.2935ZM13.2781 20.6183L12.8788 21.027C13.1008 21.2439 13.4554 21.2439 13.6774 21.027L13.2781 20.6183ZM9.85592 16.476C9.63017 16.2555 9.26839 16.2597 9.04785 16.4854C8.8273 16.7112 8.83152 17.073 9.05726 17.2935L9.85592 16.476ZM25.8566 2.86232H25.2852H25.8566ZM25.8566 6.56518H26.428H25.8566ZM0.71373 6.56518H0.142301H0.71373ZM0.71373 2.86232H1.28516H0.71373ZM2.8623 0.713745V1.28517V0.713745ZM23.708 0.713746V0.142317V0.713746ZM2.8623 8.71375L2.8623 9.28518H2.8623V8.71375ZM23.708 8.71375V8.14232V8.71375ZM21.308 6.29089V23.708H22.4509V6.29089H21.308ZM19.7309 25.2852L6.83947 25.2852V26.428L19.7309 26.428V25.2852ZM5.26232 23.708L5.26233 6.29089H4.11947L4.11947 23.708H5.26232ZM6.83947 4.71375L19.7309 4.71375V3.57089L6.83947 3.57089V4.71375ZM5.26233 6.29089C5.26233 5.41986 5.96844 4.71375 6.83947 4.71375V3.57089C5.33725 3.57089 4.11947 4.78867 4.11947 6.29089H5.26233ZM6.83947 25.2852C5.96843 25.2852 5.26232 24.5791 5.26232 23.708H4.11947C4.11947 25.2102 5.33725 26.428 6.83947 26.428V25.2852ZM21.308 23.708C21.308 24.5791 20.6019 25.2852 19.7309 25.2852V26.428C21.2331 26.428 22.4509 25.2102 22.4509 23.708H21.308ZM22.4509 6.29089C22.4509 4.78868 21.2331 3.57089 19.7309 3.57089V4.71375C20.6019 4.71375 21.308 5.41986 21.308 6.29089H22.4509ZM13.8497 19.5709V9.8566H12.7068V19.5709H13.8497ZM16.7003 16.476L12.8788 20.2095L13.6774 21.027L17.499 17.2935L16.7003 16.476ZM13.6774 20.2095L9.85592 16.476L9.05726 17.2935L12.8788 21.027L13.6774 20.2095ZM25.2852 2.86232V6.56518H26.428V2.86232H25.2852ZM1.28516 6.56518L1.28516 2.86232H0.142302L0.142301 6.56518H1.28516ZM2.8623 1.28517L23.708 1.28517V0.142317L2.8623 0.142317V1.28517ZM4.6909 8.14232H2.8623V9.28518H4.6909V8.14232ZM23.708 8.14232H21.8795V9.28518H23.708V8.14232ZM1.28516 2.86232C1.28516 1.99128 1.99127 1.28517 2.8623 1.28517V0.142317C1.36009 0.142316 0.142302 1.3601 0.142302 2.86232H1.28516ZM0.142301 6.56518C0.142301 8.06739 1.36009 9.28517 2.8623 9.28518L2.8623 8.14232C1.99127 8.14232 1.28516 7.43621 1.28516 6.56518H0.142301ZM25.2852 6.56518C25.2852 7.43621 24.5791 8.14232 23.708 8.14232V9.28518C25.2102 9.28518 26.428 8.06739 26.428 6.56518H25.2852ZM26.428 2.86232C26.428 1.3601 25.2102 0.142317 23.708 0.142317V1.28517C24.579 1.28517 25.2852 1.99129 25.2852 2.86232H26.428Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default RedeemIcon;
diff --git a/src/app/router/Options/Options.tsx b/src/app/router/Options/Options.tsx
index 005b65a5f7..af4acba192 100644
--- a/src/app/router/Options/Options.tsx
+++ b/src/app/router/Options/Options.tsx
@@ -34,6 +34,7 @@ import NostrSetup from "~/app/screens/Accounts/NostrSetup/NostrSetup";
 import Discover from "~/app/screens/Discover";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import ReceiveInvoice from "~/app/screens/ReceiveInvoice";
 import ScanQRCode from "~/app/screens/ScanQRCode";
 import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
 import ChooseConnector from "~/app/screens/connectors/ChooseConnector";
@@ -72,6 +73,7 @@ function Options() {
               element={<SendToBitcoinAddress />}
             />
             <Route path="receive" element={<Receive />} />
+            <Route path="receive/invoice" element={<ReceiveInvoice />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="wallet" element={<DefaultView />} />
             <Route path="transactions">
diff --git a/src/app/router/Popup/Popup.tsx b/src/app/router/Popup/Popup.tsx
index b3278cd1e1..540cf895f1 100644
--- a/src/app/router/Popup/Popup.tsx
+++ b/src/app/router/Popup/Popup.tsx
@@ -10,13 +10,13 @@ import Receive from "@screens/Receive";
 import Send from "@screens/Send";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
+import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import ReceiveInvoice from "~/app/screens/ReceiveInvoice";
 import ScanQRCode from "~/app/screens/ScanQRCode";
 import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
-
-import Toaster from "~/app/components/Toast/Toaster";
 import RequireAuth from "../RequireAuth";
 
 function Popup() {
@@ -37,6 +37,7 @@ function Popup() {
             <Route path="scanQRCode" element={<ScanQRCode />} />
             <Route path="receive" element={<Receive />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
+            <Route path="receive/invoice" element={<ReceiveInvoice />} />
             <Route path="lnurlPay" element={<LNURLPay />} />
             <Route path="lnurlChannel" element={<LNURLChannel />} />
             <Route path="lnurlWithdraw" element={<LNURLWithdraw />} />
diff --git a/src/app/screens/Accounts/Detail/index.tsx b/src/app/screens/Accounts/Detail/index.tsx
index e120192a30..78ded234f9 100644
--- a/src/app/screens/Accounts/Detail/index.tsx
+++ b/src/app/screens/Accounts/Detail/index.tsx
@@ -9,7 +9,6 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import type { FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import QRCode from "react-qr-code";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import Alert from "~/app/components/Alert";
 import Badge from "~/app/components/Badge";
@@ -17,6 +16,7 @@ import Hyperlink from "~/app/components/Hyperlink";
 import InputCopyButton from "~/app/components/InputCopyButton";
 import MenuDivider from "~/app/components/Menu/MenuDivider";
 import Modal from "~/app/components/Modal";
+import QRCode from "~/app/components/QRCode";
 import toast from "~/app/components/Toast";
 import Select from "~/app/components/form/Select";
 import Toggle from "~/app/components/form/Toggle";
@@ -286,7 +286,6 @@ function AccountDetail() {
                           <p>{t("export.scan_qr")}</p>
                           <QRCode
                             value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
-                            level="M"
                             size={256}
                           />
                           <div className="w-full">
diff --git a/src/app/screens/ConfirmKeysend/index.tsx b/src/app/screens/ConfirmKeysend/index.tsx
index 785e039402..34c3de533d 100644
--- a/src/app/screens/ConfirmKeysend/index.tsx
+++ b/src/app/screens/ConfirmKeysend/index.tsx
@@ -160,6 +160,7 @@ function ConfirmKeysend() {
                 }}
                 budget={budget}
                 onBudgetChange={(event) => setBudget(event.target.value)}
+                disabled={loading}
               />
               <ConfirmOrCancel
                 disabled={loading}
diff --git a/src/app/screens/ConfirmPayment/index.tsx b/src/app/screens/ConfirmPayment/index.tsx
index 3badce9ea3..4138f41c76 100644
--- a/src/app/screens/ConfirmPayment/index.tsx
+++ b/src/app/screens/ConfirmPayment/index.tsx
@@ -173,6 +173,7 @@ function ConfirmPayment() {
                   }}
                   budget={budget}
                   onBudgetChange={(event) => setBudget(event.target.value)}
+                  disabled={loading}
                 />
               )}
               <ConfirmOrCancel
@@ -198,7 +199,7 @@ function ConfirmPayment() {
                   })
             }
           />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}
diff --git a/src/app/screens/Home/DefaultView/index.test.tsx b/src/app/screens/Home/DefaultView/index.test.tsx
index 6ce9e420ea..ebdfd22f10 100644
--- a/src/app/screens/Home/DefaultView/index.test.tsx
+++ b/src/app/screens/Home/DefaultView/index.test.tsx
@@ -1,11 +1,11 @@
-import { AccountsProvider } from "../../../context/AccountsContext";
-import DefaultView from "./index";
 import { render, screen } from "@testing-library/react";
 import { I18nextProvider } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 import i18n from "~/../tests/unit/helpers/i18n";
 import { BatteryFixture } from "~/fixtures/battery";
+import { AccountsProvider } from "../../../context/AccountsContext";
+import DefaultView from "./index";
 
 jest.mock("~/common/lib/api", () => ({
   getPayments: () => {
@@ -13,6 +13,20 @@ jest.mock("~/common/lib/api", () => ({
       payments: [],
     };
   },
+  getAccountInfo: () => {
+    return {
+      connectorType: "alby",
+      balance: { balance: 0, currency: "BTC" },
+      currentAccountId: "1234",
+      info: {
+        alias: "🐝 getalby.com",
+        pubkey: undefined,
+        lightning_address: "hello@getalby.com",
+      },
+      name: "hello",
+      avatarUrl: undefined,
+    };
+  },
   getBlocklist: () => {
     return {};
   },
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 1e81a8cf3c..4fd187aceb 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -13,9 +13,11 @@ import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import BalanceBox from "~/app/components/BalanceBox";
+import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
 import { useInvoices } from "~/app/hooks/useInvoices";
+import { useLightningAddress } from "~/app/hooks/useLightningAddress";
 import { useTransactions } from "~/app/hooks/useTransactions";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
 import api from "~/common/lib/api";
@@ -35,7 +37,7 @@ const DefaultView: FC<Props> = (props) => {
   const { t } = useTranslation("translation", { keyPrefix: "home" });
   const { t: tCommon } = useTranslation("common");
   const { t: tComponents } = useTranslation("components");
-
+  const { loadingLightningAddress, lightningAddress } = useLightningAddress();
   const navigate = useNavigate();
 
   const { account, balancesDecorated, accountLoading } = useAccount();
@@ -115,9 +117,30 @@ const DefaultView: FC<Props> = (props) => {
         <PublisherLnData lnData={props.lnDataFromCurrentTab[0]} />
       )}
       <div className="p-4">
-        <div className="flex space-x-4 mb-4">
-          <BalanceBox />
-        </div>
+        <BalanceBox />
+        {(loadingLightningAddress || lightningAddress) && (
+          <div className="flex justify-center">
+            <a
+              className="cursor-pointer flex flex-row items-center mb-6 px-3 py-1 bg-white dark:bg-surface-01dp border border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-white rounded-full text-xs font-medium hover:border-primary hover:bg-yellow-50 dark:hover:border-primary dark:hover:dark:bg-surface-16dp transition-all duration-250 select-none"
+              onClick={() => {
+                navigator.clipboard.writeText(lightningAddress);
+                toast.success(tCommon("actions.copied_to_clipboard"));
+              }}
+            >
+              {loadingLightningAddress && (
+                <>
+                  ⚡️&nbsp;
+                  <SkeletonLoader className="w-32" />
+                </>
+              )}
+              {!loadingLightningAddress && (
+                <>
+                  <span>⚡️ {lightningAddress}</span>
+                </>
+              )}
+            </a>
+          </div>
+        )}
         <div className="flex mb-6 lg:mb-12 space-x-4">
           <Button
             fullWidth
diff --git a/src/app/screens/Keysend/index.tsx b/src/app/screens/Keysend/index.tsx
index 376e576d72..8f2cec79e7 100644
--- a/src/app/screens/Keysend/index.tsx
+++ b/src/app/screens/Keysend/index.tsx
@@ -157,7 +157,7 @@ function Keysend() {
                   })
             }
           />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}
diff --git a/src/app/screens/LNURLAuth/index.tsx b/src/app/screens/LNURLAuth/index.tsx
index 0956e7a3f2..6d9e71b406 100644
--- a/src/app/screens/LNURLAuth/index.tsx
+++ b/src/app/screens/LNURLAuth/index.tsx
@@ -124,7 +124,7 @@ function LNURLAuth() {
       ) : (
         <Container justifyBetween maxWidth="sm">
           <ResultCard isSuccess message={successMessage} />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}
diff --git a/src/app/screens/LNURLChannel/index.tsx b/src/app/screens/LNURLChannel/index.tsx
index 24285bb738..48d808ea34 100644
--- a/src/app/screens/LNURLChannel/index.tsx
+++ b/src/app/screens/LNURLChannel/index.tsx
@@ -125,7 +125,7 @@ function LNURLChannel() {
       ) : (
         <Container justifyBetween maxWidth="sm">
           <ResultCard isSuccess message={successMessage} />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}
diff --git a/src/app/screens/LNURLPay/index.tsx b/src/app/screens/LNURLPay/index.tsx
index 35d26a0326..bc68de8724 100644
--- a/src/app/screens/LNURLPay/index.tsx
+++ b/src/app/screens/LNURLPay/index.tsx
@@ -406,117 +406,123 @@ function LNURLPay() {
         {!successAction ? (
           <>
             <div className="grow overflow-y-auto no-scrollbar">
-              <Container maxWidth="sm">
+              <Container justifyBetween maxWidth="sm">
                 <PublisherCard
                   title={navState.origin?.name}
                   description={getRecipient()}
                   image={navState.origin?.icon || getImage()}
                 />
-                <form onSubmit={handleSubmit}>
-                  <fieldset disabled={loadingConfirm}>
-                    <dl className="mt-4 overflow-hidden">
-                      <>
-                        {formattedMetadata(details.metadata).map(
-                          ([dt, dd], i) => (
-                            <Fragment key={`element-${i}`}>
-                              <Dt>{dt}</Dt>
-                              <Dd>{dd}</Dd>
-                            </Fragment>
-                          )
-                        )}
-                        {details.minSendable === details.maxSendable && (
-                          <>
-                            <Dt>{t("amount.label")}</Dt>
-                            <Dd>
-                              {getFormattedSats(
-                                Math.floor(+details.minSendable / 1000)
-                              )}
-                            </Dd>
-                          </>
-                        )}
-                      </>
-                    </dl>
-                    {details && details.minSendable !== details.maxSendable && (
-                      <div>
-                        <DualCurrencyField
-                          autoFocus
-                          id="amount"
-                          label={t("amount.label")}
-                          min={amountMin}
-                          max={amountMax}
-                          rangeExceeded={rangeExceeded}
-                          value={valueSat}
-                          onChange={(e) => setValueSat(e.target.value)}
-                          fiatValue={fiatValue}
-                          hint={`${tCommon("balance")}: ${auth
-                            ?.balancesDecorated?.accountBalance}`}
-                          amountExceeded={amountExceeded}
-                        />
-                        <SatButtons
-                          min={amountMin}
-                          max={amountMax}
-                          onClick={setValueSat}
-                          disabled={loadingConfirm}
-                        />
-                      </div>
-                    )}
-
-                    {showCommentField() && (
-                      <div className="mt-4">
-                        <TextField
-                          id="comment"
-                          label={t("comment.label")}
-                          placeholder={tCommon("optional")}
-                          onChange={(e) => {
-                            setComment(e.target.value);
-                          }}
-                        />
-                      </div>
-                    )}
-
-                    {(showNameField() || showEmailField()) && (
-                      <div className="flex justify-center mt-4">
-                        <Hyperlink onClick={toggleShowMoreFields}>
-                          {tCommon("actions.more")}{" "}
-                          {showMoreFields ? (
-                            <CaretUpIcon className="h-4 w-4 inline-flex" />
-                          ) : (
-                            <CaretDownIcon className="h-4 w-4 inline-flex" />
+                <form onSubmit={handleSubmit} className="h-full">
+                  <fieldset
+                    disabled={loadingConfirm}
+                    className="h-full flex flex-col justify-between"
+                  >
+                    <div>
+                      <dl className="mt-4 overflow-hidden">
+                        <>
+                          {formattedMetadata(details.metadata).map(
+                            ([dt, dd], i) => (
+                              <Fragment key={`element-${i}`}>
+                                <Dt>{dt}</Dt>
+                                <Dd>{dd}</Dd>
+                              </Fragment>
+                            )
+                          )}
+                          {details.minSendable === details.maxSendable && (
+                            <>
+                              <Dt>{t("amount.label")}</Dt>
+                              <Dd>
+                                {getFormattedSats(
+                                  Math.floor(+details.minSendable / 1000)
+                                )}
+                              </Dd>
+                            </>
                           )}
-                        </Hyperlink>
-                      </div>
-                    )}
-
-                    {showMoreFields && (
-                      <div className="mb-4">
-                        {showNameField() && (
-                          <div className="mt-4">
-                            <TextField
-                              id="name"
-                              label={t("name.label")}
-                              placeholder={tCommon("optional")}
-                              value={userName}
-                              onChange={(e) => {
-                                setUserName(e.target.value);
-                              }}
+                        </>
+                      </dl>
+                      {details &&
+                        details.minSendable !== details.maxSendable && (
+                          <div>
+                            <DualCurrencyField
+                              autoFocus
+                              id="amount"
+                              label={t("amount.label")}
+                              min={amountMin}
+                              max={amountMax}
+                              rangeExceeded={rangeExceeded}
+                              value={valueSat}
+                              onChange={(e) => setValueSat(e.target.value)}
+                              fiatValue={fiatValue}
+                              hint={`${tCommon("balance")}: ${auth
+                                ?.balancesDecorated?.accountBalance}`}
+                              amountExceeded={amountExceeded}
                             />
-                          </div>
-                        )}
-                        {showEmailField() && (
-                          <div className="mt-4">
-                            <TextField
-                              id="email"
-                              label={t("email.label")}
-                              placeholder={tCommon("optional")}
-                              value={userEmail}
-                              onChange={(e) => {
-                                setUserEmail(e.target.value);
-                              }}
+                            <SatButtons
+                              min={amountMin}
+                              max={amountMax}
+                              onClick={setValueSat}
+                              disabled={loadingConfirm}
                             />
                           </div>
                         )}
-                      </div>
-                    )}
+
+                      {showCommentField() && (
+                        <div className="mt-4">
+                          <TextField
+                            id="comment"
+                            label={t("comment.label")}
+                            placeholder={tCommon("optional")}
+                            onChange={(e) => {
+                              setComment(e.target.value);
+                            }}
+                          />
+                        </div>
+                      )}
+
+                      {(showNameField() || showEmailField()) && (
+                        <div className="flex justify-center mt-4">
+                          <Hyperlink onClick={toggleShowMoreFields}>
+                            {tCommon("actions.more")}{" "}
+                            {showMoreFields ? (
+                              <CaretUpIcon className="h-4 w-4 inline-flex" />
+                            ) : (
+                              <CaretDownIcon className="h-4 w-4 inline-flex" />
+                            )}
+                          </Hyperlink>
+                        </div>
+                      )}
+
+                      {showMoreFields && (
+                        <div className="mb-4">
+                          {showNameField() && (
+                            <div className="mt-4">
+                              <TextField
+                                id="name"
+                                label={t("name.label")}
+                                placeholder={tCommon("optional")}
+                                value={userName}
+                                onChange={(e) => {
+                                  setUserName(e.target.value);
+                                }}
+                              />
+                            </div>
+                          )}
+                          {showEmailField() && (
+                            <div className="mt-4">
+                              <TextField
+                                id="email"
+                                label={t("email.label")}
+                                placeholder={tCommon("optional")}
+                                value={userEmail}
+                                onChange={(e) => {
+                                  setUserEmail(e.target.value);
+                                }}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
                     <div className="mt-2 dark:border-white/10">
                       <ConfirmOrCancel
                         isFocused={false}
diff --git a/src/app/screens/LNURLRedeem/index.tsx b/src/app/screens/LNURLRedeem/index.tsx
index 75bf9f422c..7417e676ed 100644
--- a/src/app/screens/LNURLRedeem/index.tsx
+++ b/src/app/screens/LNURLRedeem/index.tsx
@@ -92,7 +92,7 @@ function LNURLRedeem() {
               endAdornment={<QrcodeAdornment route="lnurlRedeem" />}
             />
           </div>
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               type="submit"
               label={t("actions.withdraw")}
diff --git a/src/app/screens/LNURLWithdraw/index.tsx b/src/app/screens/LNURLWithdraw/index.tsx
index 0a4cb9dab8..7acdbd9e7f 100644
--- a/src/app/screens/LNURLWithdraw/index.tsx
+++ b/src/app/screens/LNURLWithdraw/index.tsx
@@ -164,7 +164,7 @@ function LNURLWithdraw() {
       ) : (
         <Container justifyBetween maxWidth="sm">
           <ResultCard isSuccess message={successMessage} />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}
diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
index c7c5efd110..170515e065 100644
--- a/src/app/screens/Receive/index.tsx
+++ b/src/app/screens/Receive/index.tsx
@@ -1,62 +1,34 @@
 import {
+  BitcoinCircleIcon,
   CaretLeftIcon,
-  CheckIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
-import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
-import Button from "@components/Button";
+  CopyIcon,
+  LightningIcon,
+} from "@bitcoin-design/bitcoin-icons-react/outline";
 import Container from "@components/Container";
 import Header from "@components/Header";
 import IconButton from "@components/IconButton";
-import Loading from "@components/Loading";
-import DualCurrencyField from "@components/form/DualCurrencyField";
-import TextField from "@components/form/TextField";
-import { useEffect, useRef, useState } from "react";
-import Confetti from "react-confetti";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import QRCode from "react-qr-code";
 import { useNavigate } from "react-router-dom";
+import Avatar from "~/app/components/Avatar";
+import QRCode from "~/app/components/QRCode";
+import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
-import { useSettings } from "~/app/context/SettingsContext";
+import RedeemIcon from "~/app/icons/RedeemIcon";
 import { isAlbyLNDHubAccount, isAlbyOAuthAccount } from "~/app/utils";
 import api from "~/common/lib/api";
-import msg from "~/common/lib/msg";
-import { poll } from "~/common/utils/helpers";
+import { IconLinkCard } from "../../components/IconLinkCard/IconLinkCard";
 
 function Receive() {
+  const auth = useAccount();
+  const navigate = useNavigate();
   const { t } = useTranslation("translation", { keyPrefix: "receive" });
   const { t: tCommon } = useTranslation("common");
 
-  const auth = useAccount();
-  const {
-    isLoading: isLoadingSettings,
-    settings,
-    getFormattedFiat,
-  } = useSettings();
-  const showFiat = !isLoadingSettings && settings.showFiat;
+  const [loadingLightningAddress, setLoadingLightningAddress] = useState(true);
 
-  const navigate = useNavigate();
-  const [formData, setFormData] = useState({
-    amount: "0",
-    description: "",
-    expiration: "",
-  });
-  const [loadingInvoice, setLoadingInvoice] = useState(false);
-  const [loadingLightningAddress, setLoadingLightningAddress] = useState(false);
-  const [invoice, setInvoice] = useState<{
-    paymentRequest: string;
-    rHash: string;
-  } | null>();
-  const [copyInvoiceLabel, setCopyInvoiceLabel] = useState(
-    tCommon("actions.copy_invoice") as string
-  );
-  const [copyLightningAddressLabel, setCopyLightningAddressLabel] = useState(
-    t("actions.copy_lightning_address") as string
-  );
   const [lightningAddress, setLightningAddress] = useState("");
-  const [paid, setPaid] = useState(false);
-  const [pollingForPayment, setPollingForPayment] = useState(false);
-  const mounted = useRef(false);
   const isAlbyLNDHubUser = isAlbyLNDHubAccount(
     auth.account?.alias,
     auth.account?.connectorType
@@ -65,190 +37,16 @@ function Receive() {
   const isAlbyUser = isAlbyOAuthUser || isAlbyLNDHubUser;
 
   useEffect(() => {
-    mounted.current = true;
-
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  const [fiatAmount, setFiatAmount] = useState("");
-
-  useEffect(() => {
-    if (formData.amount !== "" && showFiat) {
-      (async () => {
-        const res = await getFormattedFiat(formData.amount);
-        setFiatAmount(res);
-      })();
-    }
-  }, [formData, showFiat, getFormattedFiat]);
-
-  function handleChange(
-    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
-  ) {
-    setFormData({
-      ...formData,
-      [event.target.name]: event.target.value.trim(),
-    });
-  }
-
-  function checkPayment(paymentHash: string) {
-    setPollingForPayment(true);
-    poll({
-      fn: () =>
-        msg.request("checkPayment", { paymentHash }) as Promise<{
-          paid: boolean;
-        }>,
-      validate: (payment) => payment.paid,
-      interval: 3000,
-      maxAttempts: 20,
-      shouldStopPolling: () => !mounted.current,
-    })
-      .then(() => {
-        setPaid(true);
-        auth.fetchAccountInfo(); // Update balance.
-      })
-      .catch((err) => console.error(err))
-      .finally(() => {
-        setPollingForPayment(false);
-      });
-  }
-
-  function setDefaults() {
-    setFormData({
-      amount: "0",
-      description: "",
-      expiration: "",
-    });
-    setPaid(false);
-    setPollingForPayment(false);
-    setInvoice(null);
-  }
-
-  async function createInvoice() {
-    try {
-      setLoadingInvoice(true);
-      const response = await api.makeInvoice({
-        amount: formData.amount,
-        memo: formData.description,
-      });
-      setInvoice(response);
-      checkPayment(response.rHash);
-    } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message);
-      }
-    } finally {
-      setLoadingInvoice(false);
-    }
-  }
-
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    createInvoice();
-  }
-
-  async function getLightningAddress() {
-    setLoadingLightningAddress(true);
-    const response = await api.getAccountInfo();
-    const lightningAddress = response.info.lightning_address;
-    if (lightningAddress) setLightningAddress(lightningAddress);
-    setLoadingLightningAddress(false);
-  }
-
-  useEffect(() => {
-    getLightningAddress();
-  }, []);
-
-  function renderInvoice() {
-    if (!invoice) return null;
-    return (
-      <>
-        <div className="relative p-8 bg-white rounded-lg shadow-sm ring-1 ring-black ring-opacity-5 flex justify-center items-center overflow-hidden">
-          <QRCode
-            value={invoice.paymentRequest.toUpperCase()}
-            level="M"
-            tabIndex={0}
-            aria-label="QR code with the invoice"
-          />
-          {paid && (
-            <div className="absolute inset-0 flex justify-center items-center bg-white/90">
-              <div className="text-center">
-                <div className="inline-block bg-green-bitcoin p-1 rounded-full mb-2">
-                  <CheckIcon className="w-7 h-7 text-white" />
-                </div>
-                <p className="text-lg font-bold">{t("success")}</p>
-              </div>
-            </div>
-          )}
-        </div>
-        {paid && (
-          <div className="my-4">
-            <Button
-              type="submit"
-              label={tCommon("actions.receive_again")}
-              primary
-              fullWidth
-              onClick={() => {
-                setDefaults();
-                navigate("/receive");
-              }}
-            />
-          </div>
-        )}
-        {!paid && (
-          <>
-            <div className="mt-8 mb-4 flex justify-center">
-              <Button
-                onClick={async () => {
-                  try {
-                    navigator.clipboard.writeText(invoice.paymentRequest);
-                    setCopyInvoiceLabel(tCommon("copied"));
-                    setTimeout(() => {
-                      setCopyInvoiceLabel(tCommon("actions.copy_invoice"));
-                    }, 1000);
-                  } catch (e) {
-                    if (e instanceof Error) {
-                      toast.error(e.message);
-                    }
-                  }
-                }}
-                icon={<CopyIcon className="w-6 h-6 mr-2" />}
-                label={copyInvoiceLabel}
-              />
-            </div>
+    (async () => {
+      if (!auth.account) return;
+      const accountInfo = await api.swr.getAccountInfo(auth.account.id);
 
-            <div className="flex justify-center">
-              {pollingForPayment && (
-                <div className="flex items-center space-x-2 dark:text-white">
-                  <Loading />
-                  <span>{t("payment.waiting")}</span>
-                </div>
-              )}
+      const lightningAddress = accountInfo.lightningAddress;
+      if (lightningAddress) setLightningAddress(lightningAddress);
 
-              {!pollingForPayment && (
-                <Button
-                  onClick={() => checkPayment(invoice.rHash)}
-                  label={t("payment.status")}
-                />
-              )}
-            </div>
-          </>
-        )}
-        {paid && (
-          <Confetti
-            width={window.innerWidth}
-            height={window.innerHeight}
-            recycle={false}
-            onConfettiComplete={(confetti) => {
-              confetti && confetti.reset();
-            }}
-            style={{ pointerEvents: "none" }}
-          />
-        )}
-      </>
-    );
-  }
+      setLoadingLightningAddress(false);
+    })();
+  }, [auth.account]);
 
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
@@ -256,7 +54,7 @@ function Receive() {
         headerLeft={
           <IconButton
             onClick={() => {
-              invoice ? setDefaults() : navigate(-1);
+              navigate(-1);
             }}
             icon={<CaretLeftIcon className="w-4 h-4" />}
           />
@@ -264,114 +62,97 @@ function Receive() {
       >
         {t("title")}
       </Header>
-      {invoice ? (
-        <Container maxWidth="sm">{renderInvoice()}</Container>
-      ) : (
-        <div className="pt-4">
-          <form onSubmit={handleSubmit}>
-            <fieldset disabled={loadingInvoice}>
-              <Container justifyBetween maxWidth="sm">
-                <div>
-                  <div className="mb-4">
-                    <DualCurrencyField
-                      id="amount"
-                      min={0}
-                      label={t("amount.label")}
-                      placeholder={t("amount.placeholder")}
-                      fiatValue={fiatAmount}
-                      onChange={handleChange}
-                      autoFocus
-                    />
-                  </div>
 
-                  <div className="mb-4">
-                    <TextField
-                      id="description"
-                      label={t("description.label")}
-                      placeholder={t("description.placeholder")}
-                      onChange={handleChange}
-                    />
+      <div className="pt-4">
+        <Container justifyBetween maxWidth="sm">
+          <div className="flex flex-col gap-2 md:gap-3">
+            {isAlbyOAuthUser && (
+              <div className="bg-white dark:bg-surface-01dp border-gray-200 dark:border-neutral-700 rounded border p-4 flex flex-col justify-center items-center gap-1 text-gray-800 dark:text-neutral-200">
+                <>
+                  <div className="relative flex flex-grid">
+                    <div className="w-32 h-32 md:w-48 md:h-48">
+                      {loadingLightningAddress ? (
+                        <SkeletonLoader className="w-32 h-32 relative -top-1" />
+                      ) : (
+                        <>
+                          <QRCode
+                            className="block md:hidden"
+                            value={`lightning:${lightningAddress}`}
+                            size={128}
+                          />
+                          <QRCode
+                            className="hidden md:block"
+                            value={`lightning:${lightningAddress}`}
+                            size={192}
+                          />
+                        </>
+                      )}
+                      {!auth.accountLoading && auth.account ? (
+                        <Avatar
+                          size={40}
+                          className="border-4 border-white rounded-full absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"
+                          url={auth.account.avatarUrl}
+                          name={auth.account.id}
+                        />
+                      ) : (
+                        auth.accountLoading && (
+                          <SkeletonLoader
+                            circle
+                            opaque={false}
+                            className="w-[40px] h-[40px] border-4 border-white rounded-full absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 opacity-100"
+                          />
+                        )
+                      )}
+                    </div>
                   </div>
-                </div>
-                <Button
-                  type="submit"
-                  label={t("actions.create_invoice")}
-                  fullWidth
-                  primary
-                  loading={loadingInvoice}
-                  disabled={loadingInvoice}
-                />
-              </Container>
-            </fieldset>
-          </form>
-          <div>
-            <Container justifyBetween maxWidth="sm">
-              <div className="relative flex  items-center mb-4">
-                <div className="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
-                <span className="flex-shrink mx-4  text-gray-500 dark:text-gray-400 fw-bold">
-                  {tCommon("or")}
-                </span>
-                <div className="flex-grow border-t  border-gray-300 dark:border-gray-700"></div>
-              </div>
-              <div className="mb-4">
-                <Button
-                  type="button"
-                  label={t("redeem_lnurl")}
-                  fullWidth
-                  onClick={() => {
-                    navigate("/lnurlRedeem");
-                  }}
-                />
+                  <div className="mt-1 text-xs md:text-sm leading-4 font-medium">
+                    {loadingLightningAddress ? (
+                      <SkeletonLoader className="w-40 relative" />
+                    ) : (
+                      <a
+                        className="flex flex-row items-center cursor-pointer"
+                        onClick={() => {
+                          navigator.clipboard.writeText(lightningAddress);
+                          toast.success(tCommon("copied"));
+                        }}
+                      >
+                        {lightningAddress}
+                        <CopyIcon className="w-4 h-4" />
+                      </a>
+                    )}
+                  </div>
+                </>
               </div>
-
-              {isAlbyOAuthUser && (
-                <div className="mb-4">
-                  <Button
-                    type="button"
-                    label={copyLightningAddressLabel}
-                    disabled={loadingLightningAddress}
-                    fullWidth
-                    onClick={async () => {
-                      try {
-                        if (!lightningAddress) {
-                          throw new Error(
-                            "User does not have a lightning address"
-                          );
-                        }
-                        navigator.clipboard.writeText(lightningAddress);
-                        setCopyLightningAddressLabel(tCommon("copied"));
-                        setTimeout(() => {
-                          setCopyLightningAddressLabel(
-                            t("actions.copy_lightning_address")
-                          );
-                        }, 1000);
-                      } catch (e) {
-                        if (e instanceof Error) {
-                          toast.error(e.message);
-                        }
-                      }
-                    }}
-                    icon={<CopyIcon className="w-6 h-6 mr-2" />}
-                  />
-                </div>
-              )}
-
-              {isAlbyUser && (
-                <div className="mb-4">
-                  <Button
-                    type="button"
-                    label={t("receive_via_bitcoin_address")}
-                    fullWidth
-                    onClick={() => {
-                      navigate("/onChainReceive");
-                    }}
-                  />
-                </div>
-              )}
-            </Container>
+            )}
+            <IconLinkCard
+              title={t("actions.invoice.title")}
+              description={t("actions.invoice.description")}
+              icon={<LightningIcon className="w-8" />}
+              onClick={() => {
+                navigate("/receive/invoice");
+              }}
+            />
+            {isAlbyUser && (
+              <IconLinkCard
+                title={t("actions.bitcoin_address.title")}
+                description={t("actions.bitcoin_address.description")}
+                icon={<BitcoinCircleIcon className="w-8" />}
+                onClick={() => {
+                  navigate("/onChainReceive");
+                }}
+              />
+            )}
+            <IconLinkCard
+              title={t("actions.redeem.title")}
+              description={t("actions.redeem.description")}
+              icon={<RedeemIcon className="w-8" />}
+              onClick={() => {
+                navigate("/lnurlRedeem");
+              }}
+            />
           </div>
-        </div>
-      )}
+        </Container>
+      </div>
     </div>
   );
 }
diff --git a/src/app/screens/Receive/index.test.tsx b/src/app/screens/ReceiveInvoice/index.test.tsx
similarity index 95%
rename from src/app/screens/Receive/index.test.tsx
rename to src/app/screens/ReceiveInvoice/index.test.tsx
index ee0ac75f7d..d0a10dbcf0 100644
--- a/src/app/screens/Receive/index.test.tsx
+++ b/src/app/screens/ReceiveInvoice/index.test.tsx
@@ -5,7 +5,7 @@ import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 import { SettingsProvider } from "~/app/context/SettingsContext";
 import api from "~/common/lib/api";
 
-import Receive from "./index";
+import ReceiveInvoice from "../ReceiveInvoice";
 
 jest.mock("~/common/lib/api", () => {
   const original = jest.requireActual("~/common/lib/api");
@@ -31,7 +31,7 @@ describe("Receive", () => {
       render(
         <MemoryRouter>
           <SettingsProvider>
-            <Receive />
+            <ReceiveInvoice />
           </SettingsProvider>
         </MemoryRouter>
       );
diff --git a/src/app/screens/ReceiveInvoice/index.tsx b/src/app/screens/ReceiveInvoice/index.tsx
new file mode 100644
index 0000000000..e0dfe387eb
--- /dev/null
+++ b/src/app/screens/ReceiveInvoice/index.tsx
@@ -0,0 +1,287 @@
+import {
+  CaretLeftIcon,
+  CheckIcon,
+  CopyIcon,
+} from "@bitcoin-design/bitcoin-icons-react/outline";
+import Button from "@components/Button";
+import Container from "@components/Container";
+import Header from "@components/Header";
+import IconButton from "@components/IconButton";
+import Loading from "@components/Loading";
+import DualCurrencyField from "@components/form/DualCurrencyField";
+import TextField from "@components/form/TextField";
+import { useEffect, useRef, useState } from "react";
+import Confetti from "react-confetti";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import QRCode from "~/app/components/QRCode";
+import toast from "~/app/components/Toast";
+import { useAccount } from "~/app/context/AccountContext";
+import { useSettings } from "~/app/context/SettingsContext";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+import { poll } from "~/common/utils/helpers";
+
+function ReceiveInvoice() {
+  const { t } = useTranslation("translation", { keyPrefix: "receive" });
+  const { t: tCommon } = useTranslation("common");
+
+  const auth = useAccount();
+  const {
+    isLoading: isLoadingSettings,
+    settings,
+    getFormattedFiat,
+  } = useSettings();
+  const showFiat = !isLoadingSettings && settings.showFiat;
+
+  const navigate = useNavigate();
+
+  const [formData, setFormData] = useState({
+    amount: "0",
+    description: "",
+    expiration: "",
+  });
+  const [loadingInvoice, setLoadingInvoice] = useState(false);
+  const [invoice, setInvoice] = useState<{
+    paymentRequest: string;
+    rHash: string;
+  } | null>();
+  const [copyInvoiceLabel, setCopyInvoiceLabel] = useState(
+    tCommon("actions.copy_invoice") as string
+  );
+
+  const [paid, setPaid] = useState(false);
+  const [pollingForPayment, setPollingForPayment] = useState(false);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    mounted.current = true;
+
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const [fiatAmount, setFiatAmount] = useState("");
+
+  useEffect(() => {
+    if (formData.amount !== "" && showFiat) {
+      (async () => {
+        const res = await getFormattedFiat(formData.amount);
+        setFiatAmount(res);
+      })();
+    }
+  }, [formData, showFiat, getFormattedFiat]);
+
+  function handleChange(
+    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value.trim(),
+    });
+  }
+
+  function checkPayment(paymentHash: string) {
+    setPollingForPayment(true);
+    poll({
+      fn: () =>
+        msg.request("checkPayment", { paymentHash }) as Promise<{
+          paid: boolean;
+        }>,
+      validate: (payment) => payment.paid,
+      interval: 3000,
+      maxAttempts: 20,
+      shouldStopPolling: () => !mounted.current,
+    })
+      .then(() => {
+        setPaid(true);
+        auth.fetchAccountInfo(); // Update balance.
+      })
+      .catch((err) => console.error(err))
+      .finally(() => {
+        setPollingForPayment(false);
+      });
+  }
+
+  function setDefaults() {
+    setFormData({
+      amount: "0",
+      description: "",
+      expiration: "",
+    });
+    setPaid(false);
+    setPollingForPayment(false);
+    setInvoice(null);
+  }
+
+  async function createInvoice() {
+    try {
+      setLoadingInvoice(true);
+      const response = await api.makeInvoice({
+        amount: formData.amount,
+        memo: formData.description,
+      });
+      setInvoice(response);
+      checkPayment(response.rHash);
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    } finally {
+      setLoadingInvoice(false);
+    }
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    createInvoice();
+  }
+
+  function renderInvoice() {
+    if (!invoice) return null;
+    return (
+      <>
+        <div className="mt-4 relative p-8 bg-white rounded-lg shadow-sm ring-1 ring-black ring-opacity-5 flex justify-center items-center overflow-hidden">
+          <QRCode value={invoice.paymentRequest.toUpperCase()} />
+          {paid && (
+            <div className="absolute inset-0 flex justify-center items-center bg-white/90">
+              <div className="text-center">
+                <div className="inline-block bg-green-bitcoin p-1 rounded-full mb-2">
+                  <CheckIcon className="w-7 h-7 text-white" />
+                </div>
+                <p className="text-lg font-bold">{t("success")}</p>
+              </div>
+            </div>
+          )}
+        </div>
+        {paid && (
+          <div className="mt-4">
+            <Button
+              type="submit"
+              label={tCommon("actions.receive_again")}
+              primary
+              fullWidth
+              onClick={() => {
+                setDefaults();
+                navigate("/receive/invoice");
+              }}
+            />
+          </div>
+        )}
+        {!paid && (
+          <>
+            <div className="mt-8 mb-4 flex justify-center">
+              <Button
+                onClick={async () => {
+                  try {
+                    navigator.clipboard.writeText(invoice.paymentRequest);
+                    setCopyInvoiceLabel(tCommon("copied"));
+                    setTimeout(() => {
+                      setCopyInvoiceLabel(tCommon("actions.copy_invoice"));
+                    }, 1000);
+                  } catch (e) {
+                    if (e instanceof Error) {
+                      toast.error(e.message);
+                    }
+                  }
+                }}
+                icon={<CopyIcon className="w-6 h-6 mr-2" />}
+                label={copyInvoiceLabel}
+                primary
+              />
+            </div>
+
+            <div className="flex justify-center">
+              {pollingForPayment && (
+                <div className="flex items-center space-x-2 dark:text-white">
+                  <Loading />
+                  <span>{t("payment.waiting")}</span>
+                </div>
+              )}
+
+              {!pollingForPayment && (
+                <Button
+                  onClick={() => checkPayment(invoice.rHash)}
+                  label={t("payment.status")}
+                />
+              )}
+            </div>
+          </>
+        )}
+        {paid && (
+          <Confetti
+            width={window.innerWidth}
+            height={window.innerHeight}
+            recycle={false}
+            onConfettiComplete={(confetti) => {
+              confetti && confetti.reset();
+            }}
+            style={{ pointerEvents: "none" }}
+          />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <Header
+        headerLeft={
+          <IconButton
+            onClick={() => {
+              invoice ? setDefaults() : navigate(-1);
+            }}
+            icon={<CaretLeftIcon className="w-4 h-4" />}
+          />
+        }
+      >
+        {t("title")}
+      </Header>
+      {invoice ? (
+        <Container maxWidth="sm">{renderInvoice()}</Container>
+      ) : (
+        <div className="pt-4">
+          <form onSubmit={handleSubmit}>
+            <fieldset disabled={loadingInvoice}>
+              <Container justifyBetween maxWidth="sm">
+                <div>
+                  <div className="mb-4">
+                    <DualCurrencyField
+                      id="amount"
+                      min={0}
+                      label={t("amount.label")}
+                      placeholder={t("amount.placeholder")}
+                      fiatValue={fiatAmount}
+                      onChange={handleChange}
+                      autoFocus
+                    />
+                  </div>
+
+                  <div className="mb-4">
+                    <TextField
+                      id="description"
+                      label={t("description.label")}
+                      placeholder={t("description.placeholder")}
+                      onChange={handleChange}
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="submit"
+                  label={t("actions.create_invoice")}
+                  fullWidth
+                  primary
+                  loading={loadingInvoice}
+                  disabled={loadingInvoice}
+                />
+              </Container>
+            </fieldset>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ReceiveInvoice;
diff --git a/src/app/screens/Send/index.tsx b/src/app/screens/Send/index.tsx
index 4c31a1f3b3..e5f52d95d7 100644
--- a/src/app/screens/Send/index.tsx
+++ b/src/app/screens/Send/index.tsx
@@ -154,7 +154,7 @@ function Send() {
               endAdornment={<QrcodeAdornment route="send" />}
             />
           </div>
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               type="submit"
               label={tCommon("actions.continue")}
diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index 1af9c725ef..3211403022 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -108,6 +108,7 @@ export const swrGetAccountInfo = async (
           connectorType,
           currency: currency || "BTC", // set default currency for every account
           avatarUrl,
+          lightningAddress: response.info.lightning_address,
         };
         storeAccounts({
           ...accountsCache,
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index aa7369206e..4c2960a1dd 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -717,7 +717,18 @@
       "title": "Receive",
       "actions": {
         "create_invoice": "Create Invoice",
-        "copy_lightning_address": "Copy Lightning Address"
+        "invoice": {
+          "title": "Lightning invoice",
+          "description": "Request instant and specific amount payments"
+        },
+        "bitcoin_address": {
+          "title": "Bitcoin address",
+          "description": "Receive via bitcoin address using a swap service"
+        },
+        "redeem": {
+          "title": "Redeem",
+          "description": "Withdraw a bitcoin voucher via LNURL code"
+        }
       },
       "amount": {
         "label": "Amount",
@@ -731,9 +742,7 @@
       "payment": {
         "waiting": "waiting for payment...",
         "status": "Check payment status"
-      },
-      "redeem_lnurl": "Redeem LNURL",
-      "receive_via_bitcoin_address": "Receive via bitcoin address"
+      }
     },
     "on_chain": {
       "title": "Receive via bitcoin address",
@@ -997,6 +1006,7 @@
       "remove": "Remove",
       "copy": "Copy",
       "copy_clipboard": "Copy to clipboard",
+      "copied_to_clipboard": "Copied to clipboard",
       "paste": "Paste",
       "paste_clipboard": "Paste from clipboard",
       "copy_invoice": "Copy Invoice",
diff --git a/src/types.ts b/src/types.ts
index c085284b05..8e1d5e8da5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,6 +44,7 @@ export interface AccountInfo {
   connectorType: ConnectorType;
   currency: ACCOUNT_CURRENCIES;
   avatarUrl?: string;
+  lightningAddress?: string;
 }
 
 export interface MetaData {
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b46456aee..4489242621 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,7 +25,7 @@ const surfaceColor = "#121212";
 module.exports = {
   darkMode: "class",
   content: ["./static/views/**/*.html", "./src/app/**/*.{js,ts,jsx,tsx}"],
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [require("tailwindcss-3d"), require("@tailwindcss/forms")],
   theme: {
     extend: {
       animation: {
diff --git a/tests/e2e/002-walletFeatures.spec.ts b/tests/e2e/002-walletFeatures.spec.ts
index 6fdc687621..5aeb8549d3 100644
--- a/tests/e2e/002-walletFeatures.spec.ts
+++ b/tests/e2e/002-walletFeatures.spec.ts
@@ -56,9 +56,13 @@ test.describe("Wallet features", () => {
 
     await (await findByText($document, "Wallet")).click();
     page.waitForSelector("button");
-    // create invoice
+
+    // goto: receive
     await (await findByText($document, "Receive")).click();
 
+    // goto: receive via lightning invoice
+    await (await findByText($document, "Lightning invoice")).click();
+
     const amountField = await getByLabelText($document, "Amount");
     await amountField.type("888");
 
diff --git a/yarn.lock b/yarn.lock
index c8bec2549a..53717fea3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1227,6 +1227,13 @@
     "@swc/core-win32-ia32-msvc" "1.3.68"
     "@swc/core-win32-x64-msvc" "1.3.68"
 
+"@swc/helpers@0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
+  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+  dependencies:
+    tslib "^2.4.0"
+
 "@swc/jest@^0.2.27":
   version "0.2.27"
   resolved "https://registry.yarnpkg.com/@swc/jest/-/jest-0.2.27.tgz#f6cbd0b6f95cf689c3344c63fc379fa680cdbf52"
@@ -7083,7 +7090,7 @@ lodash.upperfirst@^4.3.1:
   resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
   integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9803,6 +9810,14 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tailwindcss-3d@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-3d/-/tailwindcss-3d-1.0.0.tgz#81dc95a5989c1f00e4063cb04b6fff99c53bcc1c"
+  integrity sha512-weP0xNLA1cd1h9yIzuwn3XQmvDSRJ8sveYavyv4E4ytRXoUsMZhdMVMm7yK0fkc1tRgjFiJp/ytUKgEWRlOPWA==
+  dependencies:
+    "@swc/helpers" "0.5.1"
+    lodash "4.17.21"
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
@@ -10111,6 +10126,11 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tween-functions@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"