diff --git a/apps/machine/src/views/CashInView.vue b/apps/machine/src/views/CashInView.vue
index 49df04b..3316a2c 100644
--- a/apps/machine/src/views/CashInView.vue
+++ b/apps/machine/src/views/CashInView.vue
@@ -3,18 +3,32 @@ import { watch, computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAtmStore } from '@/stores/atm'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Skeleton } from '@/components/ui/skeleton'
 import { Input } from '@/components/ui/input'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import QRCode from '@/components/QRCode.vue'
+import BounceDots from '@/components/BounceDots.vue'
+import StepIndicator from '@/components/StepIndicator.vue'
 
 const router = useRouter()
 const atmStore = useAtmStore()
 const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined
 
+const cashInSteps = ['Insert', 'Scan', 'Done']
+
+const currentStepIndex = computed(() => {
+  switch (nestedState.value) {
+    case 'fetchingRate':
+    case 'insertingBills':
+      return 0
+    case 'generatingNdebit':
+    case 'displayingQR':
+      return 1
+    default:
+      return 2
+  }
+})
+
 // Whether the header cancel button should be visible
 // State machine routes CANCEL to confirmAbandon when bills are present
 const showCancelButton = computed(() => {
@@ -158,13 +172,8 @@ function simulateBill(denomination: number) {
 // Convert npub to hex pubkey if needed
 function normalizePubkey(input: string): string {
   const trimmed = input.trim()
-  // If it's an npub, we'd need to decode it - for now just pass through
-  // In production, use nostr-tools nip19.decode()
   if (trimmed.startsWith('npub1')) {
-    // Simple check - in production decode properly
     console.log('[CashIn] npub detected, would decode in production')
-    // For now, just return as-is and let the CLINK client handle it
-    // TODO: Properly decode npub using nostr-tools
   }
   return trimmed
 }
@@ -206,76 +215,80 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
 
 <template>
   <div class="flex min-h-0 flex-1 flex-col">
-    <!-- Header -->
-    <header class="flex items-center bg-foreground/10 px-4 pb-3 pt-12 sm:px-8 sm:py-4">
-      <Button v-if="showCancelButton" variant="ghost" class="text-muted-foreground" @click="cancel">
+    <!-- Header with success flow accent -->
+    <header
+      class="flex items-center px-8 py-4"
+      style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+    >
+      <Button
+        v-if="showCancelButton"
+        variant="ghost"
+        size="kiosk"
+        class="text-muted-foreground"
+        @click="cancel"
+      >
         ← Cancel
       </Button>
       <div v-else class="w-20"></div>
-      <h2 class="flex-1 text-center text-lg font-semibold sm:text-xl">Buy Bitcoin</h2>
+      <div class="flex flex-1 flex-col items-center gap-2">
+        <h2 class="text-[2.5rem] font-semibold">Buy Bitcoin</h2>
+        <StepIndicator :steps="cashInSteps" :current-step="currentStepIndex" />
+      </div>
       <div class="w-20"></div>
     </header>
 
-    <!-- Content -->
-    <ScrollArea class="min-h-0 flex-1">
-      <main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
-        <!-- Fetching Rate -->
-        <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <p class="text-muted-foreground">Fetching exchange rate...</p>
-          </CardContent>
-        </Card>
+    <!-- Content area -->
+    <main class="flex min-h-0 flex-1">
+      <Transition name="state-fade" mode="out-in">
+        <!-- Fetching Rate (centered) -->
+        <div
+          v-if="nestedState === 'fetchingRate'"
+          key="fetchingRate"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
+        >
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Fetching exchange rate...</p>
+        </div>
 
-        <!-- Inserting Bills -->
-        <Card v-else-if="nestedState === 'insertingBills'" class="w-full max-w-96 border-0 bg-card">
-          <CardHeader class="text-center">
-            <CardTitle>Insert Cash</CardTitle>
-            <CardDescription v-if="context">
+        <!-- Inserting Bills (split-screen) -->
+        <div v-else-if="nestedState === 'insertingBills'" key="insertingBills" class="flex flex-1">
+          <!-- Left panel (52%) — amounts and controls -->
+          <div class="flex w-[52%] flex-col justify-center gap-6 px-[4vw] py-6">
+            <!-- Amount display -->
+            <div v-if="context">
+              <p class="text-[6vh] font-bold text-success leading-tight">
+                {{ atmStore.fiatSymbol }}{{ (context.fiatAmount / 100).toFixed(2) }}
+              </p>
+              <p class="text-[3.5vh] font-semibold text-bitcoin">
+                {{ formatSats(context.satsAmount) }} sats
+              </p>
+            </div>
+
+            <!-- Rate -->
+            <p v-if="context" class="text-xl text-muted-foreground">
               Rate: {{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-6">
-            <!-- Bill Status -->
-            <div v-if="context" class="rounded-lg bg-card p-4">
-              <div class="mb-2 flex justify-between">
-                <span class="text-muted-foreground">Inserted:</span>
-                <span class="text-2xl font-bold text-success"
-                  >{{ atmStore.fiatSymbol }}{{ context.fiatAmount / 100 }}</span
-                >
-              </div>
-              <div class="flex justify-between">
-                <span class="text-muted-foreground">You'll receive:</span>
-                <span class="font-semibold text-bitcoin"
-                  >{{ formatSats(context.satsAmount) }} sats</span
-                >
-              </div>
-            </div>
+            </p>
 
-            <!-- Available balance indicator -->
-            <div
+            <!-- Available balance -->
+            <p
               v-if="context && context.availableBalance > 0"
-              class="flex justify-between text-sm"
+              class="text-xl"
+              :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'"
             >
-              <span class="text-muted-foreground">Available:</span>
-              <span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
-                {{ formatSats(context.availableBalance) }} sats
-              </span>
-            </div>
+              Available: {{ formatSats(context.availableBalance) }} sats
+            </p>
 
-            <!-- Bill Acceptor Status -->
-            <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
+            <!-- Status -->
+            <p v-if="balanceLimitReached" class="text-xl text-muted-foreground">
               Maximum amount reached — press Done to continue
             </p>
-            <p v-else class="text-center text-sm text-muted-foreground">
-              💵 Insert bills into the acceptor
-            </p>
+            <p v-else class="text-xl text-muted-foreground">💵 Insert bills into the acceptor</p>
 
             <!-- Dev: Simulate bill insertion -->
             <Alert v-if="atmStore.debugMode" class="border-destructive/50 bg-destructive/10">
               <AlertDescription>
                 <p class="mb-2 text-xs text-destructive">Dev: Simulate bills</p>
-                <div class="flex flex-wrap justify-center gap-2">
+                <div class="flex flex-wrap gap-2">
                   <Button
                     v-for="denom in [1, 5, 10, 20, 50, 100]"
                     :key="denom"
@@ -291,47 +304,60 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </AlertDescription>
             </Alert>
 
+            <!-- Done button -->
             <Button
               class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-              size="lg"
+              size="kiosk-lg"
               :disabled="!context || context.billsInserted.length === 0"
               @click="finishInserting"
             >
               Done Inserting
             </Button>
-          </CardContent>
-        </Card>
+          </div>
 
-        <!-- Generating NDebit -->
-        <Card
+          <!-- Right panel (48%) — bill visual -->
+          <div class="flex w-[48%] flex-col items-center justify-center gap-6 bg-foreground/5">
+            <span class="text-[14vh] leading-none">💵</span>
+            <p class="text-2xl text-muted-foreground">Feed bills here</p>
+            <p v-if="context" class="text-lg text-muted-foreground">
+              {{ context.billsInserted.length }} bill{{
+                context.billsInserted.length !== 1 ? 's' : ''
+              }}
+              inserted
+            </p>
+          </div>
+        </div>
+
+        <!-- Generating NDebit (centered) -->
+        <div
           v-else-if="nestedState === 'generatingNdebit'"
-          class="w-full max-w-80 border-0 bg-card"
+          key="generatingNdebit"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <span class="animate-hourglass text-5xl">⏳</span>
-            <p class="text-muted-foreground">Preparing your withdraw code...</p>
-          </CardContent>
-        </Card>
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Preparing your withdraw code...</p>
+        </div>
 
-        <!-- Display QR (unified lightning + clink) -->
-        <Card
-          v-else-if="nestedState === 'displayingQR'"
-          class="w-full max-w-[420px] border-0 bg-card"
-        >
-          <CardContent class="pt-6 space-y-5">
-            <!-- Amount Display -->
-            <div class="text-center">
-              <p class="text-lg font-semibold text-success">Scan to receive your sats</p>
-              <p class="text-3xl font-bold text-bitcoin">
-                {{ formatSats(context?.satsAmount || 0) }} sats
-              </p>
-              <p class="text-sm text-muted-foreground">
-                {{ atmStore.fiatSymbol }}{{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
-              </p>
+        <!-- Display QR (split-screen) -->
+        <div v-else-if="nestedState === 'displayingQR'" key="displayingQR" class="flex flex-1">
+          <!-- Left panel (52%) — info -->
+          <div class="flex w-[52%] flex-col items-center justify-center gap-5 px-[4vw]">
+            <p class="text-[2rem] font-semibold text-success">Scan to receive your sats</p>
+            <p class="text-[7vh] font-bold text-bitcoin leading-tight">
+              {{ formatSats(context?.satsAmount || 0) }} sats
+            </p>
+            <p class="text-2xl text-muted-foreground">
+              {{ atmStore.fiatSymbol }}{{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
+            </p>
+
+            <!-- Waiting indicator -->
+            <div class="flex items-center gap-3 pt-4">
+              <BounceDots />
+              <p class="text-xl text-muted-foreground">Waiting for wallet scan...</p>
             </div>
 
-            <!-- Scan with selector (web-ui only — kiosk users just scan) -->
-            <div v-if="!isElectron" class="text-center">
+            <!-- Mode selector (web-ui only) -->
+            <div v-if="!isElectron" class="pt-4 text-center">
               <p class="text-xs text-muted-foreground mb-2">Scan with</p>
               <div class="flex flex-wrap gap-2 justify-center">
                 <Button
@@ -361,42 +387,6 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </div>
             </div>
 
-            <!-- QR Code -->
-            <div class="flex flex-col items-center">
-              <div class="relative">
-                <Skeleton
-                  v-if="isGeneratingLnurl && !context?.ndebitUri"
-                  class="h-[240px] w-[240px] rounded-xl"
-                />
-                <div v-else-if="currentQrValue" class="rounded-xl overflow-hidden">
-                  <QRCode :value="currentQrValue" :size="216" />
-                </div>
-                <div
-                  v-else
-                  class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-muted"
-                >
-                  <p class="text-sm text-muted-foreground">Generating...</p>
-                </div>
-                <!-- Lightning bolt overlay -->
-                <div
-                  v-if="currentQrValue"
-                  class="absolute inset-0 flex items-center justify-center pointer-events-none"
-                >
-                  <div
-                    class="w-12 h-12 rounded-full bg-bitcoin flex items-center justify-center shadow-lg"
-                  >
-                    <span class="text-2xl">⚡</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Waiting for withdraw indicator -->
-            <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
-              <span class="animate-pulse text-lg">📲</span>
-              <p class="text-sm text-muted-foreground">Open your wallet and scan to claim</p>
-            </div>
-
             <!-- Mode label + truncated URI (web-ui only) -->
             <div v-if="!isElectron" class="text-center space-y-1">
               <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
@@ -409,7 +399,7 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
                 }}
               </p>
               <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
-                <code class="text-xs text-muted-foreground truncate max-w-[280px]">
+                <code class="font-mono-code text-xs text-muted-foreground truncate max-w-[280px]">
                   {{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
                 </code>
                 <Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
@@ -419,62 +409,8 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
               </div>
             </div>
 
-            <!-- Alternative: Manual Options (web-ui only, no keyboard on kiosk) -->
-            <details v-if="!isElectron" class="rounded-lg bg-card p-3">
-              <summary class="cursor-pointer text-sm text-muted-foreground">
-                Alternative: Manual withdraw options
-              </summary>
-              <div class="mt-4 space-y-4">
-                <!-- CLINK Debit by pubkey -->
-                <div class="space-y-2">
-                  <p class="text-xs font-medium text-accent">Enter your npub/pubkey:</p>
-                  <div class="flex gap-2">
-                    <Input
-                      v-model="pubkeyInput"
-                      placeholder="npub1... or hex pubkey"
-                      class="flex-1 font-mono text-xs"
-                      :disabled="isProcessing"
-                    />
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      :disabled="!pubkeyInput.trim() || isProcessing"
-                      @click="submitDebitRequest"
-                    >
-                      {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
-                    </Button>
-                  </div>
-                </div>
-
-                <!-- Invoice paste -->
-                <div class="space-y-2">
-                  <p class="text-xs font-medium text-bitcoin">Or paste your invoice:</p>
-                  <div class="flex gap-2">
-                    <Input
-                      v-model="invoiceInput"
-                      placeholder="lnbc... or lntb..."
-                      class="flex-1 font-mono text-xs"
-                      :disabled="isProcessing"
-                    />
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      :disabled="!invoiceInput.trim() || isProcessing"
-                      @click="submitInvoice"
-                    >
-                      {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
-                    </Button>
-                  </div>
-                </div>
-
-                <p v-if="atmStore.paymentError" class="text-xs text-destructive">
-                  Error: {{ atmStore.paymentError }}
-                </p>
-              </div>
-            </details>
-
             <!-- Debug: Simulate payment button -->
-            <div v-if="atmStore.debugMode" class="pt-2 text-center">
+            <div v-if="atmStore.debugMode" class="pt-2">
               <Button
                 variant="ghost"
                 size="sm"
@@ -484,100 +420,186 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
                 Dev: Skip to Success
               </Button>
             </div>
-          </CardContent>
-        </Card>
+          </div>
 
-        <!-- Ask for Receipt -->
-        <Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <div class="text-6xl text-success">✅</div>
-            <CardTitle>Sats Sent!</CardTitle>
-            <p class="text-muted-foreground">Would you like a receipt?</p>
-            <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
-              <p class="text-qr-foreground">📱 Scan npub</p>
+          <!-- Right panel (48%) — QR code -->
+          <div class="flex w-[48%] flex-col items-center justify-center bg-foreground/5 p-6">
+            <div v-if="isGeneratingLnurl && !context?.ndebitUri">
+              <BounceDots class="scale-150" />
             </div>
-            <Button variant="outline" @click="skipReceipt">No Thanks</Button>
-          </CardContent>
-        </Card>
+            <div v-else-if="currentQrValue">
+              <QRCode :value="currentQrValue" :size="380" />
+            </div>
+            <div v-else class="flex flex-col items-center gap-4">
+              <BounceDots class="scale-150" />
+              <p class="text-xl text-muted-foreground">Generating...</p>
+            </div>
+          </div>
+        </div>
 
-        <!-- Sending Receipt -->
-        <Card v-else-if="nestedState === 'sendingReceipt'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <span class="animate-hourglass text-5xl">⏳</span>
-            <p class="text-muted-foreground">Sending receipt...</p>
-          </CardContent>
-        </Card>
-
-        <!-- Complete -->
-        <Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-success/20">
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">🎉</div>
-            <CardTitle class="text-success">Transaction Complete!</CardTitle>
-            <p v-if="context">
-              You received
-              <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
-            </p>
-            <p class="text-muted-foreground">Thank you!</p>
-          </CardContent>
-        </Card>
-
-        <!-- Confirm Abandon Warning -->
-        <Card
+        <!-- Confirm Abandon (centered, destructive accent) -->
+        <div
           v-else-if="nestedState === 'confirmAbandon'"
-          class="w-full max-w-80 border-0 bg-destructive/20"
+          key="confirmAbandon"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--destructive) 8%, var(--background))"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">⚠️</div>
-            <CardTitle class="text-destructive">Cash Already Accepted</CardTitle>
-            <p class="text-muted-foreground">
-              Your {{ atmStore.fiatSymbol
-              }}{{ context ? (context.fiatAmount / 100).toLocaleString() : '' }} has been accepted
-              and cannot be returned. Please scan the QR code to receive your Bitcoin.
-            </p>
-            <Button
-              class="w-full bg-success text-success-foreground"
-              @click="atmStore.send({ type: 'RETRY' })"
-            >
-              Show QR Code Again
-            </Button>
-            <Button variant="ghost" class="w-full text-destructive" @click="cancel">
-              Abandon (lose cash)
-            </Button>
-          </CardContent>
-        </Card>
+          <div class="text-[8vh]">⚠️</div>
+          <h3 class="text-[3rem] font-bold text-destructive">Cash Already Accepted</h3>
+          <p class="max-w-lg text-center text-2xl text-muted-foreground">
+            Your {{ atmStore.fiatSymbol
+            }}{{ context ? (context.fiatAmount / 100).toLocaleString() : '' }} has been accepted and
+            cannot be returned. Please scan the QR code to receive your Bitcoin.
+          </p>
+          <Button
+            class="w-full max-w-md bg-success text-success-foreground"
+            size="kiosk-lg"
+            @click="atmStore.send({ type: 'RETRY' })"
+          >
+            Show QR Code Again
+          </Button>
+          <Button
+            variant="ghost"
+            size="kiosk"
+            class="w-full max-w-md text-destructive"
+            @click="cancel"
+          >
+            Abandon (lose cash)
+          </Button>
+        </div>
 
-        <!-- Error -->
-        <Card
-          v-else-if="nestedState === 'error'"
-          class="w-full max-w-80 border-0 bg-destructive/20"
+        <!-- Ask for Receipt (centered) -->
+        <div
+          v-else-if="nestedState === 'askForReceipt'"
+          key="askForReceipt"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">⚠️</div>
-            <CardTitle class="text-destructive">Error</CardTitle>
-            <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
-            <Button
-              v-if="context && context.billsInserted.length > 0"
-              class="w-full bg-success text-success-foreground"
-              @click="atmStore.send({ type: 'RETRY' })"
+          <div class="text-[8vh] text-success">✅</div>
+          <h3 class="text-[3rem] font-bold">Sats Sent!</h3>
+          <p class="text-2xl text-muted-foreground">Would you like a receipt?</p>
+          <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
+            <p class="text-qr-foreground">📱 Scan npub</p>
+          </div>
+          <Button variant="outline" size="kiosk" @click="skipReceipt">No Thanks</Button>
+        </div>
+
+        <!-- Sending Receipt (centered) -->
+        <div
+          v-else-if="nestedState === 'sendingReceipt'"
+          key="sendingReceipt"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
+        >
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Sending receipt...</p>
+        </div>
+
+        <!-- Complete (centered, success accent) -->
+        <div
+          v-else-if="nestedState === 'complete'"
+          key="complete"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+        >
+          <div class="text-[8vh]">🎉</div>
+          <h3 class="text-[3rem] font-bold text-success">Transaction Complete!</h3>
+          <p v-if="context" class="text-2xl">
+            You received
+            <Badge variant="secondary" class="text-2xl"
+              >{{ formatSats(context.satsAmount) }} sats</Badge
             >
-              Try Again
-            </Button>
-            <Button
-              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
-              @click="cancel"
-            >
-              Return to Start
-            </Button>
-          </CardContent>
-        </Card>
+          </p>
+          <p class="text-2xl text-muted-foreground">Thank you!</p>
+        </div>
+
+        <!-- Error (centered, destructive accent) -->
+        <div
+          v-else-if="nestedState === 'error'"
+          key="error"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--destructive) 8%, var(--background))"
+        >
+          <div class="text-[8vh]">⚠️</div>
+          <h3 class="text-[3rem] font-bold text-destructive">Error</h3>
+          <p class="text-2xl text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
+          <Button
+            v-if="context && context.billsInserted.length > 0"
+            class="w-full max-w-md bg-success text-success-foreground"
+            size="kiosk-lg"
+            @click="atmStore.send({ type: 'RETRY' })"
+          >
+            Try Again
+          </Button>
+          <Button
+            class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
+            size="kiosk"
+            @click="cancel"
+          >
+            Return to Start
+          </Button>
+        </div>
 
         <!-- Fallback -->
-        <Card v-else class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="p-8 text-center">
-            <p class="text-muted-foreground">State: {{ nestedState }}</p>
-          </CardContent>
-        </Card>
-      </main>
-    </ScrollArea>
+        <div v-else key="fallback" class="flex flex-1 items-center justify-center">
+          <p class="text-xl text-muted-foreground">State: {{ nestedState }}</p>
+        </div>
+      </Transition>
+    </main>
+
+    <!-- Manual withdraw options (web-ui only, below main content) -->
+    <details
+      v-if="!isElectron && nestedState === 'displayingQR'"
+      class="mx-8 mb-4 rounded-lg bg-card p-3"
+    >
+      <summary class="cursor-pointer text-sm text-muted-foreground">
+        Alternative: Manual withdraw options
+      </summary>
+      <div class="mt-4 space-y-4">
+        <!-- CLINK Debit by pubkey -->
+        <div class="space-y-2">
+          <p class="text-xs font-medium text-accent">Enter your npub/pubkey:</p>
+          <div class="flex gap-2">
+            <Input
+              v-model="pubkeyInput"
+              placeholder="npub1... or hex pubkey"
+              class="flex-1 font-mono-code text-xs"
+              :disabled="isProcessing"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!pubkeyInput.trim() || isProcessing"
+              @click="submitDebitRequest"
+            >
+              {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
+            </Button>
+          </div>
+        </div>
+
+        <!-- Invoice paste -->
+        <div class="space-y-2">
+          <p class="text-xs font-medium text-bitcoin">Or paste your invoice:</p>
+          <div class="flex gap-2">
+            <Input
+              v-model="invoiceInput"
+              placeholder="lnbc... or lntb..."
+              class="flex-1 font-mono-code text-xs"
+              :disabled="isProcessing"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!invoiceInput.trim() || isProcessing"
+              @click="submitInvoice"
+            >
+              {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
+            </Button>
+          </div>
+        </div>
+
+        <p v-if="atmStore.paymentError" class="text-xs text-destructive">
+          Error: {{ atmStore.paymentError }}
+        </p>
+      </div>
+    </details>
   </div>
 </template>