diff --git a/src/components/ZapDialog.tsx b/src/components/ZapDialog.tsx
index 7aff211..fb2709b 100644
--- a/src/components/ZapDialog.tsx
+++ b/src/components/ZapDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -47,6 +47,193 @@ const presetAmounts = [
   { amount: 1000, icon: Rocket },
 ];
 
+interface ZapContentProps {
+  invoice: string | null;
+  amount: number | string;
+  comment: string;
+  isZapping: boolean;
+  qrCodeUrl: string;
+  copied: boolean;
+  hasWebLN: boolean;
+  handleZap: () => void;
+  handleCopy: () => void;
+  openInWallet: () => void;
+  setAmount: (amount: number | string) => void;
+  setComment: (comment: string) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  zap: (amount: number, comment: string) => void;
+}
+
+// Moved ZapContent outside of ZapDialog to prevent re-renders causing focus loss
+const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
+  invoice,
+  amount,
+  comment,
+  isZapping,
+  qrCodeUrl,
+  copied,
+  hasWebLN,
+  handleZap,
+  handleCopy,
+  openInWallet,
+  setAmount,
+  setComment,
+  inputRef,
+  zap,
+}, ref) => (
+  <div ref={ref}>
+    {invoice ? (
+      <div className="flex flex-col h-full min-h-0">
+        {/* Payment amount display */}
+        <div className="text-center">
+          <div className="text-2xl font-bold">{amount} sats</div>
+        </div>
+
+        <Separator className="my-4" />
+
+        <div className="flex flex-col justify-center min-h-0 flex-1">
+          {/* QR Code */}
+          <div className="flex justify-center px-2 sm:px-4">
+            <Card className="p-2 sm:p-4 w-full [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] sm:max-w-sm">
+              <CardContent className="p-0 flex justify-center">
+                {qrCodeUrl ? (
+                  <img
+                    src={qrCodeUrl}
+                    alt="Lightning Invoice QR Code"
+                    className="w-full h-auto aspect-square max-w-full object-contain"
+                  />
+                ) : (
+                  <div className="w-full aspect-square bg-muted animate-pulse rounded" />
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Invoice input */}
+          <div className="space-y-2 mt-4">
+            <Label htmlFor="invoice">Lightning Invoice</Label>
+            <div className="flex gap-2 min-w-0">
+              <Input
+                id="invoice"
+                value={invoice}
+                readOnly
+                className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                onClick={(e) => e.currentTarget.select()}
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleCopy}
+                className="shrink-0"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Payment buttons */}
+          <div className="space-y-3 mt-4">
+            {hasWebLN && (
+              <Button
+                onClick={() => {
+                  const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+                  zap(finalAmount, comment);
+                }}
+                disabled={isZapping}
+                className="w-full"
+                size="lg"
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                {isZapping ? "Processing..." : "Pay with WebLN"}
+              </Button>
+            )}
+
+            <Button
+              variant="outline"
+              onClick={openInWallet}
+              className="w-full"
+              size="lg"
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in Lightning Wallet
+            </Button>
+
+            <div className="text-xs sm:text-[.65rem] text-muted-foreground text-center">
+              Scan the QR code or copy the invoice to pay with any Lightning wallet.
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      <>
+        <div className="grid gap-4 px-4 py-4 w-full overflow-hidden">
+          <ToggleGroup
+            type="single"
+            value={String(amount)}
+            onValueChange={(value) => {
+              if (value) {
+                setAmount(parseInt(value, 10));
+              }
+            }}
+            className="grid grid-cols-5 gap-2 w-full"
+          >
+            {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
+              <ToggleGroupItem
+                key={presetAmount}
+                value={String(presetAmount)}
+                className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
+              >
+                <Icon className="h-5 w-5 mb-1" />
+                <span className="truncate">{presetAmount}</span>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+          <div className="flex items-center gap-2">
+            <div className="h-px flex-1 bg-muted" />
+            <span className="text-xs text-muted-foreground">OR</span>
+            <div className="h-px flex-1 bg-muted" />
+          </div>
+          <Input
+            ref={inputRef}
+            id="custom-amount"
+            type="number"
+            placeholder="Custom amount"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className="w-full"
+          />
+          <Textarea
+            id="custom-comment"
+            placeholder="Custom comment"
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            className="w-full resize-none"
+            rows={3}
+          />
+        </div>
+        <div className="px-4 pb-4">
+          <Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
+            {isZapping ? (
+              'Creating invoice...'
+            ) : (
+              <>
+                <Zap className="h-4 w-4 mr-2" />
+                Zap {amount} sats
+              </>
+            )}
+          </Button>
+        </div>
+      </>
+    )}
+  </div>
+));
+ZapContent.displayName = 'ZapContent';
+
+
 export function ZapDialog({ target, children, className }: ZapDialogProps) {
   const [open, setOpen] = useState(false);
   const { user } = useCurrentUser();
@@ -152,158 +339,22 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
     zap(finalAmount, comment);
   };
 
