diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.style.ts b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.style.ts
index ccbdce2bd7a..78cdaad5e96 100644
--- a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.style.ts
+++ b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.style.ts
@@ -24,6 +24,8 @@ export const StyledWrapper = styled.div<{ isOpen?: boolean }>`
     ${(p) => (p.isOpen ? color.button.background : color.divider.subtle)};
   background-color: ${color.container.background};
   width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 `
 
 export const ProviderName = styled.p`
diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.test.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.test.tsx
new file mode 100644
index 00000000000..ae31922e6f8
--- /dev/null
+++ b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.test.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2025 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// Mock Data
+import {
+  mockMeldCryptoQuotes,
+  mockServiceProviders
+} from '../../../../../common/constants/mocks'
+
+// Components
+import { BuyQuote } from './buy_quote'
+
+describe('buy quote option', () => {
+  it('renders buy quote option and handles click', () => {
+    const clickHandler = jest.fn()
+    const { container } = render(
+      <BuyQuote
+        quote={mockMeldCryptoQuotes[0]}
+        serviceProviders={mockServiceProviders}
+        isCreatingWidget={false}
+        isBestOption={true}
+        isOpenOverride={true}
+        onBuy={clickHandler}
+      />
+    )
+
+    // Test Text
+    expect(screen.getByText('Transak')).toBeInTheDocument()
+    expect(screen.getByText('braveWalletBestOption')).toBeInTheDocument()
+
+    // Test Styles
+    const styledWrapper = container.querySelector(
+      '[data-key="buy-quote-wrapper"]'
+    )
+    expect(styledWrapper).toBeInTheDocument()
+    expect(styledWrapper).toHaveStyle({
+      boxSizing: 'border-box',
+      overflow: 'hidden'
+    })
+
+    // Test Carat Icon
+    const caratIcon = container.querySelector('leo-icon[name="carat-down"]')
+    expect(caratIcon).toBeInTheDocument()
+    expect(caratIcon).toBeVisible()
+    expect(caratIcon).toHaveAttribute('name', 'carat-down')
+
+    // Test Buy Button Click
+    const buyButton: any = document.querySelector('leo-button')
+    expect(buyButton).toBeInTheDocument()
+    expect(buyButton).toBeVisible()
+
+    // Button is a leo-button, we we trigger the click from the shadowRoot
+    buyButton?.shadowRoot?.querySelector('button').click()
+    expect(clickHandler).toHaveBeenCalledWith(mockMeldCryptoQuotes[0])
+  })
+})
diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx
index 0a3a60a13ca..af8ad60c560 100644
--- a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx
+++ b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx
@@ -109,7 +109,10 @@ export const BuyQuote = ({
     : quoteServiceProvider?.logoImages?.lightShortUrl
 
   return (
-    <StyledWrapper isOpen={isOpen}>
+    <StyledWrapper
+      isOpen={isOpen}
+      data-key='buy-quote-wrapper'
+    >
       <Row
         justifyContent='space-between'
         width='100%'
@@ -134,23 +137,31 @@ export const BuyQuote = ({
           gap='8px'
           justifyContent='flex-end'
         >
-          {isBestOption ? (
-            <BestOptionLabel>
-              <div slot='icon-before'>
-                <Icon name='thumb-up' />
-              </div>
-              {getLocale('braveWalletBestOption')}
-            </BestOptionLabel>
-          ) : null}
-          <PaymentMethodsWrapper>
-            {isDeditCardSupported ? <PaymentMethodIcon name='bank' /> : null}
-            {isCreditCardSupported ? (
-              <PaymentMethodIcon name='credit-card' />
+          <Row
+            width='unset'
+            gap='8px'
+            justifyContent='flex-end'
+            flexWrap='wrap'
+          >
+            {isBestOption ? (
+              <BestOptionLabel>
+                <div slot='icon-before'>
+                  <Icon name='thumb-up' />
+                </div>
+                {getLocale('braveWalletBestOption')}
+              </BestOptionLabel>
             ) : null}
-          </PaymentMethodsWrapper>
+            <PaymentMethodsWrapper>
+              {isDeditCardSupported ? <PaymentMethodIcon name='bank' /> : null}
+              {isCreditCardSupported ? (
+                <PaymentMethodIcon name='credit-card' />
+              ) : null}
+            </PaymentMethodsWrapper>
+          </Row>
           <CaratIcon
             isOpen={isOpen}
             name='carat-down'
+            data-key='carat-icon'
           />
         </Row>
       </Row>