diff --git a/apis/coingecko.ts b/apis/coingecko.ts
index bc68d8e0..6821a62b 100644
--- a/apis/coingecko.ts
+++ b/apis/coingecko.ts
@@ -3,41 +3,45 @@ export const fetchChartData = async (
   quoteTokenId: string,
   daysToShow: number
 ) => {
-  const [inputResponse, outputResponse] = await Promise.all([
-    fetch(
-      `https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
-    ),
-    fetch(
-      `https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
-    ),
-  ])
+  try {
+    const [inputResponse, outputResponse] = await Promise.all([
+      fetch(
+        `https://api.coingecko.com/api/v3/coins/${baseTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
+      ),
+      fetch(
+        `https://api.coingecko.com/api/v3/coins/${quoteTokenId}/ohlc?vs_currency=usd&days=${daysToShow}`
+      ),
+    ])
 
-  const [inputData, outputData] = await Promise.all([
-    inputResponse.json(),
-    outputResponse.json(),
-  ])
+    const [inputData, outputData] = await Promise.all([
+      inputResponse.json(),
+      outputResponse.json(),
+    ])
 
-  let data: any[] = []
-  if (Array.isArray(inputData)) {
-    data = data.concat(inputData)
-  }
-  if (Array.isArray(outputData)) {
-    data = data.concat(outputData)
-  }
-
-  const formattedData = data.reduce((a, c) => {
-    const found = a.find((price: any) => price.time === c[0])
-    if (found) {
-      if (['usd-coin', 'tether'].includes(quoteTokenId)) {
-        found.price = found.inputPrice / c[4]
-      } else {
-        found.price = c[4] / found.inputPrice
-      }
-    } else {
-      a.push({ time: c[0], inputPrice: c[4] })
+    let data: any[] = []
+    if (Array.isArray(inputData)) {
+      data = data.concat(inputData)
     }
-    return a
-  }, [])
-  formattedData[formattedData.length - 1].time = Date.now()
-  return formattedData.filter((d: any) => d.price)
+    if (Array.isArray(outputData)) {
+      data = data.concat(outputData)
+    }
+
+    const formattedData = data.reduce((a, c) => {
+      const found = a.find((price: any) => price.time === c[0])
+      if (found) {
+        if (['usd-coin', 'tether'].includes(quoteTokenId)) {
+          found.price = found.inputPrice / c[4]
+        } else {
+          found.price = c[4] / found.inputPrice
+        }
+      } else {
+        a.push({ time: c[0], inputPrice: c[4] })
+      }
+      return a
+    }, [])
+    formattedData[formattedData.length - 1].time = Date.now()
+    return formattedData.filter((d: any) => d.price)
+  } catch {
+    return []
+  }
 }
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 33582eab..00d87931 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -9,7 +9,6 @@ import ConnectedMenu from './wallet/ConnectedMenu'
 import { ConnectWalletButton } from './wallet/ConnectWalletButton'
 import { IS_ONBOARDED_KEY } from '../utils/constants'
 import useLocalStorageState from '../hooks/useLocalStorageState'
-import UserSetupModal from './modals/UserSetupModal'
 import CreateAccountModal from './modals/CreateAccountModal'
 import MangoAccountsListModal from './modals/MangoAccountsListModal'
 import { useRouter } from 'next/router'
@@ -19,19 +18,20 @@ const TopBar = () => {
   const { t } = useTranslation('common')
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const connected = mangoStore((s) => s.connected)
-  const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
-  const [showUserSetupModal, setShowUserSetupModal] = useState(false)
+  const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+  const [showUserSetup, setShowUserSetup] = useState(false)
   const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
   const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false)
   const router = useRouter()
   const { query } = router
 
-  const handleCloseModal = useCallback(() => {
-    setShowUserSetupModal(false)
+  const handleCloseSetup = useCallback(() => {
+    setShowUserSetup(false)
+    setIsOnboarded(true)
   }, [])
 
-  const handleShowModal = useCallback(() => {
-    setShowUserSetupModal(true)
+  const handleShowSetup = useCallback(() => {
+    setShowUserSetup(true)
   }, [])
 
   const handleShowAccounts = useCallback(() => {
@@ -95,7 +95,7 @@ const TopBar = () => {
         ) : (
           <button
             className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
-            onClick={handleShowModal}
+            onClick={handleShowSetup}
           >
             <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
             {t('connect')}
@@ -108,12 +108,7 @@ const TopBar = () => {
           onClose={() => setShowMangoAccountsModal(false)}
         />
       ) : null}
-      {showUserSetupModal ? (
-        <UserSetup
-          // isOpen={showUserSetupModal}
-          onClose={handleCloseModal}
-        />
-      ) : null}
+      {showUserSetup ? <UserSetup onClose={handleCloseSetup} /> : null}
       {showCreateAccountModal ? (
         <CreateAccountModal
           isOpen={showCreateAccountModal}
diff --git a/components/UserSetup.tsx b/components/UserSetup.tsx
index d6912861..90bdc516 100644
--- a/components/UserSetup.tsx
+++ b/components/UserSetup.tsx
@@ -11,11 +11,9 @@ import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
-import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
-import { IS_ONBOARDED_KEY } from 'utils/constants'
 import { notify } from 'utils/notifications'
 import { floorToDecimal } from 'utils/numbers'
 import ActionTokenList from './account/ActionTokenList'
@@ -25,11 +23,10 @@ import Label from './forms/Label'
 import WalletIcon from './icons/WalletIcon'
 import { walletBalanceForToken } from './modals/DepositModal'
 import ParticlesBackground from './ParticlesBackground'
-import BounceLoader from './shared/BounceLoader'
 import Button, { IconButton, LinkButton } from './shared/Button'
 import InlineNotification from './shared/InlineNotification'
+import Loading from './shared/Loading'
 import MaxAmountButton from './shared/MaxAmountButton'
-import { EnterRightExitLeft, FadeInFadeOut } from './shared/Transitions'
 import { handleWalletConnect } from './wallet/ConnectWalletButton'
 
 const UserSetup = ({ onClose }: { onClose: () => void }) => {
@@ -41,20 +38,17 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
   const [accountName, setAccountName] = useState('')
   const [loadingAccount, setLoadingAccount] = useState(false)
   const [showSetupStep, setShowSetupStep] = useState(0)
-  const [depositToken, setDepositToken] = useState('')
+  const [depositToken, setDepositToken] = useState('USDC')
   const [depositAmount, setDepositAmount] = useState('')
   const [submitDeposit, setSubmitDeposit] = useState(false)
   const [sizePercentage, setSizePercentage] = useState('')
-  const [showEditProfilePic, setShowEditProfilePic] = useState(false)
-  const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+  // const [showEditProfilePic, setShowEditProfilePic] = useState(false)
   const walletTokens = mangoStore((s) => s.wallet.tokens)
 
   const connectWallet = async () => {
     if (wallet) {
       try {
         await handleWalletConnect(wallet)
-        setShowSetupStep(2)
-        setIsOnboarded(true)
       } catch (e) {
         notify({
           title: 'Setup failed. Refresh and try again.',
@@ -64,6 +58,12 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
     }
   }
 
+  useEffect(() => {
+    if (connected) {
+      setShowSetupStep(2)
+    }
+  }, [connected])
+
   const handleCreateAccount = useCallback(async () => {
     const client = mangoStore.getState().client
     const group = mangoStore.getState().group
@@ -82,7 +82,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
       )
       actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
       if (tx) {
-        setLoadingAccount(false)
+        actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent
         setShowSetupStep(3)
         notify({
           title: t('new-account-success'),
@@ -91,13 +91,14 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
         })
       }
     } catch (e: any) {
-      setLoadingAccount(false)
       notify({
         title: t('new-account-failed'),
         txid: e?.signature,
         type: 'error',
       })
       console.error(e)
+    } finally {
+      setLoadingAccount(false)
     }
   }, [accountName, wallet, t])
 
@@ -189,8 +190,31 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
   }
 
   return (
-    <div className="fixed inset-0 z-30 grid grid-cols-2 overflow-hidden">
-      <div className="col-span-1 flex flex-col items-center justify-center bg-th-bkg-1 p-6 pt-24">
+    <div className="radial-gradient-bg fixed inset-0 z-20 grid overflow-hidden lg:grid-cols-2">
+      <img
+        className="absolute -bottom-6 right-0 hidden h-auto w-[53%] lg:block xl:w-[57%]"
+        src="/images/trade.png"
+        alt="next"
+      />
+      <img
+        className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`}
+        src="/logos/logo-mark.svg"
+        alt="next"
+      />
+      <div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
+        <div
+          style={{
+            width: `${(showSetupStep / 3) * 100}%`,
+          }}
+          className="flex bg-th-primary transition-all duration-700 ease-out"
+        />
+      </div>
+      <div className="absolute top-6 right-6 z-10">
+        <IconButton hideBg onClick={() => onClose()}>
+          <XMarkIcon className="h-6 w-6 text-th-fgd-2" />
+        </IconButton>
+      </div>
+      <div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
         <Transition
           appear={true}
           className="h-full w-full max-w-md"
@@ -202,7 +226,9 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <h2 className="mb-4 text-5xl">Better than your average exchange</h2>
+          <h2 className="mb-4 text-5xl lg:text-6xl">
+            Not your average exchange
+          </h2>
           <p className="mb-4 text-base">
             We&apos;ve got DeFi covered. Trade, swap, borrow and lend all of
             your favorite tokens with low fees and lightning execution.
@@ -237,7 +263,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
               </p>
             </div>
           </div>
-          <Button onClick={handleNextStep} size="large">
+          <Button className="w-44" onClick={handleNextStep} size="large">
             <div className="flex items-center justify-center">
               <FireIcon className="mr-2 h-5 w-5" />
               {"Let's Go"}
@@ -254,13 +280,9 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          {connected && mangoAccountLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader />
-            </div>
-          ) : (
+          {showSetupStep === 1 ? (
             <div>
-              <h2 className="mb-6 text-5xl">Connect Wallet</h2>
+              <h2 className="mb-6 text-5xl lg:text-6xl">Connect Wallet</h2>
               <p className="mb-2 text-base">Choose Wallet</p>
               <div className="space-y-2">
                 {wallets?.map((w) => (
@@ -286,18 +308,26 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
                   </button>
                 ))}
               </div>
-              <Button className="mt-10" onClick={connectWallet} size="large">
-                <div className="flex items-center justify-center">
-                  <WalletIcon className="mr-2 h-5 w-5" />
-                  Connect Wallet
-                </div>
+              <Button
+                className="mt-10 flex w-44 items-center justify-center"
+                onClick={connectWallet}
+                size="large"
+              >
+                {connected && mangoAccountLoading ? (
+                  <Loading />
+                ) : (
+                  <div className="flex items-center justify-center">
+                    <WalletIcon className="mr-2 h-5 w-5" />
+                    Connect Wallet
+                  </div>
+                )}
               </Button>
             </div>
-          )}
+          ) : null}
         </Transition>
         <Transition
           className="h-full w-full max-w-md"
-          show={showSetupStep === 2}
+          show={showSetupStep === 2 && !mangoAccountLoading}
           enter="transition ease-in duration-300 delay-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -305,14 +335,12 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          {loadingAccount ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader loadingMessage="Creating Account..." />
-            </div>
-          ) : (
+          {showSetupStep === 2 ? (
             <div>
               <div className="pb-6">
-                <h2 className="mb-4 text-5xl">Create Your Account</h2>
+                <h2 className="mb-4 text-5xl lg:text-6xl">
+                  Create Your Account
+                </h2>
                 <p className="text-base">
                   You need a Mango Account to get started.
                 </p>
@@ -337,14 +365,18 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
                 <InlineNotification type="info" desc={t('insufficient-sol')} />
                 <div className="mt-10">
                   <Button
-                    className="mb-6"
-                    onClick={() => handleCreateAccount()}
+                    className="mb-6 flex w-44 items-center justify-center"
+                    onClick={handleCreateAccount}
                     size="large"
                   >
-                    <div className="flex items-center justify-center">
-                      <PlusCircleIcon className="mr-2 h-5 w-5" />
-                      Create Account
-                    </div>
+                    {loadingAccount ? (
+                      <Loading />
+                    ) : (
+                      <div className="flex items-center justify-center">
+                        <PlusCircleIcon className="mr-2 h-5 w-5" />
+                        Create Account
+                      </div>
+                    )}
                   </Button>
                   <LinkButton onClick={onClose}>
                     <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
@@ -354,7 +386,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
                 </div>
               </div>
             </div>
-          )}
+          ) : null}
         </Transition>
         <Transition
           className="h-full w-full max-w-md"
@@ -366,157 +398,138 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          {submitDeposit ? (
-            <div className="flex h-full items-center justify-center">
-              <BounceLoader loadingMessage="Funding your account..." />
-            </div>
-          ) : (
-            <div className="flex h-full flex-col justify-between">
-              <div className="relative">
-                <h2 className="mb-6 text-4xl">Fund Your Account</h2>
-                <Transition
-                  show={depositToken.length > 0}
-                  enter="transition ease-in duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="transition ease-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="flex justify-between">
-                    <Label text="Amount" />
-                    <MaxAmountButton
-                      className="mb-2"
-                      label="Wallet Max"
-                      onClick={() =>
-                        setDepositAmount(
-                          floorToDecimal(
-                            tokenMax.amount,
-                            tokenMax.decimals
-                          ).toFixed()
-                        )
-                      }
-                      value={floorToDecimal(
-                        tokenMax.amount,
-                        tokenMax.decimals
-                      ).toFixed()}
-                    />
-                  </div>
-                  <div className="grid grid-cols-2">
-                    <button
-                      className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-transparent px-4 hover:bg-transparent"
-                      onClick={() => setDepositToken('')}
-                    >
-                      <div className="ml-1.5 flex w-full items-center justify-between">
-                        <div className="flex items-center">
-                          <Image
-                            alt=""
-                            width="20"
-                            height="20"
-                            src={`/icons/${depositToken.toLowerCase()}.svg`}
-                          />
-                          <p className="ml-1.5 text-xl font-bold text-th-fgd-1">
-                            {depositToken}
-                          </p>
-                        </div>
-                        <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
-                      </div>
-                    </button>
-                    <Input
-                      className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
-                      type="text"
-                      name="deposit"
-                      id="deposit"
-                      placeholder="0.00"
-                      value={depositAmount}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        setDepositAmount(e.target.value)
-                      }
-                    />
-                    <div className="col-span-2 mt-2">
-                      <ButtonGroup
-                        activeValue={sizePercentage}
-                        onChange={(p) => handleSizePercentage(p)}
-                        values={['10', '25', '50', '75', '100']}
-                        unit="%"
-                      />
-                    </div>
-                  </div>
-                </Transition>
-                <Transition
-                  show={depositToken.length === 0}
-                  enter="transition ease-in duration-300 delay-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="transition ease-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div
-                    className="thin-scroll h-full w-full overflow-auto"
-                    style={{ maxHeight: 'calc(100vh - 268px)' }}
+          {showSetupStep === 3 ? (
+            <div className="relative">
+              <h2 className="mb-6 text-5xl lg:text-6xl">Fund Your Account</h2>
+              <Transition
+                show={depositToken.length > 0}
+                enter="transition ease-in duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition ease-out duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <div className="flex justify-between">
+                  <Label text="Amount" />
+                  <MaxAmountButton
+                    className="mb-2"
+                    label="Wallet Max"
+                    onClick={() =>
+                      setDepositAmount(
+                        floorToDecimal(
+                          tokenMax.amount,
+                          tokenMax.decimals
+                        ).toFixed()
+                      )
+                    }
+                    value={floorToDecimal(
+                      tokenMax.amount,
+                      tokenMax.decimals
+                    ).toFixed()}
+                  />
+                </div>
+                <div className="mb-10 grid grid-cols-2">
+                  <button
+                    className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-transparent px-4 hover:bg-transparent"
+                    onClick={() => setDepositToken('')}
                   >
-                    <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-                      <div className="">
-                        <p className="text-xs">{t('token')}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="text-xs">{t('deposit-rate')}</p>
-                      </div>
-                      <div className="text-right">
-                        <p className="whitespace-nowrap text-xs">
-                          {t('wallet-balance')}
+                    <div className="ml-1.5 flex w-full items-center justify-between">
+                      <div className="flex items-center">
+                        <Image
+                          alt=""
+                          width="20"
+                          height="20"
+                          src={`/icons/${depositToken.toLowerCase()}.svg`}
+                        />
+                        <p className="ml-1.5 text-xl font-bold text-th-fgd-1">
+                          {depositToken}
                         </p>
                       </div>
+                      <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
                     </div>
-                    <ActionTokenList
-                      banks={banks}
-                      onSelect={setDepositToken}
-                      showDepositRates
-                      sortByKey="walletBalanceValue"
-                      valueKey="walletBalance"
+                  </button>
+                  <Input
+                    className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
+                    type="text"
+                    name="deposit"
+                    id="deposit"
+                    placeholder="0.00"
+                    value={depositAmount}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      setDepositAmount(e.target.value)
+                    }
+                  />
+                  <div className="col-span-2 mt-2">
+                    <ButtonGroup
+                      activeValue={sizePercentage}
+                      onChange={(p) => handleSizePercentage(p)}
+                      values={['10', '25', '50', '75', '100']}
+                      unit="%"
                     />
                   </div>
-                </Transition>
-              </div>
-              <div>
+                </div>
                 <Button
-                  className="mb-6"
+                  className="mb-6 flex w-44 items-center justify-center"
                   disabled={!depositAmount || !depositToken}
                   onClick={handleDeposit}
                   size="large"
                 >
-                  <div className="flex items-center justify-center">
-                    <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
-                    Deposit
-                  </div>
+                  {submitDeposit ? (
+                    <Loading />
+                  ) : (
+                    <div className="flex items-center justify-center">
+                      <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
+                      Deposit
+                    </div>
+                  )}
                 </Button>
                 <LinkButton onClick={onClose}>
                   <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
                     Skip for now
                   </span>
                 </LinkButton>
-              </div>
+              </Transition>
+              <Transition
+                show={depositToken.length === 0}
+                enter="transition ease-in duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition ease-out duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <div
+                  className="thin-scroll absolute top-36 w-full overflow-auto"
+                  style={{ height: 'calc(100vh - 380px)' }}
+                >
+                  <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
+                    <div className="">
+                      <p className="text-xs">{t('token')}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-xs">{t('deposit-rate')}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="whitespace-nowrap text-xs">
+                        {t('wallet-balance')}
+                      </p>
+                    </div>
+                  </div>
+                  <ActionTokenList
+                    banks={banks}
+                    onSelect={setDepositToken}
+                    showDepositRates
+                    sortByKey="walletBalanceValue"
+                    valueKey="walletBalance"
+                  />
+                </div>
+              </Transition>
             </div>
-          )}
+          ) : null}
         </Transition>
       </div>
-      <div className="radial-gradient-bg relative col-span-1 h-screen">
-        <div className="absolute top-6 right-6 z-10" id="repulse">
-          <IconButton hideBg onClick={() => onClose()}>
-            <XMarkIcon className="h-6 w-6 text-th-fgd-3" />
-          </IconButton>
-        </div>
-        <div
-          className="absolute left-1/2 top-1/2 z-10 flex-shrink-0 -translate-x-1/2 -translate-y-1/2"
-          // id="repulse"
-        >
-          <img
-            className="h-96 w-96 flex-shrink-0"
-            src="/logos/logo-mark.svg"
-            alt="next"
-          />
-        </div>
+      <div className="col-span-1 hidden h-screen lg:block">
         <ParticlesBackground />
       </div>
     </div>
diff --git a/components/account/ActionTokenItem.tsx b/components/account/ActionTokenItem.tsx
index 609deabe..68c46d98 100644
--- a/components/account/ActionTokenItem.tsx
+++ b/components/account/ActionTokenItem.tsx
@@ -32,7 +32,7 @@ const ActionTokenItem = ({
 
   return (
     <button
-      className="default-transition grid w-full auto-cols-fr grid-flow-col rounded-md border border-th-bkg-4 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
+      className="default-transition flex grid w-full auto-cols-fr grid-flow-col items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
       onClick={() => onSelect(name)}
       disabled={customValue <= 0}
     >
diff --git a/components/modals/DepositModal.tsx b/components/modals/DepositModal.tsx
index 83db09ba..7f6fd20b 100644
--- a/components/modals/DepositModal.tsx
+++ b/components/modals/DepositModal.tsx
@@ -167,7 +167,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
     onClose()
   }
 
-  // TODO extract into a shared hook for UserSetupModal.tsx
+  // TODO extract into a shared hook for UserSetup.tsx
   const banks = useMemo(() => {
     const banks = group?.banksMapByName
       ? Array.from(group?.banksMapByName, ([key, value]) => {
diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
deleted file mode 100644
index acddd04e..00000000
--- a/components/modals/UserSetupModal.tsx
+++ /dev/null
@@ -1,557 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react'
-import { useTranslation } from 'next-i18next'
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
-import { ModalProps } from '../../types/modal'
-import Input from '../forms/Input'
-import Label from '../forms/Label'
-import Button, { IconButton, LinkButton } from '../shared/Button'
-import InlineNotification from '../shared/InlineNotification'
-import useLocalStorageState from '../../hooks/useLocalStorageState'
-import {
-  ArrowDownTrayIcon,
-  CheckCircleIcon,
-  FireIcon,
-  PencilIcon,
-  PlusCircleIcon,
-  XMarkIcon,
-} from '@heroicons/react/20/solid'
-import { useWallet } from '@solana/wallet-adapter-react'
-import mangoStore from '@store/mangoStore'
-import {
-  EnterBottomExitBottom,
-  EnterRightExitLeft,
-  FadeInFadeOut,
-} from '../shared/Transitions'
-import Image from 'next/legacy/image'
-import BounceLoader from '../shared/BounceLoader'
-import { notify } from '../../utils/notifications'
-import { Wallet } from '@project-serum/anchor'
-import ActionTokenList from '../account/ActionTokenList'
-import { walletBalanceForToken } from './DepositModal'
-import { floorToDecimal } from '../../utils/numbers'
-import { handleWalletConnect } from '../wallet/ConnectWalletButton'
-import { IS_ONBOARDED_KEY } from '../../utils/constants'
-import ParticlesBackground from '../ParticlesBackground'
-import ButtonGroup from '../forms/ButtonGroup'
-import Decimal from 'decimal.js'
-import WalletIcon from '../icons/WalletIcon'
-import EditProfileForm from '@components/profile/EditProfileForm'
-import EditNftProfilePic from '@components/profile/EditNftProfilePic'
-
-const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
-  const { t } = useTranslation()
-  const group = mangoStore((s) => s.group)
-  const { connected, select, wallet, wallets } = useWallet()
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
-  const [accountName, setAccountName] = useState('')
-  const [loadingAccount, setLoadingAccount] = useState(false)
-  const [showSetupStep, setShowSetupStep] = useState(0)
-  const [depositToken, setDepositToken] = useState('')
-  const [depositAmount, setDepositAmount] = useState('')
-  const [submitDeposit, setSubmitDeposit] = useState(false)
-  const [sizePercentage, setSizePercentage] = useState('')
-  const [showEditProfilePic, setShowEditProfilePic] = useState(false)
-  const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
-  const walletTokens = mangoStore((s) => s.wallet.tokens)
-
-  const handleNextStep = () => {
-    setShowSetupStep(showSetupStep + 1)
-  }
-
-  const connectWallet = async () => {
-    if (wallet) {
-      try {
-        await handleWalletConnect(wallet)
-        setShowSetupStep(2)
-        setIsOnboarded(true)
-      } catch (e) {
-        notify({
-          title: 'Setup failed. Refresh and try again.',
-          type: 'error',
-        })
-      }
-    }
-  }
-
-  const handleCreateAccount = useCallback(async () => {
-    const client = mangoStore.getState().client
-    const group = mangoStore.getState().group
-    const actions = mangoStore.getState().actions
-    if (!group || !wallet) return
-    setLoadingAccount(true)
-    try {
-      const tx = await client.createMangoAccount(
-        group,
-        0,
-        accountName || 'Account 1',
-        undefined, // tokenCount
-        undefined, // serum3Count
-        8, // perpCount
-        8 // perpOoCount
-      )
-      actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
-      if (tx) {
-        setLoadingAccount(false)
-        setShowSetupStep(3)
-        notify({
-          title: t('new-account-success'),
-          type: 'success',
-          txid: tx,
-        })
-      }
-    } catch (e: any) {
-      setLoadingAccount(false)
-      notify({
-        title: t('new-account-failed'),
-        txid: e?.signature,
-        type: 'error',
-      })
-      console.error(e)
-    }
-  }, [accountName, wallet, t])
-
-  const handleDeposit = useCallback(async () => {
-    const client = mangoStore.getState().client
-    const group = mangoStore.getState().group
-    const actions = mangoStore.getState().actions
-    const mangoAccount = mangoStore.getState().mangoAccount.current
-
-    if (!mangoAccount || !group) return
-    const bank = group.banksMapByName.get(depositToken)![0]
-    try {
-      setSubmitDeposit(true)
-      const tx = await client.tokenDeposit(
-        group,
-        mangoAccount,
-        bank.mint,
-        parseFloat(depositAmount)
-      )
-      notify({
-        title: 'Transaction confirmed',
-        type: 'success',
-        txid: tx,
-      })
-
-      await actions.reloadMangoAccount()
-      onClose()
-      setSubmitDeposit(false)
-    } catch (e: any) {
-      notify({
-        title: 'Transaction failed',
-        description: e.message,
-        txid: e?.txid,
-        type: 'error',
-      })
-      setSubmitDeposit(false)
-      console.error(e)
-    }
-  }, [depositAmount, depositToken, onClose])
-
-  useEffect(() => {
-    if (mangoAccount && showSetupStep === 2) {
-      onClose()
-    }
-  }, [mangoAccount, showSetupStep, onClose])
-
-  // TODO extract into a shared hook for DepositModal.tsx
-  const banks = useMemo(() => {
-    const banks = group?.banksMapByName
-      ? Array.from(group?.banksMapByName, ([key, value]) => {
-          const walletBalance = walletBalanceForToken(walletTokens, key)
-          return {
-            key,
-            value,
-            tokenDecimals: walletBalance.maxDecimals,
-            walletBalance: floorToDecimal(
-              walletBalance.maxAmount,
-              walletBalance.maxDecimals
-            ).toNumber(),
-            walletBalanceValue: walletBalance.maxAmount * value[0]?.uiPrice!,
-          }
-        })
-      : []
-    return banks
-  }, [group?.banksMapByName, walletTokens])
-
-  const tokenMax = useMemo(() => {
-    const bank = banks.find((bank) => bank.key === depositToken)
-    if (bank) {
-      return { amount: bank.walletBalance, decimals: bank.tokenDecimals }
-    }
-    return { amount: 0, decimals: 0 }
-  }, [banks, depositToken])
-
-  const handleSizePercentage = useCallback(
-    (percentage: string) => {
-      setSizePercentage(percentage)
-      let amount = new Decimal(tokenMax.amount).mul(percentage).div(100)
-      if (percentage !== '100') {
-        amount = floorToDecimal(amount, tokenMax.decimals)
-      }
-
-      setDepositAmount(amount.toString())
-    },
-    [tokenMax]
-  )
-
-  return (
-    <Dialog
-      open={isOpen}
-      onClose={onClose}
-      className="fixed inset-0 z-30 overflow-y-auto"
-    >
-      <div className="min-h-screen px-4 text-center">
-        <Dialog.Overlay
-          className={`intro-bg pointer-events-none fixed inset-0 bg-th-bkg-1 opacity-80`}
-        />
-        {/* <div className="absolute top-6 left-6 z-10" id="repulse">
-          <img className="h-10 w-auto" src="/logos/logo-mark.svg" alt="next" />
-        </div> */}
-        <div className="absolute top-6 right-6 z-10" id="repulse">
-          <IconButton hideBg onClick={() => onClose()}>
-            <XMarkIcon className="h-6 w-6 text-th-fgd-2" />
-          </IconButton>
-        </div>
-        <div className="absolute bottom-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
-          <div
-            style={{
-              width: `${(showSetupStep / 4) * 100}%`,
-            }}
-            className="flex rounded bg-th-primary transition-all duration-700 ease-out"
-          />
-        </div>
-        <ParticlesBackground />
-        <span className="inline-block h-screen align-middle" aria-hidden="true">
-          &#8203;
-        </span>
-        <div className="m-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg p-6 text-left align-middle">
-          <div className="h-[420px]">
-            <Transition
-              appear={true}
-              className="absolute top-0.5 left-0 z-20 h-full w-full rounded-lg bg-th-bkg-1 p-6"
-              show={showSetupStep === 0}
-              enter="transition ease-in duration-500"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="transition ease-out duration-500"
-              leaveFrom="translate-x-0"
-              leaveTo="-translate-x-full"
-            >
-              <h2 className="mb-6 text-4xl">Welcome</h2>
-              <p className="mb-4">
-                {
-                  "You're seconds away from trading the most liquid dex markets on Solana."
-                }
-              </p>
-              <div className="mb-6 space-y-2 border-y border-th-bkg-4 py-4">
-                <div className="flex items-center space-x-2">
-                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                  <p className="text-th-fgd-1">
-                    Trusted by 1,000s of DeFi users
-                  </p>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                  <p className="text-th-fgd-1">Deeply liquid markets</p>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                  <p className="text-th-fgd-1">
-                    Up to 20x leverage across 100s of tokens
-                  </p>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                  <p className="text-th-fgd-1">
-                    Earn interest on your deposits
-                  </p>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                  <p className="text-th-fgd-1">
-                    Borrow 100s of tokens with many collateral options
-                  </p>
-                </div>
-              </div>
-              <Button className="w-full" onClick={handleNextStep} size="large">
-                <div className="flex items-center justify-center">
-                  <FireIcon className="mr-2 h-5 w-5" />
-                  {"Let's Go"}
-                </div>
-              </Button>
-            </Transition>
-            <EnterRightExitLeft
-              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
-              show={showSetupStep === 1}
-              style={{ height: 'calc(100% - 12px)' }}
-            >
-              {connected && mangoAccountLoading ? (
-                <div className="flex h-full items-center justify-center">
-                  <BounceLoader />
-                </div>
-              ) : (
-                <div className="flex h-full flex-col justify-between">
-                  <div>
-                    <div className="mb-4">
-                      <h2 className="mb-6 text-4xl">Connect Wallet</h2>
-                    </div>
-                    <p className="mb-2">Choose Wallet</p>
-                    <div className="thin-scroll grid max-h-56 grid-flow-row grid-cols-3 gap-2 overflow-y-auto">
-                      {wallets?.map((w) => (
-                        <button
-                          className={`col-span-1 rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
-                            w.adapter.name === wallet?.adapter.name
-                              ? 'border-th-primary text-th-fgd-1 md:hover:border-th-primary'
-                              : 'border-th-bkg-4 text-th-fgd-4'
-                          }`}
-                          onClick={() => {
-                            select(w.adapter.name)
-                          }}
-                          key={w.adapter.name}
-                        >
-                          <div className="flex items-center">
-                            <img
-                              src={w.adapter.icon}
-                              className="mr-2 h-5 w-5"
-                              alt={`${w.adapter.name} icon`}
-                            />
-                            {w.adapter.name}
-                          </div>
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                  <Button
-                    className="w-full"
-                    onClick={connectWallet}
-                    size="large"
-                  >
-                    <div className="flex items-center justify-center">
-                      <WalletIcon className="mr-2 h-5 w-5" />
-                      Connect Wallet
-                    </div>
-                  </Button>
-                </div>
-              )}
-            </EnterRightExitLeft>
-            <EnterRightExitLeft
-              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
-              show={showSetupStep === 2}
-              style={{ height: 'calc(100% - 12px)' }}
-            >
-              {loadingAccount ? (
-                <div className="flex h-full items-center justify-center">
-                  <BounceLoader loadingMessage="Creating Account..." />
-                </div>
-              ) : (
-                <div className="flex h-full flex-col justify-between">
-                  <div>
-                    <div className="pb-4">
-                      <h2 className="mb-6 text-4xl">Create Account</h2>
-                      <p>You need a Mango Account to get started.</p>
-                    </div>
-                    <div className="pb-4">
-                      <Label text="Account Name" optional />
-                      <Input
-                        type="text"
-                        name="name"
-                        id="name"
-                        placeholder="Account"
-                        value={accountName}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                          setAccountName(e.target.value)
-                        }
-                      />
-                    </div>
-                  </div>
-                  <div className="space-y-6">
-                    <InlineNotification
-                      type="info"
-                      desc={t('insufficient-sol')}
-                    />
-                    <div className="">
-                      <Button
-                        className="mb-4 w-full"
-                        onClick={() => handleCreateAccount()}
-                        size="large"
-                      >
-                        <div className="flex items-center justify-center">
-                          <PlusCircleIcon className="mr-2 h-5 w-5" />
-                          Create Account
-                        </div>
-                      </Button>
-                      <LinkButton
-                        className="flex w-full justify-center"
-                        onClick={onClose}
-                      >
-                        <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
-                          Skip for now
-                        </span>
-                      </LinkButton>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </EnterRightExitLeft>
-            <EnterRightExitLeft
-              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
-              show={showSetupStep === 3}
-              style={{ height: 'calc(100% - 12px)' }}
-            >
-              {submitDeposit ? (
-                <div className="flex h-full items-center justify-center">
-                  <BounceLoader loadingMessage="Funding your account..." />
-                </div>
-              ) : (
-                <div className="flex h-full flex-col justify-between">
-                  <div className="relative">
-                    <h2 className="mb-6 text-4xl">Fund Your Account</h2>
-                    <FadeInFadeOut show={!!depositToken}>
-                      <div className="flex justify-between">
-                        <Label text="Amount" />
-                        <LinkButton
-                          className="mb-2 no-underline"
-                          onClick={() =>
-                            setDepositAmount(
-                              floorToDecimal(
-                                tokenMax.amount,
-                                tokenMax.decimals
-                              ).toFixed()
-                            )
-                          }
-                        >
-                          <span className="mr-1 text-sm font-normal text-th-fgd-4">
-                            {t('wallet-balance')}:
-                          </span>
-                          <span className="text-th-fgd-1 underline">
-                            {floorToDecimal(
-                              tokenMax.amount,
-                              tokenMax.decimals
-                            ).toFixed()}
-                          </span>
-                        </LinkButton>
-                      </div>
-                      <div className="grid grid-cols-2">
-                        <button
-                          className="col-span-1 flex items-center rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-transparent px-4 hover:bg-transparent"
-                          onClick={() => setDepositToken('')}
-                        >
-                          <div className="ml-1.5 flex w-full items-center justify-between">
-                            <div className="flex items-center">
-                              <Image
-                                alt=""
-                                width="20"
-                                height="20"
-                                src={`/icons/${depositToken.toLowerCase()}.svg`}
-                              />
-                              <p className="ml-1.5 text-xl font-bold text-th-fgd-1">
-                                {depositToken}
-                              </p>
-                            </div>
-                            <PencilIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
-                          </div>
-                        </button>
-                        <Input
-                          className="col-span-1 w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-transparent p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
-                          type="text"
-                          name="deposit"
-                          id="deposit"
-                          placeholder="0.00"
-                          value={depositAmount}
-                          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            setDepositAmount(e.target.value)
-                          }
-                        />
-                        <div className="col-span-2 mt-2">
-                          <ButtonGroup
-                            activeValue={sizePercentage}
-                            onChange={(p) => handleSizePercentage(p)}
-                            values={['10', '25', '50', '75', '100']}
-                            unit="%"
-                          />
-                        </div>
-                      </div>
-                    </FadeInFadeOut>
-                    {!depositToken ? (
-                      <div className="thin-scroll absolute top-14 mt-2 h-52 w-full overflow-auto">
-                        <div className="grid auto-cols-fr grid-flow-col px-4 pb-2">
-                          <div className="">
-                            <p className="text-xs">{t('token')}</p>
-                          </div>
-                          <div className="text-right">
-                            <p className="text-xs">{t('deposit-rate')}</p>
-                          </div>
-                          <div className="text-right">
-                            <p className="whitespace-nowrap text-xs">
-                              {t('wallet-balance')}
-                            </p>
-                          </div>
-                        </div>
-                        <ActionTokenList
-                          banks={banks}
-                          onSelect={setDepositToken}
-                          showDepositRates
-                          sortByKey="walletBalanceValue"
-                          valueKey="walletBalance"
-                        />
-                      </div>
-                    ) : null}
-                  </div>
-                  <div className="flex flex-col items-center">
-                    <Button
-                      className="mb-4 w-full"
-                      disabled={!depositAmount || !depositToken}
-                      onClick={handleDeposit}
-                      size="large"
-                    >
-                      <div className="flex items-center justify-center">
-                        <ArrowDownTrayIcon className="mr-2 h-5 w-5" />
-                        Deposit
-                      </div>
-                    </Button>
-                    <LinkButton onClick={onClose}>
-                      <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
-                        Skip for now
-                      </span>
-                    </LinkButton>
-                  </div>
-                </div>
-              )}
-            </EnterRightExitLeft>
-            <EnterRightExitLeft
-              className="absolute top-0.5 left-0 z-20 w-full rounded-lg bg-th-bkg-1 p-6"
-              show={showSetupStep === 4}
-              style={{ height: 'calc(100% - 12px)' }}
-            >
-              <h2 className="mb-2 text-4xl">Your Profile</h2>
-              <p className="text-sm">
-                Add an NFT profile pic and edit your assigned name. Your profile
-                will be used for social features in the app.
-              </p>
-              <EditProfileForm
-                onFinish={onClose}
-                onEditProfileImage={() => setShowEditProfilePic(true)}
-              />
-              <LinkButton className="mx-auto mt-4" onClick={onClose}>
-                <span className="default-transition text-th-fgd-4 underline md:hover:text-th-fgd-3 md:hover:no-underline">
-                  Skip and Finish
-                </span>
-              </LinkButton>
-              <EnterBottomExitBottom
-                className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
-                show={showEditProfilePic}
-              >
-                <EditNftProfilePic
-                  onClose={() => setShowEditProfilePic(false)}
-                />
-              </EnterBottomExitBottom>
-            </EnterRightExitLeft>
-          </div>
-        </div>
-      </div>
-    </Dialog>
-  )
-}
-
-export default UserSetupModal
diff --git a/components/swap/SwapPage.tsx b/components/swap/SwapPage.tsx
index bb191e98..829137e4 100644
--- a/components/swap/SwapPage.tsx
+++ b/components/swap/SwapPage.tsx
@@ -4,6 +4,8 @@ import SwapOnboardingTour from '@components/tours/SwapOnboardingTour'
 import { useWallet } from '@solana/wallet-adapter-react'
 import SwapInfoTabs from './SwapInfoTabs'
 import dynamic from 'next/dynamic'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { IS_ONBOARDED_KEY } from 'utils/constants'
 const SwapTokenChart = dynamic(() => import('./SwapTokenChart'), { ssr: false })
 
 const SwapPage = () => {
@@ -11,6 +13,7 @@ const SwapPage = () => {
   const outputTokenInfo = mangoStore((s) => s.swap.outputTokenInfo)
   const { connected } = useWallet()
   const tourSettings = mangoStore((s) => s.settings.tours)
+  const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
 
   return (
     <>
@@ -31,7 +34,7 @@ const SwapPage = () => {
           <SwapInfoTabs />
         </div>
       </div>
-      {!tourSettings?.swap_tour_seen && connected ? (
+      {!tourSettings?.swap_tour_seen && isOnboarded && connected ? (
         <SwapOnboardingTour />
       ) : null}
     </>
diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index 7f7d8dcf..57d3a2c0 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -91,7 +91,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
   const chartDataQuery = useQuery(
     ['chart-data', baseTokenId, quoteTokenId, daysToShow],
     () => fetchChartData(baseTokenId, quoteTokenId, daysToShow),
-    { staleTime: 120000 }
+    { staleTime: 0 }
   )
   const chartData = chartDataQuery.data
 
diff --git a/components/trade/TradeAdvancedPage.tsx b/components/trade/TradeAdvancedPage.tsx
index e0426bea..93e78deb 100644
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
 import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
 
 import mangoStore from '@store/mangoStore'
-import { GRID_LAYOUT_KEY } from 'utils/constants'
+import { GRID_LAYOUT_KEY, IS_ONBOARDED_KEY } from 'utils/constants'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { breakpoints } from 'utils/theme'
 import { useViewport } from 'hooks/useViewport'
@@ -53,6 +53,7 @@ const TradeAdvancedPage = () => {
   const showMobileView = width <= breakpoints.md
   const tourSettings = mangoStore((s) => s.settings.tours)
   const { connected } = useWallet()
+  const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
 
   const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
     const topnavbarHeight = 67
@@ -224,7 +225,7 @@ const TradeAdvancedPage = () => {
           <OrderbookAndTrades />
         </div>
       </ResponsiveGridLayout>
-      {!tourSettings?.trade_tour_seen && connected ? (
+      {!tourSettings?.trade_tour_seen && isOnboarded && connected ? (
         <TradeOnboardingTour />
       ) : null}
     </>
diff --git a/public/images/trade.png b/public/images/trade.png
new file mode 100644
index 00000000..cfcdfb43
Binary files /dev/null and b/public/images/trade.png differ
diff --git a/styles/globals.css b/styles/globals.css
index d8250fa1..4ddafb1b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -420,12 +420,10 @@ input[type='range']::-webkit-slider-runnable-track {
 
 .radial-gradient-bg {
   background-image: radial-gradient(
-      at -100% -100%,
-      var(--red) 0,
-      transparent 65%
-    ),
-    radial-gradient(at 300% 200%, var(--button) 0, transparent 75%);
-  /* radial-gradient(at -100% 200%, var(--primary) 0, transparent 65%); */
+    at 300% 100%,
+    var(--button) 0,
+    transparent 75%
+  );
   @apply bg-th-bkg-1;
 }