diff --git a/apps/web/src/components/offramp/OfframpSuccessModal.tsx b/apps/web/src/components/offramp/OfframpSuccessModal.tsx
index d9e1fdc..9d50669 100644
--- a/apps/web/src/components/offramp/OfframpSuccessModal.tsx
+++ b/apps/web/src/components/offramp/OfframpSuccessModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useEffect } from "react";
-import { CheckCircle2, Copy, ExternalLink, X, Loader2, XCircle, Clock } from "lucide-react";
+import { CheckCircle2, Copy, ExternalLink, X, Loader2, XCircle, Clock, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import toast from "react-hot-toast";
 import type { QuoteStatusData, BridgeFeeBreakdown } from "@/types/offramp";
@@ -45,8 +45,10 @@ export default function OfframpSuccessModal({
 
     if (!isOpen) return null;
 
-    const isCompleted = payoutStatus?.status === "completed" || payoutStatus?.status === "confirmed";
-    const isFailed = payoutStatus?.status === "failed";
+    const status = payoutStatus?.status;
+    const isCompleted = status === "completed" || status === "confirmed";
+    const isFailed = status === "failed" || status === "expired";
+    const isProcessing = status === "pending" || status === "processing" || !status;
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
@@ -57,7 +59,7 @@ export default function OfframpSuccessModal({
             />
 
             {/* Modal */}
-            <div className="relative w-full max-w-md rounded-3xl bg-fundable-mid-dark border border-gray-800 p-8 space-y-8 animate-in fade-in zoom-in-95 duration-300">
+            <div className="relative w-full max-w-md rounded-3xl bg-fundable-mid-dark border border-gray-800 p-8 space-y-6 animate-in fade-in zoom-in-95 duration-300">
                 {/* Close Button */}
                 <button
                     onClick={onClose}
@@ -66,34 +68,45 @@ export default function OfframpSuccessModal({
                     <X className="h-5 w-5" />
                 </button>
 
-                {/* Success Icon */}
+                {/* Status Icon */}
                 <div className="flex justify-center">
-                    <div className={`w-20 h-20 rounded-full flex items-center justify-center ${isCompleted ? "bg-green-500/10" : isFailed ? "bg-red-500/10" : "bg-blue-500/10"}`}>
+                    <div className={`w-20 h-20 rounded-full flex items-center justify-center ${isCompleted ? "bg-green-500/10" : isFailed ? "bg-red-500/10" : "bg-fundable-purple/10"}`}>
                         {isCompleted ? (
                             <CheckCircle2 className="h-10 w-10 text-green-500" />
                         ) : isFailed ? (
                             <XCircle className="h-10 w-10 text-red-500" />
                         ) : (
-                            <Loader2 className="h-10 w-10 text-blue-500 animate-spin" />
+                            <Loader2 className="h-10 w-10 text-fundable-purple animate-spin" />
                         )}
                     </div>
                 </div>
 
-                {/* Title */}
+                {/* Title & Processing Time Banner */}
                 <div className="text-center space-y-2">
                     <h2 className="text-2xl font-syne font-bold text-white">
-                        {isCompleted ? "Offramp Complete! 🎉" : isFailed ? "Offramp Failed" : "Offramp Processing"}
+                        {isCompleted ? "Offramp Complete! 🎉" : isFailed ? "Offramp Failed" : "Processing Transfer"}
                     </h2>
-                    <p className="text-fundable-light-grey text-sm">
+                    
+                    {/* Added: Processing Time Banner for Task #62 */}
+                    {isProcessing && (
+                        <div className="inline-flex items-center gap-2 px-3 py-1 bg-fundable-purple/10 border border-fundable-purple/20 rounded-full">
+                            <Clock size={12} className="text-fundable-purple" />
+                            <span className="text-[10px] font-bold text-fundable-purple uppercase tracking-wider">
+                                Estimated: 2-5 Minutes
+                            </span>
+                        </div>
+                    )}
+
+                    <p className="text-fundable-light-grey text-sm px-4">
                         {isCompleted
                             ? "Your funds have been successfully sent to your bank account."
                             : isFailed
-                                ? payoutStatus?.providerMessage || "There was an issue with your transfer. Please contact support."
-                                : "Your transaction is being processed. You can close this window and check back later."}
+                                ? payoutStatus?.providerMessage || "There was an issue with your transfer."
+                                : "Your transaction is on the way. You can safely close this window."}
                     </p>
                 </div>
 
-                {/* Summary Card */}
+                {/* Summary Card with Exchange Rate */}
                 {feeBreakdown && (
                     <div className="space-y-4 p-5 rounded-2xl bg-fundable-dark border border-gray-800">
                         <div className="flex justify-between items-center text-sm">
@@ -102,33 +115,46 @@ export default function OfframpSuccessModal({
                                 {parseFloat(feeBreakdown.sendAmount).toFixed(4)} USDC
                             </span>
                         </div>
+
+                        {/* Added: Exchange Rate for Transparency */}
+                        <div className="flex justify-between items-center text-[11px]">
+                            <span className="text-gray-500 flex items-center gap-1">
+                                Exchange Rate <Info size={10} />
+                            </span>
+                            <span className="text-gray-400 font-mono">
+                                1 USDC = ₦{(parseFloat(feeBreakdown.fiatPayout) / (parseFloat(feeBreakdown.sendAmount) - parseFloat(feeBreakdown.bridgeFee))).toLocaleString()}
+                            </span>
+                        </div>
+
                         <div className="flex justify-between items-center text-sm">
                             <span className="text-fundable-light-grey">Bridge Fee</span>
-                            <span className="text-red-400">
+                            <span className="text-red-400 font-medium">
                                 -{parseFloat(feeBreakdown.bridgeFee).toFixed(4)} USDC
                             </span>
                         </div>
+                        
                         <div className="h-px bg-gray-800" />
+                        
                         <div className="flex justify-between items-center">
-                            <span className="text-sm font-medium text-white">Total Received</span>
-                            <span className="text-xl font-bold text-green-500">
+                            <span className="text-sm font-medium text-white">Total Payout</span>
+                            <span className="text-2xl font-black text-green-500 tracking-tight">
                                 ₦{parseFloat(feeBreakdown.fiatPayout).toLocaleString()}
                             </span>
                         </div>
                     </div>
                 )}
 
-                {/* Transaction Info */}
-                <div className="space-y-4">
+                {/* Transaction Reference & Explorer */}
+                <div className="space-y-3">
                     {payoutStatus?.transactionReference && (
-                        <div className="bg-fundable-dark p-4 rounded-xl border border-gray-800">
-                            <p className="text-[10px] text-fundable-light-grey uppercase tracking-wider mb-2">Reference ID</p>
-                            <div className="flex items-center justify-between">
-                                <code className="text-xs text-white font-mono">{payoutStatus.transactionReference}</code>
-                                <button onClick={handleCopy} className="text-fundable-purple hover:text-white transition-colors">
-                                    {copied ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-                                </button>
+                        <div className="bg-fundable-dark/50 p-3 rounded-xl border border-gray-800 flex items-center justify-between">
+                            <div className="overflow-hidden">
+                                <p className="text-[9px] text-gray-500 uppercase font-bold tracking-widest mb-1">Ref ID</p>
+                                <code className="text-[10px] text-white font-mono block truncate pr-4">{payoutStatus.transactionReference}</code>
                             </div>
+                            <button onClick={handleCopy} className="p-2 bg-gray-800 rounded-lg text-fundable-purple hover:text-white transition-colors">
+                                {copied ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+                            </button>
                         </div>
                     )}
 
@@ -137,7 +163,7 @@ export default function OfframpSuccessModal({
                             href={`https://stellar.expert/explorer/public/tx/${bridgeTxHash}`}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="flex items-center justify-center gap-2 w-full py-3 text-xs text-fundable-purple hover:text-fundable-violet transition-colors font-medium"
+                            className="flex items-center justify-center gap-2 w-full py-2 text-xs text-fundable-purple hover:underline font-medium"
                         >
                             View Stellar Explorer <ExternalLink className="h-3 w-3" />
                         </a>
@@ -147,7 +173,7 @@ export default function OfframpSuccessModal({
                 {/* Action Button */}
                 <Button
                     onClick={onClose}
-                    className="w-full h-14 rounded-2xl font-bold text-fundable-dark bg-gradient-to-r from-fundable-purple-2 to-purple-500 hover:opacity-90 active:scale-[0.98] transition-all"
+                    className="w-full h-14 rounded-2xl font-bold text-fundable-dark bg-gradient-to-r from-fundable-purple-2 to-purple-500 hover:opacity-90 active:scale-[0.98] transition-all shadow-lg shadow-purple-500/20"
                 >
                     {isCompleted ? "Done" : "Close"}
                 </Button>
diff --git a/apps/web/src/components/offramp/OfframpSummary.tsx b/apps/web/src/components/offramp/OfframpSummary.tsx
index c400d7f..b976ff0 100644
--- a/apps/web/src/components/offramp/OfframpSummary.tsx
+++ b/apps/web/src/components/offramp/OfframpSummary.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
+// Added Clock and ShieldCheck icons
+import { Loader2, Clock, ShieldCheck, Info } from "lucide-react";
 
 import type { OfframpFormState, ProviderRate } from "@/types/offramp";
 import { SUPPORTED_COUNTRIES } from "@/types/offramp";
@@ -33,114 +34,119 @@ export default function OfframpSummary({
 
     const canProceed = isFormValid && quote && !isLoading;
 
+    // Helper to render currency symbols
+    const getCurrencySymbol = () => {
+        if (!selectedCountry) return "";
+        switch (selectedCountry.currency) {
+            case "NGN": return "₦";
+            case "GHS": return "₵";
+            case "KES": return "KSh ";
+            default: return selectedCountry.currency + " ";
+        }
+    };
+
     return (
-        <div className="bg-fundable-mid-dark rounded-2xl p-6 border border-gray-800">
-            <h2 className="text-xl font-syne font-semibold text-white mb-6">
-                Quote Summary
+        <div className="bg-fundable-mid-dark rounded-2xl p-6 border border-gray-800 shadow-xl">
+            <h2 className="text-xl font-syne font-semibold text-white mb-6 flex items-center gap-2">
+                <ShieldCheck className="text-fundable-purple h-5 w-5" />
+                Transaction Summary
             </h2>
 
             <div className="space-y-4">
-                {/* Real-time Quote Info */}
                 {isLoading ? (
-                    <div className="flex items-center justify-center py-8">
-                        <Loader2 className="h-6 w-6 animate-spin text-fundable-purple mr-2" />
-                        <span className="text-fundable-light-grey">Fetching quote...</span>
+                    <div className="flex flex-col items-center justify-center py-12 bg-gray-900/30 rounded-xl border border-dashed border-gray-800">
+                        <Loader2 className="h-8 w-8 animate-spin text-fundable-purple mb-3" />
+                        <span className="text-fundable-light-grey text-sm font-medium">Calculating best rates...</span>
                     </div>
                 ) : quote ? (
-                    <div className="space-y-3">
-                        <div className="flex justify-between text-sm">
-                            <span className="text-fundable-light-grey">You Send</span>
-                            <span className="text-white font-medium">
-                                {quote.cryptoAmount} {formState.token}
-                            </span>
-                        </div>
-                        <div className="flex justify-between text-sm">
-                            <span className="text-fundable-light-grey">Exchange Rate</span>
-                            <span className="text-white">
-                                1 {formState.token} = {quote.currency} {quote.rate?.toLocaleString() ?? "N/A"}
-                            </span>
-                        </div>
-                        <div className="flex justify-between text-sm">
-                            <span className="text-fundable-light-grey">Provider</span>
-                            <span className="text-white capitalize">{quote.displayName}</span>
-                        </div>
-                        {quote.expiresAt && (
+                    <div className="space-y-4">
+                        {/* THE BREAKDOWN CARD */}
+                        <div className="bg-gray-900/50 rounded-xl p-4 border border-gray-800 space-y-3">
                             <div className="flex justify-between text-sm">
-                                <span className="text-fundable-light-grey">Expires At</span>
-                                <span className="text-fundable-purple">
-                                    {new Date(quote.expiresAt).toLocaleTimeString()}
+                                <span className="text-fundable-light-grey">Exchange Rate</span>
+                                <span className="text-white font-mono">
+                                    1 {formState.token} = {quote.currency} {quote.rate?.toLocaleString()}
                                 </span>
                             </div>
-                        )}
+
+                            <div className="flex justify-between text-sm">
+                                <span className="text-fundable-light-grey flex items-center gap-1">
+                                    Service Fee <Info size={12} className="text-gray-500" />
+                                </span>
+                                <span className="text-red-400 font-medium">
+                                    -{quote.fee} {quote.currency}
+                                </span>
+                            </div>
+
+                            {/* ESTIMATED TIME COMPONENT */}
+                            <div className="flex items-center gap-2 mt-2 py-2 px-3 bg-fundable-purple/10 rounded-lg border border-fundable-purple/20">
+                                <Clock className="h-3.5 w-3.5 text-fundable-purple" />
+                                <span className="text-[11px] font-bold text-fundable-purple uppercase tracking-wider">
+                                    Est. Arrival: 2-5 Minutes
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* PROVIDER INFO */}
+                        <div className="flex justify-between text-xs px-1">
+                            <span className="text-fundable-light-grey italic">Provider: {quote.displayName}</span>
+                            {quote.expiresAt && (
+                                <span className="text-amber-500 font-medium">
+                                    Quote expires: {new Date(quote.expiresAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                </span>
+                            )}
+                        </div>
                     </div>
                 ) : quoteError ? (
-                    <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
-                        <p className="text-red-400 text-sm">{quoteError}</p>
+                    <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4">
+                        <p className="text-red-400 text-sm text-center font-medium">{quoteError}</p>
                     </div>
                 ) : (
-                    <div className="space-y-3">
-                        <div className="flex justify-between text-sm">
-                            <span className="text-fundable-light-grey">You Send</span>
-                            <span className="text-white">
-                                {formState.amount || "0"} {formState.token}
-                            </span>
-                        </div>
-                        <div className="flex justify-between text-sm">
-                            <span className="text-fundable-light-grey">Exchange Rate</span>
-                            <span className="text-fundable-light-grey">Enter amount for quote</span>
-                        </div>
+                    <div className="py-6 text-center border border-dashed border-gray-800 rounded-xl">
+                        <p className="text-fundable-light-grey text-sm">Enter an amount to see the fee breakdown</p>
                     </div>
                 )}
 
-                <div className="border-t border-gray-700 pt-4">
-                    <div className="flex justify-between items-center">
-                        <span className="text-fundable-light-grey">You Receive</span>
+                {/* FINAL PAYOUT SECTION */}
+                <div className="border-t border-gray-800 pt-5 mt-2">
+                    <div className="flex justify-between items-center mb-6">
+                        <div>
+                            <span className="text-fundable-light-grey text-sm font-medium tracking-tight">Total Payout</span>
+                            <p className="text-[10px] text-gray-500">Includes all network and provider fees</p>
+                        </div>
                         <div className="text-right">
                             {quote ? (
-                                <>
-                                    <p className="text-2xl font-bold text-white">
-                                        {selectedCountry?.currency === "NGN" ? "₦" :
-                                            selectedCountry?.currency === "GHS" ? "₵" :
-                                                selectedCountry?.currency === "KES" ? "KSh " : ""}
-                                        {quote.fiatAmount?.toLocaleString()}
-                                    </p>
-                                    <p className="text-fundable-light-grey text-xs">
-                                        Fee: {quote.fee} {quote.currency}
-                                    </p>
-                                </>
+                                <p className="text-3xl font-black text-white tracking-tighter">
+                                    {getCurrencySymbol()}
+                                    {quote.fiatAmount?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                                </p>
                             ) : (
-                                <>
-                                    <p className="text-2xl font-bold text-fundable-light-grey">
-                                        {selectedCountry?.currency || "---"}
-                                    </p>
-                                    <p className="text-fundable-light-grey text-sm">
-                                        ---
-                                    </p>
-                                </>
+                                <p className="text-2xl font-bold text-gray-700">
+                                    {selectedCountry?.currency || "---"}
+                                </p>
                             )}
                         </div>
                     </div>
-                </div>
 
-                {/* Proceed Button */}
-                <Button
-                    onClick={onProceed}
-                    disabled={!canProceed}
-                    variant="gradient"
-                    size="lg"
-                    className="w-full h-14 text-lg font-semibold mt-4"
-                >
-                    {isLoading ? (
-                        <>
-                            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                            Loading Quote...
-                        </>
-                    ) : quote ? (
-                        "Proceed to Confirm"
-                    ) : (
-                        "Enter Amount for Quote"
-                    )}
-                </Button>
+                    <Button
+                        onClick={onProceed}
+                        disabled={!canProceed}
+                        variant="gradient"
+                        size="lg"
+                        className="w-full h-14 text-lg font-bold shadow-lg shadow-fundable-purple/10 active:scale-[0.98] transition-all"
+                    >
+                        {isLoading ? (
+                            <>
+                                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                                Processing...
+                            </>
+                        ) : quote ? (
+                            "Confirm Withdrawal"
+                        ) : (
+                            "Verify Amount"
+                        )}
+                    </Button>
+                </div>
             </div>
         </div>
     );