-  // Shared content component
-  const ZapContent = () => (
-    <>
-      {invoice ? (
-        <div className="flex flex-col h-full min-h-0">
-          {/* Payment amount display */}
-          <div className="text-center">
-            <div className="text-2xl font-bold">{amount} sats</div>
-          </div>
-
-          <Separator className="my-4" />
-
-          <div className="flex flex-col justify-center min-h-0 flex-1">
-            {/* QR Code */}
-            <div className="flex justify-center px-2 sm:px-4">
-              <Card className="p-2 sm:p-4 w-full [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] sm:max-w-sm">
-                <CardContent className="p-0 flex justify-center">
-                  {qrCodeUrl ? (
-                    <img
-                      src={qrCodeUrl}
-                      alt="Lightning Invoice QR Code"
-                      className="w-full h-auto aspect-square max-w-full object-contain"
-                    />
-                  ) : (
-                    <div className="w-full aspect-square bg-muted animate-pulse rounded" />
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* Invoice input */}
-            <div className="space-y-2 mt-4">
-              <Label htmlFor="invoice">Lightning Invoice</Label>
-              <div className="flex gap-2 min-w-0">
-                <Input
-                  id="invoice"
-                  value={invoice}
-                  readOnly
-                  className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
-                  onClick={(e) => e.currentTarget.select()}
-                />
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={handleCopy}
-                  className="shrink-0"
-                >
-                  {copied ? (
-                    <Check className="h-4 w-4 text-green-600" />
-                  ) : (
-                    <Copy className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-
-            {/* Payment buttons */}
-            <div className="space-y-3 mt-4">
-              {hasWebLN && (
-                <Button
-                  onClick={() => {
-                    const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
-                    zap(finalAmount, comment);
-                  }}
-                  disabled={isZapping}
-                  className="w-full"
-                  size="lg"
-                >
-                  <Zap className="h-4 w-4 mr-2" />
-                  {isZapping ? "Processing..." : "Pay with WebLN"}
-                </Button>
-              )}
-
-              <Button
-                variant="outline"
-                onClick={openInWallet}
-                className="w-full"
-                size="lg"
-              >
-                <ExternalLink className="h-4 w-4 mr-2" />
-                Open in Lightning Wallet
-              </Button>
-
-              <div className="text-xs sm:text-[.65rem] text-muted-foreground text-center">
-                Scan the QR code or copy the invoice to pay with any Lightning wallet.
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <>
-          <div className="grid gap-4 px-4 py-4 w-full overflow-hidden">
-            <ToggleGroup
-              type="single"
-              value={String(amount)}
-              onValueChange={(value) => {
-                if (value) {
-                  setAmount(parseInt(value, 10));
-                }
-              }}
-              className="grid grid-cols-5 gap-2 w-full"
-            >
-              {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
-                <ToggleGroupItem
-                  key={presetAmount}
-                  value={String(presetAmount)}
-                  className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
-                >
-                  <Icon className="h-5 w-5 mb-1" />
-                  <span className="truncate">{presetAmount}</span>
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-            <div className="flex items-center gap-2">
-              <div className="h-px flex-1 bg-muted" />
-              <span className="text-xs text-muted-foreground">OR</span>
-              <div className="h-px flex-1 bg-muted" />
-            </div>
-            <Input
-              ref={inputRef}
-              id="custom-amount"
-              type="number"
-              placeholder="Custom amount"
-              value={amount}
-              onChange={(e) => setAmount(e.target.value)}
-              className="w-full"
-            />
-            <Textarea
-              id="custom-comment"
-              placeholder="Custom comment"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              className="w-full resize-none"
-              rows={3}
-            />
-          </div>
-          <div className="px-4 pb-4">
-            <Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
-              {isZapping ? (
-                'Creating invoice...'
-              ) : (
-                <>
-                  <Zap className="h-4 w-4 mr-2" />
-                  Zap {amount} sats
-                </>
-              )}
-            </Button>
-          </div>
-        </>
-      )}
-    </>
-  );
+  const contentProps = {
+    invoice,
+    amount,
+    comment,
+    isZapping,
+    qrCodeUrl,
+    copied,
+    hasWebLN,
+    handleZap,
+    handleCopy,
+    openInWallet,
+    setAmount,
+    setComment,
+    inputRef,
+    zap,
+  };
 
   if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
     return null;
@@ -366,7 +417,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
             </DrawerDescription>
           </DrawerHeader>
           <div className={invoice ? "flex-1 overflow-y-auto px-2 pb-4" : "overflow-y-auto"}>
-            <ZapContent />
+            <ZapContent {...contentProps} />
           </div>
         </DrawerContent>
       </Drawer>
@@ -396,7 +447,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
           </DialogDescription>
         </DialogHeader>
         <div className="overflow-y-auto">
-          <ZapContent />
+          <ZapContent {...contentProps} />
         </div>
       </DialogContent>
     </Dialog>
diff --git a/src/hooks/useZaps.ts b/src/hooks/useZaps.ts
index 9589449..91fdb09 100644
--- a/src/hooks/useZaps.ts
+++ b/src/hooks/useZaps.ts
@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useAppContext } from '@/hooks/useAppContext';
@@ -303,6 +303,10 @@ export function useZaps(
     }
   };
 
+  const resetInvoice = useCallback(() => {
+    setInvoice(null);
+  }, []);
+
   return {
     zaps,
     zapCount,
@@ -312,5 +316,6 @@ export function useZaps(
     isZapping,
     invoice,
     setInvoice,
+    resetInvoice,
   };
 }