diff --git a/components/MarketDetails.tsx b/components/MarketDetails.tsx
index fe764ac7..57de1ea2 100644
--- a/components/MarketDetails.tsx
+++ b/components/MarketDetails.tsx
@@ -58,6 +58,8 @@ const MarketDetails = () => {
   const baseSymbol = marketConfig.baseSymbol
   const selectedMarketName = marketConfig.name
   const isPerpMarket = marketConfig.kind === 'perp'
+  console.log('marketConfig: ', marketConfig)
+
   const previousMarketName: string = usePrevious(selectedMarketName)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const connected = useMangoStore((s) => s.wallet.connected)
diff --git a/components/MarketMenuItem.tsx b/components/MarketMenuItem.tsx
index f9ce0963..93c5566d 100644
--- a/components/MarketMenuItem.tsx
+++ b/components/MarketMenuItem.tsx
@@ -85,19 +85,17 @@ export default function MarketMenuItem({ menuTitle = '', linksArray = [] }) {
             <div className="relative bg-th-bkg-3 divide-y divide-th-fgd-4 px-3 rounded rounded-t-none">
               {linksArray.map((m) => (
                 <Link
-                  href={`/${
-                    m.name.slice(-4) === 'PERP' ? 'perp' : 'spot'
-                  }/${m.name.slice(0, -5)}`}
+                  href={{
+                    pathname: '/market',
+                    query: { name: m.name },
+                  }}
                   key={m.name}
                   shallow={true}
                 >
                   <a
                     className={`block py-2 text-th-fgd-1 text-xs hover:text-th-primary whitespace-nowrap ${
                       asPath.includes(menuTitle)
-                        ? (asPath.includes('perp') &&
-                            m.name.slice(-4) === 'PERP') ||
-                          (asPath.includes('spot') &&
-                            m.name.slice(-4) === 'USDC')
+                        ? asPath.includes(m.name.slice(-4))
                           ? 'text-th-primary'
                           : 'text-th-fgd-1'
                         : null
diff --git a/components/PerpPositionsTable.tsx b/components/PerpPositionsTable.tsx
index bdad9566..43746179 100644
--- a/components/PerpPositionsTable.tsx
+++ b/components/PerpPositionsTable.tsx
@@ -140,13 +140,16 @@ const PositionsTable = () => {
                                 src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
                                 className={`mr-2.5`}
                               />
-                              {asPath.includes(
-                                `perp/${marketConfig.baseSymbol}`
+                              {decodeURIComponent(asPath).includes(
+                                marketConfig.name
                               ) ? (
                                 <span>{marketConfig.name}</span>
                               ) : (
                                 <Link
-                                  href={`/perp/${marketConfig.baseSymbol}`}
+                                  href={{
+                                    pathname: '/market',
+                                    query: { name: marketConfig.name },
+                                  }}
                                   shallow={true}
                                 >
                                   <a className="text-th-fgd-1 underline hover:no-underline hover:text-th-fgd-1">
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 1c76b2ae..bde62c2d 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -31,7 +31,7 @@ export const initialMarket = {
   base: 'BTC',
   kind: 'perp',
   name: 'BTC-PERP',
-  path: '/perp/BTC',
+  path: '/market?name=BTC-PERP',
 }
 
 const SettingsModal = ({ isOpen, onClose }) => {
@@ -124,20 +124,18 @@ const DefaultMarketSettings = ({ setSettingsView }) => {
       base: 'BTC',
       kind: 'perp',
       name: 'BTC-PERP',
-      path: '/perp/BTC',
+      path: '/market?name=BTC-PERP',
     }
   )
   const handleSetDefaultMarket = (market) => {
     const base = market.slice(0, -5)
     const kind = market.includes('PERP') ? 'perp' : 'spot'
-    const defaultMarket = market.includes('PERP')
-      ? `/perp/${base}`
-      : `/spot/${base}`
+
     setDefaultMarket({
       base: base,
       kind: kind,
       name: market,
-      path: defaultMarket,
+      path: `/market?name=${market}`,
     })
   }
   const parsedDefaultMarket = defaultMarket
diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx
index 3c24881f..6e5cf6d6 100644
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@@ -45,12 +45,16 @@ const BottomBar = () => {
           <BtcMonoIcon className="h-4 mb-1 w-4" />
           <StyledBarItemLabel>{t('markets')}</StyledBarItemLabel>
         </div>
-        <Link href="/perp/btc" shallow={true}>
+        <Link
+          href={{
+            pathname: '/market',
+            query: { name: 'BTC-PERP' },
+          }}
+          shallow={true}
+        >
           <div
             className={`${
-              asPath === '/' ||
-              asPath.includes('spot') ||
-              asPath.includes('perp')
+              asPath === '/' || asPath.includes('market')
                 ? 'text-th-primary'
                 : 'text-th-fgd-3'
             } col-span-1 cursor-pointer default-transition flex flex-col items-center hover:text-th-primary`}
diff --git a/components/mobile/MobileMenu.tsx b/components/mobile/MobileMenu.tsx
index b9fc56e6..613b86e8 100644
--- a/components/mobile/MobileMenu.tsx
+++ b/components/mobile/MobileMenu.tsx
@@ -39,7 +39,7 @@ const MobileMenu = () => {
           <ConnectWalletButton />
         </div>
         <div className="p-6">
-          <MenuItem href="/spot/BTC">{t('trade')}</MenuItem>
+          <MenuItem href="/market?name=BTC/USDC">{t('trade')}</MenuItem>
           <MenuItem href="/account">{t('account')}</MenuItem>
           <MenuItem href="/borrow">{t('borrow')}</MenuItem>
           <MenuItem href="/stats">{t('stats')}</MenuItem>
diff --git a/pages/account/[[...pubkey]].tsx b/pages/account.tsx
similarity index 88%
rename from pages/account/[[...pubkey]].tsx
rename to pages/account.tsx
index 51a44131..ff15b1f9 100644
--- a/pages/account/[[...pubkey]].tsx
+++ b/pages/account.tsx
@@ -6,27 +6,27 @@ import {
   LinkIcon,
   PencilIcon,
 } from '@heroicons/react/outline'
-import useMangoStore, { serumProgramId } from '../../stores/useMangoStore'
-import { copyToClipboard } from '../../utils'
-import PageBodyContainer from '../../components/PageBodyContainer'
-import TopBar from '../../components/TopBar'
-import AccountOrders from '../../components/account_page/AccountOrders'
-import AccountHistory from '../../components/account_page/AccountHistory'
-import AccountsModal from '../../components/AccountsModal'
-import AccountOverview from '../../components/account_page/AccountOverview'
-import AccountInterest from '../../components/account_page/AccountInterest'
-import AccountFunding from '../../components/account_page/AccountFunding'
-import AccountNameModal from '../../components/AccountNameModal'
-import Button from '../../components/Button'
-import EmptyState from '../../components/EmptyState'
-import Loading from '../../components/Loading'
-import Swipeable from '../../components/mobile/Swipeable'
-import Tabs from '../../components/Tabs'
-import { useViewport } from '../../hooks/useViewport'
-import { breakpoints } from '../../components/TradePageGrid'
+import useMangoStore, { serumProgramId } from '../stores/useMangoStore'
+import { copyToClipboard } from '../utils'
+import PageBodyContainer from '../components/PageBodyContainer'
+import TopBar from '../components/TopBar'
+import AccountOrders from '../components/account_page/AccountOrders'
+import AccountHistory from '../components/account_page/AccountHistory'
+import AccountsModal from '../components/AccountsModal'
+import AccountOverview from '../components/account_page/AccountOverview'
+import AccountInterest from '../components/account_page/AccountInterest'
+import AccountFunding from '../components/account_page/AccountFunding'
+import AccountNameModal from '../components/AccountNameModal'
+import Button from '../components/Button'
+import EmptyState from '../components/EmptyState'
+import Loading from '../components/Loading'
+import Swipeable from '../components/mobile/Swipeable'
+import Tabs from '../components/Tabs'
+import { useViewport } from '../hooks/useViewport'
+import { breakpoints } from '../components/TradePageGrid'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
-import Select from '../../components/Select'
+import Select from '../components/Select'
 import { useRouter } from 'next/router'
 import { PublicKey } from '@solana/web3.js'
 
@@ -76,8 +76,10 @@ export default function Account() {
 
   useEffect(() => {
     async function loadUnownedMangoAccount() {
+      console.log('pubkey[0]', pubkey)
+
       try {
-        const unownedMangoAccountPubkey = new PublicKey(pubkey[0])
+        const unownedMangoAccountPubkey = new PublicKey(pubkey)
         if (mangoGroup) {
           const unOwnedMangoAccount = await mangoClient.getMangoAccount(
             unownedMangoAccountPubkey,
diff --git a/pages/borrow.tsx b/pages/borrow.tsx
index 3b537a0d..b4fa1861 100644
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@@ -10,7 +10,7 @@ import Loading from '../components/Loading'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
 
-export async function getServerSideProps({ locale }) {
+export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['common'])),
diff --git a/pages/index.tsx b/pages/index.tsx
index 89928a7f..df364df0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '../components/TradePageGrid'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-export async function getServerSideProps({ locale }) {
+export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
diff --git a/pages/perp/[market].tsx b/pages/market.tsx
similarity index 61%
rename from pages/perp/[market].tsx
rename to pages/market.tsx
index ec5158e8..ff7d6c4e 100644
--- a/pages/perp/[market].tsx
+++ b/pages/market.tsx
@@ -1,20 +1,20 @@
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
-import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
-import useMangoStore from '../../stores/useMangoStore'
+import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
+import useMangoStore from '../stores/useMangoStore'
 import {
   getMarketByBaseSymbolAndKind,
   getMarketIndexBySymbol,
 } from '@blockworks-foundation/mango-client'
-import TopBar from '../../components/TopBar'
-import TradePageGrid from '../../components/TradePageGrid'
-import MarketSelect from '../../components/MarketSelect'
-import useLocalStorageState from '../../hooks/useLocalStorageState'
-import AlphaModal, { ALPHA_MODAL_KEY } from '../../components/AlphaModal'
-import { PageBodyWrapper } from '../../components/styles'
+import TopBar from '../components/TopBar'
+import TradePageGrid from '../components/TradePageGrid'
+import MarketSelect from '../components/MarketSelect'
+import useLocalStorageState from '../hooks/useLocalStorageState'
+import AlphaModal, { ALPHA_MODAL_KEY } from '../components/AlphaModal'
+import { PageBodyWrapper } from '../components/styles'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-export async function getServerSideProps({ locale }) {
+export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
@@ -31,22 +31,32 @@ const PerpMarket = () => {
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const router = useRouter()
-  const { market } = router.query
 
   useEffect(() => {
-    if (market && mangoGroup) {
+    console.log('router', router, mangoGroup)
+    const name = decodeURIComponent(router.asPath).split('name=')[1]
+    console.log('name: ', name)
+
+    if (name && mangoGroup) {
+      const marketQueryParam = name.toString().split(/-|\//)
+      const marketBaseSymbol = marketQueryParam[0]
+      const marketType = marketQueryParam[1] === 'PERP' ? 'perp' : 'spot'
+      console.log('marketType: ', marketType)
+
       const newMarket = getMarketByBaseSymbolAndKind(
         groupConfig,
-        market.toString().toUpperCase(),
-        'perp'
+        marketBaseSymbol.toUpperCase(),
+        marketType
       )
+      console.log('newMarket', newMarket)
+
       const marketIndex = getMarketIndexBySymbol(
         groupConfig,
-        market.toString().toUpperCase()
+        marketBaseSymbol.toUpperCase()
       )
 
       setMangoStore((state) => {
-        state.selectedMarket.kind = 'perp'
+        state.selectedMarket.kind = marketType
         if (newMarket.name !== marketConfig.name) {
           state.selectedMarket.current = null
           state.selectedMarket.config = newMarket
@@ -57,7 +67,7 @@ const PerpMarket = () => {
         }
       })
     }
-  }, [market, mangoGroup])
+  }, [router, mangoGroup])
 
   return (
     <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
diff --git a/pages/spot/[market].tsx b/pages/spot/[market].tsx
deleted file mode 100644
index 4adafd35..00000000
--- a/pages/spot/[market].tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
-import useMangoStore from '../../stores/useMangoStore'
-import {
-  getMarketByBaseSymbolAndKind,
-  getMarketIndexBySymbol,
-} from '@blockworks-foundation/mango-client'
-import TopBar from '../../components/TopBar'
-import TradePageGrid from '../../components/TradePageGrid'
-import MarketSelect from '../../components/MarketSelect'
-import AlphaModal, { ALPHA_MODAL_KEY } from '../../components/AlphaModal'
-import useLocalStorageState from '../../hooks/useLocalStorageState'
-import { PageBodyWrapper } from '../../components/styles'
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-
-export async function getServerSideProps({ locale }) {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, ['common', 'tv-chart'])),
-      // Will be passed to the page component as props
-    },
-  }
-}
-
-const SpotMarket = () => {
-  const [alphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
-  const groupConfig = useMangoGroupConfig()
-  const setMangoStore = useMangoStore((s) => s.set)
-  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
-  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
-  const router = useRouter()
-  const { market } = router.query
-
-  useEffect(() => {
-    if (market && mangoGroup) {
-      const newMarket = getMarketByBaseSymbolAndKind(
-        groupConfig,
-        market.toString().toUpperCase(),
-        'spot'
-      )
-      const marketIndex = getMarketIndexBySymbol(
-        groupConfig,
-        market.toString().toUpperCase()
-      )
-
-      setMangoStore((state) => {
-        state.selectedMarket.kind = 'spot'
-        if (newMarket.name !== marketConfig.name) {
-          state.selectedMarket.current = null
-          state.selectedMarket.config = newMarket
-          state.tradeForm.price =
-            state.tradeForm.tradeType === 'Limit'
-              ? mangoGroup.getPrice(marketIndex, mangoCache).toFixed(2)
-              : ''
-        }
-      })
-    }
-  }, [market, mangoGroup])
-
-  return (
-    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
-      <TopBar />
-      <MarketSelect />
-      <PageBodyWrapper className="p-1 sm:px-2 sm:py-1 md:px-2 md:py-1">
-        <TradePageGrid />
-      </PageBodyWrapper>
-      {!alphaAccepted && (
-        <AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
-      )}
-    </div>
-  )
-}
-
-export default SpotMarket
diff --git a/pages/stats.tsx b/pages/stats.tsx
index 4d14c367..21caa4a2 100644
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@@ -13,7 +13,7 @@ import { breakpoints } from '../components/TradePageGrid'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
 
-export async function getServerSideProps({ locale }) {
+export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, ['common'])),
diff --git a/stores/useMangoStore.tsx b/stores/useMangoStore.tsx
index 4a6c9c6a..de596855 100644
--- a/stores/useMangoStore.tsx
+++ b/stores/useMangoStore.tsx
@@ -62,7 +62,7 @@ export const WEBSOCKET_CONNECTION = new Connection(
 )
 
 const DEFAULT_MANGO_GROUP_NAME = process.env.NEXT_PUBLIC_GROUP || 'mainnet.1'
-const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
+export const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
   CLUSTER,
   DEFAULT_MANGO_GROUP_NAME
 )