diff --git a/components/AccountStats.tsx b/components/AccountStats.tsx
index 80c577b..69637c1 100644
--- a/components/AccountStats.tsx
+++ b/components/AccountStats.tsx
@@ -1,48 +1,47 @@
-import useMangoGroup from 'hooks/useMangoGroup'
-import { useMemo } from 'react'
-import FormatNumericValue from './shared/FormatNumericValue'
-import useMangoAccount from 'hooks/useMangoAccount'
+// import useMangoGroup from 'hooks/useMangoGroup'
+// import { useMemo } from 'react'
+// import FormatNumericValue from './shared/FormatNumericValue'
+// import useMangoAccount from 'hooks/useMangoAccount'
 
 const AccountStats = ({ token }: { token: string }) => {
-  const { mangoAccount } = useMangoAccount()
-  const { group } = useMangoGroup()
+  // const { mangoAccount } = useMangoAccount()
+  // const { group } = useMangoGroup()
 
-  const bank = useMemo(() => {
-    if (!group) return undefined
-    return group.banksMapByName.get(token)?.[0]
-  }, [group, token])
+  // const bank = useMemo(() => {
+  //   if (!group) return undefined
+  //   return group.banksMapByName.get(token)?.[0]
+  // }, [group, token])
 
-  const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
+  // const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
 
   return (
-    <div className="my-8 ml-4 mr-8">
-      <div className="grid grid-cols-2 gap-8">
+    <>
+      <h2 className="mb-4 text-2xl">{`Boosted ${token}`}</h2>
+      <div className="grid grid-cols-1 gap-6">
         <div>
-          <div>Est. {token} APR</div>
-          <div className="text-2xl font-bold">14.89%</div>
+          <p className="mb-1">Est. APR</p>
+          <span className="text-2xl font-bold">14.89%</span>
         </div>
         <div>
-          <div>Max Leverage</div>
-          <div className="text-2xl font-bold">3x</div>
+          <p className="mb-1">Max Leverage</p>
+          <span className="text-2xl font-bold">3x</span>
         </div>
         <div>
-          <div>Available to borrow</div>
-          <div className="text-2xl font-bold">100,000</div>
+          <p className="mb-1">Capacity Remaining</p>
+          <span className="text-2xl font-bold">100,000 SOL</span>
         </div>
         <div>
+          <p className="mb-1">Total Staked</p>
+          <span className="text-2xl font-bold">{`100,000 ${token}`}</span>
+        </div>
+        {/* <div>
           <div>Your position</div>
           <div className="text-2xl font-bold">
             {bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0}
           </div>
-        </div>
-        <div>
-          <div>Title Here</div>
-        </div>
-        <div>
-          <div>Title Here</div>
-        </div>
+        </div> */}
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/components/StakeForm.tsx b/components/StakeForm.tsx
index d660f7e..a4cc1a3 100644
--- a/components/StakeForm.tsx
+++ b/components/StakeForm.tsx
@@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 // import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
-import TokenListButton from './shared/TokenListButton'
+// import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@@ -94,7 +94,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
   const { group } = useMangoGroup()
 
   const stakeBank = useMemo(() => {
-    return group?.banksMapByName.get(selectedToken)?.[0]
+    const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
+    return group?.banksMapByName.get(bankName)?.[0]
   }, [selectedToken, group])
 
   const solBank = useMemo(() => {
@@ -236,8 +237,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
         /> */}
       </EnterBottomExitBottom>
       <FadeInFadeOut show={!showTokenList}>
-        <div className="m-6 flex flex-col justify-between">
-          <div>
+        <div className="flex flex-col justify-between">
+          <div className="pb-8">
             <SolBalanceWarnings
               amount={inputAmount}
               className="mb-4"
@@ -246,7 +247,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
             />
             <div className="grid grid-cols-2">
               <div className="col-span-2 flex justify-between">
-                <Label text={`Stake Token`} />
+                <Label text="Amount" />
                 <div className="mb-2 flex items-center space-x-2">
                   <MaxAmountButton
                     decimals={tokenMax.maxDecimals}
@@ -265,38 +266,49 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   </Tooltip>
                 </div>
               </div>
-              <div className="col-span-1">
+              {/* <div className="col-span-1">
                 <TokenListButton
                   token={selectedToken}
                   logo={<TokenLogo bank={stakeBank} />}
                   setShowList={setShowTokenList}
                 />
-              </div>
-              <div className="col-span-1">
-                <NumberFormat
-                  name="amountIn"
-                  id="amountIn"
-                  inputMode="decimal"
-                  thousandSeparator=","
-                  allowNegative={false}
-                  isNumericString={true}
-                  decimalScale={6}
-                  className={
-                    'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
-                  }
-                  placeholder="0.00"
-                  value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
-                    )
-                  }}
-                  isAllowed={withValueLimit}
-                />
+              </div> */}
+              <div className="col-span-2">
+                <div className="relative">
+                  <NumberFormat
+                    name="amountIn"
+                    id="amountIn"
+                    inputMode="decimal"
+                    thousandSeparator=","
+                    allowNegative={false}
+                    isNumericString={true}
+                    decimalScale={6}
+                    className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
+                    placeholder="0.00"
+                    value={inputAmount}
+                    onValueChange={(e: NumberFormatValues) => {
+                      setInputAmount(
+                        !Number.isNaN(Number(e.value)) ? e.value : '',
+                      )
+                    }}
+                    isAllowed={withValueLimit}
+                  />
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    <TokenLogo bank={stakeBank} size={24} />
+                  </div>
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <span className="font-bold text-th-fgd-1">
+                      {selectedToken}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
-            <div className="mt-3">
-              <div>Leverage: {leverage}x</div>
+            <div className="mt-4">
+              <div className="flex items-center justify-between">
+                <Label text="Leverage" />
+                <p className="font-bold text-th-fgd-1">{leverage}x</p>
+              </div>
               <LeverageSlider
                 amount={leverage}
                 leverageMax={3}
@@ -306,7 +318,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
             </div>
             {stakeBank && solBank ? (
               <>
-                <div className="mt-2 space-y-1.5 px-2 py-4 text-sm">
+                <div className="mt-2 space-y-1.5 px-2 py-4">
                   <div className="flex justify-between">
                     <p>{t('deposit-amount')}</p>
                     <BankAmountWithValue
@@ -315,19 +327,21 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                     />
                   </div>
                   <div className="flex justify-between">
-                    <p>SOL borrowed</p>
+                    <p>SOL Borrowed</p>
                     {solBank ? (
-                      <FormatNumericValue
-                        value={solAmountToBorrow}
-                        decimals={3}
-                      />
+                      <span className="text-th-fgd-1">
+                        <FormatNumericValue
+                          value={solAmountToBorrow}
+                          decimals={3}
+                        />
+                      </span>
                     ) : null}
                   </div>
                 </div>
-                <div className="space-y-1.5 border-t border-th-bkg-3 px-2 py-4 text-sm ">
+                <div className="space-y-1.5 border-t border-th-bkg-3 px-2 pt-4">
                   <div className="flex justify-between">
                     <p>{selectedToken} Leveraged APR</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                       <FormatNumericValue
                         value={7.28 * leverage}
                         decimals={2}
@@ -337,7 +351,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   </div>
                   <div className="flex justify-between">
                     <p>{selectedToken} Deposit Rate</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                       <FormatNumericValue
                         value={stakeBank.getDepositRateUi()}
                         decimals={2}
@@ -347,7 +361,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   </div>
                   <div className="flex justify-between">
                     <p>SOL Borrow Rate</p>
-                    <span>
+                    <span className="text-th-fgd-1">
                       <FormatNumericValue
                         value={solBank.getDepositRateUi()}
                         decimals={2}
diff --git a/components/TokenButton.tsx b/components/TokenButton.tsx
index 5559d96..033feb6 100644
--- a/components/TokenButton.tsx
+++ b/components/TokenButton.tsx
@@ -10,18 +10,23 @@ const TokenButton = ({
   handleTokenSelect: (v: string) => void
 }) => {
   return (
-    <button onClick={() => handleTokenSelect(tokenName)}>
-      <div
-        className={`h-16 w-16 rounded-full border  bg-th-bkg-1 p-4 hover:cursor-pointer hover:border-2 hover:border-orange-400 ${
-          selectedToken === tokenName ? 'border-black' : ''
-        }`}
-      >
+    <button
+      className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4  first:rounded-tl-2xl last:rounded-tr-2xl last:border-transparent hover:cursor-pointer ${
+        selectedToken === tokenName ? 'bg-th-bkg-2' : ''
+      }`}
+      onClick={() => handleTokenSelect(tokenName)}
+    >
+      <div className="flex flex-col items-center">
         <Image
           src={`/icons/${tokenName.toLowerCase()}.svg`}
-          width={100}
-          height={100}
+          width={40}
+          height={40}
           alt="Select a token"
         />
+        <span className="mt-2 text-lg font-bold text-th-fgd-1">
+          {tokenName}
+        </span>
+        <span>14.89%</span>
       </div>
     </button>
   )
diff --git a/components/UnstakeForm.tsx b/components/UnstakeForm.tsx
index 921f4a8..85eeb15 100644
--- a/components/UnstakeForm.tsx
+++ b/components/UnstakeForm.tsx
@@ -23,7 +23,7 @@ import { floorToDecimal, withValueLimit } from 'utils/numbers'
 import BankAmountWithValue from './shared/BankAmountWithValue'
 // import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
-import TokenListButton from './shared/TokenListButton'
+// import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
@@ -79,7 +79,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
   const { mangoAccount } = useMangoAccount()
 
   const stakeBank = useMemo(() => {
-    return group?.banksMapByName.get(selectedToken)?.[0]
+    const bankName = selectedToken === 'mSOL' ? 'MSOL' : selectedToken
+    return group?.banksMapByName.get(bankName)?.[0]
   }, [selectedToken, group])
 
   const solBank = useMemo(() => {
@@ -203,8 +204,8 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
         /> */}
       </EnterBottomExitBottom>
       <FadeInFadeOut show={!showTokenList}>
-        <div className="m-6 flex flex-col justify-between">
-          <div>
+        <div className="flex flex-col justify-between">
+          <div className="pb-8">
             <SolBalanceWarnings
               amount={inputAmount}
               className="mb-4"
@@ -213,7 +214,7 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
             />
             <div className="grid grid-cols-2">
               <div className="col-span-2 flex justify-between">
-                <Label text={`Stake Token`} />
+                <Label text="Amount" />
                 <div className="mb-2 flex items-center space-x-2">
                   <MaxAmountButton
                     decimals={tokenMax.maxDecimals}
@@ -232,41 +233,49 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
                   </Tooltip>
                 </div>
               </div>
-              <div className="col-span-1">
+              {/* <div className="col-span-1">
                 <TokenListButton
                   token={selectedToken}
                   logo={<TokenLogo bank={stakeBank} />}
                   setShowList={setShowTokenList}
                 />
-              </div>
-              <div className="col-span-1">
-                <NumberFormat
-                  name="amountIn"
-                  id="amountIn"
-                  inputMode="decimal"
-                  thousandSeparator=","
-                  allowNegative={false}
-                  isNumericString={true}
-                  decimalScale={stakeBank?.mintDecimals || 6}
-                  className={
-                    'w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
-                  }
-                  placeholder="0.00"
-                  value={inputAmount}
-                  onValueChange={(e: NumberFormatValues) => {
-                    setInputAmount(
-                      !Number.isNaN(Number(e.value)) ? e.value : '',
-                    )
-                  }}
-                  isAllowed={withValueLimit}
-                />
+              </div> */}
+              <div className="col-span-2">
+                <div className="relative">
+                  <NumberFormat
+                    name="amountIn"
+                    id="amountIn"
+                    inputMode="decimal"
+                    thousandSeparator=","
+                    allowNegative={false}
+                    isNumericString={true}
+                    decimalScale={stakeBank?.mintDecimals || 6}
+                    className="w-full rounded-xl border border-th-input-border bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4"
+                    placeholder="0.00"
+                    value={inputAmount}
+                    onValueChange={(e: NumberFormatValues) => {
+                      setInputAmount(
+                        !Number.isNaN(Number(e.value)) ? e.value : '',
+                      )
+                    }}
+                    isAllowed={withValueLimit}
+                  />
+                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                    <TokenLogo bank={stakeBank} size={24} />
+                  </div>
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                    <span className="font-bold text-th-fgd-1">
+                      {selectedToken}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
             {stakeBank && solBank ? (
               <>
-                <div className="mt-2 space-y-1.5 px-2 py-4 text-sm">
+                <div className="mt-2 space-y-1.5 px-2 pt-4">
                   <div className="flex justify-between">
-                    <p>Staked amount</p>
+                    <p>Staked Amount</p>
                     <BankAmountWithValue
                       amount={tokenMax.maxAmount}
                       bank={stakeBank}
@@ -275,7 +284,9 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
                   <div className="flex justify-between">
                     <p>SOL borrowed</p>
                     {solBank ? (
-                      <FormatNumericValue value={solBorrowed} decimals={3} />
+                      <span className="text-th-fgd-1">
+                        <FormatNumericValue value={solBorrowed} decimals={3} />
+                      </span>
                     ) : null}
                   </div>
                 </div>
diff --git a/components/forms/Label.tsx b/components/forms/Label.tsx
index 1e529fa..f76a6d6 100644
--- a/components/forms/Label.tsx
+++ b/components/forms/Label.tsx
@@ -7,7 +7,9 @@ const Label = ({
   optional?: boolean
   className?: string
 }) => (
-  <p className={`mb-2 text-left text-sm text-th-fgd-3 ${className}`}>
+  <p
+    className={`mb-2 text-left text-base font-bold text-th-fgd-2 ${className}`}
+  >
     {text}{' '}
     {optional ? (
       <span className="ml-1 text-xs text-th-fgd-4">(Optional)</span>
diff --git a/components/shared/BankAmountWithValue.tsx b/components/shared/BankAmountWithValue.tsx
index fe16567..f8babbf 100644
--- a/components/shared/BankAmountWithValue.tsx
+++ b/components/shared/BankAmountWithValue.tsx
@@ -16,13 +16,13 @@ const BankAmountWithValue = ({
   value?: number
 }) => {
   return (
-    <p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}>
+    <p className={`font-mono text-th-fgd-1 ${stacked ? 'text-right' : ''}`}>
       <>
         <FormatNumericValue
           value={amount}
           decimals={amount && fixDecimals ? bank.mintDecimals : undefined}
         />{' '}
-        <span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}>
+        <span className={`text-th-fgd-3 ${stacked ? 'block' : ''}`}>
           <FormatNumericValue
             value={value ? value : Number(amount) * bank.uiPrice}
             decimals={fixDecimals ? 2 : undefined}
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
index dfaaa73..f61715a 100644
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@@ -33,7 +33,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`rounded-md ${
+      className={`rounded-xl ${
         themeData.buttonStyle === 'raised'
           ? 'raised-button'
           : secondary
@@ -43,7 +43,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
         size === 'medium'
           ? 'h-10 px-4'
           : size === 'large'
-          ? 'h-12 px-6'
+          ? 'h-14 px-8'
           : 'h-8 px-3'
       } font-display ${
         theme === 'High Contrast' && !secondary
diff --git a/components/shared/MaxAmountButton.tsx b/components/shared/MaxAmountButton.tsx
index 258a540..4c48353 100644
--- a/components/shared/MaxAmountButton.tsx
+++ b/components/shared/MaxAmountButton.tsx
@@ -23,7 +23,7 @@ const MaxAmountButton = ({
       disabled={disabled}
       onClick={onClick}
     >
-      <p className="mr-1 text-th-fgd-4">{label}:</p>
+      <p className="mr-1 text-th-fgd-2">{label}:</p>
       <span className="font-mono">
         <FormatNumericValue value={value} decimals={decimals} />
       </span>
diff --git a/components/shared/TabUnderline.tsx b/components/shared/TabUnderline.tsx
index 7e63fba..9347413 100644
--- a/components/shared/TabUnderline.tsx
+++ b/components/shared/TabUnderline.tsx
@@ -18,21 +18,9 @@ const TabUnderline = <T extends Values>({
   fillWidth = true,
 }: TabUnderlineProps<T>) => {
   return (
-    <div
-      className={`relative mb-3 border-b border-th-bkg-3 ${
-        values.includes('buy' as T) || values.includes('sell' as T)
-          ? 'pb-1 font-display md:pb-2.5'
-          : 'pb-1 font-bold'
-      } md:-mt-2.5`}
-    >
+    <div className={`relative mb-3 border-b border-th-bkg-3 pb-1 font-bold`}>
       <div
-        className={`absolute bottom-[-1px] left-0 h-0.5 ${
-          activeValue === 'buy'
-            ? 'bg-th-up'
-            : activeValue === 'sell'
-            ? 'bg-th-down'
-            : 'bg-th-active'
-        }`}
+        className={`absolute bottom-[-1px] left-0 h-1 bg-th-active`}
         style={{
           maxWidth: !fillWidth ? '176px' : '',
           transform: `translateX(${
@@ -48,8 +36,8 @@ const TabUnderline = <T extends Values>({
             className={`relative flex h-10 w-1/2 ${
               fillWidth ? '' : 'max-w-[176px]'
             }
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${
-              small ? 'text-sm' : 'text-sm lg:text-base'
+            cursor-pointer items-center justify-center whitespace-nowrap rounded pb-2 focus-visible:text-th-fgd-2 md:h-auto md:rounded-none md:hover:opacity-100 ${
+              small ? 'text-sm' : 'text-lg lg:text-xl'
             }
             ${
               activeValue === value
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e3f28d5..29e4444 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -132,7 +132,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             autoConnect={autoConnect}
           >
             <MangoProvider />
-            <ThemeProvider storageKey={THEME_KEY}>
+            <ThemeProvider defaultTheme="Light" storageKey={THEME_KEY}>
               <PageTitle />
               <Layout>
                 <Component {...pageProps} />
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 0dad8e7..767c6a0 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,10 +12,10 @@ class MyDocument extends Document {
           ></Script>
         </Head>
         <body className="hide-scroll">
-          <div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600">
-            <Main />
-            <NextScript />
-          </div>
+          {/* <div className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-lime-600 via-yellow-300 to-red-600"> */}
+          <Main />
+          <NextScript />
+          {/* </div> */}
         </body>
       </Html>
     )
diff --git a/pages/index.tsx b/pages/index.tsx
index 3c3987a..fddeb13 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,9 +7,10 @@ import mangoStore from '@store/mangoStore'
 import type { NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useCallback, useEffect, useState } from 'react'
-import { ACCOUNT_ACTION_MODAL_INNER_HEIGHT } from 'utils/constants'
 import { ACCOUNT_PREFIX } from 'utils/transactions'
 
+const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'LDO']
+
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
     props: {
@@ -22,7 +23,8 @@ const set = mangoStore.getState().set
 
 const Index: NextPage = () => {
   const [activeTab, setActiveTab] = useState('Stake')
-  const [selectedToken, setSelectedToken] = useState('MSOL')
+  const [activeFormTab, setActiveFormTab] = useState('Add')
+  const [selectedToken, setSelectedToken] = useState(STAKEABLE_TOKENS[0])
 
   useEffect(() => {
     const mangoAccounts = mangoStore.getState().mangoAccounts
@@ -45,68 +47,67 @@ const Index: NextPage = () => {
   }, [])
 
   return (
-    <div className="m-auto max-w-4xl flex-col">
+    <div className="mx-auto max-w-4xl flex-col pb-20">
       <div className="flex-col">
         {/* <div className="mb-4 text-center text-5xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
           LEVERAGE STAKE SOL
         </div> */}
-        <div className="mt-8 flex justify-center space-x-4">
-          <div className="flex-col">
+        <div className="mb-6 grid grid-cols-2 rounded-xl border border-th-fgd-1">
+          <button
+            className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
+              activeTab === 'Stake'
+                ? 'bg-th-bkg-2 text-th-fgd-1'
+                : 'text-th-fgd-3'
+            }`}
+            onClick={() => setActiveTab('Stake')}
+          >
+            Stake
+          </button>
+          <button
+            className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
+              activeTab === 'Positions'
+                ? 'bg-th-bkg-2 text-th-fgd-1'
+                : 'text-th-fgd-3'
+            }`}
+            onClick={() => setActiveTab('Positions')}
+          >
+            Your Positions
+          </button>
+        </div>
+        {/* <h2 className="mb-4 text-xl">Tokens</h2> */}
+        <div className="grid grid-cols-4 rounded-t-2xl border border-b-0 border-th-fgd-1">
+          {STAKEABLE_TOKENS.map((token) => (
             <TokenButton
+              key={token}
               handleTokenSelect={handleTokenSelect}
               selectedToken={selectedToken}
-              tokenName="MSOL"
+              tokenName={token}
             />
-            <div className="text-center">mSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="JitoSOL"
-            />
-            <div className="text-center">JitoSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="stSOL"
-            />
-            <div className="text-center">stSOL</div>
-          </div>
-          <div className="flex-col">
-            <TokenButton
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName="LDO"
-            />
-            <div className="text-center">LDO</div>
-          </div>
+          ))}
         </div>
       </div>
-      <div className="mt-4 flex w-full max-w-4xl">
+      <div className="grid max-w-4xl grid-cols-12">
         <div
-          className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-20 rounded-xl border border-black bg-th-bkg-1 p-2 text-th-fgd-1`}
+          className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
         >
-          <div className={`relative h-[500px]`}>
-            <div className="m-6">
+          <div className={`p-8 pt-6`}>
+            <div className="pb-2">
               <TabUnderline
-                activeValue={activeTab}
-                values={['Stake', 'Unstake']}
-                onChange={(v) => setActiveTab(v)}
+                activeValue={activeFormTab}
+                values={['Add', 'Remove']}
+                onChange={(v) => setActiveFormTab(v)}
               />
             </div>
-            {activeTab === 'Stake' ? (
+            {activeFormTab === 'Add' ? (
               <StakeForm onSuccess={onClose} token={selectedToken} />
             ) : null}
-            {activeTab === 'Unstake' ? (
+            {activeFormTab === 'Remove' ? (
               <UnstakeForm onSuccess={onClose} token={selectedToken} />
             ) : null}
           </div>
         </div>
         <div
-          className={`min-h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] relative z-10 -ml-4 rounded rounded-r-xl border-y border-r border-black bg-th-bkg-2 p-2 pl-8 text-th-fgd-1`}
+          className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
         >
           <AccountStats token={selectedToken} />
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index dafcee8..d1fdf73 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -425,7 +425,7 @@ th {
 /* Base */
 
 body {
-  @apply font-body text-sm font-medium tracking-wider;
+  @apply font-body text-base font-medium leading-tight tracking-wider;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -470,11 +470,11 @@ h3 {
 }
 
 p {
-  @apply text-th-fgd-3;
+  @apply text-th-fgd-2;
 }
 
 li {
-  @apply text-sm text-th-fgd-3;
+  @apply text-base text-th-fgd-3;
 }
 
 a {
@@ -518,7 +518,7 @@ input[type='text'] {
 /* Table */
 
 table p {
-  @apply font-mono text-sm text-th-fgd-2;
+  @apply font-mono text-base text-th-fgd-2;
 }
 
 /* Scrollbars */
diff --git a/yarn.lock b/yarn.lock
index ddad9cf..d65c64e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5975,14 +5975,7 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0, is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
-  dependencies:
-    has "^1.0.3"
-
-is-core-module@^2.13.0:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.9.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
   integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
@@ -7342,7 +7335,7 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.1.7:
+postcss@^8.1.7, postcss@^8.4.23, postcss@^8.4.4:
   version "8.4.29"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
   integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
@@ -7351,15 +7344,6 @@ postcss@^8.1.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.23, postcss@^8.4.4:
-  version "8.4.28"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
-  integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 preact@10.4.1:
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@@ -7887,16 +7871,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2:
-  version "1.22.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
-  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
-  dependencies:
-    is-core-module "^2.11.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-resolve@^1.21.0:
+resolve@^1.1.7, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.2:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -8090,16 +8065,11 @@ secp256k1@^4.0.1, secp256k1@^4.0.2:
     node-addon-api "^2.0.0"
     node-gyp-build "^4.2.0"
 
-semver@^6.0.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
 semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -8733,7 +8703,7 @@ typescript-collections@^1.3.3:
   resolved "https://registry.yarnpkg.com/typescript-collections/-/typescript-collections-1.3.3.tgz#62d50d93c018c094d425eabee649f00ec5cc0fea"
   integrity sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ==
 
-typescript@4.9.4, typescript@^4.6.2:
+typescript@4.9.4:
   version "4.9.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
@@ -8743,7 +8713,7 @@ typescript@^3.9.10, typescript@^3.9.5, typescript@^3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
   integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
 
-typescript@^4.2.3:
+typescript@^4.2.3, typescript@^4.6.2:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==