diff --git a/.gitignore b/.gitignore
index 94b396d..359f7f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ next-env.d.ts
 
 .pnpm-store/
 .history/*
+.env
diff --git a/app/burn/page.tsx b/app/burn/page.tsx
index 31e5c9c..452162b 100644
--- a/app/burn/page.tsx
+++ b/app/burn/page.tsx
@@ -6,8 +6,10 @@ import { PageContainer } from "@/components/layout/page-container";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, AlertCircle, CheckCircle } from "lucide-react";
 import { useApiOpts } from "@/hooks/use-api";
+import { useApiError } from "@/hooks/use-api-error";
+import { ApiErrorDisplay } from "@/components/ui/api-error-display";
 import * as burnApi from "@/lib/api/burn";
 import type { BurnRecipientAccount } from "@/types/api";
 import { useAuth } from "@/contexts/auth-context";
@@ -15,13 +17,46 @@ import { useStellarWalletsKit } from "@/lib/stellar-wallets-kit";
 import { getWalletSecretAnyLocal } from "@/lib/wallet-storage";
 import { Keypair } from "@stellar/stellar-sdk";
 import { submitBurnRedeemSingleClient } from "@/lib/stellar/burning";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+const burnSchema = z.object({
+  acbuAmount: z.string().refine((val: string) => !isNaN(parseFloat(val)) && parseFloat(val) > 0, {
+    message: "Amount must be greater than 0",
+  }),
+  currency: z.string().length(3, "Currency must be exactly 3 uppercase letters"),
+  accountNumber: z.string()
+    .min(5, "Account number is too short")
+    .max(20, "Account number is too long")
+    .regex(/^\d+$/, "Account number must contain only digits"),
+  bankCode: z.string()
+    .min(3, "Bank code is too short")
+    .max(10, "Bank code is too long")
+    .regex(/^[A-Za-z0-9]+$/, "Bank code must be alphanumeric"),
+  accountName: z.string()
+    .min(3, "Account name is too short")
+    .max(100, "Account name is too long"),
+});
+
+type BurnFormValues = z.infer<typeof burnSchema>;
 
 const formatCurrency = (amount: string, currency: string) => {
   const value = parseFloat(amount);
   if (isNaN(value)) return "";
 
   try {
-    return new Intl.NumberFormat(undefined, {
+    // Use current browser locale for proper grouping separators
+    return new Intl.NumberFormat(navigator.language || 'en-US', {
       style: "currency",
       currency,
     }).format(value);
@@ -34,43 +69,45 @@ export default function BurnPage() {
   const opts = useApiOpts();
   const { userId, stellarAddress } = useAuth();
   const kit = useStellarWalletsKit();
-  const [acbuAmount, setAcbuAmount] = useState("");
-  const [currency, setCurrency] = useState("NGN");
-  const [accountNumber, setAccountNumber] = useState("");
-  const [bankCode, setBankCode] = useState("");
-  const [accountName, setAccountName] = useState("");
-  const [error, setError] = useState("");
+  const { uiError, setApiError, clearError, isSubmitDisabled } = useApiError();
   const [loading, setLoading] = useState(false);
   const [txId, setTxId] = useState<string | null>(null);
 
-  const recipientAccount: BurnRecipientAccount = {
-    account_number: accountNumber.trim(),
-    bank_code: bankCode.trim(),
-    account_name: accountName.trim(),
-    type: "bank",
-  };
+  const form = useForm<BurnFormValues>({
+    resolver: zodResolver(burnSchema),
+    defaultValues: {
+      acbuAmount: "",
+      currency: "NGN",
+      accountNumber: "",
+      bankCode: "",
+      accountName: "",
+    },
+    mode: "onChange",
+  });
 
-  const isValid =
-    acbuAmount &&
-    parseFloat(acbuAmount) > 0 &&
-    currency.length === 3 &&
-    accountNumber.trim().length >= 5 &&
-    accountNumber.trim().length <= 20 &&
-    bankCode.trim().length >= 3 &&
-    bankCode.trim().length <= 10 &&
-    accountName.trim().length >= 3 &&
-    accountName.trim().length <= 100;
+  const values = form.watch();
+  const currency = values.currency || "NGN";
+  const isValid = form.formState.isValid;
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isValid) return;
-    setError("");
+  const handleSubmit = async (data: BurnFormValues) => {
+    clearError();
     setLoading(true);
+    setTxId(null);
+
     try {
       if (!userId) throw new Error("Not signed in");
       if (!stellarAddress) throw new Error("No linked Stellar wallet address.");
+
+      const recipientAccount: BurnRecipientAccount = {
+        account_number: data.accountNumber.trim(),
+        bank_code: data.bankCode.trim(),
+        account_name: data.accountName.trim(),
+        type: "bank",
+      };
+
       const secret = await getWalletSecretAnyLocal(userId, stellarAddress);
       let burnTxHash: string;
+
       if (secret) {
         const localPubKey = Keypair.fromSecret(secret).publicKey();
         if (stellarAddress && localPubKey !== stellarAddress) {
@@ -80,8 +117,8 @@ export default function BurnPage() {
         }
         const submit = await submitBurnRedeemSingleClient({
           userAddress: stellarAddress,
-          amountAcbu: acbuAmount,
-          currency,
+          amountAcbu: data.acbuAmount,
+          currency: data.currency,
           userSecret: secret,
         });
         burnTxHash = submit.transactionHash;
@@ -113,22 +150,24 @@ export default function BurnPage() {
         }
         const submit = await submitBurnRedeemSingleClient({
           userAddress: stellarAddress,
-          amountAcbu: acbuAmount,
-          currency,
+          amountAcbu: data.acbuAmount,
+          currency: data.currency,
           external: { kit, address },
         });
         burnTxHash = submit.transactionHash;
       }
+
       const res = await burnApi.burnAcbu(
-        acbuAmount,
-        currency,
+        data.acbuAmount,
+        data.currency,
         recipientAccount,
         opts,
         burnTxHash,
       );
       setTxId(res.transaction_id);
+      form.reset({ ...data, acbuAmount: "" });
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Burn failed");
+      setApiError(e);
     } finally {
       setLoading(false);
     }
@@ -143,7 +182,7 @@ export default function BurnPage() {
             aria-label="Go back to Mint page" 
             className="flex items-center justify-center min-w-[44px] min-h-[44px] -m-2"
           >
-            <ArrowLeft className="w-5 h-5 text-primary" aria-hidden="true" />
+            <ArrowLeft className="w-5 h-5 text-primary" />
           </Link>
           <h1 className="text-lg font-bold text-foreground">Withdraw (Burn)</h1>
         </div>
@@ -153,151 +192,166 @@ export default function BurnPage() {
           <p className="text-muted-foreground text-sm">
             Burn ACBU and withdraw to your bank or mobile money account.
           </p>
-          {error && (
-            <p className="text-destructive text-sm" role="alert">
-              {error}
-            </p>
+          {uiError && (
+            <ApiErrorDisplay error={uiError} onDismiss={clearError} />
           )}
           {txId && (
-            <p className="text-green-600 text-sm" role="status">
+            <p className="text-green-600 text-sm">
               Transaction submitted: {txId}
             </p>
           )}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label 
-                htmlFor="acbu-amount-input"
-                className="text-sm font-medium text-foreground mb-2 block"
-              >
-                ACBU amount
-              </label>
-              <Input
-                id="acbu-amount-input"
-                name="acbu-amount"
-                type="number"
-                placeholder="0.00"
-                min="0"
-                step="any"
-                value={acbuAmount}
-                onChange={(e) => setAcbuAmount(e.target.value)}
-                className="border-border"
-                aria-describedby="acbu-amount-hint"
-              />
-              <p id="acbu-amount-hint" className="text-xs text-muted-foreground mt-1">
-                Enter the amount of ACBU to burn
+
+          {txId && (
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
+              <CheckCircle className="w-4 h-4 text-green-600 shrink-0 mt-0.5" />
+              <p className="text-green-600 text-sm font-medium">
+                Transaction submitted successfully! ID: {txId}
               </p>
-              {acbuAmount && (
-                <p className="text-sm text-muted-foreground mt-1">
-                  ≈ {formatCurrency(acbuAmount, currency)}
-                </p>
-              )}
             </div>
+          )}
 
-            <div>
-              <label 
-                htmlFor="currency-input"
-                className="text-sm font-medium text-foreground mb-2 block"
-              >
-                Currency (3 letters)
-              </label>
-              <Input
-                id="currency-input"
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="acbuAmount"
+                render={({ field }: { field: any }) => (
+                  <FormItem>
+                    <FormLabel>ACBU amount</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="0.00"
+                        min="0"
+                        step="any"
+                        {...field}
+                        className="border-border"
+                      />
+                    </FormControl>
+                    {field.value && (
+                      <p className="text-sm text-muted-foreground mt-1">
+                        ≈ {formatCurrency(field.value, currency)}
+                      </p>
+                    )}
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
                 name="currency"
-                placeholder="NGN"
-                value={currency}
-                onChange={(e) =>
-                  setCurrency(e.target.value.toUpperCase().slice(0, 3))
-                }
-                className="border-border"
-                maxLength={3}
-                aria-describedby="currency-hint"
+                render={({ field }: { field: any }) => (
+                  <FormItem>
+                    <FormLabel>Currency (3 letters)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="NGN"
+                        {...field}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          const val = e.target.value.toUpperCase().slice(0, 3);
+                          field.onChange(val);
+                        }}
+                        className="border-border"
+                        maxLength={3}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      The target currency for your withdrawal (e.g., NGN, KES).
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <p id="currency-hint" className="text-xs text-muted-foreground mt-1">
-                3-letter currency code (e.g., NGN, USD, EUR)
-              </p>
-            </div>
-            
-            <div>
-              <label 
-                htmlFor="account-number-input"
-                className="text-sm font-medium text-foreground mb-2 block"
-              >
-                Account number
-              </label>
-              <Input
-                id="account-number-input"
-                name="account-number"
-                type="text"
-                inputMode="numeric"
-                pattern="[0-9]*"
-                maxLength={20}
-                placeholder="1234567890"
-                value={accountNumber}
-                onChange={(e) => setAccountNumber(e.target.value.replace(/\D/g, ""))}
-                className="border-border"
-                aria-describedby="account-number-hint"
+
+              <FormField
+                control={form.control}
+                name="accountNumber"
+                render={({ field }: { field: any }) => (
+                  <FormItem>
+                    <FormLabel>Account number</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        inputMode="numeric"
+                        placeholder="1234567890"
+                        {...field}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          const val = e.target.value.replace(/\D/g, "");
+                          field.onChange(val);
+                        }}
+                        className="border-border"
+                        maxLength={20}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {currency === "NGN" ? "Nigerian bank accounts are typically 10 digits." : "Standard bank account number."}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <p id="account-number-hint" className="text-xs text-muted-foreground mt-1">
-                Your bank account number (5-20 digits)
-              </p>
-            </div>
-            
-            <div>
-              <label 
-                htmlFor="bank-code-input"
-                className="text-sm font-medium text-foreground mb-2 block"
-              >
-                Bank code
-              </label>
-              <Input
-                id="bank-code-input"
-                name="bank-code"
-                type="text"
-                maxLength={10}
-                placeholder="Enter bank code"
-                value={bankCode}
-                onChange={(e) => setBankCode(e.target.value.slice(0, 10))}
-                className="border-border"
-                aria-describedby="bank-code-hint"
+
+              <FormField
+                control={form.control}
+                name="bankCode"
+                render={({ field }: { field: any }) => (
+                  <FormItem>
+                    <FormLabel>Bank code</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        placeholder="Enter bank code"
+                        {...field}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          const val = e.target.value.toUpperCase().slice(0, 10);
+                          field.onChange(val);
+                        }}
+                        className="border-border"
+                        maxLength={10}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Sort code, SWIFT/BIC, or local bank routing code.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <p id="bank-code-hint" className="text-xs text-muted-foreground mt-1">
-                Your bank's identification code (3-10 characters)
-              </p>
-            </div>
-            
-            <div>
-              <label 
-                htmlFor="account-name-input"
-                className="text-sm font-medium text-foreground mb-2 block"
-              >
-                Account name
-              </label>
-              <Input
-                id="account-name-input"
-                name="account-name"
-                type="text"
-                maxLength={100}
-                value={accountName}
-                onChange={(e) => setAccountName(e.target.value)}
-                className="border-border"
-                aria-describedby="account-name-hint"
+
+              <FormField
+                control={form.control}
+                name="accountName"
+                render={({ field }: { field: any }) => (
+                  <FormItem>
+                    <FormLabel>Account name</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        placeholder="John Doe"
+                        {...field}
+                        className="border-border"
+                        maxLength={100}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      The official name registered with the bank.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              <p id="account-name-hint" className="text-xs text-muted-foreground mt-1">
-                Full name on the bank account (3-100 characters)
-              </p>
-            </div>
-            
-            <Button
-              type="submit"
-              disabled={!isValid || loading}
-              className="w-full"
-              aria-label="Burn ACBU and withdraw funds"
-            >
-              {loading ? "Submitting..." : "Burn & Withdraw"}
-            </Button>
-          </form>
+              <Button
+                type="submit"
+                disabled={!isValid || loading || isSubmitDisabled}
+                className="w-full"
+              >
+                {loading ? "Submitting..." : "Burn & Withdraw"}
+              </Button>
+            </form>
+          </Form>
         </Card>
       </PageContainer>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/app/help/page.tsx b/app/help/page.tsx
index df7cd1b..cd3c7ba 100644
--- a/app/help/page.tsx
+++ b/app/help/page.tsx
@@ -140,7 +140,7 @@ export default function HelpPage() {
 
           <Accordion type="single" collapsible className="w-full">
             {FAQ_ITEMS.map((item, index) => (
-              <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionItem key={item.question} value={item.question}>
                 <AccordionTrigger className="text-left">
                   {item.question}
                 </AccordionTrigger>
diff --git a/app/mint/page.tsx b/app/mint/page.tsx
index a9aed99..1a0d79c 100644
--- a/app/mint/page.tsx
+++ b/app/mint/page.tsx
@@ -31,6 +31,7 @@ import * as ratesApi from '@/lib/api/rates';
 import * as fiatApi from '@/lib/api/fiat';
 import type { QuoteResponse, RatesResponse } from '@/types/api';
 import { formatAmount } from '@/lib/utils';
+import { submitBurnRedeemSingleClient } from '@/lib/stellar/burning';
 
 const MINT_NETWORK_FEE_TEXT = "Estimated at confirmation";
 const BURN_PROCESSING_FEE_TEXT = "Estimated at confirmation";