diff --git a/components/trade/OpenOrders.tsx b/components/trade/OpenOrders.tsx
index 176e3302..31e51a80 100644
--- a/components/trade/OpenOrders.tsx
+++ b/components/trade/OpenOrders.tsx
@@ -65,40 +65,44 @@ const OpenOrders = () => {
 
   return connected ? (
     Object.values(openOrders).flat().length ? (
-      <table>
-        <thead>
-          <tr>
-            <th className="text-left">{t('market')}</th>
-            <th className="text-right">{t('trade:side')}</th>
-            <th className="text-right">{t('trade:size')}</th>
-            <th className="text-right">{t('price')}</th>
-            <th className="text-right">{t('value')}</th>
-            <th className="text-right"></th>
-          </tr>
-        </thead>
-        <tbody>
-          {Object.entries(openOrders)
-            .map(([marketPk, orders]) => {
-              return orders.map((o) => {
-                const group = mangoStore.getState().group
-                const serumMarket = group?.getSerum3MarketByPk(
-                  new PublicKey(marketPk)
-                )
-                const quoteTokenBank = group?.getFirstBankByTokenIndex(
-                  serumMarket!.quoteTokenIndex
-                )
-                return (
-                  <tr key={`${o.side}${o.size}${o.price}`} className="my-1 p-2">
-                    <td>
-                      <div className="flex items-center">
-                        <MarketLogos serumMarket={serumMarket!} />
-                        {serumMarket?.name}
-                      </div>
-                    </td>
-                    <td className="text-right">
-                      <SideBadge side={o.side} />
-                    </td>
-                    <td className="text-right font-mono">
+      showTableView ? (
+        <table>
+          <thead>
+            <tr>
+              <th className="text-left">{t('market')}</th>
+              <th className="text-right">{t('trade:side')}</th>
+              <th className="text-right">{t('trade:size')}</th>
+              <th className="text-right">{t('price')}</th>
+              <th className="text-right">{t('value')}</th>
+              <th className="text-right"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(openOrders)
+              .map(([marketPk, orders]) => {
+                return orders.map((o) => {
+                  const group = mangoStore.getState().group
+                  const serumMarket = group?.getSerum3MarketByPk(
+                    new PublicKey(marketPk)
+                  )
+                  const quoteSymbol = group?.getFirstBankByTokenIndex(
+                    serumMarket!.quoteTokenIndex
+                  ).name
+                  return (
+                    <tr
+                      key={`${o.side}${o.size}${o.price}`}
+                      className="my-1 p-2"
+                    >
+                      <td>
+                        <div className="flex items-center">
+                          <MarketLogos serumMarket={serumMarket!} />
+                          {serumMarket?.name}
+                        </div>
+                      </td>
+                      <td className="text-right">
+                        <SideBadge side={o.side} />
+                      </td>
+                      <td className="text-right font-mono">
                         {o.size.toLocaleString(undefined, {
                           maximumFractionDigits: getDecimalCount(o.size),
                         })}
@@ -113,28 +117,29 @@ const OpenOrders = () => {
                           </span>
                         </span>
                       </td>
-                    <td className="text-right">
-                      {formatFixedDecimals(o.size * o.price, true)}
-                    </td>
-                    <td>
-                      <div className="flex justify-end">
-                        <Tooltip content={t('cancel')}>
-                          <IconButton
-                            disabled={cancelId === o.orderId.toString()}
-                            onClick={() => handleCancelOrder(o)}
-                            size="small"
-                          >
-                            {cancelId === o.orderId.toString() ? (
-                              <Loading className="h-4 w-4" />
-                            ) : (
-                              <TrashIcon className="h-4 w-4" />
-                            )}
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    </td>
-                  </tr>
-                )
+                      <td className="text-right">
+                        {formatFixedDecimals(o.size * o.price, true)}
+                      </td>
+                      <td>
+                        <div className="flex justify-end">
+                          <Tooltip content={t('cancel')}>
+                            <IconButton
+                              disabled={cancelId === o.orderId.toString()}
+                              onClick={() => handleCancelOrder(o)}
+                              size="small"
+                            >
+                              {cancelId === o.orderId.toString() ? (
+                                <Loading className="h-4 w-4" />
+                              ) : (
+                                <TrashIcon className="h-4 w-4" />
+                              )}
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      </td>
+                    </tr>
+                  )
+                })
               })
               .flat()}
           </tbody>
@@ -144,35 +149,23 @@ const OpenOrders = () => {
           {Object.entries(openOrders).map(([marketPk, orders]) => {
             return orders.map((o) => {
               const group = mangoStore.getState().group
-              const market = group?.getSerum3MarketByPk(new PublicKey(marketPk))
-              let baseLogoURI = ''
-              let quoteLogoURI = ''
-              const baseSymbol = group?.getFirstBankByTokenIndex(
-                market!.baseTokenIndex
-              ).name
+              const serumMarket = group?.getSerum3MarketByPk(
+                new PublicKey(marketPk)
+              )
               const quoteSymbol = group?.getFirstBankByTokenIndex(
-                market!.quoteTokenIndex
+                serumMarket!.quoteTokenIndex
               ).name
-              if (jupiterTokens.length) {
-                baseLogoURI = jupiterTokens.find(
-                  (t) => t.symbol === baseSymbol
-                )!.logoURI
-                quoteLogoURI = jupiterTokens.find(
-                  (t) => t.symbol === quoteSymbol
-                )!.logoURI
-              }
               return (
                 <div
                   className="flex items-center justify-between border-b border-th-bkg-3 p-4"
                   key={`${o.side}${o.size}${o.price}`}
                 >
                   <div className="flex items-center">
-                    <MarketLogos
-                      baseURI={baseLogoURI}
-                      quoteURI={quoteLogoURI}
-                    />
+                    <MarketLogos serumMarket={serumMarket!} />
                     <div>
-                      <p className="text-sm text-th-fgd-1">{market?.name}</p>
+                      <p className="text-sm text-th-fgd-1">
+                        {serumMarket?.name}
+                      </p>
                       <span
                         className={`capitalize ${
                           o.side === 'buy' ? 'text-th-green' : 'text-th-red'