From 2a295e8db9d4aa060150b667a9dd47f7b2e3942e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 10 Dec 2025 16:33:46 -0500
Subject: [PATCH 01/27] feat - simpleui wip

---
 src/App.tsx                                   |  24 +-
 src/constants/routes.ts                       |   1 +
 src/hooks/useCurrentMarketId.ts               |  15 +-
 src/hooks/useSimpleUiEnabled.ts               |  10 +-
 src/layout/Footer/FooterMobile.tsx            | 134 +-----
 src/pages/trade/LaunchableMarket.tsx          |   2 +-
 src/pages/trade/Trade.tsx                     |   2 +-
 src/pages/trade/TradeHeaderMobile.tsx         | 116 -----
 src/pages/trade/mobile-web/Trade.tsx          |  77 +++
 src/pages/trade/mobile-web/TradeForm.tsx      | 439 ++++++++++++++++++
 .../trade/mobile-web/TradeFormHeader.tsx      |  76 +++
 src/pages/trade/mobile-web/TradeHeader.tsx    |  65 +++
 src/state/dialogs.ts                          |   6 +
 src/state/dialogsSelectors.ts                 |   2 +
 src/views/PositionInfo.tsx                    |   2 +-
 .../dialogs/MarketsDialog/MarketFilterRow.tsx | 103 ++++
 src/views/dialogs/MarketsDialog/MarketRow.tsx |  92 ++++
 .../dialogs/MarketsDialog/MarketsDialog.tsx   |  49 ++
 .../dialogs/MarketsDialog/MarketsList.tsx     | 318 +++++++++++++
 src/views/dialogs/MobileUserMenuDialog.tsx    | 343 ++++++++++++++
 src/views/mobile/MobileTradeAssetSelector.tsx |  84 ++++
 21 files changed, 1698 insertions(+), 262 deletions(-)
 delete mode 100644 src/pages/trade/TradeHeaderMobile.tsx
 create mode 100644 src/pages/trade/mobile-web/Trade.tsx
 create mode 100644 src/pages/trade/mobile-web/TradeForm.tsx
 create mode 100644 src/pages/trade/mobile-web/TradeFormHeader.tsx
 create mode 100644 src/pages/trade/mobile-web/TradeHeader.tsx
 create mode 100644 src/views/dialogs/MarketsDialog/MarketFilterRow.tsx
 create mode 100644 src/views/dialogs/MarketsDialog/MarketRow.tsx
 create mode 100644 src/views/dialogs/MarketsDialog/MarketsDialog.tsx
 create mode 100644 src/views/dialogs/MarketsDialog/MarketsList.tsx
 create mode 100644 src/views/dialogs/MobileUserMenuDialog.tsx
 create mode 100644 src/views/mobile/MobileTradeAssetSelector.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5e88788717..f4983f6c0c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -93,6 +93,10 @@ const VaultPage = lazy(() => import('@/pages/vaults/VaultPage'));
 const SimpleMarketsPage = lazy(() => import('@/pages/markets/simple-ui/MarketsMobile'));
 const SimpleAssetPage = lazy(() => import('@/pages/trade/simple-ui/AssetPage'));
 
+// Mobile Web
+const MobileWebTradePage = lazy(() => import('@/pages/trade/mobile-web/Trade'));
+const MobileWebTradeFormPage = lazy(() => import('@/pages/trade/mobile-web/TradeForm'));
+
 const Content = () => {
   useInitializePage();
   useAnalytics();
@@ -205,28 +209,28 @@ const Content = () => {
               <Route path={`${AppRoute.Referrals}/*`} element={<AffiliatesPage />} />
 
               <Route path={AppRoute.Trade}>
-                <Route path=":market" element={<TradePage />} />
-                <Route path={AppRoute.Trade} element={<TradePage />} />
+                <Route path=":market" element={isTablet ? <MobileWebTradePage /> : <TradePage />} />
+                <Route
+                  path={AppRoute.Trade}
+                  element={isTablet ? <MobileWebTradePage /> : <TradePage />}
+                />
               </Route>
 
               {isSpotEnabled && (
                 <Route path={`${AppRoute.Spot}/:tokenMint`} element={<SpotPage />} />
               )}
 
+              <Route path={AppRoute.TradeForm}>
+                <Route path=":market" element={<MobileWebTradeFormPage />} />
+                <Route path={AppRoute.TradeForm} element={<MobileWebTradeFormPage />} />
+              </Route>
+
               <Route path={AppRoute.Markets}>
                 <Route path={AppRoute.Markets} element={<MarketsPage />} />
               </Route>
 
               <Route path={`/${chainTokenLabel}/*`} element={<RewardsPage />} />
 
-              {isTablet && (
-                <>
-                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                </>
-              )}
-
               <Route element={<GuardedMobileRoute />}>
                 <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
               </Route>
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 0c2e7e9cc1..76a21d4e40 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -5,6 +5,7 @@ export enum AppRoute {
   Vault = '/vault',
   Portfolio = '/portfolio',
   Trade = '/trade',
+  TradeForm = '/trade-form',
   Spot = '/spot',
   Profile = '/profile',
   Alerts = '/alerts',
diff --git a/src/hooks/useCurrentMarketId.ts b/src/hooks/useCurrentMarketId.ts
index f6b0921c35..d53f1c0a55 100644
--- a/src/hooks/useCurrentMarketId.ts
+++ b/src/hooks/useCurrentMarketId.ts
@@ -25,9 +25,9 @@ import { getLaunchedMarketIds, getMarketIds } from '@/state/perpetualsSelectors'
 import { useMarketsData } from './useMarketsData';
 import { useAppSelectorWithArgs } from './useParameterizedSelector';
 
-export const useCurrentMarketId = () => {
+export const useCurrentMarketId = (route: AppRoute = AppRoute.Trade) => {
   const navigate = useNavigate();
-  const match = useMatch(`/${AppRoute.Trade}/:marketId`);
+  const match = useMatch(`/${route}/:marketId`);
   const { marketId } = match?.params ?? {};
   const dispatch = useAppDispatch();
   const selectedNetwork = useAppSelector(getSelectedNetwork);
@@ -98,7 +98,7 @@ export const useCurrentMarketId = () => {
       dispatch(setCurrentMarketId(validId));
 
       if (validId !== marketId) {
-        navigate(`${AppRoute.Trade}/${validId}`, {
+        navigate(`${route}/${validId}`, {
           replace: true,
         });
       }
@@ -136,7 +136,14 @@ export const useCurrentMarketId = () => {
         dispatch(closeDialogInTradeBox());
       }
     }
-  }, [hasMarketIds, hasLoadedLaunchableMarkets, isViewingUnlaunchedMarket, marketId, navigate]);
+  }, [
+    hasMarketIds,
+    hasLoadedLaunchableMarkets,
+    isViewingUnlaunchedMarket,
+    marketId,
+    navigate,
+    route,
+  ]);
 
   useEffect(() => {
     if (isViewingUnlaunchedMarket) {
diff --git a/src/hooks/useSimpleUiEnabled.ts b/src/hooks/useSimpleUiEnabled.ts
index 378c25fdd6..d4efb59d09 100644
--- a/src/hooks/useSimpleUiEnabled.ts
+++ b/src/hooks/useSimpleUiEnabled.ts
@@ -1,11 +1,3 @@
-import { useBreakpoints } from '@/hooks/useBreakpoints';
-
-import { testFlags } from '@/lib/testFlags';
-
 export const useSimpleUiEnabled = () => {
-  const { isTablet } = useBreakpoints();
-  const forcedSimpleUiValue = testFlags.simpleUi;
-  const isSimpleUi = isTablet ? (forcedSimpleUiValue ?? true) : false;
-
-  return isSimpleUi;
+  return false;
 };
diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx
index 68cd8866b9..cdddfa5cfa 100644
--- a/src/layout/Footer/FooterMobile.tsx
+++ b/src/layout/Footer/FooterMobile.tsx
@@ -1,41 +1,20 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import tw from 'twin.macro';
 
-import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { DEFAULT_MARKETID } from '@/constants/markets';
 import { AppRoute } from '@/constants/routes';
 
-import { useComplianceState } from '@/hooks/useComplianceState';
-import { useNotifications } from '@/hooks/useNotifications';
-import { useShouldShowFooter } from '@/hooks/useShouldShowFooter';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
-import { BellIcon, MarketsIcon, PortfolioIcon, ProfileIcon } from '@/icons';
+import { MarketsIcon, PortfolioIcon, TradeIcon } from '@/icons';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { Icon, IconName } from '@/components/Icon';
+import { Icon } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 
-import { calculateCanAccountTrade } from '@/state/accountCalculators';
-import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getCurrentMarketId } from '@/state/currentMarketSelectors';
-import { openDialog } from '@/state/dialogs';
-
 export const FooterMobile = () => {
-  const dispatch = useAppDispatch();
-
   const stringGetter = useStringGetter();
 
-  const canAccountTrade = useAppSelector(calculateCanAccountTrade);
-
-  const marketId = useAppSelector(getCurrentMarketId);
-
-  const { disableConnectButton } = useComplianceState();
-  const { hasUnreadNotifications } = useNotifications();
-
-  if (!useShouldShowFooter()) return null;
-
   return (
     <$MobileNav>
       <$NavigationMenu
@@ -43,58 +22,23 @@ export const FooterMobile = () => {
           {
             group: 'navigation',
             items: [
-              canAccountTrade
-                ? {
-                    value: 'trade',
-                    label: stringGetter({ key: STRING_KEYS.TRADE }),
-                    slotBefore: (
-                      <$StartIcon>
-                        <Icon iconName={IconName.Trade} size="1.5rem" />
-                      </$StartIcon>
-                    ),
-                    href: `${AppRoute.Trade}/${marketId ?? DEFAULT_MARKETID}`,
-                  }
-                : {
-                    value: 'onboarding',
-                    label: stringGetter({ key: STRING_KEYS.ONBOARDING }),
-                    slotBefore: (
-                      <$StartIcon disabled={disableConnectButton}>
-                        <Icon iconName={IconName.Play} size="1.5rem" />
-                      </$StartIcon>
-                    ),
-                    onClick: () =>
-                      !disableConnectButton && dispatch(openDialog(DialogTypes.Onboarding())),
-                  },
               {
-                value: 'portfolio',
-                label: stringGetter({ key: STRING_KEYS.PORTFOLIO }),
-                slotBefore: <$Icon iconComponent={PortfolioIcon as any} />,
-                href: AppRoute.Portfolio,
-              },
-              {
-                value: 'markets',
+                value: 'trade',
                 label: stringGetter({ key: STRING_KEYS.MARKETS }),
-                slotBefore: <$Icon iconComponent={MarketsIcon as any} />,
-                href: AppRoute.Markets,
+                slotBefore: <$Icon size="0.75em" iconComponent={MarketsIcon as any} />,
+                href: AppRoute.Trade,
               },
               {
-                value: 'alerts',
-                label: stringGetter({ key: STRING_KEYS.ALERTS }),
-                slotBefore: (
-                  <div tw="stack">
-                    <$Icon iconComponent={BellIcon as any} />
-                    {hasUnreadNotifications && (
-                      <$UnreadIndicator tw="relative right-[-0.35rem] top-[-0.55rem] place-self-center" />
-                    )}
-                  </div>
-                ),
-                href: AppRoute.Alerts,
+                value: 'trade-from',
+                label: stringGetter({ key: STRING_KEYS.TRADE }),
+                slotBefore: <$Icon size="0.75em" iconComponent={TradeIcon as any} />,
+                href: AppRoute.TradeForm,
               },
               {
-                value: 'profile',
-                label: stringGetter({ key: STRING_KEYS.PROFILE }),
-                slotBefore: <$Icon iconComponent={ProfileIcon as any} />,
-                href: AppRoute.Profile,
+                value: 'portfolio',
+                label: stringGetter({ key: STRING_KEYS.PORTFOLIO }),
+                slotBefore: <$Icon size="0.75em" iconComponent={PortfolioIcon as any} />,
+                href: AppRoute.Portfolio,
               },
             ],
           },
@@ -133,25 +77,6 @@ const $NavigationMenu = styled(NavigationMenu)`
 
       > li {
         flex: 1;
-
-        &[data-item='onboarding'],
-        &[data-item='trade'] {
-          span {
-            content-visibility: hidden;
-            position: absolute;
-
-            @supports not (content-visibility: hidden) {
-              opacity: 0;
-              width: 0;
-              overflow: hidden;
-            }
-          }
-
-          + *,
-          + * + * {
-            order: -1;
-          }
-        }
       }
 
       > li:not(:last-child):after {
@@ -168,34 +93,3 @@ const $NavigationMenu = styled(NavigationMenu)`
 `;
 
 const $Icon = tw(Icon)`text-[1.5rem]`;
-
-const $StartIcon = styled.div<{ disabled?: boolean }>`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-top: -0.25rem;
-
-  width: 3.5rem;
-  height: 3.5rem;
-
-  color: var(--color-text-2);
-  background-color: var(--color-accent);
-  border: solid var(--border-width) var(--color-border-white);
-  border-radius: 50%;
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      background-color: var(--color-layer-2);
-      color: var(--color-text-0);
-    `}
-`;
-
-const $UnreadIndicator = styled.div`
-  width: 0.9rem;
-  height: 0.9rem;
-  border-radius: 50%;
-  background-color: var(--color-accent);
-  border: 2px solid var(--color-layer-2);
-`;
diff --git a/src/pages/trade/LaunchableMarket.tsx b/src/pages/trade/LaunchableMarket.tsx
index 77ee0ff03e..2562237f05 100644
--- a/src/pages/trade/LaunchableMarket.tsx
+++ b/src/pages/trade/LaunchableMarket.tsx
@@ -32,7 +32,7 @@ import { InnerPanel } from './InnerPanel';
 import { MarketSelectorAndStats } from './MarketSelectorAndStats';
 import { MobileBottomPanel } from './MobileBottomPanel';
 import { MobileTopPanel } from './MobileTopPanel';
-import { TradeHeaderMobile } from './TradeHeaderMobile';
+import { TradeHeaderMobile } from './mobile-web/TradeHeader';
 import { useResizablePanel } from './useResizablePanel';
 
 const LaunchableMarket = () => {
diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx
index dfadbfb470..f8a9be883e 100644
--- a/src/pages/trade/Trade.tsx
+++ b/src/pages/trade/Trade.tsx
@@ -32,8 +32,8 @@ import { MarketSelectorAndStats } from './MarketSelectorAndStats';
 import { MobileBottomPanel } from './MobileBottomPanel';
 import { MobileTopPanel } from './MobileTopPanel';
 import { TradeDialogTrigger } from './TradeDialogTrigger';
-import { TradeHeaderMobile } from './TradeHeaderMobile';
 import { VerticalPanel } from './VerticalPanel';
+import { TradeHeaderMobile } from './mobile-web/TradeHeader';
 import { useResizablePanel } from './useResizablePanel';
 
 const TradePage = () => {
diff --git a/src/pages/trade/TradeHeaderMobile.tsx b/src/pages/trade/TradeHeaderMobile.tsx
deleted file mode 100644
index b4ed2cbe04..0000000000
--- a/src/pages/trade/TradeHeaderMobile.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { BonsaiHelpers } from '@/bonsai/ontology';
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { AppRoute } from '@/constants/routes';
-
-import { useAppSelectorWithArgs } from '@/hooks/useParameterizedSelector';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { AssetIcon } from '@/components/AssetIcon';
-import { BackButton } from '@/components/BackButton';
-import { Output, OutputType } from '@/components/Output';
-import { MidMarketPrice } from '@/views/MidMarketPrice';
-
-import { useAppSelector } from '@/state/appTypes';
-
-import { getAssetFromMarketId, getDisplayableAssetFromBaseAsset } from '@/lib/assetUtils';
-import { mapIfPresent } from '@/lib/do';
-import { MustBigNumber } from '@/lib/numbers';
-import { orEmptyObj } from '@/lib/typeUtils';
-
-export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
-  const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
-  const name = useAppSelector(BonsaiHelpers.currentMarket.assetName);
-  const imageUrl = useAppSelector(BonsaiHelpers.currentMarket.assetLogo);
-
-  const navigate = useNavigate();
-
-  const { displayableTicker, priceChange24H, percentChange24h } = orEmptyObj(
-    useAppSelector(BonsaiHelpers.currentMarket.marketInfo)
-  );
-
-  const launchableAsset = useAppSelectorWithArgs(
-    BonsaiHelpers.assets.selectAssetInfo,
-    mapIfPresent(launchableMarketId, getAssetFromMarketId)
-  );
-
-  const assetRow = launchableAsset ? (
-    <div tw="inlineRow gap-[1ch]">
-      <img
-        src={launchableAsset.logo ?? undefined}
-        alt={launchableAsset.name}
-        tw="h-[2.5rem] w-[2.5rem] rounded-[50%]"
-      />
-      <$Name>
-        <h3>{launchableAsset.name}</h3>
-        <span>{getDisplayableAssetFromBaseAsset(launchableAsset.assetId)}</span>
-      </$Name>
-    </div>
-  ) : (
-    <div tw="inlineRow gap-[1ch]">
-      <AssetIcon tw="[--asset-icon-size:2.5rem]" logoUrl={imageUrl} symbol={id} />
-      <$Name>
-        <h3>{name}</h3>
-        <span>{displayableTicker}</span>
-      </$Name>
-    </div>
-  );
-
-  return (
-    <$Header>
-      <BackButton onClick={() => navigate(AppRoute.Markets)} />
-
-      {assetRow}
-
-      <$Right>
-        <MidMarketPrice />
-        <$PriceChange
-          type={OutputType.Percent}
-          value={MustBigNumber(percentChange24h).abs()}
-          isNegative={MustBigNumber(priceChange24H).isNegative()}
-        />
-      </$Right>
-    </$Header>
-  );
-};
-const $Header = styled.header`
-  ${layoutMixins.contentSectionDetachedScrollable}
-
-  ${layoutMixins.stickyHeader}
-  z-index: 2;
-
-  ${layoutMixins.row}
-
-  padding-left: 1rem;
-  padding-right: 1.5rem;
-  gap: 1rem;
-
-  color: var(--color-text-2);
-  background-color: var(--color-layer-2);
-`;
-const $Name = styled.div`
-  ${layoutMixins.rowColumn}
-
-  h3 {
-    font: var(--font-large-medium);
-  }
-
-  > :nth-child(2) {
-    font: var(--font-mini-book);
-    color: var(--color-text-0);
-  }
-`;
-
-const $Right = styled.div`
-  margin-left: auto;
-
-  ${layoutMixins.rowColumn}
-  justify-items: flex-end;
-`;
-
-const $PriceChange = styled(Output)<{ isNegative?: boolean }>`
-  font: var(--font-small-book);
-  color: ${({ isNegative }) => (isNegative ? `var(--color-negative)` : `var(--color-positive)`)};
-`;
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
new file mode 100644
index 0000000000..c412d1d756
--- /dev/null
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import styled from 'styled-components';
+
+import { HORIZONTAL_PANEL_MAX_HEIGHT, HORIZONTAL_PANEL_MIN_HEIGHT } from '@/constants/layout';
+
+import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
+import { usePageTitlePriceUpdates } from '@/hooks/usePageTitlePriceUpdates';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { DetachedSection } from '@/components/ContentSection';
+import { MarketsMenuDialog } from '@/views/dialogs/MarketsDialog/MarketsDialog';
+import { UserMenuDialog } from '@/views/dialogs/MobileUserMenuDialog';
+
+import { calculateCanAccountTrade } from '@/state/accountCalculators';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setHorizontalPanelHeightPx } from '@/state/appUiConfigs';
+import { getHorizontalPanelHeightPx } from '@/state/appUiConfigsSelectors';
+
+import LaunchableMarket from '../LaunchableMarket';
+import { MobileBottomPanel } from '../MobileBottomPanel';
+import { MobileTopPanel } from '../MobileTopPanel';
+import { useResizablePanel } from '../useResizablePanel';
+import { TradeHeaderMobile } from './TradeHeader';
+
+const TradePage = () => {
+  const { isViewingUnlaunchedMarket } = useCurrentMarketId();
+  const canAccountTrade = useAppSelector(calculateCanAccountTrade);
+
+  const horizontalPanelHeightPxBase = useAppSelector(getHorizontalPanelHeightPx);
+  const dispatch = useAppDispatch();
+  const setPanelHeight = useCallback(
+    (h: number) => {
+      dispatch(setHorizontalPanelHeightPx(h));
+    },
+    [dispatch]
+  );
+  const { handleMouseDown } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
+    min: HORIZONTAL_PANEL_MIN_HEIGHT,
+    max: HORIZONTAL_PANEL_MAX_HEIGHT,
+  });
+
+  usePageTitlePriceUpdates();
+
+  if (isViewingUnlaunchedMarket) {
+    return <LaunchableMarket />;
+  }
+
+  return (
+    <$TradeLayoutMobile>
+      <TradeHeaderMobile />
+
+      <$MobileContent>
+        <DetachedSection>
+          <MobileTopPanel />
+        </DetachedSection>
+
+        <MobileBottomPanel />
+      </$MobileContent>
+
+      <UserMenuDialog />
+      <MarketsMenuDialog />
+    </$TradeLayoutMobile>
+  );
+};
+
+export default TradePage;
+
+const $TradeLayoutMobile = styled.div`
+  ${layoutMixins.expandingColumnWithHeader}
+  min-height: 100%;
+`;
+
+const $MobileContent = styled.article`
+  ${layoutMixins.contentContainerPage}
+`;
diff --git a/src/pages/trade/mobile-web/TradeForm.tsx b/src/pages/trade/mobile-web/TradeForm.tsx
new file mode 100644
index 0000000000..0d1875ecb1
--- /dev/null
+++ b/src/pages/trade/mobile-web/TradeForm.tsx
@@ -0,0 +1,439 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { OrderSide, OrderSizeInputs, TradeFormType } from '@/bonsai/forms/trade/types';
+import { PlaceOrderPayload } from '@/bonsai/forms/triggers/types';
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import { AnalyticsEvents } from '@/constants/analytics';
+import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
+import { ComplianceStates } from '@/constants/compliance';
+import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
+import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
+import { AppRoute } from '@/constants/routes';
+import {
+  DisplayUnit,
+  QUICK_LIMIT_OPTIONS,
+  QuickLimitOption,
+  SimpleUiTradeDialogSteps,
+} from '@/constants/trade';
+
+import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
+import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
+import { useComplianceState } from '@/hooks/useComplianceState';
+import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
+import { InputType } from '@/components/Input';
+import { MarginUsageTag } from '@/components/MarginUsageTag';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+import { HorizontalSeparatorFiller } from '@/components/Separator';
+import { SimpleUiPopover } from '@/components/SimpleUiPopover';
+import { TradeFormMessages } from '@/views/TradeFormMessages/TradeFormMessages';
+import { MarketsMenuDialog } from '@/views/dialogs/MarketsDialog/MarketsDialog';
+import { useTradeTypeOptions } from '@/views/forms/TradeForm/useTradeTypeOptions';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setDisplayUnit } from '@/state/appUiConfigs';
+import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
+import { openDialog } from '@/state/dialogs';
+import { tradeFormActions } from '@/state/tradeForm';
+import { getTradeFormSummary, getTradeFormValues } from '@/state/tradeFormSelectors';
+
+import { track } from '@/lib/analytics/analytics';
+import { AttemptBigNumber, BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
+import { orEmptyObj } from '@/lib/typeUtils';
+
+import { TradeFormHeaderMobile } from './TradeFormHeader';
+
+const TradeForm = ({
+  currentStep,
+  setCurrentStep,
+  onClose,
+}: {
+  currentStep: SimpleUiTradeDialogSteps;
+  setCurrentStep: (step: SimpleUiTradeDialogSteps) => void;
+  onClose: () => void;
+}) => {
+  const dispatch = useAppDispatch();
+  const stringGetter = useStringGetter();
+
+  const { isViewingUnlaunchedMarket } = useCurrentMarketId(AppRoute.TradeForm);
+
+  const [placeOrderPayload, setPlaceOrderPayload] = useState<PlaceOrderPayload>();
+
+  const { selectedTradeType } = useTradeTypeOptions();
+
+  const displayUnit = useAppSelector(getSelectedDisplayUnit);
+  const tradeValues = useAppSelector(getTradeFormValues);
+  const fullFormSummary = useAppSelector(getTradeFormSummary);
+  const { complianceState } = useComplianceState();
+  const { summary } = fullFormSummary;
+  const midPrice = useAppSelector(BonsaiHelpers.currentMarket.midPrice.data);
+  const buyingPower = useAppSelector(BonsaiHelpers.currentMarket.account.buyingPower);
+  const { assetId, displayableAsset, stepSizeDecimals, ticker, tickSizeDecimals } = orEmptyObj(
+    useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
+  );
+
+  const marginUsage = summary.accountDetailsAfter?.account?.marginUsage;
+  const effectiveSizes = orEmptyObj(summary.tradeInfo.inputSummary.size);
+
+  useEffect(() => {
+    if (ticker) {
+      dispatch(tradeFormActions.setMarketId(ticker));
+    }
+  }, [ticker, dispatch]);
+
+  const onLastOrderIndexed = useCallback(() => {
+    if (currentStep === SimpleUiTradeDialogSteps.Submit) {
+      setCurrentStep(SimpleUiTradeDialogSteps.Confirm);
+    }
+  }, [currentStep, setCurrentStep]);
+
+  const { placeOrderError, placeOrder, unIndexedClientId, shouldEnableTrade } = useTradeForm({
+    source: TradeFormSource.SimpleTradeForm,
+    fullFormSummary,
+    onLastOrderIndexed,
+  });
+
+  const {
+    shouldPromptUserToPlaceLimitOrder,
+    isErrorShownInOrderStatusToast,
+    primaryAlert,
+    shortAlertKey,
+  } = useTradeErrors({
+    placeOrderError,
+  });
+
+  const onSubmitOrder = async () => {
+    const payload = summary.tradePayload;
+    if (payload == null) {
+      return;
+    }
+    setCurrentStep(SimpleUiTradeDialogSteps.Submit);
+    placeOrder({
+      onPlaceOrder: (tradePayload) => {
+        setPlaceOrderPayload(tradePayload);
+        dispatch(tradeFormActions.reset());
+      },
+      onFailure: () => {
+        setCurrentStep(SimpleUiTradeDialogSteps.Error);
+      },
+    });
+  };
+
+  const onUSDCInput = ({ formattedValue }: { floatValue?: number; formattedValue: string }) => {
+    const formattedValueBN = MustBigNumber(formattedValue);
+    if ((formattedValueBN.decimalPlaces() ?? 0) > USD_DECIMALS) {
+      return;
+    }
+    dispatch(tradeFormActions.setSizeUsd(formattedValue));
+  };
+
+  const onSizeInput = ({ formattedValue }: { floatValue?: number; formattedValue: string }) => {
+    const formattedValueBN = MustBigNumber(formattedValue);
+    if ((formattedValueBN.decimalPlaces() ?? 0) > (stepSizeDecimals ?? TOKEN_DECIMALS)) {
+      return;
+    }
+    dispatch(tradeFormActions.setSizeToken(formattedValue));
+  };
+
+  const onLimitPriceInput = ({
+    formattedValue,
+  }: {
+    floatValue?: number;
+    formattedValue: string;
+  }) => {
+    const formattedValueBN = MustBigNumber(formattedValue);
+    if ((formattedValueBN.decimalPlaces() ?? 0) > (tickSizeDecimals ?? TOKEN_DECIMALS)) {
+      return;
+    }
+    dispatch(tradeFormActions.setLimitPrice(formattedValue));
+  };
+
+  const decimals = stepSizeDecimals ?? TOKEN_DECIMALS;
+
+  const inputConfigs = {
+    [DisplayUnit.Asset]: {
+      onInput: onSizeInput,
+      type: InputType.Number,
+      outputType: OutputType.Number,
+      decimals,
+      inputUnit: DisplayUnit.Asset,
+      value:
+        tradeValues.size != null && OrderSizeInputs.is.SIZE(tradeValues.size)
+          ? tradeValues.size.value.value
+          : tradeValues.size == null || tradeValues.size.value.value === ''
+            ? ''
+            : (AttemptBigNumber(effectiveSizes.size)?.toFixed(decimals) ?? ''),
+    },
+    [DisplayUnit.Fiat]: {
+      onInput: onUSDCInput,
+      type: InputType.Number,
+      outputType: OutputType.Fiat,
+      decimals: USD_DECIMALS,
+      inputUnit: DisplayUnit.Fiat,
+      value:
+        tradeValues.size != null && OrderSizeInputs.is.USDC_SIZE(tradeValues.size)
+          ? tradeValues.size.value.value
+          : tradeValues.size == null || tradeValues.size.value.value === ''
+            ? ''
+            : (AttemptBigNumber(effectiveSizes.usdcSize)?.toFixed(USD_DECIMALS) ?? ''),
+    },
+  };
+
+  const limitPriceInput = (
+    <div tw="flexColumn items-center gap-0.25">
+      <span tw="font-mini-book">When {displayableAsset} price reaches</span>
+    </div>
+  );
+
+  const toggleDisplayUnit = () => {
+    if (!assetId) return;
+
+    dispatch(
+      setDisplayUnit({
+        newDisplayUnit: displayUnit === DisplayUnit.Asset ? DisplayUnit.Fiat : DisplayUnit.Asset,
+        entryPoint: 'simpleUiTradeDialog',
+        assetId,
+      })
+    );
+  };
+
+  const priceImpact = summary.tradeInfo.inputSummary.worstFillPrice
+    ? midPrice
+      ? midPrice.minus(summary.tradeInfo.inputSummary.worstFillPrice)
+      : 0
+    : 0;
+
+  const receiptArea = (
+    <div tw="flexColumn w-full gap-[1px] overflow-hidden rounded-[1rem] font-small-book">
+      <div tw="row justify-between bg-[var(--simpleUi-dialog-secondaryColor)] px-0.75 py-0.5">
+        <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.BUYING_POWER })}</span>
+        <Output tw="text-color-text-2" value={buyingPower} type={OutputType.Fiat} />
+      </div>
+      <div tw="row justify-between bg-[var(--simpleUi-dialog-secondaryColor)] px-0.75 py-0.5">
+        <MarginUsageTag marginUsage={marginUsage} />
+        <SimpleUiPopover
+          tw="[data-state='open']:rotate-180"
+          withPortal={false}
+          side="top"
+          content={
+            <div tw="grid gap-0.5 p-0.5">
+              <span tw="text-color-text-1">
+                {stringGetter({ key: STRING_KEYS.ESTIMATED_COST })}
+              </span>
+              <div tw="row justify-between gap-1">
+                <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.FEE })}</span>
+                <Output
+                  tw="text-color-text-2"
+                  useGrouping
+                  type={OutputType.Fiat}
+                  value={summary.tradeInfo.fee ?? 0}
+                />
+              </div>
+              {selectedTradeType === TradeFormType.MARKET && (
+                <div tw="row justify-between gap-1">
+                  <span tw="text-color-text-0">
+                    {stringGetter({ key: STRING_KEYS.PRICE_IMPACT })}
+                  </span>
+                  <Output
+                    tw="text-color-text-2"
+                    useGrouping
+                    type={OutputType.Fiat}
+                    value={priceImpact}
+                    showSign={ShowSign.None}
+                  />
+                </div>
+              )}
+              <HorizontalSeparatorFiller />
+              <div tw="row justify-between gap-1">
+                <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.TOTAL })}</span>
+                <Output
+                  useGrouping
+                  tw="text-color-text-2"
+                  showSign={ShowSign.None}
+                  type={OutputType.Fiat}
+                  value={summary.tradeInfo.total ?? 0}
+                />
+              </div>
+            </div>
+          }
+        >
+          <$FeeTrigger>
+            {stringGetter({ key: STRING_KEYS.FEES })} <ChevronDownIcon />
+          </$FeeTrigger>
+        </SimpleUiPopover>
+      </div>
+    </div>
+  );
+
+  const toggleConfig =
+    inputConfigs[displayUnit === DisplayUnit.Asset ? DisplayUnit.Fiat : DisplayUnit.Asset];
+  const toggleValue = toggleConfig.value.trim().length > 0 ? toggleConfig.value : 0;
+
+  const sizeToggle = (
+    <button
+      type="button"
+      disabled={!assetId}
+      aria-label="Toggle display unit"
+      tw="row cursor-pointer gap-0.5 rounded-[1rem] px-0.5 py-0.25 text-color-text-0 hover:bg-[var(--simpleUi-dialog-secondaryColor)]"
+      onClick={toggleDisplayUnit}
+    >
+      <Output
+        tw="text-color-text-2 font-small-medium"
+        type={toggleConfig.outputType}
+        value={toggleValue}
+        fractionDigits={toggleConfig.decimals}
+        slotRight={
+          displayUnit === DisplayUnit.Fiat ? (
+            <span tw="ml-[0.5ch] text-color-text-2">{displayableAsset}</span>
+          ) : null
+        }
+      />
+      <div tw="row size-2 justify-center rounded-[50%] bg-[var(--simpleUi-dialog-secondaryColor)]">
+        <Icon iconName={IconName.Switch} />
+      </div>
+    </button>
+  );
+
+  const hasMarginUsageError = primaryAlert?.code === 'INVALID_NEW_ACCOUNT_MARGIN_USAGE';
+
+  const isDepositNeeded =
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    (summary.accountDetailsBefore?.account?.freeCollateral.lte(0) || hasMarginUsageError) &&
+    complianceState === ComplianceStates.FULL_ACCESS;
+
+  const onDepositFunds = () => {
+    dispatch(openDialog(DialogTypes.Deposit2({})));
+    onClose();
+  };
+
+  const placeOrderButton = isDepositNeeded ? (
+    <Button
+      type={ButtonType.Button}
+      action={ButtonAction.SimplePrimary}
+      tw="w-full rounded-[1rem] font-medium-bold disabled:[--button-textColor:var(--color-text-0)]"
+      size={ButtonSize.Large}
+      onClick={onDepositFunds}
+    >
+      {stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
+    </Button>
+  ) : (
+    <Button
+      type={ButtonType.Button}
+      action={tradeValues.side === OrderSide.BUY ? ButtonAction.Create : ButtonAction.Destroy}
+      tw="w-full rounded-[1rem] font-medium-bold disabled:[--button-textColor:var(--color-text-0)]"
+      size={ButtonSize.Large}
+      css={{
+        '--button-textColor': 'var(--color-layer-0)',
+      }}
+      state={{ isDisabled: !shouldEnableTrade }}
+      onClick={onSubmitOrder}
+    >
+      {shortAlertKey
+        ? stringGetter({ key: shortAlertKey })
+        : tradeValues.side === OrderSide.BUY
+          ? stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })
+          : stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
+    </Button>
+  );
+
+  const onQuickLimitClick = (quickLimit: QuickLimitOption) => {
+    const percentBN = MustBigNumber(quickLimit).div(100);
+
+    const multiplier =
+      tradeValues.side === OrderSide.BUY
+        ? BIG_NUMBERS.ONE.minus(percentBN)
+        : BIG_NUMBERS.ONE.plus(percentBN);
+
+    dispatch(
+      tradeFormActions.setLimitPrice(
+        midPrice?.times(multiplier).toFixed(tickSizeDecimals ?? TOKEN_DECIMALS) ?? ''
+      )
+    );
+
+    track(
+      AnalyticsEvents.TradeQuickLimitOptionClick({
+        quickLimit,
+        side: tradeValues.side,
+        marketId: ticker ?? '',
+      })
+    );
+  };
+
+  const quickLimitSizeButtons = (
+    <div tw="row gap-0.5">
+      {QUICK_LIMIT_OPTIONS.map((quickLimit: QuickLimitOption) => (
+        <Button
+          tw="[--button-backgroundColor:var(--simpleUi-dialog-primaryColor)]"
+          key={quickLimit}
+          type={ButtonType.Button}
+          action={ButtonAction.Base}
+          size={ButtonSize.Small}
+          onClick={() => onQuickLimitClick(quickLimit)}
+        >
+          {quickLimit === '0'
+            ? stringGetter({ key: STRING_KEYS.MID_MARKET_PRICE_SHORT })
+            : `${tradeValues.side === OrderSide.BUY ? '-' : ''}${quickLimit}%`}
+        </Button>
+      ))}
+    </div>
+  );
+
+  return (
+    <div tw="flexColumn items-center gap-2 pb-[12.5rem] pt-[6.5vh]">
+      <TradeFormHeaderMobile />
+      <div tw="flexColumn w-full items-center gap-0.5">{sizeToggle}</div>
+      {tradeValues.type === TradeFormType.LIMIT && (
+        <div tw="flexColumn items-center gap-1">
+          {limitPriceInput}
+          {quickLimitSizeButtons}
+        </div>
+      )}
+
+      <div
+        tw="flexColumn fixed bottom-0 left-0 right-0 gap-1 px-1.25 py-1.25"
+        css={{
+          background:
+            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
+        }}
+      >
+        <TradeFormMessages
+          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
+          placeOrderError={placeOrderError}
+          primaryAlert={primaryAlert}
+          shouldPromptUserToPlaceLimitOrder={shouldPromptUserToPlaceLimitOrder}
+        />
+        {receiptArea}
+        {placeOrderButton}
+      </div>
+
+      <MarketsMenuDialog />
+    </div>
+  );
+};
+
+export default TradeForm;
+
+const $FeeTrigger = styled.button.attrs({
+  type: 'button',
+})`
+  ${tw`row gap-0.25 text-color-text-2`}
+
+  svg {
+    color: var(--color-text-0);
+  }
+
+  &[data-state='open'] {
+    svg {
+      transition: rotate 0.3s var(--ease-out-expo);
+      rotate: -0.5turn;
+    }
+  }
+`;
diff --git a/src/pages/trade/mobile-web/TradeFormHeader.tsx b/src/pages/trade/mobile-web/TradeFormHeader.tsx
new file mode 100644
index 0000000000..47edd0d21f
--- /dev/null
+++ b/src/pages/trade/mobile-web/TradeFormHeader.tsx
@@ -0,0 +1,76 @@
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import styled from 'styled-components';
+
+import { useAppSelectorWithArgs } from '@/hooks/useParameterizedSelector';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Output, OutputType, ShowSign } from '@/components/Output';
+import { MidMarketPrice } from '@/views/MidMarketPrice';
+import { MobileTradeAssetSelector } from '@/views/mobile/MobileTradeAssetSelector';
+
+import { useAppSelector } from '@/state/appTypes';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const TradeFormHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
+  const assetId = useAppSelector(BonsaiHelpers.currentMarket.assetId);
+
+  const launchableAsset = useAppSelectorWithArgs(BonsaiHelpers.assets.selectAssetInfo, assetId);
+
+  const percentChange24h = launchableAsset?.percentChange24h
+    ? MustBigNumber(launchableAsset.percentChange24h).div(100).toNumber()
+    : undefined;
+
+  const assetPrice = launchableAsset ? (
+    <Output tw="font-medium-bold" type={OutputType.Fiat} value={launchableAsset?.price} />
+  ) : (
+    <MidMarketPrice tw="font-medium-bold" richColor={false} />
+  );
+
+  return (
+    <$Header>
+      <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
+
+      <$Right>
+        <div tw="flexColumn items-end justify-end gap-0.125">
+          {assetPrice}
+          <Output
+            tw="font-small-medium"
+            css={{
+              color: MustBigNumber(percentChange24h).isZero()
+                ? undefined
+                : MustBigNumber(percentChange24h).gt(0)
+                  ? 'var(--color-positive)'
+                  : 'var(--color-negative)',
+            }}
+            type={OutputType.Percent}
+            showSign={ShowSign.None}
+            value={percentChange24h}
+          />
+        </div>
+      </$Right>
+    </$Header>
+  );
+};
+
+const $Header = styled.header`
+  ${layoutMixins.contentSectionDetachedScrollable}
+
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+
+  ${layoutMixins.row}
+
+  gap: 1rem;
+
+  color: var(--color-text-2);
+  background-color: var(--color-layer-2);
+`;
+
+const $Right = styled.div`
+  margin-left: auto;
+
+  ${layoutMixins.rowColumn}
+  justify-items: flex-end;
+`;
diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
new file mode 100644
index 0000000000..ba94a226b6
--- /dev/null
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -0,0 +1,65 @@
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import styled from 'styled-components';
+
+import { ButtonShape, ButtonSize } from '@/constants/buttons';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
+import { MobileTradeAssetSelector } from '@/views/mobile/MobileTradeAssetSelector';
+import { FavoriteButton } from '@/views/tables/MarketsTable/FavoriteButton';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setIsUserMenuOpen } from '@/state/dialogs';
+
+export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
+  const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
+  const dispatch = useAppDispatch();
+
+  const openUserMenu = () => {
+    dispatch(setIsUserMenuOpen(true));
+  };
+
+  return (
+    <$Header>
+      {id && <FavoriteButton marketId={id} tw="ml-[-0.5rem]" />}
+
+      <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
+
+      <$Right>
+        <Button
+          tw="size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
+          shape={ButtonShape.Circle}
+          size={ButtonSize.XSmall}
+          onClick={openUserMenu}
+        >
+          <Icon iconName={IconName.Menu} />
+        </Button>
+      </$Right>
+    </$Header>
+  );
+};
+
+const $Header = styled.header`
+  ${layoutMixins.contentSectionDetachedScrollable}
+
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+
+  ${layoutMixins.row}
+
+  padding-left: 1rem;
+  padding-right: 1.5rem;
+  gap: 1rem;
+
+  color: var(--color-text-2);
+  background-color: var(--color-layer-2);
+`;
+
+const $Right = styled.div`
+  margin-left: auto;
+
+  ${layoutMixins.rowColumn}
+  justify-items: flex-end;
+`;
diff --git a/src/state/dialogs.ts b/src/state/dialogs.ts
index 6f5d1f0297..996e664e59 100644
--- a/src/state/dialogs.ts
+++ b/src/state/dialogs.ts
@@ -6,6 +6,7 @@ export interface DialogsState {
   activeDialog?: DialogType;
   activeTradeBoxDialog?: TradeBoxDialogType;
   isUserMenuOpen: boolean;
+  isMarketsMenuOpen: boolean;
   dialogQueue: DialogType[];
 }
 
@@ -13,6 +14,7 @@ const initialState: DialogsState = {
   activeDialog: undefined,
   activeTradeBoxDialog: undefined,
   isUserMenuOpen: false,
+  isMarketsMenuOpen: false,
   dialogQueue: [],
 };
 
@@ -47,6 +49,9 @@ export const dialogsSlice = createSlice({
     setIsUserMenuOpen: (state, action: PayloadAction<boolean>) => {
       state.isUserMenuOpen = action.payload;
     },
+    setIsMarketsMenuOpen: (state, action: PayloadAction<boolean>) => {
+      state.isMarketsMenuOpen = action.payload;
+    },
   },
 });
 
@@ -57,4 +62,5 @@ export const {
   openDialog,
   openDialogInTradeBox,
   setIsUserMenuOpen,
+  setIsMarketsMenuOpen,
 } = dialogsSlice.actions;
diff --git a/src/state/dialogsSelectors.ts b/src/state/dialogsSelectors.ts
index fb4d189784..0f00411e89 100644
--- a/src/state/dialogsSelectors.ts
+++ b/src/state/dialogsSelectors.ts
@@ -5,3 +5,5 @@ export const getActiveDialog = (state: RootState) => state.dialogs.activeDialog;
 export const getActiveTradeBoxDialog = (state: RootState) => state.dialogs.activeTradeBoxDialog;
 
 export const getIsUserMenuOpen = (state: RootState) => state.dialogs.isUserMenuOpen;
+
+export const getIsMarketsMenuOpen = (state: RootState) => state.dialogs.isMarketsMenuOpen;
diff --git a/src/views/PositionInfo.tsx b/src/views/PositionInfo.tsx
index 2c8720d5fa..9c5992f86d 100644
--- a/src/views/PositionInfo.tsx
+++ b/src/views/PositionInfo.tsx
@@ -452,7 +452,7 @@ const $MobileDetails = styled(Details)`
   }
 `;
 
-const $Actions = styled.footer`
+const $Actions = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
diff --git a/src/views/dialogs/MarketsDialog/MarketFilterRow.tsx b/src/views/dialogs/MarketsDialog/MarketFilterRow.tsx
new file mode 100644
index 0000000000..3b85bc59a3
--- /dev/null
+++ b/src/views/dialogs/MarketsDialog/MarketFilterRow.tsx
@@ -0,0 +1,103 @@
+import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { MarketsSortType } from '@/constants/marketList';
+import { MARKET_FILTER_OPTIONS, MarketFilters } from '@/constants/markets';
+import { MenuItem } from '@/constants/menus';
+
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Button } from '@/components/Button';
+import type { DropdownMenuItem } from '@/components/DropdownMenu';
+import { Icon, IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { SearchInput } from '@/components/SearchInput';
+import { SimpleUiDropdownMenu } from '@/components/SimpleUiDropdownMenu';
+import { SortIcon } from '@/components/SortIcon';
+import { NewTag } from '@/components/Tag';
+import { ToggleGroup } from '@/components/ToggleGroup';
+
+const MarketFilterRow = ({
+  filter,
+  marketFilters,
+  onCloseSearch,
+  setFilter,
+  setSearchFilter,
+  sortItems,
+  sortTypeLabel,
+}: {
+  filter: MarketFilters;
+  marketFilters: MarketFilters[];
+  onCloseSearch: () => void;
+  setFilter: (filter: MarketFilters) => void;
+  setSearchFilter: (searchFilter: string) => void;
+  sortItems: DropdownMenuItem<MarketsSortType>[];
+  sortTypeLabel: string;
+}) => {
+  const stringGetter = useStringGetter();
+  return (
+    <div tw="flexColumn gap-1 px-1.25 py-1 pt-[1.25rem]">
+      <div tw="row justify-between">
+        <div tw="row">
+          <IconButton tw="mr-0.5" onClick={onCloseSearch} iconName={IconName.Close} />
+          <span tw="text-color-text-2 font-medium-bold">
+            {stringGetter({ key: STRING_KEYS.MARKETS })}
+          </span>
+        </div>
+        <div tw="row gap-0.5">
+          <span tw="text-color-text-0 font-small-book">{sortTypeLabel}</span>
+          <SimpleUiDropdownMenu
+            align="end"
+            tw="z-1"
+            items={sortItems}
+            slotTop={<span tw="text-color-text-0 font-small-book">Sort by</span>}
+          >
+            <Button tw="size-2 min-w-2" shape={ButtonShape.Circle} size={ButtonSize.XXSmall}>
+              <SortIcon />
+            </Button>
+          </SimpleUiDropdownMenu>
+        </div>
+      </div>
+      <div tw="flexColumn gap-1">
+        <SearchInput
+          tw="w-full"
+          css={{
+            '--search-input-icon-color': 'var(--color-text-2)',
+            '--search-input-icon-opacity': 0.5,
+          }}
+          placeholder={`${stringGetter({ key: STRING_KEYS.SEARCH })}...`}
+          onTextChange={setSearchFilter}
+        />
+        <ToggleGroup
+          items={
+            Object.values(marketFilters).map((value) => {
+              const { labelIconName, labelStringKey, isNew } = MARKET_FILTER_OPTIONS[value];
+              return {
+                label: labelIconName ? (
+                  <Icon iconName={labelIconName} />
+                ) : (
+                  stringGetter({
+                    key: labelStringKey,
+                    fallback: value,
+                  })
+                ),
+                slotAfter: isNew && <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>,
+                value,
+              };
+            }) satisfies MenuItem<MarketFilters>[]
+          }
+          css={{
+            '--button-toggle-on-border': 'none',
+            '--button-toggle-off-border': 'solid var(--default-border-width) var(--color-border)',
+            '--button-toggle-off-backgroundColor': 'transparent',
+            '--button-toggle-on-backgroundColor': 'var(--color-layer-4)',
+          }}
+          value={filter}
+          onValueChange={setFilter}
+          overflow="scroll"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MarketFilterRow;
diff --git a/src/views/dialogs/MarketsDialog/MarketRow.tsx b/src/views/dialogs/MarketsDialog/MarketRow.tsx
new file mode 100644
index 0000000000..cdb641dbec
--- /dev/null
+++ b/src/views/dialogs/MarketsDialog/MarketRow.tsx
@@ -0,0 +1,92 @@
+import { Link } from 'react-router-dom';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { MarketData } from '@/constants/markets';
+import { AppRoute } from '@/constants/routes';
+
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { AssetIcon } from '@/components/AssetIcon';
+import { Output, OutputType } from '@/components/Output';
+import { Tag } from '@/components/Tag';
+
+import { useAppDispatch } from '@/state/appTypes';
+import { setIsMarketsMenuOpen } from '@/state/dialogs';
+
+import { calculateMarketMaxLeverage } from '@/lib/marketsHelpers';
+
+export const MarketRow = ({ className, market }: { className?: string; market: MarketData }) => {
+  const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
+
+  const closeMarketsMenu = () => {
+    dispatch(setIsMarketsMenuOpen(false));
+  };
+
+  const percentChangeColor = market.percentChange24h
+    ? market.percentChange24h >= 0
+      ? 'var(--color-positive)'
+      : 'var(--color-negative)'
+    : 'var(--color-text-1)';
+
+  return (
+    <Link
+      className={className}
+      tw="row cursor-pointer justify-between gap-0.5 px-1.25 hover:bg-color-layer-4"
+      to={`${AppRoute.Trade}/${market.id}`}
+      onClick={closeMarketsMenu}
+    >
+      <div tw="row min-w-0 flex-grow-0 gap-0.5">
+        <AssetIcon logoUrl={market.logo} tw="size-[2.25rem] min-w-[2.25rem]" />
+        <div tw="flexColumn gap-0.25">
+          <div tw="row gap-0.25 leading-[1rem]">
+            <span tw="overflow-hidden text-ellipsis whitespace-nowrap">
+              {market.displayableAsset}
+            </span>
+
+            <Tag tw="bg-color-layer-4">
+              <Output
+                tw="text-color-text-1"
+                type={OutputType.Multiple}
+                value={calculateMarketMaxLeverage({
+                  effectiveInitialMarginFraction: market.effectiveInitialMarginFraction,
+                  initialMarginFraction: market.initialMarginFraction,
+                })}
+                fractionDigits={0}
+              />
+            </Tag>
+          </div>
+          <Output
+            tw="text-color-text-1 font-small-book"
+            type={OutputType.CompactFiat}
+            value={market.marketCap}
+            slotLeft={
+              <span tw="mr-0.25 text-color-text-0">
+                {stringGetter({ key: STRING_KEYS.MARKET })}
+              </span>
+            }
+          />
+        </div>
+      </div>
+
+      <div tw="flex flex-col items-end gap-0.25 text-end">
+        <Output
+          tw="text-color-text-2"
+          useGrouping
+          withSubscript
+          type={OutputType.Fiat}
+          value={market.oraclePrice}
+          fractionDigits={market.tickSizeDecimals}
+        />
+        <Output
+          tw="font-small-book"
+          css={{
+            color: percentChangeColor,
+          }}
+          type={OutputType.Percent}
+          value={market.percentChange24h}
+        />
+      </div>
+    </Link>
+  );
+};
diff --git a/src/views/dialogs/MarketsDialog/MarketsDialog.tsx b/src/views/dialogs/MarketsDialog/MarketsDialog.tsx
new file mode 100644
index 0000000000..7da05bcaa3
--- /dev/null
+++ b/src/views/dialogs/MarketsDialog/MarketsDialog.tsx
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Dialog, DialogPlacement } from '@/components/Dialog';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setIsMarketsMenuOpen } from '@/state/dialogs';
+import { getIsMarketsMenuOpen } from '@/state/dialogsSelectors';
+
+import { MarketList } from './MarketsList';
+
+const Content = () => {
+  return (
+    <div tw="h-full flex-1">
+      <MarketList />
+    </div>
+  );
+};
+
+export const MarketsMenuDialog = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
+  const isMarketsMenuOpen = useAppSelector(getIsMarketsMenuOpen);
+
+  const toggleMarketsMenu = (isOpen: boolean) => {
+    dispatch(setIsMarketsMenuOpen(isOpen));
+  };
+
+  return (
+    <$Dialog
+      isOpen={isMarketsMenuOpen}
+      title={stringGetter({ key: STRING_KEYS.MARKETS })}
+      setIsOpen={toggleMarketsMenu}
+      placement={DialogPlacement.Inline}
+    >
+      <Content />
+    </$Dialog>
+  );
+};
+
+const $Dialog = styled(Dialog)`
+  --dialog-backgroundColor: var(--color-layer-1);
+  --dialog-header-backgroundColor: var(--color-layer-1);
+  box-shadow: none;
+  z-index: 3;
+`;
diff --git a/src/views/dialogs/MarketsDialog/MarketsList.tsx b/src/views/dialogs/MarketsDialog/MarketsList.tsx
new file mode 100644
index 0000000000..049989833c
--- /dev/null
+++ b/src/views/dialogs/MarketsDialog/MarketsList.tsx
@@ -0,0 +1,318 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import type { Range } from '@tanstack/react-virtual';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
+import orderBy from 'lodash/orderBy';
+
+import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { ListItem, MarketsSortType } from '@/constants/marketList';
+import { MARKET_FILTER_OPTIONS, MarketData, MarketFilters } from '@/constants/markets';
+import { MenuItem } from '@/constants/menus';
+
+import { useMarketsData } from '@/hooks/useMarketsData';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
+import { SearchInput } from '@/components/SearchInput';
+import { SimpleUiDropdownMenu } from '@/components/SimpleUiDropdownMenu';
+import { SortIcon } from '@/components/SortIcon';
+import { NewTag } from '@/components/Tag';
+import { ToggleGroup } from '@/components/ToggleGroup';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setSimpleUISortMarketsBy } from '@/state/appUiConfigs';
+import { getSimpleUISortMarketsBy } from '@/state/appUiConfigsSelectors';
+import { setMarketFilter } from '@/state/perpetuals';
+import { getMarketFilter } from '@/state/perpetualsSelectors';
+
+import { isPresent } from '@/lib/typeUtils';
+
+import { MarketRow } from './MarketRow';
+
+const sortMarkets = (markets: MarketData[], sortType: MarketsSortType) => {
+  switch (sortType) {
+    case MarketsSortType.MarketCap:
+      return orderBy(markets, (market) => market.marketCap ?? 0, ['desc']);
+    case MarketsSortType.Volume:
+      return orderBy(markets, (market) => market.volume24h ?? 0, ['desc']);
+    case MarketsSortType.Gainers:
+      return orderBy(markets, (market) => market.percentChange24h ?? 0, ['desc']);
+    case MarketsSortType.Losers:
+      return orderBy(markets, (market) => market.percentChange24h ?? 0, ['asc']);
+    case MarketsSortType.Favorites:
+      return orderBy(markets, (market) => market.isFavorite, ['desc']);
+    default:
+      return markets;
+  }
+};
+
+const POSITION_ROW_HEIGHT = 60;
+const MARKET_ROW_HEIGHT = 60;
+const HEADER_ROW_HEIGHT = 52;
+
+const getItemHeight = (item: ListItem) => {
+  const customHeight = item.customHeight;
+  const itemType = item.itemType;
+
+  if (itemType === 'custom') {
+    if (customHeight == null) {
+      throw new Error(`MarketList: ${item} has no custom height`);
+    }
+
+    return customHeight;
+  }
+
+  return (
+    customHeight ??
+    {
+      position: POSITION_ROW_HEIGHT,
+      market: MARKET_ROW_HEIGHT,
+      header: HEADER_ROW_HEIGHT,
+    }[itemType]
+  );
+};
+
+export const MarketList = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
+
+  // Filters and sort
+  const filter: MarketFilters = useAppSelector(getMarketFilter);
+  const [searchFilter, setSearchFilter] = useState<string>();
+  const sortType = useAppSelector(getSimpleUISortMarketsBy);
+
+  const setSortType = useCallback(
+    (newSortType: MarketsSortType) => {
+      dispatch(setSimpleUISortMarketsBy(newSortType));
+    },
+    [dispatch]
+  );
+
+  // Markets and Filters
+  const { filteredMarkets, hasMarketIds, marketFilters } = useMarketsData({
+    filter,
+    searchFilter,
+  });
+
+  const setFilter = useCallback(
+    (newFilter: MarketFilters) => {
+      dispatch(setMarketFilter(newFilter));
+    },
+    [dispatch]
+  );
+
+  const sortedMarkets = sortMarkets(filteredMarkets, sortType);
+
+  const sortItems = useMemo(
+    () => [
+      {
+        label: stringGetter({ key: STRING_KEYS.MARKET_CAP }),
+        value: MarketsSortType.MarketCap,
+        active: sortType === MarketsSortType.MarketCap,
+        icon: <Icon iconName={IconName.Price} />,
+        onSelect: () => setSortType(MarketsSortType.MarketCap),
+      },
+      {
+        label: stringGetter({ key: STRING_KEYS.VOLUME }),
+        value: MarketsSortType.Volume,
+        active: sortType === MarketsSortType.Volume,
+        icon: <Icon iconName={IconName.Volume} />,
+        onSelect: () => setSortType(MarketsSortType.Volume),
+      },
+      {
+        label: stringGetter({ key: STRING_KEYS.GAINERS }),
+        value: MarketsSortType.Gainers,
+        active: sortType === MarketsSortType.Gainers,
+        icon: <Icon iconName={IconName.TrendingUp} />,
+        onSelect: () => setSortType(MarketsSortType.Gainers),
+      },
+      {
+        label: stringGetter({ key: STRING_KEYS.LOSERS }),
+        value: MarketsSortType.Losers,
+        active: sortType === MarketsSortType.Losers,
+        icon: <Icon iconName={IconName.TrendingDown} />,
+        onSelect: () => setSortType(MarketsSortType.Losers),
+      },
+      {
+        label: stringGetter({ key: STRING_KEYS.FAVORITES }),
+        value: MarketsSortType.Favorites,
+        active: sortType === MarketsSortType.Favorites,
+        icon: <Icon iconName={IconName.Star} />,
+        onSelect: () => setSortType(MarketsSortType.Favorites),
+      },
+    ],
+    [stringGetter, sortType, setSortType]
+  );
+
+  const searchViewItems: ListItem[] = useMemo(
+    () => [
+      ...sortedMarkets.map((market) => ({
+        itemType: 'market' as const,
+        item: market,
+      })),
+    ],
+    [sortedMarkets]
+  );
+
+  const items = searchViewItems;
+
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const activeStickyIndexRef = useRef(0);
+
+  const stickyIndexes = useMemo(
+    () => items.map((item, idx) => (item.isSticky ? idx : undefined)).filter(isPresent),
+    [items]
+  );
+
+  const isSticky = (index: number) => stickyIndexes.includes(index);
+
+  const isActiveSticky = (index: number) => activeStickyIndexRef.current === index;
+
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    estimateSize: (index: number) => getItemHeight(items[index]!),
+    getScrollElement: () => parentRef.current,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        activeStickyIndexRef.current =
+          [...stickyIndexes].reverse().find((index) => range.startIndex >= index) ?? 0;
+
+        const next = new Set([activeStickyIndexRef.current, ...defaultRangeExtractor(range)]);
+
+        return [...next].sort((a, b) => a - b);
+      },
+      [stickyIndexes]
+    ),
+  });
+
+  if (!hasMarketIds) {
+    return <LoadingSpace id="markets-list" />;
+  }
+
+  const sortTypeLabel = sortItems.find((item) => item.value === sortType)?.label ?? '';
+
+  return (
+    <div
+      ref={parentRef}
+      tw="relative h-full max-h-full w-full max-w-full overflow-auto"
+      css={{
+        '--marketList-search-height': '5.5rem',
+        paddingBottom: 'var(--marketList-search-height)',
+      }}
+    >
+      <div tw="flexColumn gap-1 py-1 pt-[1.25rem]">
+        <div tw="flexColumn gap-1">
+          <div tw="row">
+            <SearchInput
+              tw="w-full"
+              css={{
+                '--search-input-icon-color': 'var(--color-text-2)',
+                '--search-input-icon-opacity': 0.5,
+              }}
+              placeholder={`${stringGetter({ key: STRING_KEYS.SEARCH })}...`}
+              onTextChange={setSearchFilter}
+            />
+            <div tw="row gap-0.5">
+              <span tw="text-color-text-0 font-small-book">{sortTypeLabel}</span>
+              <SimpleUiDropdownMenu
+                align="end"
+                tw="z-1"
+                items={sortItems}
+                slotTop={<span tw="text-color-text-0 font-small-book">Sort by</span>}
+              >
+                <Button tw="size-2 min-w-2" shape={ButtonShape.Circle} size={ButtonSize.XXSmall}>
+                  <SortIcon />
+                </Button>
+              </SimpleUiDropdownMenu>
+            </div>
+          </div>
+          <ToggleGroup
+            items={
+              Object.values(marketFilters).map((value) => {
+                const { labelIconName, labelStringKey, isNew } = MARKET_FILTER_OPTIONS[value];
+                return {
+                  label: labelIconName ? (
+                    <Icon iconName={labelIconName} />
+                  ) : (
+                    stringGetter({
+                      key: labelStringKey,
+                      fallback: value,
+                    })
+                  ),
+                  slotAfter: isNew && <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>,
+                  value,
+                };
+              }) satisfies MenuItem<MarketFilters>[]
+            }
+            css={{
+              '--button-toggle-on-border': 'none',
+              '--button-toggle-off-border': 'solid var(--default-border-width) var(--color-border)',
+              '--button-toggle-off-backgroundColor': 'transparent',
+              '--button-toggle-on-backgroundColor': 'var(--color-layer-4)',
+            }}
+            value={filter}
+            onValueChange={setFilter}
+            overflow="scroll"
+          />
+        </div>
+      </div>
+      <div
+        tw="relative w-full"
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+        }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.index}
+            tw="left-0 top-0 w-full"
+            style={{
+              ...(isSticky(virtualRow.index)
+                ? {
+                    zIndex: 1,
+                  }
+                : {}),
+              ...(isActiveSticky(virtualRow.index)
+                ? {
+                    position: 'sticky',
+                  }
+                : {
+                    position: 'absolute',
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }),
+              height: `${virtualRow.size}px`,
+            }}
+          >
+            <ItemRenderer listItem={items[virtualRow.index]!} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ItemRenderer = ({ listItem }: { listItem: ListItem }) => {
+  const height = getItemHeight(listItem);
+
+  if (listItem.itemType === 'market') {
+    return <MarketRow css={{ height }} market={listItem.item} />;
+  }
+
+  if (listItem.itemType === 'custom') {
+    return <div css={{ height }}>{listItem.item}</div>;
+  }
+
+  return (
+    <div
+      tw="flex flex-row items-end justify-between bg-color-layer-2 px-1.25 pb-[0.75rem] text-color-text-2 font-medium-bold"
+      css={{ height }}
+    >
+      {listItem.item}
+      {listItem.slotRight}
+    </div>
+  );
+};
diff --git a/src/views/dialogs/MobileUserMenuDialog.tsx b/src/views/dialogs/MobileUserMenuDialog.tsx
new file mode 100644
index 0000000000..c245d7144a
--- /dev/null
+++ b/src/views/dialogs/MobileUserMenuDialog.tsx
@@ -0,0 +1,343 @@
+import { useState } from 'react';
+
+import { BonsaiCore } from '@/bonsai/ontology';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { OnboardingState } from '@/constants/account';
+import { ButtonAction, ButtonShape, ButtonSize, ButtonStyle } from '@/constants/buttons';
+import { ComplianceStates } from '@/constants/compliance';
+import { MODERATE_DEBOUNCE_MS } from '@/constants/debounce';
+import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
+import { AppRoute } from '@/constants/routes';
+
+import { useAccounts } from '@/hooks/useAccounts';
+import { useComplianceState } from '@/hooks/useComplianceState';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Button } from '@/components/Button';
+import { Dialog, DialogPlacement } from '@/components/Dialog';
+import { Icon, IconName } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { MixedColorFiatOutput } from '@/components/MixedColorFiatOutput';
+import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
+
+import { calculateCanAccountTrade } from '@/state/accountCalculators';
+import { getOnboardingState } from '@/state/accountSelectors';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { openDialog, setIsUserMenuOpen } from '@/state/dialogs';
+import { getIsUserMenuOpen } from '@/state/dialogsSelectors';
+import { selectIsTurnkeyConnected } from '@/state/walletSelectors';
+
+import { isTruthy } from '@/lib/isTruthy';
+import { orEmptyObj } from '@/lib/typeUtils';
+import { truncateAddress } from '@/lib/wallet';
+
+const UserMenuContent = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const onboardingState = useAppSelector(getOnboardingState);
+  const { complianceState } = useComplianceState();
+  const canAccountTrade = useAppSelector(calculateCanAccountTrade);
+  const isTurnkeyConnected = useAppSelector(selectIsTurnkeyConnected);
+  const { equity, freeCollateral } = orEmptyObj(
+    useAppSelector(BonsaiCore.account.parentSubaccountSummary.data)
+  );
+
+  const isLoading =
+    useAppSelector(BonsaiCore.account.parentSubaccountSummary.loading) === 'pending';
+
+  const {
+    sourceAccount: { address },
+    dydxAddress,
+  } = useAccounts();
+
+  const [walletDisplay, setWalletDisplay] = useState<'chain' | 'source'>('chain');
+
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    if (walletDisplay === 'chain') {
+      if (!dydxAddress) return;
+      setCopied(true);
+      navigator.clipboard.writeText(dydxAddress);
+      setTimeout(() => setCopied(false), MODERATE_DEBOUNCE_MS);
+    } else {
+      if (!address) return;
+      setCopied(true);
+      navigator.clipboard.writeText(address);
+      setTimeout(() => setCopied(false), MODERATE_DEBOUNCE_MS);
+    }
+  };
+
+  const menuItems = [
+    onboardingState === OnboardingState.AccountConnected && {
+      key: 'history',
+      label: stringGetter({ key: STRING_KEYS.HISTORY }),
+      icon: <Icon iconName={IconName.Clock} />,
+      onClick: () => {
+        navigate(AppRoute.Portfolio);
+      },
+    },
+    onboardingState === OnboardingState.AccountConnected && {
+      key: 'settings',
+      label: stringGetter({ key: STRING_KEYS.SETTINGS }),
+      icon: <Icon iconName={IconName.GearStroke} />,
+      onClick: () => {
+        navigate(AppRoute.Settings);
+      },
+    },
+    {
+      key: 'help',
+      label: stringGetter({ key: STRING_KEYS.HELP }),
+      icon: <Icon iconName={IconName.InfoStroke} />,
+      onClick: () => {
+        dispatch(openDialog(DialogTypes.Help()));
+      },
+    },
+    onboardingState === OnboardingState.AccountConnected &&
+      (isTurnkeyConnected
+        ? {
+            key: 'export-turnkey',
+            label: stringGetter({ key: STRING_KEYS.ACCOUNT_MANAGEMENT }),
+            icon: <Icon iconName={IconName.User} />,
+            onClick: () => {
+              dispatch(openDialog(DialogTypes.ManageAccount()));
+            },
+          }
+        : {
+            key: 'export-keys',
+            label: stringGetter({ key: STRING_KEYS.EXPORT_DYDX_WALLET }),
+            icon: <Icon iconName={IconName.ExportKeys} />,
+            onClick: () => {
+              dispatch(openDialog(DialogTypes.MnemonicExport()));
+            },
+          }),
+    onboardingState !== OnboardingState.Disconnected && {
+      key: 'disconnect-wallet',
+      label: stringGetter({ key: STRING_KEYS.SIGN_OUT }),
+      highlightColor: 'var(--color-red)',
+      icon: <Icon iconName={IconName.XCircle} />,
+      withoutCaret: true,
+      onClick: () => {
+        dispatch(openDialog(DialogTypes.DisconnectWallet()));
+      },
+    },
+  ].filter(isTruthy);
+
+  const walletDisplayRow = canAccountTrade ? (
+    <div tw="row justify-between">
+      <Button
+        shape={ButtonShape.Pill}
+        action={ButtonAction.Secondary}
+        size={ButtonSize.XSmall}
+        tw="justify-start gap-0"
+        onClick={onCopy}
+      >
+        <div tw="row gap-0.5 text-color-text-2">
+          {walletDisplay === 'chain'
+            ? truncateAddress(dydxAddress)
+            : truncateAddress(address, '0x')}
+          <Icon
+            css={{
+              color: copied ? 'var(--color-success)' : 'var(--color-text-0)',
+            }}
+            iconName={copied ? IconName.Check : IconName.Copy}
+          />
+        </div>
+      </Button>
+      <Button
+        shape={ButtonShape.Pill}
+        size={ButtonSize.XSmall}
+        action={ButtonAction.Base}
+        disabled={address == null}
+        buttonStyle={ButtonStyle.WithoutBackground}
+        tw="justify-start gap-0 text-color-text-1 font-mini-book"
+        onClick={() => setWalletDisplay((prev) => (prev === 'chain' ? 'source' : 'chain'))}
+      >
+        <div tw="row gap-0.5">
+          {walletDisplay === 'chain'
+            ? `dYdX ${stringGetter({ key: STRING_KEYS.ADDRESS })}`
+            : stringGetter({ key: STRING_KEYS.SOURCE_ADDRESS })}
+          {address != null && (
+            <Icon
+              css={{
+                '--icon-size': '0.5rem',
+              }}
+              iconName={IconName.Caret}
+            />
+          )}
+        </div>
+      </Button>
+    </div>
+  ) : (
+    <OnboardingTriggerButton />
+  );
+
+  const userContent = (
+    <$UserContent>
+      <div tw="row justify-between">
+        <div tw="row gap-0.5">
+          <div tw="relative">
+            <img
+              tw="size-[3rem] rounded-1 bg-[#AA8CFF] object-contain"
+              src="/hedgie-profile.png"
+              alt="profile"
+            />
+            <span tw="absolute bottom-0 right-[-0.25rem] flex size-[1.375rem] min-h-[1.375rem] min-w-[1.375rem] items-center justify-center rounded-[50%] border-2 border-solid border-color-layer-1 bg-color-layer-2">
+              <img src="/logos/dydx-x.png" alt="dydx" tw="size-0.625" />
+            </span>
+          </div>
+
+          <div tw="flexColumn">
+            <MixedColorFiatOutput tw="font-large-book" value={equity} />
+            <span tw="text-color-text-0 font-mini-book">
+              {stringGetter({ key: STRING_KEYS.BALANCE })}
+            </span>
+          </div>
+        </div>
+      </div>
+      {walletDisplayRow}
+    </$UserContent>
+  );
+
+  const isTransferDisabled = !canAccountTrade || isLoading;
+  const hasBalance = freeCollateral?.gt(0);
+  const showWithdrawOnly = canAccountTrade && hasBalance;
+  const showAllTransferOptions =
+    canAccountTrade && complianceState === ComplianceStates.FULL_ACCESS;
+
+  const transferContent = showAllTransferOptions ? (
+    <div tw="row gap-0.5">
+      <Button
+        tw="flex-1"
+        state={{ isDisabled: isTransferDisabled }}
+        action={ButtonAction.Primary}
+        size={ButtonSize.BasePlus}
+        onClick={() => {
+          dispatch(openDialog(DialogTypes.Deposit2()));
+        }}
+      >
+        <Icon iconName={IconName.Deposit2} />
+        {stringGetter({ key: STRING_KEYS.DEPOSIT })}
+      </Button>
+      <IconButton
+        tw="text-color-accent"
+        size={ButtonSize.BasePlus}
+        shape={ButtonShape.Square}
+        iconName={IconName.Move}
+        onClick={() => {
+          dispatch(openDialog(DialogTypes.Withdraw2()));
+        }}
+      />
+      <IconButton
+        size={ButtonSize.BasePlus}
+        shape={ButtonShape.Square}
+        iconName={IconName.TransferArrows}
+        state={{ isDisabled: isTransferDisabled }}
+        onClick={() => {
+          dispatch(openDialog(DialogTypes.Transfer({})));
+        }}
+      />
+    </div>
+  ) : showWithdrawOnly ? (
+    <div tw="row gap-0.5">
+      <Button
+        tw="flex-1"
+        state={{ isDisabled: isTransferDisabled }}
+        action={ButtonAction.Primary}
+        onClick={() => {
+          dispatch(openDialog(DialogTypes.Withdraw2()));
+        }}
+      >
+        <Icon iconName={IconName.Move} />
+        {stringGetter({ key: STRING_KEYS.WITHDRAW })}
+      </Button>
+    </div>
+  ) : null;
+
+  const menuContent = (
+    <$MenuContent>
+      {menuItems.map((item) => (
+        <Button
+          key={item.key}
+          onClick={item.onClick}
+          css={{
+            '--button-border': 'none',
+            '--button-height': '3rem',
+            '--button-padding': '0 1rem',
+            borderRadius: 0,
+            justifyContent: 'space-between',
+            color: item.highlightColor ?? 'var(--color-text-1)',
+          }}
+        >
+          <div tw="row gap-0.5">
+            {item.icon}
+            {item.label}
+          </div>
+          {!item.withoutCaret && <$Caret iconName={IconName.Caret} />}
+        </Button>
+      ))}
+    </$MenuContent>
+  );
+
+  return (
+    <div tw="flexColumn gap-1.5">
+      {userContent}
+      {transferContent}
+      {menuContent}
+    </div>
+  );
+};
+
+export const UserMenuDialog = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useAppDispatch();
+  const isUserMenuOpen = useAppSelector(getIsUserMenuOpen);
+
+  const toggleUserMenu = (isOpen: boolean) => {
+    dispatch(setIsUserMenuOpen(isOpen));
+  };
+
+  return (
+    <$Dialog
+      isOpen={isUserMenuOpen}
+      title={stringGetter({ key: STRING_KEYS.MENU })}
+      setIsOpen={toggleUserMenu}
+      placement={DialogPlacement.Inline}
+    >
+      <UserMenuContent />
+    </$Dialog>
+  );
+};
+
+const $UserContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 1rem;
+  border: solid 1.6px var(--color-layer-2);
+  padding: 1rem;
+`;
+
+const $MenuContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  overflow: hidden;
+  gap: 1px;
+`;
+
+const $Caret = styled(Icon)`
+  --icon-size: 0.5rem;
+  transform: rotate(0.75turn);
+`;
+
+const $Dialog = styled(Dialog)`
+  --dialog-backgroundColor: var(--color-layer-1);
+  --dialog-header-backgroundColor: var(--color-layer-1);
+  box-shadow: none;
+  z-index: 3;
+`;
diff --git a/src/views/mobile/MobileTradeAssetSelector.tsx b/src/views/mobile/MobileTradeAssetSelector.tsx
new file mode 100644
index 0000000000..36ffd45e95
--- /dev/null
+++ b/src/views/mobile/MobileTradeAssetSelector.tsx
@@ -0,0 +1,84 @@
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import styled from 'styled-components';
+
+import { ButtonStyle } from '@/constants/buttons';
+
+import { useAppSelectorWithArgs } from '@/hooks/useParameterizedSelector';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { AssetIcon } from '@/components/AssetIcon';
+import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { setIsMarketsMenuOpen } from '@/state/dialogs';
+
+import { getAssetFromMarketId, getDisplayableAssetFromBaseAsset } from '@/lib/assetUtils';
+import { mapIfPresent } from '@/lib/do';
+import { orEmptyObj } from '@/lib/typeUtils';
+
+export const MobileTradeAssetSelector = ({
+  launchableMarketId,
+}: {
+  launchableMarketId?: string;
+}) => {
+  const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
+  const imageUrl = useAppSelector(BonsaiHelpers.currentMarket.assetLogo);
+  const leverage = useAppSelector(BonsaiHelpers.currentMarket.effectiveSelectedLeverage);
+
+  const dispatch = useAppDispatch();
+
+  const { displayableTicker } = orEmptyObj(useAppSelector(BonsaiHelpers.currentMarket.marketInfo));
+
+  const launchableAsset = useAppSelectorWithArgs(
+    BonsaiHelpers.assets.selectAssetInfo,
+    mapIfPresent(launchableMarketId, getAssetFromMarketId)
+  );
+
+  const assetRow = launchableAsset ? (
+    <div tw="inlineRow gap-[1ch]">
+      <img
+        src={launchableAsset.logo ?? undefined}
+        alt={launchableAsset.name}
+        tw="h-[2.5rem] w-[2.5rem] rounded-[50%]"
+      />
+      <$Name>
+        <h3>{launchableAsset.name}</h3>
+        <span>{getDisplayableAssetFromBaseAsset(launchableAsset.assetId)}</span>
+      </$Name>
+    </div>
+  ) : (
+    <div tw="inlineRow gap-[1ch]">
+      <AssetIcon tw="[--asset-icon-size:2.5rem]" logoUrl={imageUrl} symbol={id} />
+      <$Name>
+        <h3>{displayableTicker}</h3>
+        <span>{Math.round(leverage)}x</span>
+        <Icon iconName={IconName.Caret} size="0.75em" className="text-color-text-0" />
+      </$Name>
+    </div>
+  );
+
+  const openMarketsDialog = () => {
+    dispatch(setIsMarketsMenuOpen(true));
+  };
+
+  return (
+    <Button buttonStyle={ButtonStyle.WithoutBackground} onClick={openMarketsDialog}>
+      {assetRow}
+    </Button>
+  );
+};
+
+const $Name = styled.div`
+  ${layoutMixins.inlineRow}
+
+  h3 {
+    font: var(--font-large-medium);
+  }
+
+  > :nth-child(2) {
+    font: var(--font-mini-book);
+    color: var(--color-text-0);
+  }
+`;

From 2189d3a2047109dabf3b2c2de3214db63eeb795c Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Mon, 12 Jan 2026 15:14:06 +0700
Subject: [PATCH 02/27] updates

---
 src/bonsai/forms/trade/fields.ts              |  11 +-
 src/bonsai/forms/trade/reducer.ts             |   6 +
 src/bonsai/forms/trade/types.ts               |   2 +
 src/components/Collapsible.tsx                |   3 +
 src/components/CollapsibleTabs.tsx            |  24 +-
 src/components/MobileDropdownMenu.tsx         | 112 +++++
 src/constants/statsig.ts                      |   1 +
 src/hooks/tradingView/useTradingView.ts       |  60 +--
 src/hooks/useCurrentMarketId.ts               |   1 +
 src/hooks/useSimpleUiEnabled.ts               |   9 +
 src/lib/tradingView/utils.ts                  |   3 +
 src/pages/trade/HorizontalPanel.tsx           | 109 ++++-
 src/pages/trade/MobileTopPanel.tsx            |  60 +--
 src/pages/trade/Trade.tsx                     |   7 +-
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 371 +++++++++++++++
 .../trade/mobile-web/RegularTradeForm.tsx     | 422 +++++++++++++++++
 src/pages/trade/mobile-web/Trade.tsx          |  95 +++-
 src/pages/trade/mobile-web/TradeForm.tsx      | 425 +-----------------
 .../trade/mobile-web/TradeFormHeader.tsx      |   8 +-
 src/pages/trade/mobile-web/TradeHeader.tsx    | 252 ++++++++++-
 src/views/MarketStatsDetails.tsx              |  32 +-
 src/views/charts/TradingView/TvChart.tsx      |   4 +-
 src/views/dialogs/MarketsDialog/MarketRow.tsx |   2 +-
 .../dialogs/MarketsDialog/MarketsList.tsx     |   2 +-
 src/views/dialogs/MobileUserMenuDialog.tsx    |   4 +-
 src/views/dialogs/SetMarketLeverageDialog.tsx |   2 +-
 .../TradeForm/PlaceOrderButtonAndReceipt.tsx  |  61 +--
 src/views/mobile/MobileTradeAssetSelector.tsx |  26 +-
 src/views/tables/MobilePositionsTable.tsx     | 336 ++++++++++++++
 .../PositionsTable/PositionsTriggersCell.tsx  |  33 +-
 30 files changed, 1864 insertions(+), 619 deletions(-)
 create mode 100644 src/components/MobileDropdownMenu.tsx
 create mode 100644 src/pages/trade/mobile-web/CloseTradeForm.tsx
 create mode 100644 src/pages/trade/mobile-web/RegularTradeForm.tsx
 create mode 100644 src/views/tables/MobilePositionsTable.tsx

diff --git a/src/bonsai/forms/trade/fields.ts b/src/bonsai/forms/trade/fields.ts
index abd2ad6a25..55d811e53e 100644
--- a/src/bonsai/forms/trade/fields.ts
+++ b/src/bonsai/forms/trade/fields.ts
@@ -76,6 +76,7 @@ export function getTradeFormFieldStates(
     goodTil: DEFAULT_GOOD_TIL_TIME,
     stopLossOrder: undefined,
     takeProfitOrder: undefined,
+    isClosingPosition: false,
   };
 
   // Initialize all fields as not visible
@@ -151,7 +152,14 @@ export function getTradeFormFieldStates(
     makeTriggersVisibleIfPossible(result);
     switch (type) {
       case TradeFormType.MARKET:
-        makeVisible(result, ['marketId', 'side', 'size', 'marginMode', 'reduceOnly']);
+        makeVisible(result, [
+          'marketId',
+          'side',
+          'size',
+          'marginMode',
+          'reduceOnly',
+          'isClosingPosition',
+        ]);
         setMarginMode(result);
         disableReduceOnlyIfIncreasingMarketOrder(result);
 
@@ -166,6 +174,7 @@ export function getTradeFormFieldStates(
           'marginMode',
           'reduceOnly',
           'postOnly',
+          'isClosingPosition',
         ]);
         defaultSizeIfSizeInputIsInvalid(result);
         setMarginMode(result);
diff --git a/src/bonsai/forms/trade/reducer.ts b/src/bonsai/forms/trade/reducer.ts
index 5f8148666d..d950fc8e03 100644
--- a/src/bonsai/forms/trade/reducer.ts
+++ b/src/bonsai/forms/trade/reducer.ts
@@ -32,6 +32,7 @@ const getMinimumRequiredFields = (
     triggerPrice: undefined,
     stopLossOrder: undefined,
     takeProfitOrder: undefined,
+    isClosingPosition: undefined,
   };
 
   // Add marketId if provided
@@ -86,6 +87,11 @@ export const tradeFormReducer = createVanillaReducer({
       marginMode,
     }),
 
+    setIsClosingPosition: (state, isClosingPosition: boolean) => ({
+      ...state,
+      isClosingPosition,
+    }),
+
     // Size related actions
     setSizeToken: (state, value: string) => ({
       ...state,
diff --git a/src/bonsai/forms/trade/types.ts b/src/bonsai/forms/trade/types.ts
index fa003bf60c..0997a47dff 100644
--- a/src/bonsai/forms/trade/types.ts
+++ b/src/bonsai/forms/trade/types.ts
@@ -120,6 +120,8 @@ export type TradeForm = {
   // additional triggers
   stopLossOrder: TriggerOrderState | undefined;
   takeProfitOrder: TriggerOrderState | undefined;
+
+  isClosingPosition?: boolean;
 };
 
 // Define the FieldState type with conditional properties
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 177700f781..8c6c9af6f8 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -85,6 +85,9 @@ const $Root = styled(Root)`
   &[data-state='open'] {
     gap: 0.5rem;
   }
+
+  padding-bottom: 1rem;
+  border-bottom: solid 1px var(--color-border);
 `;
 
 const $Trigger = styled(Trigger)`
diff --git a/src/components/CollapsibleTabs.tsx b/src/components/CollapsibleTabs.tsx
index 29efedd0ed..89c77645a7 100644
--- a/src/components/CollapsibleTabs.tsx
+++ b/src/components/CollapsibleTabs.tsx
@@ -90,17 +90,19 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
             ))}
           </$TabsList>
 
-          <Toolbar>
-            {currentTab?.slotToolbar ?? slotToolbar}
-            <CollapsibleTrigger asChild>
-              <$IconButton
-                iconName={IconName.Caret}
-                isToggle
-                buttonStyle={ButtonStyle.WithoutBackground}
-                shape={ButtonShape.Square}
-              />
-            </CollapsibleTrigger>
-          </Toolbar>
+          {slotToolbar && (
+            <Toolbar>
+              {currentTab?.slotToolbar ?? slotToolbar}
+              <CollapsibleTrigger asChild>
+                <$IconButton
+                  iconName={IconName.Caret}
+                  isToggle
+                  buttonStyle={ButtonStyle.WithoutBackground}
+                  shape={ButtonShape.Square}
+                />
+              </CollapsibleTrigger>
+            </Toolbar>
+          )}
         </$Header>
 
         <CollapsibleContent tw="stack shadow-none">
diff --git a/src/components/MobileDropdownMenu.tsx b/src/components/MobileDropdownMenu.tsx
new file mode 100644
index 0000000000..013d0d5f36
--- /dev/null
+++ b/src/components/MobileDropdownMenu.tsx
@@ -0,0 +1,112 @@
+import { forwardRef } from 'react';
+
+import { Content, Item, Portal, Root, Separator, Trigger } from '@radix-ui/react-dropdown-menu';
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Fragment } from 'react/jsx-runtime';
+import styled from 'styled-components';
+
+import { forwardRefFn } from '@/lib/genericFunctionalComponentUtils';
+
+import { Button, ButtonProps } from './Button';
+import { DropdownMenuItem } from './DropdownMenu';
+
+type StyleProps = {
+  align?: 'center' | 'start' | 'end';
+  side?: 'top' | 'bottom';
+  sideOffset?: number;
+  className?: string;
+  withPortal?: boolean;
+};
+
+export const MobileDropdownMenu = forwardRefFn(
+  <T extends string>({
+    className,
+    children,
+    items,
+    slotTop,
+    align,
+    side,
+    sideOffset,
+    withPortal = true,
+  }: StyleProps & {
+    children: React.ReactNode;
+    items: DropdownMenuItem<T>[];
+    slotTop?: React.ReactNode;
+  }) => {
+    const content = (
+      <Content
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        tw="z-1 w-fit overflow-hidden rounded-[0.5rem] border border-solid border-color-border bg-color-layer-4"
+      >
+        {slotTop && (
+          <>
+            <div tw="px-1 py-0.5">{slotTop}</div>
+            <Separator tw="border-b-[length:--border-width] border-b-color-border [border-bottom-style:solid]" />
+          </>
+        )}
+        {items.map((item, idx) => (
+          <Fragment key={item.value}>
+            <Item
+              tw="row cursor-pointer select-none justify-between px-1 py-0.75 font-medium-book first:rounded-tl-[0.5rem] first:rounded-tr-[0.5rem] last:rounded-bl-[0.5rem] last:rounded-br-[0.5rem] disabled:cursor-default"
+              onSelect={item.onSelect}
+              disabled={!item.onSelect}
+              css={{
+                ...(item.active ? { backgroundColor: 'var(--color-layer-3)' } : {}),
+                cursor: item.onSelect ? 'pointer' : 'not-allowed',
+                color: {
+                  active: 'var(--color-text-0)',
+                  accent: 'var(--color-accent)',
+                  create: 'var(--color-green)',
+                  destroy: 'var(--color-red)',
+                  none: item.onSelect ? undefined : 'var(--color-text-1)',
+                }[item.highlightColor ?? (item.active ? 'active' : 'none')],
+              }}
+            >
+              <span tw="whitespace-nowrap">{item.label}</span>
+              {item.icon && <span tw="row ml-1">{item.icon}</span>}
+            </Item>
+            {idx !== items.length - 1 && (
+              <Separator tw="border-b-[length:--border-width] border-b-color-border [border-bottom-style:solid]" />
+            )}
+          </Fragment>
+        ))}
+      </Content>
+    );
+
+    const dropdownContent = withPortal ? <Portal>{content}</Portal> : content;
+
+    return (
+      <Root>
+        <Trigger className={className} asChild>
+          {children}
+        </Trigger>
+
+        {dropdownContent}
+      </Root>
+    );
+  }
+);
+
+export const DropdownMenuTrigger = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <DropdownMenuButton {...props} ref={ref}>
+      {children} <CaretDownIcon />
+    </DropdownMenuButton>
+  )
+);
+
+const DropdownMenuButton = styled(Button)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+
+  &[data-state='open'] {
+    svg {
+      transition: rotate 0.3s var(--ease-out-expo);
+      rotate: -0.5turn;
+    }
+  }
+`;
diff --git a/src/constants/statsig.ts b/src/constants/statsig.ts
index afeb6bd730..7e37fc5bf1 100644
--- a/src/constants/statsig.ts
+++ b/src/constants/statsig.ts
@@ -18,6 +18,7 @@ export enum StatsigFlags {
   ffSwapEnabled = 'ff_swap_ui_web',
   ffSpot = 'ff_spot',
   abPopupDeposit = 'ab_popup_deposit',
+  ffMobileWeb = 'ff_mobile_web',
 }
 
 export enum CustomFlags {
diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
index 675401efd2..a870e921dc 100644
--- a/src/hooks/tradingView/useTradingView.ts
+++ b/src/hooks/tradingView/useTradingView.ts
@@ -11,7 +11,7 @@ import {
 
 import { DEFAULT_RESOLUTION } from '@/constants/candles';
 import { TOGGLE_ACTIVE_CLASS_NAME } from '@/constants/charts';
-import { STRING_KEYS, SUPPORTED_LOCALE_MAP } from '@/constants/localization';
+import { SUPPORTED_LOCALE_MAP } from '@/constants/localization';
 import type { TvWidget } from '@/constants/tvchart';
 
 import { store } from '@/state/_store';
@@ -140,35 +140,35 @@ export const useTradingView = ({
         // Initialize additional right-click-menu options
         tvChartWidget!.onContextMenu(tradingViewLimitOrder);
 
-        tvChartWidget!.headerReady().then(() => {
-          // Order Lines
-          initializeToggle({
-            toggleRef: orderLineToggleRef,
-            widget: tvChartWidget!,
-            isOn: orderLinesToggleOn,
-            setToggleOn: setOrderLinesToggleOn,
-            label: stringGetter({
-              key: STRING_KEYS.ORDER_LINES,
-            }),
-            tooltip: stringGetter({
-              key: STRING_KEYS.ORDER_LINES_TOOLTIP,
-            }),
-          });
-
-          // Buy/Sell Marks
-          initializeToggle({
-            toggleRef: buySellMarksToggleRef,
-            widget: tvChartWidget!,
-            isOn: buySellMarksToggleOn,
-            setToggleOn: setBuySellMarksToggleOn,
-            label: stringGetter({
-              key: STRING_KEYS.BUYS_SELLS_TOGGLE,
-            }),
-            tooltip: stringGetter({
-              key: STRING_KEYS.BUYS_SELLS_TOGGLE_TOOLTIP,
-            }),
-          });
-        });
+        // tvChartWidget!.headerReady().then(() => {
+        //   // Order Lines
+        //   initializeToggle({
+        //     toggleRef: orderLineToggleRef,
+        //     widget: tvChartWidget!,
+        //     isOn: orderLinesToggleOn,
+        //     setToggleOn: setOrderLinesToggleOn,
+        //     label: stringGetter({
+        //       key: STRING_KEYS.ORDER_LINES,
+        //     }),
+        //     tooltip: stringGetter({
+        //       key: STRING_KEYS.ORDER_LINES_TOOLTIP,
+        //     }),
+        //   });
+
+        //   // Buy/Sell Marks
+        //   initializeToggle({
+        //     toggleRef: buySellMarksToggleRef,
+        //     widget: tvChartWidget!,
+        //     isOn: buySellMarksToggleOn,
+        //     setToggleOn: setBuySellMarksToggleOn,
+        //     label: stringGetter({
+        //       key: STRING_KEYS.BUYS_SELLS_TOGGLE,
+        //     }),
+        //     tooltip: stringGetter({
+        //       key: STRING_KEYS.BUYS_SELLS_TOGGLE_TOOLTIP,
+        //     }),
+        //   });
+        // });
 
         tvChartWidget!.subscribe('onAutoSaveNeeded', () =>
           tvChartWidget!.save((chartConfig: object) => {
diff --git a/src/hooks/useCurrentMarketId.ts b/src/hooks/useCurrentMarketId.ts
index d53f1c0a55..9aade9f6cb 100644
--- a/src/hooks/useCurrentMarketId.ts
+++ b/src/hooks/useCurrentMarketId.ts
@@ -165,6 +165,7 @@ export const useCurrentMarketId = (route: AppRoute = AppRoute.Trade) => {
   }, []);
 
   return {
+    marketId: validId,
     isViewingUnlaunchedMarket,
     hasLoadedMarkets: hasLoadedLaunchableMarkets && hasMarketIds,
   };
diff --git a/src/hooks/useSimpleUiEnabled.ts b/src/hooks/useSimpleUiEnabled.ts
index d4efb59d09..04a4ad0239 100644
--- a/src/hooks/useSimpleUiEnabled.ts
+++ b/src/hooks/useSimpleUiEnabled.ts
@@ -1,3 +1,12 @@
+// import { useBreakpoints } from '@/hooks/useBreakpoints';
+
+// import { testFlags } from '@/lib/testFlags';
+
 export const useSimpleUiEnabled = () => {
   return false;
+  // const { isTablet } = useBreakpoints();
+  // const forcedSimpleUiValue = testFlags.simpleUi;
+  // const isSimpleUi = isTablet ? (forcedSimpleUiValue ?? true) : false;
+
+  // return isSimpleUi;
 };
diff --git a/src/lib/tradingView/utils.ts b/src/lib/tradingView/utils.ts
index 9b80da2663..9cf92a8aca 100644
--- a/src/lib/tradingView/utils.ts
+++ b/src/lib/tradingView/utils.ts
@@ -225,6 +225,8 @@ export const getWidgetOptions = (
     'header_resolutions',
   ];
 
+  const disabledFeaturesForTablet: TradingTerminalFeatureset[] = ['header_widget'];
+
   const disabledFeatures: TradingTerminalFeatureset[] = [
     'header_symbol_search',
     'header_compare',
@@ -236,6 +238,7 @@ export const getWidgetOptions = (
     'trading_account_manager',
     ...(isViewingUnlaunchedMarket ? disabledFeaturesForUnlaunchedMarket : []),
     ...(isSimpleUi ? disabledFeaturesForSimpleUi : []),
+    ...(isTablet ? disabledFeaturesForTablet : []),
   ];
 
   // Needed for iframe loading on some mobile browsers
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index 0e6a242911..76856aad6b 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -4,6 +4,7 @@ import { BonsaiCore } from '@/bonsai/ontology';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { EMPTY_ARR } from '@/constants/objects';
 import { AppRoute } from '@/constants/routes';
@@ -14,15 +15,16 @@ import { useShouldShowTriggers } from '@/hooks/useShouldShowTriggers';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { CollapsibleTabs } from '@/components/CollapsibleTabs';
+import { Icon, IconName } from '@/components/Icon';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
-import { MobileTabs } from '@/components/Tabs';
+import { Output, OutputType } from '@/components/Output';
 import { Tag, TagType } from '@/components/Tag';
 import {
   FundingPaymentsTable,
   FundingPaymentsTableColumnKey,
 } from '@/pages/funding/FundingPaymentsTable';
-import { PositionInfo } from '@/views/PositionInfo';
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
+import { MobilePositionsTable } from '@/views/tables/MobilePositionsTable';
 import { OrdersTable, OrdersTableColumnKey } from '@/views/tables/OrdersTable';
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
@@ -36,19 +38,22 @@ import {
   createGetUnseenOpenOrdersCount,
   createGetUnseenOrderHistoryCount,
 } from '@/state/accountSelectors';
-import { useAppSelector } from '@/state/appTypes';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/appUiConfigsSelectors';
 import { getCurrentMarketId } from '@/state/currentMarketSelectors';
+import { openDialog } from '@/state/dialogs';
 import { getHasUncommittedOrders } from '@/state/localOrdersSelectors';
 
 import { isTruthy } from '@/lib/isTruthy';
 import { shortenNumberForDisplay } from '@/lib/numbers';
+import { orEmptyObj } from '@/lib/typeUtils';
 
 import { TradeTableSettings } from './TradeTableSettings';
 import { MaybeUnopenedIsolatedPositionsDrawer } from './UnopenedIsolatedPositions';
 import { MarketTypeFilter, PanelView } from './types';
 
 enum InfoSection {
+  Details = 'Details',
   Position = 'Position',
   Orders = 'Orders',
   OrderHistory = 'OrderHistory',
@@ -59,12 +64,12 @@ enum InfoSection {
 type ElementProps = {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean) => void;
-  handleStartResize?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
-export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }: ElementProps) => {
+export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { isTablet } = useBreakpoints();
 
   const allMarkets = useAppSelector(getDefaultToAllMarketsInPositionsOrdersFills);
@@ -89,6 +94,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
     showCurrentMarket ? currentMarketId : undefined
   );
   const orderHistoryTagNumber = shortenNumberForDisplay(numUnseenOrderHistory);
+  const subAccount = orEmptyObj(useAppSelector(BonsaiCore.account.parentSubaccountSummary.data));
 
   const openOrdersCount = useAppSelectorWithArgs(
     createGetOpenOrdersCount,
@@ -115,6 +121,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
 
   const initialPageSize = 20;
 
+  const { freeCollateral: availableBalance } = subAccount;
+
   const onViewOrders = useCallback(
     (market: string) => {
       navigate(`${AppRoute.Trade}/${market}`, {
@@ -128,6 +136,17 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
     [navigate]
   );
 
+  const detailsTabItem = useMemo(
+    () => ({
+      value: InfoSection.Details,
+      label: stringGetter({
+        key: STRING_KEYS.DETAILS,
+      }),
+      content: null,
+    }),
+    [stringGetter]
+  );
+
   const positionTabItem = useMemo(
     () => ({
       value: InfoSection.Position,
@@ -138,7 +157,30 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
       tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
 
       content: isTablet ? (
-        <PositionInfo showNarrowVariation={isTablet} />
+        <MobilePositionsTable
+          marketTypeFilter={viewIsolated}
+          columnKeys={[
+            PositionsTableColumnKey.Market,
+            PositionsTableColumnKey.Leverage,
+            PositionsTableColumnKey.Type,
+            PositionsTableColumnKey.Size,
+            PositionsTableColumnKey.Value,
+            PositionsTableColumnKey.PnL,
+            PositionsTableColumnKey.Margin,
+            PositionsTableColumnKey.AverageOpen,
+            PositionsTableColumnKey.Oracle,
+            PositionsTableColumnKey.Liquidation,
+            PositionsTableColumnKey.NetFunding,
+            shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+            shouldRenderActions && PositionsTableColumnKey.Actions,
+          ].filter(isTruthy)}
+          columnWidths={{
+            [PositionsTableColumnKey.Actions]: 80,
+          }}
+          showClosePositionAction={shouldRenderActions}
+          initialPageSize={initialPageSize}
+          navigateToOrders={onViewOrders}
+        />
       ) : (
         <PositionsTable
           currentMarket={showCurrentMarket ? currentMarketId : undefined}
@@ -383,11 +425,26 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
   );
 
   const tabItems = useMemo(
-    () => [positionTabItem, ordersTabItem, fillsTabItem, orderHistoryTabItem, paymentsTabItem],
-    [positionTabItem, fillsTabItem, ordersTabItem, orderHistoryTabItem, paymentsTabItem]
+    () => [
+      detailsTabItem,
+      positionTabItem,
+      ordersTabItem,
+      fillsTabItem,
+      orderHistoryTabItem,
+      paymentsTabItem,
+    ],
+    [
+      detailsTabItem,
+      positionTabItem,
+      fillsTabItem,
+      ordersTabItem,
+      orderHistoryTabItem,
+      paymentsTabItem,
+    ]
   );
 
   const slotBottom = {
+    [InfoSection.Details]: null,
     [InfoSection.Position]: (
       <MaybeUnopenedIsolatedPositionsDrawer onViewOrders={onViewOrders} tw="mt-auto" />
     ),
@@ -397,12 +454,22 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
     [InfoSection.Payments]: null,
   }[tab];
 
-  return isTablet ? (
-    <MobileTabs defaultValue={InfoSection.Position} items={tabItems} />
-  ) : (
+  return (
     <>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-      <$DragHandle onMouseDown={handleStartResize} />
+      <div tw="mx-1.5 mb-1 mt-0.5">
+        <div
+          tw="flex w-full flex-1 items-center justify-between rounded-0.25 bg-color-layer-3 px-1 py-0.75"
+          onClick={() => dispatch(openDialog(DialogTypes.Deposit2({})))}
+        >
+          <span tw="text-color-text-0">
+            {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_TRADE })}
+          </span>
+          <div tw="flex gap-0.25">
+            <Output type={OutputType.Fiat} value={availableBalance} />
+            <Icon iconName={IconName.PlusCircle} size="1.5rem" tw="text-color-accent" />
+          </div>
+        </div>
+      </div>
 
       <$CollapsibleTabs
         defaultTab={InfoSection.Position}
@@ -412,13 +479,15 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
         onOpenChange={setIsOpen}
         dividerStyle="underline"
         slotToolbar={
-          <TradeTableSettings
-            panelView={view}
-            marketTypeFilter={viewIsolated}
-            setPanelView={setView}
-            setMarketTypeFilter={setViewIsolated}
-            onOpenChange={setIsOpen}
-          />
+          isTablet ? null : (
+            <TradeTableSettings
+              panelView={view}
+              marketTypeFilter={viewIsolated}
+              setPanelView={setView}
+              setMarketTypeFilter={setViewIsolated}
+              onOpenChange={setIsOpen}
+            />
+          )
         }
         tabItems={tabItems}
       />
diff --git a/src/pages/trade/MobileTopPanel.tsx b/src/pages/trade/MobileTopPanel.tsx
index d4cc08f171..96ebd94d98 100644
--- a/src/pages/trade/MobileTopPanel.tsx
+++ b/src/pages/trade/MobileTopPanel.tsx
@@ -9,11 +9,8 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { Icon, IconName } from '@/components/Icon';
 import { Tabs } from '@/components/Tabs';
 import { ToggleButton } from '@/components/ToggleButton';
-import { AccountInfo } from '@/views/AccountInfo';
-import { CanvasOrderbook } from '@/views/CanvasOrderbook/CanvasOrderbook';
 import { DepthChart } from '@/views/charts/DepthChart';
 import { FundingChart } from '@/views/charts/FundingChart';
 import { TvChart } from '@/views/charts/TradingView/TvChart';
@@ -35,10 +32,9 @@ enum Tab {
   LiveTrades = 'LiveTrades',
 }
 
-const TabButton = ({ value, label, icon }: { value: Tab; label: string; icon: IconName }) => (
+const TabButton = ({ value, label }: { value: Tab; label: string }) => (
   <Trigger asChild value={value}>
     <$TabButton>
-      <Icon iconName={icon} size="1.375rem" />
       <span>{label}</span>
     </$TabButton>
   </Trigger>
@@ -55,40 +51,16 @@ export const MobileTopPanel = ({
   const [value, setValue] = useState(Tab.Price);
 
   const items = [
-    {
-      content: <AccountInfo tw="flex-1" />,
-      label: stringGetter({ key: STRING_KEYS.WALLET }),
-      value: Tab.Account,
-      icon: IconName.Coins,
-    },
     {
       content: <TvChart />,
       forceMount: true,
-      label: stringGetter({ key: STRING_KEYS.PRICE }),
+      label: 'Chart', // stringGetter({ key: STRING_KEYS.CHART }),
       value: Tab.Price,
-      icon: IconName.PriceChart,
     },
     !isViewingUnlaunchedMarket && {
       content: <DepthChart stringGetter={stringGetter} selectedLocale={selectedLocale} />,
       label: stringGetter({ key: STRING_KEYS.DEPTH_CHART_SHORT }),
       value: Tab.Depth,
-      icon: IconName.DepthChart,
-    },
-    !isViewingUnlaunchedMarket && {
-      content: <FundingChart selectedLocale={selectedLocale} />,
-      label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_CHART_SHORT }),
-      value: Tab.Funding,
-      icon: IconName.FundingChart,
-    },
-    !isViewingUnlaunchedMarket && {
-      content: (
-        <$ScrollableTableContainer>
-          <CanvasOrderbook histogramSide="right" layout="horizontal" hideHeader />
-        </$ScrollableTableContainer>
-      ),
-      label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
-      value: Tab.OrderBook,
-      icon: IconName.Orderbook,
     },
     !isViewingUnlaunchedMarket && {
       content: (
@@ -96,9 +68,13 @@ export const MobileTopPanel = ({
           <LiveTrades histogramSide="left" />
         </$ScrollableTableContainer>
       ),
-      label: stringGetter({ key: STRING_KEYS.RECENT }),
+      label: stringGetter({ key: STRING_KEYS.TRADES }),
       value: Tab.LiveTrades,
-      icon: IconName.Clock,
+    },
+    !isViewingUnlaunchedMarket && {
+      content: <FundingChart selectedLocale={selectedLocale} />,
+      label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_CHART_SHORT }),
+      value: Tab.Funding,
     },
   ].filter(isTruthy);
 
@@ -109,11 +85,9 @@ export const MobileTopPanel = ({
       onValueChange={setValue}
       items={items.map((item) => ({
         ...item,
-        customTrigger: (
-          <TabButton key={item.value} label={item.label} value={item.value} icon={item.icon} />
-        ),
+        customTrigger: <TabButton key={item.value} label={item.label} value={item.value} />,
       }))}
-      side="bottom"
+      side="top"
     />
   );
 };
@@ -122,7 +96,7 @@ type TabsStyleProps = { $shortMode?: boolean };
 const TabsTypeTemp = getSimpleStyledOutputType(Tabs, {} as TabsStyleProps);
 
 const $Tabs = styled(Tabs)<TabsStyleProps>`
-  --scrollArea-height: ${({ $shortMode }) => ($shortMode ? '19rem' : '38rem')};
+  --scrollArea-height: ${({ $shortMode }) => ($shortMode ? '19rem' : '27rem')};
   --stickyArea0-background: var(--color-layer-2);
   --tabContent-height: calc(var(--scrollArea-height) - 2rem - var(--tabs-currentHeight));
 
@@ -143,21 +117,11 @@ const $Tabs = styled(Tabs)<TabsStyleProps>`
 
 const $TabButton = styled(ToggleButton)`
   padding: 0 0.5rem;
+  height: 2.25rem;
 
   span {
     transition: 0.25s var(--ease-out-expo);
   }
-
-  &[data-state='inactive'] {
-    --button-width: var(--button-height);
-
-    gap: 0;
-
-    span {
-      font-size: 0;
-      opacity: 0;
-    }
-  }
 `;
 const $ScrollableTableContainer = styled.div`
   ${layoutMixins.scrollArea}
diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx
index f8a9be883e..2d64d7a0bb 100644
--- a/src/pages/trade/Trade.tsx
+++ b/src/pages/trade/Trade.tsx
@@ -30,7 +30,6 @@ import { InnerPanel } from './InnerPanel';
 import LaunchableMarket from './LaunchableMarket';
 import { MarketSelectorAndStats } from './MarketSelectorAndStats';
 import { MobileBottomPanel } from './MobileBottomPanel';
-import { MobileTopPanel } from './MobileTopPanel';
 import { TradeDialogTrigger } from './TradeDialogTrigger';
 import { VerticalPanel } from './VerticalPanel';
 import { TradeHeaderMobile } from './mobile-web/TradeHeader';
@@ -74,11 +73,7 @@ const TradePage = () => {
 
       <div>
         <DetachedSection>
-          <MobileTopPanel />
-        </DetachedSection>
-
-        <DetachedSection>
-          <HorizontalPanel handleStartResize={handleMouseDown} />
+          <HorizontalPanel />
         </DetachedSection>
 
         <DetachedSection>
diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
new file mode 100644
index 0000000000..476d028f37
--- /dev/null
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -0,0 +1,371 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { OrderSide, OrderSizeInputs, TradeFormType } from '@/bonsai/forms/trade/types';
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import BigNumber from 'bignumber.js';
+import styled, { css } from 'styled-components';
+
+import { ButtonAction, ButtonShape, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
+import { MobilePlaceOrderSteps } from '@/constants/trade';
+
+import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
+import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
+import { useClosePositionFormInputs } from '@/hooks/useClosePositionFormInputs';
+import { useIsFirstRender } from '@/hooks/useIsFirstRender';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { formMixins } from '@/styles/formMixins';
+
+import { Button } from '@/components/Button';
+import { FormInput } from '@/components/FormInput';
+import { InputType } from '@/components/Input';
+import { DropdownMenuTrigger, MobileDropdownMenu } from '@/components/MobileDropdownMenu';
+import { Tag } from '@/components/Tag';
+import { WithTooltip } from '@/components/WithTooltip';
+import { TradeFormMessages } from '@/views/TradeFormMessages/TradeFormMessages';
+import { AllocationSlider } from '@/views/forms/TradeForm/AllocationSlider';
+import { PlaceOrderButtonAndReceipt } from '@/views/forms/TradeForm/PlaceOrderButtonAndReceipt';
+
+import { getCurrentMarketPositionData } from '@/state/accountSelectors';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { closePositionFormActions } from '@/state/closePositionForm';
+import {
+  getClosePositionFormSummary,
+  getClosePositionFormValues,
+} from '@/state/tradeFormSelectors';
+
+import { mapIfPresent } from '@/lib/do';
+import { AttemptBigNumber, MaybeBigNumber } from '@/lib/numbers';
+import { orEmptyObj } from '@/lib/typeUtils';
+
+import { TradeFormHeaderMobile } from './TradeFormHeader';
+
+type Props = {
+  market: string;
+};
+
+const CloseTradeForm = ({ market }: Props) => {
+  const dispatch = useAppDispatch();
+  const isFirstRender = useIsFirstRender();
+  const stringGetter = useStringGetter();
+
+  const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>();
+
+  const { stepSizeDecimals, tickSizeDecimals, displayableAsset } = orEmptyObj(
+    useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
+  );
+  const { signedSize: positionSize } = orEmptyObj(useAppSelector(getCurrentMarketPositionData));
+
+  const tradeValues = useAppSelector(getClosePositionFormValues);
+  const fullSummary = useAppSelector(getClosePositionFormSummary);
+  const { summary } = fullSummary;
+  const effectiveSizes = summary.tradeInfo.inputSummary.size;
+
+  const {
+    amountInput,
+    onAmountInput,
+    setLimitPriceToMidPrice,
+    limitPriceInput,
+    onLimitPriceInput,
+  } = useClosePositionFormInputs();
+
+  // default to market
+  useEffect(() => {
+    dispatch(closePositionFormActions.setOrderType(TradeFormType.MARKET));
+    dispatch(closePositionFormActions.setSizeAvailablePercent('1'));
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(closePositionFormActions.setMarketId(market));
+    dispatch(closePositionFormActions.setSizeAvailablePercent('1'));
+  }, [market, currentStep, dispatch]);
+
+  const onLastOrderIndexed = useCallback(() => {
+    // if (!isFirstRender) {
+    //   dispatch(closePositionFormActions.setOrderType(TradeFormType.MARKET));
+    //   dispatch(closePositionFormActions.reset());
+    //   dispatch(closePositionFormActions.setSizeAvailablePercent('1'));
+    //   if (currentStep === MobilePlaceOrderSteps.PlacingOrder) {
+    //     setCurrentStep?.(MobilePlaceOrderSteps.Confirmation);
+    //   }
+    // }
+  }, [currentStep, dispatch, isFirstRender, setCurrentStep]);
+
+  const {
+    placeOrderError: closePositionError,
+    placeOrder,
+    shouldEnableTrade,
+    tradingUnavailable,
+    hasValidationErrors,
+  } = useTradeForm({
+    source: TradeFormSource.ClosePositionForm,
+    fullFormSummary: fullSummary,
+    onLastOrderIndexed,
+  });
+
+  const {
+    shouldPromptUserToPlaceLimitOrder,
+    isErrorShownInOrderStatusToast,
+    primaryAlert,
+    shortAlertKey,
+  } = useTradeErrors({
+    placeOrderError: closePositionError,
+    isClosingPosition: true,
+  });
+
+  const {
+    type: selectedTradeType,
+    side = OrderSide.BUY,
+    // isClosingPosition,
+  } = tradeValues;
+
+  const useLimit = selectedTradeType === TradeFormType.LIMIT;
+
+  const onTradeTypeChange = useCallback(
+    (tradeType: TradeFormType) => {
+      // if (isClosingPosition === true) {
+      //   return;
+      // }
+
+      console.log(tradeType);
+      dispatch(closePositionFormActions.setOrderType(tradeType));
+    },
+    [dispatch, side]
+  );
+
+  const onClearInputs = () => {
+    dispatch(closePositionFormActions.setOrderType(TradeFormType.MARKET));
+    dispatch(closePositionFormActions.reset());
+  };
+
+  const formattedPositionSize =
+    (positionSize?.toNumber() ?? 0) / 10 ** (stepSizeDecimals ?? TOKEN_DECIMALS);
+
+  const midMarketPriceButton = (
+    <$MidPriceButton onClick={setLimitPriceToMidPrice} size={ButtonSize.XSmall}>
+      {stringGetter({ key: STRING_KEYS.MID_MARKET_PRICE_SHORT })}
+    </$MidPriceButton>
+  );
+
+  return (
+    <div tw="flexColumn items-center gap-[0.75em] px-2 pb-[12.5rem] pt-[6.5vh]">
+      <TradeFormHeaderMobile />
+      <div tw="w-full text-medium">Close {displayableAsset} Position</div>
+      <MobileDropdownMenu
+        withPortal={false}
+        items={[
+          {
+            value: TradeFormType.MARKET,
+            active: selectedTradeType === TradeFormType.MARKET,
+            label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
+            onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
+          },
+          {
+            value: TradeFormType.LIMIT,
+            active: selectedTradeType === TradeFormType.LIMIT,
+            label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
+            onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
+          },
+        ]}
+      >
+        <DropdownMenuTrigger
+          tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
+          shape={ButtonShape.Pill}
+          size={ButtonSize.Base}
+        >
+          {selectedTradeType === TradeFormType.MARKET
+            ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
+            : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
+        </DropdownMenuTrigger>
+      </MobileDropdownMenu>
+
+      <div tw="flex w-full justify-between">
+        <p tw="text-small text-color-text-0">Current Position</p>
+        <$PositionSize isLong={positionSize?.isGreaterThanOrEqualTo(0) ?? false}>
+          {Math.abs(positionSize?.toNumber() ?? 0)} {displayableAsset}
+        </$PositionSize>
+      </div>
+
+      <FormInput
+        id="close-position-amount"
+        label={<span>{stringGetter({ key: STRING_KEYS.AMOUNT })}</span>}
+        decimals={stepSizeDecimals ?? TOKEN_DECIMALS}
+        onInput={onAmountInput}
+        type={InputType.Number}
+        value={amountInput}
+        tw="w-full"
+      />
+
+      {useLimit && (
+        <FormInput
+          key="close-position-limit-price"
+          id="close-position-limit-price"
+          type={InputType.Currency}
+          label={
+            <>
+              <WithTooltip tooltip="limit-price" side="right">
+                {stringGetter({ key: STRING_KEYS.LIMIT_PRICE })}
+              </WithTooltip>
+              <Tag>USD</Tag>
+            </>
+          }
+          onChange={onLimitPriceInput}
+          value={limitPriceInput}
+          decimals={tickSizeDecimals ?? USD_DECIMALS}
+          slotRight={setLimitPriceToMidPrice ? midMarketPriceButton : undefined}
+          tw="w-full"
+        />
+      )}
+
+      <AllocationSlider
+        allocationPercentInput={
+          tradeValues.size != null && OrderSizeInputs.is.AVAILABLE_PERCENT(tradeValues.size)
+            ? (AttemptBigNumber(tradeValues.size.value.value)
+                ?.times(100)
+                .toFixed(0, BigNumber.ROUND_FLOOR) ?? '')
+            : tradeValues.size == null || tradeValues.size.value.value === ''
+              ? ''
+              : (AttemptBigNumber(effectiveSizes?.allocationPercent)
+                  ?.times(100)
+                  .toFixed(0, BigNumber.ROUND_FLOOR) ?? '')
+        }
+        setAllocationInput={(value: string | undefined) => {
+          dispatch(
+            closePositionFormActions.setSizeAvailablePercent(
+              mapIfPresent(value, (v) => MaybeBigNumber(v)?.div(100).toFixed(2)) ?? ''
+            )
+          );
+        }}
+      />
+
+      <div
+        tw="w-[calc(100vw - 64px)] flexColumn gap-1 py-1.25"
+        css={{
+          background:
+            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
+        }}
+      >
+        <TradeFormMessages
+          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
+          placeOrderError={closePositionError}
+          primaryAlert={primaryAlert}
+          shouldPromptUserToPlaceLimitOrder={false}
+        />
+        {/* {receiptArea} */}
+        <$PlaceOrderButtonAndReceipt
+          summary={summary}
+          actionStringKey={shortAlertKey}
+          currentStep={currentStep}
+          hasInput={!!amountInput}
+          hasValidationErrors={hasValidationErrors}
+          onClearInputs={onClearInputs}
+          shouldEnableTrade={shouldEnableTrade}
+          showDeposit={false}
+          tradingUnavailable={tradingUnavailable}
+          confirmButtonConfig={{
+            stringKey: STRING_KEYS.CLOSE_ORDER,
+            buttonTextStringKey: STRING_KEYS.CLOSE_POSITION,
+            buttonAction: ButtonAction.Destroy,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CloseTradeForm;
+
+const StyledButton = styled(Button)<{ $isActive?: boolean }>`
+  ${({ $isActive }) =>
+    $isActive
+      ? `--button-textColor: var(--color-text-2);`
+      : `--button-textColor: var(--color-text-0);`}
+`;
+
+const LongButton = styled(Button)<{ $isLong?: boolean }>`
+  ${({ $isLong }) =>
+    $isLong ? `background-color: var(--color-gradient-positive);` : 'background-color: transparent'}
+`;
+
+const ShortButton = styled(Button)<{ $isShort?: boolean }>`
+  ${({ $isShort }) =>
+    $isShort
+      ? `background-color: var(--color-gradient-negative);`
+      : 'background-color: transparent'}
+`;
+
+const $InputsColumn = styled.div`
+  ${formMixins.inputsColumn}
+
+  width: 100%;
+`;
+
+const AvailableRow = styled.div`
+  display: flex;
+
+  justify-content: space-between;
+
+  align-items: center;
+
+  padding: 8 px 4 px;
+
+  margin-bottom: 8 px;
+
+  width: 100%;
+`;
+const AvailableLabel = styled.span`
+  color: #6b7280;
+
+  font-size: 15 px;
+`;
+const AvailableValue = styled.div`
+  display: flex;
+
+  align-items: center;
+
+  gap: 8 px;
+
+  color: #6b7280;
+
+  font-size: 15 px;
+`;
+
+const ToggleRow = styled.div`
+  display: flex;
+
+  justify-content: space-between;
+
+  align-items: center;
+
+  padding: 0px 0px;
+
+  width: 100%;
+`;
+const ToggleLabel = styled.span`
+  color: #9ca3af;
+
+  font-size: 16 px;
+
+  font-weight: 400;
+`;
+
+const $PlaceOrderButtonAndReceipt = styled(PlaceOrderButtonAndReceipt)`
+  --withReceipt-backgroundColor: transparent;
+`;
+
+const $PositionSize = styled.div<{ isLong: boolean }>`
+  ${({ isLong }) =>
+    isLong
+      ? css`
+          color: var(--color-positive) !important;
+        `
+      : css`
+          color: var(--color-negative) !important;
+        `}
+`;
+
+const $MidPriceButton = styled(Button)`
+  ${formMixins.inputInnerButton}
+`;
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
new file mode 100644
index 0000000000..5d8050f01c
--- /dev/null
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -0,0 +1,422 @@
+import { useCallback, useState } from 'react';
+
+import {
+  ExecutionType,
+  MarginMode,
+  OrderSide,
+  TimeInForce,
+  TradeFormType,
+} from '@/bonsai/forms/trade/types';
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import BigNumber from 'bignumber.js';
+import styled from 'styled-components';
+
+import { ButtonAction, ButtonShape, ButtonSize, ButtonStyle } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
+import { MobilePlaceOrderSteps, ORDER_TYPE_STRINGS } from '@/constants/trade';
+
+import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
+import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { formMixins } from '@/styles/formMixins';
+
+import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
+import { DropdownMenuTrigger, MobileDropdownMenu } from '@/components/MobileDropdownMenu';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+import { VerticalSeparator } from '@/components/Separator';
+import { Switch } from '@/components/Switch';
+import { TradeFormMessages } from '@/views/TradeFormMessages/TradeFormMessages';
+import { MarketsMenuDialog } from '@/views/dialogs/MarketsDialog/MarketsDialog';
+import { PlaceOrderButtonAndReceipt } from '@/views/forms/TradeForm/PlaceOrderButtonAndReceipt';
+import { TradeFormInputs } from '@/views/forms/TradeForm/TradeFormInputs';
+import { TradeSizeInputs } from '@/views/forms/TradeForm/TradeSizeInputs';
+import { TradeTriggerOrderInputs } from '@/views/forms/TradeForm/TradeTriggerInput';
+
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { openDialog } from '@/state/dialogs';
+import { tradeFormActions } from '@/state/tradeForm';
+import {
+  getTradeFormRawState,
+  getTradeFormSummary,
+  getTradeFormValues,
+} from '@/state/tradeFormSelectors';
+
+import { orEmptyObj } from '@/lib/typeUtils';
+
+import { TradeFormHeaderMobile } from './TradeFormHeader';
+
+const RegularTradeForm = () => {
+  const dispatch = useAppDispatch();
+  const stringGetter = useStringGetter();
+
+  const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>();
+
+  const rawInput = useAppSelector(getTradeFormRawState);
+  const tradeValues = useAppSelector(getTradeFormValues);
+  const fullFormSummary = useAppSelector(getTradeFormSummary);
+  const { summary } = fullFormSummary;
+  const { ticker, tickSizeDecimals } = orEmptyObj(
+    useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
+  );
+  const effectiveSelectedLeverage = useAppSelector(
+    BonsaiHelpers.currentMarket.effectiveSelectedLeverage
+  );
+  const { stopLossOrder: stopLossSummary, takeProfitOrder: takeProfitSummary } = orEmptyObj(
+    summary.triggersSummary
+  );
+
+  const { showMarginMode: needsMarginMode, triggerOrdersChecked } = summary.options;
+
+  const isInputFilled =
+    [
+      rawInput.triggerPrice,
+      rawInput.limitPrice,
+      rawInput.reduceOnly,
+      rawInput.goodTil,
+      rawInput.execution,
+      rawInput.postOnly,
+      rawInput.timeInForce,
+    ].some((v) => v != null && v !== '') || (rawInput.size?.value.value.trim() ?? '') !== '';
+
+  const availableBalance = (
+    summary.accountDetailsBefore?.account?.freeCollateral ?? BigNumber(0)
+  ).toNumber();
+
+  const onLastOrderIndexed = useCallback(() => {
+    if (currentStep === MobilePlaceOrderSteps.PlacingOrder) {
+      setCurrentStep(MobilePlaceOrderSteps.Confirmation);
+    }
+  }, [currentStep, setCurrentStep]);
+
+  const { placeOrderError, tradingUnavailable, shouldEnableTrade, hasValidationErrors } =
+    useTradeForm({
+      source: TradeFormSource.SimpleTradeForm,
+      fullFormSummary,
+      onLastOrderIndexed,
+    });
+
+  const { isErrorShownInOrderStatusToast, primaryAlert, shortAlertKey } = useTradeErrors({
+    placeOrderError,
+  });
+
+  const {
+    type: selectedTradeType,
+    stopLossOrder,
+    takeProfitOrder,
+    reduceOnly,
+    marginMode = MarginMode.CROSS,
+    side = OrderSide.BUY,
+    // isClosingPosition,
+  } = tradeValues;
+
+  const setMarginMode = (mode: MarginMode) => {
+    dispatch(tradeFormActions.setMarginMode(mode));
+  };
+
+  const setTradeSide = (newSide: OrderSide) => {
+    dispatch(tradeFormActions.setSide(newSide));
+  };
+
+  const openLeverageDialog = () => {
+    if (ticker) {
+      dispatch(openDialog(DialogTypes.SetMarketLeverage({ marketId: ticker })));
+    }
+  };
+
+  const onTradeTypeChange = useCallback(
+    (tradeType: TradeFormType) => {
+      // if (isClosingPosition === true) {
+      //   return;
+      // }
+
+      dispatch(tradeFormActions.reset());
+      dispatch(tradeFormActions.setSide(side));
+      dispatch(tradeFormActions.setOrderType(tradeType));
+
+      if (tradeType === TradeFormType.MARKET) {
+        dispatch(tradeFormActions.setExecution(ExecutionType.IOC));
+      } else {
+        dispatch(tradeFormActions.setTimeInForce(TimeInForce.GTT));
+      }
+    },
+    [dispatch, side]
+  );
+
+  const orderSideAction = {
+    [OrderSide.BUY]: ButtonAction.Create,
+    [OrderSide.SELL]: ButtonAction.Destroy,
+  }[side];
+
+  return (
+    <div tw="flexColumn items-center gap-[0.75em] px-1 pb-[12.5rem] pt-0">
+      <TradeFormHeaderMobile />
+      <div tw="flex h-3 w-full items-center justify-between">
+        <div tw="flex h-3">
+          <StyledButton
+            buttonStyle={ButtonStyle.WithoutBackground}
+            $isActive={marginMode === MarginMode.CROSS}
+            onClick={() => setMarginMode(MarginMode.CROSS)}
+            disabled={!needsMarginMode && marginMode !== MarginMode.CROSS}
+          >
+            {stringGetter({
+              key: STRING_KEYS.CROSS,
+            })}
+          </StyledButton>
+          <VerticalSeparator />
+          <StyledButton
+            buttonStyle={ButtonStyle.WithoutBackground}
+            $isActive={marginMode === MarginMode.ISOLATED}
+            onClick={() => setMarginMode(MarginMode.ISOLATED)}
+            disabled={!needsMarginMode && marginMode !== MarginMode.ISOLATED}
+          >
+            {stringGetter({
+              key: STRING_KEYS.ISOLATED,
+            })}
+          </StyledButton>
+        </div>
+
+        <Button
+          size={ButtonSize.XSmall}
+          action={ButtonAction.SimpleSecondary}
+          buttonStyle={ButtonStyle.WithoutBackground}
+          slotRight={<Icon iconName={IconName.Caret} size="0.75em" tw="text-color-text-0" />}
+          onClick={openLeverageDialog}
+        >
+          <Output
+            type={OutputType.Multiple}
+            value={effectiveSelectedLeverage}
+            fractionDigits={0}
+            showSign={ShowSign.None}
+            tw="text-color-text-2 font-base-medium"
+          />
+        </Button>
+      </div>
+      <div tw="flex w-full gap-1 rounded-[0.5em] bg-[#181819] p-[4px]">
+        <LongButton
+          $isLong={side === OrderSide.BUY}
+          onClick={() => setTradeSide(OrderSide.BUY)}
+          tw="w-full border-0"
+        >
+          {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
+        </LongButton>
+        <ShortButton
+          $isShort={side === OrderSide.SELL}
+          onClick={() => setTradeSide(OrderSide.SELL)}
+          tw="w-full border-0"
+        >
+          {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
+        </ShortButton>
+      </div>
+      <MobileDropdownMenu
+        withPortal={false}
+        items={[
+          {
+            value: TradeFormType.MARKET,
+            active: selectedTradeType === TradeFormType.MARKET,
+            label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
+            onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
+          },
+          {
+            value: TradeFormType.LIMIT,
+            active: selectedTradeType === TradeFormType.LIMIT,
+            label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
+            onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
+          },
+        ]}
+      >
+        <DropdownMenuTrigger
+          tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
+          shape={ButtonShape.Pill}
+          size={ButtonSize.Base}
+        >
+          {selectedTradeType === TradeFormType.MARKET
+            ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
+            : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
+        </DropdownMenuTrigger>
+      </MobileDropdownMenu>
+      <AvailableRow>
+        <AvailableLabel> Available </AvailableLabel>
+        <AvailableValue>
+          {availableBalance.toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}{' '}
+          USDC
+        </AvailableValue>
+      </AvailableRow>
+      <$InputsColumn>
+        <TradeFormInputs />
+        <TradeSizeInputs />
+      </$InputsColumn>
+      <ToggleRow>
+        <ToggleLabel>Triggers</ToggleLabel>
+        <Switch
+          name="triggers"
+          checked={triggerOrdersChecked}
+          onCheckedChange={(checked) =>
+            dispatch(checked ? tradeFormActions.showTriggers() : tradeFormActions.hideTriggers())
+          }
+          tw="font-mini-book"
+        />
+      </ToggleRow>
+      {triggerOrdersChecked && (
+        <div tw="max-w-[calc(100vw - 4rem)] column gap-0.5">
+          <TradeTriggerOrderInputs
+            stringKeys={{
+              header: STRING_KEYS.TAKE_PROFIT,
+              headerDiff: STRING_KEYS.PROFIT_COLON,
+              price: STRING_KEYS.TP_PRICE,
+              output: STRING_KEYS.GAIN,
+            }}
+            inputState={takeProfitOrder ?? {}}
+            summaryState={takeProfitSummary ?? {}}
+            isStopLoss={false}
+            tickSizeDecimals={tickSizeDecimals}
+          />
+          <TradeTriggerOrderInputs
+            stringKeys={{
+              header: STRING_KEYS.STOP_LOSS,
+              headerDiff: STRING_KEYS.LOSS_COLON,
+              price: STRING_KEYS.SL_PRICE,
+              output: STRING_KEYS.LOSS,
+            }}
+            inputState={stopLossOrder ?? {}}
+            summaryState={stopLossSummary ?? {}}
+            isStopLoss
+            tickSizeDecimals={tickSizeDecimals}
+          />
+        </div>
+      )}
+      <ToggleRow>
+        <ToggleLabel>{stringGetter({ key: STRING_KEYS.REDUCE_ONLY })}</ToggleLabel>
+        <Switch
+          name="reduce-only"
+          checked={!!reduceOnly}
+          onCheckedChange={(checked) => dispatch(tradeFormActions.setReduceOnly(checked))}
+          tw="font-mini-book"
+        />
+      </ToggleRow>
+      <div
+        tw="w-[calc(100vw - 64px)] flexColumn gap-1 py-1.25"
+        css={{
+          background:
+            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
+        }}
+      >
+        <TradeFormMessages
+          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
+          placeOrderError={placeOrderError}
+          primaryAlert={primaryAlert}
+          shouldPromptUserToPlaceLimitOrder={false}
+        />
+        {/* {receiptArea} */}
+        <$PlaceOrderButtonAndReceipt
+          summary={summary}
+          actionStringKey={shortAlertKey}
+          confirmButtonConfig={{
+            stringKey: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
+            buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
+            buttonAction: orderSideAction as ButtonAction,
+          }}
+          currentStep={currentStep}
+          hasInput={
+            isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder)
+          }
+          hasValidationErrors={hasValidationErrors}
+          onClearInputs={() => dispatch(tradeFormActions.resetPrimaryInputs())}
+          shouldEnableTrade={shouldEnableTrade}
+          showDeposit={false}
+          tradingUnavailable={tradingUnavailable}
+        />
+
+        {/* <$StyledWithDetailsReceipt detailItems={items} hideReceipt={!isReceiptOpen}>
+          {placeOrderButton}
+        </$StyledWithDetailsReceipt> */}
+      </div>
+      <MarketsMenuDialog />
+    </div>
+  );
+};
+
+export default RegularTradeForm;
+
+const StyledButton = styled(Button)<{ $isActive?: boolean }>`
+  ${({ $isActive }) =>
+    $isActive
+      ? `--button-textColor: var(--color-text-2);`
+      : `--button-textColor: var(--color-text-0);`}
+`;
+
+const LongButton = styled(Button)<{ $isLong?: boolean }>`
+  ${({ $isLong }) =>
+    $isLong ? `background-color: var(--color-gradient-positive);` : 'background-color: transparent'}
+`;
+
+const ShortButton = styled(Button)<{ $isShort?: boolean }>`
+  ${({ $isShort }) =>
+    $isShort
+      ? `background-color: var(--color-gradient-negative);`
+      : 'background-color: transparent'}
+`;
+
+const $InputsColumn = styled.div`
+  ${formMixins.inputsColumn}
+
+  width: 100%;
+`;
+
+const AvailableRow = styled.div`
+  display: flex;
+
+  justify-content: space-between;
+
+  align-items: center;
+
+  padding: 8 px 4 px;
+
+  margin-bottom: 8 px;
+
+  width: 100%;
+`;
+const AvailableLabel = styled.span`
+  color: #6b7280;
+
+  font-size: 15 px;
+`;
+const AvailableValue = styled.div`
+  display: flex;
+
+  align-items: center;
+
+  gap: 8 px;
+
+  color: #6b7280;
+
+  font-size: 15 px;
+`;
+
+const ToggleRow = styled.div`
+  display: flex;
+
+  justify-content: space-between;
+
+  align-items: center;
+
+  padding: 0px 0px;
+
+  width: 100%;
+`;
+const ToggleLabel = styled.span`
+  color: #9ca3af;
+
+  font-size: 16 px;
+
+  font-weight: 400;
+`;
+
+const $PlaceOrderButtonAndReceipt = styled(PlaceOrderButtonAndReceipt)`
+  --withReceipt-backgroundColor: transparent;
+`;
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index c412d1d756..91526cd855 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -1,45 +1,41 @@
-import { useCallback } from 'react';
-
+import { OrderSide } from '@/bonsai/forms/trade/types';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { HORIZONTAL_PANEL_MAX_HEIGHT, HORIZONTAL_PANEL_MIN_HEIGHT } from '@/constants/layout';
+import { ButtonAction, ButtonShape, ButtonSize, ButtonState } from '@/constants/buttons';
+import { ComplianceStates } from '@/constants/compliance';
+import { STRING_KEYS } from '@/constants/localization';
+import { AppRoute } from '@/constants/routes';
 
 import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
 import { usePageTitlePriceUpdates } from '@/hooks/usePageTitlePriceUpdates';
+import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
+import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { Button } from '@/components/Button';
 import { DetachedSection } from '@/components/ContentSection';
 import { MarketsMenuDialog } from '@/views/dialogs/MarketsDialog/MarketsDialog';
 import { UserMenuDialog } from '@/views/dialogs/MobileUserMenuDialog';
+import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
 
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { setHorizontalPanelHeightPx } from '@/state/appUiConfigs';
-import { getHorizontalPanelHeightPx } from '@/state/appUiConfigsSelectors';
+import { tradeFormActions } from '@/state/tradeForm';
 
+import { HorizontalPanel } from '../HorizontalPanel';
 import LaunchableMarket from '../LaunchableMarket';
-import { MobileBottomPanel } from '../MobileBottomPanel';
 import { MobileTopPanel } from '../MobileTopPanel';
-import { useResizablePanel } from '../useResizablePanel';
 import { TradeHeaderMobile } from './TradeHeader';
 
 const TradePage = () => {
+  const dispatch = useAppDispatch();
   const { isViewingUnlaunchedMarket } = useCurrentMarketId();
+  const { complianceState } = usePerpetualsComplianceState();
   const canAccountTrade = useAppSelector(calculateCanAccountTrade);
-
-  const horizontalPanelHeightPxBase = useAppSelector(getHorizontalPanelHeightPx);
-  const dispatch = useAppDispatch();
-  const setPanelHeight = useCallback(
-    (h: number) => {
-      dispatch(setHorizontalPanelHeightPx(h));
-    },
-    [dispatch]
-  );
-  const { handleMouseDown } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
-    min: HORIZONTAL_PANEL_MIN_HEIGHT,
-    max: HORIZONTAL_PANEL_MAX_HEIGHT,
-  });
+  const stringGetter = useStringGetter();
+  const navigate = useNavigate();
 
   usePageTitlePriceUpdates();
 
@@ -47,6 +43,48 @@ const TradePage = () => {
     return <LaunchableMarket />;
   }
 
+  const isDisabled = complianceState !== ComplianceStates.FULL_ACCESS;
+
+  const footerContent = isDisabled ? (
+    <Button
+      tw="flex-1 border border-solid border-color-layer-6"
+      shape={ButtonShape.Pill}
+      size={ButtonSize.Large}
+      state={ButtonState.Disabled}
+      action={ButtonAction.SimpleSecondary}
+    >
+      {stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
+    </Button>
+  ) : canAccountTrade ? (
+    <>
+      <Button
+        tw="flex-1 bg-color-negative text-color-layer-0"
+        shape={ButtonShape.Pill}
+        size={ButtonSize.Large}
+        onClick={() => {
+          navigate(`${AppRoute.TradeForm}`);
+          dispatch(tradeFormActions.setSide(OrderSide.SELL));
+        }}
+      >
+        {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
+      </Button>
+
+      <Button
+        tw="flex-1 bg-color-positive text-color-layer-0"
+        shape={ButtonShape.Pill}
+        size={ButtonSize.Large}
+        onClick={() => {
+          navigate(`${AppRoute.TradeForm}`);
+          dispatch(tradeFormActions.setSide(OrderSide.BUY));
+        }}
+      >
+        {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
+      </Button>
+    </>
+  ) : (
+    <OnboardingTriggerButton tw="flex-1" shape={ButtonShape.Pill} size={ButtonSize.Base} />
+  );
+
   return (
     <$TradeLayoutMobile>
       <TradeHeaderMobile />
@@ -56,9 +94,24 @@ const TradePage = () => {
           <MobileTopPanel />
         </DetachedSection>
 
-        <MobileBottomPanel />
+        <DetachedSection>
+          <HorizontalPanel />
+        </DetachedSection>
+
+        {/* <DetachedSection>
+          <MobileBottomPanel />
+        </DetachedSection> */}
       </$MobileContent>
 
+      <div
+        tw="row fixed bottom-3 left-0 right-0 gap-1.25 px-1.25 py-1.25"
+        css={{
+          background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-layer-1))',
+        }}
+      >
+        {footerContent}
+      </div>
+
       <UserMenuDialog />
       <MarketsMenuDialog />
     </$TradeLayoutMobile>
diff --git a/src/pages/trade/mobile-web/TradeForm.tsx b/src/pages/trade/mobile-web/TradeForm.tsx
index 0d1875ecb1..daf83e7c4f 100644
--- a/src/pages/trade/mobile-web/TradeForm.tsx
+++ b/src/pages/trade/mobile-web/TradeForm.tsx
@@ -1,439 +1,40 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-import { OrderSide, OrderSizeInputs, TradeFormType } from '@/bonsai/forms/trade/types';
-import { PlaceOrderPayload } from '@/bonsai/forms/triggers/types';
 import { BonsaiHelpers } from '@/bonsai/ontology';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
-import styled from 'styled-components';
-import tw from 'twin.macro';
 
-import { AnalyticsEvents } from '@/constants/analytics';
-import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
-import { ComplianceStates } from '@/constants/compliance';
-import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
-import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
 import { AppRoute } from '@/constants/routes';
-import {
-  DisplayUnit,
-  QUICK_LIMIT_OPTIONS,
-  QuickLimitOption,
-  SimpleUiTradeDialogSteps,
-} from '@/constants/trade';
 
-import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
-import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
-import { useComplianceState } from '@/hooks/useComplianceState';
 import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
-import { useStringGetter } from '@/hooks/useStringGetter';
-
-import { Button } from '@/components/Button';
-import { Icon, IconName } from '@/components/Icon';
-import { InputType } from '@/components/Input';
-import { MarginUsageTag } from '@/components/MarginUsageTag';
-import { Output, OutputType, ShowSign } from '@/components/Output';
-import { HorizontalSeparatorFiller } from '@/components/Separator';
-import { SimpleUiPopover } from '@/components/SimpleUiPopover';
-import { TradeFormMessages } from '@/views/TradeFormMessages/TradeFormMessages';
-import { MarketsMenuDialog } from '@/views/dialogs/MarketsDialog/MarketsDialog';
-import { useTradeTypeOptions } from '@/views/forms/TradeForm/useTradeTypeOptions';
 
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { setDisplayUnit } from '@/state/appUiConfigs';
-import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
-import { openDialog } from '@/state/dialogs';
 import { tradeFormActions } from '@/state/tradeForm';
-import { getTradeFormSummary, getTradeFormValues } from '@/state/tradeFormSelectors';
+import { getTradeFormValues } from '@/state/tradeFormSelectors';
 
-import { track } from '@/lib/analytics/analytics';
-import { AttemptBigNumber, BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
 import { orEmptyObj } from '@/lib/typeUtils';
 
-import { TradeFormHeaderMobile } from './TradeFormHeader';
+import CloseTradeForm from './CloseTradeForm';
+import RegularTradeForm from './RegularTradeForm';
 
-const TradeForm = ({
-  currentStep,
-  setCurrentStep,
-  onClose,
-}: {
-  currentStep: SimpleUiTradeDialogSteps;
-  setCurrentStep: (step: SimpleUiTradeDialogSteps) => void;
-  onClose: () => void;
-}) => {
+const TradeForm = () => {
   const dispatch = useAppDispatch();
-  const stringGetter = useStringGetter();
-
-  const { isViewingUnlaunchedMarket } = useCurrentMarketId(AppRoute.TradeForm);
-
-  const [placeOrderPayload, setPlaceOrderPayload] = useState<PlaceOrderPayload>();
+  const { marketId } = useCurrentMarketId(AppRoute.TradeForm);
 
-  const { selectedTradeType } = useTradeTypeOptions();
-
-  const displayUnit = useAppSelector(getSelectedDisplayUnit);
   const tradeValues = useAppSelector(getTradeFormValues);
-  const fullFormSummary = useAppSelector(getTradeFormSummary);
-  const { complianceState } = useComplianceState();
-  const { summary } = fullFormSummary;
-  const midPrice = useAppSelector(BonsaiHelpers.currentMarket.midPrice.data);
-  const buyingPower = useAppSelector(BonsaiHelpers.currentMarket.account.buyingPower);
-  const { assetId, displayableAsset, stepSizeDecimals, ticker, tickSizeDecimals } = orEmptyObj(
-    useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
-  );
-
-  const marginUsage = summary.accountDetailsAfter?.account?.marginUsage;
-  const effectiveSizes = orEmptyObj(summary.tradeInfo.inputSummary.size);
+  const { ticker } = orEmptyObj(useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo));
 
   useEffect(() => {
-    if (ticker) {
+    if (marketId !== tradeValues.marketId) {
       dispatch(tradeFormActions.setMarketId(ticker));
     }
   }, [ticker, dispatch]);
 
-  const onLastOrderIndexed = useCallback(() => {
-    if (currentStep === SimpleUiTradeDialogSteps.Submit) {
-      setCurrentStep(SimpleUiTradeDialogSteps.Confirm);
-    }
-  }, [currentStep, setCurrentStep]);
-
-  const { placeOrderError, placeOrder, unIndexedClientId, shouldEnableTrade } = useTradeForm({
-    source: TradeFormSource.SimpleTradeForm,
-    fullFormSummary,
-    onLastOrderIndexed,
-  });
-
-  const {
-    shouldPromptUserToPlaceLimitOrder,
-    isErrorShownInOrderStatusToast,
-    primaryAlert,
-    shortAlertKey,
-  } = useTradeErrors({
-    placeOrderError,
-  });
-
-  const onSubmitOrder = async () => {
-    const payload = summary.tradePayload;
-    if (payload == null) {
-      return;
-    }
-    setCurrentStep(SimpleUiTradeDialogSteps.Submit);
-    placeOrder({
-      onPlaceOrder: (tradePayload) => {
-        setPlaceOrderPayload(tradePayload);
-        dispatch(tradeFormActions.reset());
-      },
-      onFailure: () => {
-        setCurrentStep(SimpleUiTradeDialogSteps.Error);
-      },
-    });
-  };
-
-  const onUSDCInput = ({ formattedValue }: { floatValue?: number; formattedValue: string }) => {
-    const formattedValueBN = MustBigNumber(formattedValue);
-    if ((formattedValueBN.decimalPlaces() ?? 0) > USD_DECIMALS) {
-      return;
-    }
-    dispatch(tradeFormActions.setSizeUsd(formattedValue));
-  };
-
-  const onSizeInput = ({ formattedValue }: { floatValue?: number; formattedValue: string }) => {
-    const formattedValueBN = MustBigNumber(formattedValue);
-    if ((formattedValueBN.decimalPlaces() ?? 0) > (stepSizeDecimals ?? TOKEN_DECIMALS)) {
-      return;
-    }
-    dispatch(tradeFormActions.setSizeToken(formattedValue));
-  };
-
-  const onLimitPriceInput = ({
-    formattedValue,
-  }: {
-    floatValue?: number;
-    formattedValue: string;
-  }) => {
-    const formattedValueBN = MustBigNumber(formattedValue);
-    if ((formattedValueBN.decimalPlaces() ?? 0) > (tickSizeDecimals ?? TOKEN_DECIMALS)) {
-      return;
-    }
-    dispatch(tradeFormActions.setLimitPrice(formattedValue));
-  };
-
-  const decimals = stepSizeDecimals ?? TOKEN_DECIMALS;
-
-  const inputConfigs = {
-    [DisplayUnit.Asset]: {
-      onInput: onSizeInput,
-      type: InputType.Number,
-      outputType: OutputType.Number,
-      decimals,
-      inputUnit: DisplayUnit.Asset,
-      value:
-        tradeValues.size != null && OrderSizeInputs.is.SIZE(tradeValues.size)
-          ? tradeValues.size.value.value
-          : tradeValues.size == null || tradeValues.size.value.value === ''
-            ? ''
-            : (AttemptBigNumber(effectiveSizes.size)?.toFixed(decimals) ?? ''),
-    },
-    [DisplayUnit.Fiat]: {
-      onInput: onUSDCInput,
-      type: InputType.Number,
-      outputType: OutputType.Fiat,
-      decimals: USD_DECIMALS,
-      inputUnit: DisplayUnit.Fiat,
-      value:
-        tradeValues.size != null && OrderSizeInputs.is.USDC_SIZE(tradeValues.size)
-          ? tradeValues.size.value.value
-          : tradeValues.size == null || tradeValues.size.value.value === ''
-            ? ''
-            : (AttemptBigNumber(effectiveSizes.usdcSize)?.toFixed(USD_DECIMALS) ?? ''),
-    },
-  };
-
-  const limitPriceInput = (
-    <div tw="flexColumn items-center gap-0.25">
-      <span tw="font-mini-book">When {displayableAsset} price reaches</span>
-    </div>
-  );
-
-  const toggleDisplayUnit = () => {
-    if (!assetId) return;
-
-    dispatch(
-      setDisplayUnit({
-        newDisplayUnit: displayUnit === DisplayUnit.Asset ? DisplayUnit.Fiat : DisplayUnit.Asset,
-        entryPoint: 'simpleUiTradeDialog',
-        assetId,
-      })
-    );
-  };
+  const isClosingPosition = tradeValues.isClosingPosition;
 
-  const priceImpact = summary.tradeInfo.inputSummary.worstFillPrice
-    ? midPrice
-      ? midPrice.minus(summary.tradeInfo.inputSummary.worstFillPrice)
-      : 0
-    : 0;
-
-  const receiptArea = (
-    <div tw="flexColumn w-full gap-[1px] overflow-hidden rounded-[1rem] font-small-book">
-      <div tw="row justify-between bg-[var(--simpleUi-dialog-secondaryColor)] px-0.75 py-0.5">
-        <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.BUYING_POWER })}</span>
-        <Output tw="text-color-text-2" value={buyingPower} type={OutputType.Fiat} />
-      </div>
-      <div tw="row justify-between bg-[var(--simpleUi-dialog-secondaryColor)] px-0.75 py-0.5">
-        <MarginUsageTag marginUsage={marginUsage} />
-        <SimpleUiPopover
-          tw="[data-state='open']:rotate-180"
-          withPortal={false}
-          side="top"
-          content={
-            <div tw="grid gap-0.5 p-0.5">
-              <span tw="text-color-text-1">
-                {stringGetter({ key: STRING_KEYS.ESTIMATED_COST })}
-              </span>
-              <div tw="row justify-between gap-1">
-                <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.FEE })}</span>
-                <Output
-                  tw="text-color-text-2"
-                  useGrouping
-                  type={OutputType.Fiat}
-                  value={summary.tradeInfo.fee ?? 0}
-                />
-              </div>
-              {selectedTradeType === TradeFormType.MARKET && (
-                <div tw="row justify-between gap-1">
-                  <span tw="text-color-text-0">
-                    {stringGetter({ key: STRING_KEYS.PRICE_IMPACT })}
-                  </span>
-                  <Output
-                    tw="text-color-text-2"
-                    useGrouping
-                    type={OutputType.Fiat}
-                    value={priceImpact}
-                    showSign={ShowSign.None}
-                  />
-                </div>
-              )}
-              <HorizontalSeparatorFiller />
-              <div tw="row justify-between gap-1">
-                <span tw="text-color-text-0">{stringGetter({ key: STRING_KEYS.TOTAL })}</span>
-                <Output
-                  useGrouping
-                  tw="text-color-text-2"
-                  showSign={ShowSign.None}
-                  type={OutputType.Fiat}
-                  value={summary.tradeInfo.total ?? 0}
-                />
-              </div>
-            </div>
-          }
-        >
-          <$FeeTrigger>
-            {stringGetter({ key: STRING_KEYS.FEES })} <ChevronDownIcon />
-          </$FeeTrigger>
-        </SimpleUiPopover>
-      </div>
-    </div>
-  );
-
-  const toggleConfig =
-    inputConfigs[displayUnit === DisplayUnit.Asset ? DisplayUnit.Fiat : DisplayUnit.Asset];
-  const toggleValue = toggleConfig.value.trim().length > 0 ? toggleConfig.value : 0;
-
-  const sizeToggle = (
-    <button
-      type="button"
-      disabled={!assetId}
-      aria-label="Toggle display unit"
-      tw="row cursor-pointer gap-0.5 rounded-[1rem] px-0.5 py-0.25 text-color-text-0 hover:bg-[var(--simpleUi-dialog-secondaryColor)]"
-      onClick={toggleDisplayUnit}
-    >
-      <Output
-        tw="text-color-text-2 font-small-medium"
-        type={toggleConfig.outputType}
-        value={toggleValue}
-        fractionDigits={toggleConfig.decimals}
-        slotRight={
-          displayUnit === DisplayUnit.Fiat ? (
-            <span tw="ml-[0.5ch] text-color-text-2">{displayableAsset}</span>
-          ) : null
-        }
-      />
-      <div tw="row size-2 justify-center rounded-[50%] bg-[var(--simpleUi-dialog-secondaryColor)]">
-        <Icon iconName={IconName.Switch} />
-      </div>
-    </button>
-  );
-
-  const hasMarginUsageError = primaryAlert?.code === 'INVALID_NEW_ACCOUNT_MARGIN_USAGE';
-
-  const isDepositNeeded =
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    (summary.accountDetailsBefore?.account?.freeCollateral.lte(0) || hasMarginUsageError) &&
-    complianceState === ComplianceStates.FULL_ACCESS;
-
-  const onDepositFunds = () => {
-    dispatch(openDialog(DialogTypes.Deposit2({})));
-    onClose();
-  };
-
-  const placeOrderButton = isDepositNeeded ? (
-    <Button
-      type={ButtonType.Button}
-      action={ButtonAction.SimplePrimary}
-      tw="w-full rounded-[1rem] font-medium-bold disabled:[--button-textColor:var(--color-text-0)]"
-      size={ButtonSize.Large}
-      onClick={onDepositFunds}
-    >
-      {stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
-    </Button>
-  ) : (
-    <Button
-      type={ButtonType.Button}
-      action={tradeValues.side === OrderSide.BUY ? ButtonAction.Create : ButtonAction.Destroy}
-      tw="w-full rounded-[1rem] font-medium-bold disabled:[--button-textColor:var(--color-text-0)]"
-      size={ButtonSize.Large}
-      css={{
-        '--button-textColor': 'var(--color-layer-0)',
-      }}
-      state={{ isDisabled: !shouldEnableTrade }}
-      onClick={onSubmitOrder}
-    >
-      {shortAlertKey
-        ? stringGetter({ key: shortAlertKey })
-        : tradeValues.side === OrderSide.BUY
-          ? stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })
-          : stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
-    </Button>
-  );
-
-  const onQuickLimitClick = (quickLimit: QuickLimitOption) => {
-    const percentBN = MustBigNumber(quickLimit).div(100);
-
-    const multiplier =
-      tradeValues.side === OrderSide.BUY
-        ? BIG_NUMBERS.ONE.minus(percentBN)
-        : BIG_NUMBERS.ONE.plus(percentBN);
-
-    dispatch(
-      tradeFormActions.setLimitPrice(
-        midPrice?.times(multiplier).toFixed(tickSizeDecimals ?? TOKEN_DECIMALS) ?? ''
-      )
-    );
-
-    track(
-      AnalyticsEvents.TradeQuickLimitOptionClick({
-        quickLimit,
-        side: tradeValues.side,
-        marketId: ticker ?? '',
-      })
-    );
-  };
-
-  const quickLimitSizeButtons = (
-    <div tw="row gap-0.5">
-      {QUICK_LIMIT_OPTIONS.map((quickLimit: QuickLimitOption) => (
-        <Button
-          tw="[--button-backgroundColor:var(--simpleUi-dialog-primaryColor)]"
-          key={quickLimit}
-          type={ButtonType.Button}
-          action={ButtonAction.Base}
-          size={ButtonSize.Small}
-          onClick={() => onQuickLimitClick(quickLimit)}
-        >
-          {quickLimit === '0'
-            ? stringGetter({ key: STRING_KEYS.MID_MARKET_PRICE_SHORT })
-            : `${tradeValues.side === OrderSide.BUY ? '-' : ''}${quickLimit}%`}
-        </Button>
-      ))}
-    </div>
-  );
-
-  return (
-    <div tw="flexColumn items-center gap-2 pb-[12.5rem] pt-[6.5vh]">
-      <TradeFormHeaderMobile />
-      <div tw="flexColumn w-full items-center gap-0.5">{sizeToggle}</div>
-      {tradeValues.type === TradeFormType.LIMIT && (
-        <div tw="flexColumn items-center gap-1">
-          {limitPriceInput}
-          {quickLimitSizeButtons}
-        </div>
-      )}
-
-      <div
-        tw="flexColumn fixed bottom-0 left-0 right-0 gap-1 px-1.25 py-1.25"
-        css={{
-          background:
-            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
-        }}
-      >
-        <TradeFormMessages
-          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
-          placeOrderError={placeOrderError}
-          primaryAlert={primaryAlert}
-          shouldPromptUserToPlaceLimitOrder={shouldPromptUserToPlaceLimitOrder}
-        />
-        {receiptArea}
-        {placeOrderButton}
-      </div>
+  if (isClosingPosition) {
+    return <CloseTradeForm market={marketId} />;
+  }
 
-      <MarketsMenuDialog />
-    </div>
-  );
+  return <RegularTradeForm />;
 };
 
 export default TradeForm;
-
-const $FeeTrigger = styled.button.attrs({
-  type: 'button',
-})`
-  ${tw`row gap-0.25 text-color-text-2`}
-
-  svg {
-    color: var(--color-text-0);
-  }
-
-  &[data-state='open'] {
-    svg {
-      transition: rotate 0.3s var(--ease-out-expo);
-      rotate: -0.5turn;
-    }
-  }
-`;
diff --git a/src/pages/trade/mobile-web/TradeFormHeader.tsx b/src/pages/trade/mobile-web/TradeFormHeader.tsx
index 47edd0d21f..1e43c63918 100644
--- a/src/pages/trade/mobile-web/TradeFormHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeFormHeader.tsx
@@ -54,7 +54,7 @@ export const TradeFormHeaderMobile = ({ launchableMarketId }: { launchableMarket
   );
 };
 
-const $Header = styled.header`
+const $Header = styled.div`
   ${layoutMixins.contentSectionDetachedScrollable}
 
   ${layoutMixins.stickyHeader}
@@ -66,6 +66,12 @@ const $Header = styled.header`
 
   color: var(--color-text-2);
   background-color: var(--color-layer-2);
+  padding-top: 1rem;
+
+  border-bottom: 1px solid var(--color-border);
+
+  width: 100%;
+  padding-bottom: 1rem;
 `;
 
 const $Right = styled.div`
diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
index ba94a226b6..1ebf647040 100644
--- a/src/pages/trade/mobile-web/TradeHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -1,33 +1,100 @@
-import { BonsaiHelpers } from '@/bonsai/ontology';
-import styled from 'styled-components';
+import { BonsaiCore, BonsaiHelpers } from '@/bonsai/ontology';
+import styled, { css } from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
+import { DisplayUnit } from '@/constants/trade';
 
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
+import { Details } from '@/components/Details';
+import { DisplayUnitTag } from '@/components/DisplayUnitTag';
 import { Icon, IconName } from '@/components/Icon';
+import { Output, OutputType } from '@/components/Output';
+import { TriangleIndicator } from '@/components/TriangleIndicator';
+import { WithTooltip } from '@/components/WithTooltip';
+import { MarketStatsDetails } from '@/views/MarketStatsDetails';
+import { NextFundingTimer } from '@/views/NextFundingTimer';
 import { MobileTradeAssetSelector } from '@/views/mobile/MobileTradeAssetSelector';
 import { FavoriteButton } from '@/views/tables/MarketsTable/FavoriteButton';
 
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
 import { setIsUserMenuOpen } from '@/state/dialogs';
 
+import { MustBigNumber } from '@/lib/numbers';
+import { orEmptyObj } from '@/lib/typeUtils';
+
+enum MarketStats {
+  OraclePrice = 'OraclePrice',
+  PriceChange24H = 'PriceChange24H',
+  Volume24H = 'Volume24H',
+  Trades24H = 'Trades24H',
+  OpenInterest = 'OpenInterest',
+  Funding1H = 'Funding1H',
+  NextFunding = 'NextFunding',
+}
+
 export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
   const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
   const dispatch = useAppDispatch();
+  const stringGetter = useStringGetter();
+
+  const marketInfo = orEmptyObj(useAppSelector(BonsaiHelpers.currentMarket.marketInfo));
+  const loadingState = useAppSelector(BonsaiCore.markets.markets.loading);
+  const isLoading = loadingState === 'pending';
+
+  const {
+    displayableAsset,
+    nextFundingRate,
+    openInterest,
+    openInterestUSDC,
+    oraclePrice,
+    percentChange24h,
+    priceChange24H,
+    tickSizeDecimals,
+    trades24H,
+    volume24H,
+  } = orEmptyObj(marketInfo);
+
+  const displayUnit = useAppSelector(getSelectedDisplayUnit);
+
+  const valueMap = {
+    [MarketStats.OraclePrice]: oraclePrice,
+    [MarketStats.NextFunding]: undefined, // hardcoded
+    [MarketStats.Funding1H]: nextFundingRate,
+    [MarketStats.OpenInterest]: displayUnit === DisplayUnit.Fiat ? openInterestUSDC : openInterest,
+    [MarketStats.PriceChange24H]: priceChange24H,
+    [MarketStats.Trades24H]: trades24H,
+    [MarketStats.Volume24H]: volume24H,
+  };
+
+  const labelMap = {
+    [MarketStats.OraclePrice]: stringGetter({ key: STRING_KEYS.ORACLE_PRICE }),
+    [MarketStats.NextFunding]: stringGetter({ key: STRING_KEYS.NEXT_FUNDING }),
+    [MarketStats.Funding1H]: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
+    [MarketStats.OpenInterest]: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
+    [MarketStats.PriceChange24H]: stringGetter({ key: STRING_KEYS.CHANGE_24H }),
+    [MarketStats.Trades24H]: stringGetter({ key: STRING_KEYS.TRADES_24H }),
+    [MarketStats.Volume24H]: stringGetter({ key: STRING_KEYS.VOLUME_24H }),
+  };
 
   const openUserMenu = () => {
     dispatch(setIsUserMenuOpen(true));
   };
 
   return (
-    <$Header>
-      {id && <FavoriteButton marketId={id} tw="ml-[-0.5rem]" />}
+    <div tw="overflow-hidden">
+      <$TopHeader>
+        {id && <FavoriteButton marketId={id} tw="ml-[-0.5rem]" />}
 
-      <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
+        <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
 
-      <$Right>
         <Button
           tw="size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
           shape={ButtonShape.Circle}
@@ -36,14 +103,122 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
         >
           <Icon iconName={IconName.Menu} />
         </Button>
-      </$Right>
-    </$Header>
+      </$TopHeader>
+      <MarketStatsDetails showMidMarketPrice={false} horizontal withSubscript={false} />
+    </div>
   );
 };
 
+const DetailsItem = ({
+  value,
+  stat,
+  tickSizeDecimals,
+  assetId,
+  isLoading,
+  priceChange24HPercent,
+  useFiatDisplayUnit,
+}: {
+  value: string | number | null | undefined;
+  stat: MarketStats;
+  tickSizeDecimals: number | null | undefined;
+  assetId: string;
+  isLoading: boolean;
+  priceChange24HPercent: number | null | undefined;
+  useFiatDisplayUnit: boolean;
+}) => {
+  const valueBN = MustBigNumber(value);
+  const stringGetter = useStringGetter();
+
+  const color = valueBN.isNegative() ? 'var(--color-negative)' : 'var(--color-positive)';
+
+  switch (stat) {
+    case MarketStats.OraclePrice: {
+      return <$Output type={OutputType.Fiat} value={value} fractionDigits={tickSizeDecimals} />;
+    }
+    case MarketStats.OpenInterest: {
+      return (
+        <$Output
+          type={OutputType.Number}
+          value={value}
+          fractionDigits={useFiatDisplayUnit ? 0 : LARGE_TOKEN_DECIMALS}
+          slotRight={
+            <DisplayUnitTag tw="ml-[0.5ch]" assetId={assetId} entryPoint="openInterestAssetTag" />
+          }
+        />
+      );
+    }
+    case MarketStats.Funding1H: {
+      return (
+        <WithTooltip
+          slotTooltip={
+            <dl>
+              <dd tw="flex">
+                {stringGetter({ key: STRING_KEYS.ANNUALIZED })}:
+                <Output
+                  tw="ml-0.25"
+                  type={OutputType.Percent}
+                  value={MustBigNumber(value).times(24 * 365)}
+                  fractionDigits={0}
+                />
+              </dd>
+            </dl>
+          }
+        >
+          <$Output
+            type={OutputType.Percent}
+            value={value}
+            color={!isLoading ? color : undefined}
+            fractionDigits={FUNDING_DECIMALS}
+          />
+        </WithTooltip>
+      );
+    }
+    case MarketStats.NextFunding: {
+      return <NextFundingTimer />;
+    }
+    case MarketStats.PriceChange24H: {
+      return (
+        <$RowSpan color={!isLoading ? color : undefined}>
+          {!isLoading && <TriangleIndicator value={valueBN} />}
+          <$Output
+            withSubscript
+            type={OutputType.Fiat}
+            value={valueBN.abs()}
+            fractionDigits={tickSizeDecimals}
+          />
+          {!isLoading && (
+            <$Output
+              type={OutputType.Percent}
+              value={MustBigNumber(priceChange24HPercent).abs()}
+              withParentheses
+            />
+          )}
+        </$RowSpan>
+      );
+    }
+    case MarketStats.Trades24H: {
+      return <$Output type={OutputType.Number} value={value} fractionDigits={0} />;
+    }
+    case MarketStats.Volume24H: {
+      // $ with no decimals
+      return <$Output type={OutputType.Fiat} value={value} fractionDigits={0} />;
+    }
+    default: {
+      // Default renderer
+      return <$Output type={OutputType.Text} value={value} />;
+    }
+  }
+};
+
 const $Header = styled.header`
   ${layoutMixins.contentSectionDetachedScrollable}
 
+  ${layoutMixins.column}
+
+  border-bottom: 1px solid var(--color-border);
+`;
+
+const $TopHeader = styled.header`
   ${layoutMixins.stickyHeader}
   z-index: 2;
 
@@ -51,10 +226,45 @@ const $Header = styled.header`
 
   padding-left: 1rem;
   padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   gap: 1rem;
 
+  justify-content: space-between;
+
   color: var(--color-text-2);
   background-color: var(--color-layer-2);
+
+  border-bottom: 1px solid var(--color-border);
+`;
+
+const $StatsHeader = styled.div`
+  @media ${breakpoints.notTablet} {
+    ${layoutMixins.scrollArea}
+    ${layoutMixins.row}
+    isolation: isolate;
+
+    align-items: stretch;
+    margin-left: 1px;
+  }
+
+  @media ${breakpoints.tablet} {
+    border-bottom: solid var(--border-width) var(--color-border);
+  }
+`;
+
+const $Details = styled(Details)`
+  font: var(--font-mini-book);
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.withOuterAndInnerBorders}
+
+    font: var(--font-small-book);
+
+    > * {
+      padding: 0.625rem 1rem;
+    }
+  }
 `;
 
 const $Right = styled.div`
@@ -63,3 +273,29 @@ const $Right = styled.div`
   ${layoutMixins.rowColumn}
   justify-items: flex-end;
 `;
+
+const $Output = styled(Output)<{ color?: string }>`
+  ${layoutMixins.row}
+
+  ${({ color }) =>
+    color &&
+    css`
+      color: ${color};
+    `}
+`;
+
+const $RowSpan = styled.span<{ color?: string }>`
+  ${layoutMixins.row}
+
+  ${({ color }) =>
+    color &&
+    css`
+      color: ${color};
+    `}
+
+  > span {
+    ${layoutMixins.row}
+  }
+
+  gap: 0.25rem;
+`;
diff --git a/src/views/MarketStatsDetails.tsx b/src/views/MarketStatsDetails.tsx
index 43b9b1e752..f0e37933d7 100644
--- a/src/views/MarketStatsDetails.tsx
+++ b/src/views/MarketStatsDetails.tsx
@@ -31,6 +31,8 @@ import { MidMarketPrice } from './MidMarketPrice';
 
 type ElementProps = {
   showMidMarketPrice?: boolean;
+  horizontal?: boolean;
+  withSubscript?: boolean;
 };
 
 enum MarketStats {
@@ -44,7 +46,11 @@ enum MarketStats {
   MaxLeverage = 'MaxLeverage',
 }
 
-export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps) => {
+export const MarketStatsDetails = ({
+  showMidMarketPrice = true,
+  horizontal = false,
+  withSubscript,
+}: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
 
@@ -120,12 +126,14 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
               initialMarginFraction={initialMarginFraction}
               effectiveInitialMarginFraction={effectiveInitialMarginFraction}
               useFiatDisplayUnit={displayUnit === DisplayUnit.Fiat}
+              withSubscript={withSubscript}
             />
           ),
         }))}
         isLoading={isLoading}
-        layout={isTablet ? 'grid' : 'rowColumns'}
+        layout={horizontal ? 'rowColumns' : isTablet ? 'grid' : 'rowColumns'}
         withSeparators={!isTablet}
+        $horizontalScroll={horizontal}
       />
     </$MarketDetailsItems>
   );
@@ -145,17 +153,29 @@ const $MarketDetailsItems = styled.div`
   }
 `;
 
-const $Details = styled(Details)`
+const $Details = styled(Details)<{ $horizontalScroll?: boolean }>`
   font: var(--font-mini-book);
 
   @media ${breakpoints.tablet} {
     ${layoutMixins.withOuterAndInnerBorders}
-
     font: var(--font-small-book);
 
     > * {
       padding: 0.625rem 1rem;
     }
+
+    ${({ $horizontalScroll }) =>
+      $horizontalScroll &&
+      css`
+        max-width: 100vw;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        > * {
+          flex-shrink: 0;
+        }
+      `}
   }
 `;
 
@@ -206,6 +226,7 @@ const DetailsItem = ({
   initialMarginFraction,
   effectiveInitialMarginFraction,
   useFiatDisplayUnit,
+  withSubscript = true,
 }: {
   value: string | number | null | undefined;
   stat: MarketStats;
@@ -216,6 +237,7 @@ const DetailsItem = ({
   initialMarginFraction: string | null | undefined;
   effectiveInitialMarginFraction: number | null | undefined;
   useFiatDisplayUnit: boolean;
+  withSubscript?: boolean;
 }) => {
   const valueBN = MustBigNumber(value);
   const stringGetter = useStringGetter();
@@ -226,7 +248,7 @@ const DetailsItem = ({
     case MarketStats.OraclePrice: {
       return (
         <$Output
-          withSubscript
+          withSubscript={withSubscript}
           type={OutputType.Fiat}
           value={value}
           fractionDigits={tickSizeDecimals}
diff --git a/src/views/charts/TradingView/TvChart.tsx b/src/views/charts/TradingView/TvChart.tsx
index c83e40fddd..806b2592a9 100644
--- a/src/views/charts/TradingView/TvChart.tsx
+++ b/src/views/charts/TradingView/TvChart.tsx
@@ -9,6 +9,7 @@ import { useChartMarketAndResolution } from '@/hooks/tradingView/useChartMarketA
 import { useTradingView } from '@/hooks/tradingView/useTradingView';
 import { useTradingViewTheme } from '@/hooks/tradingView/useTradingViewTheme';
 import { useTradingViewToggles } from '@/hooks/tradingView/useTradingViewToggles';
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useSimpleUiEnabled } from '@/hooks/useSimpleUiEnabled';
 
 import { useAppSelector } from '@/state/appTypes';
@@ -21,6 +22,7 @@ export const TvChart = () => {
 
   const [tvWidget, setTvWidget] = useState<TvWidget>();
 
+  const { isTablet } = useBreakpoints();
   const isSimpleUi = useSimpleUiEnabled();
 
   const orderLineToggleRef = useRef<HTMLElement | null>(null);
@@ -64,5 +66,5 @@ export const TvChart = () => {
   });
   useTradingViewTheme({ tvWidget, chartLines });
 
-  return <BaseTvChart tvWidget={tvWidget} isSimpleUi={isSimpleUi} />;
+  return <BaseTvChart tvWidget={tvWidget} isSimpleUi={isTablet} />;
 };
diff --git a/src/views/dialogs/MarketsDialog/MarketRow.tsx b/src/views/dialogs/MarketsDialog/MarketRow.tsx
index cdb641dbec..312b45a98c 100644
--- a/src/views/dialogs/MarketsDialog/MarketRow.tsx
+++ b/src/views/dialogs/MarketsDialog/MarketRow.tsx
@@ -32,7 +32,7 @@ export const MarketRow = ({ className, market }: { className?: string; market: M
   return (
     <Link
       className={className}
-      tw="row cursor-pointer justify-between gap-0.5 px-1.25 hover:bg-color-layer-4"
+      tw="row cursor-pointer justify-between gap-0.5 hover:bg-color-layer-4"
       to={`${AppRoute.Trade}/${market.id}`}
       onClick={closeMarketsMenu}
     >
diff --git a/src/views/dialogs/MarketsDialog/MarketsList.tsx b/src/views/dialogs/MarketsDialog/MarketsList.tsx
index 049989833c..f778e57ad3 100644
--- a/src/views/dialogs/MarketsDialog/MarketsList.tsx
+++ b/src/views/dialogs/MarketsDialog/MarketsList.tsx
@@ -216,7 +216,7 @@ export const MarketList = () => {
               placeholder={`${stringGetter({ key: STRING_KEYS.SEARCH })}...`}
               onTextChange={setSearchFilter}
             />
-            <div tw="row gap-0.5">
+            <div tw="row gap-0.5 pl-1">
               <span tw="text-color-text-0 font-small-book">{sortTypeLabel}</span>
               <SimpleUiDropdownMenu
                 align="end"
diff --git a/src/views/dialogs/MobileUserMenuDialog.tsx b/src/views/dialogs/MobileUserMenuDialog.tsx
index c245d7144a..ea97b5a373 100644
--- a/src/views/dialogs/MobileUserMenuDialog.tsx
+++ b/src/views/dialogs/MobileUserMenuDialog.tsx
@@ -13,7 +13,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 
 import { useAccounts } from '@/hooks/useAccounts';
-import { useComplianceState } from '@/hooks/useComplianceState';
+import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Button } from '@/components/Button';
@@ -39,7 +39,7 @@ const UserMenuContent = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const onboardingState = useAppSelector(getOnboardingState);
-  const { complianceState } = useComplianceState();
+  const { complianceState } = usePerpetualsComplianceState();
   const canAccountTrade = useAppSelector(calculateCanAccountTrade);
   const isTurnkeyConnected = useAppSelector(selectIsTurnkeyConnected);
   const { equity, freeCollateral } = orEmptyObj(
diff --git a/src/views/dialogs/SetMarketLeverageDialog.tsx b/src/views/dialogs/SetMarketLeverageDialog.tsx
index b775a33b4b..661b6abcde 100644
--- a/src/views/dialogs/SetMarketLeverageDialog.tsx
+++ b/src/views/dialogs/SetMarketLeverageDialog.tsx
@@ -214,7 +214,7 @@ export const SetMarketLeverageDialog = ({
       isOpen
       setIsOpen={setIsOpen}
       title={stringGetter({ key: STRING_KEYS.SET_MARKET_LEVERAGE })}
-      tw="[--dialog-header-paddingBottom:1.5rem] [--dialog-width:25rem]"
+      tw="[--dialog-header-paddingBottom:1.5rem]"
     >
       <form onSubmit={onSave} tw="flexColumn gap-1.5">
         <div>
diff --git a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
index e1a1221158..39f5c2878b 100644
--- a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
+++ b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
@@ -12,6 +12,7 @@ import { StatsigFlags } from '@/constants/statsig';
 import { MobilePlaceOrderSteps } from '@/constants/trade';
 import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
 import { useStatsigGateValue } from '@/hooks/useStatsig';
 import { useStringGetter } from '@/hooks/useStringGetter';
@@ -74,6 +75,7 @@ export const PlaceOrderButtonAndReceipt = ({
   summary,
   tradingUnavailable,
 }: ElementProps) => {
+  const { isTablet } = useBreakpoints();
   const stringGetter = useStringGetter();
   const dispatch = useAppDispatch();
   const { chainTokenImage, chainTokenLabel } = useTokenConfigs();
@@ -335,35 +337,41 @@ export const PlaceOrderButtonAndReceipt = ({
 
   return (
     <$Footer>
-      <div tw="row gap-0.5 justify-self-end px-0 py-0.5">
-        <$WithSeparators layout="row">
-          {[
-            hasInput && (
-              <Button
-                type={ButtonType.Reset}
-                action={ButtonAction.Reset}
+      {!isTablet && (
+        <div tw="row gap-0.5 justify-self-end px-0 py-0.5">
+          <$WithSeparators layout="row">
+            {[
+              hasInput && (
+                <Button
+                  type={ButtonType.Reset}
+                  action={ButtonAction.Reset}
+                  shape={ButtonShape.Pill}
+                  size={ButtonSize.XSmall}
+                  onClick={onClearInputs}
+                  key="clear"
+                >
+                  {stringGetter({ key: STRING_KEYS.CLEAR })}
+                </Button>
+              ),
+              <$HideButton
+                slotRight={<Icon iconName={IconName.Caret} size="0.66em" />}
                 shape={ButtonShape.Pill}
                 size={ButtonSize.XSmall}
-                onClick={onClearInputs}
-                key="clear"
+                onPressedChange={setIsReceiptOpen}
+                isPressed={isReceiptOpen}
+                key="hide"
               >
-                {stringGetter({ key: STRING_KEYS.CLEAR })}
-              </Button>
-            ),
-            <$HideButton
-              slotRight={<Icon iconName={IconName.Caret} size="0.66em" />}
-              shape={ButtonShape.Pill}
-              size={ButtonSize.XSmall}
-              onPressedChange={setIsReceiptOpen}
-              isPressed={isReceiptOpen}
-              key="hide"
-            >
-              {stringGetter({ key: STRING_KEYS.RECEIPT })}
-            </$HideButton>,
-          ].filter(isTruthy)}
-        </$WithSeparators>
-      </div>
-      <WithDetailsReceipt detailItems={items} hideReceipt={!isReceiptOpen}>
+                {stringGetter({ key: STRING_KEYS.RECEIPT })}
+              </$HideButton>,
+            ].filter(isTruthy)}
+          </$WithSeparators>
+        </div>
+      )}
+      <WithDetailsReceipt
+        detailItems={items}
+        hideReceipt={!isReceiptOpen}
+        side={isTablet ? 'bottom' : 'top'}
+      >
         {!canAccountTrade ? (
           <OnboardingTriggerButton size={ButtonSize.Base} />
         ) : showDeposit && complianceState === ComplianceStates.FULL_ACCESS ? (
@@ -379,7 +387,6 @@ export const PlaceOrderButtonAndReceipt = ({
 const $Footer = styled.footer`
   ${formMixins.footer}
   padding-bottom: var(--dialog-content-paddingBottom);
-
   ${layoutMixins.column}
 `;
 
diff --git a/src/views/mobile/MobileTradeAssetSelector.tsx b/src/views/mobile/MobileTradeAssetSelector.tsx
index 36ffd45e95..b3d9cc26ac 100644
--- a/src/views/mobile/MobileTradeAssetSelector.tsx
+++ b/src/views/mobile/MobileTradeAssetSelector.tsx
@@ -41,19 +41,21 @@ export const MobileTradeAssetSelector = ({
       <img
         src={launchableAsset.logo ?? undefined}
         alt={launchableAsset.name}
-        tw="h-[2.5rem] w-[2.5rem] rounded-[50%]"
+        tw="h-[1.75rem] w-[1.75rem] rounded-[50%]"
       />
       <$Name>
-        <h3>{launchableAsset.name}</h3>
+        <h4>{launchableAsset.name}</h4>
         <span>{getDisplayableAssetFromBaseAsset(launchableAsset.assetId)}</span>
       </$Name>
     </div>
   ) : (
     <div tw="inlineRow gap-[1ch]">
-      <AssetIcon tw="[--asset-icon-size:2.5rem]" logoUrl={imageUrl} symbol={id} />
+      <AssetIcon tw="[--asset-icon-size:1.75rem]" logoUrl={imageUrl} symbol={id} />
       <$Name>
-        <h3>{displayableTicker}</h3>
-        <span>{Math.round(leverage)}x</span>
+        <h4>{displayableTicker}</h4>
+        <$Leverage>
+          <span>{Math.round(leverage)}x</span>
+        </$Leverage>
         <Icon iconName={IconName.Caret} size="0.75em" className="text-color-text-0" />
       </$Name>
     </div>
@@ -77,8 +79,14 @@ const $Name = styled.div`
     font: var(--font-large-medium);
   }
 
-  > :nth-child(2) {
-    font: var(--font-mini-book);
-    color: var(--color-text-0);
-  }
+  color: var(--color-text-2);
+`;
+
+const $Leverage = styled.div`
+  border-radius: 8px;
+  padding: 3px 6px;
+  background-color: #7774ff14;
+
+  font: var(--font-mini-medium);
+  color: var(--color-accent);
 `;
diff --git a/src/views/tables/MobilePositionsTable.tsx b/src/views/tables/MobilePositionsTable.tsx
new file mode 100644
index 0000000000..8f82c799db
--- /dev/null
+++ b/src/views/tables/MobilePositionsTable.tsx
@@ -0,0 +1,336 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+
+import { MarginMode } from '@/bonsai/forms/trade/types';
+import { BonsaiCore } from '@/bonsai/ontology';
+import {
+  PerpetualMarketSummary,
+  SubaccountOrder,
+  SubaccountPosition,
+} from '@/bonsai/types/summaryTypes';
+import { Trigger } from '@radix-ui/react-collapsible';
+import type { ColumnSize } from '@react-types/table';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { NumberSign, TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
+import { EMPTY_ARR } from '@/constants/objects';
+import { AppRoute } from '@/constants/routes';
+import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
+
+import { useEnvFeatures } from '@/hooks/useEnvFeatures';
+import { useAppSelectorWithArgs } from '@/hooks/useParameterizedSelector';
+
+import { AssetIcon } from '@/components/AssetIcon';
+import { Button } from '@/components/Button';
+import { Collapsible } from '@/components/Collapsible';
+import { Icon, IconName } from '@/components/Icon';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+import { PageSize } from '@/components/Table/TablePaginationRow';
+import { marginModeMatchesFilter, MarketTypeFilter } from '@/pages/trade/types';
+
+import { calculateIsAccountViewOnly } from '@/state/accountCalculators';
+import { getSubaccountConditionalOrders } from '@/state/accountSelectors';
+import { useAppDispatch, useAppSelector } from '@/state/appTypes';
+import { tradeFormActions } from '@/state/tradeForm';
+
+import { getNumberSign, MaybeNumber } from '@/lib/numbers';
+import { orEmptyRecord } from '@/lib/typeUtils';
+
+import { PositionsTriggersCell } from './PositionsTable/PositionsTriggersCell';
+
+export enum PositionsTableColumnKey {
+  Details = 'Details',
+  IndexEntry = 'IndexEntry',
+
+  Market = 'Market',
+  Leverage = 'Leverage',
+  Type = 'Type',
+  Size = 'Size',
+  Value = 'Value',
+  PnL = 'PnL',
+  Margin = 'Margin',
+  AverageOpen = 'AverageOpen',
+  Oracle = 'Oracle',
+  Liquidation = 'Liquidation',
+  Triggers = 'Triggers',
+  NetFunding = 'NetFunding',
+  Actions = 'Actions',
+}
+
+type PositionTableRow = {
+  marketSummary: PerpetualMarketSummary | undefined;
+  stopLossOrders: SubaccountOrder[];
+  takeProfitOrders: SubaccountOrder[];
+  stepSizeDecimals: number;
+  tickSizeDecimals: number;
+  oraclePrice: number | undefined;
+} & SubaccountPosition;
+
+type ElementProps = {
+  columnKeys: PositionsTableColumnKey[];
+  columnWidths?: Partial<Record<PositionsTableColumnKey, ColumnSize>>;
+  currentRoute?: string;
+  currentMarket?: string;
+  marketTypeFilter?: MarketTypeFilter;
+  showClosePositionAction: boolean;
+  initialPageSize?: PageSize;
+  onNavigate?: () => void;
+  navigateToOrders: (market: string) => void;
+};
+
+type StyleProps = {
+  withOuterBorder?: boolean;
+};
+
+export const MobilePositionsTable = forwardRef(
+  (
+    {
+      currentRoute,
+      currentMarket,
+      marketTypeFilter,
+      onNavigate,
+      navigateToOrders,
+    }: ElementProps & StyleProps,
+    _ref
+  ) => {
+    const dispatch = useAppDispatch();
+    const navigate = useNavigate();
+    const { isSlTpLimitOrdersEnabled } = useEnvFeatures();
+
+    const isAccountViewOnly = useAppSelector(calculateIsAccountViewOnly);
+    // todo this uses the old subaccount id for now
+    const marketSummaries = orEmptyRecord(useAppSelector(BonsaiCore.markets.markets.data));
+
+    const openPositions =
+      useAppSelector(BonsaiCore.account.parentSubaccountPositions.data) ?? EMPTY_ARR;
+
+    const positions = useMemo(() => {
+      return openPositions.filter((position) => {
+        const matchesMarket = currentMarket == null || position.market === currentMarket;
+        const marginType = position.marginMode;
+        const matchesType = marginModeMatchesFilter(marginType, marketTypeFilter);
+        return matchesMarket && matchesType;
+      });
+    }, [currentMarket, marketTypeFilter, openPositions]);
+
+    const tpslOrdersByPositionUniqueId = useAppSelectorWithArgs(
+      getSubaccountConditionalOrders,
+      isSlTpLimitOrdersEnabled
+    );
+
+    const positionsData = useMemo(
+      () =>
+        positions.map((position: SubaccountPosition): PositionTableRow => {
+          const marketSummary = marketSummaries[position.market];
+          return {
+            marketSummary,
+            stopLossOrders:
+              tpslOrdersByPositionUniqueId[position.uniqueId]?.stopLossOrders ?? EMPTY_ARR,
+            takeProfitOrders:
+              tpslOrdersByPositionUniqueId[position.uniqueId]?.takeProfitOrders ?? EMPTY_ARR,
+            stepSizeDecimals: marketSummary?.stepSizeDecimals ?? TOKEN_DECIMALS,
+            tickSizeDecimals: marketSummary?.tickSizeDecimals ?? USD_DECIMALS,
+            oraclePrice: MaybeNumber(marketSummary?.oraclePrice) ?? undefined,
+            ...position,
+          };
+        }),
+      [positions, tpslOrdersByPositionUniqueId, marketSummaries]
+    );
+
+    const navigateToMarket = useCallback(
+      (market: string) => {
+        if (!currentMarket) {
+          navigate(`${AppRoute.Trade}/${market}`, {
+            state: { from: currentRoute },
+          });
+          onNavigate?.();
+        }
+      },
+      [currentMarket]
+    );
+
+    const onCloseButtonToggle = (marketId: string) => {
+      dispatch(tradeFormActions.setMarketId(marketId));
+      dispatch(tradeFormActions.setIsClosingPosition(true));
+      navigate(`${AppRoute.TradeForm}/${marketId}`);
+    };
+
+    return (
+      <div tw="w-full">
+        {positionsData.map((position) => {
+          const isLong = position.side === IndexerPositionSide.LONG;
+          return (
+            <div key={position.market} tw="w-full">
+              <Collapsible
+                slotTrigger={
+                  <div tw="flex flex-1 items-center justify-between px-1.5 pt-1 text-small">
+                    <div
+                      tw="flex flex-1 flex-col gap-0.25"
+                      onClick={() => navigateToMarket(position.market)}
+                    >
+                      <div tw="flex flex-1 items-center gap-0.25">
+                        <AssetIcon
+                          logoUrl={position.marketSummary?.logo}
+                          symbol={position.marketSummary?.assetId}
+                          tw="inlineRow min-w-[unset] [--asset-icon-size:1rem]"
+                        />
+                        <div>{position.marketSummary?.displayableAsset}</div>
+                        <div style={{ color: isLong ? '#0DB37B' : '#FF5C5C' }}>
+                          {isLong ? 'Long' : 'Short'}
+                        </div>
+                      </div>
+                      <div tw="flex items-center gap-0.25 text-color-text-0">
+                        <div tw="font-semibold">
+                          {position.marginMode === MarginMode.CROSS ? 'Cross' : 'Isolated'}
+                        </div>
+                        <div tw="rounded-0.5 border-solid border-color-layer-3 px-0.5 py-0.25 text-mini">
+                          {Math.round(position.effectiveSelectedLeverage.toNumber())}x
+                        </div>
+                      </div>
+                    </div>
+                    <div tw="flex flex-[1.1] flex-col gap-0.25">
+                      <div>
+                        {position.unsignedSize.toNumber()}{' '}
+                        {position.marketSummary?.displayableAsset}
+                      </div>
+                      <Output
+                        withSubscript
+                        type={OutputType.Fiat}
+                        value={position.unsignedSize.toNumber() * (position.oraclePrice ?? 0)}
+                        fractionDigits={position.tickSizeDecimals}
+                        tw="text-color-text-0"
+                      />
+                    </div>
+                    <div tw="flex flex-[0.6] flex-col gap-0.25">
+                      <$OutputSigned
+                        sign={getNumberSign(position.updatedUnrealizedPnl)}
+                        type={OutputType.Fiat}
+                        value={position.updatedUnrealizedPnl}
+                        showSign={ShowSign.Negative}
+                      />
+                      <$OutputSigned
+                        sign={getNumberSign(position.updatedUnrealizedPnlPercent)}
+                        type={OutputType.Percent}
+                        value={position.updatedUnrealizedPnlPercent}
+                        showSign={ShowSign.Negative}
+                        fractionDigits={0}
+                        withParentheses
+                      />
+                    </div>
+                  </div>
+                }
+                label={
+                  <$Trigger>
+                    <$TriggerIcon>
+                      <Icon iconName={IconName.Caret} />
+                    </$TriggerIcon>
+                  </$Trigger>
+                }
+              >
+                <div tw="flex flex-col gap-1 pl-1.5 pr-3">
+                  <div tw="flex justify-between">
+                    <div tw="flex flex-1 flex-col gap-0.125">
+                      <span tw="text-small text-color-text-0">Entry Price</span>
+                      <Output
+                        withSubscript
+                        type={OutputType.Fiat}
+                        value={position.entryPrice}
+                        fractionDigits={position.tickSizeDecimals}
+                      />
+                    </div>
+                    <div tw="flex flex-[1.1] flex-col gap-0.125">
+                      <span tw="text-small text-color-text-0">Mark Price</span>
+                      <Output
+                        withSubscript
+                        type={OutputType.Fiat}
+                        value={position.oraclePrice}
+                        fractionDigits={position.tickSizeDecimals}
+                      />
+                    </div>
+                    <div tw="flex flex-[0.6] flex-col gap-0.125">
+                      <span tw="text-small text-color-text-0">Liq. Price</span>
+                      <Output
+                        withSubscript
+                        type={OutputType.Fiat}
+                        value={position.liquidationPrice}
+                        fractionDigits={position.tickSizeDecimals}
+                      />
+                    </div>
+                  </div>
+                  <div tw="flex justify-between">
+                    <div tw="flex flex-1 flex-col gap-0.125">
+                      <span tw="text-small text-color-text-0">Funding</span>
+                      <$OutputSigned
+                        sign={getNumberSign(position.netFunding)}
+                        type={OutputType.Fiat}
+                        value={position.netFunding}
+                        showSign={ShowSign.Negative}
+                      />
+                    </div>
+                    <div tw="flex flex-[1.1] flex-col gap-0.125">
+                      <$TriggersContainer tw="">TP/SL</$TriggersContainer>
+                      <PositionsTriggersCell
+                        marketId={position.market}
+                        positionUniqueId={position.uniqueId}
+                        assetId={position.assetId}
+                        tickSizeDecimals={position.tickSizeDecimals}
+                        liquidationPrice={position.liquidationPrice}
+                        stopLossOrders={position.stopLossOrders}
+                        takeProfitOrders={position.takeProfitOrders}
+                        positionSide={position.side}
+                        positionSize={position.signedSize}
+                        isDisabled={isAccountViewOnly}
+                        onViewOrdersClick={navigateToOrders}
+                      />
+                    </div>
+                    <div tw="flex flex-[0.6] flex-col gap-0.125">
+                      <Button
+                        tw="border-none bg-color-border-red px-1 text-red"
+                        onClick={() => onCloseButtonToggle(position.market)}
+                      >
+                        <Icon iconName={IconName.Close} tw="size-0.25" />
+                        Close
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Collapsible>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+const $OutputSigned = styled(Output)<{ sign: NumberSign }>`
+  color: ${({ sign }) =>
+    ({
+      [NumberSign.Positive]: `var(--color-positive)`,
+      [NumberSign.Negative]: `var(--color-negative)`,
+      [NumberSign.Neutral]: `var(--color-text-2)`,
+    })[sign]};
+`;
+
+const $TriggersContainer = styled.div`
+  font: var(--font-small-book);
+  color: var(--tableStickyRow-textColor, var(--color-text-0));
+`;
+
+const $Trigger = styled(Trigger)`
+  --trigger-textColor: inherit;
+  --trigger-icon-width: 0.75em;
+  --trigger-icon-color: inherit;
+  --icon-size: var(--trigger-icon-width);
+  padding-right: 16px;
+`;
+
+const $TriggerIcon = styled.span`
+  display: inline-flex;
+  transition: rotate 0.3s var(--ease-out-expo);
+  color: var(--trigger-icon-color);
+
+  ${$Trigger}[data-state='open'] & {
+    rotate: -0.5turn;
+  }
+`;
diff --git a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx
index 2356361901..e7b4d75755 100644
--- a/src/views/tables/PositionsTable/PositionsTriggersCell.tsx
+++ b/src/views/tables/PositionsTable/PositionsTriggersCell.tsx
@@ -9,6 +9,7 @@ import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useEnvFeatures } from '@/hooks/useEnvFeatures';
 import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
 import { useStringGetter } from '@/hooks/useStringGetter';
@@ -59,6 +60,7 @@ export const PositionsTriggersCell = ({
   const stringGetter = useStringGetter();
   const dispatch = useAppDispatch();
   const { isSlTpLimitOrdersEnabled } = useEnvFeatures();
+  const { isTablet } = useBreakpoints();
 
   const { complianceState } = usePerpetualsComplianceState();
 
@@ -93,7 +95,7 @@ export const PositionsTriggersCell = ({
   };
 
   const viewOrdersButton = (align: 'left' | 'right') => (
-    <$Container $align={align}>
+    <$Container $align={align} $isTablet={isTablet}>
       <$ViewOrdersButton
         action={ButtonAction.Navigation}
         size={ButtonSize.XSmall}
@@ -130,8 +132,12 @@ export const PositionsTriggersCell = ({
   }) => {
     if (orders.length === 0) {
       return (
-        <$Container $align={align} onClick={openTriggersDialog}>
-          <$Output type={OutputType.Fiat} value={null} $withLiquidationWarning={false} />
+        <$Container $align={align} onClick={openTriggersDialog} $isTablet={isTablet}>
+          {isTablet ? (
+            '--'
+          ) : (
+            <$Output type={OutputType.Fiat} value={null} $withLiquidationWarning={false} />
+          )}
         </$Container>
       );
     }
@@ -154,7 +160,7 @@ export const PositionsTriggersCell = ({
       );
 
       return (
-        <$Container $align={align} onClick={openTriggersDialog}>
+        <$Container $align={align} onClick={openTriggersDialog} $isTablet={isTablet}>
           {liquidationWarningSide != null ? (
             <WithHovercard
               align="start"
@@ -217,28 +223,27 @@ export const PositionsTriggersCell = ({
   };
 
   return (
-    <$TableCell>
-      {renderOutput({ align: 'right', orders: takeProfitOrders })}
-      <$VerticalSeparator />
+    <$TableCell $isTablet={isTablet}>
+      {renderOutput({ align: isTablet ? 'left' : 'right', orders: takeProfitOrders })}
+      {isTablet ? <div>/</div> : <$VerticalSeparator />}
       {renderOutput({ align: 'left', orders: stopLossOrders })}
       {!isDisabled && complianceState === ComplianceStates.FULL_ACCESS && editButton}
     </$TableCell>
   );
 };
 
-const $TableCell = styled(TableCell)`
+const $TableCell = styled(TableCell)<{ $isTablet: boolean }>`
   align-items: stretch;
-  gap: 0.75em;
-  justify-content: center;
 
-  --output-width: 70px;
+  ${({ $isTablet }) =>
+    `${$isTablet ? '--output-width: 30px; gap: 0.25em;' : '--output-width: 70px; gap: 0.75em; justify-content: center;'}`}
 `;
 
-const $Container = styled.div<{ $align: 'right' | 'left' }>`
-  display: inline-flex;
+const $Container = styled.div<{ $isTablet: boolean; $align: 'right' | 'left' }>`
   align-items: center;
   gap: 0.25em;
-  width: var(--output-width);
+
+  ${({ $isTablet }) => ($isTablet ? `` : 'width: var(--output-width); display: inline-flex;')}
 
   ${({ $align }) =>
     $align &&

From a34860322141a2e1066fb615ed5aaa3a257b7fa1 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 13 Jan 2026 16:08:46 +0700
Subject: [PATCH 03/27] Trade header fixes + remove web available to trade

---
 src/pages/trade/HorizontalPanel.tsx        |  26 +-
 src/pages/trade/mobile-web/Trade.tsx       |   9 +-
 src/pages/trade/mobile-web/TradeHeader.tsx | 261 +--------------------
 3 files changed, 25 insertions(+), 271 deletions(-)

diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index 76856aad6b..c655498aba 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -456,20 +456,22 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
 
   return (
     <>
-      <div tw="mx-1.5 mb-1 mt-0.5">
-        <div
-          tw="flex w-full flex-1 items-center justify-between rounded-0.25 bg-color-layer-3 px-1 py-0.75"
-          onClick={() => dispatch(openDialog(DialogTypes.Deposit2({})))}
-        >
-          <span tw="text-color-text-0">
-            {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_TRADE })}
-          </span>
-          <div tw="flex gap-0.25">
-            <Output type={OutputType.Fiat} value={availableBalance} />
-            <Icon iconName={IconName.PlusCircle} size="1.5rem" tw="text-color-accent" />
+      {isTablet && (
+        <div tw="mx-1.5 mb-1 mt-0.5">
+          <div
+            tw="flex w-full flex-1 items-center justify-between rounded-0.25 bg-color-layer-3 px-1 py-0.75"
+            onClick={() => dispatch(openDialog(DialogTypes.Deposit2({})))}
+          >
+            <span tw="text-color-text-0">
+              {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_TRADE })}
+            </span>
+            <div tw="flex gap-0.25">
+              <Output type={OutputType.Fiat} value={availableBalance} />
+              <Icon iconName={IconName.PlusCircle} size="1.5rem" tw="text-color-accent" />
+            </div>
           </div>
         </div>
-      </div>
+      )}
 
       <$CollapsibleTabs
         defaultTab={InfoSection.Position}
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index 91526cd855..87d932e79d 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -86,7 +86,7 @@ const TradePage = () => {
   );
 
   return (
-    <$TradeLayoutMobile>
+    <div tw="flexColumn items-center gap-[0.75em]">
       <TradeHeaderMobile />
 
       <$MobileContent>
@@ -114,17 +114,12 @@ const TradePage = () => {
 
       <UserMenuDialog />
       <MarketsMenuDialog />
-    </$TradeLayoutMobile>
+    </div>
   );
 };
 
 export default TradePage;
 
-const $TradeLayoutMobile = styled.div`
-  ${layoutMixins.expandingColumnWithHeader}
-  min-height: 100%;
-`;
-
 const $MobileContent = styled.article`
   ${layoutMixins.contentContainerPage}
 `;
diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
index 1ebf647040..1bff46fdf7 100644
--- a/src/pages/trade/mobile-web/TradeHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -1,96 +1,30 @@
-import { BonsaiCore, BonsaiHelpers } from '@/bonsai/ontology';
-import styled, { css } from 'styled-components';
+import { BonsaiHelpers } from '@/bonsai/ontology';
+import styled from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
-import { DisplayUnit } from '@/constants/trade';
 
-import { useStringGetter } from '@/hooks/useStringGetter';
-
-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button } from '@/components/Button';
-import { Details } from '@/components/Details';
-import { DisplayUnitTag } from '@/components/DisplayUnitTag';
 import { Icon, IconName } from '@/components/Icon';
-import { Output, OutputType } from '@/components/Output';
-import { TriangleIndicator } from '@/components/TriangleIndicator';
-import { WithTooltip } from '@/components/WithTooltip';
 import { MarketStatsDetails } from '@/views/MarketStatsDetails';
-import { NextFundingTimer } from '@/views/NextFundingTimer';
 import { MobileTradeAssetSelector } from '@/views/mobile/MobileTradeAssetSelector';
 import { FavoriteButton } from '@/views/tables/MarketsTable/FavoriteButton';
 
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
 import { setIsUserMenuOpen } from '@/state/dialogs';
 
-import { MustBigNumber } from '@/lib/numbers';
-import { orEmptyObj } from '@/lib/typeUtils';
-
-enum MarketStats {
-  OraclePrice = 'OraclePrice',
-  PriceChange24H = 'PriceChange24H',
-  Volume24H = 'Volume24H',
-  Trades24H = 'Trades24H',
-  OpenInterest = 'OpenInterest',
-  Funding1H = 'Funding1H',
-  NextFunding = 'NextFunding',
-}
-
 export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
   const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
   const dispatch = useAppDispatch();
-  const stringGetter = useStringGetter();
-
-  const marketInfo = orEmptyObj(useAppSelector(BonsaiHelpers.currentMarket.marketInfo));
-  const loadingState = useAppSelector(BonsaiCore.markets.markets.loading);
-  const isLoading = loadingState === 'pending';
-
-  const {
-    displayableAsset,
-    nextFundingRate,
-    openInterest,
-    openInterestUSDC,
-    oraclePrice,
-    percentChange24h,
-    priceChange24H,
-    tickSizeDecimals,
-    trades24H,
-    volume24H,
-  } = orEmptyObj(marketInfo);
-
-  const displayUnit = useAppSelector(getSelectedDisplayUnit);
-
-  const valueMap = {
-    [MarketStats.OraclePrice]: oraclePrice,
-    [MarketStats.NextFunding]: undefined, // hardcoded
-    [MarketStats.Funding1H]: nextFundingRate,
-    [MarketStats.OpenInterest]: displayUnit === DisplayUnit.Fiat ? openInterestUSDC : openInterest,
-    [MarketStats.PriceChange24H]: priceChange24H,
-    [MarketStats.Trades24H]: trades24H,
-    [MarketStats.Volume24H]: volume24H,
-  };
-
-  const labelMap = {
-    [MarketStats.OraclePrice]: stringGetter({ key: STRING_KEYS.ORACLE_PRICE }),
-    [MarketStats.NextFunding]: stringGetter({ key: STRING_KEYS.NEXT_FUNDING }),
-    [MarketStats.Funding1H]: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
-    [MarketStats.OpenInterest]: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
-    [MarketStats.PriceChange24H]: stringGetter({ key: STRING_KEYS.CHANGE_24H }),
-    [MarketStats.Trades24H]: stringGetter({ key: STRING_KEYS.TRADES_24H }),
-    [MarketStats.Volume24H]: stringGetter({ key: STRING_KEYS.VOLUME_24H }),
-  };
 
   const openUserMenu = () => {
     dispatch(setIsUserMenuOpen(true));
   };
 
   return (
-    <div tw="overflow-hidden">
-      <$TopHeader>
+    <$TopHeader>
+      <div tw="flex w-full items-center justify-between gap-1 border border-b border-solid border-color-border pb-1 pl-1 pr-1.5 pt-1">
         {id && <FavoriteButton marketId={id} tw="ml-[-0.5rem]" />}
 
         <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
@@ -103,199 +37,22 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
         >
           <Icon iconName={IconName.Menu} />
         </Button>
-      </$TopHeader>
+      </div>
       <MarketStatsDetails showMidMarketPrice={false} horizontal withSubscript={false} />
-    </div>
+    </$TopHeader>
   );
 };
 
-const DetailsItem = ({
-  value,
-  stat,
-  tickSizeDecimals,
-  assetId,
-  isLoading,
-  priceChange24HPercent,
-  useFiatDisplayUnit,
-}: {
-  value: string | number | null | undefined;
-  stat: MarketStats;
-  tickSizeDecimals: number | null | undefined;
-  assetId: string;
-  isLoading: boolean;
-  priceChange24HPercent: number | null | undefined;
-  useFiatDisplayUnit: boolean;
-}) => {
-  const valueBN = MustBigNumber(value);
-  const stringGetter = useStringGetter();
-
-  const color = valueBN.isNegative() ? 'var(--color-negative)' : 'var(--color-positive)';
-
-  switch (stat) {
-    case MarketStats.OraclePrice: {
-      return <$Output type={OutputType.Fiat} value={value} fractionDigits={tickSizeDecimals} />;
-    }
-    case MarketStats.OpenInterest: {
-      return (
-        <$Output
-          type={OutputType.Number}
-          value={value}
-          fractionDigits={useFiatDisplayUnit ? 0 : LARGE_TOKEN_DECIMALS}
-          slotRight={
-            <DisplayUnitTag tw="ml-[0.5ch]" assetId={assetId} entryPoint="openInterestAssetTag" />
-          }
-        />
-      );
-    }
-    case MarketStats.Funding1H: {
-      return (
-        <WithTooltip
-          slotTooltip={
-            <dl>
-              <dd tw="flex">
-                {stringGetter({ key: STRING_KEYS.ANNUALIZED })}:
-                <Output
-                  tw="ml-0.25"
-                  type={OutputType.Percent}
-                  value={MustBigNumber(value).times(24 * 365)}
-                  fractionDigits={0}
-                />
-              </dd>
-            </dl>
-          }
-        >
-          <$Output
-            type={OutputType.Percent}
-            value={value}
-            color={!isLoading ? color : undefined}
-            fractionDigits={FUNDING_DECIMALS}
-          />
-        </WithTooltip>
-      );
-    }
-    case MarketStats.NextFunding: {
-      return <NextFundingTimer />;
-    }
-    case MarketStats.PriceChange24H: {
-      return (
-        <$RowSpan color={!isLoading ? color : undefined}>
-          {!isLoading && <TriangleIndicator value={valueBN} />}
-          <$Output
-            withSubscript
-            type={OutputType.Fiat}
-            value={valueBN.abs()}
-            fractionDigits={tickSizeDecimals}
-          />
-          {!isLoading && (
-            <$Output
-              type={OutputType.Percent}
-              value={MustBigNumber(priceChange24HPercent).abs()}
-              withParentheses
-            />
-          )}
-        </$RowSpan>
-      );
-    }
-    case MarketStats.Trades24H: {
-      return <$Output type={OutputType.Number} value={value} fractionDigits={0} />;
-    }
-    case MarketStats.Volume24H: {
-      // $ with no decimals
-      return <$Output type={OutputType.Fiat} value={value} fractionDigits={0} />;
-    }
-    default: {
-      // Default renderer
-      return <$Output type={OutputType.Text} value={value} />;
-    }
-  }
-};
-
-const $Header = styled.header`
+const $TopHeader = styled.header`
   ${layoutMixins.contentSectionDetachedScrollable}
 
-  ${layoutMixins.column}
-
-  border-bottom: 1px solid var(--color-border);
-`;
-
-const $TopHeader = styled.header`
   ${layoutMixins.stickyHeader}
   z-index: 2;
 
-  ${layoutMixins.row}
-
-  padding-left: 1rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  gap: 1rem;
+  ${layoutMixins.column}
 
-  justify-content: space-between;
+  width: 100%;
 
   color: var(--color-text-2);
   background-color: var(--color-layer-2);
-
-  border-bottom: 1px solid var(--color-border);
-`;
-
-const $StatsHeader = styled.div`
-  @media ${breakpoints.notTablet} {
-    ${layoutMixins.scrollArea}
-    ${layoutMixins.row}
-    isolation: isolate;
-
-    align-items: stretch;
-    margin-left: 1px;
-  }
-
-  @media ${breakpoints.tablet} {
-    border-bottom: solid var(--border-width) var(--color-border);
-  }
-`;
-
-const $Details = styled(Details)`
-  font: var(--font-mini-book);
-
-  @media ${breakpoints.tablet} {
-    ${layoutMixins.withOuterAndInnerBorders}
-
-    font: var(--font-small-book);
-
-    > * {
-      padding: 0.625rem 1rem;
-    }
-  }
-`;
-
-const $Right = styled.div`
-  margin-left: auto;
-
-  ${layoutMixins.rowColumn}
-  justify-items: flex-end;
-`;
-
-const $Output = styled(Output)<{ color?: string }>`
-  ${layoutMixins.row}
-
-  ${({ color }) =>
-    color &&
-    css`
-      color: ${color};
-    `}
-`;
-
-const $RowSpan = styled.span<{ color?: string }>`
-  ${layoutMixins.row}
-
-  ${({ color }) =>
-    color &&
-    css`
-      color: ${color};
-    `}
-
-  > span {
-    ${layoutMixins.row}
-  }
-
-  gap: 0.25rem;
 `;

From b157a74dcd40d7766444ba182a3b71012cf65180 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 13 Jan 2026 16:22:33 +0700
Subject: [PATCH 04/27] fix footer

---
 src/hooks/useShouldShowFooter.ts     | 2 +-
 src/pages/trade/mobile-web/Trade.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useShouldShowFooter.ts b/src/hooks/useShouldShowFooter.ts
index 4a7bef78e8..1e78b3218d 100644
--- a/src/hooks/useShouldShowFooter.ts
+++ b/src/hooks/useShouldShowFooter.ts
@@ -13,7 +13,7 @@ export const useShouldShowFooter = () => {
   const canAccountTrade = useAppSelector(calculateCanAccountTrade);
 
   return (
-    !isTablet ||
+    isTablet ||
     !(
       !!(matchPath(TRADE_ROUTE, pathname) && canAccountTrade) ||
       !!(matchPath(AppRoute.Vault, pathname) && canAccountTrade)
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index 87d932e79d..4caac635d3 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -104,7 +104,7 @@ const TradePage = () => {
       </$MobileContent>
 
       <div
-        tw="row fixed bottom-3 left-0 right-0 gap-1.25 px-1.25 py-1.25"
+        tw="row fixed bottom-4 left-0 right-0 gap-1.25 px-1.25 py-1.25"
         css={{
           background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-layer-1))',
         }}
@@ -122,4 +122,6 @@ export default TradePage;
 
 const $MobileContent = styled.article`
   ${layoutMixins.contentContainerPage}
+
+  padding-bottom: 10rem;
 `;

From f77aa125bd2d7861f75f6216bffc7695b039739e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 13 Jan 2026 16:43:28 +0700
Subject: [PATCH 05/27] fix trade forms

---
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 38 ++++++++++++--
 .../trade/mobile-web/RegularTradeForm.tsx     | 49 +++++++++++++++----
 2 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
index 476d028f37..05f441fbf8 100644
--- a/src/pages/trade/mobile-web/CloseTradeForm.tsx
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
 
 import { OrderSide, OrderSizeInputs, TradeFormType } from '@/bonsai/forms/trade/types';
 import { BonsaiHelpers } from '@/bonsai/ontology';
@@ -149,8 +149,40 @@ const CloseTradeForm = ({ market }: Props) => {
     </$MidPriceButton>
   );
 
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    switch (currentStep) {
+      case MobilePlaceOrderSteps.EditOrder: {
+        setCurrentStep?.(MobilePlaceOrderSteps.PreviewOrder);
+        break;
+      }
+      case MobilePlaceOrderSteps.PlacingOrder:
+      case MobilePlaceOrderSteps.PlaceOrderFailed:
+      case MobilePlaceOrderSteps.Confirmation: {
+        break;
+      }
+      case MobilePlaceOrderSteps.PreviewOrder:
+      default: {
+        placeOrder({
+          onFailure: () => {
+            setCurrentStep?.(MobilePlaceOrderSteps.PlaceOrderFailed);
+          },
+          onPlaceOrder: () => {
+            onClearInputs();
+          },
+        });
+        setCurrentStep?.(MobilePlaceOrderSteps.PlacingOrder);
+        break;
+      }
+    }
+  };
+
   return (
-    <div tw="flexColumn items-center gap-[0.75em] px-2 pb-[12.5rem] pt-[6.5vh]">
+    <form
+      tw="flexColumn items-center gap-[0.75em] px-2 pb-[12.5rem] pt-[6.5vh]"
+      onSubmit={onSubmit}
+    >
       <TradeFormHeaderMobile />
       <div tw="w-full text-medium">Close {displayableAsset} Position</div>
       <MobileDropdownMenu
@@ -271,7 +303,7 @@ const CloseTradeForm = ({ market }: Props) => {
           }}
         />
       </div>
-    </div>
+    </form>
   );
 };
 
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index 5d8050f01c..ec932ee4ff 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { FormEvent, useCallback, useState } from 'react';
 
 import {
   ExecutionType,
@@ -91,12 +91,17 @@ const RegularTradeForm = () => {
     }
   }, [currentStep, setCurrentStep]);
 
-  const { placeOrderError, tradingUnavailable, shouldEnableTrade, hasValidationErrors } =
-    useTradeForm({
-      source: TradeFormSource.SimpleTradeForm,
-      fullFormSummary,
-      onLastOrderIndexed,
-    });
+  const {
+    placeOrderError,
+    placeOrder,
+    tradingUnavailable,
+    shouldEnableTrade,
+    hasValidationErrors,
+  } = useTradeForm({
+    source: TradeFormSource.SimpleTradeForm,
+    fullFormSummary,
+    onLastOrderIndexed,
+  });
 
   const { isErrorShownInOrderStatusToast, primaryAlert, shortAlertKey } = useTradeErrors({
     placeOrderError,
@@ -145,13 +150,39 @@ const RegularTradeForm = () => {
     [dispatch, side]
   );
 
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    switch (currentStep) {
+      case MobilePlaceOrderSteps.EditOrder: {
+        setCurrentStep?.(MobilePlaceOrderSteps.PreviewOrder);
+        break;
+      }
+      case MobilePlaceOrderSteps.PlacingOrder:
+      case MobilePlaceOrderSteps.PlaceOrderFailed:
+      case MobilePlaceOrderSteps.Confirmation: {
+        break;
+      }
+      case MobilePlaceOrderSteps.PreviewOrder:
+      default: {
+        placeOrder({
+          onPlaceOrder: () => {
+            dispatch(tradeFormActions.resetPrimaryInputs());
+          },
+        });
+        setCurrentStep?.(MobilePlaceOrderSteps.PlacingOrder);
+        break;
+      }
+    }
+  };
+
   const orderSideAction = {
     [OrderSide.BUY]: ButtonAction.Create,
     [OrderSide.SELL]: ButtonAction.Destroy,
   }[side];
 
   return (
-    <div tw="flexColumn items-center gap-[0.75em] px-1 pb-[12.5rem] pt-0">
+    <form tw="flexColumn items-center gap-[0.75em] px-1 pb-[12.5rem] pt-0" onSubmit={onSubmit}>
       <TradeFormHeaderMobile />
       <div tw="flex h-3 w-full items-center justify-between">
         <div tw="flex h-3">
@@ -337,7 +368,7 @@ const RegularTradeForm = () => {
         </$StyledWithDetailsReceipt> */}
       </div>
       <MarketsMenuDialog />
-    </div>
+    </form>
   );
 };
 

From cd2055096f33d596140f411be2c35957ece5d90b Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 13 Jan 2026 16:51:31 +0700
Subject: [PATCH 06/27] fixes

---
 src/bonsai/forms/trade/fields.ts              |  2 +-
 src/bonsai/forms/trade/summary.ts             |  2 +-
 src/pages/trade/LaunchableMarket.tsx          | 22 ++++++++-----------
 src/pages/trade/Trade.tsx                     | 22 ++++++++-----------
 .../dialogs/MarketsDialog/MarketsList.tsx     |  2 +-
 5 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/bonsai/forms/trade/fields.ts b/src/bonsai/forms/trade/fields.ts
index 55d811e53e..5cc9cf734d 100644
--- a/src/bonsai/forms/trade/fields.ts
+++ b/src/bonsai/forms/trade/fields.ts
@@ -104,7 +104,7 @@ export function getTradeFormFieldStates(
       states[key] = {
         ...(states[key] as any),
         state: 'enabled',
-        effectiveValue: states[key].effectiveValue ?? states[key].rawValue ?? defaults[key],
+        effectiveValue: states[key]?.effectiveValue ?? states[key]?.rawValue ?? defaults[key],
       };
     });
   }
diff --git a/src/bonsai/forms/trade/summary.ts b/src/bonsai/forms/trade/summary.ts
index 972d38c88d..5a3b35ff7c 100644
--- a/src/bonsai/forms/trade/summary.ts
+++ b/src/bonsai/forms/trade/summary.ts
@@ -80,7 +80,7 @@ export function calculateTradeSummary(
 
   const fieldStates = getTradeFormFieldStates(state, accountData, baseAccount);
 
-  const effectiveTrade = mapValues(fieldStates, (s) => s.effectiveValue) as TradeForm;
+  const effectiveTrade = mapValues(fieldStates, (s) => s?.effectiveValue) as TradeForm;
 
   const options = calculateTradeFormOptions(state.type, fieldStates, baseAccount);
 
diff --git a/src/pages/trade/LaunchableMarket.tsx b/src/pages/trade/LaunchableMarket.tsx
index 2562237f05..08114f1979 100644
--- a/src/pages/trade/LaunchableMarket.tsx
+++ b/src/pages/trade/LaunchableMarket.tsx
@@ -51,14 +51,14 @@ const LaunchableMarket = () => {
     },
     [dispatch]
   );
-  const {
-    handleMouseDown,
-    panelHeight: horizontalPanelHeight,
-    isDragging,
-  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
-    min: HORIZONTAL_PANEL_MIN_HEIGHT,
-    max: HORIZONTAL_PANEL_MAX_HEIGHT,
-  });
+  const { panelHeight: horizontalPanelHeight, isDragging } = useResizablePanel(
+    horizontalPanelHeightPxBase,
+    setPanelHeight,
+    {
+      min: HORIZONTAL_PANEL_MIN_HEIGHT,
+      max: HORIZONTAL_PANEL_MAX_HEIGHT,
+    }
+  );
   useEffect(() => {
     if (marketId) {
       track(
@@ -109,11 +109,7 @@ const LaunchableMarket = () => {
       </$GridSection>
 
       <$GridSection gridArea="Horizontal">
-        <HorizontalPanel
-          isOpen={isHorizontalPanelOpen}
-          setIsOpen={setIsHorizontalPanelOpen}
-          handleStartResize={handleMouseDown}
-        />
+        <HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
       </$GridSection>
     </$TradeLayout>
   );
diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx
index 2d64d7a0bb..f4340ca146 100644
--- a/src/pages/trade/Trade.tsx
+++ b/src/pages/trade/Trade.tsx
@@ -51,14 +51,14 @@ const TradePage = () => {
     },
     [dispatch]
   );
-  const {
-    handleMouseDown,
-    panelHeight: horizontalPanelHeight,
-    isDragging,
-  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
-    min: HORIZONTAL_PANEL_MIN_HEIGHT,
-    max: HORIZONTAL_PANEL_MAX_HEIGHT,
-  });
+  const { panelHeight: horizontalPanelHeight, isDragging } = useResizablePanel(
+    horizontalPanelHeightPxBase,
+    setPanelHeight,
+    {
+      min: HORIZONTAL_PANEL_MIN_HEIGHT,
+      max: HORIZONTAL_PANEL_MAX_HEIGHT,
+    }
+  );
   const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
 
   usePageTitlePriceUpdates();
@@ -109,11 +109,7 @@ const TradePage = () => {
       </$GridSection>
 
       <$GridSection gridArea="Horizontal">
-        <HorizontalPanel
-          isOpen={isHorizontalPanelOpen}
-          setIsOpen={setIsHorizontalPanelOpen}
-          handleStartResize={handleMouseDown}
-        />
+        <HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
       </$GridSection>
     </$TradeLayout>
   );
diff --git a/src/views/dialogs/MarketsDialog/MarketsList.tsx b/src/views/dialogs/MarketsDialog/MarketsList.tsx
index f778e57ad3..80774c13fe 100644
--- a/src/views/dialogs/MarketsDialog/MarketsList.tsx
+++ b/src/views/dialogs/MarketsDialog/MarketsList.tsx
@@ -312,7 +312,7 @@ const ItemRenderer = ({ listItem }: { listItem: ListItem }) => {
       css={{ height }}
     >
       {listItem.item}
-      {listItem.slotRight}
+      {(listItem as any)?.slotRight}
     </div>
   );
 };

From 5fc105e16217e1004749593044ed003499118dee Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Thu, 15 Jan 2026 00:35:36 +0700
Subject: [PATCH 07/27] fix sticky top

---
 src/views/tables/LiveTrades.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/tables/LiveTrades.tsx b/src/views/tables/LiveTrades.tsx
index 6c76b12ec6..d0e53397dc 100644
--- a/src/views/tables/LiveTrades.tsx
+++ b/src/views/tables/LiveTrades.tsx
@@ -185,6 +185,10 @@ const liveTradesTableType = getSimpleStyledOutputType(OrderbookTradesTable, {} a
 const $LiveTradesTable = styled(OrderbookTradesTable)<StyleProps>`
   background: var(--color-layer-2);
 
+  thead {
+    --stickyArea-totalInsetTop: 0;
+  }
+
   tr {
     --histogram-bucket-size: 1;
 

From be6866b8510a467f55ecc78de52839c369151e16 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 20 Jan 2026 11:03:34 -0500
Subject: [PATCH 08/27] updates based on feedback

---
 src/components/MobileDropdownMenu.tsx         |  3 +-
 src/components/NavigationMenu.tsx             |  5 +-
 src/layout/Footer/FooterMobile.tsx            |  2 +-
 src/pages/trade/HorizontalPanel.tsx           | 10 ++-
 src/pages/trade/MobileTopPanel.tsx            | 23 ++++-
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 88 +------------------
 .../trade/mobile-web/RegularTradeForm.tsx     |  3 +-
 src/pages/trade/mobile-web/Trade.tsx          |  4 +-
 src/styles/constants.css                      |  2 +-
 src/views/charts/TradingView/TvChart.tsx      |  2 -
 .../TradeForm/PlaceOrderButtonAndReceipt.tsx  |  1 +
 11 files changed, 42 insertions(+), 101 deletions(-)

diff --git a/src/components/MobileDropdownMenu.tsx b/src/components/MobileDropdownMenu.tsx
index 013d0d5f36..be6941ffbc 100644
--- a/src/components/MobileDropdownMenu.tsx
+++ b/src/components/MobileDropdownMenu.tsx
@@ -101,7 +101,8 @@ const DropdownMenuButton = styled(Button)`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: 4px;
+  border-radius: 8px;
+  border-width: 1.5px;
 
   &[data-state='open'] {
     svg {
diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
index b23912bc4f..29922d7607 100644
--- a/src/components/NavigationMenu.tsx
+++ b/src/components/NavigationMenu.tsx
@@ -15,6 +15,8 @@ import styled, { css, keyframes } from 'styled-components';
 
 import { MenuConfig, MenuItem } from '@/constants/menus';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
+
 import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';
 
@@ -63,6 +65,7 @@ const NavItemWithRef = <MenuItemValue extends string>(
   ref: Ref<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>
 ) => {
   const location = useLocation();
+  const { isTablet } = useBreakpoints();
 
   const children = (
     <>
@@ -95,7 +98,7 @@ const NavItemWithRef = <MenuItemValue extends string>(
         tw="whitespace-nowrap"
         {...props}
       >
-        {children}
+        {isTablet ? <div tw="mx-auto flex items-center gap-0.25">{children}</div> : children}
       </NavLink>
     </Link>
   ) : props.onClick ? (
diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx
index cdddfa5cfa..bf2fb1bd6e 100644
--- a/src/layout/Footer/FooterMobile.tsx
+++ b/src/layout/Footer/FooterMobile.tsx
@@ -44,7 +44,7 @@ export const FooterMobile = () => {
           },
         ]}
         orientation="horizontal"
-        itemOrientation="vertical"
+        itemOrientation="horizontal"
       />
     </$MobileNav>
   );
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index c655498aba..a8f83a97ae 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -226,7 +226,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     () => ({
       asChild: true,
       value: InfoSection.Orders,
-      label: stringGetter({ key: STRING_KEYS.OPEN_ORDERS_HEADER }),
+      label: stringGetter({ key: isTablet ? STRING_KEYS.ORDERS : STRING_KEYS.OPEN_ORDERS_HEADER }),
 
       slotRight:
         areOrdersLoading || isWaitingForOrderToIndex ? (
@@ -283,7 +283,9 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     () => ({
       asChild: true,
       value: InfoSection.OrderHistory,
-      label: stringGetter({ key: STRING_KEYS.ORDER_HISTORY_HEADER }),
+      label: stringGetter({
+        key: isTablet ? STRING_KEYS.HISTORY : STRING_KEYS.ORDER_HISTORY_HEADER,
+      }),
 
       slotRight: areOrdersLoading ? (
         <LoadingSpinner tw="[--spinner-width:1rem]" />
@@ -394,7 +396,9 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     () => ({
       asChild: true,
       value: InfoSection.Payments,
-      label: stringGetter({ key: STRING_KEYS.FUNDING_PAYMENTS }),
+      label: stringGetter({
+        key: isTablet ? STRING_KEYS.FUNDING_PAYMENTS_SHORT : STRING_KEYS.FUNDING_PAYMENTS,
+      }),
 
       content: (
         <FundingPaymentsTable
diff --git a/src/pages/trade/MobileTopPanel.tsx b/src/pages/trade/MobileTopPanel.tsx
index 96ebd94d98..24595b2fd4 100644
--- a/src/pages/trade/MobileTopPanel.tsx
+++ b/src/pages/trade/MobileTopPanel.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -40,6 +41,12 @@ const TabButton = ({ value, label }: { value: Tab; label: string }) => (
   </Trigger>
 );
 
+enum HeightMode {
+  Short = 'Short',
+  Normal = 'Normal',
+  Mobile = 'Mobile',
+}
+
 export const MobileTopPanel = ({
   isViewingUnlaunchedMarket,
 }: {
@@ -47,6 +54,7 @@ export const MobileTopPanel = ({
 }) => {
   const stringGetter = useStringGetter();
   const selectedLocale = useAppSelector(getSelectedLocale);
+  const { isTablet } = useBreakpoints();
 
   const [value, setValue] = useState(Tab.Price);
 
@@ -81,7 +89,9 @@ export const MobileTopPanel = ({
   return (
     <$Tabs
       value={value}
-      $shortMode={value === Tab.Account}
+      $heightMode={
+        isTablet ? HeightMode.Mobile : value === Tab.Account ? HeightMode.Short : HeightMode.Normal
+      }
       onValueChange={setValue}
       items={items.map((item) => ({
         ...item,
@@ -92,11 +102,16 @@ export const MobileTopPanel = ({
   );
 };
 
-type TabsStyleProps = { $shortMode?: boolean };
+type TabsStyleProps = { $heightMode?: HeightMode };
 const TabsTypeTemp = getSimpleStyledOutputType(Tabs, {} as TabsStyleProps);
 
 const $Tabs = styled(Tabs)<TabsStyleProps>`
-  --scrollArea-height: ${({ $shortMode }) => ($shortMode ? '19rem' : '27rem')};
+  --scrollArea-height: ${({ $heightMode }) =>
+    $heightMode === HeightMode.Mobile
+      ? '23rem'
+      : $heightMode === HeightMode.Short
+        ? '19rem'
+        : '27rem'};
   --stickyArea0-background: var(--color-layer-2);
   --tabContent-height: calc(var(--scrollArea-height) - 2rem - var(--tabs-currentHeight));
 
@@ -105,7 +120,7 @@ const $Tabs = styled(Tabs)<TabsStyleProps>`
   gap: var(--border-width);
 
   > div > header {
-    padding: 1rem 1.25rem;
+    ${({ $heightMode }) => ($heightMode !== HeightMode.Mobile ? 'padding: 1rem 1.25rem;' : '')}
 
     > [role='tablist'] {
       margin: auto;
diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
index 05f441fbf8..8306c86f4a 100644
--- a/src/pages/trade/mobile-web/CloseTradeForm.tsx
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -105,12 +105,7 @@ const CloseTradeForm = ({ market }: Props) => {
     onLastOrderIndexed,
   });
 
-  const {
-    shouldPromptUserToPlaceLimitOrder,
-    isErrorShownInOrderStatusToast,
-    primaryAlert,
-    shortAlertKey,
-  } = useTradeErrors({
+  const { isErrorShownInOrderStatusToast, primaryAlert, shortAlertKey } = useTradeErrors({
     placeOrderError: closePositionError,
     isClosingPosition: true,
   });
@@ -129,7 +124,6 @@ const CloseTradeForm = ({ market }: Props) => {
       //   return;
       // }
 
-      console.log(tradeType);
       dispatch(closePositionFormActions.setOrderType(tradeType));
     },
     [dispatch, side]
@@ -140,9 +134,6 @@ const CloseTradeForm = ({ market }: Props) => {
     dispatch(closePositionFormActions.reset());
   };
 
-  const formattedPositionSize =
-    (positionSize?.toNumber() ?? 0) / 10 ** (stepSizeDecimals ?? TOKEN_DECIMALS);
-
   const midMarketPriceButton = (
     <$MidPriceButton onClick={setLimitPriceToMidPrice} size={ButtonSize.XSmall}>
       {stringGetter({ key: STRING_KEYS.MID_MARKET_PRICE_SHORT })}
@@ -187,6 +178,7 @@ const CloseTradeForm = ({ market }: Props) => {
       <div tw="w-full text-medium">Close {displayableAsset} Position</div>
       <MobileDropdownMenu
         withPortal={false}
+        align="end"
         items={[
           {
             value: TradeFormType.MARKET,
@@ -273,7 +265,7 @@ const CloseTradeForm = ({ market }: Props) => {
       />
 
       <div
-        tw="w-[calc(100vw - 64px)] flexColumn gap-1 py-1.25"
+        tw="flexColumn w-full gap-1 py-1.25"
         css={{
           background:
             'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
@@ -309,80 +301,6 @@ const CloseTradeForm = ({ market }: Props) => {
 
 export default CloseTradeForm;
 
-const StyledButton = styled(Button)<{ $isActive?: boolean }>`
-  ${({ $isActive }) =>
-    $isActive
-      ? `--button-textColor: var(--color-text-2);`
-      : `--button-textColor: var(--color-text-0);`}
-`;
-
-const LongButton = styled(Button)<{ $isLong?: boolean }>`
-  ${({ $isLong }) =>
-    $isLong ? `background-color: var(--color-gradient-positive);` : 'background-color: transparent'}
-`;
-
-const ShortButton = styled(Button)<{ $isShort?: boolean }>`
-  ${({ $isShort }) =>
-    $isShort
-      ? `background-color: var(--color-gradient-negative);`
-      : 'background-color: transparent'}
-`;
-
-const $InputsColumn = styled.div`
-  ${formMixins.inputsColumn}
-
-  width: 100%;
-`;
-
-const AvailableRow = styled.div`
-  display: flex;
-
-  justify-content: space-between;
-
-  align-items: center;
-
-  padding: 8 px 4 px;
-
-  margin-bottom: 8 px;
-
-  width: 100%;
-`;
-const AvailableLabel = styled.span`
-  color: #6b7280;
-
-  font-size: 15 px;
-`;
-const AvailableValue = styled.div`
-  display: flex;
-
-  align-items: center;
-
-  gap: 8 px;
-
-  color: #6b7280;
-
-  font-size: 15 px;
-`;
-
-const ToggleRow = styled.div`
-  display: flex;
-
-  justify-content: space-between;
-
-  align-items: center;
-
-  padding: 0px 0px;
-
-  width: 100%;
-`;
-const ToggleLabel = styled.span`
-  color: #9ca3af;
-
-  font-size: 16 px;
-
-  font-weight: 400;
-`;
-
 const $PlaceOrderButtonAndReceipt = styled(PlaceOrderButtonAndReceipt)`
   --withReceipt-backgroundColor: transparent;
 `;
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index ec932ee4ff..431fb75ab3 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -243,6 +243,7 @@ const RegularTradeForm = () => {
       </div>
       <MobileDropdownMenu
         withPortal={false}
+        align="end"
         items={[
           {
             value: TradeFormType.MARKET,
@@ -331,7 +332,7 @@ const RegularTradeForm = () => {
         />
       </ToggleRow>
       <div
-        tw="w-[calc(100vw - 64px)] flexColumn gap-1 py-1.25"
+        tw="flexColumn w-full gap-1 py-1.25"
         css={{
           background:
             'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index 4caac635d3..6319ffd783 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -58,7 +58,7 @@ const TradePage = () => {
   ) : canAccountTrade ? (
     <>
       <Button
-        tw="flex-1 bg-color-negative text-color-layer-0"
+        tw="flex-1 rounded-1 bg-color-negative text-color-layer-0"
         shape={ButtonShape.Pill}
         size={ButtonSize.Large}
         onClick={() => {
@@ -70,7 +70,7 @@ const TradePage = () => {
       </Button>
 
       <Button
-        tw="flex-1 bg-color-positive text-color-layer-0"
+        tw="flex-1 rounded-1 bg-color-positive text-color-layer-0"
         shape={ButtonShape.Pill}
         size={ButtonSize.Large}
         onClick={() => {
diff --git a/src/styles/constants.css b/src/styles/constants.css
index 509ccb8328..ea9db29dea 100644
--- a/src/styles/constants.css
+++ b/src/styles/constants.css
@@ -6,7 +6,7 @@
   --page-header-height: 2.75rem;
   --page-header-height-mobile: 4rem;
   --page-footer-height: 2rem;
-  --page-footer-height-mobile: 4.5rem;
+  --page-footer-height-mobile: 3.5rem;
 
   /* Restriction Warning */
   --restriction-warning-height: 3.25rem;
diff --git a/src/views/charts/TradingView/TvChart.tsx b/src/views/charts/TradingView/TvChart.tsx
index 806b2592a9..44e05e5ae2 100644
--- a/src/views/charts/TradingView/TvChart.tsx
+++ b/src/views/charts/TradingView/TvChart.tsx
@@ -10,7 +10,6 @@ import { useTradingView } from '@/hooks/tradingView/useTradingView';
 import { useTradingViewTheme } from '@/hooks/tradingView/useTradingViewTheme';
 import { useTradingViewToggles } from '@/hooks/tradingView/useTradingViewToggles';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { useSimpleUiEnabled } from '@/hooks/useSimpleUiEnabled';
 
 import { useAppSelector } from '@/state/appTypes';
 import { getCurrentMarketId } from '@/state/currentMarketSelectors';
@@ -23,7 +22,6 @@ export const TvChart = () => {
   const [tvWidget, setTvWidget] = useState<TvWidget>();
 
   const { isTablet } = useBreakpoints();
-  const isSimpleUi = useSimpleUiEnabled();
 
   const orderLineToggleRef = useRef<HTMLElement | null>(null);
   const orderLineToggle = orderLineToggleRef.current;
diff --git a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
index 39f5c2878b..a64f1ec31c 100644
--- a/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
+++ b/src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx
@@ -388,6 +388,7 @@ const $Footer = styled.footer`
   ${formMixins.footer}
   padding-bottom: var(--dialog-content-paddingBottom);
   ${layoutMixins.column}
+  width: 100%;
 `;
 
 const $WithSeparators = styled(WithSeparators)`

From c92e017053830e8b52e893040ab070a0f11097bd Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 21 Jan 2026 14:34:45 -0500
Subject: [PATCH 09/27] updates

---
 src/components/NavigationMenu.tsx             |   2 +-
 src/layout/Footer/FooterMobile.tsx            |   8 +-
 src/pages/trade/HorizontalPanel.tsx           |   3 +-
 src/pages/trade/MarketStats.tsx               |  11 +
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 227 ++++++-----
 .../trade/mobile-web/RegularTradeForm.tsx     | 358 +++++++++---------
 src/pages/trade/mobile-web/Trade.tsx          |  84 ++--
 .../trade/mobile-web/TradeFormHeader.tsx      |  12 +-
 src/pages/trade/mobile-web/TradeHeader.tsx    |   2 +-
 .../charts/TradingView/ResolutionSelector.tsx |   5 +-
 10 files changed, 367 insertions(+), 345 deletions(-)
 create mode 100644 src/pages/trade/MarketStats.tsx

diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
index 29922d7607..0fbb738b12 100644
--- a/src/components/NavigationMenu.tsx
+++ b/src/components/NavigationMenu.tsx
@@ -70,7 +70,7 @@ const NavItemWithRef = <MenuItemValue extends string>(
   const children = (
     <>
       {slotBefore}
-      <span>
+      <span css={isTablet ? { fontSize: 16 } : undefined}>
         {label}
         {tag && (
           <>
diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx
index bf2fb1bd6e..b1c07c0afb 100644
--- a/src/layout/Footer/FooterMobile.tsx
+++ b/src/layout/Footer/FooterMobile.tsx
@@ -6,7 +6,7 @@ import { AppRoute } from '@/constants/routes';
 
 import { useStringGetter } from '@/hooks/useStringGetter';
 
-import { MarketsIcon, PortfolioIcon, TradeIcon } from '@/icons';
+import { Bar3Icon, ProfileIcon, TradeIcon } from '@/icons';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Icon } from '@/components/Icon';
@@ -25,7 +25,7 @@ export const FooterMobile = () => {
               {
                 value: 'trade',
                 label: stringGetter({ key: STRING_KEYS.MARKETS }),
-                slotBefore: <$Icon size="0.75em" iconComponent={MarketsIcon as any} />,
+                slotBefore: <$Icon size="0.75em" iconComponent={Bar3Icon as any} />,
                 href: AppRoute.Trade,
               },
               {
@@ -36,8 +36,8 @@ export const FooterMobile = () => {
               },
               {
                 value: 'portfolio',
-                label: stringGetter({ key: STRING_KEYS.PORTFOLIO }),
-                slotBefore: <$Icon size="0.75em" iconComponent={PortfolioIcon as any} />,
+                label: stringGetter({ key: STRING_KEYS.ACCOUNT }),
+                slotBefore: <$Icon size="0.75em" iconComponent={ProfileIcon as any} />,
                 href: AppRoute.Portfolio,
               },
             ],
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index a8f83a97ae..1c3f1c7694 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -48,6 +48,7 @@ import { isTruthy } from '@/lib/isTruthy';
 import { shortenNumberForDisplay } from '@/lib/numbers';
 import { orEmptyObj } from '@/lib/typeUtils';
 
+import MarketStats from './MarketStats';
 import { TradeTableSettings } from './TradeTableSettings';
 import { MaybeUnopenedIsolatedPositionsDrawer } from './UnopenedIsolatedPositions';
 import { MarketTypeFilter, PanelView } from './types';
@@ -142,7 +143,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
       label: stringGetter({
         key: STRING_KEYS.DETAILS,
       }),
-      content: null,
+      content: <MarketStats />,
     }),
     [stringGetter]
   );
diff --git a/src/pages/trade/MarketStats.tsx b/src/pages/trade/MarketStats.tsx
new file mode 100644
index 0000000000..701b49c77a
--- /dev/null
+++ b/src/pages/trade/MarketStats.tsx
@@ -0,0 +1,11 @@
+import { CurrentMarketDetails } from '@/views/MarketDetails/CurrentMarketDetails';
+
+const MarketStats = () => {
+  return (
+    <div tw="py-1.25">
+      <CurrentMarketDetails />
+    </div>
+  );
+};
+
+export default MarketStats;
diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
index 8306c86f4a..27d79a0fe3 100644
--- a/src/pages/trade/mobile-web/CloseTradeForm.tsx
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -170,130 +170,129 @@ const CloseTradeForm = ({ market }: Props) => {
   };
 
   return (
-    <form
-      tw="flexColumn items-center gap-[0.75em] px-2 pb-[12.5rem] pt-[6.5vh]"
-      onSubmit={onSubmit}
-    >
+    <form tw="flexColumn items-center gap-[0.75em] pb-[12.5rem] pt-0" onSubmit={onSubmit}>
       <TradeFormHeaderMobile />
-      <div tw="w-full text-medium">Close {displayableAsset} Position</div>
-      <MobileDropdownMenu
-        withPortal={false}
-        align="end"
-        items={[
-          {
-            value: TradeFormType.MARKET,
-            active: selectedTradeType === TradeFormType.MARKET,
-            label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
-            onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
-          },
-          {
-            value: TradeFormType.LIMIT,
-            active: selectedTradeType === TradeFormType.LIMIT,
-            label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
-            onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
-          },
-        ]}
-      >
-        <DropdownMenuTrigger
-          tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
-          shape={ButtonShape.Pill}
-          size={ButtonSize.Base}
+      <div tw="flexColumn w-full items-center gap-0.75 px-1">
+        <div tw="w-full text-medium">Close {displayableAsset} Position</div>
+        <MobileDropdownMenu
+          withPortal={false}
+          align="end"
+          items={[
+            {
+              value: TradeFormType.MARKET,
+              active: selectedTradeType === TradeFormType.MARKET,
+              label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
+              onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
+            },
+            {
+              value: TradeFormType.LIMIT,
+              active: selectedTradeType === TradeFormType.LIMIT,
+              label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
+              onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
+            },
+          ]}
         >
-          {selectedTradeType === TradeFormType.MARKET
-            ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
-            : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
-        </DropdownMenuTrigger>
-      </MobileDropdownMenu>
-
-      <div tw="flex w-full justify-between">
-        <p tw="text-small text-color-text-0">Current Position</p>
-        <$PositionSize isLong={positionSize?.isGreaterThanOrEqualTo(0) ?? false}>
-          {Math.abs(positionSize?.toNumber() ?? 0)} {displayableAsset}
-        </$PositionSize>
-      </div>
+          <DropdownMenuTrigger
+            tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Base}
+          >
+            {selectedTradeType === TradeFormType.MARKET
+              ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
+              : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
+          </DropdownMenuTrigger>
+        </MobileDropdownMenu>
+
+        <div tw="flex w-full justify-between">
+          <p tw="text-small text-color-text-0">Current Position</p>
+          <$PositionSize isLong={positionSize?.isGreaterThanOrEqualTo(0) ?? false}>
+            {Math.abs(positionSize?.toNumber() ?? 0)} {displayableAsset}
+          </$PositionSize>
+        </div>
 
-      <FormInput
-        id="close-position-amount"
-        label={<span>{stringGetter({ key: STRING_KEYS.AMOUNT })}</span>}
-        decimals={stepSizeDecimals ?? TOKEN_DECIMALS}
-        onInput={onAmountInput}
-        type={InputType.Number}
-        value={amountInput}
-        tw="w-full"
-      />
-
-      {useLimit && (
         <FormInput
-          key="close-position-limit-price"
-          id="close-position-limit-price"
-          type={InputType.Currency}
-          label={
-            <>
-              <WithTooltip tooltip="limit-price" side="right">
-                {stringGetter({ key: STRING_KEYS.LIMIT_PRICE })}
-              </WithTooltip>
-              <Tag>USD</Tag>
-            </>
-          }
-          onChange={onLimitPriceInput}
-          value={limitPriceInput}
-          decimals={tickSizeDecimals ?? USD_DECIMALS}
-          slotRight={setLimitPriceToMidPrice ? midMarketPriceButton : undefined}
+          id="close-position-amount"
+          label={<span>{stringGetter({ key: STRING_KEYS.AMOUNT })}</span>}
+          decimals={stepSizeDecimals ?? TOKEN_DECIMALS}
+          onInput={onAmountInput}
+          type={InputType.Number}
+          value={amountInput}
           tw="w-full"
         />
-      )}
-
-      <AllocationSlider
-        allocationPercentInput={
-          tradeValues.size != null && OrderSizeInputs.is.AVAILABLE_PERCENT(tradeValues.size)
-            ? (AttemptBigNumber(tradeValues.size.value.value)
-                ?.times(100)
-                .toFixed(0, BigNumber.ROUND_FLOOR) ?? '')
-            : tradeValues.size == null || tradeValues.size.value.value === ''
-              ? ''
-              : (AttemptBigNumber(effectiveSizes?.allocationPercent)
+
+        {useLimit && (
+          <FormInput
+            key="close-position-limit-price"
+            id="close-position-limit-price"
+            type={InputType.Currency}
+            label={
+              <>
+                <WithTooltip tooltip="limit-price" side="right">
+                  {stringGetter({ key: STRING_KEYS.LIMIT_PRICE })}
+                </WithTooltip>
+                <Tag>USD</Tag>
+              </>
+            }
+            onChange={onLimitPriceInput}
+            value={limitPriceInput}
+            decimals={tickSizeDecimals ?? USD_DECIMALS}
+            slotRight={setLimitPriceToMidPrice ? midMarketPriceButton : undefined}
+            tw="w-full"
+          />
+        )}
+
+        <AllocationSlider
+          allocationPercentInput={
+            tradeValues.size != null && OrderSizeInputs.is.AVAILABLE_PERCENT(tradeValues.size)
+              ? (AttemptBigNumber(tradeValues.size.value.value)
                   ?.times(100)
                   .toFixed(0, BigNumber.ROUND_FLOOR) ?? '')
-        }
-        setAllocationInput={(value: string | undefined) => {
-          dispatch(
-            closePositionFormActions.setSizeAvailablePercent(
-              mapIfPresent(value, (v) => MaybeBigNumber(v)?.div(100).toFixed(2)) ?? ''
-            )
-          );
-        }}
-      />
-
-      <div
-        tw="flexColumn w-full gap-1 py-1.25"
-        css={{
-          background:
-            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
-        }}
-      >
-        <TradeFormMessages
-          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
-          placeOrderError={closePositionError}
-          primaryAlert={primaryAlert}
-          shouldPromptUserToPlaceLimitOrder={false}
-        />
-        {/* {receiptArea} */}
-        <$PlaceOrderButtonAndReceipt
-          summary={summary}
-          actionStringKey={shortAlertKey}
-          currentStep={currentStep}
-          hasInput={!!amountInput}
-          hasValidationErrors={hasValidationErrors}
-          onClearInputs={onClearInputs}
-          shouldEnableTrade={shouldEnableTrade}
-          showDeposit={false}
-          tradingUnavailable={tradingUnavailable}
-          confirmButtonConfig={{
-            stringKey: STRING_KEYS.CLOSE_ORDER,
-            buttonTextStringKey: STRING_KEYS.CLOSE_POSITION,
-            buttonAction: ButtonAction.Destroy,
+              : tradeValues.size == null || tradeValues.size.value.value === ''
+                ? ''
+                : (AttemptBigNumber(effectiveSizes?.allocationPercent)
+                    ?.times(100)
+                    .toFixed(0, BigNumber.ROUND_FLOOR) ?? '')
+          }
+          setAllocationInput={(value: string | undefined) => {
+            dispatch(
+              closePositionFormActions.setSizeAvailablePercent(
+                mapIfPresent(value, (v) => MaybeBigNumber(v)?.div(100).toFixed(2)) ?? ''
+              )
+            );
           }}
         />
+
+        <div
+          tw="flexColumn w-full max-w-[calc(100vw-2rem)] gap-1 py-1.25"
+          css={{
+            background:
+              'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
+          }}
+        >
+          <TradeFormMessages
+            isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
+            placeOrderError={closePositionError}
+            primaryAlert={primaryAlert}
+            shouldPromptUserToPlaceLimitOrder={false}
+          />
+          {/* {receiptArea} */}
+          <$PlaceOrderButtonAndReceipt
+            summary={summary}
+            actionStringKey={shortAlertKey}
+            currentStep={currentStep}
+            hasInput={!!amountInput}
+            hasValidationErrors={hasValidationErrors}
+            onClearInputs={onClearInputs}
+            shouldEnableTrade={shouldEnableTrade}
+            showDeposit={false}
+            tradingUnavailable={tradingUnavailable}
+            confirmButtonConfig={{
+              stringKey: STRING_KEYS.CLOSE_ORDER,
+              buttonTextStringKey: STRING_KEYS.CLOSE_POSITION,
+              buttonAction: ButtonAction.Destroy,
+            }}
+          />
+        </div>
       </div>
     </form>
   );
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index 431fb75ab3..76d863798a 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -182,192 +182,192 @@ const RegularTradeForm = () => {
   }[side];
 
   return (
-    <form tw="flexColumn items-center gap-[0.75em] px-1 pb-[12.5rem] pt-0" onSubmit={onSubmit}>
+    <form tw="flexColumn items-center gap-[0.75em] pb-[12.5rem] pt-0" onSubmit={onSubmit}>
       <TradeFormHeaderMobile />
-      <div tw="flex h-3 w-full items-center justify-between">
-        <div tw="flex h-3">
-          <StyledButton
+      <div tw="flexColumn w-full items-center gap-0.75 px-1">
+        <div tw="flex h-3 w-full items-center justify-between">
+          <div tw="flex h-3">
+            <StyledButton
+              buttonStyle={ButtonStyle.WithoutBackground}
+              $isActive={marginMode === MarginMode.CROSS}
+              onClick={() => setMarginMode(MarginMode.CROSS)}
+              disabled={!needsMarginMode && marginMode !== MarginMode.CROSS}
+            >
+              {stringGetter({
+                key: STRING_KEYS.CROSS,
+              })}
+            </StyledButton>
+            <VerticalSeparator />
+            <StyledButton
+              buttonStyle={ButtonStyle.WithoutBackground}
+              $isActive={marginMode === MarginMode.ISOLATED}
+              onClick={() => setMarginMode(MarginMode.ISOLATED)}
+              disabled={!needsMarginMode && marginMode !== MarginMode.ISOLATED}
+            >
+              {stringGetter({
+                key: STRING_KEYS.ISOLATED,
+              })}
+            </StyledButton>
+          </div>
+
+          <Button
+            size={ButtonSize.XSmall}
+            action={ButtonAction.SimpleSecondary}
             buttonStyle={ButtonStyle.WithoutBackground}
-            $isActive={marginMode === MarginMode.CROSS}
-            onClick={() => setMarginMode(MarginMode.CROSS)}
-            disabled={!needsMarginMode && marginMode !== MarginMode.CROSS}
+            slotRight={<Icon iconName={IconName.Caret} size="0.75em" tw="text-color-text-0" />}
+            onClick={openLeverageDialog}
+            tw="h-[37px] w-[66px]"
           >
-            {stringGetter({
-              key: STRING_KEYS.CROSS,
-            })}
-          </StyledButton>
-          <VerticalSeparator />
-          <StyledButton
-            buttonStyle={ButtonStyle.WithoutBackground}
-            $isActive={marginMode === MarginMode.ISOLATED}
-            onClick={() => setMarginMode(MarginMode.ISOLATED)}
-            disabled={!needsMarginMode && marginMode !== MarginMode.ISOLATED}
+            <Output
+              type={OutputType.Multiple}
+              value={effectiveSelectedLeverage}
+              fractionDigits={0}
+              showSign={ShowSign.None}
+              tw="text-color-text-2 font-base-medium"
+            />
+          </Button>
+        </div>
+        <div tw="flex w-full gap-0.25 rounded-[0.5em] bg-[#181819] p-[4px]">
+          <LongButton
+            $isLong={side === OrderSide.BUY}
+            onClick={() => setTradeSide(OrderSide.BUY)}
+            tw="w-full border-0"
+          >
+            {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
+          </LongButton>
+          <ShortButton
+            $isShort={side === OrderSide.SELL}
+            onClick={() => setTradeSide(OrderSide.SELL)}
+            tw="w-full border-0"
           >
-            {stringGetter({
-              key: STRING_KEYS.ISOLATED,
-            })}
-          </StyledButton>
+            {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
+          </ShortButton>
         </div>
-
-        <Button
-          size={ButtonSize.XSmall}
-          action={ButtonAction.SimpleSecondary}
-          buttonStyle={ButtonStyle.WithoutBackground}
-          slotRight={<Icon iconName={IconName.Caret} size="0.75em" tw="text-color-text-0" />}
-          onClick={openLeverageDialog}
+        <MobileDropdownMenu
+          withPortal={false}
+          align="end"
+          items={[
+            {
+              value: TradeFormType.MARKET,
+              active: selectedTradeType === TradeFormType.MARKET,
+              label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
+              onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
+            },
+            {
+              value: TradeFormType.LIMIT,
+              active: selectedTradeType === TradeFormType.LIMIT,
+              label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
+              onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
+            },
+          ]}
         >
-          <Output
-            type={OutputType.Multiple}
-            value={effectiveSelectedLeverage}
-            fractionDigits={0}
-            showSign={ShowSign.None}
-            tw="text-color-text-2 font-base-medium"
+          <DropdownMenuTrigger
+            tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Base}
+          >
+            {selectedTradeType === TradeFormType.MARKET
+              ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
+              : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
+          </DropdownMenuTrigger>
+        </MobileDropdownMenu>
+        <AvailableRow>
+          <AvailableLabel> Available </AvailableLabel>
+          <AvailableValue>
+            {availableBalance.toLocaleString('en-US', {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}{' '}
+            USDC
+          </AvailableValue>
+        </AvailableRow>
+        <$InputsColumn>
+          <TradeFormInputs />
+          <TradeSizeInputs />
+        </$InputsColumn>
+        <ToggleRow>
+          <ToggleLabel>Triggers</ToggleLabel>
+          <Switch
+            name="triggers"
+            checked={triggerOrdersChecked}
+            onCheckedChange={(checked) =>
+              dispatch(checked ? tradeFormActions.showTriggers() : tradeFormActions.hideTriggers())
+            }
+            tw="font-mini-book"
           />
-        </Button>
-      </div>
-      <div tw="flex w-full gap-1 rounded-[0.5em] bg-[#181819] p-[4px]">
-        <LongButton
-          $isLong={side === OrderSide.BUY}
-          onClick={() => setTradeSide(OrderSide.BUY)}
-          tw="w-full border-0"
-        >
-          {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
-        </LongButton>
-        <ShortButton
-          $isShort={side === OrderSide.SELL}
-          onClick={() => setTradeSide(OrderSide.SELL)}
-          tw="w-full border-0"
-        >
-          {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
-        </ShortButton>
-      </div>
-      <MobileDropdownMenu
-        withPortal={false}
-        align="end"
-        items={[
-          {
-            value: TradeFormType.MARKET,
-            active: selectedTradeType === TradeFormType.MARKET,
-            label: stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT }),
-            onSelect: () => onTradeTypeChange(TradeFormType.MARKET),
-          },
-          {
-            value: TradeFormType.LIMIT,
-            active: selectedTradeType === TradeFormType.LIMIT,
-            label: stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT }),
-            onSelect: () => onTradeTypeChange(TradeFormType.LIMIT),
-          },
-        ]}
-      >
-        <DropdownMenuTrigger
-          tw="w-full bg-[var(--simpleUi-dialog-secondaryColor)]"
-          shape={ButtonShape.Pill}
-          size={ButtonSize.Base}
+        </ToggleRow>
+        {triggerOrdersChecked && (
+          <div tw="max-w-[calc(100vw - 4rem)] column gap-0.5">
+            <TradeTriggerOrderInputs
+              stringKeys={{
+                header: STRING_KEYS.TAKE_PROFIT,
+                headerDiff: STRING_KEYS.PROFIT_COLON,
+                price: STRING_KEYS.TP_PRICE,
+                output: STRING_KEYS.GAIN,
+              }}
+              inputState={takeProfitOrder ?? {}}
+              summaryState={takeProfitSummary ?? {}}
+              isStopLoss={false}
+              tickSizeDecimals={tickSizeDecimals}
+            />
+            <TradeTriggerOrderInputs
+              stringKeys={{
+                header: STRING_KEYS.STOP_LOSS,
+                headerDiff: STRING_KEYS.LOSS_COLON,
+                price: STRING_KEYS.SL_PRICE,
+                output: STRING_KEYS.LOSS,
+              }}
+              inputState={stopLossOrder ?? {}}
+              summaryState={stopLossSummary ?? {}}
+              isStopLoss
+              tickSizeDecimals={tickSizeDecimals}
+            />
+          </div>
+        )}
+        <ToggleRow>
+          <ToggleLabel>{stringGetter({ key: STRING_KEYS.REDUCE_ONLY })}</ToggleLabel>
+          <Switch
+            name="reduce-only"
+            checked={!!reduceOnly}
+            onCheckedChange={(checked) => dispatch(tradeFormActions.setReduceOnly(checked))}
+            tw="font-mini-book"
+          />
+        </ToggleRow>
+        <div
+          tw="flexColumn w-full max-w-[calc(100vw-2rem)] gap-1 py-1.25"
+          css={{
+            background:
+              'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
+          }}
         >
-          {selectedTradeType === TradeFormType.MARKET
-            ? stringGetter({ key: STRING_KEYS.MARKET_ORDER_SHORT })
-            : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
-        </DropdownMenuTrigger>
-      </MobileDropdownMenu>
-      <AvailableRow>
-        <AvailableLabel> Available </AvailableLabel>
-        <AvailableValue>
-          {availableBalance.toLocaleString('en-US', {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })}{' '}
-          USDC
-        </AvailableValue>
-      </AvailableRow>
-      <$InputsColumn>
-        <TradeFormInputs />
-        <TradeSizeInputs />
-      </$InputsColumn>
-      <ToggleRow>
-        <ToggleLabel>Triggers</ToggleLabel>
-        <Switch
-          name="triggers"
-          checked={triggerOrdersChecked}
-          onCheckedChange={(checked) =>
-            dispatch(checked ? tradeFormActions.showTriggers() : tradeFormActions.hideTriggers())
-          }
-          tw="font-mini-book"
-        />
-      </ToggleRow>
-      {triggerOrdersChecked && (
-        <div tw="max-w-[calc(100vw - 4rem)] column gap-0.5">
-          <TradeTriggerOrderInputs
-            stringKeys={{
-              header: STRING_KEYS.TAKE_PROFIT,
-              headerDiff: STRING_KEYS.PROFIT_COLON,
-              price: STRING_KEYS.TP_PRICE,
-              output: STRING_KEYS.GAIN,
-            }}
-            inputState={takeProfitOrder ?? {}}
-            summaryState={takeProfitSummary ?? {}}
-            isStopLoss={false}
-            tickSizeDecimals={tickSizeDecimals}
+          <TradeFormMessages
+            isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
+            placeOrderError={placeOrderError}
+            primaryAlert={primaryAlert}
+            shouldPromptUserToPlaceLimitOrder={false}
           />
-          <TradeTriggerOrderInputs
-            stringKeys={{
-              header: STRING_KEYS.STOP_LOSS,
-              headerDiff: STRING_KEYS.LOSS_COLON,
-              price: STRING_KEYS.SL_PRICE,
-              output: STRING_KEYS.LOSS,
+          {/* {receiptArea} */}
+          <$PlaceOrderButtonAndReceipt
+            summary={summary}
+            actionStringKey={shortAlertKey}
+            confirmButtonConfig={{
+              stringKey: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
+              buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
+              buttonAction: orderSideAction as ButtonAction,
             }}
-            inputState={stopLossOrder ?? {}}
-            summaryState={stopLossSummary ?? {}}
-            isStopLoss
-            tickSizeDecimals={tickSizeDecimals}
+            currentStep={currentStep}
+            hasInput={
+              isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder)
+            }
+            hasValidationErrors={hasValidationErrors}
+            onClearInputs={() => dispatch(tradeFormActions.resetPrimaryInputs())}
+            shouldEnableTrade={shouldEnableTrade}
+            showDeposit={false}
+            tradingUnavailable={tradingUnavailable}
           />
         </div>
-      )}
-      <ToggleRow>
-        <ToggleLabel>{stringGetter({ key: STRING_KEYS.REDUCE_ONLY })}</ToggleLabel>
-        <Switch
-          name="reduce-only"
-          checked={!!reduceOnly}
-          onCheckedChange={(checked) => dispatch(tradeFormActions.setReduceOnly(checked))}
-          tw="font-mini-book"
-        />
-      </ToggleRow>
-      <div
-        tw="flexColumn w-full gap-1 py-1.25"
-        css={{
-          background:
-            'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--simpleUi-dialog-backgroundColor))',
-        }}
-      >
-        <TradeFormMessages
-          isErrorShownInOrderStatusToast={isErrorShownInOrderStatusToast}
-          placeOrderError={placeOrderError}
-          primaryAlert={primaryAlert}
-          shouldPromptUserToPlaceLimitOrder={false}
-        />
-        {/* {receiptArea} */}
-        <$PlaceOrderButtonAndReceipt
-          summary={summary}
-          actionStringKey={shortAlertKey}
-          confirmButtonConfig={{
-            stringKey: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
-            buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
-            buttonAction: orderSideAction as ButtonAction,
-          }}
-          currentStep={currentStep}
-          hasInput={
-            isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder)
-          }
-          hasValidationErrors={hasValidationErrors}
-          onClearInputs={() => dispatch(tradeFormActions.resetPrimaryInputs())}
-          shouldEnableTrade={shouldEnableTrade}
-          showDeposit={false}
-          tradingUnavailable={tradingUnavailable}
-        />
-
-        {/* <$StyledWithDetailsReceipt detailItems={items} hideReceipt={!isReceiptOpen}>
-          {placeOrderButton}
-        </$StyledWithDetailsReceipt> */}
       </div>
+
       <MarketsMenuDialog />
     </form>
   );
@@ -384,14 +384,20 @@ const StyledButton = styled(Button)<{ $isActive?: boolean }>`
 
 const LongButton = styled(Button)<{ $isLong?: boolean }>`
   ${({ $isLong }) =>
-    $isLong ? `background-color: var(--color-gradient-positive);` : 'background-color: transparent'}
+    $isLong
+      ? `--button-textColor: var(--color-green); --button-backgroundColor: var(--color-gradient-positive);`
+      : '--button-backgroundColor: transparent'}
+
+  border-radius: 0.375rem;
 `;
 
 const ShortButton = styled(Button)<{ $isShort?: boolean }>`
   ${({ $isShort }) =>
     $isShort
-      ? `background-color: var(--color-gradient-negative);`
-      : 'background-color: transparent'}
+      ? `--button-textColor: var(--color-red); --button-backgroundColor: var(--color-gradient-negative);`
+      : '--button-backgroundColor: transparent'}
+
+  border-radius: 0.375rem;
 `;
 
 const $InputsColumn = styled.div`
diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index 6319ffd783..d378ccc069 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -45,46 +45,6 @@ const TradePage = () => {
 
   const isDisabled = complianceState !== ComplianceStates.FULL_ACCESS;
 
-  const footerContent = isDisabled ? (
-    <Button
-      tw="flex-1 border border-solid border-color-layer-6"
-      shape={ButtonShape.Pill}
-      size={ButtonSize.Large}
-      state={ButtonState.Disabled}
-      action={ButtonAction.SimpleSecondary}
-    >
-      {stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
-    </Button>
-  ) : canAccountTrade ? (
-    <>
-      <Button
-        tw="flex-1 rounded-1 bg-color-negative text-color-layer-0"
-        shape={ButtonShape.Pill}
-        size={ButtonSize.Large}
-        onClick={() => {
-          navigate(`${AppRoute.TradeForm}`);
-          dispatch(tradeFormActions.setSide(OrderSide.SELL));
-        }}
-      >
-        {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
-      </Button>
-
-      <Button
-        tw="flex-1 rounded-1 bg-color-positive text-color-layer-0"
-        shape={ButtonShape.Pill}
-        size={ButtonSize.Large}
-        onClick={() => {
-          navigate(`${AppRoute.TradeForm}`);
-          dispatch(tradeFormActions.setSide(OrderSide.BUY));
-        }}
-      >
-        {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
-      </Button>
-    </>
-  ) : (
-    <OnboardingTriggerButton tw="flex-1" shape={ButtonShape.Pill} size={ButtonSize.Base} />
-  );
-
   return (
     <div tw="flexColumn items-center gap-[0.75em]">
       <TradeHeaderMobile />
@@ -104,12 +64,52 @@ const TradePage = () => {
       </$MobileContent>
 
       <div
-        tw="row fixed bottom-4 left-0 right-0 gap-1.25 px-1.25 py-1.25"
+        tw="row fixed bottom-3 left-0 right-0 gap-1.25 px-1.25 py-1.25"
         css={{
           background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-layer-1))',
         }}
       >
-        {footerContent}
+        {isDisabled ? (
+          <Button
+            tw="flex-1 border border-solid border-color-layer-6"
+            shape={ButtonShape.Pill}
+            size={ButtonSize.Medium}
+            state={ButtonState.Disabled}
+            action={ButtonAction.SimpleSecondary}
+          >
+            {stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
+          </Button>
+        ) : canAccountTrade ? (
+          <>
+            <Button
+              tw="flex-1 rounded-1 bg-color-negative text-color-layer-0"
+              shape={ButtonShape.Pill}
+              size={ButtonSize.Medium}
+              onClick={() => {
+                navigate(`${AppRoute.TradeForm}`);
+                dispatch(tradeFormActions.setIsClosingPosition(false));
+                dispatch(tradeFormActions.setSide(OrderSide.SELL));
+              }}
+            >
+              {stringGetter({ key: STRING_KEYS.SHORT_POSITION_SHORT })}
+            </Button>
+
+            <Button
+              tw="flex-1 rounded-1 bg-color-positive text-color-layer-0"
+              shape={ButtonShape.Pill}
+              size={ButtonSize.Medium}
+              onClick={() => {
+                navigate(`${AppRoute.TradeForm}`);
+                dispatch(tradeFormActions.setIsClosingPosition(false));
+                dispatch(tradeFormActions.setSide(OrderSide.BUY));
+              }}
+            >
+              {stringGetter({ key: STRING_KEYS.LONG_POSITION_SHORT })}
+            </Button>
+          </>
+        ) : (
+          <OnboardingTriggerButton tw="flex-1" shape={ButtonShape.Pill} size={ButtonSize.Base} />
+        )}
       </div>
 
       <UserMenuDialog />
diff --git a/src/pages/trade/mobile-web/TradeFormHeader.tsx b/src/pages/trade/mobile-web/TradeFormHeader.tsx
index 1e43c63918..af803af18c 100644
--- a/src/pages/trade/mobile-web/TradeFormHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeFormHeader.tsx
@@ -23,9 +23,9 @@ export const TradeFormHeaderMobile = ({ launchableMarketId }: { launchableMarket
     : undefined;
 
   const assetPrice = launchableAsset ? (
-    <Output tw="font-medium-bold" type={OutputType.Fiat} value={launchableAsset?.price} />
+    <Output tw="font-base-bold" type={OutputType.Fiat} value={launchableAsset?.price} />
   ) : (
-    <MidMarketPrice tw="font-medium-bold" richColor={false} />
+    <MidMarketPrice tw="font-base-bold" richColor={false} />
   );
 
   return (
@@ -36,7 +36,7 @@ export const TradeFormHeaderMobile = ({ launchableMarketId }: { launchableMarket
         <div tw="flexColumn items-end justify-end gap-0.125">
           {assetPrice}
           <Output
-            tw="font-small-medium"
+            tw="font-mini-medium"
             css={{
               color: MustBigNumber(percentChange24h).isZero()
                 ? undefined
@@ -66,12 +66,14 @@ const $Header = styled.div`
 
   color: var(--color-text-2);
   background-color: var(--color-layer-2);
-  padding-top: 1rem;
+  height: 60px;
+
+  padding-left: 0.4rem;
+  padding-right: 1rem;
 
   border-bottom: 1px solid var(--color-border);
 
   width: 100%;
-  padding-bottom: 1rem;
 `;
 
 const $Right = styled.div`
diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
index 1bff46fdf7..aaceaf1b5e 100644
--- a/src/pages/trade/mobile-web/TradeHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -24,7 +24,7 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
 
   return (
     <$TopHeader>
-      <div tw="flex w-full items-center justify-between gap-1 border border-b border-solid border-color-border pb-1 pl-1 pr-1.5 pt-1">
+      <div tw="flex h-[60px] w-full items-center justify-between gap-1 border border-b border-solid border-color-border px-1">
         {id && <FavoriteButton marketId={id} tw="ml-[-0.5rem]" />}
 
         <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
diff --git a/src/views/charts/TradingView/ResolutionSelector.tsx b/src/views/charts/TradingView/ResolutionSelector.tsx
index afa1730c31..95047d727b 100644
--- a/src/views/charts/TradingView/ResolutionSelector.tsx
+++ b/src/views/charts/TradingView/ResolutionSelector.tsx
@@ -8,6 +8,7 @@ import {
   RESOLUTION_STRING_TO_LABEL,
 } from '@/constants/candles';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { objectKeys } from '@/lib/objectHelpers';
@@ -21,6 +22,7 @@ export const ResolutionSelector = ({
   onResolutionChange: (resolution: ResolutionString) => void;
   currentResolution?: ResolutionString;
 }) => {
+  const { isTablet } = useBreakpoints();
   const stringGetter = useStringGetter();
 
   const getLabel = useCallback(
@@ -42,10 +44,11 @@ export const ResolutionSelector = ({
       {objectKeys(isLaunchable ? LAUNCHABLE_MARKET_RESOLUTION_CONFIGS : RESOLUTION_MAP).map(
         (resolution) => (
           <button
-            tw="size-2.75 max-w-2.75 flex-1 border-b-0 border-l-0 border-r-0 border-t-2 border-solid border-color-accent"
+            tw="w-2.75 max-w-2.75 flex-1 border-b-0 border-l-0 border-r-0 border-t-2 border-solid border-color-accent"
             type="button"
             css={{
               borderColor: currentResolution !== resolution ? 'transparent' : 'var(--color-accent)',
+              height: isTablet ? '2rem' : '2.75rem',
             }}
             key={resolution}
             onClick={() => onResolutionChange(resolution)}

From dcb61cf94f06bd5f05ae3e3d1229bdd320d107e8 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Fri, 23 Jan 2026 11:30:06 -0500
Subject: [PATCH 10/27] fix zindex mobile dropdown

---
 src/components/MobileDropdownMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MobileDropdownMenu.tsx b/src/components/MobileDropdownMenu.tsx
index be6941ffbc..a623a59193 100644
--- a/src/components/MobileDropdownMenu.tsx
+++ b/src/components/MobileDropdownMenu.tsx
@@ -38,7 +38,7 @@ export const MobileDropdownMenu = forwardRefFn(
         align={align}
         side={side}
         sideOffset={sideOffset}
-        tw="z-1 w-fit overflow-hidden rounded-[0.5rem] border border-solid border-color-border bg-color-layer-4"
+        tw="z-20 w-fit overflow-hidden rounded-[0.5rem] border border-solid border-color-border bg-color-layer-4"
       >
         {slotTop && (
           <>

From d7b19958030d86941a01171828eddb746c555827 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Fri, 23 Jan 2026 11:37:39 -0500
Subject: [PATCH 11/27] fix border color market order button

---
 src/components/MobileDropdownMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MobileDropdownMenu.tsx b/src/components/MobileDropdownMenu.tsx
index a623a59193..2c22feaf93 100644
--- a/src/components/MobileDropdownMenu.tsx
+++ b/src/components/MobileDropdownMenu.tsx
@@ -103,6 +103,7 @@ const DropdownMenuButton = styled(Button)`
   align-items: center;
   border-radius: 8px;
   border-width: 1.5px;
+  border-color: var(--color-layer-4);
 
   &[data-state='open'] {
     svg {

From ef5288b1c52f1b0862b766b7d13d1c46e437b5fe Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Fri, 23 Jan 2026 11:45:57 -0500
Subject: [PATCH 12/27] fix tab colors

---
 src/layout/Footer/FooterMobile.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx
index b1c07c0afb..b31679705a 100644
--- a/src/layout/Footer/FooterMobile.tsx
+++ b/src/layout/Footer/FooterMobile.tsx
@@ -62,8 +62,10 @@ const $NavigationMenu = styled(NavigationMenu)`
   --navigationMenu-item-radius: 0;
 
   --navigationMenu-item-checked-backgroundColor: transparent;
-  --navigationMenu-item-highlighted-backgroundColor: transparent;
-  --navigationMenu-item-highlighted-textColor: var(--color-text-2);
+  --navigationMenu-item-highlighted-backgroundColor: var(--color-layer-2);
+  --navigationMenu-tab-item-highlighted-backgroundColor: var(--color-layer-2);
+  --navigationMenu-item-checked-textColor: var(--color-accent);
+  --navigationMenu-item-highlighted-textColor: var(--color-accent);
   --navigationMenu-item-radius: 0px;
   --navigationMenu-item-padding: 0px;
 

From 2bd0c74d83b1d1bbeb62fc40d2b78c8925f4b81d Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Fri, 23 Jan 2026 13:54:42 -0500
Subject: [PATCH 13/27] updates

---
 src/App.tsx                                   |  2 +-
 src/components/Slider.tsx                     | 17 ++-----
 .../NotifcationStack.tsx                      |  4 +-
 src/layout/NotificationsToastArea/index.tsx   |  5 --
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 51 ++++---------------
 .../trade/mobile-web/RegularTradeForm.tsx     | 44 ++++------------
 .../forms/TradeForm/AllocationSlider.tsx      | 43 +++++++---------
 7 files changed, 44 insertions(+), 122 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0cf63f909e..13d038200b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -256,7 +256,7 @@ const Content = () => {
 
         {isTablet ? <FooterMobile /> : <FooterDesktop />}
 
-        <NotificationsToastArea tw="z-[2] [grid-area:Main]" />
+        <NotificationsToastArea tw="z-[2000] [grid-area:Main]" />
 
         <$DialogArea ref={dialogAreaRef}>
           <DialogManager />
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 82b0eea3fa..a478407d88 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -48,35 +48,28 @@ const $Root = styled(Root)`
   --radix-slider-thumb-transform: translateX(-65%) !important;
   --slider-track-background: ;
   --slider-track-backgroundColor: var(--color-layer-4);
-
   position: relative;
-
   display: flex;
   align-items: center;
-
   user-select: none;
-
   height: 100%;
+  touch-action: none;
 `;
 
 const $Track = styled(Track)`
   position: relative;
-
   display: flex;
   flex-grow: 1;
   align-items: center;
-
   height: 0.5rem;
   margin-right: 0.25rem; // make thumb covers the end of the track
-
   cursor: pointer;
   background: var(--slider-track-background);
-
+  touch-action: none;
   &:before {
     content: '';
     width: 100%;
     height: 100%;
-
     background: linear-gradient(
         90deg,
         transparent,
@@ -128,16 +121,14 @@ const $Tick = styled.span<{ $midpoint?: number; $light: boolean; $text?: string
 const $Thumb = styled(Thumb)`
   height: 1.375rem;
   width: 1.375rem;
-
   display: flex;
   justify-content: center;
   align-items: center;
-
   background-color: var(--color-layer-6);
   opacity: 0.8;
-
   border: 1.5px solid var(--color-layer-7);
   border-radius: 50%;
-
   cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
 `;
diff --git a/src/layout/NotificationsToastArea/NotifcationStack.tsx b/src/layout/NotificationsToastArea/NotifcationStack.tsx
index 7f48be0d5c..be78b45a96 100644
--- a/src/layout/NotificationsToastArea/NotifcationStack.tsx
+++ b/src/layout/NotificationsToastArea/NotifcationStack.tsx
@@ -38,12 +38,12 @@ export const NotificationStack = ({ notifications, className }: ElementProps & S
   const [shouldStackNotifications, setshouldStackNotifications] = useState(true);
 
   const { markUnseen, markSeen, onNotificationAction } = useNotifications();
-  const { isMobile } = useBreakpoints();
+  const { isTablet } = useBreakpoints();
   const hasMultipleToasts = notifications.length > 1;
 
   return (
     <StyledToastArea
-      swipeDirection={isMobile ? 'up' : 'right'}
+      swipeDirection={isTablet ? 'up' : 'right'}
       className={className}
       size={notifications.length}
     >
diff --git a/src/layout/NotificationsToastArea/index.tsx b/src/layout/NotificationsToastArea/index.tsx
index 3cd62050dd..4afcac48b6 100644
--- a/src/layout/NotificationsToastArea/index.tsx
+++ b/src/layout/NotificationsToastArea/index.tsx
@@ -13,7 +13,6 @@ import {
 
 import { useNotifications } from '@/hooks/useNotifications';
 
-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { NotificationStack } from './NotifcationStack';
@@ -80,8 +79,4 @@ const StyledToastArea = styled.div`
   mask-image: linear-gradient(to left, transparent, white 0.5rem);
 
   pointer-events: none;
-
-  @media ${breakpoints.mobile} {
-    display: none; // hide notifications on mobile web view
-  }
 `;
diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
index 27d79a0fe3..12da0a3bbf 100644
--- a/src/pages/trade/mobile-web/CloseTradeForm.tsx
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect } from 'react';
 
 import { OrderSide, OrderSizeInputs, TradeFormType } from '@/bonsai/forms/trade/types';
 import { BonsaiHelpers } from '@/bonsai/ontology';
@@ -8,7 +8,6 @@ import styled, { css } from 'styled-components';
 import { ButtonAction, ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
-import { MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
 import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
@@ -51,8 +50,6 @@ const CloseTradeForm = ({ market }: Props) => {
   const isFirstRender = useIsFirstRender();
   const stringGetter = useStringGetter();
 
-  const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>();
-
   const { stepSizeDecimals, tickSizeDecimals, displayableAsset } = orEmptyObj(
     useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
   );
@@ -80,18 +77,9 @@ const CloseTradeForm = ({ market }: Props) => {
   useEffect(() => {
     dispatch(closePositionFormActions.setMarketId(market));
     dispatch(closePositionFormActions.setSizeAvailablePercent('1'));
-  }, [market, currentStep, dispatch]);
-
-  const onLastOrderIndexed = useCallback(() => {
-    // if (!isFirstRender) {
-    //   dispatch(closePositionFormActions.setOrderType(TradeFormType.MARKET));
-    //   dispatch(closePositionFormActions.reset());
-    //   dispatch(closePositionFormActions.setSizeAvailablePercent('1'));
-    //   if (currentStep === MobilePlaceOrderSteps.PlacingOrder) {
-    //     setCurrentStep?.(MobilePlaceOrderSteps.Confirmation);
-    //   }
-    // }
-  }, [currentStep, dispatch, isFirstRender, setCurrentStep]);
+  }, [market, dispatch]);
+
+  const onLastOrderIndexed = useCallback(() => {}, []);
 
   const {
     placeOrderError: closePositionError,
@@ -142,31 +130,11 @@ const CloseTradeForm = ({ market }: Props) => {
 
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
-
-    switch (currentStep) {
-      case MobilePlaceOrderSteps.EditOrder: {
-        setCurrentStep?.(MobilePlaceOrderSteps.PreviewOrder);
-        break;
-      }
-      case MobilePlaceOrderSteps.PlacingOrder:
-      case MobilePlaceOrderSteps.PlaceOrderFailed:
-      case MobilePlaceOrderSteps.Confirmation: {
-        break;
-      }
-      case MobilePlaceOrderSteps.PreviewOrder:
-      default: {
-        placeOrder({
-          onFailure: () => {
-            setCurrentStep?.(MobilePlaceOrderSteps.PlaceOrderFailed);
-          },
-          onPlaceOrder: () => {
-            onClearInputs();
-          },
-        });
-        setCurrentStep?.(MobilePlaceOrderSteps.PlacingOrder);
-        break;
-      }
-    }
+    placeOrder({
+      onPlaceOrder: () => {
+        onClearInputs();
+      },
+    });
   };
 
   return (
@@ -279,7 +247,6 @@ const CloseTradeForm = ({ market }: Props) => {
           <$PlaceOrderButtonAndReceipt
             summary={summary}
             actionStringKey={shortAlertKey}
-            currentStep={currentStep}
             hasInput={!!amountInput}
             hasValidationErrors={hasValidationErrors}
             onClearInputs={onClearInputs}
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index 76d863798a..e14b7aaf7f 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useState } from 'react';
+import { FormEvent, useCallback } from 'react';
 
 import {
   ExecutionType,
@@ -14,7 +14,7 @@ import styled from 'styled-components';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonStyle } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { MobilePlaceOrderSteps, ORDER_TYPE_STRINGS } from '@/constants/trade';
+import { ORDER_TYPE_STRINGS } from '@/constants/trade';
 
 import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
 import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
@@ -52,8 +52,6 @@ const RegularTradeForm = () => {
   const dispatch = useAppDispatch();
   const stringGetter = useStringGetter();
 
-  const [currentStep, setCurrentStep] = useState<MobilePlaceOrderSteps>();
-
   const rawInput = useAppSelector(getTradeFormRawState);
   const tradeValues = useAppSelector(getTradeFormValues);
   const fullFormSummary = useAppSelector(getTradeFormSummary);
@@ -85,11 +83,7 @@ const RegularTradeForm = () => {
     summary.accountDetailsBefore?.account?.freeCollateral ?? BigNumber(0)
   ).toNumber();
 
-  const onLastOrderIndexed = useCallback(() => {
-    if (currentStep === MobilePlaceOrderSteps.PlacingOrder) {
-      setCurrentStep(MobilePlaceOrderSteps.Confirmation);
-    }
-  }, [currentStep, setCurrentStep]);
+  const onLastOrderIndexed = useCallback(() => {}, []);
 
   const {
     placeOrderError,
@@ -152,28 +146,11 @@ const RegularTradeForm = () => {
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
-
-    switch (currentStep) {
-      case MobilePlaceOrderSteps.EditOrder: {
-        setCurrentStep?.(MobilePlaceOrderSteps.PreviewOrder);
-        break;
-      }
-      case MobilePlaceOrderSteps.PlacingOrder:
-      case MobilePlaceOrderSteps.PlaceOrderFailed:
-      case MobilePlaceOrderSteps.Confirmation: {
-        break;
-      }
-      case MobilePlaceOrderSteps.PreviewOrder:
-      default: {
-        placeOrder({
-          onPlaceOrder: () => {
-            dispatch(tradeFormActions.resetPrimaryInputs());
-          },
-        });
-        setCurrentStep?.(MobilePlaceOrderSteps.PlacingOrder);
-        break;
-      }
-    }
+    placeOrder({
+      onPlaceOrder: () => {
+        dispatch(tradeFormActions.resetPrimaryInputs());
+      },
+    });
   };
 
   const orderSideAction = {
@@ -355,10 +332,7 @@ const RegularTradeForm = () => {
               buttonTextStringKey: STRING_KEYS.PLACE_ORDER,
               buttonAction: orderSideAction as ButtonAction,
             }}
-            currentStep={currentStep}
-            hasInput={
-              isInputFilled && (!currentStep || currentStep === MobilePlaceOrderSteps.EditOrder)
-            }
+            hasInput={isInputFilled}
             hasValidationErrors={hasValidationErrors}
             onClearInputs={() => dispatch(tradeFormActions.resetPrimaryInputs())}
             shouldEnableTrade={shouldEnableTrade}
diff --git a/src/views/forms/TradeForm/AllocationSlider.tsx b/src/views/forms/TradeForm/AllocationSlider.tsx
index b5b071e615..803ae7a9cb 100644
--- a/src/views/forms/TradeForm/AllocationSlider.tsx
+++ b/src/views/forms/TradeForm/AllocationSlider.tsx
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { useEffect, useState } from 'react';
 
-import { useQuickUpdatingState } from '@/hooks/useQuickUpdatingState';
+import styled from 'styled-components';
 
 import breakpoints from '@/styles/breakpoints';
 import { formMixins } from '@/styles/formMixins';
@@ -8,7 +8,6 @@ import { formMixins } from '@/styles/formMixins';
 import { Input, InputType } from '@/components/Input';
 import { Slider } from '@/components/Slider';
 
-import { mapIfPresent } from '@/lib/do';
 import { MustBigNumber } from '@/lib/numbers';
 
 export const AllocationSlider = ({
@@ -18,27 +17,21 @@ export const AllocationSlider = ({
   allocationPercentInput: string | undefined;
   setAllocationInput: (val: string | undefined) => void;
 }) => {
-  const {
-    value: allocation,
-    setValue: setAllocation,
-    commitValue: commitAllocation,
-  } = useQuickUpdatingState<string | undefined>({
-    setValueSlow: setAllocationInput,
-    slowValue: allocationPercentInput,
-    debounceMs: 100,
-  });
+  const [localValue, setLocalValue] = useState<string | undefined>(allocationPercentInput);
 
-  const onSliderDrag = ([newValue]: number[]) => {
-    const newValueString = mapIfPresent(newValue, (lev) => MustBigNumber(lev).toFixed(0));
-    setAllocation(newValueString ?? '');
-  };
+  useEffect(() => {
+    setLocalValue(allocationPercentInput);
+  }, [allocationPercentInput]);
 
-  const commitValue = (newValue: string | undefined) => {
-    commitAllocation(newValue);
+  const onSliderDrag = ([newValue]: number[]) => {
+    const newValueString = MustBigNumber(newValue).toFixed(0);
+    setLocalValue(newValueString);
   };
 
   const onValueCommit = ([newValue]: number[]) => {
-    commitValue(MustBigNumber(newValue).toFixed(0));
+    const finalValue = MustBigNumber(newValue).toFixed(0);
+    setLocalValue(finalValue);
+    setAllocationInput(finalValue);
   };
 
   return (
@@ -48,20 +41,21 @@ export const AllocationSlider = ({
           label="Allocation"
           min={0}
           max={100}
-          step={0.1}
-          value={MustBigNumber(allocation).toNumber()}
+          step={1}
+          value={MustBigNumber(localValue).toNumber()}
           onSliderDrag={onSliderDrag}
           onValueCommit={onValueCommit}
         />
       </div>
       <$InnerInputContainer>
         <Input
-          placeholder={`${MustBigNumber(allocation).toFixed(0)}%`}
+          placeholder={`${MustBigNumber(localValue).toFixed(0)}%`}
           type={InputType.Percent}
-          value={allocation}
+          value={localValue}
           max={100}
           onInput={({ formattedValue }: { formattedValue: string }) => {
-            commitValue(formattedValue);
+            setLocalValue(formattedValue);
+            setAllocationInput(formattedValue);
           }}
         />
       </$InnerInputContainer>
@@ -100,6 +94,7 @@ const $InnerInputContainer = styled.div`
 
 const $AllocationSlider = styled(Slider)`
   height: 1.375rem;
+
   --slider-track-background: linear-gradient(
     90deg,
     var(--color-layer-7) 0%,

From 3a7003de82c13e30a6a1f0fb13f7630e51bce3fb Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 09:35:29 -0500
Subject: [PATCH 14/27] fixes

---
 src/pages/trade/mobile-web/Trade.tsx       | 4 ++--
 src/views/dialogs/MobileUserMenuDialog.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/trade/mobile-web/Trade.tsx b/src/pages/trade/mobile-web/Trade.tsx
index d378ccc069..06d7f007a4 100644
--- a/src/pages/trade/mobile-web/Trade.tsx
+++ b/src/pages/trade/mobile-web/Trade.tsx
@@ -7,9 +7,9 @@ import { ComplianceStates } from '@/constants/compliance';
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 
+import { useComplianceState } from '@/hooks/useComplianceState';
 import { useCurrentMarketId } from '@/hooks/useCurrentMarketId';
 import { usePageTitlePriceUpdates } from '@/hooks/usePageTitlePriceUpdates';
-import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -32,7 +32,7 @@ import { TradeHeaderMobile } from './TradeHeader';
 const TradePage = () => {
   const dispatch = useAppDispatch();
   const { isViewingUnlaunchedMarket } = useCurrentMarketId();
-  const { complianceState } = usePerpetualsComplianceState();
+  const { complianceState } = useComplianceState();
   const canAccountTrade = useAppSelector(calculateCanAccountTrade);
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
diff --git a/src/views/dialogs/MobileUserMenuDialog.tsx b/src/views/dialogs/MobileUserMenuDialog.tsx
index ea97b5a373..c245d7144a 100644
--- a/src/views/dialogs/MobileUserMenuDialog.tsx
+++ b/src/views/dialogs/MobileUserMenuDialog.tsx
@@ -13,7 +13,7 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 
 import { useAccounts } from '@/hooks/useAccounts';
-import { usePerpetualsComplianceState } from '@/hooks/usePerpetualsComplianceState';
+import { useComplianceState } from '@/hooks/useComplianceState';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Button } from '@/components/Button';
@@ -39,7 +39,7 @@ const UserMenuContent = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const onboardingState = useAppSelector(getOnboardingState);
-  const { complianceState } = usePerpetualsComplianceState();
+  const { complianceState } = useComplianceState();
   const canAccountTrade = useAppSelector(calculateCanAccountTrade);
   const isTurnkeyConnected = useAppSelector(selectIsTurnkeyConnected);
   const { equity, freeCollateral } = orEmptyObj(

From 64ccd91298d9ed38db0c5d28e2782a5b3b94716e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 09:39:07 -0500
Subject: [PATCH 15/27] revert tradingview comment

---
 src/hooks/tradingView/useTradingView.ts | 60 ++++++++++++-------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/hooks/tradingView/useTradingView.ts b/src/hooks/tradingView/useTradingView.ts
index a870e921dc..675401efd2 100644
--- a/src/hooks/tradingView/useTradingView.ts
+++ b/src/hooks/tradingView/useTradingView.ts
@@ -11,7 +11,7 @@ import {
 
 import { DEFAULT_RESOLUTION } from '@/constants/candles';
 import { TOGGLE_ACTIVE_CLASS_NAME } from '@/constants/charts';
-import { SUPPORTED_LOCALE_MAP } from '@/constants/localization';
+import { STRING_KEYS, SUPPORTED_LOCALE_MAP } from '@/constants/localization';
 import type { TvWidget } from '@/constants/tvchart';
 
 import { store } from '@/state/_store';
@@ -140,35 +140,35 @@ export const useTradingView = ({
         // Initialize additional right-click-menu options
         tvChartWidget!.onContextMenu(tradingViewLimitOrder);
 
-        // tvChartWidget!.headerReady().then(() => {
-        //   // Order Lines
-        //   initializeToggle({
-        //     toggleRef: orderLineToggleRef,
-        //     widget: tvChartWidget!,
-        //     isOn: orderLinesToggleOn,
-        //     setToggleOn: setOrderLinesToggleOn,
-        //     label: stringGetter({
-        //       key: STRING_KEYS.ORDER_LINES,
-        //     }),
-        //     tooltip: stringGetter({
-        //       key: STRING_KEYS.ORDER_LINES_TOOLTIP,
-        //     }),
-        //   });
-
-        //   // Buy/Sell Marks
-        //   initializeToggle({
-        //     toggleRef: buySellMarksToggleRef,
-        //     widget: tvChartWidget!,
-        //     isOn: buySellMarksToggleOn,
-        //     setToggleOn: setBuySellMarksToggleOn,
-        //     label: stringGetter({
-        //       key: STRING_KEYS.BUYS_SELLS_TOGGLE,
-        //     }),
-        //     tooltip: stringGetter({
-        //       key: STRING_KEYS.BUYS_SELLS_TOGGLE_TOOLTIP,
-        //     }),
-        //   });
-        // });
+        tvChartWidget!.headerReady().then(() => {
+          // Order Lines
+          initializeToggle({
+            toggleRef: orderLineToggleRef,
+            widget: tvChartWidget!,
+            isOn: orderLinesToggleOn,
+            setToggleOn: setOrderLinesToggleOn,
+            label: stringGetter({
+              key: STRING_KEYS.ORDER_LINES,
+            }),
+            tooltip: stringGetter({
+              key: STRING_KEYS.ORDER_LINES_TOOLTIP,
+            }),
+          });
+
+          // Buy/Sell Marks
+          initializeToggle({
+            toggleRef: buySellMarksToggleRef,
+            widget: tvChartWidget!,
+            isOn: buySellMarksToggleOn,
+            setToggleOn: setBuySellMarksToggleOn,
+            label: stringGetter({
+              key: STRING_KEYS.BUYS_SELLS_TOGGLE,
+            }),
+            tooltip: stringGetter({
+              key: STRING_KEYS.BUYS_SELLS_TOGGLE_TOOLTIP,
+            }),
+          });
+        });
 
         tvChartWidget!.subscribe('onAutoSaveNeeded', () =>
           tvChartWidget!.save((chartConfig: object) => {

From a66d875e78d55c0298ad050b07ba5f491ae3622e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 10:08:08 -0500
Subject: [PATCH 16/27] updates

---
 src/App.tsx                          | 15 +++++++++++----
 src/hooks/useMobileWebEnabled.ts     | 12 ++++++++++++
 src/lib/testFlags.ts                 |  4 ++++
 src/pages/trade/HorizontalPanel.tsx  |  5 ++++-
 src/pages/trade/LaunchableMarket.tsx | 22 +++++++++++++---------
 src/pages/trade/Trade.tsx            | 24 ++++++++++++++----------
 6 files changed, 58 insertions(+), 24 deletions(-)
 create mode 100644 src/hooks/useMobileWebEnabled.ts

diff --git a/src/App.tsx b/src/App.tsx
index dd1d5e34be..d25d901b4f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,6 +54,7 @@ import { useCommandMenu } from './hooks/useCommandMenu';
 import { useComplianceState } from './hooks/useComplianceState';
 import { useInitializePage } from './hooks/useInitializePage';
 import { useLocalStorage } from './hooks/useLocalStorage';
+import { useMobileWebEnabled } from './hooks/useMobileWebEnabled';
 import { useReferralCode } from './hooks/useReferralCode';
 import { useShouldShowFooter } from './hooks/useShouldShowFooter';
 import { useSimpleUiEnabled } from './hooks/useSimpleUiEnabled';
@@ -115,6 +116,7 @@ const Content = () => {
   const isShowingFooter = useShouldShowFooter();
   const abDefaultToMarkets = useCustomFlagValue(CustomFlags.abDefaultToMarkets);
   const isSimpleUi = useSimpleUiEnabled();
+  const isMobileWebEnabled = useMobileWebEnabled();
   const { showComplianceBanner } = useComplianceState();
   const isSimpleUiUserMenuOpen = useAppSelector(getIsUserMenuOpen);
 
@@ -132,7 +134,9 @@ const Content = () => {
 
   const { dialogAreaRef } = useDialogArea() ?? {};
 
-  if (isSimpleUi) {
+  const showMobileWeb = isMobileWebEnabled && isTablet;
+
+  if (isSimpleUi && !showMobileWeb) {
     const matchMarkets = matchPath(AppRoute.Markets, location.pathname);
     const backgroundColor =
       matchMarkets && isSimpleUiUserMenuOpen ? 'var(--color-layer-1)' : 'transparent';
@@ -207,10 +211,13 @@ const Content = () => {
               <Route path={`${AppRoute.Referrals}/*`} element={<AffiliatesPage />} />
 
               <Route path={AppRoute.Trade}>
-                <Route path=":market" element={isTablet ? <MobileWebTradePage /> : <TradePage />} />
+                <Route
+                  path=":market"
+                  element={showMobileWeb ? <MobileWebTradePage /> : <TradePage />}
+                />
                 <Route
                   path={AppRoute.Trade}
-                  element={isTablet ? <MobileWebTradePage /> : <TradePage />}
+                  element={showMobileWeb ? <MobileWebTradePage /> : <TradePage />}
                 />
               </Route>
 
@@ -254,7 +261,7 @@ const Content = () => {
           </Suspense>
         </$Main>
 
-        {isTablet ? <FooterMobile /> : <FooterDesktop />}
+        {showMobileWeb ? <FooterMobile /> : <FooterDesktop />}
 
         <NotificationsToastArea tw="z-[2000] [grid-area:Main]" />
 
diff --git a/src/hooks/useMobileWebEnabled.ts b/src/hooks/useMobileWebEnabled.ts
new file mode 100644
index 0000000000..63aaadb52f
--- /dev/null
+++ b/src/hooks/useMobileWebEnabled.ts
@@ -0,0 +1,12 @@
+import { StatsigFlags } from '@/constants/statsig';
+
+import { testFlags } from '@/lib/testFlags';
+
+import { useStatsigGateValue } from './useStatsig';
+
+export const useMobileWebEnabled = () => {
+  const forceMobileWeb = testFlags.enableMobileWeb;
+  const mobileWebbFF = useStatsigGateValue(StatsigFlags.ffMobileWeb);
+
+  return forceMobileWeb || mobileWebbFF;
+};
diff --git a/src/lib/testFlags.ts b/src/lib/testFlags.ts
index 19198fb8e8..6857e3ef87 100644
--- a/src/lib/testFlags.ts
+++ b/src/lib/testFlags.ts
@@ -71,6 +71,10 @@ class TestFlags {
   get spot() {
     return this.booleanFlag(this.queryParams.spot);
   }
+
+  get enableMobileWeb() {
+    return this.booleanFlag(this.queryParams.enable_mobile_web);
+  }
 }
 
 export const testFlags = new TestFlags();
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index 1c3f1c7694..ffb6a80f7e 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -65,9 +65,10 @@ enum InfoSection {
 type ElementProps = {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean) => void;
+  handleStartResize?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
-export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
+export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }: ElementProps) => {
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -461,6 +462,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
 
   return (
     <>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <$DragHandle onMouseDown={handleStartResize} />
       {isTablet && (
         <div tw="mx-1.5 mb-1 mt-0.5">
           <div
diff --git a/src/pages/trade/LaunchableMarket.tsx b/src/pages/trade/LaunchableMarket.tsx
index 08114f1979..b49b8ef93e 100644
--- a/src/pages/trade/LaunchableMarket.tsx
+++ b/src/pages/trade/LaunchableMarket.tsx
@@ -51,14 +51,14 @@ const LaunchableMarket = () => {
     },
     [dispatch]
   );
-  const { panelHeight: horizontalPanelHeight, isDragging } = useResizablePanel(
-    horizontalPanelHeightPxBase,
-    setPanelHeight,
-    {
-      min: HORIZONTAL_PANEL_MIN_HEIGHT,
-      max: HORIZONTAL_PANEL_MAX_HEIGHT,
-    }
-  );
+  const {
+    panelHeight: horizontalPanelHeight,
+    isDragging,
+    handleMouseDown,
+  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
+    min: HORIZONTAL_PANEL_MIN_HEIGHT,
+    max: HORIZONTAL_PANEL_MAX_HEIGHT,
+  });
   useEffect(() => {
     if (marketId) {
       track(
@@ -109,7 +109,11 @@ const LaunchableMarket = () => {
       </$GridSection>
 
       <$GridSection gridArea="Horizontal">
-        <HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
+        <HorizontalPanel
+          isOpen={isHorizontalPanelOpen}
+          setIsOpen={setIsHorizontalPanelOpen}
+          handleStartResize={handleMouseDown}
+        />
       </$GridSection>
     </$TradeLayout>
   );
diff --git a/src/pages/trade/Trade.tsx b/src/pages/trade/Trade.tsx
index f4340ca146..10f51bae58 100644
--- a/src/pages/trade/Trade.tsx
+++ b/src/pages/trade/Trade.tsx
@@ -51,14 +51,14 @@ const TradePage = () => {
     },
     [dispatch]
   );
-  const { panelHeight: horizontalPanelHeight, isDragging } = useResizablePanel(
-    horizontalPanelHeightPxBase,
-    setPanelHeight,
-    {
-      min: HORIZONTAL_PANEL_MIN_HEIGHT,
-      max: HORIZONTAL_PANEL_MAX_HEIGHT,
-    }
-  );
+  const {
+    panelHeight: horizontalPanelHeight,
+    isDragging,
+    handleMouseDown,
+  } = useResizablePanel(horizontalPanelHeightPxBase, setPanelHeight, {
+    min: HORIZONTAL_PANEL_MIN_HEIGHT,
+    max: HORIZONTAL_PANEL_MAX_HEIGHT,
+  });
   const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
 
   usePageTitlePriceUpdates();
@@ -73,7 +73,7 @@ const TradePage = () => {
 
       <div>
         <DetachedSection>
-          <HorizontalPanel />
+          <HorizontalPanel handleStartResize={handleMouseDown} />
         </DetachedSection>
 
         <DetachedSection>
@@ -109,7 +109,11 @@ const TradePage = () => {
       </$GridSection>
 
       <$GridSection gridArea="Horizontal">
-        <HorizontalPanel isOpen={isHorizontalPanelOpen} setIsOpen={setIsHorizontalPanelOpen} />
+        <HorizontalPanel
+          isOpen={isHorizontalPanelOpen}
+          setIsOpen={setIsHorizontalPanelOpen}
+          handleStartResize={handleMouseDown}
+        />
       </$GridSection>
     </$TradeLayout>
   );

From 31eb08f262e1bd1c16ca4414be3f3b9f3c624ecc Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 10:39:09 -0500
Subject: [PATCH 17/27] revert simpleui change

---
 src/hooks/useSimpleUiEnabled.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useSimpleUiEnabled.ts b/src/hooks/useSimpleUiEnabled.ts
index 04a4ad0239..378c25fdd6 100644
--- a/src/hooks/useSimpleUiEnabled.ts
+++ b/src/hooks/useSimpleUiEnabled.ts
@@ -1,12 +1,11 @@
-// import { useBreakpoints } from '@/hooks/useBreakpoints';
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 
-// import { testFlags } from '@/lib/testFlags';
+import { testFlags } from '@/lib/testFlags';
 
 export const useSimpleUiEnabled = () => {
-  return false;
-  // const { isTablet } = useBreakpoints();
-  // const forcedSimpleUiValue = testFlags.simpleUi;
-  // const isSimpleUi = isTablet ? (forcedSimpleUiValue ?? true) : false;
+  const { isTablet } = useBreakpoints();
+  const forcedSimpleUiValue = testFlags.simpleUi;
+  const isSimpleUi = isTablet ? (forcedSimpleUiValue ?? true) : false;
 
-  // return isSimpleUi;
+  return isSimpleUi;
 };

From 0efe77d65f8818577f14827014140d8fdb1748fc Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 10:50:48 -0500
Subject: [PATCH 18/27] review updates

---
 src/views/charts/TradingView/ResolutionSelector.tsx | 5 +++++
 src/views/tables/MobilePositionsTable.tsx           | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/views/charts/TradingView/ResolutionSelector.tsx b/src/views/charts/TradingView/ResolutionSelector.tsx
index 95047d727b..5cd22ef3b3 100644
--- a/src/views/charts/TradingView/ResolutionSelector.tsx
+++ b/src/views/charts/TradingView/ResolutionSelector.tsx
@@ -49,6 +49,11 @@ export const ResolutionSelector = ({
             css={{
               borderColor: currentResolution !== resolution ? 'transparent' : 'var(--color-accent)',
               height: isTablet ? '2rem' : '2.75rem',
+              ...(currentResolution !== resolution
+                ? {
+                    color: 'var(--color-layer-7)',
+                  }
+                : {}),
             }}
             key={resolution}
             onClick={() => onResolutionChange(resolution)}
diff --git a/src/views/tables/MobilePositionsTable.tsx b/src/views/tables/MobilePositionsTable.tsx
index 8f82c799db..33e4d0d643 100644
--- a/src/views/tables/MobilePositionsTable.tsx
+++ b/src/views/tables/MobilePositionsTable.tsx
@@ -183,7 +183,7 @@ export const MobilePositionsTable = forwardRef(
                         <div tw="font-semibold">
                           {position.marginMode === MarginMode.CROSS ? 'Cross' : 'Isolated'}
                         </div>
-                        <div tw="rounded-0.5 border-solid border-color-layer-3 px-0.5 py-0.25 text-mini">
+                        <div tw="rounded-0.5 border-solid border-color-layer-3 px-0.25 py-[3px] text-mini">
                           {Math.round(position.effectiveSelectedLeverage.toNumber())}x
                         </div>
                       </div>
@@ -285,10 +285,10 @@ export const MobilePositionsTable = forwardRef(
                     </div>
                     <div tw="flex flex-[0.6] flex-col gap-0.125">
                       <Button
-                        tw="border-none bg-color-border-red px-1 text-red"
+                        tw="h-[34px] rounded-[8px] border-none bg-color-border-red px-1 text-mini text-red"
                         onClick={() => onCloseButtonToggle(position.market)}
                       >
-                        <Icon iconName={IconName.Close} tw="size-0.25" />
+                        <Icon iconName={IconName.Close} size="12px" />
                         Close
                       </Button>
                     </div>

From 78d28137d030dcec80dbd02045816cce1948850c Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 10:57:20 -0500
Subject: [PATCH 19/27] remove filter on nav menu item

---
 src/layout/Footer/FooterMobile.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layout/Footer/FooterMobile.tsx b/src/layout/Footer/FooterMobile.tsx
index b31679705a..b5c41996bc 100644
--- a/src/layout/Footer/FooterMobile.tsx
+++ b/src/layout/Footer/FooterMobile.tsx
@@ -68,6 +68,7 @@ const $NavigationMenu = styled(NavigationMenu)`
   --navigationMenu-item-highlighted-textColor: var(--color-accent);
   --navigationMenu-item-radius: 0px;
   --navigationMenu-item-padding: 0px;
+  --hover-filter-base: none;
 
   font: var(--font-tiny-book);
 

From 42e2155609d556dcbde471b8649dd92c486f1ef6 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 11:00:15 -0500
Subject: [PATCH 20/27] fix long short text color when not selected

---
 src/pages/trade/mobile-web/RegularTradeForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index e14b7aaf7f..886cac2370 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -360,7 +360,7 @@ const LongButton = styled(Button)<{ $isLong?: boolean }>`
   ${({ $isLong }) =>
     $isLong
       ? `--button-textColor: var(--color-green); --button-backgroundColor: var(--color-gradient-positive);`
-      : '--button-backgroundColor: transparent'}
+      : '--button-textColor: var(--color-layer-7); --button-backgroundColor: transparent'}
 
   border-radius: 0.375rem;
 `;
@@ -369,7 +369,7 @@ const ShortButton = styled(Button)<{ $isShort?: boolean }>`
   ${({ $isShort }) =>
     $isShort
       ? `--button-textColor: var(--color-red); --button-backgroundColor: var(--color-gradient-negative);`
-      : '--button-backgroundColor: transparent'}
+      : '--button-textColor: var(--color-layer-7); --button-backgroundColor: transparent'}
 
   border-radius: 0.375rem;
 `;

From 8757f9d931759861a5c55a271f35f3abcb3f9ba7 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 27 Jan 2026 15:30:58 -0500
Subject: [PATCH 21/27] fix portfolio

---
 src/pages/portfolio/Portfolio.tsx | 175 +++++++++++++++---------------
 1 file changed, 89 insertions(+), 86 deletions(-)

diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
index 71d372fc94..713212108d 100644
--- a/src/pages/portfolio/Portfolio.tsx
+++ b/src/pages/portfolio/Portfolio.tsx
@@ -16,6 +16,7 @@ import { useAccountBalance } from '@/hooks/useAccountBalance';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useComplianceState } from '@/hooks/useComplianceState';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useMobileWebEnabled } from '@/hooks/useMobileWebEnabled';
 import { useSimpleUiEnabled } from '@/hooks/useSimpleUiEnabled';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -66,6 +67,7 @@ const PortfolioPage = () => {
   const { complianceState } = useComplianceState();
 
   const initialPageSize = 20;
+  const isMobileWebEnabled = useMobileWebEnabled();
   const isSimpleUi = useSimpleUiEnabled();
 
   const onboardingState = useAppSelector(getOnboardingState);
@@ -84,94 +86,95 @@ const PortfolioPage = () => {
 
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
 
-  const routesComponent = isSimpleUi ? (
-    <Suspense fallback={<LoadingSpace id="portfolio" />}>
-      <Routes>
-        <Route path={PortfolioRoute.History} element={<SimpleUiHistory />}>
-          <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
-          <Route path={HistoryRoute.Trades} element={<TradeHistoryList />} />
-          <Route path={HistoryRoute.Transfers} element={<AccountHistoryList />} />
-          <Route path={HistoryRoute.VaultTransfers} element={<VaultTransferList />} />
-          <Route path={HistoryRoute.Payments} element={<FundingHistoryList />} />
-        </Route>
-        <Route
-          path="*"
-          element={<Navigate to={`${PortfolioRoute.History}/${HistoryRoute.Trades}`} replace />}
-        />
-      </Routes>
-    </Suspense>
-  ) : (
-    <Suspense fallback={<LoadingSpace id="portfolio" />}>
-      <Routes>
-        <Route path={PortfolioRoute.Overview} element={<Overview />} />
-        <Route path={PortfolioRoute.Positions} element={<Positions />} />
-        <Route path={PortfolioRoute.Orders} element={<Orders />} />
-        <Route path={PortfolioRoute.Fees} element={<Fees />} />
-        <Route path={PortfolioRoute.EquityTiers} element={<EquityTiers />} />
-        <Route path={PortfolioRoute.History} element={<History />}>
-          <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
-          <Route
-            path={HistoryRoute.Trades}
-            element={
-              <FillsTable
-                initialPageSize={initialPageSize}
-                columnKeys={
-                  isTablet
-                    ? [
-                        FillsTableColumnKey.Time,
-                        FillsTableColumnKey.TypeAmount,
-                        FillsTableColumnKey.PriceFee,
-                      ]
-                    : [
-                        FillsTableColumnKey.Market,
-                        FillsTableColumnKey.Time,
-                        FillsTableColumnKey.Type,
-                        FillsTableColumnKey.Side,
-                        FillsTableColumnKey.AmountTag,
-                        FillsTableColumnKey.Price,
-                        FillsTableColumnKey.Total,
-                        FillsTableColumnKey.Fee,
-                        FillsTableColumnKey.ClosedPnl,
-                        FillsTableColumnKey.Liquidity,
-                      ]
-                }
-                withOuterBorder={isNotTablet}
-              />
-            }
-          />
-          <Route
-            path={HistoryRoute.Transfers}
-            element={
-              <TransferHistoryTable
-                initialPageSize={initialPageSize}
-                withOuterBorder={isNotTablet}
-              />
-            }
-          />
-          <Route
-            path={HistoryRoute.VaultTransfers}
-            element={
-              <VaultTransactionsTable
-                withOuterBorders
-                withTxHashLink
-                emptyString={stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_BALANCE })}
-              />
-            }
-          />
+  const routesComponent =
+    isSimpleUi && !isMobileWebEnabled ? (
+      <Suspense fallback={<LoadingSpace id="portfolio" />}>
+        <Routes>
+          <Route path={PortfolioRoute.History} element={<SimpleUiHistory />}>
+            <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
+            <Route path={HistoryRoute.Trades} element={<TradeHistoryList />} />
+            <Route path={HistoryRoute.Transfers} element={<AccountHistoryList />} />
+            <Route path={HistoryRoute.VaultTransfers} element={<VaultTransferList />} />
+            <Route path={HistoryRoute.Payments} element={<FundingHistoryList />} />
+          </Route>
           <Route
-            path={HistoryRoute.Payments}
-            element={
-              <FundingPaymentsTable
-                initialPageSize={initialPageSize}
-                withOuterBorder={isNotTablet}
-              />
-            }
+            path="*"
+            element={<Navigate to={`${PortfolioRoute.History}/${HistoryRoute.Trades}`} replace />}
           />
-        </Route>
-        <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
-      </Routes>
-    </Suspense>
-  );
+        </Routes>
+      </Suspense>
+    ) : (
+      <Suspense fallback={<LoadingSpace id="portfolio" />}>
+        <Routes>
+          <Route path={PortfolioRoute.Overview} element={<Overview />} />
+          <Route path={PortfolioRoute.Positions} element={<Positions />} />
+          <Route path={PortfolioRoute.Orders} element={<Orders />} />
+          <Route path={PortfolioRoute.Fees} element={<Fees />} />
+          <Route path={PortfolioRoute.EquityTiers} element={<EquityTiers />} />
+          <Route path={PortfolioRoute.History} element={<History />}>
+            <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
+            <Route
+              path={HistoryRoute.Trades}
+              element={
+                <FillsTable
+                  initialPageSize={initialPageSize}
+                  columnKeys={
+                    isTablet
+                      ? [
+                          FillsTableColumnKey.Time,
+                          FillsTableColumnKey.TypeAmount,
+                          FillsTableColumnKey.PriceFee,
+                        ]
+                      : [
+                          FillsTableColumnKey.Market,
+                          FillsTableColumnKey.Time,
+                          FillsTableColumnKey.Type,
+                          FillsTableColumnKey.Side,
+                          FillsTableColumnKey.AmountTag,
+                          FillsTableColumnKey.Price,
+                          FillsTableColumnKey.Total,
+                          FillsTableColumnKey.Fee,
+                          FillsTableColumnKey.ClosedPnl,
+                          FillsTableColumnKey.Liquidity,
+                        ]
+                  }
+                  withOuterBorder={isNotTablet}
+                />
+              }
+            />
+            <Route
+              path={HistoryRoute.Transfers}
+              element={
+                <TransferHistoryTable
+                  initialPageSize={initialPageSize}
+                  withOuterBorder={isNotTablet}
+                />
+              }
+            />
+            <Route
+              path={HistoryRoute.VaultTransfers}
+              element={
+                <VaultTransactionsTable
+                  withOuterBorders
+                  withTxHashLink
+                  emptyString={stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_BALANCE })}
+                />
+              }
+            />
+            <Route
+              path={HistoryRoute.Payments}
+              element={
+                <FundingPaymentsTable
+                  initialPageSize={initialPageSize}
+                  withOuterBorder={isNotTablet}
+                />
+              }
+            />
+          </Route>
+          <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
+        </Routes>
+      </Suspense>
+    );
 
   if (isSimpleUi) {
     return routesComponent;

From 6823512b3bef9e3a874c0a73177ef5c2d8fa81f0 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 28 Jan 2026 11:16:04 -0500
Subject: [PATCH 22/27] comment

---
 src/hooks/useMobileWebEnabled.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useMobileWebEnabled.ts b/src/hooks/useMobileWebEnabled.ts
index 63aaadb52f..6e9f8e1349 100644
--- a/src/hooks/useMobileWebEnabled.ts
+++ b/src/hooks/useMobileWebEnabled.ts
@@ -4,6 +4,7 @@ import { testFlags } from '@/lib/testFlags';
 
 import { useStatsigGateValue } from './useStatsig';
 
+// Flag for determining whether we show the new mobile web or not. Disables simpleui if enabled
 export const useMobileWebEnabled = () => {
   const forceMobileWeb = testFlags.enableMobileWeb;
   const mobileWebbFF = useStatsigGateValue(StatsigFlags.ffMobileWeb);

From 558d0bac91aa40fe837f7ff49c7de454082e97df Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 28 Jan 2026 11:27:30 -0500
Subject: [PATCH 23/27] remove unused props

---
 src/views/tables/MobilePositionsTable.tsx | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/views/tables/MobilePositionsTable.tsx b/src/views/tables/MobilePositionsTable.tsx
index 33e4d0d643..2971cfcf34 100644
--- a/src/views/tables/MobilePositionsTable.tsx
+++ b/src/views/tables/MobilePositionsTable.tsx
@@ -8,7 +8,6 @@ import {
   SubaccountPosition,
 } from '@/bonsai/types/summaryTypes';
 import { Trigger } from '@radix-ui/react-collapsible';
-import type { ColumnSize } from '@react-types/table';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -25,7 +24,6 @@ import { Button } from '@/components/Button';
 import { Collapsible } from '@/components/Collapsible';
 import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType, ShowSign } from '@/components/Output';
-import { PageSize } from '@/components/Table/TablePaginationRow';
 import { marginModeMatchesFilter, MarketTypeFilter } from '@/pages/trade/types';
 
 import { calculateIsAccountViewOnly } from '@/state/accountCalculators';
@@ -67,30 +65,16 @@ type PositionTableRow = {
 } & SubaccountPosition;
 
 type ElementProps = {
-  columnKeys: PositionsTableColumnKey[];
-  columnWidths?: Partial<Record<PositionsTableColumnKey, ColumnSize>>;
   currentRoute?: string;
   currentMarket?: string;
   marketTypeFilter?: MarketTypeFilter;
-  showClosePositionAction: boolean;
-  initialPageSize?: PageSize;
   onNavigate?: () => void;
   navigateToOrders: (market: string) => void;
 };
 
-type StyleProps = {
-  withOuterBorder?: boolean;
-};
-
 export const MobilePositionsTable = forwardRef(
   (
-    {
-      currentRoute,
-      currentMarket,
-      marketTypeFilter,
-      onNavigate,
-      navigateToOrders,
-    }: ElementProps & StyleProps,
+    { currentRoute, currentMarket, marketTypeFilter, onNavigate, navigateToOrders }: ElementProps,
     _ref
   ) => {
     const dispatch = useAppDispatch();

From ec4cda27a24be1e7068ac009de513eaa1c56e607 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 28 Jan 2026 11:32:50 -0500
Subject: [PATCH 24/27] lint fies

---
 src/App.tsx                                   | 1 -
 src/pages/trade/mobile-web/CloseTradeForm.tsx | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d25d901b4f..70010a72ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -80,7 +80,6 @@ import breakpoints from './styles/breakpoints';
 const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
 const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
 const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
-const ProfilePage = lazy(() => import('@/pages/Profile'));
 const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
 const TradePage = lazy(() => import('@/pages/trade/Trade'));
 const SpotPage = lazy(() => import('@/pages/spot/Spot'));
diff --git a/src/pages/trade/mobile-web/CloseTradeForm.tsx b/src/pages/trade/mobile-web/CloseTradeForm.tsx
index 12da0a3bbf..01493fbd6f 100644
--- a/src/pages/trade/mobile-web/CloseTradeForm.tsx
+++ b/src/pages/trade/mobile-web/CloseTradeForm.tsx
@@ -12,7 +12,6 @@ import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
 import { useTradeErrors } from '@/hooks/TradingForm/useTradeErrors';
 import { TradeFormSource, useTradeForm } from '@/hooks/TradingForm/useTradeForm';
 import { useClosePositionFormInputs } from '@/hooks/useClosePositionFormInputs';
-import { useIsFirstRender } from '@/hooks/useIsFirstRender';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { formMixins } from '@/styles/formMixins';
@@ -47,7 +46,6 @@ type Props = {
 
 const CloseTradeForm = ({ market }: Props) => {
   const dispatch = useAppDispatch();
-  const isFirstRender = useIsFirstRender();
   const stringGetter = useStringGetter();
 
   const { stepSizeDecimals, tickSizeDecimals, displayableAsset } = orEmptyObj(

From e3f3c38aff88d0c4da638f8f3be7db134922342e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Wed, 28 Jan 2026 11:40:40 -0500
Subject: [PATCH 25/27] fix bbuild

---
 src/pages/trade/HorizontalPanel.tsx | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index ffb6a80f7e..49b2b7c00d 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -159,30 +159,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
       tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
 
       content: isTablet ? (
-        <MobilePositionsTable
-          marketTypeFilter={viewIsolated}
-          columnKeys={[
-            PositionsTableColumnKey.Market,
-            PositionsTableColumnKey.Leverage,
-            PositionsTableColumnKey.Type,
-            PositionsTableColumnKey.Size,
-            PositionsTableColumnKey.Value,
-            PositionsTableColumnKey.PnL,
-            PositionsTableColumnKey.Margin,
-            PositionsTableColumnKey.AverageOpen,
-            PositionsTableColumnKey.Oracle,
-            PositionsTableColumnKey.Liquidation,
-            PositionsTableColumnKey.NetFunding,
-            shouldRenderTriggers && PositionsTableColumnKey.Triggers,
-            shouldRenderActions && PositionsTableColumnKey.Actions,
-          ].filter(isTruthy)}
-          columnWidths={{
-            [PositionsTableColumnKey.Actions]: 80,
-          }}
-          showClosePositionAction={shouldRenderActions}
-          initialPageSize={initialPageSize}
-          navigateToOrders={onViewOrders}
-        />
+        <MobilePositionsTable marketTypeFilter={viewIsolated} navigateToOrders={onViewOrders} />
       ) : (
         <PositionsTable
           currentMarket={showCurrentMarket ? currentMarketId : undefined}

From 5f51df49f28103ead07849ea82be52d8a9017a5e Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 10 Feb 2026 15:42:25 -0500
Subject: [PATCH 26/27] updates

---
 src/App.tsx                                   |   1 +
 src/pages/portfolio/Portfolio.tsx             |  14 +-
 src/pages/portfolio/PortfolioNavMobile.tsx    | 157 ++++++----
 src/pages/trade/HorizontalPanel.tsx           |   3 +-
 .../trade/mobile-web/RegularTradeForm.tsx     |  70 +++--
 src/pages/trade/mobile-web/TradeHeader.tsx    |  14 +
 src/views/tables/MobilePositionsTable.tsx     | 274 +++++++++---------
 7 files changed, 308 insertions(+), 225 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 70010a72ca..f9f72aeb3b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -240,6 +240,7 @@ const Content = () => {
                 <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
               </Route>
 
+              <Route path={AppRoute.Alerts} element={<AlertsPage />} />
               <Route path={AppRoute.Vault}>
                 <Route path={AppRoute.Vault} element={<VaultPage />} />
               </Route>
diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
index 713212108d..61d568f1ee 100644
--- a/src/pages/portfolio/Portfolio.tsx
+++ b/src/pages/portfolio/Portfolio.tsx
@@ -32,6 +32,7 @@ import { TradeHistoryList } from '@/views/Lists/Trade/TradeHistoryList';
 import { AccountHistoryList } from '@/views/Lists/Transfers/AccountHistoryList';
 import { FundingHistoryList } from '@/views/Lists/Transfers/FundingHistoryList';
 import { VaultTransferList } from '@/views/Lists/Transfers/VaultTransferList';
+import { UserMenuDialog } from '@/views/dialogs/MobileUserMenuDialog';
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
 
@@ -176,15 +177,18 @@ const PortfolioPage = () => {
       </Suspense>
     );
 
-  if (isSimpleUi) {
+  if (isSimpleUi && !isMobileWebEnabled) {
     return routesComponent;
   }
 
   return isTablet ? (
-    <$PortfolioMobile>
-      <PortfolioNavMobile />
-      <$MobileContent>{routesComponent}</$MobileContent>
-    </$PortfolioMobile>
+    <>
+      <$PortfolioMobile>
+        <PortfolioNavMobile />
+        <$MobileContent>{routesComponent}</$MobileContent>
+      </$PortfolioMobile>
+      <UserMenuDialog />
+    </>
   ) : (
     <WithSidebar
       sidebar={
diff --git a/src/pages/portfolio/PortfolioNavMobile.tsx b/src/pages/portfolio/PortfolioNavMobile.tsx
index c340046928..2f4998eaa9 100644
--- a/src/pages/portfolio/PortfolioNavMobile.tsx
+++ b/src/pages/portfolio/PortfolioNavMobile.tsx
@@ -1,81 +1,107 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { OnboardingState } from '@/constants/account';
+import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { AppRoute, HistoryRoute, PortfolioRoute } from '@/constants/routes';
+import { AppRoute } from '@/constants/routes';
 
+import { useAccounts } from '@/hooks/useAccounts';
+import { useNotifications } from '@/hooks/useNotifications';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
+import { LogoShortIcon } from '@/icons/logo-short';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { DropdownHeaderMenu } from '@/components/DropdownHeaderMenu';
+import { Button } from '@/components/Button';
+import { DropdownMenu } from '@/components/DropdownMenu';
+import { Icon, IconName } from '@/components/Icon';
+import { UnseenIndicator } from '@/views/Lists/Alerts/UnseenIndicator';
+
+import { getOnboardingState } from '@/state/accountSelectors';
+import { useAppSelector } from '@/state/appTypes';
+import { openDialog, setIsUserMenuOpen } from '@/state/dialogs';
+
+import { truncateAddress } from '@/lib/wallet';
 
 export const PortfolioNavMobile = () => {
   const stringGetter = useStringGetter();
-  const { pathname } = useLocation();
+  const dispatch = useDispatch();
   const navigate = useNavigate();
+  const onboardingState = useAppSelector(getOnboardingState);
+  const { hasUnreadNotifications } = useNotifications();
+  const { dydxAddress } = useAccounts();
 
-  const portfolioRouteItems = [
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.Overview}`,
-      label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
-      description: stringGetter({ key: STRING_KEYS.OVERVIEW_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.Positions}`,
-      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
-      description: stringGetter({ key: STRING_KEYS.POSITIONS_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.Orders}`,
-      label: stringGetter({ key: STRING_KEYS.ORDERS }),
-      description: stringGetter({ key: STRING_KEYS.ORDERS_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.Fees}`,
-      label: stringGetter({ key: STRING_KEYS.FEES }),
-      description: stringGetter({ key: STRING_KEYS.FEE_STRUCTURE }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.EquityTiers}`,
-      label: stringGetter({ key: STRING_KEYS.EQUITY_TIERS }),
-      description: stringGetter({ key: STRING_KEYS.EQUITY_TIERS_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Trades}`,
-      label: stringGetter({ key: STRING_KEYS.TRADES }),
-      description: stringGetter({ key: STRING_KEYS.TRADES_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Transfers}`,
-      label: stringGetter({ key: STRING_KEYS.TRANSFERS }),
-      description: stringGetter({ key: STRING_KEYS.TRANSFERS_DESCRIPTION }),
-    },
-    {
-      value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.VaultTransfers}`,
-      label: stringGetter({ key: STRING_KEYS.VAULT_TRANSFERS }),
-      description: stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS_DESCRIPTION }),
-    },
-  ];
-
-  const routeMap = Object.fromEntries(
-    portfolioRouteItems.map(({ value, label }) => [value, { value, label }])
-  );
-
-  const currentRoute = routeMap[pathname];
+  const openUserMenu = () => {
+    dispatch(setIsUserMenuOpen(true));
+  };
 
   return (
     <$MobilePortfolioHeader>
-      <DropdownHeaderMenu
-        key="portfolioRoute"
-        items={portfolioRouteItems.filter(({ value }) => value !== currentRoute?.value)}
-        onValueChange={navigate}
-      >
-        {currentRoute?.label}
-      </DropdownHeaderMenu>
+      <$LogoLink to="/">
+        <LogoShortIcon />
+      </$LogoLink>
+
+      <div tw="flex items-center gap-0.5">
+        {onboardingState === OnboardingState.AccountConnected && (
+          <Button
+            tw="relative size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
+            shape={ButtonShape.Circle}
+            size={ButtonSize.XSmall}
+            onClick={() => {
+              navigate(AppRoute.Alerts);
+            }}
+          >
+            <Icon iconName={IconName.BellStroked} />
+            {hasUnreadNotifications && (
+              <UnseenIndicator tw="absolute right-[-2px] top-0 size-0.875 min-h-0.875 min-w-0.875 border-2 border-solid border-[color:var(--color-layer-3)]" />
+            )}
+          </Button>
+        )}
+
+        <DropdownMenu
+          items={[
+            {
+              label: (
+                <div tw="flex w-9 items-center justify-between gap-0.25">
+                  <p>{truncateAddress(dydxAddress)}</p>
+                  <Icon iconName={IconName.Copy} />
+                </div>
+              ),
+              value: 'copy',
+              onSelect: () => navigator.clipboard.writeText(dydxAddress ?? ''),
+            },
+            {
+              label: (
+                <div tw="flex w-9 items-center justify-between gap-0.25 text-color-negative">
+                  <p>{stringGetter({ key: STRING_KEYS.SIGN_OUT })}</p>
+                  <Icon iconName={IconName.Close} />
+                </div>
+              ),
+              value: 'sign-out',
+              onSelect: () => dispatch(openDialog(DialogTypes.DisconnectWallet())),
+            },
+          ]}
+        >
+          <Icon iconName={IconName.Wallet3} />
+          {truncateAddress(dydxAddress)}
+        </DropdownMenu>
+
+        <Button
+          tw="size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
+          shape={ButtonShape.Circle}
+          size={ButtonSize.XSmall}
+          onClick={openUserMenu}
+        >
+          <Icon iconName={IconName.Menu} />
+        </Button>
+      </div>
     </$MobilePortfolioHeader>
   );
 };
+
 const $MobilePortfolioHeader = styled.div`
   ${layoutMixins.stickyHeader}
   ${layoutMixins.withOuterBorder}
@@ -84,4 +110,17 @@ const $MobilePortfolioHeader = styled.div`
   padding: 1rem;
   background-color: var(--color-layer-2);
   z-index: 2;
+
+  justify-content: space-between;
+`;
+
+const $LogoLink = styled(Link)`
+  display: flex;
+  align-self: stretch;
+
+  > svg {
+    margin: auto;
+    width: 1.6rem;
+    height: 1.6rem;
+  }
 `;
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index 49b2b7c00d..ad27d7d52d 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -409,7 +409,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
 
   const tabItems = useMemo(
     () => [
-      detailsTabItem,
+      ...(isTablet ? [detailsTabItem] : []),
       positionTabItem,
       ordersTabItem,
       fillsTabItem,
@@ -423,6 +423,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
       ordersTabItem,
       orderHistoryTabItem,
       paymentsTabItem,
+      isTablet,
     ]
   );
 
diff --git a/src/pages/trade/mobile-web/RegularTradeForm.tsx b/src/pages/trade/mobile-web/RegularTradeForm.tsx
index 886cac2370..d1e600f99e 100644
--- a/src/pages/trade/mobile-web/RegularTradeForm.tsx
+++ b/src/pages/trade/mobile-web/RegularTradeForm.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/bonsai/forms/trade/types';
 import { BonsaiHelpers } from '@/bonsai/ontology';
 import BigNumber from 'bignumber.js';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { ButtonAction, ButtonShape, ButtonSize, ButtonStyle } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
@@ -35,6 +35,7 @@ import { TradeFormInputs } from '@/views/forms/TradeForm/TradeFormInputs';
 import { TradeSizeInputs } from '@/views/forms/TradeForm/TradeSizeInputs';
 import { TradeTriggerOrderInputs } from '@/views/forms/TradeForm/TradeTriggerInput';
 
+import { getCurrentMarketPositionData } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
 import { tradeFormActions } from '@/state/tradeForm';
@@ -56,12 +57,14 @@ const RegularTradeForm = () => {
   const tradeValues = useAppSelector(getTradeFormValues);
   const fullFormSummary = useAppSelector(getTradeFormSummary);
   const { summary } = fullFormSummary;
-  const { ticker, tickSizeDecimals } = orEmptyObj(
+  const { ticker, tickSizeDecimals, displayableAsset } = orEmptyObj(
     useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo)
   );
   const effectiveSelectedLeverage = useAppSelector(
     BonsaiHelpers.currentMarket.effectiveSelectedLeverage
   );
+  const { signedSize: positionSize } = orEmptyObj(useAppSelector(getCurrentMarketPositionData));
+
   const { stopLossOrder: stopLossSummary, takeProfitOrder: takeProfitSummary } = orEmptyObj(
     summary.triggersSummary
   );
@@ -248,16 +251,32 @@ const RegularTradeForm = () => {
               : stringGetter({ key: STRING_KEYS.LIMIT_ORDER_SHORT })}
           </DropdownMenuTrigger>
         </MobileDropdownMenu>
-        <AvailableRow>
-          <AvailableLabel> Available </AvailableLabel>
-          <AvailableValue>
-            {availableBalance.toLocaleString('en-US', {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}{' '}
-            USDC
-          </AvailableValue>
-        </AvailableRow>
+        <div tw="flex w-full flex-col gap-0.25">
+          {positionSize &&
+            !positionSize.eq(0) &&
+            ((positionSize.gt(0) && side === OrderSide.SELL) ||
+              (positionSize.lt(0) && side === OrderSide.BUY)) && (
+              <div tw="flex w-full items-center justify-between">
+                <p tw="text-small text-color-text-0">Current Position</p>
+                <$PositionSize
+                  tw="text-small"
+                  isLong={positionSize?.isGreaterThanOrEqualTo(0) ?? false}
+                >
+                  {Math.abs(positionSize?.toNumber() ?? 0)} {displayableAsset}
+                </$PositionSize>
+              </div>
+            )}
+          <AvailableRow>
+            <p tw="text-small text-color-text-0">Available</p>
+            <p tw="text-small text-color-text-0">
+              {availableBalance.toLocaleString('en-US', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })}{' '}
+              USDC
+            </p>
+          </AvailableRow>
+        </div>
         <$InputsColumn>
           <TradeFormInputs />
           <TradeSizeInputs />
@@ -393,22 +412,6 @@ const AvailableRow = styled.div`
 
   width: 100%;
 `;
-const AvailableLabel = styled.span`
-  color: #6b7280;
-
-  font-size: 15 px;
-`;
-const AvailableValue = styled.div`
-  display: flex;
-
-  align-items: center;
-
-  gap: 8 px;
-
-  color: #6b7280;
-
-  font-size: 15 px;
-`;
 
 const ToggleRow = styled.div`
   display: flex;
@@ -432,3 +435,14 @@ const ToggleLabel = styled.span`
 const $PlaceOrderButtonAndReceipt = styled(PlaceOrderButtonAndReceipt)`
   --withReceipt-backgroundColor: transparent;
 `;
+
+const $PositionSize = styled.div<{ isLong: boolean }>`
+  ${({ isLong }) =>
+    isLong
+      ? css`
+          color: var(--color-positive) !important;
+        `
+      : css`
+          color: var(--color-negative) !important;
+        `}
+`;
diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
index aaceaf1b5e..54d14efbf5 100644
--- a/src/pages/trade/mobile-web/TradeHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -1,7 +1,9 @@
 import { BonsaiHelpers } from '@/bonsai/ontology';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
+import { AppRoute } from '@/constants/routes';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -16,6 +18,8 @@ import { setIsUserMenuOpen } from '@/state/dialogs';
 
 export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
   const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
+
+  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const openUserMenu = () => {
@@ -29,6 +33,16 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
 
         <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
 
+        <Button
+          tw="relative size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
+          shape={ButtonShape.Circle}
+          size={ButtonSize.XSmall}
+          onClick={() => {
+            navigate(AppRoute.Alerts);
+          }}
+        >
+          <Icon iconName={IconName.BellStroked} />
+        </Button>
         <Button
           tw="size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
           shape={ButtonShape.Circle}
diff --git a/src/views/tables/MobilePositionsTable.tsx b/src/views/tables/MobilePositionsTable.tsx
index 2971cfcf34..25b9b71045 100644
--- a/src/views/tables/MobilePositionsTable.tsx
+++ b/src/views/tables/MobilePositionsTable.tsx
@@ -11,6 +11,7 @@ import { Trigger } from '@radix-ui/react-collapsible';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign, TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
 import { EMPTY_ARR } from '@/constants/objects';
 import { AppRoute } from '@/constants/routes';
@@ -18,6 +19,7 @@ import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
 
 import { useEnvFeatures } from '@/hooks/useEnvFeatures';
 import { useAppSelectorWithArgs } from '@/hooks/useParameterizedSelector';
+import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
@@ -77,6 +79,7 @@ export const MobilePositionsTable = forwardRef(
     { currentRoute, currentMarket, marketTypeFilter, onNavigate, navigateToOrders }: ElementProps,
     _ref
   ) => {
+    const stringGetter = useStringGetter();
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
     const { isSlTpLimitOrdersEnabled } = useEnvFeatures();
@@ -141,147 +144,154 @@ export const MobilePositionsTable = forwardRef(
 
     return (
       <div tw="w-full">
-        {positionsData.map((position) => {
-          const isLong = position.side === IndexerPositionSide.LONG;
-          return (
-            <div key={position.market} tw="w-full">
-              <Collapsible
-                slotTrigger={
-                  <div tw="flex flex-1 items-center justify-between px-1.5 pt-1 text-small">
-                    <div
-                      tw="flex flex-1 flex-col gap-0.25"
-                      onClick={() => navigateToMarket(position.market)}
-                    >
-                      <div tw="flex flex-1 items-center gap-0.25">
-                        <AssetIcon
-                          logoUrl={position.marketSummary?.logo}
-                          symbol={position.marketSummary?.assetId}
-                          tw="inlineRow min-w-[unset] [--asset-icon-size:1rem]"
-                        />
-                        <div>{position.marketSummary?.displayableAsset}</div>
-                        <div style={{ color: isLong ? '#0DB37B' : '#FF5C5C' }}>
-                          {isLong ? 'Long' : 'Short'}
+        {positionsData.length === 0 && (
+          <div tw="flex w-full flex-col items-center pt-3">
+            <Icon iconName={IconName.Positions} tw="text-[3em]" />
+            <h4>{stringGetter({ key: STRING_KEYS.POSITIONS_EMPTY_STATE })}</h4>
+          </div>
+        )}
+        {positionsData.length > 0 &&
+          positionsData.map((position) => {
+            const isLong = position.side === IndexerPositionSide.LONG;
+            return (
+              <div key={position.market} tw="w-full">
+                <Collapsible
+                  slotTrigger={
+                    <div tw="flex flex-1 items-center justify-between px-1.5 pt-1 text-small">
+                      <div
+                        tw="flex flex-1 flex-col gap-0.25"
+                        onClick={() => navigateToMarket(position.market)}
+                      >
+                        <div tw="flex flex-1 items-center gap-0.25">
+                          <AssetIcon
+                            logoUrl={position.marketSummary?.logo}
+                            symbol={position.marketSummary?.assetId}
+                            tw="inlineRow min-w-[unset] [--asset-icon-size:1rem]"
+                          />
+                          <div>{position.marketSummary?.displayableAsset}</div>
+                          <div style={{ color: isLong ? '#0DB37B' : '#FF5C5C' }}>
+                            {isLong ? 'Long' : 'Short'}
+                          </div>
                         </div>
-                      </div>
-                      <div tw="flex items-center gap-0.25 text-color-text-0">
-                        <div tw="font-semibold">
-                          {position.marginMode === MarginMode.CROSS ? 'Cross' : 'Isolated'}
+                        <div tw="flex items-center gap-0.25 text-color-text-0">
+                          <div tw="font-semibold">
+                            {position.marginMode === MarginMode.CROSS ? 'Cross' : 'Isolated'}
+                          </div>
+                          <div tw="rounded-0.5 border-solid border-color-layer-3 px-0.25 py-[3px] text-mini">
+                            {Math.round(position.effectiveSelectedLeverage.toNumber())}x
+                          </div>
                         </div>
-                        <div tw="rounded-0.5 border-solid border-color-layer-3 px-0.25 py-[3px] text-mini">
-                          {Math.round(position.effectiveSelectedLeverage.toNumber())}x
+                      </div>
+                      <div tw="flex flex-[1.1] flex-col gap-0.25">
+                        <div>
+                          {position.unsignedSize.toNumber()}{' '}
+                          {position.marketSummary?.displayableAsset}
                         </div>
+                        <Output
+                          withSubscript
+                          type={OutputType.Fiat}
+                          value={position.unsignedSize.toNumber() * (position.oraclePrice ?? 0)}
+                          fractionDigits={position.tickSizeDecimals}
+                          tw="text-color-text-0"
+                        />
                       </div>
-                    </div>
-                    <div tw="flex flex-[1.1] flex-col gap-0.25">
-                      <div>
-                        {position.unsignedSize.toNumber()}{' '}
-                        {position.marketSummary?.displayableAsset}
+                      <div tw="flex flex-[0.6] flex-col gap-0.25">
+                        <$OutputSigned
+                          sign={getNumberSign(position.updatedUnrealizedPnl)}
+                          type={OutputType.Fiat}
+                          value={position.updatedUnrealizedPnl}
+                          showSign={ShowSign.Negative}
+                        />
+                        <$OutputSigned
+                          sign={getNumberSign(position.updatedUnrealizedPnlPercent)}
+                          type={OutputType.Percent}
+                          value={position.updatedUnrealizedPnlPercent}
+                          showSign={ShowSign.Negative}
+                          fractionDigits={0}
+                          withParentheses
+                        />
                       </div>
-                      <Output
-                        withSubscript
-                        type={OutputType.Fiat}
-                        value={position.unsignedSize.toNumber() * (position.oraclePrice ?? 0)}
-                        fractionDigits={position.tickSizeDecimals}
-                        tw="text-color-text-0"
-                      />
-                    </div>
-                    <div tw="flex flex-[0.6] flex-col gap-0.25">
-                      <$OutputSigned
-                        sign={getNumberSign(position.updatedUnrealizedPnl)}
-                        type={OutputType.Fiat}
-                        value={position.updatedUnrealizedPnl}
-                        showSign={ShowSign.Negative}
-                      />
-                      <$OutputSigned
-                        sign={getNumberSign(position.updatedUnrealizedPnlPercent)}
-                        type={OutputType.Percent}
-                        value={position.updatedUnrealizedPnlPercent}
-                        showSign={ShowSign.Negative}
-                        fractionDigits={0}
-                        withParentheses
-                      />
-                    </div>
-                  </div>
-                }
-                label={
-                  <$Trigger>
-                    <$TriggerIcon>
-                      <Icon iconName={IconName.Caret} />
-                    </$TriggerIcon>
-                  </$Trigger>
-                }
-              >
-                <div tw="flex flex-col gap-1 pl-1.5 pr-3">
-                  <div tw="flex justify-between">
-                    <div tw="flex flex-1 flex-col gap-0.125">
-                      <span tw="text-small text-color-text-0">Entry Price</span>
-                      <Output
-                        withSubscript
-                        type={OutputType.Fiat}
-                        value={position.entryPrice}
-                        fractionDigits={position.tickSizeDecimals}
-                      />
                     </div>
-                    <div tw="flex flex-[1.1] flex-col gap-0.125">
-                      <span tw="text-small text-color-text-0">Mark Price</span>
-                      <Output
-                        withSubscript
-                        type={OutputType.Fiat}
-                        value={position.oraclePrice}
-                        fractionDigits={position.tickSizeDecimals}
-                      />
-                    </div>
-                    <div tw="flex flex-[0.6] flex-col gap-0.125">
-                      <span tw="text-small text-color-text-0">Liq. Price</span>
-                      <Output
-                        withSubscript
-                        type={OutputType.Fiat}
-                        value={position.liquidationPrice}
-                        fractionDigits={position.tickSizeDecimals}
-                      />
-                    </div>
-                  </div>
-                  <div tw="flex justify-between">
-                    <div tw="flex flex-1 flex-col gap-0.125">
-                      <span tw="text-small text-color-text-0">Funding</span>
-                      <$OutputSigned
-                        sign={getNumberSign(position.netFunding)}
-                        type={OutputType.Fiat}
-                        value={position.netFunding}
-                        showSign={ShowSign.Negative}
-                      />
-                    </div>
-                    <div tw="flex flex-[1.1] flex-col gap-0.125">
-                      <$TriggersContainer tw="">TP/SL</$TriggersContainer>
-                      <PositionsTriggersCell
-                        marketId={position.market}
-                        positionUniqueId={position.uniqueId}
-                        assetId={position.assetId}
-                        tickSizeDecimals={position.tickSizeDecimals}
-                        liquidationPrice={position.liquidationPrice}
-                        stopLossOrders={position.stopLossOrders}
-                        takeProfitOrders={position.takeProfitOrders}
-                        positionSide={position.side}
-                        positionSize={position.signedSize}
-                        isDisabled={isAccountViewOnly}
-                        onViewOrdersClick={navigateToOrders}
-                      />
+                  }
+                  label={
+                    <$Trigger>
+                      <$TriggerIcon>
+                        <Icon iconName={IconName.Caret} />
+                      </$TriggerIcon>
+                    </$Trigger>
+                  }
+                >
+                  <div tw="flex flex-col gap-1 pl-1.5 pr-3">
+                    <div tw="flex justify-between">
+                      <div tw="flex flex-1 flex-col gap-0.125">
+                        <span tw="text-small text-color-text-0">Entry Price</span>
+                        <Output
+                          withSubscript
+                          type={OutputType.Fiat}
+                          value={position.entryPrice}
+                          fractionDigits={position.tickSizeDecimals}
+                        />
+                      </div>
+                      <div tw="flex flex-[1.1] flex-col gap-0.125">
+                        <span tw="text-small text-color-text-0">Mark Price</span>
+                        <Output
+                          withSubscript
+                          type={OutputType.Fiat}
+                          value={position.oraclePrice}
+                          fractionDigits={position.tickSizeDecimals}
+                        />
+                      </div>
+                      <div tw="flex flex-[0.6] flex-col gap-0.125">
+                        <span tw="text-small text-color-text-0">Liq. Price</span>
+                        <Output
+                          withSubscript
+                          type={OutputType.Fiat}
+                          value={position.liquidationPrice}
+                          fractionDigits={position.tickSizeDecimals}
+                        />
+                      </div>
                     </div>
-                    <div tw="flex flex-[0.6] flex-col gap-0.125">
-                      <Button
-                        tw="h-[34px] rounded-[8px] border-none bg-color-border-red px-1 text-mini text-red"
-                        onClick={() => onCloseButtonToggle(position.market)}
-                      >
-                        <Icon iconName={IconName.Close} size="12px" />
-                        Close
-                      </Button>
+                    <div tw="flex justify-between">
+                      <div tw="flex flex-1 flex-col gap-0.125">
+                        <span tw="text-small text-color-text-0">Funding</span>
+                        <$OutputSigned
+                          sign={getNumberSign(position.netFunding)}
+                          type={OutputType.Fiat}
+                          value={position.netFunding}
+                          showSign={ShowSign.Negative}
+                        />
+                      </div>
+                      <div tw="flex flex-[1.1] flex-col gap-0.125">
+                        <$TriggersContainer tw="">TP/SL</$TriggersContainer>
+                        <PositionsTriggersCell
+                          marketId={position.market}
+                          positionUniqueId={position.uniqueId}
+                          assetId={position.assetId}
+                          tickSizeDecimals={position.tickSizeDecimals}
+                          liquidationPrice={position.liquidationPrice}
+                          stopLossOrders={position.stopLossOrders}
+                          takeProfitOrders={position.takeProfitOrders}
+                          positionSide={position.side}
+                          positionSize={position.signedSize}
+                          isDisabled={isAccountViewOnly}
+                          onViewOrdersClick={navigateToOrders}
+                        />
+                      </div>
+                      <div tw="flex flex-[0.6] flex-col gap-0.125">
+                        <Button
+                          tw="h-[34px] rounded-[8px] border-none bg-color-border-red px-1 text-mini text-red"
+                          onClick={() => onCloseButtonToggle(position.market)}
+                        >
+                          <Icon iconName={IconName.Close} size="12px" />
+                          Close
+                        </Button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Collapsible>
-            </div>
-          );
-        })}
+                </Collapsible>
+              </div>
+            );
+          })}
       </div>
     );
   }

From 2bb8b34c5e57ee5a2258498f5563d734c55677c0 Mon Sep 17 00:00:00 2001
From: KevDydx <kevin@dydx.exchange>
Date: Tue, 10 Feb 2026 15:46:23 -0500
Subject: [PATCH 27/27] fix

---
 src/pages/trade/mobile-web/TradeHeader.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/pages/trade/mobile-web/TradeHeader.tsx b/src/pages/trade/mobile-web/TradeHeader.tsx
index 54d14efbf5..aaceaf1b5e 100644
--- a/src/pages/trade/mobile-web/TradeHeader.tsx
+++ b/src/pages/trade/mobile-web/TradeHeader.tsx
@@ -1,9 +1,7 @@
 import { BonsaiHelpers } from '@/bonsai/ontology';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
-import { AppRoute } from '@/constants/routes';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -18,8 +16,6 @@ import { setIsUserMenuOpen } from '@/state/dialogs';
 
 export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?: string }) => {
   const id = useAppSelector(BonsaiHelpers.currentMarket.assetId);
-
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const openUserMenu = () => {
@@ -33,16 +29,6 @@ export const TradeHeaderMobile = ({ launchableMarketId }: { launchableMarketId?:
 
         <MobileTradeAssetSelector launchableMarketId={launchableMarketId} />
 
-        <Button
-          tw="relative size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
-          shape={ButtonShape.Circle}
-          size={ButtonSize.XSmall}
-          onClick={() => {
-            navigate(AppRoute.Alerts);
-          }}
-        >
-          <Icon iconName={IconName.BellStroked} />
-        </Button>
         <Button
           tw="size-2.25 min-w-2.25 rounded-[50%] border border-solid border-[color:var(--color-border)]"
           shape={ButtonShape.Circle}