diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx
index ec161d207..5cca971d8 100644
--- a/src/app/(mobile-ui)/home/page.tsx
+++ b/src/app/(mobile-ui)/home/page.tsx
@@ -33,11 +33,10 @@ import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
 import SetupNotificationsModal from '@/components/Notifications/SetupNotificationsModal'
 import { useNotifications } from '@/hooks/useNotifications'
 import useKycStatus from '@/hooks/useKycStatus'
-import HomeBanners from '@/components/Home/HomeBanners'
+import HomeCarouselCTA from '@/components/Home/HomeCarouselCTA'
 import NoMoreJailModal from '@/components/Global/NoMoreJailModal'
 import EarlyUserModal from '@/components/Global/EarlyUserModal'
-import { STAR_STRAIGHT_ICON } from '@/assets'
-import Image from 'next/image'
+import InvitesIcon from '@/components/Home/InvitesIcon'
 import NavigationArrow from '@/components/Global/NavigationArrow'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
@@ -199,9 +198,9 @@ export default function Home() {
             showNoMoreJailModal !== 'true' &&
             !user?.showEarlyUserModal // Give Early User and No more jail modal precedence, showing two modals together isn't ideal and it messes up their functionality
 
-        if (shouldShow) {
+        if (shouldShow && !showAddMoneyPromptModal) {
+            // Only set state, don't set sessionStorage here to avoid race conditions
             setShowAddMoneyPromptModal(true)
-            sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
         } else if (showAddMoneyPromptModal && showPermissionModal) {
             // priority enforcement: hide add money modal if notification modal appears
             // this handles race conditions where both modals try to show simultaneously
@@ -219,6 +218,13 @@ export default function Home() {
         address,
     ])
 
+    // Set sessionStorage flag when modal becomes visible to prevent showing again
+    useEffect(() => {
+        if (showAddMoneyPromptModal) {
+            sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
+        }
+    }, [showAddMoneyPromptModal])
+
     if (isLoading) {
         return <PeanutLoading coverFullScreen />
     }
@@ -228,9 +234,9 @@ export default function Home() {
             <div className="h-full w-full space-y-6 p-5">
                 <div className="flex items-center justify-between gap-2">
                     <UserHeader username={username!} fullName={userFullName} isVerified={isUserKycApproved} />
-                    <Link href="/points" className="flex items-center gap-2">
-                        <Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
-                        <span className="whitespace-nowrap text-sm font-semibold md:text-base">Points</span>
+                    <Link href="/points" className="flex items-center gap-0">
+                        <InvitesIcon />
+                        <span className="whitespace-nowrap pl-1 text-sm font-semibold md:text-base">Points</span>
                         <NavigationArrow size={16} className="fill-black" />
                     </Link>
                     {/* <NotificationNavigation /> */}
@@ -260,7 +266,7 @@ export default function Home() {
                     </ActionButtonGroup>
                 </div>
 
-                <HomeBanners />
+                <HomeCarouselCTA />
 
                 {showPermissionModal && <SetupNotificationsModal />}
 
diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx
index daddc3cf6..e94e288ba 100644
--- a/src/app/(mobile-ui)/qr-pay/page.tsx
+++ b/src/app/(mobile-ui)/qr-pay/page.tsx
@@ -18,6 +18,7 @@ import TokenAmountInput from '@/components/Global/TokenAmountInput'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { clearRedirectUrl, getRedirectUrl, isTxReverted, saveRedirectUrl, formatNumberForDisplay } from '@/utils'
 import { getShakeClass, type ShakeIntensity } from '@/utils/perk.utils'
+import { calculateSavingsInCents, isArgentinaMantecaQrPayment, getSavingsMessage } from '@/utils/qr-payment.utils'
 import ErrorAlert from '@/components/Global/ErrorAlert'
 import { PEANUT_WALLET_TOKEN_DECIMALS, TRANSACTIONS, PERK_HOLD_DURATION_MS } from '@/constants'
 import { MANTECA_DEPOSIT_ADDRESS } from '@/constants/manteca.consts'
@@ -41,6 +42,9 @@ import { useQueryClient } from '@tanstack/react-query'
 import { shootDoubleStarConfetti } from '@/utils/confetti'
 import { STAR_STRAIGHT_ICON } from '@/assets'
 import { useAuth } from '@/context/authContext'
+import { PointsAction } from '@/services/services.types'
+import { usePointsConfetti } from '@/hooks/usePointsConfetti'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import type { HistoryEntry } from '@/hooks/useTransactionHistory'
 import { completeHistoryEntry } from '@/utils/history.utils'
@@ -313,6 +317,17 @@ export default function QRPayPage() {
         }
     }, [paymentProcessor, simpleFiPayment, paymentLock?.code, paymentLock?.paymentAgainstAmount, amount])
 
+    // Fetch points early to avoid latency penalty - fetch as soon as we have usdAmount
+    // This way points are cached by the time success view shows
+    // Only Manteca QR payments give points (SimpleFi does not)
+    // Use timestamp as uniqueId to prevent cache collisions between different QR scans
+    const { pointsData, pointsDivRef } = usePointsCalculation(
+        PointsAction.MANTECA_QR_PAYMENT,
+        usdAmount,
+        paymentProcessor === 'MANTECA',
+        timestamp || undefined
+    )
+
     const methodIcon = useMemo(() => {
         switch (qrType) {
             case EQrType.MERCADO_PAGO:
@@ -716,6 +731,12 @@ export default function QRPayPage() {
 
     // Check user balance
     useEffect(() => {
+        // Skip balance check on success screen (balance may not have updated yet)
+        if (isSuccess) {
+            setBalanceErrorMessage(null)
+            return
+        }
+
         // Skip balance check if transaction is being processed
         if (hasPendingTransactions || isWaitingForWebSocket) {
             return
@@ -733,13 +754,16 @@ export default function QRPayPage() {
         } else {
             setBalanceErrorMessage(null)
         }
-    }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket])
+    }, [usdAmount, balance, hasPendingTransactions, isWaitingForWebSocket, isSuccess])
+
+    // Use points confetti hook for animation - must be called unconditionally
+    usePointsConfetti(isSuccess && pointsData?.estimatedPoints ? pointsData.estimatedPoints : undefined, pointsDivRef)
 
     useEffect(() => {
         if (isSuccess) {
             queryClient.invalidateQueries({ queryKey: [TRANSACTIONS] })
         }
-    }, [isSuccess])
+    }, [isSuccess, queryClient])
 
     const handleSimplefiRetry = useCallback(async () => {
         setShowOrderNotReadyModal(false)
@@ -947,6 +971,11 @@ export default function QRPayPage() {
     if (isSuccess && paymentProcessor === 'MANTECA' && !qrPayment) {
         return null
     } else if (isSuccess && paymentProcessor === 'MANTECA' && qrPayment) {
+        // Calculate savings for Argentina Manteca QR payments only
+        const savingsInCents = calculateSavingsInCents(usdAmount)
+        const showSavingsMessage = savingsInCents > 0 && isArgentinaMantecaQrPayment(qrType, paymentProcessor)
+        const savingsMessage = showSavingsMessage ? getSavingsMessage(savingsInCents) : ''
+
         return (
             <div className={`flex min-h-[inherit] flex-col gap-8 ${getShakeClass(isShaking, shakeIntensity)}`}>
                 <SoundPlayer sound="success" />
@@ -976,6 +1005,10 @@ export default function QRPayPage() {
                                 <div className="text-lg font-bold">
                                     ≈ {formatNumberForDisplay(usdAmount ?? undefined, { maxDecimals: 2 })} USD
                                 </div>
+                                {/* Savings Message (Argentina Manteca only) */}
+                                {showSavingsMessage && savingsMessage && (
+                                    <p className="text-sm italic text-grey-1">{savingsMessage}</p>
+                                )}
                             </div>
                         </Card>
                     )}
@@ -1028,6 +1061,17 @@ export default function QRPayPage() {
                         </Card>
                     )}
 
+                    {/* Points Display - ref used for confetti origin point */}
+                    {pointsData?.estimatedPoints && (
+                        <div ref={pointsDivRef} className="flex justify-center gap-2">
+                            <Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
+                            <p className="text-sm font-medium text-black">
+                                You&apos;ve earned {pointsData.estimatedPoints}{' '}
+                                {pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
+                            </p>
+                        </div>
+                    )}
+
                     <div className="w-full space-y-5">
                         {/* Show Claim Perk button if eligible and not claimed yet */}
                         {qrPayment?.perk?.eligible && !perkClaimed && !qrPayment.perk.claimed ? (
@@ -1153,6 +1197,7 @@ export default function QRPayPage() {
                             </div>
                         </div>
                     </Card>
+
                     <div className="w-full space-y-5">
                         <Button
                             onClick={() => {
diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index d9ec886cf..2a0072c82 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,11 +1,38 @@
 'use client'
 
+import { useState, useEffect } from 'react'
+import { useCrispUserData } from '@/hooks/useCrispUserData'
+import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+
 const SupportPage = () => {
+    const userData = useCrispUserData()
+    const crispProxyUrl = useCrispProxyUrl(userData)
+    const [isLoading, setIsLoading] = useState(true)
+
+    useEffect(() => {
+        // Listen for ready message from proxy iframe
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
+
+            if (event.data.type === 'CRISP_READY') {
+                setIsLoading(false)
+            }
+        }
+
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [])
+
     return (
-        <iframe
-            src="https://go.crisp.chat/chat/embed/?website_id=916078be-a6af-4696-82cb-bc08d43d9125"
-            className="h-full w-full md:max-w-[90%] md:pl-24"
-        />
+        <div className="relative h-full w-full md:max-w-[90%] md:pl-24">
+            {isLoading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                    <PeanutLoading />
+                </div>
+            )}
+            <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+        </div>
     )
 }
 
diff --git a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
index 022831137..9cfac792a 100644
--- a/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx
@@ -22,9 +22,8 @@ import { createOfframp, confirmOfframp } from '@/app/actions/offramp'
 import { useAuth } from '@/context/authContext'
 import ExchangeRate from '@/components/ExchangeRate'
 import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
-import { useQuery } from '@tanstack/react-query'
-import { pointsApi } from '@/services/points'
 import { PointsAction } from '@/services/services.types'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
 import { useSearchParams } from 'next/navigation'
 import { parseUnits } from 'viem'
 
@@ -61,16 +60,12 @@ export default function WithdrawBankPage() {
     )?.currencyCode
 
     // Calculate points API call
-    const { data: pointsData } = useQuery({
-        queryKey: ['calculate-points', 'withdraw', bankAccount?.id, amountToWithdraw],
-        queryFn: () =>
-            pointsApi.calculatePoints({
-                actionType: PointsAction.BRIDGE_TRANSFER,
-                usdAmount: Number(amountToWithdraw),
-            }),
-        enabled: !!(user?.user.userId && amountToWithdraw && bankAccount),
-        refetchOnWindowFocus: false,
-    })
+    const { pointsData } = usePointsCalculation(
+        PointsAction.BRIDGE_TRANSFER,
+        amountToWithdraw,
+        !!(amountToWithdraw && bankAccount),
+        bankAccount?.id
+    )
 
     // non-eur sepa countries that are currently experiencing issues
     const isNonEuroSepaCountry = !!(
diff --git a/src/app/(mobile-ui)/withdraw/manteca/page.tsx b/src/app/(mobile-ui)/withdraw/manteca/page.tsx
index 3a7634b42..703a83f65 100644
--- a/src/app/(mobile-ui)/withdraw/manteca/page.tsx
+++ b/src/app/(mobile-ui)/withdraw/manteca/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useWallet } from '@/hooks/wallet/useWallet'
-import { useState, useMemo, useContext, useEffect, useCallback } from 'react'
+import { useState, useMemo, useContext, useEffect, useCallback, useRef, useId } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/0_Bruddle/Button'
 import { Card } from '@/components/0_Bruddle/Card'
@@ -41,6 +41,10 @@ import { useQueryClient } from '@tanstack/react-query'
 import { captureException } from '@sentry/nextjs'
 import useKycStatus from '@/hooks/useKycStatus'
 import { usePendingTransactions } from '@/hooks/wallet/usePendingTransactions'
+import { PointsAction } from '@/services/services.types'
+import { usePointsConfetti } from '@/hooks/usePointsConfetti'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
+import STAR_STRAIGHT_ICON from '@/assets/icons/starStraight.svg'
 
 type MantecaWithdrawStep = 'amountInput' | 'bankDetails' | 'review' | 'success' | 'failure'
 
@@ -48,6 +52,7 @@ const MAX_WITHDRAW_AMOUNT = '2000'
 const MIN_WITHDRAW_AMOUNT = '1'
 
 export default function MantecaWithdrawFlow() {
+    const flowId = useId() // Unique ID per flow instance to prevent cache collisions
     const [amount, setAmount] = useState<string | undefined>(undefined)
     const [currencyAmount, setCurrencyAmount] = useState<string | undefined>(undefined)
     const [usdAmount, setUsdAmount] = useState<string | undefined>(undefined)
@@ -290,11 +295,18 @@ export default function MantecaWithdrawFlow() {
         }
     }, [usdAmount, balance, hasPendingTransactions])
 
+    // Fetch points early to avoid latency penalty - fetch as soon as we have usdAmount
+    // Use flowId as uniqueId to prevent cache collisions between different withdrawal flows
+    const { pointsData, pointsDivRef } = usePointsCalculation(PointsAction.MANTECA_TRANSFER, usdAmount, true, flowId)
+
+    // Use points confetti hook for animation - must be called unconditionally
+    usePointsConfetti(step === 'success' ? pointsData?.estimatedPoints : undefined, pointsDivRef)
+
     useEffect(() => {
         if (step === 'success') {
             queryClient.invalidateQueries({ queryKey: [TRANSACTIONS] })
         }
-    }, [step])
+    }, [step, queryClient])
 
     if (isCurrencyLoading || !currencyPrice || !selectedCountry) {
         return <PeanutLoading />
@@ -323,6 +335,18 @@ export default function MantecaWithdrawFlow() {
                             <h1 className="text-sm font-normal text-grey-1">to {destinationAddress}</h1>
                         </div>
                     </Card>
+
+                    {/* Points Display - ref used for confetti origin point */}
+                    {pointsData?.estimatedPoints && (
+                        <div ref={pointsDivRef} className="flex justify-center gap-2">
+                            <Image src={STAR_STRAIGHT_ICON} alt="star" width={20} height={20} />
+                            <p className="text-sm font-medium text-black">
+                                You&apos;ve earned {pointsData.estimatedPoints}{' '}
+                                {pointsData.estimatedPoints === 1 ? 'point' : 'points'}!
+                            </p>
+                        </div>
+                    )}
+
                     <div className="w-full space-y-5">
                         <Button
                             onClick={() => {
diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx
index 6981d257e..af94bb4a5 100644
--- a/src/app/[...recipient]/client.tsx
+++ b/src/app/[...recipient]/client.tsx
@@ -33,9 +33,8 @@ import NavHeader from '@/components/Global/NavHeader'
 import { ReqFulfillBankFlowManager } from '@/components/Request/views/ReqFulfillBankFlowManager'
 import SupportCTA from '@/components/Global/SupportCTA'
 import { BankRequestType, useDetermineBankRequestType } from '@/hooks/useDetermineBankRequestType'
-import { useQuery } from '@tanstack/react-query'
-import { pointsApi } from '@/services/points'
 import { PointsAction } from '@/services/services.types'
+import { usePointsCalculation } from '@/hooks/usePointsCalculation'
 
 export type PaymentFlow = 'request_pay' | 'external_wallet' | 'direct_pay' | 'withdraw'
 interface Props {
@@ -81,22 +80,17 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
     // For direct_pay: calculate on STATUS (after payment completes)
 
     const shouldFetchPoints =
-        user?.user.userId &&
         usdAmount &&
         chargeDetails?.uuid &&
         ((flow === 'request_pay' && currentView === 'CONFIRM') || (flow === 'direct_pay' && currentView === 'STATUS'))
 
-    const { data: pointsData } = useQuery({
-        queryKey: ['calculate-points', chargeDetails?.uuid, flow],
-        queryFn: () =>
-            pointsApi.calculatePoints({
-                actionType: PointsAction.P2P_REQUEST_PAYMENT,
-                usdAmount: Number(usdAmount),
-                otherUserId: chargeDetails?.requestLink.recipientAccount.userId,
-            }),
-        enabled: !!shouldFetchPoints,
-        refetchOnWindowFocus: false,
-    })
+    const { pointsData } = usePointsCalculation(
+        PointsAction.P2P_REQUEST_PAYMENT,
+        usdAmount,
+        !!shouldFetchPoints,
+        chargeDetails?.uuid,
+        chargeDetails?.requestLink.recipientAccount.userId
+    )
 
     // determine if the current user is the recipient of the transaction
     const isCurrentUserRecipient = chargeDetails?.requestLink.recipientAccount?.userId === user?.user.userId
diff --git a/src/app/crisp-proxy/page.tsx b/src/app/crisp-proxy/page.tsx
new file mode 100644
index 000000000..2fb31cf38
--- /dev/null
+++ b/src/app/crisp-proxy/page.tsx
@@ -0,0 +1,159 @@
+'use client'
+
+import Script from 'next/script'
+import { useEffect, Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { CRISP_WEBSITE_ID } from '@/constants/crisp'
+
+/**
+ * Crisp Proxy Page - Same-origin iframe solution for embedded Crisp chat
+ *
+ * This page loads the Crisp widget in full-screen mode and is embedded as an iframe
+ * from SupportDrawer and SupportPage. By being same-origin, we avoid CORS issues
+ * and can fully control the Crisp instance via JavaScript.
+ *
+ * User data flows via URL parameters and is set during Crisp initialization,
+ * following Crisp's recommended pattern for iframe embedding with JS SDK control.
+ */
+function CrispProxyContent() {
+    const searchParams = useSearchParams()
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            ;(window as any).CRISP_RUNTIME_CONFIG = {
+                lock_maximized: true,
+                lock_full_view: true,
+                cross_origin_cookies: true, // Essential for session persistence in iframes
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        const email = searchParams.get('user_email')
+        const nickname = searchParams.get('user_nickname')
+        const avatar = searchParams.get('user_avatar')
+        const sessionDataJson = searchParams.get('session_data')
+        const prefilledMessage = searchParams.get('prefilled_message')
+
+        const notifyParentReady = () => {
+            if (window.parent !== window) {
+                window.parent.postMessage(
+                    {
+                        type: 'CRISP_READY',
+                    },
+                    window.location.origin
+                )
+            }
+        }
+
+        const setAllData = () => {
+            if (!window.$crisp) return false
+
+            // Check sessionStorage for reset flag (set during logout)
+            const needsReset = sessionStorage.getItem('crisp_needs_reset')
+            if (needsReset === 'true') {
+                window.$crisp.push(['do', 'session:reset'])
+                sessionStorage.removeItem('crisp_needs_reset')
+            }
+
+            // Set user identification
+            if (email) {
+                window.$crisp.push(['set', 'user:email', [email]])
+            }
+            if (nickname) {
+                window.$crisp.push(['set', 'user:nickname', [nickname]])
+            }
+            if (avatar) {
+                window.$crisp.push(['set', 'user:avatar', [avatar]])
+            }
+
+            // Set session metadata for support agents
+            if (sessionDataJson) {
+                try {
+                    const data = JSON.parse(sessionDataJson)
+                    const sessionDataArray = [
+                        [
+                            ['username', data.username || ''],
+                            ['user_id', data.user_id || ''],
+                            ['full_name', data.full_name || ''],
+                            ['grafana_dashboard', data.grafana_dashboard || ''],
+                            ['wallet_address', data.wallet_address || ''],
+                            ['bridge_user_id', data.bridge_user_id || ''],
+                            ['manteca_user_id', data.manteca_user_id || ''],
+                        ],
+                    ]
+                    window.$crisp.push(['set', 'session:data', sessionDataArray])
+                } catch (e) {
+                    console.error('[Crisp] Failed to parse session_data:', e)
+                }
+            }
+
+            if (prefilledMessage) {
+                window.$crisp.push(['set', 'message:text', [prefilledMessage]])
+            }
+
+            // Wait for Crisp to be fully ready (session loaded and UI rendered)
+            window.$crisp.push(['on', 'session:loaded', notifyParentReady])
+
+            // Fallback: notify after a delay if session:loaded doesn't fire
+            setTimeout(notifyParentReady, 1500)
+
+            return true
+        }
+
+        // Initialize data once Crisp loads
+        if (window.$crisp) {
+            setAllData()
+        } else {
+            const checkCrisp = setInterval(() => {
+                if (window.$crisp) {
+                    setAllData()
+                    clearInterval(checkCrisp)
+                }
+            }, 100)
+
+            setTimeout(() => clearInterval(checkCrisp), 5000)
+        }
+
+        // Listen for reset messages from parent window
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
+
+            if (event.data.type === 'CRISP_RESET_SESSION' && window.$crisp) {
+                window.$crisp.push(['do', 'session:reset'])
+            }
+        }
+
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [searchParams])
+
+    return (
+        <div className="h-full w-full">
+            <Script strategy="afterInteractive" id="crisp-proxy-widget">
+                {`
+                    window.$crisp=[];
+                    window.CRISP_WEBSITE_ID="${CRISP_WEBSITE_ID}";
+                    (function(){
+                        d=document;
+                        s=d.createElement("script");
+                        s.src="https://client.crisp.chat/l.js";
+                        s.async=1;
+                        d.getElementsByTagName("head")[0].appendChild(s);
+                    })();
+                    window.$crisp.push(["safe", true]);
+                `}
+            </Script>
+        </div>
+    )
+}
+
+export default function CrispProxyPage() {
+    return (
+        <Suspense fallback={<div className="h-full w-full" />}>
+            <CrispProxyContent />
+        </Suspense>
+    )
+}
diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx
index 6ec704230..bb891a05d 100644
--- a/src/components/Common/ActionList.tsx
+++ b/src/components/Common/ActionList.tsx
@@ -33,6 +33,7 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { ActionListCard } from '../ActionListCard'
 import { useGeoFilteredPaymentOptions } from '@/hooks/useGeoFilteredPaymentOptions'
 import { tokenSelectorContext } from '@/context'
+import SupportCTA from '../Global/SupportCTA'
 
 interface IActionListProps {
     flow: 'claim' | 'request'
@@ -314,6 +315,7 @@ export default function ActionList({
                     )
                 })}
             </div>
+            {flow === 'claim' && !isLoggedIn && <SupportCTA />}
             <ActionModal
                 visible={showMinAmountError}
                 onClose={() => setShowMinAmountError(false)}
diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
index f2084d91b..2dd6106b2 100644
--- a/src/components/CrispChat.tsx
+++ b/src/components/CrispChat.tsx
@@ -1,11 +1,14 @@
 'use client'
 
-import Script from 'next/script'
-import { useEffect } from 'react'
 import { useSupportModalContext } from '@/context/SupportModalContext'
-import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { setCrispUserData } from '@/utils/crisp'
 
+/**
+ * Button component that opens the support drawer
+ *
+ * The support UI is rendered via SupportDrawer component (iframe proxy approach)
+ * rather than the native Crisp widget to maintain better UX control and avoid
+ * page layout interference.
+ */
 export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => {
     const { setIsSupportModalOpen } = useSupportModalContext()
 
@@ -19,55 +22,3 @@ export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButt
         </button>
     )
 }
-
-export default function CrispChat() {
-    const userData = useCrispUserData()
-
-    useEffect(() => {
-        // Only set user data if we have a username
-        if (!userData.username || typeof window === 'undefined') return
-
-        // Wait for Crisp to be fully loaded
-        const setData = () => {
-            if (window.$crisp) {
-                setCrispUserData(window.$crisp, userData)
-            }
-        }
-
-        // Try to set immediately
-        setData()
-
-        // Also listen for Crisp session loaded event
-        if (window.$crisp) {
-            window.$crisp.push(['on', 'session:loaded', setData])
-        }
-
-        // Fallback: try again after a delay
-        const timer = setTimeout(setData, 2000)
-
-        return () => {
-            clearTimeout(timer)
-            if (window.$crisp) {
-                window.$crisp.push(['off', 'session:loaded', setData])
-            }
-        }
-    }, [userData])
-
-    // thought: we need to version pin this script
-    return (
-        <Script strategy="afterInteractive">
-            {`
-        window.$crisp=[];
-        window.CRISP_WEBSITE_ID="916078be-a6af-4696-82cb-bc08d43d9125";
-        (function(){
-          d=document;
-          s=d.createElement("script");
-          s.src="https://client.crisp.chat/l.js";
-          s.async=1;
-          d.getElementsByTagName("head")[0].appendChild(s);
-        })();
-        window.$crisp.push(["safe", true]);
-      `}
-        </Script>
-    )
-}
diff --git a/src/components/Global/Slider/index.tsx b/src/components/Global/Slider/index.tsx
index ca4445da9..0dc48a0bc 100644
--- a/src/components/Global/Slider/index.tsx
+++ b/src/components/Global/Slider/index.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { twMerge } from 'tailwind-merge'
 
-const SNAP_POINTS = [25, 33, 50, 100]
+const SNAP_POINTS = [25, 100 / 3, 50, 100] // 100/3 = 33.333...% for equal 3-person splits
 const SNAP_THRESHOLD = 5 // ±5% proximity to trigger snap
 
 function Slider({
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index ce3c2ecb5..55471c926 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -1,67 +1,52 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { setCrispUserData } from '@/utils/crisp'
+import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
-import { useEffect, useRef } from 'react'
+import PeanutLoading from '../PeanutLoading'
 
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
     const userData = useCrispUserData()
-    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const [isLoading, setIsLoading] = useState(true)
 
-    useEffect(() => {
-        if (!isSupportModalOpen || !iframeRef.current || !userData.username) return
-
-        const iframe = iframeRef.current
+    const crispProxyUrl = useCrispProxyUrl(userData, prefilledMessage)
 
-        // Try to set Crisp data in iframe (same logic as CrispChat.tsx)
-        const setData = () => {
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (!iframeWindow?.$crisp) return
+    useEffect(() => {
+        // Listen for ready message from proxy iframe
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
 
-                setCrispUserData(iframeWindow.$crisp, userData, prefilledMessage)
-            } catch (e) {
-                // Silently fail if CORS blocks access - no harm done
-                console.debug('Could not set Crisp data in iframe (expected if CORS-blocked):', e)
+            if (event.data.type === 'CRISP_READY') {
+                setIsLoading(false)
             }
         }
 
-        const handleLoad = () => {
-            // Try immediately
-            setData()
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [])
 
-            // Listen for Crisp loaded event in iframe
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (iframeWindow?.$crisp) {
-                    iframeWindow.$crisp.push(['on', 'session:loaded', setData])
-                }
-            } catch (e) {
-                // Ignore CORS errors
-            }
-
-            // Fallback: try again after delays
-            setTimeout(setData, 500)
-            setTimeout(setData, 1000)
-            setTimeout(setData, 2000)
+    // Reset loading state when drawer closes
+    useEffect(() => {
+        if (!isSupportModalOpen) {
+            setIsLoading(true)
         }
-
-        iframe.addEventListener('load', handleLoad)
-        return () => iframe.removeEventListener('load', handleLoad)
-    }, [isSupportModalOpen, userData, prefilledMessage])
+    }, [isSupportModalOpen])
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
             <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
                 <DrawerTitle className="sr-only">Support</DrawerTitle>
-                <iframe
-                    ref={iframeRef}
-                    src="https://go.crisp.chat/chat/embed/?website_id=916078be-a6af-4696-82cb-bc08d43d9125"
-                    className="h-[80vh] w-full"
-                />
+                <div className="relative h-[80vh] w-full">
+                    {isLoading && (
+                        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                            <PeanutLoading />
+                        </div>
+                    )}
+                    <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+                </div>
             </DrawerContent>
         </Drawer>
     )
diff --git a/src/components/Home/HomeBanners/BannerCard.tsx b/src/components/Home/HomeBanners/BannerCard.tsx
deleted file mode 100644
index 4a9d9a5c4..000000000
--- a/src/components/Home/HomeBanners/BannerCard.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-import { Card } from '@/components/0_Bruddle'
-import { Icon, type IconName } from '@/components/Global/Icons/Icon'
-import type { StaticImageData } from 'next/image'
-import Image from 'next/image'
-import React from 'react'
-import { twMerge } from 'tailwind-merge'
-
-interface BannerCardProps {
-    icon: IconName
-    title: string | React.ReactNode
-    description: string | React.ReactNode
-    logo?: StaticImageData
-    onClose: () => void
-    onClick?: () => void
-    iconContainerClassName?: string
-}
-
-const BannerCard = ({ title, description, icon, onClose, onClick, logo, iconContainerClassName }: BannerCardProps) => {
-    const handleClose = (e: React.MouseEvent) => {
-        e.stopPropagation()
-        onClose()
-    }
-
-    return (
-        <Card onClick={onClick} className="embla__slide relative flex flex-row items-center justify-around p-2">
-            <div className="absolute right-2 top-2">
-                <Icon onClick={handleClose} name="cancel" size={10} />
-            </div>
-
-            <div
-                className={twMerge(
-                    'flex size-8  items-center justify-center rounded-full',
-                    logo ? 'bg-transparent' : 'bg-primary-1',
-                    iconContainerClassName
-                )}
-            >
-                {/* Show icon only if logo isnt provided. Logo takes precedence over icon. */}
-                {!logo && <Icon name={icon} size={20} />}
-                {logo && <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={32} height={32} />}
-            </div>
-            <div className="flex w-[80%] flex-col">
-                <p className="font-medium">{title}</p>
-                <p className="text-xs text-gray-1">{description}</p>
-            </div>
-        </Card>
-    )
-}
-
-export default BannerCard
diff --git a/src/components/Home/HomeBanners/index.tsx b/src/components/Home/HomeBanners/index.tsx
deleted file mode 100644
index 3b8335576..000000000
--- a/src/components/Home/HomeBanners/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-import Carousel from '@/components/Global/Carousel'
-import BannerCard from './BannerCard'
-import NotificationBanner from '@/components/Notifications/NotificationBanner'
-import { type IconName } from '@/components/Global/Icons/Icon'
-import { useBanners } from '@/hooks/useBanners'
-
-const HomeBanners = () => {
-    const { banners, setBanners } = useBanners()
-
-    // don't render carousel if there are no banners
-    if (!banners.length) return null
-
-    return (
-        <Carousel>
-            {banners.map((banner) => {
-                // use the existing NotificationBanner component for notification banners
-                if (banner.id === 'notification-banner') {
-                    return (
-                        <div key={banner.id} className="embla__slide">
-                            <NotificationBanner
-                                onClick={banner.onClick!}
-                                onClose={banner.onClose!}
-                                isPermissionDenied={banner.isPermissionDenied!}
-                            />
-                        </div>
-                    )
-                }
-
-                // use BannerCard for all other banners
-                return (
-                    <BannerCard
-                        key={banner.id}
-                        title={banner.title}
-                        description={banner.description}
-                        icon={banner.icon as IconName}
-                        onClose={() => {
-                            setBanners(banners.filter((b) => b.id !== banner.id))
-                        }}
-                        onClick={banner.onClick}
-                        logo={banner.logo}
-                        iconContainerClassName={banner.iconContainerClassName}
-                    />
-                )
-            })}
-        </Carousel>
-    )
-}
-
-export default HomeBanners
diff --git a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
new file mode 100644
index 000000000..060cc51a0
--- /dev/null
+++ b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { Card } from '@/components/0_Bruddle'
+import { Icon, type IconName } from '@/components/Global/Icons/Icon'
+import type { StaticImageData } from 'next/image'
+import Image from 'next/image'
+import React, { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+import ActionModal from '@/components/Global/ActionModal'
+import { CAROUSEL_CLOSE_BUTTON_POSITION, CAROUSEL_CLOSE_ICON_SIZE } from '@/constants/carousel.consts'
+
+interface CarouselCTAProps {
+    icon: IconName
+    title: string | React.ReactNode
+    description: string | React.ReactNode
+    logo?: StaticImageData
+    onClose: () => void
+    onClick?: () => void | Promise<void>
+    iconContainerClassName?: string
+    // Notification-specific props
+    isPermissionDenied?: boolean
+}
+
+const CarouselCTA = ({
+    title,
+    description,
+    icon,
+    onClose,
+    onClick,
+    logo,
+    iconContainerClassName,
+    isPermissionDenied,
+}: CarouselCTAProps) => {
+    const [showPermissionDeniedModal, setShowPermissionDeniedModal] = useState(false)
+
+    const handleClose = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        onClose()
+    }
+
+    const handleClick = async () => {
+        try {
+            if (isPermissionDenied) {
+                setShowPermissionDeniedModal(true)
+            } else if (onClick) {
+                await onClick()
+            }
+        } catch (error) {
+            console.error('Error handling CTA click:', error)
+        }
+    }
+
+    // Get descriptive title for accessibility
+    const getAriaLabel = () => {
+        if (typeof title === 'string') {
+            return `Close ${title}`
+        }
+        // For React nodes (e.g., "Unlock QR code payments"), use icon as hint
+        if (icon === 'shield') {
+            return 'Close verification prompt'
+        }
+        if (icon === 'bell' || isPermissionDenied) {
+            return 'Close notification prompt'
+        }
+        return 'Close prompt'
+    }
+
+    return (
+        <>
+            <Card
+                onClick={handleClick}
+                className="embla__slide relative flex flex-row items-center justify-around px-2 py-2 md:py-3"
+            >
+                {/* Close button - consistent positioning and size */}
+                <button
+                    type="button"
+                    aria-label={getAriaLabel()}
+                    onClick={handleClose}
+                    className={twMerge(
+                        CAROUSEL_CLOSE_BUTTON_POSITION,
+                        'z-10 cursor-pointer p-0 text-black outline-none'
+                    )}
+                >
+                    <Icon name="cancel" size={CAROUSEL_CLOSE_ICON_SIZE} />
+                </button>
+
+                {/* Icon container */}
+                <div
+                    className={twMerge(
+                        'flex size-8 items-center justify-center rounded-full',
+                        logo ? 'bg-transparent' : 'bg-primary-1',
+                        iconContainerClassName
+                    )}
+                >
+                    {/* Show icon only if logo isn't provided. Logo takes precedence over icon. */}
+                    {!logo && <Icon name={icon} size={20} />}
+                    {logo && (
+                        <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={32} height={32} />
+                    )}
+                </div>
+
+                {/* Content */}
+                <div className="flex w-[80%] flex-col">
+                    <p className="font-medium">{title}</p>
+                    <p className="text-xs text-gray-1">{description}</p>
+                </div>
+            </Card>
+
+            {/* Permission denied modal for notification CTA */}
+            {isPermissionDenied && showPermissionDeniedModal && (
+                <ActionModal
+                    visible={showPermissionDeniedModal}
+                    title="Turn notifications back on"
+                    description={
+                        <p>
+                            <span>To keep getting updates, you'll need to reinstall the app on your home screen. </span>
+                            <br />
+                            <span>Don't worry, your account and data are safe. It only takes a minute.</span>
+                        </p>
+                    }
+                    icon="bell"
+                    onClose={() => {
+                        setShowPermissionDeniedModal(false)
+                    }}
+                    ctaClassName="md:flex-col gap-4"
+                    ctas={[
+                        {
+                            text: 'Got it!',
+                            onClick: () => {
+                                setShowPermissionDeniedModal(false)
+                            },
+                            shadowSize: '4',
+                            variant: 'purple',
+                        },
+                        {
+                            text: 'Reinstall later',
+                            onClick: () => {
+                                setShowPermissionDeniedModal(false)
+                            },
+                            variant: 'transparent',
+                            className: 'underline h-6',
+                        },
+                    ]}
+                />
+            )}
+        </>
+    )
+}
+
+export default CarouselCTA
diff --git a/src/components/Home/HomeCarouselCTA/index.tsx b/src/components/Home/HomeCarouselCTA/index.tsx
new file mode 100644
index 000000000..e7ad1bf00
--- /dev/null
+++ b/src/components/Home/HomeCarouselCTA/index.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import Carousel from '@/components/Global/Carousel'
+import CarouselCTA from './CarouselCTA'
+import { type IconName } from '@/components/Global/Icons/Icon'
+import { useHomeCarouselCTAs } from '@/hooks/useHomeCarouselCTAs'
+
+const HomeCarouselCTA = () => {
+    const { carouselCTAs, setCarouselCTAs } = useHomeCarouselCTAs()
+
+    // don't render carousel if there are no CTAs
+    if (!carouselCTAs.length) return null
+
+    return (
+        <Carousel>
+            {carouselCTAs.map((cta) => (
+                <CarouselCTA
+                    key={cta.id}
+                    title={cta.title}
+                    description={cta.description}
+                    icon={cta.icon as IconName}
+                    onClose={() => {
+                        // Use cta.onClose if provided (for notification prompt), otherwise filter from list
+                        if (cta.onClose) {
+                            cta.onClose()
+                        } else {
+                            setCarouselCTAs((prev) => prev.filter((c) => c.id !== cta.id))
+                        }
+                    }}
+                    onClick={cta.onClick}
+                    logo={cta.logo}
+                    iconContainerClassName={cta.iconContainerClassName}
+                    isPermissionDenied={cta.isPermissionDenied}
+                />
+            ))}
+        </Carousel>
+    )
+}
+
+export default HomeCarouselCTA
diff --git a/src/components/Home/InvitesIcon.tsx b/src/components/Home/InvitesIcon.tsx
index 3062edf13..b7a8815bb 100644
--- a/src/components/Home/InvitesIcon.tsx
+++ b/src/components/Home/InvitesIcon.tsx
@@ -11,7 +11,7 @@ const InvitesIcon = ({
 }) => {
     return (
         <Image
-            className={twMerge(animate && 'animate-pulsate-slow', className)}
+            className={twMerge(animate && 'animate-star-pulsate-wiggle', className)}
             src={STAR_STRAIGHT_ICON}
             alt="star"
             width={20}
diff --git a/src/components/Notifications/NotificationBanner.tsx b/src/components/Notifications/NotificationBanner.tsx
deleted file mode 100644
index ca9af11e2..000000000
--- a/src/components/Notifications/NotificationBanner.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client'
-import Card from '@/components/Global/Card'
-import { Icon } from '@/components/Global/Icons/Icon'
-import { useState } from 'react'
-import { twMerge } from 'tailwind-merge'
-import ActionModal from '../Global/ActionModal'
-
-const NotificationBanner = ({
-    onClick,
-    onClose,
-    isPermissionDenied,
-}: {
-    onClick: () => void
-    onClose: () => void
-    isPermissionDenied: boolean
-}) => {
-    const [showBanner, setShowBanner] = useState(true)
-    const [showPermissionDeniedModal, setShowPermissionDeniedModal] = useState(false)
-
-    const handleClick = () => {
-        onClick()
-    }
-
-    const handleHideBanner = (e?: React.MouseEvent) => {
-        if (e) e.stopPropagation()
-        setShowBanner(false)
-        onClose()
-    }
-
-    if (!showBanner) return null
-
-    return (
-        <>
-            <Card
-                position={'single'}
-                onClick={() => {
-                    if (isPermissionDenied) {
-                        setShowPermissionDeniedModal(true)
-                    } else {
-                        handleClick()
-                    }
-                }}
-            >
-                <div className="flex items-center justify-between">
-                    <div className="relative flex w-full items-center gap-3">
-                        <div className="flex size-8 min-w-8 items-center justify-center rounded-full bg-primary-1">
-                            <Icon name="bell" className="h-4 w-4" />
-                        </div>
-                        <div className="flex flex-col">
-                            <div className="font-medium">Stay in the loop!</div>
-
-                            <div className={twMerge('text-sm text-grey-1')}>
-                                Turn on notifications and get alerts for all your wallet activity.
-                            </div>
-                        </div>
-                        <button
-                            type="button"
-                            aria-label="Close"
-                            onClick={handleHideBanner}
-                            className="absolute right-0 top-2 w-fit cursor-pointer p-0 text-black"
-                        >
-                            <Icon name="cancel" className="h-3 w-3" />
-                        </button>
-                    </div>
-                </div>
-            </Card>
-            {showPermissionDeniedModal && (
-                <ActionModal
-                    visible={showPermissionDeniedModal}
-                    title="Turn notifications back on"
-                    description={
-                        <p>
-                            <span>To keep getting updates, you'll need to reinstall the app on your home screen. </span>
-                            <br />
-                            <span>Don't worry, your account and data are safe. It only takes a minute.</span>
-                        </p>
-                    }
-                    icon="bell"
-                    onClose={() => {
-                        setShowPermissionDeniedModal(false)
-                    }}
-                    ctaClassName="md:flex-col gap-4"
-                    ctas={[
-                        {
-                            text: 'Got it!',
-                            onClick: () => {
-                                setShowPermissionDeniedModal(false)
-                            },
-                            shadowSize: '4',
-                            variant: 'purple',
-                        },
-                        {
-                            text: 'Reinstall later',
-                            onClick: () => {
-                                setShowPermissionDeniedModal(false)
-                            },
-                            variant: 'transparent',
-                            className: 'underline h-6',
-                        },
-                    ]}
-                />
-            )}
-        </>
-    )
-}
-
-export default NotificationBanner
diff --git a/src/components/Profile/components/ProfileHeader.tsx b/src/components/Profile/components/ProfileHeader.tsx
index 333f6a366..b89d385b8 100644
--- a/src/components/Profile/components/ProfileHeader.tsx
+++ b/src/components/Profile/components/ProfileHeader.tsx
@@ -11,6 +11,7 @@ import { Drawer, DrawerContent, DrawerTitle } from '@/components/Global/Drawer'
 import { VerifiedUserLabel } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
 import useKycStatus from '@/hooks/useKycStatus'
+import CopyToClipboard from '@/components/Global/CopyToClipboard'
 
 interface ProfileHeaderProps {
     name: string
@@ -44,15 +45,18 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
                 <AvatarWithBadge name={name || username} />
 
                 {/* Name */}
-                <VerifiedUserLabel
-                    name={name}
-                    username={username}
-                    isVerified={isVerified}
-                    className="text-2xl font-bold"
-                    iconSize={20}
-                    haveSentMoneyToUser={haveSentMoneyToUser}
-                    isAuthenticatedUserVerified={isAuthenticatedUserVerified && isSelfProfile} // can be true only for self profile
-                />
+                <div className="flex items-center gap-1.5">
+                    <VerifiedUserLabel
+                        name={name}
+                        username={username}
+                        isVerified={isVerified}
+                        className="text-2xl font-bold"
+                        iconSize={20}
+                        haveSentMoneyToUser={haveSentMoneyToUser}
+                        isAuthenticatedUserVerified={isAuthenticatedUserVerified && isSelfProfile} // can be true only for self profile
+                    />
+                    <CopyToClipboard textToCopy={username} fill="black" iconSize="4" />
+                </div>
                 {/* Username with share drawer */}
                 {showShareButton && (
                     <Button
diff --git a/src/components/UserHeader/index.tsx b/src/components/UserHeader/index.tsx
index ececbfc75..1c31790c7 100644
--- a/src/components/UserHeader/index.tsx
+++ b/src/components/UserHeader/index.tsx
@@ -25,7 +25,7 @@ export const UserHeader = ({ username, fullName, isVerified }: UserHeaderProps)
             <Button
                 variant="primary-soft"
                 className={twMerge(
-                    'flex h-8 w-auto cursor-pointer items-center justify-center gap-1.5 rounded-full px-2 md:h-9 md:px-3'
+                    'flex h-8 w-auto cursor-pointer items-center justify-center gap-1.5 rounded-full px-2.5 md:h-9 md:px-3.5'
                 )}
                 shadowSize="3"
                 size="small"
diff --git a/src/components/index.ts b/src/components/index.ts
index 057eb6dc9..139dbd478 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
 export * from './Blog'
 export * from './Claim'
-export * from './CrispChat'
+export * from './CrispChat' // Only exports CrispButton
 export * from './Global/DaimoPayButton'
 export * from './Jobs'
 export * from './Privacy'
diff --git a/src/constants/carousel.consts.ts b/src/constants/carousel.consts.ts
new file mode 100644
index 000000000..2d4807569
--- /dev/null
+++ b/src/constants/carousel.consts.ts
@@ -0,0 +1,3 @@
+// Carousel CTA styling constants
+export const CAROUSEL_CLOSE_BUTTON_POSITION = 'absolute right-2 top-2'
+export const CAROUSEL_CLOSE_ICON_SIZE = 10
diff --git a/src/constants/crisp.ts b/src/constants/crisp.ts
new file mode 100644
index 000000000..e4707341e
--- /dev/null
+++ b/src/constants/crisp.ts
@@ -0,0 +1,6 @@
+/**
+ * Crisp chat integration configuration
+ */
+
+/** Crisp website ID for Peanut's support chat */
+export const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 3214ac1ff..ee5e64b26 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,5 +1,6 @@
 export * from './cashout.consts'
 export * from './chains.consts'
+export * from './carousel.consts'
 export * from './general.consts'
 export * from './loadingStates.consts'
 export * from './query.consts'
diff --git a/src/constants/support.ts b/src/constants/support.ts
new file mode 100644
index 000000000..f7cb4afef
--- /dev/null
+++ b/src/constants/support.ts
@@ -0,0 +1,10 @@
+/**
+ * Support and debugging tool URLs
+ */
+
+/** Grafana dashboard for exploring user wallet activity */
+export const GRAFANA_DASHBOARD_BASE_URL =
+    'https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user'
+
+/** Arbiscan block explorer for viewing wallet addresses on Arbitrum */
+export const ARBISCAN_ADDRESS_BASE_URL = 'https://arbiscan.io/address'
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index c330fb724..d6f3d5e89 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -11,6 +11,7 @@ import {
     clearRedirectUrl,
     updateUserPreferences,
 } from '@/utils'
+import { resetCrispProxySessions } from '@/utils/crisp'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { createContext, type ReactNode, useContext, useState, useEffect, useMemo, useCallback } from 'react'
@@ -148,6 +149,12 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                     sessionStorage.removeItem('hasSeenIOSPWAPromptThisSession')
                 }
 
+                // Reset Crisp session to prevent session merging with next user
+                // This resets both main window Crisp instance and any proxy page instances
+                if (typeof window !== 'undefined') {
+                    resetCrispProxySessions()
+                }
+
                 await fetchUser()
                 dispatch(setupActions.resetSetup())
                 router.replace('/setup')
diff --git a/src/hooks/useCrispEmbedUrl.ts b/src/hooks/useCrispEmbedUrl.ts
new file mode 100644
index 000000000..28b5311cc
--- /dev/null
+++ b/src/hooks/useCrispEmbedUrl.ts
@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+import { CRISP_WEBSITE_ID } from '@/constants/crisp'
+
+const CRISP_EMBED_BASE_URL = `https://go.crisp.chat/chat/embed/?website_id=${CRISP_WEBSITE_ID}`
+
+/**
+ * Hook to build Crisp embed URL with user data as URL parameters
+ * This bypasses CORS completely - Crisp supports these URL params:
+ * - user_email: User's email address (CRITICAL for session persistence)
+ * - user_nickname: User's nickname
+ * - user_phone: User's phone number
+ * - user_avatar: URL to the user's avatar image
+ */
+export function useCrispEmbedUrl(userData: CrispUserData): string {
+    return useMemo(() => {
+        const params = new URLSearchParams()
+
+        if (userData.email) {
+            params.append('user_email', userData.email)
+        }
+        if (userData.fullName || userData.username) {
+            params.append('user_nickname', userData.fullName || userData.username || '')
+        }
+        if (userData.avatar) {
+            params.append('user_avatar', userData.avatar)
+        }
+
+        const queryString = params.toString()
+        return queryString ? `${CRISP_EMBED_BASE_URL}&${queryString}` : CRISP_EMBED_BASE_URL
+    }, [userData.email, userData.fullName, userData.username, userData.avatar])
+}
diff --git a/src/hooks/useCrispProxyUrl.ts b/src/hooks/useCrispProxyUrl.ts
new file mode 100644
index 000000000..29b9b739f
--- /dev/null
+++ b/src/hooks/useCrispProxyUrl.ts
@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+
+/**
+ * Builds URL for Crisp proxy page with user data as query parameters
+ *
+ * This follows Crisp's recommended pattern for iframe embedding with JS SDK control.
+ * All data is passed via URL params so the proxy page can set it during Crisp initialization,
+ * avoiding timing issues with async postMessage approaches.
+ *
+ * @param userData - User data to encode in URL
+ * @param prefilledMessage - Optional message to prefill in chat
+ * @returns URL path to crisp-proxy page with encoded parameters
+ */
+export function useCrispProxyUrl(userData: CrispUserData, prefilledMessage?: string): string {
+    return useMemo(() => {
+        const params = new URLSearchParams()
+
+        if (userData.email) {
+            params.append('user_email', userData.email)
+        }
+        if (userData.fullName || userData.username) {
+            params.append('user_nickname', userData.fullName || userData.username || '')
+        }
+        if (userData.avatar) {
+            params.append('user_avatar', userData.avatar)
+        }
+
+        // Session metadata as JSON for support agents
+        if (
+            userData.username ||
+            userData.userId ||
+            userData.fullName ||
+            userData.grafanaLink ||
+            userData.walletAddressLink ||
+            userData.bridgeUserId ||
+            userData.mantecaUserId
+        ) {
+            const sessionData = JSON.stringify({
+                username: userData.username || '',
+                user_id: userData.userId || '',
+                full_name: userData.fullName || '',
+                grafana_dashboard: userData.grafanaLink || '',
+                wallet_address: userData.walletAddressLink || '',
+                bridge_user_id: userData.bridgeUserId || '',
+                manteca_user_id: userData.mantecaUserId || '',
+            })
+            params.append('session_data', sessionData)
+        }
+
+        if (prefilledMessage) {
+            params.append('prefilled_message', prefilledMessage)
+        }
+
+        const queryString = params.toString()
+        return queryString ? `/crisp-proxy?${queryString}` : '/crisp-proxy'
+    }, [
+        userData.email,
+        userData.fullName,
+        userData.username,
+        userData.avatar,
+        userData.userId,
+        userData.grafanaLink,
+        userData.walletAddressLink,
+        userData.bridgeUserId,
+        userData.mantecaUserId,
+        prefilledMessage,
+    ])
+}
diff --git a/src/hooks/useCrispUserData.ts b/src/hooks/useCrispUserData.ts
index 633f6368a..938f8424b 100644
--- a/src/hooks/useCrispUserData.ts
+++ b/src/hooks/useCrispUserData.ts
@@ -1,26 +1,56 @@
 import { useAuth } from '@/context/authContext'
+import { AccountType } from '@/interfaces'
 import { useMemo } from 'react'
+import { GRAFANA_DASHBOARD_BASE_URL, ARBISCAN_ADDRESS_BASE_URL } from '@/constants/support'
 
 export interface CrispUserData {
     username: string | undefined
     userId: string | undefined
     email: string | undefined
+    fullName: string | undefined
+    avatar: string | undefined
     grafanaLink: string | undefined
+    walletAddress: string | undefined
+    walletAddressLink: string | undefined
+    bridgeUserId: string | undefined
+    mantecaUserId: string | undefined
 }
 
+/**
+ * Prepares user data for Crisp chat integration
+ * Extracts user information from auth context and formats it for Crisp
+ */
 export function useCrispUserData(): CrispUserData {
-    const { username, userId } = useAuth()
+    const { username, userId, user } = useAuth()
 
     return useMemo(() => {
         const grafanaLink = username
-            ? `https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}`
+            ? `${GRAFANA_DASHBOARD_BASE_URL}?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}&from=now-30d&to=now&timezone=browser`
             : undefined
 
+        // Use address from user.accounts (database) rather than useWallet hook
+        // This ensures we always show the user's wallet address in support metadata,
+        // even if ZeroDev client isn't initialized yet. useWallet().address could be
+        // undefined during initialization, but we want persistent data for support agents.
+        const walletAddress =
+            user?.accounts?.find((account) => account.type === AccountType.PEANUT_WALLET)?.identifier || undefined
+        const walletAddressLink = walletAddress ? `${ARBISCAN_ADDRESS_BASE_URL}/${walletAddress}` : undefined
+
+        const bridgeUserId = user?.user?.bridgeCustomerId || undefined
+        const mantecaUserId =
+            user?.user?.kycVerifications?.find((kyc) => kyc.provider === 'MANTECA')?.providerUserId || undefined
+
         return {
             username,
             userId,
-            email: undefined,
+            email: user?.user?.email || undefined,
+            fullName: user?.user?.fullName,
+            avatar: user?.user?.profile_picture || undefined,
             grafanaLink,
+            walletAddress,
+            walletAddressLink,
+            bridgeUserId,
+            mantecaUserId,
         }
-    }, [username, userId])
+    }, [username, userId, user])
 }
diff --git a/src/hooks/useBanners.tsx b/src/hooks/useHomeCarouselCTAs.tsx
similarity index 68%
rename from src/hooks/useBanners.tsx
rename to src/hooks/useHomeCarouselCTAs.tsx
index 4a8d40ee9..325212874 100644
--- a/src/hooks/useBanners.tsx
+++ b/src/hooks/useHomeCarouselCTAs.tsx
@@ -2,41 +2,40 @@
 
 import { type IconName } from '@/components/Global/Icons/Icon'
 import { useAuth } from '@/context/authContext'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useNotifications } from './useNotifications'
 import { useRouter } from 'next/navigation'
 import useKycStatus from './useKycStatus'
-import { MERCADO_PAGO } from '@/assets'
 import type { StaticImageData } from 'next/image'
 
-export type Banner = {
+export type CarouselCTA = {
     id: string
     title: string | React.ReactNode
     description: string | React.ReactNode
     icon: IconName
     logo?: StaticImageData
-    // optional handlers for notification banner
+    // optional handlers for notification prompt
     onClick?: () => void | Promise<void>
     onClose?: () => void
     isPermissionDenied?: boolean
     iconContainerClassName?: string
 }
 
-export const useBanners = () => {
-    const [banners, setBanners] = useState<Banner[]>([])
+export const useHomeCarouselCTAs = () => {
+    const [carouselCTAs, setCarouselCTAs] = useState<CarouselCTA[]>([])
     const { user } = useAuth()
     const { showReminderBanner, requestPermission, snoozeReminderBanner, afterPermissionAttempt, isPermissionDenied } =
         useNotifications()
     const router = useRouter()
     const { isUserKycApproved, isUserBridgeKycUnderReview } = useKycStatus()
 
-    const generateBanners = () => {
-        const _banners: Banner[] = []
+    const generateCarouselCTAs = useCallback(() => {
+        const _carouselCTAs: CarouselCTA[] = []
 
-        // add notification banner as first item if it should be shown
+        // add notification prompt as first item if it should be shown
         if (showReminderBanner) {
-            _banners.push({
-                id: 'notification-banner',
+            _carouselCTAs.push({
+                id: 'notification-prompt',
                 title: 'Stay in the loop!',
                 description: 'Turn on notifications and get alerts for all your wallet activity.',
                 icon: 'bell',
@@ -52,8 +51,8 @@ export const useBanners = () => {
         }
 
         if (!isUserKycApproved && !isUserBridgeKycUnderReview) {
-            _banners.push({
-                id: 'kyc-banner',
+            _carouselCTAs.push({
+                id: 'kyc-prompt',
                 title: (
                     <span>
                         Unlock <b>QR code payments</b>
@@ -72,17 +71,26 @@ export const useBanners = () => {
             })
         }
 
-        setBanners(_banners)
-    }
+        setCarouselCTAs(_carouselCTAs)
+    }, [
+        showReminderBanner,
+        isPermissionDenied,
+        isUserKycApproved,
+        isUserBridgeKycUnderReview,
+        router,
+        requestPermission,
+        afterPermissionAttempt,
+        snoozeReminderBanner,
+    ])
 
     useEffect(() => {
         if (!user) {
-            setBanners([])
+            setCarouselCTAs([])
             return
         }
 
-        generateBanners()
-    }, [user, showReminderBanner, isPermissionDenied])
+        generateCarouselCTAs()
+    }, [user, generateCarouselCTAs])
 
-    return { banners, setBanners }
+    return { carouselCTAs, setCarouselCTAs }
 }
diff --git a/src/hooks/usePointsCalculation.ts b/src/hooks/usePointsCalculation.ts
new file mode 100644
index 000000000..eb270c25a
--- /dev/null
+++ b/src/hooks/usePointsCalculation.ts
@@ -0,0 +1,46 @@
+import { useRef } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { pointsApi } from '@/services/points'
+import { PointsAction } from '@/services/services.types'
+import { useAuth } from '@/context/authContext'
+
+/**
+ * Hook to fetch and calculate points for various actions
+ * @param actionType - The type of action earning points (e.g., MANTECA_QR_PAYMENT, MANTECA_TRANSFER)
+ * @param usdAmount - The USD amount for the transaction
+ * @param additionalEnabled - Additional condition to enable the query (e.g., payment processor check)
+ * @param uniqueId - Optional unique identifier to prevent cache collisions between different transactions (e.g., payment ID, timestamp)
+ * @param otherUserId - Optional user ID for P2P transactions (used for handshake bonus calculation)
+ * @returns Points data and a ref for the points display element (used for confetti animation)
+ */
+export const usePointsCalculation = (
+    actionType: PointsAction,
+    usdAmount: string | null | undefined,
+    additionalEnabled: boolean = true,
+    uniqueId?: string | number,
+    otherUserId?: string
+) => {
+    const { user } = useAuth()
+    const pointsDivRef = useRef<HTMLDivElement>(null)
+
+    // Normalize usdAmount by removing commas (e.g., "1,200.50" -> "1200.50")
+    // This handles formatted amounts from inputs that may include thousand separators
+    const normalizedUsdAmount = usdAmount?.toString().replace(/,/g, '')
+    const parsedUsdAmount = normalizedUsdAmount ? Number(normalizedUsdAmount) : undefined
+    const hasValidUsdAmount = parsedUsdAmount !== undefined && !Number.isNaN(parsedUsdAmount) && parsedUsdAmount > 0
+
+    const { data: pointsData } = useQuery({
+        queryKey: ['calculate-points', actionType, normalizedUsdAmount, uniqueId, otherUserId],
+        queryFn: () =>
+            pointsApi.calculatePoints({
+                actionType,
+                usdAmount: parsedUsdAmount!,
+                ...(otherUserId && { otherUserId }),
+            }),
+        enabled: Boolean(user?.user.userId && hasValidUsdAmount && additionalEnabled),
+        refetchOnWindowFocus: false,
+        staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    })
+
+    return { pointsData, pointsDivRef }
+}
diff --git a/src/utils/crisp.ts b/src/utils/crisp.ts
index 90d1d79c5..289fd3ba2 100644
--- a/src/utils/crisp.ts
+++ b/src/utils/crisp.ts
@@ -1,21 +1,36 @@
 import { type CrispUserData } from '@/hooks/useCrispUserData'
 
 /**
- * Sets Crisp user data on a given $crisp instance
- * @param crispInstance - The $crisp object (either window.$crisp or iframe.contentWindow.$crisp)
+ * Sets Crisp user identification and session metadata on a $crisp instance
+ *
+ * This is used for the main window Crisp widget (not iframe).
+ * Sets user email (critical for session persistence), nickname, avatar,
+ * and session metadata visible to support agents.
+ *
+ * @param crispInstance - The $crisp object (window.$crisp)
  * @param userData - User data to set
- * @param prefilledMessage - Optional prefilled message
+ * @param prefilledMessage - Optional message to prefill in chat
  */
 export function setCrispUserData(crispInstance: any, userData: CrispUserData, prefilledMessage?: string): void {
     if (!crispInstance) return
 
-    const { username, userId, email, grafanaLink } = userData
+    const { username, userId, email, fullName, avatar, grafanaLink, walletAddressLink, bridgeUserId, mantecaUserId } =
+        userData
 
-    // Set user nickname and email
-    crispInstance.push(['set', 'user:nickname', [username || '']])
-    crispInstance.push(['set', 'user:email', [email || '']])
+    if (email) {
+        crispInstance.push(['set', 'user:email', [email]])
+    }
+
+    const nickname = fullName || username || ''
+    if (nickname) {
+        crispInstance.push(['set', 'user:nickname', [nickname]])
+    }
+
+    if (avatar) {
+        crispInstance.push(['set', 'user:avatar', [avatar]])
+    }
 
-    // Set session data - EXACT STRUCTURE (3 nested arrays!)
+    // Session metadata for support agents - must be 3 levels of nested arrays
     crispInstance.push([
         'set',
         'session:data',
@@ -23,13 +38,70 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
             [
                 ['username', username || ''],
                 ['user_id', userId || ''],
+                ['full_name', fullName || ''],
                 ['grafana_dashboard', grafanaLink || ''],
+                ['wallet_address', walletAddressLink || ''],
+                ['bridge_user_id', bridgeUserId || ''],
+                ['manteca_user_id', mantecaUserId || ''],
             ],
         ],
     ])
 
-    // Set prefilled message if exists
     if (prefilledMessage) {
         crispInstance.push(['set', 'message:text', [prefilledMessage]])
     }
 }
+
+/**
+ * Resets Crisp session to prevent session merging between users
+ *
+ * @param crispInstance - The $crisp object
+ */
+export function resetCrispSession(crispInstance: any): void {
+    if (!crispInstance || typeof window === 'undefined') return
+
+    try {
+        crispInstance.push(['do', 'session:reset'])
+    } catch (e) {
+        console.debug('[Crisp] Could not reset session:', e)
+    }
+}
+
+/**
+ * Resets all Crisp sessions on logout (main window + proxy iframes)
+ *
+ * Attempts to reset currently mounted proxy iframes via postMessage,
+ * and sets a sessionStorage flag for proxy pages that aren't currently mounted.
+ */
+export function resetCrispProxySessions(): void {
+    if (typeof window === 'undefined') return
+
+    try {
+        const iframes = document.querySelectorAll('iframe[src*="crisp-proxy"]')
+
+        iframes.forEach((iframe) => {
+            try {
+                const iframeWindow = (iframe as HTMLIFrameElement).contentWindow
+                if (iframeWindow) {
+                    iframeWindow.postMessage(
+                        {
+                            type: 'CRISP_RESET_SESSION',
+                        },
+                        window.location.origin
+                    )
+                }
+            } catch (e) {
+                console.debug('[Crisp] Could not reset proxy iframe:', e)
+            }
+        })
+
+        if (window.$crisp) {
+            resetCrispSession(window.$crisp)
+        }
+
+        // Flag for proxy pages that aren't currently mounted
+        sessionStorage.setItem('crisp_needs_reset', 'true')
+    } catch (e) {
+        console.debug('[Crisp] Could not reset proxy sessions:', e)
+    }
+}
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
index ca8b20092..5e8f80106 100644
--- a/src/utils/general.utils.ts
+++ b/src/utils/general.utils.ts
@@ -214,11 +214,21 @@ export const syncLocalStorageToCookie = (key: string) => {
         console.log('Data synced successfully')
     }
 }
-
-// Helper function to format numbers with locale-specific (en-US) thousands separators for display.
-// The caller is responsible for prepending the correct currency symbol.
-// @dev todo: For true internationalization of read-only amounts, consider a dedicated service or util
-// that uses specific locales (e.g., 'es-AR' for '1.234,56'). This function standardizes on en-US for parsable input display.
+/**
+ * Helper function to format numbers with locale-specific (en-US) thousands separators for display.
+ * The caller is responsible for prepending the correct currency symbol.
+ *
+ * @remarks
+ * For true internationalization of read-only amounts, consider a dedicated service or util
+ * that uses specific locales (e.g., 'es-AR' for '1.234,56').
+ * This function standardizes on en-US for parsable input display.
+ *
+ * @param {string | undefined} valueStr - The numeric string value to format.
+ * @param {object} [options] - Optional formatting options.
+ * @param {number} [options.maxDecimals] - The maximum number of decimals to display.
+ * @param {number} [options.minDecimals] - The minimum number of decimals to display.
+ * @returns {string} The formatted string for display with thousands separators (en-US).
+ */
 export const formatNumberForDisplay = (
     valueStr: string | undefined,
     options?: { maxDecimals?: number; minDecimals?: number }
diff --git a/src/utils/qr-payment.utils.ts b/src/utils/qr-payment.utils.ts
new file mode 100644
index 000000000..083bf5568
--- /dev/null
+++ b/src/utils/qr-payment.utils.ts
@@ -0,0 +1,49 @@
+import { formatNumberForDisplay } from './general.utils'
+import { EQrType } from '@/components/Global/DirectSendQR/utils'
+
+/**
+ * Calculate savings amount (5% of transaction value) in cents
+ * @param usdAmount Transaction amount in USD
+ * @returns Savings amount in cents, or 0 if invalid
+ */
+export function calculateSavingsInCents(usdAmount: string | null | undefined): number {
+    if (!usdAmount) return 0
+    const savingsAmount = parseFloat(usdAmount) * 0.05
+    return Math.round(savingsAmount * 100)
+}
+
+/**
+ * Check if QR payment is for Argentina (Manteca only)
+ * @param qrType QR code type from URL parameter
+ * @param paymentProcessor Payment processor ('MANTECA' | 'SIMPLEFI')
+ * @returns true if this is a Manteca QR payment in Argentina
+ */
+export function isArgentinaMantecaQrPayment(
+    qrType: string | null,
+    paymentProcessor: 'MANTECA' | 'SIMPLEFI' | null
+): boolean {
+    if (paymentProcessor !== 'MANTECA') return false
+    return qrType === EQrType.MERCADO_PAGO || qrType === EQrType.ARGENTINA_QR3
+}
+
+/**
+ * Get savings message text with proper formatting
+ * Shows dollars for amounts >= $1, cents for amounts < $1
+ * @param savingsInCents Savings amount in cents
+ * @returns Formatted message string
+ */
+export function getSavingsMessage(savingsInCents: number): string {
+    if (savingsInCents <= 0) return ''
+
+    const savingsInDollars = savingsInCents / 100
+
+    // If savings is less than $1, show in cents
+    if (savingsInDollars < 1) {
+        const centsText = savingsInCents === 1 ? 'cent' : 'cents'
+        return `saved ~${savingsInCents} ${centsText} compared to card!`
+    }
+
+    // If savings is $1 or more, show in dollars
+    const formattedDollars = formatNumberForDisplay(savingsInDollars.toString(), { maxDecimals: 2 })
+    return `saved ~$${formattedDollars} compared to card!`
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index badc2c542..904c97c7b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -197,6 +197,27 @@ module.exports = {
                     '0%, 50%': { opacity: '1' },
                     '50.01%, 100%': { opacity: '0' },
                 },
+                starPulsateWiggle: {
+                    // Gentle pulsate 3 times
+                    '0%': { transform: 'scale(1) rotate(0deg)' },
+                    '6%': { transform: 'scale(1.12) rotate(0deg)' },
+                    '12%': { transform: 'scale(1) rotate(0deg)' },
+                    '18%': { transform: 'scale(1.12) rotate(0deg)' },
+                    '24%': { transform: 'scale(1) rotate(0deg)' },
+                    '30%': { transform: 'scale(1.12) rotate(0deg)' },
+                    '36%': { transform: 'scale(1) rotate(0deg)' },
+                    // Pause for ~1 second
+                    '50%': { transform: 'scale(1) rotate(0deg)' },
+                    // Fast aggressive wiggle
+                    '52%': { transform: 'scale(1) rotate(-15deg)' },
+                    '54%': { transform: 'scale(1) rotate(15deg)' },
+                    '56%': { transform: 'scale(1) rotate(-15deg)' },
+                    '58%': { transform: 'scale(1) rotate(15deg)' },
+                    '60%': { transform: 'scale(1) rotate(0deg)' },
+                    // Short pause before loop
+                    '75%': { transform: 'scale(1) rotate(0deg)' },
+                    '100%': { transform: 'scale(1) rotate(0deg)' },
+                },
             },
             animation: {
                 colorPulse: 'colorPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
@@ -205,6 +226,7 @@ module.exports = {
                 'pulsate-slow': 'pulsateDeep 4s ease-in-out infinite',
                 'pulse-strong': 'pulse-strong 1s ease-in-out infinite',
                 blink: 'blink 1.5s step-end infinite',
+                'star-pulsate-wiggle': 'starPulsateWiggle 10s ease-in-out infinite',
             },
             opacity: {
                 85: '.85',