diff --git a/package.json b/package.json
index 68c94522..3739d935 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "light-bolt11-decoder": "^3.0.0",
     "nostr-fetch": "^0.12.1",
     "nostr-tools": "^1.13.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81512acc..d35020c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -82,6 +82,9 @@ dependencies:
   nostr-tools:
     specifier: ^1.13.0
     version: 1.13.0
+  qrcode.react:
+    specifier: ^3.1.0
+    version: 3.1.0(react@18.2.0)
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -6168,6 +6171,14 @@ packages:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
 
+  /qrcode.react@3.1.0(react@18.2.0):
+    resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
diff --git a/src/index.css b/src/index.css
index b81750c8..d0e4cd23 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,7 +18,7 @@ button {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
-  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose prose-zinc max-w-none select-text dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index c073d096..1f72120c 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -1,7 +1,11 @@
 import { NostrEvent } from '@nostr-dev-kit/ndk';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import * as Dialog from '@radix-ui/react-dialog';
+import { QRCodeSVG } from 'qrcode.react';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 
-import { ZapIcon } from '@shared/icons';
+import { Button } from '@shared/button';
+import { CancelIcon, ZapIcon } from '@shared/icons';
 
 import { useEvent } from '@utils/hooks/useEvent';
 import { usePublish } from '@utils/hooks/usePublish';
@@ -10,28 +14,185 @@ export function NoteZap({ id }: { id: string }) {
   const { createZap } = usePublish();
   const { data: event } = useEvent(id);
 
-  const submit = async () => {
-    const res = await createZap(event as NostrEvent, 21000);
-    console.log(res);
+  const [amount, setAmount] = useState<null | number>(null);
+  const [invoice, setInvoice] = useState<null | string>(null);
+
+  const selected = (num: number) => {
+    if (amount === num) return true;
+    return false;
+  };
+
+  const createZapRequest = async () => {
+    const res = await createZap(event as NostrEvent, amount);
+    if (res) setInvoice(res);
   };
 
   return (
-    <Tooltip.Root delayDuration={150}>
-      <Tooltip.Trigger asChild>
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
         <button
           type="button"
-          onClick={() => submit()}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
           <ZapIcon className="h-5 w-5 text-zinc-300 group-hover:text-orange-400" />
         </button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-          Tip
-          <Tooltip.Arrow className="fill-zinc-700" />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+        <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow">
+          <Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+            <div className="relative h-min w-full shrink-0 border-b border-zinc-800 px-5 py-3">
+              <div className="flex flex-col items-center gap-1.5">
+                <Dialog.Title className="font-medium leading-none text-zinc-100">
+                  Zap (Beta)
+                </Dialog.Title>
+                <Dialog.Description className="text-sm leading-none text-zinc-400">
+                  Send tip with Bitcoin via Lightning
+                </Dialog.Description>
+              </div>
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="absolute right-3 top-3 inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
+                >
+                  <CancelIcon className="h-4 w-4 text-zinc-300" />
+                </button>
+              </Dialog.Close>
+            </div>
+            <div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
+              {!invoice ? (
+                <>
+                  <div className="grid grid-cols-3 gap-3">
+                    <button
+                      type="button"
+                      onClick={() => setAmount(21000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(21000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        21 sats
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount(69000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(69000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        69 sats
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount(100000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(100000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        100 sats
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount(200000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(200000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        200 sats
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount(500000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(500000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        500 sats
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setAmount(1000000)}
+                      className={twMerge(
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
+                        `${selected(1000000) && 'bg-zinc-800'}`
+                      )}
+                    >
+                      <img
+                        className="h-12 w-12"
+                        src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
+                        alt="High Voltage"
+                      />
+                      <span className="text-sm font-medium leading-none text-zinc-200">
+                        1000 sats
+                      </span>
+                    </button>
+                  </div>
+                  <div className="mt-4 flex w-full">
+                    <Button onClick={() => createZapRequest()} preset="large">
+                      Create invoice
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <div className="mt-3 flex flex-col items-center justify-center gap-4">
+                  <div className="rounded-md bg-white p-3">
+                    <QRCodeSVG value={invoice} size={256} />
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <h3 className="text-lg font-medium leading-none text-zinc-100">
+                      Scan to pay
+                    </h3>
+                    <span className="text-center text-sm text-zinc-400">
+                      You must use Bitcoin wallet which support Lightning
+                      <br />
+                      such as: Blue Wallet, Bitkit, Phoenix,...
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }