diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index 307b1035..3069b4bf 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -194,7 +194,7 @@ const SwapForm = () => {
     <ContentBox
       hidePadding
       // showBackground
-      className="relative overflow-hidden border-x-0 md:border-l md:border-r-0 md:border-t-0 md:border-b-0"
+      className="relative overflow-hidden border-x-0 bg-th-bkg-2 md:border-l md:border-r-0 md:border-t-0 md:border-b-0"
     >
       <div className="p-6 pt-3">
         <Transition
@@ -274,7 +274,7 @@ const SwapForm = () => {
               decimalScale={inputTokenInfo?.decimals || 6}
               name="amountIn"
               id="amountIn"
-              className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-xl font-bold text-th-fgd-1 focus:outline-none"
+              className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none xl:text-xl"
               placeholder="0.00"
               value={amountInFormValue}
               onValueChange={handleAmountInChange}
@@ -313,7 +313,7 @@ const SwapForm = () => {
               type="output"
             />
           </div>
-          <div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-xl font-bold text-th-fgd-3">
+          <div className="flex h-[54px] w-full items-center justify-end rounded-r-lg border border-th-bkg-4 bg-th-bkg-3 text-right text-lg font-bold text-th-fgd-3 xl:text-xl">
             {loadingSwapDetails ? (
               <div className="w-full">
                 <SheenLoader className="flex flex-1 rounded-l-none">
@@ -321,9 +321,24 @@ const SwapForm = () => {
                 </SheenLoader>
               </div>
             ) : (
-              <span className="p-3 font-mono">
-                {amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
-              </span>
+              // <span className="p-3 font-mono">
+              //   {amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
+              // </span>
+              <NumberFormat
+                inputMode="decimal"
+                thousandSeparator=","
+                allowNegative={false}
+                isNumericString={true}
+                decimalScale={inputTokenInfo?.decimals || 6}
+                name="amountIn"
+                id="amountIn"
+                className="w-full bg-th-bkg-1 p-3 text-right font-mono text-base font-bold text-th-fgd-1 focus:outline-none xl:text-xl"
+                placeholder="0.00"
+                disabled
+                value={
+                  amountOut ? numberFormat.format(amountOut.toNumber()) : ''
+                }
+              />
             )}
           </div>
         </div>
diff --git a/components/swap/SwapPage.tsx b/components/swap/SwapPage.tsx
index 075fb783..bb191e98 100644
--- a/components/swap/SwapPage.tsx
+++ b/components/swap/SwapPage.tsx
@@ -1,4 +1,4 @@
-import Swap from './SwapForm'
+import SwapForm from './SwapForm'
 import mangoStore from '@store/mangoStore'
 import SwapOnboardingTour from '@components/tours/SwapOnboardingTour'
 import { useWallet } from '@solana/wallet-adapter-react'
@@ -15,7 +15,7 @@ const SwapPage = () => {
   return (
     <>
       <div className="grid grid-cols-12">
-        <div className="col-span-12 border-th-bkg-3 md:col-span-6 md:border-b lg:col-span-8">
+        <div className="col-span-12 border-th-bkg-3 md:col-span-6 md:border-b lg:col-span-7 xl:col-span-8">
           {inputTokenInfo?.extensions?.coingeckoId &&
           outputTokenInfo?.extensions?.coingeckoId ? (
             <SwapTokenChart
@@ -24,8 +24,8 @@ const SwapPage = () => {
             />
           ) : null}
         </div>
-        <div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-4">
-          <Swap />
+        <div className="col-span-12 mt-2 space-y-6 border-th-bkg-3 md:col-span-6 md:mt-0 md:border-b lg:col-span-5 xl:col-span-4">
+          <SwapForm />
         </div>
         <div className="col-span-12">
           <SwapInfoTabs />