From 3e1540b8227675a366482d3d82143afb2377b986 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Mon, 9 Sep 2024 13:14:41 -0700
Subject: [PATCH] initial mobile commit

---
 app/assets/assets-table/data-table.tsx        |  14 +-
 app/assets/history-table/columns.tsx          |   8 +-
 app/assets/history-table/data-table.tsx       |  12 +-
 app/assets/page-client.tsx                    |  68 ++--
 app/assets/page.tsx                           |   2 +-
 app/components/account-menu.tsx               |   2 +-
 app/components/connect-wallet-button.tsx      |   8 +-
 app/components/deposit-banner.tsx             |  70 +++-
 app/components/footer.tsx                     |   6 +-
 app/components/header.tsx                     |  54 ++-
 app/components/mobile-bottom-bar.tsx          |  65 ++++
 app/components/mobile-nav-sheet.tsx           | 163 +++++++++
 app/components/zendesk.tsx                    |  17 +
 app/layout.tsx                                |  25 +-
 app/orders/columns.tsx                        |  14 +-
 app/orders/data-table.tsx                     |  12 +-
 app/orders/page-client.tsx                    |  18 +-
 app/orders/page.tsx                           |   2 +-
 app/stats/page-client.tsx                     |  38 +-
 app/stats/page.tsx                            |   2 +-
 app/trade/[base]/actions.ts                   |   3 +-
 app/trade/[base]/components/bbo-marquee.tsx   |  44 +--
 .../[base]/components/charts/price-chart.tsx  |   2 +-
 .../components/charts/tradingview/config.ts   |   2 +
 .../components/charts/tradingview/index.tsx   |  11 +-
 .../[base]/components/connect-button.tsx      |  10 +-
 .../mobile-asset-price-accordion.tsx          |  96 +++++
 .../components/new-order/assets-section.tsx   |  42 ++-
 .../new-order/max-orders-warning.tsx          |  24 +-
 .../components/new-order/new-order-form.tsx   | 332 +++++++++---------
 .../components/new-order/new-order-panel.tsx  |  30 +-
 .../new-order/no-balance-slot-warning.tsx     |  24 +-
 .../order-details/details-content.tsx         |  59 ++--
 .../order-details/empty-content.tsx           |  40 +--
 .../order-details/insufficient-warning.tsx    |  20 +-
 .../order-details/order-details-sheet.tsx     |  73 ++--
 app/trade/[base]/events/order-events.ts       |   5 +
 app/trade/[base]/page-client.tsx              |  85 +++--
 app/trade/[base]/page.tsx                     |   4 +-
 .../steps/success-without-savings.tsx         | 223 ------------
 .../desktop}/new-order-stepper.tsx            |  79 +----
 .../desktop}/steps/default.tsx                | 107 +++---
 .../desktop/steps/success-without-savings.tsx |  91 +++++
 .../desktop}/steps/success.tsx                |   6 +-
 .../mobile/new-order-stepper.tsx              | 117 ++++++
 .../order-stepper/mobile/steps/confirm.tsx    |  80 +++++
 .../order-stepper/mobile/steps/default.tsx    |  43 +++
 .../mobile/steps/success-without-savings.tsx  |  75 ++++
 .../order-stepper/mobile/steps/success.tsx    | 159 +++++++++
 components/dialogs/sign-in-dialog.tsx         | 136 ++++---
 components/dialogs/token-select-dialog.tsx    |  23 +-
 components/dialogs/token-select.tsx           |   8 +-
 .../dialogs/transfer/max-balances-warning.tsx |  20 +-
 .../dialogs/transfer/transfer-dialog.tsx      |  43 ++-
 components/did-you-know-content.tsx           |  70 ++++
 components/number-input.tsx                   |   1 +
 components/order-status-display.tsx           |  45 +++
 components/table-empty-state.tsx              |   5 +-
 components/table-select.tsx                   |   2 +-
 components/ui/button.tsx                      |   2 +-
 components/ui/drawer.tsx                      |   3 +-
 components/ui/dropdown-menu.tsx               |   3 +-
 components/ui/popover.tsx                     |  13 +-
 components/ui/responsive-tooltip.tsx          |  64 ++++
 components/ui/sonner.tsx                      |   3 +
 components/ui/table.tsx                       |  44 +--
 hooks/use-fees-check.ts                       |   2 +-
 hooks/use-shared-media-query.ts               |  60 ++++
 hooks/use-sign-in-and-connect.ts              |   4 +-
 lib/constants/protocol.ts                     |   9 +-
 lib/cookie.ts                                 |   8 +-
 lib/token.ts                                  |  11 +
 lib/utils.ts                                  |  19 +
 middleware.ts                                 |  13 +-
 package.json                                  |   8 +-
 pnpm-lock.yaml                                |  77 +++-
 providers/wagmi-provider/wagmi-provider.tsx   |   5 +-
 public/static/theme.css                       |  19 +
 78 files changed, 2192 insertions(+), 1014 deletions(-)
 create mode 100644 app/components/mobile-bottom-bar.tsx
 create mode 100644 app/components/mobile-nav-sheet.tsx
 create mode 100644 app/components/zendesk.tsx
 create mode 100644 app/trade/[base]/components/mobile-asset-price-accordion.tsx
 create mode 100644 app/trade/[base]/events/order-events.ts
 delete mode 100644 components/dialogs/new-order-stepper/steps/success-without-savings.tsx
 rename components/dialogs/{new-order-stepper => order-stepper/desktop}/new-order-stepper.tsx (55%)
 rename components/dialogs/{new-order-stepper => order-stepper/desktop}/steps/default.tsx (70%)
 create mode 100644 components/dialogs/order-stepper/desktop/steps/success-without-savings.tsx
 rename components/dialogs/{new-order-stepper => order-stepper/desktop}/steps/success.tsx (95%)
 create mode 100644 components/dialogs/order-stepper/mobile/new-order-stepper.tsx
 create mode 100644 components/dialogs/order-stepper/mobile/steps/confirm.tsx
 create mode 100644 components/dialogs/order-stepper/mobile/steps/default.tsx
 create mode 100644 components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
 create mode 100644 components/dialogs/order-stepper/mobile/steps/success.tsx
 create mode 100644 components/did-you-know-content.tsx
 create mode 100644 components/order-status-display.tsx
 create mode 100644 components/ui/responsive-tooltip.tsx
 create mode 100644 hooks/use-shared-media-query.ts

diff --git a/app/assets/assets-table/data-table.tsx b/app/assets/assets-table/data-table.tsx
index 283c2bd0..e21954c2 100644
--- a/app/assets/assets-table/data-table.tsx
+++ b/app/assets/assets-table/data-table.tsx
@@ -91,14 +91,14 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="flex items-center pb-4">
+      <div className="flex flex-col gap-2 lg:flex-row lg:items-center">
         <div className="text-sm font-medium text-muted-foreground">
           Your deposits inside of Renegade. Only you and your connected relayer
           can see your balances.
         </div>
-        <div className="ml-auto flex items-center gap-2">
+        <div className="flex items-center gap-2 lg:ml-auto">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle USD"
                 pressed={
@@ -131,7 +131,7 @@ export function DataTable<TData, TValue>({
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Show zero balances"
                 pressed={!showZeroL2Balance && !showZeroRenegadeBalance}
@@ -150,10 +150,10 @@ export function DataTable<TData, TValue>({
             </TooltipContent>
           </Tooltip>
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle decimal display"
-                className="w-8 p-0 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
+                className="w-8 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
                 pressed={isLongFormat}
                 size="sm"
                 variant="outline"
@@ -168,7 +168,7 @@ export function DataTable<TData, TValue>({
           </Tooltip>
         </div>
       </div>
-      <div className="border">
+      <div className="mt-2 border lg:mt-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/app/assets/history-table/columns.tsx b/app/assets/history-table/columns.tsx
index 662b6667..b00f3bb9 100644
--- a/app/assets/history-table/columns.tsx
+++ b/app/assets/history-table/columns.tsx
@@ -30,7 +30,7 @@ export const columns: ColumnDef<HistoryData>[] = [
   },
   {
     accessorKey: "mint",
-    header: () => <div>Asset</div>,
+    header: () => <div className="pr-7">Asset</div>,
     cell: ({ row }) => {
       const mint = row.getValue<`0x${string}`>("mint")
       const token = Token.findByAddress(mint)
@@ -56,7 +56,9 @@ export const columns: ColumnDef<HistoryData>[] = [
   },
   {
     id: "usdValue",
-    header: () => <div className="text-right">Amount ($)</div>,
+    header: () => (
+      <div className="whitespace-nowrap text-right">Amount ($)</div>
+    ),
     cell: function Cell({ row }) {
       const mint = row.getValue<`0x${string}`>("mint")
       const token = Token.findByAddress(mint)
@@ -106,7 +108,7 @@ export const columns: ColumnDef<HistoryData>[] = [
     cell: ({ row }) => {
       const timestamp = row.getValue<number>("timestamp")
       const formatted = formatTimestamp(timestamp)
-      return <div className="text-right">{formatted}</div>
+      return <div className="whitespace-nowrap text-right">{formatted}</div>
     },
   },
 ]
diff --git a/app/assets/history-table/data-table.tsx b/app/assets/history-table/data-table.tsx
index 731168cf..1179f7ba 100644
--- a/app/assets/history-table/data-table.tsx
+++ b/app/assets/history-table/data-table.tsx
@@ -16,8 +16,6 @@ import {
 import { TableEmptyState } from "@/components/table-empty-state"
 import { TableSelect } from "@/components/table-select"
 import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import {
   Table,
   TableBody,
@@ -122,7 +120,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="flex items-center gap-2 pb-4">
+      <div className="flex flex-wrap items-center gap-2 lg:gap-4">
         <div className="text-sm font-medium text-muted-foreground">Filters</div>
         <TableSelect
           placeholder="Status"
@@ -156,12 +154,12 @@ export function DataTable<TData, TValue>({
             Clear
           </Button>
         ) : null}
-        <div className="ml-auto">
+        <div className="sm:ml-auto">
           <Tooltip>
-            <TooltipTrigger>
+            <TooltipTrigger asChild>
               <Toggle
                 aria-label="Toggle decimal display"
-                className="w-8 p-0 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
+                className="w-8 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
                 pressed={isLongFormat}
                 size="sm"
                 variant="outline"
@@ -176,7 +174,7 @@ export function DataTable<TData, TValue>({
           </Tooltip>
         </div>
       </div>
-      <div className="border">
+      <div className="mt-2 border lg:mt-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/app/assets/page-client.tsx b/app/assets/page-client.tsx
index ec3287bb..4cc7fdaa 100644
--- a/app/assets/page-client.tsx
+++ b/app/assets/page-client.tsx
@@ -17,10 +17,10 @@ import { DataTable as AssetTable } from "@/app/assets/assets-table/data-table"
 import { DataTable as TransferHistoryTable } from "@/app/assets/history-table/data-table"
 
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
 import { usePriceQueries } from "@/hooks/use-price-queries"
 import { useRefreshOnBlock } from "@/hooks/use-refresh-on-block"
@@ -157,36 +157,36 @@ export function PageClient() {
   }, [transferHistory])
 
   return (
-    <main>
-      <div className="container">
-        <div className="mt-12">
-          <h1 className="font-serif text-3xl font-bold leading-normal">
-            Assets
-          </h1>
-          <AssetTable
-            columns={assetColumns}
-            data={balances}
-            setShowZeroL2Balance={setShowZeroL2Balance}
-            setShowZeroRenegadeBalance={setShowZeroRenegadeBalance}
-            showZeroL2Balance={showZeroL2Balance}
-            showZeroRenegadeBalance={showZeroRenegadeBalance}
-          />
-          <Tooltip>
-            <TooltipTrigger>
-              <span className="mt-4 flex items-center text-xs text-muted-foreground">
-                <Info className="mr-1 h-3 w-3" />
-                Where are my assets?
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="font-sans">{ASSETS_TOOLTIP}</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-        <div className="mt-20">
-          <h1 className="font-serif text-3xl font-bold leading-normal">
-            Transfer History
-          </h1>
+    <main className="container">
+      <div className="mt-12">
+        <h1 className="font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+          Assets
+        </h1>
+        <AssetTable
+          columns={assetColumns}
+          data={balances}
+          setShowZeroL2Balance={setShowZeroL2Balance}
+          setShowZeroRenegadeBalance={setShowZeroRenegadeBalance}
+          showZeroL2Balance={showZeroL2Balance}
+          showZeroRenegadeBalance={showZeroRenegadeBalance}
+        />
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger>
+            <span className="mt-4 flex cursor-pointer items-center text-xs text-muted-foreground">
+              <Info className="mr-1 h-3 w-3" />
+              Where are my assets?
+            </span>
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent>
+            <p className="font-sans">{ASSETS_TOOLTIP}</p>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
+      </div>
+      <div className="mt-20">
+        <h1 className="font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+          Transfer History
+        </h1>
+        <div className="mt-2 lg:mt-4">
           <TransferHistoryTable
             columns={historyColumns}
             data={historyData}
diff --git a/app/assets/page.tsx b/app/assets/page.tsx
index eaea09c3..d6d3def0 100644
--- a/app/assets/page.tsx
+++ b/app/assets/page.tsx
@@ -16,7 +16,7 @@ export default async function Page() {
   // )
 
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr_auto]">
+    <div className="grid min-h-screen grid-cols-1 grid-rows-[auto_1fr_auto]">
       <div className="min-h-20">
         <Header />
       </div>
diff --git a/app/components/account-menu.tsx b/app/components/account-menu.tsx
index 88501b06..e4660249 100644
--- a/app/components/account-menu.tsx
+++ b/app/components/account-menu.tsx
@@ -40,7 +40,7 @@ export function AccountDropdown({ children }: { children: React.ReactNode }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent>
         <DropdownMenuLabel>
           <Tooltip>
             <TooltipTrigger asChild>
diff --git a/app/components/connect-wallet-button.tsx b/app/components/connect-wallet-button.tsx
index e6e51a27..99c8585b 100644
--- a/app/components/connect-wallet-button.tsx
+++ b/app/components/connect-wallet-button.tsx
@@ -2,14 +2,18 @@ import { SignInDialog } from "@/components/dialogs/sign-in-dialog"
 import { Button } from "@/components/ui/button"
 
 import { useSignInAndConnect } from "@/hooks/use-sign-in-and-connect"
+import { cn } from "@/lib/utils"
 
-export function ConnectWalletButton() {
+export function ConnectWalletButton({ className }: { className?: string }) {
   const { handleClick, content, open, onOpenChange } = useSignInAndConnect()
 
   return (
     <>
       <Button
-        className="border border-[#333333] font-extended text-base hover:border-[#999999]"
+        className={cn(
+          "border border-[#333333] font-extended text-base hover:border-[#999999]",
+          className,
+        )}
         size="shimmer"
         variant="shimmer"
         onClick={handleClick}
diff --git a/app/components/deposit-banner.tsx b/app/components/deposit-banner.tsx
index 2cdf7548..7159a991 100644
--- a/app/components/deposit-banner.tsx
+++ b/app/components/deposit-banner.tsx
@@ -10,6 +10,7 @@ import { useLocalStorage } from "usehooks-ts"
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { Button } from "@/components/ui/button"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { STORAGE_DEPOSIT_BANNER } from "@/lib/constants/storage"
 
 export function DepositBanner() {
@@ -20,14 +21,54 @@ export function DepositBanner() {
       select: (data) => data.balances.length,
     },
   })
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
-  React.useEffect(() => {
-    if (data === 0 && !isClosed) {
-      setTimeout(() => setIsVisible(true), 100)
-    } else {
-      setIsVisible(false)
-    }
-  }, [data, isClosed])
+  // React.useEffect(() => {
+  //   if (data === 0 && !isClosed) {
+  //     setTimeout(() => setIsVisible(true), 100)
+  //   } else {
+  //     setIsVisible(false)
+  //   }
+  // }, [data, isClosed])
+
+  if (isDesktop) {
+    return (
+      <div
+        className={`transition-all duration-300 ease-in ${
+          isVisible
+            ? "max-h-20 opacity-100"
+            : "max-h-0 overflow-hidden opacity-0"
+        }`}
+      >
+        <div className="flex w-full items-center border-b border-border bg-[#00183e] py-2 pl-4 text-sm text-blue lg:py-0">
+          <div>
+            Welcome to Renegade! Deposit your Arbitrum tokens to get started.
+          </div>
+          <TransferDialog>
+            <Button
+              className="text-blue"
+              variant="link"
+            >
+              Deposit now
+              <ArrowRight className="ml-1 h-4 w-4" />
+            </Button>
+          </TransferDialog>
+          <Button
+            className="ml-auto"
+            size="icon"
+            variant="ghost"
+            onClick={() => {
+              setIsVisible(false)
+              setTimeout(() => setIsClosed(true), 300)
+            }}
+          >
+            <Cross2Icon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div
@@ -35,18 +76,11 @@ export function DepositBanner() {
         isVisible ? "max-h-20 opacity-100" : "max-h-0 overflow-hidden opacity-0"
       }`}
     >
-      <div className="flex w-full items-center border-b border-border bg-[#00183e] pl-4 text-sm text-blue">
-        <div>
-          Welcome to Renegade! Deposit your Arbitrum tokens to get started.
-        </div>
+      <div className="flex w-full items-center text-pretty border-b border-border bg-[#00183e] py-2 pl-4 pr-2 text-sm text-blue lg:py-0">
         <TransferDialog>
-          <Button
-            className="text-blue"
-            variant="link"
-          >
-            Deposit now
-            <ArrowRight className="ml-1 h-4 w-4" />
-          </Button>
+          <div>
+            Welcome to Renegade! Deposit your Arbitrum tokens to get started.
+          </div>
         </TransferDialog>
         <Button
           className="ml-auto"
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index 6c0bb44c..7858d6c9 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -26,9 +26,9 @@ import { isTestnet } from "@/lib/viem"
 export function Footer() {
   const { address } = useAccount()
   return (
-    <footer className="fixed bottom-0 z-10 min-w-full border-t bg-background">
+    <footer className="z-10 hidden min-w-full border-t bg-background lg:fixed lg:bottom-0 lg:block">
       <div className="grid min-h-20 grid-cols-2 items-center">
-        <div className="flex items-center pl-6">
+        <div className="hidden items-center pl-6 lg:flex">
           <ContextMenu>
             <ContextMenuTrigger>
               <Image
@@ -90,7 +90,7 @@ export function Footer() {
             </Tooltip>
           )}
         </div>
-        <div className="ml-auto pr-[140px] text-xs">
+        <div className="ml-2 flex text-xs lg:ml-auto lg:pr-[140px]">
           <Button
             asChild
             size="icon"
diff --git a/app/components/header.tsx b/app/components/header.tsx
index fc1d90e8..db1849b9 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -5,12 +5,13 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import { useStatus } from "@renegade-fi/react"
-import { ChevronDown, Ellipsis } from "lucide-react"
+import { ChevronDown, Ellipsis, Menu } from "lucide-react"
 import { mainnet } from "viem/chains"
 import { createConfig, http, useAccount, useEnsName } from "wagmi"
 
 import { AccountDropdown } from "@/app/components/account-menu"
 import { ConnectWalletButton } from "@/app/components/connect-wallet-button"
+import { MobileNavSheet } from "@/app/components/mobile-nav-sheet"
 import { SettingsPopover } from "@/app/trade/[base]/components/settings-popover"
 
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
@@ -42,8 +43,52 @@ export function Header() {
   })
   return (
     <header className="fixed top-0 z-10 min-w-full border-b bg-background">
-      <div className="grid min-h-20 grid-cols-3 items-center">
-        <div className="w-fit pl-6">
+      <div className="flex min-h-20 items-center justify-between pl-2 pr-4 lg:hidden">
+        <div className="flex items-center gap-2">
+          <MobileNavSheet>
+            <Button
+              size="icon"
+              variant="ghost"
+            >
+              <Menu className="h-5 w-5" />
+            </Button>
+          </MobileNavSheet>
+
+          <Image
+            priority
+            alt="logo"
+            height="28"
+            src="/glyph_dark.svg"
+            width="24"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          {address ? (
+            <AccountDropdown>
+              <Button variant="outline">
+                {ensName
+                  ? ensName
+                  : `${address.slice(0, 6)}...${address.slice(-2)}`}
+                <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </AccountDropdown>
+          ) : (
+            <ConnectWalletButton className="text-sm" />
+          )}
+          {status === "in relayer" && (
+            <SettingsPopover>
+              <Button
+                size="icon"
+                variant="outline"
+              >
+                <Ellipsis className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            </SettingsPopover>
+          )}
+        </div>
+      </div>
+      <div className="hidden min-h-20 grid-cols-3 items-center px-6 lg:grid">
+        <div className="w-fit">
           <ContextMenu>
             <ContextMenuTrigger>
               <Link href="/trade">
@@ -105,7 +150,7 @@ export function Header() {
             Stats
           </Link>
         </nav>
-        <div className="flex items-center space-x-4 justify-self-end pr-4">
+        <div className="flex items-center space-x-4 justify-self-end">
           {status === "in relayer" && (
             <>
               {/* <TaskHistorySheet>
@@ -142,7 +187,6 @@ export function Header() {
           {status === "in relayer" && (
             <SettingsPopover>
               <Button
-                className=""
                 size="icon"
                 variant="outline"
               >
diff --git a/app/components/mobile-bottom-bar.tsx b/app/components/mobile-bottom-bar.tsx
new file mode 100644
index 00000000..36a6d6ab
--- /dev/null
+++ b/app/components/mobile-bottom-bar.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { useStatus } from "@renegade-fi/react"
+
+import { NewOrderStepper } from "@/components/dialogs/order-stepper/mobile/new-order-stepper"
+import { SignInDialog } from "@/components/dialogs/sign-in-dialog"
+import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
+import { Button } from "@/components/ui/button"
+
+import { useSignInAndConnect } from "@/hooks/use-sign-in-and-connect"
+
+export function MobileBottomBar({
+  base,
+  isUSDCDenominated,
+}: {
+  base: string
+  isUSDCDenominated?: boolean
+}) {
+  const status = useStatus()
+  const { handleClick, content, open, onOpenChange } = useSignInAndConnect()
+  return (
+    <div className="fixed bottom-0 z-10 min-w-full border-t bg-background p-4 lg:hidden">
+      <div className="flex gap-2">
+        {status === "in relayer" ? (
+          <>
+            <NewOrderStepper
+              base={base}
+              isUSDCDenominated={isUSDCDenominated}
+            >
+              <Button
+                className="font-extended"
+                variant="default"
+              >
+                Trade
+              </Button>
+            </NewOrderStepper>
+
+            <TransferDialog>
+              <Button
+                className="font-extended"
+                variant="outline"
+              >
+                Deposit
+              </Button>
+            </TransferDialog>
+          </>
+        ) : (
+          <>
+            <Button
+              className="font-extended"
+              variant="default"
+              onClick={handleClick}
+            >
+              Sign in
+            </Button>
+            <SignInDialog
+              open={open}
+              onOpenChange={onOpenChange}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/mobile-nav-sheet.tsx b/app/components/mobile-nav-sheet.tsx
new file mode 100644
index 00000000..e2e04397
--- /dev/null
+++ b/app/components/mobile-nav-sheet.tsx
@@ -0,0 +1,163 @@
+import { useState } from "react"
+
+import Image from "next/image"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { Book } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+
+export function MobileNavSheet({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+
+  const handleLinkClick = (href: string) => {
+    if (pathname.includes(href)) {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent
+        hideCloseButton
+        className="w-[300px] p-0 !duration-100"
+        side="left"
+      >
+        <SheetHeader>
+          <VisuallyHidden>
+            <SheetTitle>Menu</SheetTitle>
+            <SheetDescription>Click on a link!</SheetDescription>
+          </VisuallyHidden>
+        </SheetHeader>
+        <div className="flex flex-col gap-8 p-8 text-xl">
+          <Link
+            href="/trade"
+            onClick={() => handleLinkClick("/trade")}
+          >
+            <Image
+              priority
+              alt="logo"
+              height="38"
+              src="/glyph_dark.svg"
+              width="31"
+            />
+          </Link>
+          <Link
+            className="cursor-pointer hover:text-muted-foreground"
+            href="/trade"
+            onClick={() => handleLinkClick("/trade")}
+          >
+            Trade
+          </Link>
+          <Link
+            className="cursor-pointer hover:text-muted-foreground"
+            href="/assets"
+            onClick={() => handleLinkClick("/assets")}
+          >
+            Assets
+          </Link>
+          <Link
+            className="cursor-pointer hover:text-muted-foreground"
+            href="/orders"
+            onClick={() => handleLinkClick("/orders")}
+          >
+            Orders
+          </Link>
+          <Link
+            className="cursor-pointer hover:text-muted-foreground"
+            href="/stats"
+            onClick={() => handleLinkClick("/stats")}
+          >
+            Stats
+          </Link>
+        </div>
+        <Separator />
+        <div className="flex justify-between p-8">
+          <Button
+            asChild
+            size="icon"
+            variant="ghost"
+          >
+            <a
+              href="https://x.com/renegade_fi"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Image
+                alt="x"
+                height="16"
+                src="/x.svg"
+                width="16"
+              />
+            </a>
+          </Button>
+          <Button
+            asChild
+            size="icon"
+            variant="ghost"
+          >
+            <a
+              href="https://github.com/renegade-fi/"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Image
+                alt="github"
+                height="16"
+                src="/github.svg"
+                width="16"
+              />
+            </a>
+          </Button>
+          <Button
+            asChild
+            size="icon"
+            variant="ghost"
+          >
+            <a
+              href="https://discord.com/invite/renegade-fi"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Image
+                alt="discord"
+                height="16"
+                src="/discord.svg"
+                width="16"
+              />
+            </a>
+          </Button>
+          <Button
+            asChild
+            size="icon"
+            variant="ghost"
+          >
+            <a
+              href="https://renegade.fi/docs"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Book className="h-4 w-4" />
+            </a>
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/app/components/zendesk.tsx b/app/components/zendesk.tsx
new file mode 100644
index 00000000..42ceab89
--- /dev/null
+++ b/app/components/zendesk.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import Script from "next/script"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+
+export function Zendesk() {
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
+  if (!isDesktop) return <></>
+  return (
+    <Script
+      id="ze-snippet"
+      src="https://static.zdassets.com/ekr/snippet.js?key=0093b78b-22e2-475a-a370-a15a4b7bf55c"
+      strategy="lazyOnload"
+    />
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 552085e9..c4052b43 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
 import localFont from "next/font/local"
 import { headers } from "next/headers"
 import Script from "next/script"
-import { userAgent } from "next/server"
+import { Viewport } from "next/types"
 
 import { cookieToInitialState as renegadeCookieToInitialState } from "@renegade-fi/react"
 import { MAX_ORDERS } from "@renegade-fi/react/constants"
@@ -15,6 +15,7 @@ import { InvalidateQueries } from "@/app/components/invalidate-queries"
 import { OrderToaster } from "@/app/components/order-toaster"
 import { TailwindIndicator } from "@/app/components/tailwind-indicator"
 import { TaskToaster } from "@/app/components/task-toaster"
+import { Zendesk } from "@/app/components/zendesk"
 
 import { Toaster } from "@/components/ui/sonner"
 import { TooltipProvider } from "@/components/ui/tooltip"
@@ -66,6 +67,17 @@ export const metadata = constructMetadata({
     : "Renegade | On-Chain Dark Pool",
 })
 
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  colorScheme: "dark",
+  viewportFit: "cover",
+  width: "device-width",
+  initialScale: 1,
+  minimumScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+}
+
 export default async function RootLayout({
   children,
 }: Readonly<{
@@ -75,12 +87,10 @@ export default async function RootLayout({
     renegadeConfig,
     headers().get("cookie"),
   )
-  const { device } = userAgent({ headers: headers() })
-  const prices = new Map()
   return (
     <html lang="en">
       <body
-        className={`${fontSansExtended.variable} ${fontSerif.variable} ${fontSans.variable} ${fontSansLight.variable} ${fontMono.variable} min-h-screen bg-background font-sans antialiased`}
+        className={`${fontSansExtended.variable} ${fontSerif.variable} ${fontSans.variable} ${fontSansLight.variable} ${fontMono.variable} bg-background font-sans antialiased`}
       >
         <ThemeProvider
           disableTransitionOnChange
@@ -101,7 +111,6 @@ export default async function RootLayout({
               </TooltipProvider>
               <Toaster
                 className="pointer-events-auto"
-                position="bottom-center"
                 theme="light"
                 toastOptions={{ duration: 5000 }}
                 visibleToasts={MAX_ORDERS}
@@ -117,11 +126,7 @@ export default async function RootLayout({
           </RenegadeProvider>
         </ThemeProvider>
         <Analytics />
-        <Script
-          id="ze-snippet"
-          src="https://static.zdassets.com/ekr/snippet.js?key=0093b78b-22e2-475a-a370-a15a4b7bf55c"
-          strategy="lazyOnload"
-        />
+        <Zendesk />
       </body>
     </html>
   )
diff --git a/app/orders/columns.tsx b/app/orders/columns.tsx
index 0171dcd0..3b834e73 100644
--- a/app/orders/columns.tsx
+++ b/app/orders/columns.tsx
@@ -61,7 +61,11 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
     accessorKey: "state",
     header: () => <div>Status</div>,
     cell: ({ row }) => {
-      return <div>{formatOrderState[row.getValue<OrderState>("status")]}</div>
+      return (
+        <div className="whitespace-nowrap">
+          {formatOrderState[row.getValue<OrderState>("status")]}
+        </div>
+      )
     },
     filterFn: (row, _, filterValue) => {
       if (filterValue === "open") {
@@ -93,7 +97,7 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
     accessorFn: (row) => {
       return row.data.base_mint
     },
-    header: () => <div>Asset</div>,
+    header: () => <div className="pr-7">Asset</div>,
     cell: ({ row }) => {
       const mint = row.getValue<`0x${string}`>("mint")
       const token = Token.findByAddress(mint)
@@ -227,7 +231,7 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
         <>
           {!row.original.fills.length &&
           row.original.state !== OrderState.Cancelled ? (
-            <div>
+            <div className="whitespace-nowrap">
               Finding counterparties
               <AnimatedEllipsis />
             </div>
@@ -325,7 +329,9 @@ export const columns: ColumnDef<ExtendedOrderMetadata>[] = [
       const timestamp = row.getValue<bigint>("timestamp")
       const formatted = formatTimestamp(Number(timestamp))
 
-      return <div className="pr-4 text-right font-medium">{formatted}</div>
+      return (
+        <div className="whitespace-nowrap pr-4 text-right">{formatted}</div>
+      )
     },
   },
   // {
diff --git a/app/orders/data-table.tsx b/app/orders/data-table.tsx
index fa011ccd..b50ae5a3 100644
--- a/app/orders/data-table.tsx
+++ b/app/orders/data-table.tsx
@@ -171,7 +171,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="flex items-center gap-4 pb-4">
+      <div className="flex flex-wrap items-center gap-2 lg:gap-4">
         <div className="text-sm font-medium text-muted-foreground">Filters</div>
         <TableSelect
           placeholder="Status"
@@ -206,19 +206,19 @@ export function DataTable<TData, TValue>({
           </Button>
         ) : null}
         <Button
-          className="ml-auto px-0 text-muted-foreground"
+          className="text-muted-foreground sm:ml-auto"
           disabled={isDisabled}
           size="sm"
-          variant="link"
+          variant="outline"
           onClick={handleCancelAllOrders}
         >
           Cancel all open orders
         </Button>
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger asChild>
             <Toggle
               aria-label="Toggle decimal display"
-              className="w-8 p-0 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
+              className="w-8 font-mono text-xs text-muted-foreground data-[state=on]:text-muted-foreground"
               pressed={isLongFormat}
               size="sm"
               variant="outline"
@@ -232,7 +232,7 @@ export function DataTable<TData, TValue>({
           </TooltipContent>
         </Tooltip>
       </div>
-      <div className="border">
+      <div className="mt-2 border lg:mt-4">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/app/orders/page-client.tsx b/app/orders/page-client.tsx
index d8de8092..3e14f16d 100644
--- a/app/orders/page-client.tsx
+++ b/app/orders/page-client.tsx
@@ -9,14 +9,16 @@ import { columns } from "./columns"
 export function PageClient() {
   const data = useOrderTableData()
   return (
-    <main>
-      <div className="container">
-        <div className="mt-12">
-          <h1 className="mb-1 mt-6 font-serif text-3xl font-bold">Orders</h1>
-          <div className="pb-4 text-sm font-medium text-muted-foreground">
-            Your private orders. Only you and your connected relayer can see
-            these values.
-          </div>
+    <main className="container">
+      <div className="mt-12">
+        <h1 className="font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+          Orders
+        </h1>
+        <div className="text-sm font-medium text-muted-foreground lg:mt-2">
+          Your private orders. Only you and your connected relayer can see these
+          values.
+        </div>
+        <div className="mt-2 lg:mt-4">
           <DataTable
             columns={columns}
             data={data}
diff --git a/app/orders/page.tsx b/app/orders/page.tsx
index 67daa32f..07b1509c 100644
--- a/app/orders/page.tsx
+++ b/app/orders/page.tsx
@@ -4,7 +4,7 @@ import { PageClient } from "@/app/orders/page-client"
 
 export default function Page() {
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr_auto]">
+    <div className="grid min-h-screen grid-cols-1 grid-rows-[auto_1fr_auto]">
       <div className="min-h-20">
         <Header />
       </div>
diff --git a/app/stats/page-client.tsx b/app/stats/page-client.tsx
index 11b0bf5b..0f0a2d5b 100644
--- a/app/stats/page-client.tsx
+++ b/app/stats/page-client.tsx
@@ -6,26 +6,28 @@ import { VolumeChart } from "@/app/stats/charts/volume-chart"
 
 export function PageClient() {
   return (
-    <main>
-      <div className="container mb-8 mt-12 space-y-12">
-        <div className="grid grid-cols-3 gap-4">
-          <div className="col-span-1">
-            <h1 className="mb-4 mt-6 font-serif text-3xl font-bold">
-              Total Value Locked
-            </h1>
-            <TvlChart />
-          </div>
-          <div className="col-span-2">
-            <h1 className="mb-4 mt-6 font-serif text-3xl font-bold">Volume</h1>
-            <VolumeChart />
-          </div>
+    <main className="container mb-8 mt-12 space-y-12">
+      <div className="grid grid-cols-1 gap-12 lg:grid-cols-3 lg:gap-4">
+        <div className="col-span-1">
+          <h1 className="mb-4 mt-6 font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+            Total Value Locked
+          </h1>
+          <TvlChart />
         </div>
+        <div className="col-span-1 lg:col-span-2">
+          <h1 className="mb-4 mt-6 font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+            Volume
+          </h1>
+          <VolumeChart />
+        </div>
+      </div>
 
-        <div className="grid grid-cols-1 gap-4">
-          <div className="col-span-1">
-            <h1 className="mb-4 mt-6 font-serif text-3xl font-bold">Inflows</h1>
-            <InflowsChart />
-          </div>
+      <div className="grid grid-cols-1 gap-4">
+        <div className="col-span-1">
+          <h1 className="mb-4 mt-6 font-serif text-3xl font-bold tracking-tighter lg:tracking-normal">
+            Inflows
+          </h1>
+          <InflowsChart />
         </div>
       </div>
     </main>
diff --git a/app/stats/page.tsx b/app/stats/page.tsx
index e15c359f..ef94e314 100644
--- a/app/stats/page.tsx
+++ b/app/stats/page.tsx
@@ -4,7 +4,7 @@ import { PageClient } from "@/app/stats/page-client"
 
 export default function Page() {
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr_auto_auto]">
+    <div className="grid min-h-screen grid-cols-1 grid-rows-[auto_1fr_auto_auto]">
       <div className="min-h-20">
         <Header />
       </div>
diff --git a/app/trade/[base]/actions.ts b/app/trade/[base]/actions.ts
index 4e30e6a6..2260f4a6 100644
--- a/app/trade/[base]/actions.ts
+++ b/app/trade/[base]/actions.ts
@@ -12,7 +12,8 @@ function setCookie(key: string, value: string) {
   cookies().set(key, value, {
     path: "/",
     sameSite: "strict",
-    secure: true,
+    // Disable secure flag in development
+    secure: process.env.NODE_ENV === "production",
     maxAge: 31536000,
   })
 }
diff --git a/app/trade/[base]/components/bbo-marquee.tsx b/app/trade/[base]/components/bbo-marquee.tsx
index 961ed994..adceb5f3 100644
--- a/app/trade/[base]/components/bbo-marquee.tsx
+++ b/app/trade/[base]/components/bbo-marquee.tsx
@@ -10,20 +10,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 
+import { EXCHANGES, exchangeToName } from "@/lib/constants/protocol"
 import { BBO_TOOLTIP } from "@/lib/constants/tooltips"
 import { remapToken } from "@/lib/token"
-
-const exchanges: Exchange[] = ["binance", "coinbase", "kraken", "okx"]
-const names: Record<Exchange, string> = {
-  binance: "Binance",
-  coinbase: "Coinbase",
-  kraken: "Kraken",
-  okx: "OKX",
-}
+import { constructExchangeUrl } from "@/lib/utils"
 
 export function BBOMarquee({ base }: { base: string }) {
   return (
-    <div className="grid min-h-marquee grid-cols-[0.5fr_6px_1fr_6px_1fr_6px_1fr_6px_1fr] items-center whitespace-nowrap border-b border-border font-extended text-sm">
+    <div className="hidden min-h-marquee grid-cols-[0.5fr_6px_1fr_6px_1fr_6px_1fr_6px_1fr] items-center whitespace-nowrap border-b border-border font-extended text-sm lg:grid">
       <Tooltip>
         <TooltipTrigger>
           <span className="flex justify-center">BBO Feeds</span>
@@ -32,7 +26,7 @@ export function BBOMarquee({ base }: { base: string }) {
           <p className="font-sans">{BBO_TOOLTIP}</p>
         </TooltipContent>
       </Tooltip>
-      {exchanges.map((exchange) => (
+      {EXCHANGES.map((exchange) => (
         <Fragment key={exchange}>
           <span className="text-xs">•</span>
           <a
@@ -41,7 +35,7 @@ export function BBOMarquee({ base }: { base: string }) {
             target="_blank"
           >
             <div className="flex items-baseline justify-center gap-4 leading-none">
-              <span>{names[exchange]}</span>
+              <span>{exchangeToName[exchange]}</span>
               <AnimatedPrice
                 className="font-mono"
                 exchange={exchange}
@@ -59,31 +53,3 @@ export function BBOMarquee({ base }: { base: string }) {
     </div>
   )
 }
-
-function remapQuote(exchange: Exchange) {
-  switch (exchange) {
-    case "binance":
-    case "okx":
-      return "USDT"
-    case "coinbase":
-    case "kraken":
-      return "USD"
-  }
-}
-
-function constructExchangeUrl(exchange: Exchange, base: string) {
-  const remappedBase = remapToken(base)
-  const quote = remapQuote(exchange)
-  switch (exchange) {
-    case "binance":
-      return `https://www.binance.com/en/trade/${remappedBase}_${quote}`
-    case "coinbase":
-      return `https://www.coinbase.com/advanced-trade/${remappedBase}-${quote}`
-    case "kraken":
-      return `https://pro.kraken.com/app/trade/${remappedBase}-${quote}`
-    case "okx":
-      return `https://www.okx.com/trade-spot/${remappedBase}-${quote}`
-    default:
-      return ""
-  }
-}
diff --git a/app/trade/[base]/components/charts/price-chart.tsx b/app/trade/[base]/components/charts/price-chart.tsx
index e5612634..45c30cbb 100644
--- a/app/trade/[base]/components/charts/price-chart.tsx
+++ b/app/trade/[base]/components/charts/price-chart.tsx
@@ -18,7 +18,7 @@ export function PriceChart({ base }: { base: string }) {
         src="/static/datafeeds/udf/dist/bundle.js"
         strategy="afterInteractive"
       />
-      <div className="relative h-[500px]">
+      <div className="relative h-[400px] lg:h-[500px]">
         <TradingViewChart {...defaultWidgetProps} />
       </div>
     </>
diff --git a/app/trade/[base]/components/charts/tradingview/config.ts b/app/trade/[base]/components/charts/tradingview/config.ts
index b1c8bf65..63d3f718 100644
--- a/app/trade/[base]/components/charts/tradingview/config.ts
+++ b/app/trade/[base]/components/charts/tradingview/config.ts
@@ -55,6 +55,7 @@ const disabled_features: Partial<ChartingLibraryFeatureset>[] = [
   "show_chart_property_page",
   "header_screenshot",
   "create_volume_indicator_by_default",
+  "save_chart_properties_to_local_storage",
 ]
 
 const enabled_features = [
@@ -235,5 +236,6 @@ export const config = constructConfig({
   loading_screen,
   overrides,
   time_frames,
+  theme: "dark",
   // custom_font_family: "var(--font-sans)",
 })
diff --git a/app/trade/[base]/components/charts/tradingview/index.tsx b/app/trade/[base]/components/charts/tradingview/index.tsx
index bff5da34..c503ccaa 100644
--- a/app/trade/[base]/components/charts/tradingview/index.tsx
+++ b/app/trade/[base]/components/charts/tradingview/index.tsx
@@ -47,10 +47,13 @@ export default function TradingViewChart(
     <>
       <div
         ref={chartContainerRef}
-        className={cn("z-10 h-[500px] transition-opacity duration-300", {
-          "opacity-0": !isReady,
-          "opacity-100": isReady,
-        })}
+        className={cn(
+          "z-10 h-[400px] transition-opacity duration-300 lg:h-[500px]",
+          {
+            "opacity-0": !isReady,
+            "opacity-100": isReady,
+          },
+        )}
       />
       <div
         className={cn(
diff --git a/app/trade/[base]/components/connect-button.tsx b/app/trade/[base]/components/connect-button.tsx
index efdc9f1d..1ce0f84c 100644
--- a/app/trade/[base]/components/connect-button.tsx
+++ b/app/trade/[base]/components/connect-button.tsx
@@ -12,10 +12,12 @@ export function ConnectButton({ className }: { className?: string }) {
       <Button
         className={cn(className)}
         size="xl"
-        onClick={(e) => {
-          e.preventDefault()
-          handleClick()
-        }}
+        // onClick={(e) => {
+        //   e.preventDefault()
+        //   handleClick()
+        // }}
+        type="button"
+        onClick={handleClick}
       >
         {content}
       </Button>
diff --git a/app/trade/[base]/components/mobile-asset-price-accordion.tsx b/app/trade/[base]/components/mobile-asset-price-accordion.tsx
new file mode 100644
index 00000000..dab45713
--- /dev/null
+++ b/app/trade/[base]/components/mobile-asset-price-accordion.tsx
@@ -0,0 +1,96 @@
+import React from "react"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { Token } from "@renegade-fi/react"
+import { ChevronDown } from "lucide-react"
+
+import { AnimatedPrice } from "@/components/animated-price"
+import { TokenSelectDialog } from "@/components/dialogs/token-select-dialog"
+import { TokenIcon } from "@/components/token-icon"
+import { Button } from "@/components/ui/button"
+
+import { EXCHANGES, exchangeToName } from "@/lib/constants/protocol"
+import { BBO_TOOLTIP } from "@/lib/constants/tooltips"
+import { constructExchangeUrl } from "@/lib/utils"
+
+export function MobileAssetPriceAccordion({ base }: { base: string }) {
+  const mint = React.useMemo(() => {
+    try {
+      return Token.findByTicker(base).address
+    } catch (error) {
+      return null
+    }
+  }, [base])
+
+  return (
+    <AccordionPrimitive.Root
+      collapsible
+      className="block border-b border-border lg:hidden"
+      type="single"
+    >
+      <AccordionPrimitive.Item value="asset-details">
+        <div className="flex items-center justify-between p-4">
+          <TokenSelectDialog ticker={base}>
+            <Button
+              className="px-2 py-0 font-serif text-2xl font-bold"
+              variant="ghost"
+            >
+              <TokenIcon
+                className="mr-2"
+                size={22}
+                ticker={base}
+              />
+              {base}
+              <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </TokenSelectDialog>
+          <AccordionPrimitive.Trigger asChild>
+            <Button
+              className="px-2 py-0 text-xl [&[data-state=open]>svg]:rotate-180"
+              variant="ghost"
+            >
+              <div className="mr-2 text-xs leading-none text-muted-foreground">
+                BBO
+              </div>
+              {mint && (
+                <AnimatedPrice
+                  className="font-mono text-xl"
+                  mint={mint}
+                />
+              )}
+              <ChevronDown className="ml-2 h-4 w-4 transition-transform duration-200" />
+            </Button>
+          </AccordionPrimitive.Trigger>
+        </div>
+        <AccordionPrimitive.Content className="overflow-hidden p-4 pl-6 pt-0 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+          <div className="grid grid-cols-2 gap-4">
+            {EXCHANGES.map((exchange) => (
+              <a
+                key={exchange}
+                href={constructExchangeUrl(exchange, base)}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <div className="flex flex-col gap-1">
+                  <span className="font-sans text-xs underline underline-offset-2">
+                    {exchangeToName[exchange]}
+                  </span>
+                  {mint && (
+                    <AnimatedPrice
+                      className="font-mono"
+                      exchange={exchange}
+                      mint={mint}
+                    />
+                  )}
+                </div>
+              </a>
+            ))}
+          </div>
+          <div className="mt-4 text-pretty text-xs text-muted-foreground">
+            {BBO_TOOLTIP}
+          </div>
+        </AccordionPrimitive.Content>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  )
+}
diff --git a/app/trade/[base]/components/new-order/assets-section.tsx b/app/trade/[base]/components/new-order/assets-section.tsx
index 617f050f..67af5844 100644
--- a/app/trade/[base]/components/new-order/assets-section.tsx
+++ b/app/trade/[base]/components/new-order/assets-section.tsx
@@ -1,14 +1,14 @@
-import { Token, useStatus, useBackOfQueueWallet } from "@renegade-fi/react"
+import { Token, useBackOfQueueWallet, useStatus } from "@renegade-fi/react"
 import { formatUnits } from "viem/utils"
 
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { TokenIcon } from "@/components/token-icon"
 import { Button } from "@/components/ui/button"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
 import { useUSDPrice } from "@/hooks/use-usd-price"
 import { formatCurrencyFromString, formatNumber } from "@/lib/format"
@@ -56,9 +56,11 @@ export function AssetsSectionWithDepositButton({
 export function AssetsSection({
   base,
   quote = "USDC",
+  disabled = false,
 }: {
   base: string
   quote?: string
+  disabled?: boolean
 }) {
   const baseToken = Token.findByTicker(base)
   const quoteToken = Token.findByTicker(quote)
@@ -116,21 +118,22 @@ export function AssetsSection({
               disabled={renegadeStatus !== "in relayer"}
               variant="link"
               onClick={(e) => {
-                if (renegadeStatus !== "in relayer") e.preventDefault()
+                if (renegadeStatus !== "in relayer" || disabled)
+                  e.preventDefault()
               }}
             >
               {base}
             </Button>
           </TransferDialog>
         </div>
-        <Tooltip>
-          <TooltipTrigger>
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger>
             <span>{formattedBaseUsdPriceLabel}</span>
-          </TooltipTrigger>
-          <TooltipContent side="right">
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent side="right">
             <p>{`${formattedBaseBalance} ${base}`}</p>
-          </TooltipContent>
-        </Tooltip>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
       </div>
       <div className="flex justify-between">
         <div className="flex items-center space-x-2">
@@ -144,21 +147,22 @@ export function AssetsSection({
               disabled={renegadeStatus !== "in relayer"}
               variant="link"
               onClick={(e) => {
-                if (renegadeStatus !== "in relayer") e.preventDefault()
+                if (renegadeStatus !== "in relayer" || disabled)
+                  e.preventDefault()
               }}
             >
               {quote}
             </Button>
           </TransferDialog>
         </div>
-        <Tooltip>
-          <TooltipTrigger>
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger>
             <span>{formattedQuoteUsdPriceLabel}</span>
-          </TooltipTrigger>
-          <TooltipContent side="right">
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent side="right">
             <p>{`${formattedQuoteBalance} ${quote}`}</p>
-          </TooltipContent>
-        </Tooltip>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
       </div>
     </>
   )
diff --git a/app/trade/[base]/components/new-order/max-orders-warning.tsx b/app/trade/[base]/components/new-order/max-orders-warning.tsx
index 9cb809ec..7532e9ae 100644
--- a/app/trade/[base]/components/new-order/max-orders-warning.tsx
+++ b/app/trade/[base]/components/new-order/max-orders-warning.tsx
@@ -3,31 +3,35 @@ import { AlertTriangle } from "lucide-react"
 import { useIsMaxOrders } from "@/app/trade/[base]/components/new-order/use-is-max-orders"
 
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { MAX_ORDERS_TOOLTIP } from "@/lib/constants/tooltips"
 import { cn } from "@/lib/utils"
 
 export function MaxOrdersWarning({ className }: { className?: string }) {
   const isMaxOrders = useIsMaxOrders()
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   if (isMaxOrders) {
     return (
       <div className="flex w-full items-center justify-center rounded-md bg-[#2A1700] p-3 text-center">
-        <Tooltip>
-          <TooltipTrigger onClick={(e) => e.preventDefault()}>
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger
+            onClick={(e) => isDesktop && e.preventDefault()}
+          >
             <div className={cn("flex items-center gap-2", className)}>
               <AlertTriangle className="h-4 w-4" />
               <span>Maximum order limit reached.</span>
             </div>
-          </TooltipTrigger>
-          <TooltipContent>
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent>
             <p>{MAX_ORDERS_TOOLTIP}</p>
-          </TooltipContent>
-        </Tooltip>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
       </div>
     )
   }
diff --git a/app/trade/[base]/components/new-order/new-order-form.tsx b/app/trade/[base]/components/new-order/new-order-form.tsx
index 2b0f96b1..7088490b 100644
--- a/app/trade/[base]/components/new-order/new-order-form.tsx
+++ b/app/trade/[base]/components/new-order/new-order-form.tsx
@@ -13,11 +13,9 @@ import { FeesSection } from "@/app/trade/[base]/components/new-order/fees-sectio
 import { MaxOrdersWarning } from "@/app/trade/[base]/components/new-order/max-orders-warning"
 import { NoBalanceSlotWarning } from "@/app/trade/[base]/components/new-order/no-balance-slot-warning"
 import { useIsMaxOrders } from "@/app/trade/[base]/components/new-order/use-is-max-orders"
+import { orderFormEvents } from "@/app/trade/[base]/events/order-events"
 
-import {
-  NewOrderConfirmationProps,
-  NewOrderStepper,
-} from "@/components/dialogs/new-order-stepper/new-order-stepper"
+import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 import { TokenSelectDialog } from "@/components/dialogs/token-select-dialog"
 import { NumberInput } from "@/components/number-input"
 import { TokenIcon } from "@/components/token-icon"
@@ -65,9 +63,11 @@ export type NewOrderFormProps = z.infer<typeof formSchema>
 export function NewOrderForm({
   base,
   isUSDCDenominated,
+  onSubmit,
 }: {
   base: string
   isUSDCDenominated?: boolean
+  onSubmit: (values: NewOrderConfirmationProps) => void
 }) {
   const { side, setSide } = useSide()
 
@@ -84,7 +84,6 @@ export function NewOrderForm({
     defaultValues,
   })
   const fees = usePredictedFees(form.watch())
-  const [open, setOpen] = React.useState(false)
   const { priceInUsd, priceInBase } = useOrderValue(form.watch())
   const formattedOrderValue = Number(priceInUsd)
     ? formatCurrencyFromString(priceInUsd)
@@ -121,14 +120,15 @@ export function NewOrderForm({
     }
   }, [form])
 
-  const [lockedFormValues, setLockedFormValues] =
-    React.useState<NewOrderConfirmationProps>({
-      ...defaultValues,
-      ...fees,
+  React.useEffect(() => {
+    const unbind = orderFormEvents.on("reset", () => {
+      form.reset()
     })
 
-  // TODO: Does this need more precision?
-  function onSubmit(values: z.infer<typeof formSchema>) {
+    return unbind
+  }, [form])
+
+  function handleSubmit(values: z.infer<typeof formSchema>) {
     if (parseFloat(priceInUsd) < 1) {
       form.setError("amount", {
         message: "Order value must be at least 1 USDC",
@@ -138,40 +138,100 @@ export function NewOrderForm({
 
     form.trigger().then((isValid) => {
       if (isValid) {
-        setLockedFormValues({
+        onSubmit({
           ...values,
           ...fees,
           amount: values.isUSDCDenominated ? priceInBase : values.amount,
         })
-        setOpen(true)
       }
     })
   }
 
   return (
-    <>
-      <Form {...form}>
-        <form
-          className="space-y-6 px-6"
-          onSubmit={form.handleSubmit(onSubmit)}
-        >
+    <Form {...form}>
+      <form
+        className="space-y-6 px-6"
+        onSubmit={form.handleSubmit(handleSubmit)}
+      >
+        <div className="flex">
+          <FormField
+            control={form.control}
+            name="isSell"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Button
+                    className="w-full font-serif text-2xl font-bold"
+                    size="xl"
+                    type="button"
+                    variant="outline"
+                    {...field}
+                    value={""}
+                    onClick={() => field.onChange(!field.value)}
+                  >
+                    {field.value ? "Sell" : "Buy"}
+                    <ArrowRightLeft className="ml-2 h-5 w-5" />
+                  </Button>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <TokenSelectDialog ticker={base}>
+            <Button
+              className="hidden flex-1 border-l-0 font-serif text-2xl font-bold lg:inline-flex"
+              size="xl"
+              variant="outline"
+            >
+              <TokenIcon
+                className="mr-2"
+                size={22}
+                ticker={base}
+              />
+              {base}
+              <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </TokenSelectDialog>
+        </div>
+        <div>
+          <Label className="font-sans text-muted-foreground">Amount</Label>
           <div className="flex">
             <FormField
               control={form.control}
-              name="isSell"
+              name="amount"
               render={({ field }) => (
                 <FormItem className="flex-1">
+                  <FormControl>
+                    <NumberInput
+                      className="h-12 rounded-none border-none px-0 text-right font-mono text-2xl placeholder:text-right focus-visible:ring-0"
+                      placeholder="0.00"
+                      {...field}
+                      type="number"
+                      value={field.value}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="isUSDCDenominated"
+              render={({ field }) => (
+                <FormItem>
                   <FormControl>
                     <Button
-                      className="w-full font-serif text-2xl font-bold"
-                      size="xl"
+                      className="h-12 flex-1 rounded-none px-2 py-0 font-serif text-2xl font-bold"
                       type="button"
-                      variant="outline"
+                      variant="ghost"
                       {...field}
                       value={""}
-                      onClick={() => field.onChange(!field.value)}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        field.onChange(!field.value)
+                      }}
                     >
-                      {field.value ? "Sell" : "Buy"}
+                      {field.value ? "USDC" : base}
                       <ArrowRightLeft className="ml-2 h-5 w-5" />
                     </Button>
                   </FormControl>
@@ -179,157 +239,87 @@ export function NewOrderForm({
                 </FormItem>
               )}
             />
-            <TokenSelectDialog ticker={base}>
-              <Button
-                className="flex-1 border-l-0 font-serif text-2xl font-bold"
-                size="xl"
-                variant="outline"
-              >
-                <TokenIcon
-                  className="mr-2"
-                  size={22}
-                  ticker={base}
-                />
-                {base}
-                <ChevronDown className="ml-2 h-4 w-4" />
-              </Button>
-            </TokenSelectDialog>
           </div>
+        </div>
+        <div className="grid grid-cols-3">
+          <AmountShortcutButton
+            {...form.watch()}
+            percentage={25}
+            onSetAmount={(amount) =>
+              form.setValue("amount", amount, { shouldValidate: true })
+            }
+          />
+          <AmountShortcutButton
+            {...form.watch()}
+            className="border-x-0"
+            percentage={50}
+            onSetAmount={(amount) =>
+              form.setValue("amount", amount, { shouldValidate: true })
+            }
+          />
+          <AmountShortcutButton
+            {...form.watch()}
+            percentage={100}
+            onSetAmount={(amount) =>
+              form.setValue("amount", amount, { shouldValidate: true })
+            }
+          />
+        </div>
+        <MaxOrdersWarning className="text-sm text-orange-400" />
+        <NoBalanceSlotWarning
+          className="text-sm text-orange-400"
+          isSell={form.getValues("isSell")}
+          ticker={base}
+        />
+        {status === "in relayer" ? (
           <div>
-            <Label className="font-sans text-muted-foreground">Amount</Label>
-            <div className="flex">
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormControl>
-                      <NumberInput
-                        className="h-12 rounded-none border-none px-0 text-right font-mono text-2xl placeholder:text-right focus-visible:ring-0"
-                        placeholder="0.00"
-                        {...field}
-                        autoFocus
-                        type="number"
-                        value={field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="isUSDCDenominated"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Button
-                        className="h-12 flex-1 rounded-none px-2 py-0 font-serif text-2xl font-bold"
-                        type="button"
-                        variant="ghost"
-                        {...field}
-                        value={""}
-                        onClick={(e) => {
-                          e.preventDefault()
-                          field.onChange(!field.value)
-                        }}
-                      >
-                        {field.value ? "USDC" : base}
-                        <ArrowRightLeft className="ml-2 h-5 w-5" />
-                      </Button>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-          </div>
-          <div className="grid grid-cols-3">
-            <AmountShortcutButton
-              {...form.watch()}
-              percentage={25}
-              onSetAmount={(amount) =>
-                form.setValue("amount", amount, { shouldValidate: true })
-              }
-            />
-            <AmountShortcutButton
-              {...form.watch()}
-              className="border-x-0"
-              percentage={50}
-              onSetAmount={(amount) =>
-                form.setValue("amount", amount, { shouldValidate: true })
-              }
-            />
-            <AmountShortcutButton
-              {...form.watch()}
-              percentage={100}
-              onSetAmount={(amount) =>
-                form.setValue("amount", amount, { shouldValidate: true })
-              }
-            />
+            <Button
+              className="flex w-full font-serif text-2xl font-bold"
+              disabled={!form.formState.isValid || isMaxOrders}
+              size="xl"
+              variant="default"
+            >
+              {form.getValues("isSell") ? "Sell" : "Buy"} {base}
+            </Button>
           </div>
-          <MaxOrdersWarning className="text-sm text-orange-400" />
-          <NoBalanceSlotWarning
-            className="text-sm text-orange-400"
-            isSell={form.getValues("isSell")}
-            ticker={base}
-          />
-          {status === "in relayer" ? (
-            <div>
-              <Button
-                className="flex w-full font-serif text-2xl font-bold"
-                disabled={!form.formState.isValid || isMaxOrders}
-                size="xl"
-                variant="default"
-              >
-                {form.getValues("isSell") ? "Sell" : "Buy"} {base}
-              </Button>
-            </div>
-          ) : (
-            <ConnectButton className="flex w-full font-serif text-2xl font-bold" />
-          )}
-          <div className="space-y-3 whitespace-nowrap text-sm">
-            <div className="flex items-center justify-between">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    asChild
-                    className="h-5 cursor-pointer p-0 text-sm text-muted-foreground"
-                    type="button"
-                    variant="link"
+        ) : (
+          <ConnectButton className="flex w-full font-serif text-2xl font-bold" />
+        )}
+        <div className="space-y-3 whitespace-nowrap text-sm">
+          <div className="flex items-center justify-between">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  asChild
+                  className="h-5 cursor-pointer p-0 text-sm text-muted-foreground"
+                  type="button"
+                  variant="link"
+                >
+                  <a
+                    href={`https://help.renegade.fi/hc/en-us/articles/32530574872211-How-does-Renegade-s-midpoint-peg-pricing-work`}
+                    rel="noreferrer"
+                    target="_blank"
                   >
-                    <a
-                      href={`https://help.renegade.fi/hc/en-us/articles/32530574872211-How-does-Renegade-s-midpoint-peg-pricing-work`}
-                      rel="noreferrer"
-                      target="_blank"
-                    >
-                      Type
-                    </a>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{MIDPOINT_TOOLTIP}</p>
-                </TooltipContent>
-              </Tooltip>
-              <div>Midpoint</div>
-            </div>
-            <div className="flex items-center justify-between">
-              <div className="text-muted-foreground">Order Value</div>
-              <div>{formattedOrderValue}</div>
-            </div>
-            <FeesSection
-              amount={form.watch("amount")}
-              {...fees}
-            />
+                    Type
+                  </a>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{MIDPOINT_TOOLTIP}</p>
+              </TooltipContent>
+            </Tooltip>
+            <div>Midpoint</div>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="text-muted-foreground">Order Value</div>
+            <div>{formattedOrderValue}</div>
           </div>
-          <NewOrderStepper
-            {...lockedFormValues}
-            open={open}
-            setOpen={setOpen}
-            onSuccess={() => form.reset()}
+          <FeesSection
+            amount={form.watch("amount")}
+            {...fees}
           />
-        </form>
-      </Form>
-    </>
+        </div>
+      </form>
+    </Form>
   )
 }
diff --git a/app/trade/[base]/components/new-order/new-order-panel.tsx b/app/trade/[base]/components/new-order/new-order-panel.tsx
index 3d0d4023..905174e6 100644
--- a/app/trade/[base]/components/new-order/new-order-panel.tsx
+++ b/app/trade/[base]/components/new-order/new-order-panel.tsx
@@ -1,13 +1,17 @@
+import * as React from "react"
+
 import { Lock } from "lucide-react"
 
 import { AssetsSectionWithDepositButton } from "@/app/trade/[base]/components/new-order/assets-section"
 import { NewOrderForm } from "@/app/trade/[base]/components/new-order/new-order-form"
 
+import {
+  NewOrderConfirmationProps,
+  NewOrderStepper,
+} from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 
-import { Side } from "@/lib/constants/protocol"
-
 export function NewOrderPanel({
   base,
   isUSDCDenominated,
@@ -15,6 +19,15 @@ export function NewOrderPanel({
   base: string
   isUSDCDenominated?: boolean
 }) {
+  const [open, setOpen] = React.useState(false)
+  const [lockedFormValues, setLockedFormValues] =
+    React.useState<NewOrderConfirmationProps | null>(null)
+
+  const handleSubmit = (values: NewOrderConfirmationProps) => {
+    setLockedFormValues(values)
+    setOpen(true)
+  }
+
   return (
     <aside className="space-y-6">
       <div className="px-6 pt-6 text-sm">
@@ -24,7 +37,15 @@ export function NewOrderPanel({
       <NewOrderForm
         base={base}
         isUSDCDenominated={isUSDCDenominated}
+        onSubmit={handleSubmit}
       />
+      {lockedFormValues && (
+        <NewOrderStepper
+          {...lockedFormValues}
+          open={open}
+          setOpen={setOpen}
+        />
+      )}
       <div className="px-6">
         <Button
           asChild
@@ -32,10 +53,7 @@ export function NewOrderPanel({
           variant="link"
         >
           <a
-            // TODO: Add link to help center
-            href={
-              "https://help.renegade.fi/hc/en-us/articles/32760870056723-What-is-pre-trade-and-post-trade-privacy"
-            }
+            href="https://help.renegade.fi/hc/en-us/articles/32760870056723-What-is-pre-trade-and-post-trade-privacy"
             rel="noreferrer"
             target="_blank"
           >
diff --git a/app/trade/[base]/components/new-order/no-balance-slot-warning.tsx b/app/trade/[base]/components/new-order/no-balance-slot-warning.tsx
index 109282d6..1a61d4da 100644
--- a/app/trade/[base]/components/new-order/no-balance-slot-warning.tsx
+++ b/app/trade/[base]/components/new-order/no-balance-slot-warning.tsx
@@ -3,11 +3,12 @@ import { AlertTriangle } from "lucide-react"
 
 import { useIsMaxBalances } from "@/components/dialogs/transfer/use-is-max-balances"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { MAX_BALANCES_PLACE_ORDER_TOOLTIP } from "@/lib/constants/tooltips"
 import { cn } from "@/lib/utils"
 
@@ -24,21 +25,24 @@ export function NoBalanceSlotWarning({
     ? Token.findByTicker("USDC")?.address
     : Token.findByTicker(ticker)?.address
   const isMaxBalances = useIsMaxBalances(receiveMint)
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   if (isMaxBalances) {
     return (
       <div className="flex w-full items-center justify-center rounded-md bg-[#2A1700] p-3 text-center">
-        <Tooltip>
-          <TooltipTrigger onClick={(e) => e.preventDefault()}>
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger
+            onClick={(e) => isDesktop && e.preventDefault()}
+          >
             <div className={cn("flex items-center gap-2", className)}>
               <AlertTriangle className="h-4 w-4" />
               <span>No balance slot available.</span>
             </div>
-          </TooltipTrigger>
-          <TooltipContent>
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent>
             <p>{MAX_BALANCES_PLACE_ORDER_TOOLTIP}</p>
-          </TooltipContent>
-        </Tooltip>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
       </div>
     )
   }
diff --git a/app/trade/[base]/components/order-details/details-content.tsx b/app/trade/[base]/components/order-details/details-content.tsx
index ed8580cd..43d75d02 100644
--- a/app/trade/[base]/components/order-details/details-content.tsx
+++ b/app/trade/[base]/components/order-details/details-content.tsx
@@ -12,13 +12,13 @@ import { InsufficientWarning } from "@/app/trade/[base]/components/order-details
 import { OrderStatusIndicator } from "@/app/trade/[base]/components/order-details/order-status-indicator"
 
 import { Progress } from "@/components/ui/progress"
+import {
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
 
 import { amountTimesPrice } from "@/hooks/use-usd-price"
 import { Side } from "@/lib/constants/protocol"
@@ -103,7 +103,7 @@ export function DetailsContent({ order }: { order: OrderMetadata }) {
 
   return (
     <ScrollArea className="h-full">
-      <div className="flex p-6">
+      <div className="flex flex-col gap-4 p-6 lg:flex-row">
         <OrderStatusIndicator order={order} />
         {isOpen && (
           <InsufficientWarning
@@ -114,7 +114,7 @@ export function DetailsContent({ order }: { order: OrderMetadata }) {
             side={order.data.side === "Buy" ? Side.BUY : Side.SELL}
           />
         )}
-        <div className="ml-auto flex">
+        <div className="flex lg:ml-auto">
           <CancelButton
             id={order.id}
             isDisabled={!isCancellable}
@@ -129,36 +129,33 @@ export function DetailsContent({ order }: { order: OrderMetadata }) {
         </div>
       </div>
       <Separator />
-      <div className="flex h-24 items-center">
-        <div className="flex-1 px-6">
-          <div className="text-sm">{formatOrderState[order.state]}</div>
-          <Tooltip>
-            <TooltipTrigger>
-              <div className="text-sm">{title}</div>
-            </TooltipTrigger>
-            <TooltipContent>
+      <div className="flex flex-col items-center lg:flex-row lg:text-sm">
+        <div className="w-full flex-1 px-6 py-4 lg:w-auto lg:border-r">
+          <div>{formatOrderState[order.state]}</div>
+          <ResponsiveTooltip>
+            <ResponsiveTooltipTrigger>
+              <div>{title}</div>
+            </ResponsiveTooltipTrigger>
+            <ResponsiveTooltipContent>
               <p className="font-sans">{titleLong}</p>
-            </TooltipContent>
-          </Tooltip>
-          <div className="text-sm">Midpoint Peg</div>
+            </ResponsiveTooltipContent>
+          </ResponsiveTooltip>
+          <div>Midpoint Peg</div>
         </div>
-        <Separator
-          className="h-full"
-          orientation="vertical"
-        />
-        <div className="flex-1 px-6">
-          <div className="text-sm">Filled</div>
-          <Tooltip>
-            <TooltipTrigger>
+        <Separator className="lg:hidden" />
+        <div className="w-full flex-1 px-6 py-4 lg:w-auto">
+          <div>Filled</div>
+          <ResponsiveTooltip>
+            <ResponsiveTooltipTrigger>
               <span className="flex justify-center">{filledLabel}</span>
-            </TooltipTrigger>
-            <TooltipContent>
+            </ResponsiveTooltipTrigger>
+            <ResponsiveTooltipContent>
               <p className="font-sans">{filledLabelLong}</p>
-            </TooltipContent>
-          </Tooltip>
+            </ResponsiveTooltipContent>
+          </ResponsiveTooltip>
           <div className="flex items-center gap-2">
             <Progress value={percentageFilled} />
-            <div className="text-sm">{percentageFilledLabel}</div>
+            <div>{percentageFilledLabel}</div>
           </div>
         </div>
       </div>
diff --git a/app/trade/[base]/components/order-details/empty-content.tsx b/app/trade/[base]/components/order-details/empty-content.tsx
index 77ca2f23..4985d74d 100644
--- a/app/trade/[base]/components/order-details/empty-content.tsx
+++ b/app/trade/[base]/components/order-details/empty-content.tsx
@@ -8,12 +8,12 @@ import { InsufficientWarning } from "@/app/trade/[base]/components/order-details
 import { OrderStatusIndicator } from "@/app/trade/[base]/components/order-details/order-status-indicator"
 
 import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
+import { Separator } from "@/components/ui/separator"
 
 import { Side } from "@/lib/constants/protocol"
 import { formatNumber, formatOrderState } from "@/lib/format"
@@ -44,7 +44,7 @@ export function EmptyContent({ order }: { order: OrderMetadata }) {
 
   return (
     <>
-      <div className="flex p-6">
+      <div className="flex flex-col gap-4 p-6 lg:flex-row">
         <OrderStatusIndicator order={order} />
         {isOpen && (
           <InsufficientWarning
@@ -55,7 +55,7 @@ export function EmptyContent({ order }: { order: OrderMetadata }) {
             side={order.data.side === "Buy" ? Side.BUY : Side.SELL}
           />
         )}
-        <div className="ml-auto flex">
+        <div className="flex lg:ml-auto">
           <CancelButton
             id={order.id}
             isDisabled={!isCancellable}
@@ -64,22 +64,22 @@ export function EmptyContent({ order }: { order: OrderMetadata }) {
       </div>
       <Separator />
       <div className="flex h-24 items-center">
-        <div className="flex-1 px-6">
-          <div className="text-sm">{formatOrderState[order.state]}</div>
-          <Tooltip>
-            <TooltipTrigger>
-              <div className="text-sm">{title}</div>
-            </TooltipTrigger>
-            <TooltipContent>
+        <div className="flex-1 px-6 py-4 lg:text-sm">
+          <div>{formatOrderState[order.state]}</div>
+          <ResponsiveTooltip>
+            <ResponsiveTooltipTrigger>
+              <div>{title}</div>
+            </ResponsiveTooltipTrigger>
+            <ResponsiveTooltipContent>
               <p className="font-sans">{titleLong}</p>
-            </TooltipContent>
-          </Tooltip>
-          <div className="text-sm">Midpoint Peg</div>
+            </ResponsiveTooltipContent>
+          </ResponsiveTooltip>
+          <div>Midpoint Peg</div>
         </div>
       </div>
       <Separator />
-      <div className="grid h-[500px] place-items-center">
-        <div className="flex flex-col items-center gap-10">
+      <div className="grid h-[500px] place-items-center p-4">
+        <div className="flex flex-col items-center gap-10 text-pretty text-center">
           <Image
             priority
             alt="logo"
@@ -93,7 +93,7 @@ export function EmptyContent({ order }: { order: OrderMetadata }) {
           </div>
           <Button
             asChild
-            className="p-0 text-sm text-muted-foreground"
+            className="p-0 text-muted-foreground"
             variant="link"
           >
             <a
diff --git a/app/trade/[base]/components/order-details/insufficient-warning.tsx b/app/trade/[base]/components/order-details/insufficient-warning.tsx
index c41dbdcb..39953cf5 100644
--- a/app/trade/[base]/components/order-details/insufficient-warning.tsx
+++ b/app/trade/[base]/components/order-details/insufficient-warning.tsx
@@ -3,10 +3,10 @@ import { AlertTriangle } from "lucide-react"
 import { formatUnits } from "viem/utils"
 
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
 import { useUSDPrice } from "@/hooks/use-usd-price"
 import { Side } from "@/lib/constants/protocol"
@@ -65,21 +65,21 @@ export function InsufficientWarning({
         "flex items-center": !richColors,
       })}
     >
-      <Tooltip>
-        <TooltipTrigger>
+      <ResponsiveTooltip>
+        <ResponsiveTooltipTrigger>
           <div className={cn("flex items-center gap-2", className)}>
             <AlertTriangle className="h-4 w-4" />
             <span>Only part of the order will be filled.</span>
           </div>
-        </TooltipTrigger>
-        <TooltipContent>
+        </ResponsiveTooltipTrigger>
+        <ResponsiveTooltipContent>
           <p>
             {INSUFFICIENT_BALANCE_TOOLTIP({
               ticker: token.ticker,
             })}
           </p>
-        </TooltipContent>
-      </Tooltip>
+        </ResponsiveTooltipContent>
+      </ResponsiveTooltip>
     </div>
   )
 }
diff --git a/app/trade/[base]/components/order-details/order-details-sheet.tsx b/app/trade/[base]/components/order-details/order-details-sheet.tsx
index edbbec52..5bc4e473 100644
--- a/app/trade/[base]/components/order-details/order-details-sheet.tsx
+++ b/app/trade/[base]/components/order-details/order-details-sheet.tsx
@@ -4,6 +4,14 @@ import { OrderMetadata } from "@renegade-fi/react"
 import { DetailsContent } from "@/app/trade/[base]/components/order-details/details-content"
 import { EmptyContent } from "@/app/trade/[base]/components/order-details/empty-content"
 
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
 import {
   Sheet,
   SheetContent,
@@ -13,6 +21,8 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
+
 export function OrderDetailsSheet({
   children,
   order,
@@ -20,28 +30,51 @@ export function OrderDetailsSheet({
   children: React.ReactNode
   order: OrderMetadata
 }) {
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
+  if (isDesktop) {
+    return (
+      <Sheet>
+        <SheetTrigger asChild>{children}</SheetTrigger>
+        <SheetContent
+          hideCloseButton
+          className="p-0 sm:w-[576px] sm:max-w-[576px]"
+          onOpenAutoFocus={(e) => {
+            e.preventDefault()
+          }}
+        >
+          <SheetHeader>
+            <VisuallyHidden>
+              <SheetTitle>Order Details</SheetTitle>
+              <SheetDescription>View order details</SheetDescription>
+            </VisuallyHidden>
+          </SheetHeader>
+          {order.fills.length ? (
+            <DetailsContent order={order} />
+          ) : (
+            <EmptyContent order={order} />
+          )}
+        </SheetContent>
+      </Sheet>
+    )
+  }
   return (
-    <Sheet>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent
-        hideCloseButton
-        className="p-0 sm:w-[576px] sm:max-w-[576px]"
-        onOpenAutoFocus={(e) => {
-          e.preventDefault()
-        }}
-      >
-        <SheetHeader>
+    <Drawer>
+      <DrawerTrigger asChild>{children}</DrawerTrigger>
+      <DrawerContent className="max-h-[90dvh]">
+        <div className="overflow-auto">
           <VisuallyHidden>
-            <SheetTitle>Order Details</SheetTitle>
-            <SheetDescription>View order details</SheetDescription>
+            <DrawerHeader>
+              <DrawerTitle>Order Details</DrawerTitle>
+              <DrawerDescription>View order details</DrawerDescription>
+            </DrawerHeader>
           </VisuallyHidden>
-        </SheetHeader>
-        {order.fills.length ? (
-          <DetailsContent order={order} />
-        ) : (
-          <EmptyContent order={order} />
-        )}
-      </SheetContent>
-    </Sheet>
+          {order.fills.length ? (
+            <DetailsContent order={order} />
+          ) : (
+            <EmptyContent order={order} />
+          )}
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }
diff --git a/app/trade/[base]/events/order-events.ts b/app/trade/[base]/events/order-events.ts
new file mode 100644
index 00000000..1d90e647
--- /dev/null
+++ b/app/trade/[base]/events/order-events.ts
@@ -0,0 +1,5 @@
+import { createNanoEvents } from "nanoevents"
+
+export const orderFormEvents = createNanoEvents<{
+  reset: () => void
+}>()
diff --git a/app/trade/[base]/page-client.tsx b/app/trade/[base]/page-client.tsx
index 2d9c1f55..9115d014 100644
--- a/app/trade/[base]/page-client.tsx
+++ b/app/trade/[base]/page-client.tsx
@@ -1,25 +1,23 @@
 "use client"
 
-import React from "react"
+import React, { useMemo } from "react"
 
 import { DepositBanner } from "@/app/components/deposit-banner"
+import { MobileBottomBar } from "@/app/components/mobile-bottom-bar"
 import { columns } from "@/app/orders/columns"
 import { DataTable } from "@/app/orders/data-table"
 import { BBOMarquee } from "@/app/trade/[base]/components/bbo-marquee"
 import { PriceChart } from "@/app/trade/[base]/components/charts/price-chart"
+import { MobileAssetPriceAccordion } from "@/app/trade/[base]/components/mobile-asset-price-accordion"
 import { NewOrderPanel } from "@/app/trade/[base]/components/new-order/new-order-panel"
 
 import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
 import { Separator } from "@/components/ui/separator"
 
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { useMounted } from "@/hooks/use-mounted"
 import { useOrderTableData } from "@/hooks/use-order-table-data"
-import { Side } from "@/lib/constants/protocol"
 import { STORAGE_LAYOUT } from "@/lib/constants/storage"
 
 const DEFAULT_LAYOUT = [22, 78]
-const DEFAULT_SIDE = Math.random() < 0.5 ? Side.BUY : Side.SELL
 
 // Prevents re-render when side changes
 const PriceChartMemo = React.memo(PriceChart)
@@ -33,65 +31,62 @@ export function PageClient({
   base: string
   isUSDCDenominated?: boolean
 }) {
-  // const onLayout = (sizes: number[]) => {
-  //   document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}; path=/; SameSite=Strict; Secure`
-  // }
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-  const isMounted = useMounted()
-
   const data = useOrderTableData()
 
   return (
     <div>
       <DepositBanner />
       <BBOMarquee base={base} />
+      <MobileAssetPriceAccordion base={base} />
       <ResizablePanelGroup
         autoSaveId={STORAGE_LAYOUT}
         direction="horizontal"
-        // onLayout={onLayout}
       >
-        {(!isMounted || (isMounted && isDesktop)) && (
-          <>
-            <ResizablePanel
-              defaultSize={defaultLayout[0]}
-              maxSize={50}
-              minSize={DEFAULT_LAYOUT[0]}
-              order={1}
-            >
-              <NewOrderPanel
-                base={base}
-                isUSDCDenominated={isUSDCDenominated}
-              />
-            </ResizablePanel>
-            {/* <ResizableHandle /> */}
-          </>
-        )}
-        <Separator orientation="vertical" />
+        <ResizablePanel
+          className="hidden lg:block"
+          defaultSize={defaultLayout[0]}
+          maxSize={50}
+          minSize={DEFAULT_LAYOUT[0]}
+          order={1}
+        >
+          <NewOrderPanel
+            base={base}
+            isUSDCDenominated={isUSDCDenominated}
+          />
+        </ResizablePanel>
+        {/* <ResizableHandle /> */}
+
+        <Separator
+          className="hidden lg:block"
+          orientation="vertical"
+        />
         <ResizablePanel
           defaultSize={defaultLayout[1]}
           order={2}
         >
           <main>
-            <div className="overflow-auto">
-              <PriceChartMemo base={base} />
-              <Separator />
-              <div className="p-6">
-                <DataTable
-                  isTradePage
-                  columns={columns}
-                  data={data}
-                  initialStatus="open"
-                  initialVisibleColumns={{
-                    "time to fill": false,
-                    actions: false,
-                    saved: false,
-                  }}
-                />
-              </div>
+            <PriceChartMemo base={base} />
+            <Separator />
+            <div className="p-6">
+              <DataTable
+                isTradePage
+                columns={columns}
+                data={data}
+                initialStatus="open"
+                initialVisibleColumns={{
+                  "time to fill": false,
+                  actions: false,
+                  saved: false,
+                }}
+              />
             </div>
           </main>
         </ResizablePanel>
       </ResizablePanelGroup>
+      <MobileBottomBar
+        base={base}
+        isUSDCDenominated={isUSDCDenominated}
+      />
     </div>
   )
 }
diff --git a/app/trade/[base]/page.tsx b/app/trade/[base]/page.tsx
index f89fd52a..ca0ea666 100644
--- a/app/trade/[base]/page.tsx
+++ b/app/trade/[base]/page.tsx
@@ -53,7 +53,7 @@ export default async function Page({ params }: { params: { base: string } }) {
     : false
 
   return (
-    <div className="grid min-h-screen grid-rows-[auto_1fr_auto_auto]">
+    <div className="grid min-h-screen max-w-full grid-cols-1 grid-rows-[auto_1fr_auto_auto]">
       <div className="min-h-20">
         <Header />
       </div>
@@ -64,7 +64,7 @@ export default async function Page({ params }: { params: { base: string } }) {
           isUSDCDenominated={defaultUseUSDC}
         />
       </HydrationBoundary>
-      <div className="sticky bottom-20 min-h-marquee overflow-hidden">
+      <div className="sticky bottom-20 hidden min-h-marquee overflow-hidden lg:block">
         <FavoritesBanner />
       </div>
       <div className="min-h-20">
diff --git a/components/dialogs/new-order-stepper/steps/success-without-savings.tsx b/components/dialogs/new-order-stepper/steps/success-without-savings.tsx
deleted file mode 100644
index 28841c45..00000000
--- a/components/dialogs/new-order-stepper/steps/success-without-savings.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import * as React from "react"
-
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
-import { TaskState, useTaskHistoryWebSocket } from "@renegade-fi/react"
-import { AlertCircle, Check, Loader2, Repeat } from "lucide-react"
-
-import { useStepper } from "@/components/dialogs/new-order-stepper/new-order-stepper"
-import { Button } from "@/components/ui/button"
-import {
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  DrawerClose,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer"
-import { ScrollArea } from "@/components/ui/scroll-area"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { formatTaskState } from "@/lib/constants/task"
-import { cn } from "@/lib/utils"
-
-const states: TaskState[] = [
-  "Proving",
-  "Submitting Tx",
-  "Finding Opening",
-  "Updating Validity Proofs",
-  "Completed",
-]
-
-export function SuccessStepWithoutSavings() {
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-  const { taskId } = useStepper()
-  const [status, setStatus] = React.useState<"pending" | "success" | "error">(
-    "pending",
-  )
-  const [orderStatus, setOrderStatus] = React.useState<TaskState>("Proving")
-  const formattedOrderStatus = orderStatus
-    ? formatTaskState(orderStatus)
-    : undefined
-
-  useTaskHistoryWebSocket({
-    onUpdate(task) {
-      if (task.id === taskId) {
-        if (task.state === "Completed") {
-          setStatus("success")
-        } else if (task.state === "Failed") {
-          setStatus("error")
-        }
-        setOrderStatus(task.state)
-      }
-    },
-  })
-
-  const Icon = {
-    success: <Check className="h-6 w-6" />,
-    pending: <Loader2 className="h-6 w-6 animate-spin" />,
-    error: <AlertCircle className="h-6 w-6" />,
-  }[status]
-
-  const title = {
-    success: "Order Placed",
-    pending: "Placing Order",
-    error: "Failed to Place Order",
-  }[status]
-
-  if (isDesktop) {
-    return (
-      <>
-        <DialogHeader className="space-y-4 px-6 pt-6">
-          <DialogTitle className="flex items-center gap-2 font-extended">
-            {Icon}
-            {title}
-          </DialogTitle>
-          <VisuallyHidden>
-            <DialogDescription>Your order has been placed.</DialogDescription>
-          </VisuallyHidden>
-        </DialogHeader>
-        <div className="space-y-6 p-6">
-          <div className="space-y-1 border p-4 font-mono">
-            {states.map((state, i) => (
-              <div
-                key={state}
-                className={cn(
-                  "flex items-center justify-between transition-colors hover:text-primary",
-                  {
-                    "animate-pulse":
-                      orderStatus === state && orderStatus !== "Completed",
-                    "text-muted": orderStatus !== state,
-                  },
-                )}
-              >
-                {i + 1}. {formatTaskState(state)}{" "}
-                {orderStatus === state && orderStatus !== "Completed" && (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                )}
-                {orderStatus === "Completed" &&
-                  i === states.indexOf(orderStatus) && (
-                    <Check className="h-4 w-4" />
-                  )}
-                {states.indexOf(orderStatus) > i && (
-                  <Check className="h-4 w-4" />
-                )}
-              </div>
-            ))}
-          </div>
-
-          <OrderSuccessSection />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button
-              autoFocus
-              className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
-              size="xl"
-              variant="outline"
-            >
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <DrawerHeader className="text-left">
-        <DrawerTitle className="font-extended">Order Placed</DrawerTitle>
-      </DrawerHeader>
-      <ScrollArea className="max-h-[60vh] overflow-auto">
-        <div className="space-y-6 p-4">
-          <OrderSuccessSection />
-        </div>
-      </ScrollArea>
-      <DrawerFooter className="pt-2">
-        <DrawerClose asChild>
-          <Button
-            autoFocus
-            variant="outline"
-          >
-            Close
-          </Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </>
-  )
-}
-
-const DID_YOU_KNOW_CONTENT = [
-  {
-    text: "All trades are pre-trade and post-trade private.",
-    link: "https://help.renegade.fi/hc/en-us/articles/32760870056723-What-is-pre-trade-and-post-trade-privacy",
-  },
-  {
-    text: "All trades clear at the midpoint of the Binance bid-ask spread.",
-    link: "https://help.renegade.fi/hc/en-us/articles/32530574872211-What-is-a-midpoint-peg",
-  },
-  {
-    text: "Trading in Renegade has zero MEV, slippage, or price impact.",
-    link: "https://help.renegade.fi/hc/en-us/articles/32762213393043-Does-Renegade-really-have-zero-MEV-copy-trading-slippage-or-price-impact",
-  },
-] as const
-
-function OrderSuccessSection() {
-  const [randomContent, setRandomContent] = React.useState(() => {
-    const randomIndex = Math.floor(Math.random() * DID_YOU_KNOW_CONTENT.length)
-    return DID_YOU_KNOW_CONTENT[randomIndex]
-  })
-
-  const handleRefresh = () => {
-    let newIndex: number
-    do {
-      newIndex = Math.floor(Math.random() * DID_YOU_KNOW_CONTENT.length)
-    } while (DID_YOU_KNOW_CONTENT[newIndex] === randomContent)
-    setRandomContent(DID_YOU_KNOW_CONTENT[newIndex])
-  }
-
-  return (
-    <>
-      <div className="space-y-2 border p-4 pt-2 text-sm text-muted-foreground">
-        <div className="flex items-center justify-between">
-          Did you know?
-          <Button
-            className="rounded-none"
-            size="icon"
-            variant="ghost"
-            onClick={handleRefresh}
-          >
-            <Repeat className="h-4 w-4" />
-          </Button>
-        </div>
-        <Button
-          asChild
-          className="text-pretty p-0 text-sm text-muted-foreground"
-          variant="link"
-        >
-          <a
-            href={randomContent.link}
-            rel="noreferrer"
-            target="_blank"
-          >
-            {randomContent.text}
-          </a>
-        </Button>
-      </div>
-      {/* <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-        <Checkbox id="donot-show-again" />
-        <label
-          htmlFor="donot-show-again"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Don&apos;t show again
-        </label>
-      </div> */}
-    </>
-  )
-}
diff --git a/components/dialogs/new-order-stepper/new-order-stepper.tsx b/components/dialogs/order-stepper/desktop/new-order-stepper.tsx
similarity index 55%
rename from components/dialogs/new-order-stepper/new-order-stepper.tsx
rename to components/dialogs/order-stepper/desktop/new-order-stepper.tsx
index 08974f9c..cb0c3b61 100644
--- a/components/dialogs/new-order-stepper/new-order-stepper.tsx
+++ b/components/dialogs/order-stepper/desktop/new-order-stepper.tsx
@@ -4,9 +4,8 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 
 import { NewOrderFormProps } from "@/app/trade/[base]/components/new-order/new-order-form"
 
-import { DefaultStep } from "@/components/dialogs/new-order-stepper/steps/default"
-import { SuccessStep } from "@/components/dialogs/new-order-stepper/steps/success"
-import { SuccessStepWithoutSavings } from "@/components/dialogs/new-order-stepper/steps/success-without-savings"
+import { DefaultStep } from "@/components/dialogs/order-stepper/desktop/steps/default"
+import { SuccessStepWithoutSavings } from "@/components/dialogs/order-stepper/desktop/steps/success-without-savings"
 import {
   Dialog,
   DialogContent,
@@ -15,10 +14,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { useOrderValue } from "@/hooks/use-order-value"
 
 export interface NewOrderConfirmationProps extends NewOrderFormProps {
   onSuccess?: () => void
@@ -32,68 +27,22 @@ export function NewOrderStepperInner({
   ...props
 }: React.PropsWithChildren<NewOrderConfirmationProps>) {
   const { step, open, setOpen } = useStepper()
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  const { amount, isUSDCDenominated, base } = props
-  const { priceInUsd } = useOrderValue({ ...props })
-  let baseAmount = amount
-  if (isUSDCDenominated && priceInUsd) {
-    baseAmount = priceInUsd
-  }
-
-  if (isDesktop) {
-    return (
-      <Dialog
-        open={open}
-        onOpenChange={setOpen}
-      >
-        <DialogTrigger asChild>{children}</DialogTrigger>
-        <DialogHeader className="sr-only">
-          <VisuallyHidden>
-            <DialogTitle className="font-extended">Review Order</DialogTitle>
-            <DialogDescription>
-              Review your order before placing it.
-            </DialogDescription>
-          </VisuallyHidden>
-        </DialogHeader>
-        <DialogContent
-          className="p-0 sm:max-w-[425px]"
-          onOpenAutoFocus={(e) => {
-            e.preventDefault()
-          }}
-        >
-          {step === Step.DEFAULT && (
-            <DefaultStep
-              {...props}
-              amount={baseAmount}
-            />
-          )}
-          {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
-        </DialogContent>
-      </Dialog>
-    )
-  }
   return (
-    <Drawer
+    <Dialog
       open={open}
       onOpenChange={setOpen}
     >
-      <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent>
-        {step === Step.DEFAULT && (
-          <DefaultStep
-            {...props}
-            amount={baseAmount}
-          />
-        )}
-        {step === Step.SUCCESS && (
-          <SuccessStep
-            {...props}
-            amount={baseAmount}
-          />
-        )}
-      </DrawerContent>
-    </Drawer>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent
+        className="p-0 sm:max-w-[425px]"
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+        }}
+      >
+        {step === Step.DEFAULT && <DefaultStep {...props} />}
+        {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/components/dialogs/new-order-stepper/steps/default.tsx b/components/dialogs/order-stepper/desktop/steps/default.tsx
similarity index 70%
rename from components/dialogs/new-order-stepper/steps/default.tsx
rename to components/dialogs/order-stepper/desktop/steps/default.tsx
index 1459ca71..9a8fb55b 100644
--- a/components/dialogs/new-order-stepper/steps/default.tsx
+++ b/components/dialogs/order-stepper/desktop/steps/default.tsx
@@ -7,11 +7,12 @@ import { toast } from "sonner"
 import { FeesSection } from "@/app/trade/[base]/components/new-order/fees-sections"
 import { NoBalanceSlotWarning } from "@/app/trade/[base]/components/new-order/no-balance-slot-warning"
 import { InsufficientWarning } from "@/app/trade/[base]/components/order-details/insufficient-warning"
+import { orderFormEvents } from "@/app/trade/[base]/events/order-events"
 
 import {
   NewOrderConfirmationProps,
   useStepper,
-} from "@/components/dialogs/new-order-stepper/new-order-stepper"
+} from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 import { TokenIcon } from "@/components/token-icon"
 import { Button } from "@/components/ui/button"
 import {
@@ -20,14 +21,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
-import { DrawerFooter, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"
+import {
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
 
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { usePrepareCreateOrder } from "@/hooks/use-prepare-create-order"
@@ -40,7 +40,6 @@ import { decimalCorrectPrice } from "@/lib/utils"
 
 export function DefaultStep(props: NewOrderConfirmationProps) {
   const { onNext, setTaskId } = useStepper()
-  const isDesktop = useMediaQuery("(min-width: 768px)")
 
   const baseToken = Token.findByTicker(props.base)
   const quoteToken = Token.findByTicker("USDC")
@@ -70,77 +69,55 @@ export function DefaultStep(props: NewOrderConfirmationProps) {
         toast.loading(message, {
           id: data.taskId,
         })
+        orderFormEvents.emit("reset")
       },
     },
   })
 
-  if (isDesktop) {
-    return (
-      <>
-        <DialogHeader className="space-y-4 px-6 pt-6">
-          <DialogTitle className="font-extended">Review Order</DialogTitle>
-          <VisuallyHidden>
-            <DialogDescription>
-              Review your order before placing it.
-            </DialogDescription>
-          </VisuallyHidden>
-        </DialogHeader>
-        <ScrollArea className="max-h-[70vh]">
-          <div className="space-y-6 p-6">
-            <NewOrderForm {...props} />
-          </div>
-        </ScrollArea>
-        <DialogFooter>
-          <Button
-            autoFocus
-            className="flex-1 border-x-0 border-b-0 border-t font-serif text-2xl font-bold"
-            size="xl"
-            variant="outline"
-            onClick={() => {
-              if (request instanceof Error) {
-                toast.error(request.message)
-                return
-              }
-              createOrder({ request })
-            }}
-          >
-            {props.isSell ? "Sell" : "Buy"} {props.base}
-          </Button>
-        </DialogFooter>
-      </>
-    )
-  }
-
   return (
     <>
-      <DrawerHeader className="text-left">
-        <DrawerTitle className="font-extended">Review Order</DrawerTitle>
-      </DrawerHeader>
-      <ScrollArea className="max-h-[60vh] overflow-auto">
-        <div className="space-y-6 p-4">
-          <NewOrderForm {...props} />
+      <DialogHeader className="space-y-4 px-6 pt-6">
+        <DialogTitle className="font-extended">Review Order</DialogTitle>
+        <VisuallyHidden>
+          <DialogDescription>
+            Review your order before placing it.
+          </DialogDescription>
+        </VisuallyHidden>
+      </DialogHeader>
+      <ScrollArea className="max-h-[70vh]">
+        <div className="space-y-6 p-6">
+          <ConfirmOrderDisplay {...props} />
         </div>
       </ScrollArea>
-      <DrawerFooter className="pt-2">
+      <DialogFooter>
         <Button
           autoFocus
+          className="flex-1 border-x-0 border-b-0 border-t font-serif text-2xl font-bold"
+          size="xl"
           variant="outline"
-          onClick={onNext}
+          onClick={() => {
+            if (request instanceof Error) {
+              toast.error(request.message)
+              return
+            }
+            createOrder({ request })
+          }}
         >
           {props.isSell ? "Sell" : "Buy"} {props.base}
         </Button>
-      </DrawerFooter>
+      </DialogFooter>
     </>
   )
 }
 
-function NewOrderForm({
+export function ConfirmOrderDisplay({
   base,
   isSell,
   amount,
   onSuccess,
   ...fees
 }: NewOrderConfirmationProps) {
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   const token = Token.findByTicker(base)
   const parsedAmount = safeParseUnits(amount, token.decimals)
   const formattedAmount = formatNumber(
@@ -170,28 +147,30 @@ function NewOrderForm({
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <div className="text-muted-foreground">Receive at least</div>
-          <div className="">--</div>
+          <div >--</div>
         </div>
         <div className="flex items-center justify-between">
           <div className="text-muted-foreground">Type</div>
-          <div className="">Midpoint Peg</div>
+          <div >Midpoint Peg</div>
         </div>
         <div className="flex items-center justify-between">
           <div className="text-muted-foreground">Est. time to fill</div>
-          <div className="">--</div>
+          <div >--</div>
         </div>
       </div> */}
       <Separator />
       <div className="space-y-3">
         <div className="flex items-center justify-between">
-          <Tooltip>
-            <TooltipTrigger onClick={(e) => e.preventDefault()}>
+          <ResponsiveTooltip>
+            <ResponsiveTooltipTrigger
+              onClick={(e) => isDesktop && e.preventDefault()}
+            >
               <span className="text-muted-foreground">Network costs</span>
-            </TooltipTrigger>
-            <TooltipContent>
+            </ResponsiveTooltipTrigger>
+            <ResponsiveTooltipContent>
               <p>{GAS_FEE_TOOLTIP}</p>
-            </TooltipContent>
-          </Tooltip>
+            </ResponsiveTooltipContent>
+          </ResponsiveTooltip>
           <div>$0.00</div>
         </div>
         <FeesSection
diff --git a/components/dialogs/order-stepper/desktop/steps/success-without-savings.tsx b/components/dialogs/order-stepper/desktop/steps/success-without-savings.tsx
new file mode 100644
index 00000000..68dae326
--- /dev/null
+++ b/components/dialogs/order-stepper/desktop/steps/success-without-savings.tsx
@@ -0,0 +1,91 @@
+import * as React from "react"
+
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { TaskState, useTaskHistoryWebSocket } from "@renegade-fi/react"
+import { AlertCircle, Check, Loader2 } from "lucide-react"
+
+import { useStepper } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { DidYouKnowContent } from "@/components/did-you-know-content"
+import { OrderStatusDisplay } from "@/components/order-status-display"
+import { Button } from "@/components/ui/button"
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+const states: TaskState[] = [
+  "Proving",
+  "Submitting Tx",
+  "Finding Opening",
+  "Updating Validity Proofs",
+  "Completed",
+]
+
+export function SuccessStepWithoutSavings() {
+  const { taskId } = useStepper()
+  const [status, setStatus] = React.useState<"pending" | "success" | "error">(
+    "pending",
+  )
+  const [orderStatus, setOrderStatus] = React.useState<TaskState>("Proving")
+
+  useTaskHistoryWebSocket({
+    onUpdate(task) {
+      if (task.id === taskId) {
+        if (task.state === "Completed") {
+          setStatus("success")
+        } else if (task.state === "Failed") {
+          setStatus("error")
+        }
+        setOrderStatus(task.state)
+      }
+    },
+  })
+
+  const Icon = {
+    success: <Check className="h-6 w-6" />,
+    pending: <Loader2 className="h-6 w-6 animate-spin" />,
+    error: <AlertCircle className="h-6 w-6" />,
+  }[status]
+
+  const title = {
+    success: "Order Placed",
+    pending: "Placing Order",
+    error: "Failed to Place Order",
+  }[status]
+
+  return (
+    <>
+      <DialogHeader className="space-y-4 px-6 pt-6">
+        <DialogTitle className="flex items-center gap-2 font-extended">
+          {Icon}
+          {title}
+        </DialogTitle>
+        <VisuallyHidden>
+          <DialogDescription>Your order has been placed.</DialogDescription>
+        </VisuallyHidden>
+      </DialogHeader>
+      <div className="space-y-6 p-6">
+        <OrderStatusDisplay
+          currentStatus={orderStatus}
+          states={states}
+        />
+        <DidYouKnowContent />
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button
+            autoFocus
+            className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
+            size="xl"
+            variant="outline"
+          >
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </>
+  )
+}
diff --git a/components/dialogs/new-order-stepper/steps/success.tsx b/components/dialogs/order-stepper/desktop/steps/success.tsx
similarity index 95%
rename from components/dialogs/new-order-stepper/steps/success.tsx
rename to components/dialogs/order-stepper/desktop/steps/success.tsx
index b0609765..74cc21bb 100644
--- a/components/dialogs/new-order-stepper/steps/success.tsx
+++ b/components/dialogs/order-stepper/desktop/steps/success.tsx
@@ -7,7 +7,7 @@ import { Repeat } from "lucide-react"
 import {
   NewOrderConfirmationProps,
   useStepper,
-} from "@/components/dialogs/new-order-stepper/new-order-stepper"
+} from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 import { GlowText } from "@/components/glow-text"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -31,7 +31,7 @@ import { useMediaQuery } from "@/hooks/use-media-query"
 import { formatCurrency } from "@/lib/format"
 
 export function SuccessStep(props: NewOrderConfirmationProps) {
-  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   const { taskId } = useStepper()
   const [status, setStatus] = React.useState<"pending" | "success" | "error">(
     "pending",
@@ -98,7 +98,7 @@ export function SuccessStep(props: NewOrderConfirmationProps) {
       <DrawerHeader className="text-left">
         <DrawerTitle className="font-extended">{title}</DrawerTitle>
       </DrawerHeader>
-      <ScrollArea className="max-h-[60vh] overflow-auto">
+      <ScrollArea className="max-h-[60dvh] overflow-auto">
         <div className="space-y-6 p-4">
           <OrderSuccessSection {...props} />
         </div>
diff --git a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
new file mode 100644
index 00000000..bbd15f20
--- /dev/null
+++ b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { ConfirmStep } from "@/components/dialogs/order-stepper/mobile/steps/confirm"
+import { DefaultStep } from "@/components/dialogs/order-stepper/mobile/steps/default"
+import { SuccessStepWithoutSavings } from "@/components/dialogs/order-stepper/mobile/steps/success-without-savings"
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+export function NewOrderStepperInner({
+  children,
+  ...props
+}: React.PropsWithChildren<{
+  base: string
+  isUSDCDenominated?: boolean
+}>) {
+  const { step, onNext, setStep, setTaskId } = useStepper()
+  const [lockedFormValues, setLockedFormValues] =
+    React.useState<NewOrderConfirmationProps | null>(null)
+  const handleSubmit = (values: NewOrderConfirmationProps) => {
+    setLockedFormValues(values)
+    onNext()
+  }
+
+  return (
+    <Drawer
+      scrollLockTimeout={0}
+      onOpenChange={() => {
+        setLockedFormValues(null)
+        setStep(Step.DEFAULT)
+        setTaskId("")
+      }}
+    >
+      <DrawerTrigger asChild>{children}</DrawerTrigger>
+      <DrawerContent className="max-h-[90dvh]">
+        <div className="overflow-auto">
+          {step === Step.DEFAULT && (
+            <DefaultStep
+              {...props}
+              onSubmit={handleSubmit}
+            />
+          )}
+          {step === Step.CONFIRM && lockedFormValues && (
+            <ConfirmStep {...lockedFormValues} />
+          )}
+          {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export enum Step {
+  DEFAULT,
+  CONFIRM,
+  SUCCESS,
+}
+
+const StepperContext = React.createContext<{
+  onBack: () => void
+  onNext: () => void
+  setStep: (step: Step) => void
+  step: Step
+  taskId: string
+  setTaskId: (taskId: string) => void
+}>({
+  onBack: () => {},
+  onNext: () => {},
+  setStep: () => {},
+  step: Step.DEFAULT,
+  taskId: "",
+  setTaskId: () => {},
+})
+
+export const useStepper = () => React.useContext(StepperContext)
+
+const StepperProvider = ({ children }: { children: React.ReactNode }) => {
+  const [step, setStep] = React.useState(Step.DEFAULT)
+  const [taskId, setTaskId] = React.useState("")
+
+  const handleNext = () => {
+    setStep(step + 1)
+  }
+
+  const handleBack = () => {
+    setStep(step - 1)
+  }
+
+  return (
+    <StepperContext.Provider
+      value={{
+        onBack: handleBack,
+        onNext: handleNext,
+        setStep,
+        step,
+        taskId,
+        setTaskId,
+      }}
+    >
+      {children}
+    </StepperContext.Provider>
+  )
+}
+
+export function NewOrderStepper({
+  children,
+  ...props
+}: React.PropsWithChildren<{
+  base: string
+  isUSDCDenominated?: boolean
+}>) {
+  return (
+    <StepperProvider>
+      <NewOrderStepperInner {...props}>{children}</NewOrderStepperInner>
+    </StepperProvider>
+  )
+}
diff --git a/components/dialogs/order-stepper/mobile/steps/confirm.tsx b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
new file mode 100644
index 00000000..a5565311
--- /dev/null
+++ b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
@@ -0,0 +1,80 @@
+import React from "react"
+
+import { Token, UpdateType, useCreateOrder } from "@renegade-fi/react"
+import { toast } from "sonner"
+
+import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { ConfirmOrderDisplay } from "@/components/dialogs/order-stepper/desktop/steps/default"
+import { useStepper } from "@/components/dialogs/order-stepper/mobile/new-order-stepper"
+import { Button } from "@/components/ui/button"
+import { DrawerFooter, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import { usePrepareCreateOrder } from "@/hooks/use-prepare-create-order"
+import { usePriceQuery } from "@/hooks/use-price-query"
+import { constructStartToastMessage } from "@/lib/constants/task"
+import { decimalCorrectPrice } from "@/lib/utils"
+
+export function ConfirmStep(props: NewOrderConfirmationProps) {
+  const { onNext, setTaskId } = useStepper()
+
+  const baseToken = Token.findByTicker(props.base)
+  const quoteToken = Token.findByTicker("USDC")
+  const { data: price } = usePriceQuery(baseToken.address)
+
+  const worstCasePrice = React.useMemo(() => {
+    if (!price) return 0
+    const wcp = price * (props.isSell ? 0.5 : 1.5)
+    return decimalCorrectPrice(wcp, baseToken.decimals, quoteToken.decimals)
+  }, [baseToken.decimals, price, props.isSell, quoteToken.decimals])
+
+  const { request } = usePrepareCreateOrder({
+    base: baseToken.address,
+    quote: quoteToken.address,
+    side: props.isSell ? "sell" : "buy",
+    amount: props.amount,
+    worstCasePrice: worstCasePrice.toFixed(18),
+  })
+
+  const { createOrder } = useCreateOrder({
+    mutation: {
+      onSuccess(data) {
+        props.onSuccess?.()
+        setTaskId(data.taskId)
+        onNext()
+        const message = constructStartToastMessage(UpdateType.PlaceOrder)
+        toast.loading(message, {
+          id: data.taskId,
+        })
+      },
+    },
+  })
+
+  return (
+    <>
+      <DrawerHeader className="text-left">
+        <DrawerTitle className="font-extended">Review Order</DrawerTitle>
+      </DrawerHeader>
+      <ScrollArea className="max-h-dvh overflow-auto">
+        <div className="space-y-6 p-4">
+          <ConfirmOrderDisplay {...props} />
+        </div>
+      </ScrollArea>
+      <DrawerFooter>
+        <Button
+          autoFocus
+          className="font-extended"
+          onClick={() => {
+            if (request instanceof Error) {
+              toast.error(request.message)
+              return
+            }
+            createOrder({ request })
+          }}
+        >
+          {props.isSell ? "Sell" : "Buy"} {props.base}
+        </Button>
+      </DrawerFooter>
+    </>
+  )
+}
diff --git a/components/dialogs/order-stepper/mobile/steps/default.tsx b/components/dialogs/order-stepper/mobile/steps/default.tsx
new file mode 100644
index 00000000..8c157acb
--- /dev/null
+++ b/components/dialogs/order-stepper/mobile/steps/default.tsx
@@ -0,0 +1,43 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+
+import { AssetsSection } from "@/app/trade/[base]/components/new-order/assets-section"
+import { NewOrderForm } from "@/app/trade/[base]/components/new-order/new-order-form"
+
+import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { Button } from "@/components/ui/button"
+import {
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import { Separator } from "@/components/ui/separator"
+
+export function DefaultStep(props: {
+  base: string
+  isUSDCDenominated?: boolean
+  onSubmit: (values: NewOrderConfirmationProps) => void
+}) {
+  return (
+    <>
+      <DrawerHeader className="p-0">
+        <VisuallyHidden>
+          <DrawerTitle>Place Order</DrawerTitle>
+          <DrawerDescription>Place a new order.</DrawerDescription>
+        </VisuallyHidden>
+      </DrawerHeader>
+      <div className="p-6">
+        <AssetsSection
+          disabled
+          base={props.base}
+        />
+      </div>
+      <Separator />
+      <div className="pt-6">
+        <NewOrderForm {...props} />
+      </div>
+      <DrawerFooter />
+    </>
+  )
+}
diff --git a/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
new file mode 100644
index 00000000..b68acfb9
--- /dev/null
+++ b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
@@ -0,0 +1,75 @@
+import * as React from "react"
+
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { TaskState, useTaskHistoryWebSocket } from "@renegade-fi/react"
+import { AlertCircle, Check, Loader2 } from "lucide-react"
+
+import { useStepper } from "@/components/dialogs/order-stepper/mobile/new-order-stepper"
+import { DidYouKnowContent } from "@/components/did-you-know-content"
+import { OrderStatusDisplay } from "@/components/order-status-display"
+import { Button } from "@/components/ui/button"
+import { DialogDescription, DialogTitle } from "@/components/ui/dialog"
+import { DrawerClose, DrawerFooter, DrawerHeader } from "@/components/ui/drawer"
+
+const states: TaskState[] = [
+  "Proving",
+  "Submitting Tx",
+  "Finding Opening",
+  "Updating Validity Proofs",
+  "Completed",
+]
+
+export function SuccessStepWithoutSavings() {
+  const { taskId } = useStepper()
+  const [status, setStatus] = React.useState<"pending" | "success" | "error">(
+    "pending",
+  )
+  const [orderStatus, setOrderStatus] = React.useState<TaskState>("Proving")
+
+  useTaskHistoryWebSocket({
+    onUpdate(task) {
+      if (task.id === taskId) {
+        if (task.state === "Completed") {
+          setStatus("success")
+        } else if (task.state === "Failed") {
+          setStatus("error")
+        }
+        setOrderStatus(task.state)
+      }
+    },
+  })
+
+  const Icon = {
+    success: <Check className="h-6 w-6" />,
+    pending: <Loader2 className="h-6 w-6 animate-spin" />,
+    error: <AlertCircle className="h-6 w-6" />,
+  }[status]
+
+  const title = {
+    success: "Order Placed",
+    pending: "Placing Order",
+    error: "Failed to Place Order",
+  }[status]
+
+  return (
+    <>
+      <DrawerHeader className="text-left">
+        <DialogTitle className="flex items-center gap-2 font-extended">
+          {Icon}
+          {title}
+        </DialogTitle>
+        <VisuallyHidden>
+          <DialogDescription>Your order has been placed.</DialogDescription>
+        </VisuallyHidden>
+      </DrawerHeader>
+      <div className="space-y-6 p-6 pb-0">
+        <OrderStatusDisplay
+          currentStatus={orderStatus}
+          states={states}
+        />
+        <DidYouKnowContent />
+      </div>
+      <DrawerFooter />
+    </>
+  )
+}
diff --git a/components/dialogs/order-stepper/mobile/steps/success.tsx b/components/dialogs/order-stepper/mobile/steps/success.tsx
new file mode 100644
index 00000000..74cc21bb
--- /dev/null
+++ b/components/dialogs/order-stepper/mobile/steps/success.tsx
@@ -0,0 +1,159 @@
+import * as React from "react"
+
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { useTaskHistoryWebSocket } from "@renegade-fi/react"
+import { Repeat } from "lucide-react"
+
+import {
+  NewOrderConfirmationProps,
+  useStepper,
+} from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
+import { GlowText } from "@/components/glow-text"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  DrawerClose,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Spinner } from "@/components/ui/spinner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { formatCurrency } from "@/lib/format"
+
+export function SuccessStep(props: NewOrderConfirmationProps) {
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
+  const { taskId } = useStepper()
+  const [status, setStatus] = React.useState<"pending" | "success" | "error">(
+    "pending",
+  )
+
+  useTaskHistoryWebSocket({
+    onUpdate(task) {
+      if (task.id === taskId) {
+        if (task.state === "Completed") {
+          setStatus("success")
+        } else if (task.state === "Failed") {
+          setStatus("error")
+        }
+      }
+    },
+  })
+
+  const title =
+    status === "pending"
+      ? "Placing Order"
+      : status === "success"
+        ? "Order Placed"
+        : "Failed to Place Order"
+  const description =
+    status === "pending"
+      ? "Your order is being placed."
+      : status === "success"
+        ? "Your order has been placed."
+        : "Your order has failed."
+
+  if (isDesktop) {
+    return (
+      <>
+        <DialogHeader className="space-y-4 px-6 pt-6">
+          <DialogTitle className="flex items-center font-extended">
+            {title}
+            {status === "pending" && <Spinner className="ml-2 h-5 w-5" />}
+          </DialogTitle>
+          <VisuallyHidden>
+            <DialogDescription>{description}</DialogDescription>
+          </VisuallyHidden>
+        </DialogHeader>
+        <div className="space-y-6 p-6">
+          <OrderSuccessSection {...props} />
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button
+              autoFocus
+              className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
+              size="xl"
+              variant="outline"
+            >
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <DrawerHeader className="text-left">
+        <DrawerTitle className="font-extended">{title}</DrawerTitle>
+      </DrawerHeader>
+      <ScrollArea className="max-h-[60dvh] overflow-auto">
+        <div className="space-y-6 p-4">
+          <OrderSuccessSection {...props} />
+        </div>
+      </ScrollArea>
+      <DrawerFooter className="pt-2">
+        <DrawerClose asChild>
+          <Button
+            autoFocus
+            variant="outline"
+          >
+            Close
+          </Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </>
+  )
+}
+
+function OrderSuccessSection({ predictedSavings }: NewOrderConfirmationProps) {
+  const savingsLabel = predictedSavings
+    ? formatCurrency(predictedSavings)
+    : "--"
+  return (
+    <>
+      <div className="flex flex-col items-center space-y-4 text-pretty text-center">
+        <div>You&apos;re estimated to save</div>
+        <GlowText
+          className="bg-green-price text-4xl"
+          enabled={!!predictedSavings && savingsLabel !== "$0.00"}
+          text={savingsLabel}
+        />
+        <div>when your order fills at the realtime Binance midpoint price.</div>
+      </div>
+      <div className="border p-4 text-sm text-muted-foreground">
+        <div className="flex items-start justify-between">
+          Did you know?
+          <Button
+            className="rounded-none"
+            size="icon"
+            variant="ghost"
+          >
+            <Repeat className="h-4 w-4" />
+          </Button>
+        </div>
+        <div>All trades are pre-trade and post-trade private.</div>
+      </div>
+      <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+        <Checkbox id="donot-show-again" />
+        <label
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          htmlFor="donot-show-again"
+        >
+          Don&apos;t show again
+        </label>
+      </div>
+    </>
+  )
+}
diff --git a/components/dialogs/sign-in-dialog.tsx b/components/dialogs/sign-in-dialog.tsx
index 08d7982f..277605a6 100644
--- a/components/dialogs/sign-in-dialog.tsx
+++ b/components/dialogs/sign-in-dialog.tsx
@@ -23,7 +23,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
 import {
   CREATE_WALLET_ERROR,
@@ -40,7 +49,7 @@ export function SignInDialog({
   onOpenChange,
 }: {
   open: boolean
-  onOpenChange: () => void
+  onOpenChange: (open: boolean) => void
 }) {
   const {
     signMessage,
@@ -74,7 +83,7 @@ export function SignInDialog({
               toast.success("Successfully signed in", {
                 id: toastId,
               })
-              onOpenChange()
+              onOpenChange(false)
               setIsConnecting(false)
               return
             }
@@ -94,7 +103,7 @@ export function SignInDialog({
             toast.promise(
               createWallet(config)
                 .then(() => {
-                  onOpenChange()
+                  onOpenChange(false)
                 })
                 .finally(() => {
                   setIsConnecting(false)
@@ -114,7 +123,7 @@ export function SignInDialog({
             toast.promise(
               lookupWallet(config)
                 .then(() => {
-                  onOpenChange()
+                  onOpenChange(false)
                 })
                 .finally(() => {
                   setIsConnecting(false)
@@ -139,61 +148,100 @@ export function SignInDialog({
         },
       },
     )
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
-  const [rememberMe, setRememberMe] = useLocalStorage(
-    STORAGE_REMEMBER_ME,
-    false,
-    {
-      initializeWithValue: false,
-    },
-  )
+  if (isDesktop) {
+    return (
+      <Dialog
+        open={open}
+        onOpenChange={onOpenChange}
+      >
+        <DialogContent className="gap-0 p-0 sm:max-w-[425px]">
+          <DialogHeader className="p-6">
+            <DialogTitle className="font-extended">
+              Unlock your Wallet
+            </DialogTitle>
+            <DialogDescription>
+              To trade on Renegade, we require a one-time signature to create or
+              find your wallet on-chain.
+            </DialogDescription>
+          </DialogHeader>
+          <SignInContent />
+          <DialogFooter>
+            <Button
+              className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
+              disabled={isConnecting || signStatus === "pending"}
+              size="xl"
+              variant="outline"
+              onClick={handleClick}
+            >
+              {signStatus === "pending" || isConnecting
+                ? "Confirm in wallet"
+                : "Sign in to Renegade"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
 
   return (
-    <Dialog
+    <Drawer
       open={open}
       onOpenChange={onOpenChange}
     >
-      <DialogContent className="gap-0 p-0 sm:max-w-[425px]">
-        <DialogHeader className="p-6">
-          <DialogTitle className="font-extended">
-            Unlock your Wallet
-          </DialogTitle>
-          <DialogDescription>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Unlock your Wallet</DrawerTitle>
+          <DrawerDescription>
             To trade on Renegade, we require a one-time signature to create or
             find your wallet on-chain.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center space-x-2 px-6 pb-6">
-          <Checkbox
-            checked={rememberMe}
-            id="remember-me"
-            onCheckedChange={(checked) => {
-              if (typeof checked === "boolean") {
-                setRememberMe(checked)
-              }
-            }}
-          />
-          <label
-            className="text-sm font-medium leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            htmlFor="remember-me"
-          >
-            Remember me
-          </label>
-        </div>
-        <DialogFooter>
+          </DrawerDescription>
+        </DrawerHeader>
+        <SignInContent />
+        <DrawerFooter>
           <Button
-            className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
+            className="font-extended"
             disabled={isConnecting || signStatus === "pending"}
-            size="xl"
-            variant="outline"
             onClick={handleClick}
           >
             {signStatus === "pending" || isConnecting
               ? "Confirm in wallet"
               : "Sign in to Renegade"}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function SignInContent() {
+  const [rememberMe, setRememberMe] = useLocalStorage(
+    STORAGE_REMEMBER_ME,
+    false,
+    {
+      initializeWithValue: false,
+    },
+  )
+  return (
+    <>
+      <div className="flex items-center space-x-2 px-6 pb-6">
+        <Checkbox
+          checked={rememberMe}
+          id="remember-me"
+          onCheckedChange={(checked) => {
+            if (typeof checked === "boolean") {
+              setRememberMe(checked)
+            }
+          }}
+        />
+        <label
+          className="text-sm font-medium leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          htmlFor="remember-me"
+        >
+          Remember me
+        </label>
+      </div>
+    </>
   )
 }
diff --git a/components/dialogs/token-select-dialog.tsx b/components/dialogs/token-select-dialog.tsx
index ea65787f..fd0814da 100644
--- a/components/dialogs/token-select-dialog.tsx
+++ b/components/dialogs/token-select-dialog.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 
 import Link from "next/link"
 
-import { useStatus, useBackOfQueueWallet } from "@renegade-fi/react"
+import { useBackOfQueueWallet, useStatus } from "@renegade-fi/react"
 import { Star } from "lucide-react"
 import { useDebounceValue, useLocalStorage } from "usehooks-ts"
 import { fromHex } from "viem/utils"
@@ -19,10 +19,8 @@ import {
 } from "@/components/ui/dialog"
 import {
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerDescription,
-  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
@@ -45,7 +43,7 @@ export function TokenSelectDialog({
   const [open, setOpen] = React.useState(false)
   const [searchTerm, setSearchTerm] = React.useState("")
   const [debouncedSearchTerm] = useDebounceValue(searchTerm, 300)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   if (isDesktop) {
     return (
@@ -84,14 +82,18 @@ export function TokenSelectDialog({
       onOpenChange={setOpen}
     >
       <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
+      <DrawerContent className="max-h-[90dvh]">
+        <DrawerHeader className="space-y-4 text-left">
           <DrawerTitle className="font-extended">Select Token</DrawerTitle>
           <DrawerDescription>
-            <Input placeholder="Search name" />
+            <Input
+              placeholder="Search name"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
           </DrawerDescription>
         </DrawerHeader>
-        <ScrollArea className="max-h-[50vh] overflow-auto">
+        <ScrollArea className="max-h-[50dvh] overflow-auto">
           <TokenList
             enabled={open}
             searchTerm={debouncedSearchTerm}
@@ -99,11 +101,6 @@ export function TokenSelectDialog({
             onClose={() => setOpen(false)}
           />
         </ScrollArea>
-        <DrawerFooter className="pt-2">
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
       </DrawerContent>
     </Drawer>
   )
diff --git a/components/dialogs/token-select.tsx b/components/dialogs/token-select.tsx
index 4aed51f1..085cb833 100644
--- a/components/dialogs/token-select.tsx
+++ b/components/dialogs/token-select.tsx
@@ -21,6 +21,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { useRefreshOnBlock } from "@/hooks/use-refresh-on-block"
 import { formatNumber } from "@/lib/format"
 import { DISPLAY_TOKENS } from "@/lib/token"
@@ -77,6 +78,8 @@ export function TokenSelect({
       ? l2Balances
       : renegadeBalances
 
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
+
   return (
     <Popover
       modal
@@ -97,7 +100,10 @@ export function TokenSelect({
           <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0">
+      <PopoverContent
+        className="p-0"
+        onOpenAutoFocus={(e) => (!isDesktop ? e.preventDefault() : undefined)}
+      >
         <Command
           filter={(value, search) => {
             if (!isAddress(value)) return 0
diff --git a/components/dialogs/transfer/max-balances-warning.tsx b/components/dialogs/transfer/max-balances-warning.tsx
index 784aec36..06dc6ea4 100644
--- a/components/dialogs/transfer/max-balances-warning.tsx
+++ b/components/dialogs/transfer/max-balances-warning.tsx
@@ -2,10 +2,10 @@ import { AlertTriangle } from "lucide-react"
 
 import { useIsMaxBalances } from "@/components/dialogs/transfer/use-is-max-balances"
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+  ResponsiveTooltip,
+  ResponsiveTooltipContent,
+  ResponsiveTooltipTrigger,
+} from "@/components/ui/responsive-tooltip"
 
 import { MAX_BALANCES_TOOLTIP } from "@/lib/constants/tooltips"
 import { cn } from "@/lib/utils"
@@ -22,17 +22,17 @@ export function MaxBalancesWarning({
   if (isMaxBalances) {
     return (
       <div className="flex w-full items-center justify-center rounded-md bg-[#2A1700] p-3 text-center">
-        <Tooltip>
-          <TooltipTrigger onClick={(e) => e.preventDefault()}>
+        <ResponsiveTooltip>
+          <ResponsiveTooltipTrigger onClick={(e) => e.preventDefault()}>
             <div className={cn("flex items-center gap-2", className)}>
               <AlertTriangle className="h-4 w-4" />
               <span>Maximum balance limit reached.</span>
             </div>
-          </TooltipTrigger>
-          <TooltipContent>
+          </ResponsiveTooltipTrigger>
+          <ResponsiveTooltipContent>
             <p>{MAX_BALANCES_TOOLTIP}</p>
-          </TooltipContent>
-        </Tooltip>
+          </ResponsiveTooltipContent>
+        </ResponsiveTooltip>
       </div>
     )
   }
diff --git a/components/dialogs/transfer/transfer-dialog.tsx b/components/dialogs/transfer/transfer-dialog.tsx
index 45e685fd..46532eaf 100644
--- a/components/dialogs/transfer/transfer-dialog.tsx
+++ b/components/dialogs/transfer/transfer-dialog.tsx
@@ -30,8 +30,10 @@ import {
   Drawer,
   DrawerClose,
   DrawerContent,
+  DrawerDescription,
   DrawerFooter,
   DrawerHeader,
+  DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer"
 import {
@@ -88,7 +90,7 @@ export function TransferDialog({
   children: React.ReactNode
 }) {
   const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   const [direction, setDirection] = React.useState<ExternalTransferDirection>(
     ExternalTransferDirection.Deposit,
   )
@@ -181,11 +183,16 @@ export function TransferDialog({
       onOpenChange={setOpen}
     >
       <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent hideHandle>
-        <DrawerHeader className="p-0">
-          <div className="flex flex-row border-b border-border">
+      <DrawerContent>
+        <DrawerHeader className="p-0 pt-6">
+          <div className="flex flex-row border-y border-border font-extended">
             <Button
-              className="flex-1 border-0 font-extended text-lg font-bold"
+              className={cn(
+                "flex-1 border-0 text-lg tracking-tight",
+                direction === ExternalTransferDirection.Deposit
+                  ? "text-primary"
+                  : "text-muted-foreground",
+              )}
               size="xl"
               variant="outline"
               onClick={() => setDirection(ExternalTransferDirection.Deposit)}
@@ -193,7 +200,12 @@ export function TransferDialog({
               Deposit
             </Button>
             <Button
-              className="border-l-1 flex-1 border-y-0 border-r-0 font-extended text-lg font-bold"
+              className={cn(
+                "border-l-1 flex-1 border-y-0 border-r-0 text-lg tracking-tight",
+                direction === ExternalTransferDirection.Withdraw
+                  ? "text-primary"
+                  : "text-muted-foreground",
+              )}
               size="xl"
               variant="outline"
               onClick={() => setDirection(ExternalTransferDirection.Withdraw)}
@@ -201,8 +213,21 @@ export function TransferDialog({
               Withdraw
             </Button>
           </div>
+          <VisuallyHidden>
+            <DrawerTitle>
+              {direction === ExternalTransferDirection.Deposit
+                ? "Deposit"
+                : "Withdraw"}
+            </DrawerTitle>
+            <DrawerDescription>
+              {direction === ExternalTransferDirection.Deposit
+                ? "Deposit tokens into Renegade"
+                : "Withdraw tokens from Renegade"}
+            </DrawerDescription>
+          </VisuallyHidden>
         </DrawerHeader>
         <TransferForm
+          className="p-6"
           direction={direction}
           initialMint={mint}
           onSuccess={() => setOpen(false)}
@@ -222,7 +247,7 @@ function TransferForm({
   initialMint?: string
   onSuccess: () => void
 }) {
-  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -546,6 +571,7 @@ function TransferForm({
         ) : (
           <DrawerFooter>
             <Button
+              className="font-extended"
               disabled={
                 !form.formState.isValid ||
                 (direction === ExternalTransferDirection.Deposit &&
@@ -557,9 +583,6 @@ function TransferForm({
             >
               {buttonText}
             </Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
           </DrawerFooter>
         )}
       </form>
diff --git a/components/did-you-know-content.tsx b/components/did-you-know-content.tsx
new file mode 100644
index 00000000..ff498166
--- /dev/null
+++ b/components/did-you-know-content.tsx
@@ -0,0 +1,70 @@
+import React from "react"
+
+import { Repeat } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+const DID_YOU_KNOW_CONTENT = [
+  {
+    text: "All trades are pre-trade and post-trade private.",
+    link: "https://help.renegade.fi/hc/en-us/articles/32760870056723-What-is-pre-trade-and-post-trade-privacy",
+  },
+  {
+    text: "All trades clear at the midpoint of the Binance bid-ask spread.",
+    link: "https://help.renegade.fi/hc/en-us/articles/32530574872211-What-is-a-midpoint-peg",
+  },
+  {
+    text: "Trading in Renegade has zero MEV, slippage, or price impact.",
+    link: "https://help.renegade.fi/hc/en-us/articles/32762213393043-Does-Renegade-really-have-zero-MEV-copy-trading-slippage-or-price-impact",
+  },
+] as const
+
+export function DidYouKnowContent() {
+  const [randomContent, setRandomContent] = React.useState(() => {
+    const randomIndex = Math.floor(Math.random() * DID_YOU_KNOW_CONTENT.length)
+    return DID_YOU_KNOW_CONTENT[randomIndex]
+  })
+
+  const handleRefresh = () => {
+    let newIndex: number
+    do {
+      newIndex = Math.floor(Math.random() * DID_YOU_KNOW_CONTENT.length)
+    } while (DID_YOU_KNOW_CONTENT[newIndex] === randomContent)
+    setRandomContent(DID_YOU_KNOW_CONTENT[newIndex])
+  }
+
+  return (
+    <>
+      <div className="space-y-2 border p-4 pt-2 text-sm text-muted-foreground">
+        <div className="flex items-center justify-between">
+          Did you know?
+          <Button
+            className="rounded-none"
+            size="icon"
+            variant="ghost"
+            onClick={handleRefresh}
+          >
+            <Repeat className="h-4 w-4" />
+          </Button>
+        </div>
+        <a
+          className="text-pretty underline-offset-4 hover:underline"
+          href={randomContent.link}
+          rel="noreferrer"
+          target="_blank"
+        >
+          {randomContent.text}
+        </a>
+      </div>
+      {/* <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+        <Checkbox id="donot-show-again" />
+        <label
+          htmlFor="donot-show-again"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Don&apos;t show again
+        </label>
+      </div> */}
+    </>
+  )
+}
diff --git a/components/number-input.tsx b/components/number-input.tsx
index f8fdd63b..15547645 100644
--- a/components/number-input.tsx
+++ b/components/number-input.tsx
@@ -19,6 +19,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
           "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
           className,
         )}
+        inputMode="decimal"
         step="any"
         type="number"
         onBeforeInput={handleBeforeInput}
diff --git a/components/order-status-display.tsx b/components/order-status-display.tsx
new file mode 100644
index 00000000..a67a85ad
--- /dev/null
+++ b/components/order-status-display.tsx
@@ -0,0 +1,45 @@
+import * as React from "react"
+
+import { TaskState } from "@renegade-fi/react"
+import { Check, Loader2 } from "lucide-react"
+
+import { formatTaskState } from "@/lib/constants/task"
+import { cn } from "@/lib/utils"
+
+interface OrderStatusDisplayProps {
+  states: TaskState[]
+  currentStatus: TaskState
+}
+
+export function OrderStatusDisplay({
+  states,
+  currentStatus,
+}: OrderStatusDisplayProps) {
+  return (
+    <div className="space-y-1 border p-4 font-mono">
+      {states.map((state, i) => (
+        <div
+          key={state}
+          className={cn(
+            "flex items-center justify-between transition-colors hover:text-primary",
+            {
+              "animate-pulse":
+                currentStatus === state && currentStatus !== "Completed",
+              "text-muted": currentStatus !== state,
+            },
+          )}
+        >
+          {i + 1}. {formatTaskState(state)}{" "}
+          {currentStatus === state && currentStatus !== "Completed" && (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          )}
+          {currentStatus === "Completed" &&
+            i === states.indexOf(currentStatus) && (
+              <Check className="h-4 w-4" />
+            )}
+          {states.indexOf(currentStatus) > i && <Check className="h-4 w-4" />}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/components/table-empty-state.tsx b/components/table-empty-state.tsx
index b6b1174d..6f8349f8 100644
--- a/components/table-empty-state.tsx
+++ b/components/table-empty-state.tsx
@@ -3,7 +3,9 @@ import { useStatus } from "@renegade-fi/react"
 import { SignInDialog } from "@/components/dialogs/sign-in-dialog"
 import { TableCell, TableRow } from "@/components/ui/table"
 
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { useSignInAndConnect } from "@/hooks/use-sign-in-and-connect"
+import { cn } from "@/lib/utils"
 
 export function TableEmptyState({
   colSpan,
@@ -12,6 +14,7 @@ export function TableEmptyState({
   colSpan: number
   type: string
 }) {
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
   const status = useStatus()
   const { handleClick, content, open, onOpenChange } = useSignInAndConnect()
   let message = `No ${type} found.`
@@ -29,7 +32,7 @@ export function TableEmptyState({
         }}
       >
         <TableCell
-          className="h-24 text-center"
+          className={cn("h-24", isDesktop ? "text-center" : "pl-8")}
           colSpan={colSpan}
         >
           {message}
diff --git a/components/table-select.tsx b/components/table-select.tsx
index 1e95514c..20915318 100644
--- a/components/table-select.tsx
+++ b/components/table-select.tsx
@@ -50,7 +50,7 @@ export function TableSelect({
           {value ? values.find((v) => v.value === value)?.label : placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="max-w-28 p-0">
+      <PopoverContent className="min-w-fit p-0">
         <Command>
           <CommandList>
             <CommandEmpty>No token found.</CommandEmpty>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b4e6cf41..aa2f8cb8 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -27,7 +27,7 @@ const buttonVariants = cva(
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',
         xl: 'h-16',
-        shimmer: 'h-10 px-4',
+        shimmer: 'h-9 px-4',
       },
     },
     defaultVariants: {
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index a882d7d8..704d8ea7 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -6,10 +6,11 @@ import { cn } from '@/lib/utils'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
 const Drawer = ({
-  shouldScaleBackground = true,
+  shouldScaleBackground = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root
+  scrollLockTimeout={0}
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index ab857968..b44653e7 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -68,8 +68,9 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       ref={ref}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'z-50 min-w-[8rem] overflow-hidden rounded-none border bg-popover p-1 text-popover-foreground shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        "w-[var(--radix-dropdown-menu-trigger-width)]",
         className,
       )}
       sideOffset={sideOffset}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 88b770df..d8232437 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -5,6 +5,10 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+  useTriggerWidth?: boolean;
+};
+
 const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
@@ -13,15 +17,16 @@ const PopoverAnchor = PopoverPrimitive.Anchor
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  PopoverContentProps
+>(({ className, align = 'center', sideOffset = 4, useTriggerWidth = true, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
+        'z-50 w-fit rounded-none border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        useTriggerWidth && 'w-[var(--radix-popover-trigger-width)]',
+        className
       )}
       sideOffset={sideOffset}
       {...props}
diff --git a/components/ui/responsive-tooltip.tsx b/components/ui/responsive-tooltip.tsx
new file mode 100644
index 00000000..57766f72
--- /dev/null
+++ b/components/ui/responsive-tooltip.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useSharedMediaQuery } from '@/hooks/use-shared-media-query';
+import { cn } from '@/lib/utils';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;
+
+type ResponsiveTooltipProps = TooltipPrimitive.TooltipProps & PopoverPrimitive.PopoverProps & {
+  children: React.ReactNode;
+};
+
+type ResponsiveTooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipTrigger> & 
+  React.ComponentPropsWithoutRef<typeof PopoverTrigger> & {
+  children: React.ReactNode;
+};
+
+type ResponsiveTooltipContentProps = TooltipContentProps & PopoverContentProps & {
+  children: React.ReactNode;
+};
+
+export function ResponsiveTooltipTrigger({ children, ...props }: ResponsiveTooltipTriggerProps) {
+  const isDesktop = useSharedMediaQuery("(min-width: 1024px)");
+
+  if (isDesktop) {
+    return <TooltipTrigger {...props}>{children}</TooltipTrigger>;
+  }
+
+  return <PopoverTrigger {...props}>{children}</PopoverTrigger>;
+}
+
+export function ResponsiveTooltipContent({ children, side, className, ...props }: ResponsiveTooltipContentProps) {
+  const isDesktop = useSharedMediaQuery("(min-width: 1024px)");
+
+  if (isDesktop) {
+    return <TooltipContent className={className} side={side} {...props}>{children}</TooltipContent>;
+  }
+
+  return <PopoverContent
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'max-w-[90vw]',
+      className
+    )}
+    side={side}
+    useTriggerWidth={false}
+    {...props}
+  >
+    {children}
+  </PopoverContent>;
+}
+
+export function ResponsiveTooltip({ children, ...props }: ResponsiveTooltipProps) {
+  const isDesktop = useSharedMediaQuery("(min-width: 1024px)");
+
+  if (isDesktop) {
+    return <Tooltip {...props}>{children}</Tooltip>;
+  }
+
+  return <Popover {...props}>{children}</Popover>;
+}
\ No newline at end of file
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 67dfb547..0a7b86e3 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useMediaQuery } from '@/hooks/use-media-query'
 import { useTheme } from 'next-themes'
 import { Toaster as Sonner } from 'sonner'
 
@@ -7,6 +8,7 @@ type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme()
+  const isDesktop = useMediaQuery("(min-width: 1024px)")
 
   return (
     <Sonner
@@ -24,6 +26,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
         },
       }}
       {...props}
+      position={isDesktop ? 'bottom-center' : 'top-center'}
     />
   )
 }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 04a97426..c0df655c 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils"
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -9,20 +9,20 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
+      className={cn("w-full caption-bottom text-sm", className)}
       {...props}
     />
   </div>
 ))
-Table.displayName = 'Table'
+Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 ))
-TableHeader.displayName = 'TableHeader'
+TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn('[&_tr:last-child]:border-0', className)}
+    className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
 ))
-TableBody.displayName = 'TableBody'
+TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
-      className,
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
     )}
     {...props}
   />
 ))
-TableFooter.displayName = 'TableFooter'
+TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b font-sans transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-      className,
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
     )}
     {...props}
   />
 ))
-TableRow.displayName = 'TableRow'
+TableRow.displayName = "TableRow"
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      className,
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
     )}
     {...props}
   />
 ))
-TableHead.displayName = 'TableHead'
+TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -88,13 +88,13 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-      className,
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
     )}
     {...props}
   />
 ))
-TableCell.displayName = 'TableCell'
+TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,11 +102,11 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
-TableCaption.displayName = 'TableCaption'
+TableCaption.displayName = "TableCaption"
 
 export {
   Table,
diff --git a/hooks/use-fees-check.ts b/hooks/use-fees-check.ts
index 1566b7b8..6390e749 100644
--- a/hooks/use-fees-check.ts
+++ b/hooks/use-fees-check.ts
@@ -1,4 +1,4 @@
-import { NewOrderConfirmationProps } from "@/components/dialogs/new-order-stepper/new-order-stepper"
+import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 
 import { useOrderValue } from "@/hooks/use-order-value"
 
diff --git a/hooks/use-shared-media-query.ts b/hooks/use-shared-media-query.ts
new file mode 100644
index 00000000..99989174
--- /dev/null
+++ b/hooks/use-shared-media-query.ts
@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback } from "react"
+
+interface MediaQueryState {
+  matches: boolean
+  listeners: Set<(matches: boolean) => void>
+  mql: MediaQueryList | null
+}
+
+const mediaQueries: { [query: string]: MediaQueryState } = {}
+
+export function useSharedMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return false
+    return window.matchMedia(query).matches
+  })
+
+  const updateMatches = useCallback((newMatches: boolean) => {
+    setMatches(newMatches)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    if (!mediaQueries[query]) {
+      mediaQueries[query] = {
+        matches: window.matchMedia(query).matches,
+        listeners: new Set(),
+        mql: window.matchMedia(query),
+      }
+    }
+
+    const state = mediaQueries[query]
+    state.listeners.add(updateMatches)
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      state.matches = e.matches
+      state.listeners.forEach((listener) => listener(e.matches))
+    }
+
+    if (state.mql) {
+      state.mql.addEventListener("change", handleChange)
+    }
+
+    // Initial call to set the initial state
+    updateMatches(state.matches)
+
+    return () => {
+      if (state.mql) {
+        state.mql.removeEventListener("change", handleChange)
+      }
+      state.listeners.delete(updateMatches)
+
+      if (state.listeners.size === 0) {
+        delete mediaQueries[query]
+      }
+    }
+  }, [query, updateMatches])
+
+  return matches
+}
diff --git a/hooks/use-sign-in-and-connect.ts b/hooks/use-sign-in-and-connect.ts
index 2447adc6..3d23b8cc 100644
--- a/hooks/use-sign-in-and-connect.ts
+++ b/hooks/use-sign-in-and-connect.ts
@@ -12,8 +12,6 @@ export function useSignInAndConnect() {
   const { setOpen } = useModal()
   const [open, setOpenSignIn] = useState(false)
 
-  const onOpenChange = () => setOpenSignIn((open) => !open)
-
   const renegadeStatus = useStatus()
 
   const handleClick = () => {
@@ -40,5 +38,5 @@ export function useSignInAndConnect() {
     content = "Connect Wallet"
   }
 
-  return { handleClick, content, open, onOpenChange }
+  return { handleClick, content, open, onOpenChange: setOpenSignIn }
 }
diff --git a/lib/constants/protocol.ts b/lib/constants/protocol.ts
index 4f5b4f33..998611a8 100644
--- a/lib/constants/protocol.ts
+++ b/lib/constants/protocol.ts
@@ -1,5 +1,5 @@
 // Constants
-import { Token } from "@renegade-fi/react"
+import { Exchange, Token } from "@renegade-fi/react"
 import { parseUnits } from "viem/utils"
 
 // Min fill size of the quote asset that the relayer will accept
@@ -28,3 +28,10 @@ export enum Side {
 }
 
 export const EXCHANGES = ["binance", "coinbase", "kraken", "okx"] as const
+
+export const exchangeToName: Record<Exchange, string> = {
+  binance: "Binance",
+  coinbase: "Coinbase",
+  kraken: "Kraken",
+  okx: "OKX",
+}
diff --git a/lib/cookie.ts b/lib/cookie.ts
index 22e46757..4f6133a7 100644
--- a/lib/cookie.ts
+++ b/lib/cookie.ts
@@ -16,10 +16,14 @@ export const cookieStorage: BaseStorage = {
   },
   setItem(key: string, value: string): void {
     if (typeof window === "undefined") return
-    document.cookie = `${key}=${value};path=/;SameSite=Strict;Secure;max-age=604800`
+    const isProduction = process.env.NODE_ENV === "production"
+    const secureFlag = isProduction ? "Secure;" : ""
+    document.cookie = `${key}=${value};path=/;SameSite=Strict;${secureFlag}max-age=604800`
   },
   removeItem(key: string): void {
     if (typeof window === "undefined") return
-    document.cookie = `${key}=;path=/;SameSite=Strict;Secure;max-age=-1`
+    const isProduction = process.env.NODE_ENV === "production"
+    const secureFlag = isProduction ? "Secure;" : ""
+    document.cookie = `${key}=;path=/;SameSite=Strict;${secureFlag}max-age=-1`
   },
 }
diff --git a/lib/token.ts b/lib/token.ts
index 531b5a78..dcf8e4bc 100644
--- a/lib/token.ts
+++ b/lib/token.ts
@@ -38,6 +38,17 @@ export const remapToken = (token: string) => {
   }
 }
 
+export function remapQuote(exchange: Exchange) {
+  switch (exchange) {
+    case "binance":
+    case "okx":
+      return "USDT"
+    case "coinbase":
+    case "kraken":
+      return "USD"
+  }
+}
+
 export const DEFAULT_QUOTE: Record<Exchange, `0x${string}`> = {
   binance: Token.findByTicker("USDT").address,
   coinbase: Token.findByTicker("USDC").address,
diff --git a/lib/utils.ts b/lib/utils.ts
index f96a0342..3620cb24 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,8 +1,10 @@
 import { Metadata } from "next/types"
 
+import { Exchange } from "@renegade-fi/react"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
+import { remapQuote, remapToken } from "@/lib/token"
 import { isTestnet } from "@/lib/viem"
 
 export function cn(...inputs: ClassValue[]) {
@@ -186,3 +188,20 @@ export function decimalCorrectPrice(
 
   return correctedPrice
 }
+
+export function constructExchangeUrl(exchange: Exchange, base: string) {
+  const remappedBase = remapToken(base)
+  const quote = remapQuote(exchange)
+  switch (exchange) {
+    case "binance":
+      return `https://www.binance.com/en/trade/${remappedBase}_${quote}`
+    case "coinbase":
+      return `https://www.coinbase.com/advanced-trade/${remappedBase}-${quote}`
+    case "kraken":
+      return `https://pro.kraken.com/app/trade/${remappedBase}-${quote}`
+    case "okx":
+      return `https://www.okx.com/trade-spot/${remappedBase}-${quote}`
+    default:
+      return ""
+  }
+}
diff --git a/middleware.ts b/middleware.ts
index 108efb98..fa26db64 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,17 +1,6 @@
-import type { NextRequest } from "next/server"
-import { NextResponse, userAgent } from "next/server"
-
-import { STORAGE_BASE } from "@/lib/constants/storage"
+import { NextRequest, NextResponse } from "next/server"
 
 export function middleware(request: NextRequest) {
-  const { device } = userAgent(request)
-  if (device.type === "mobile") {
-    if (request.nextUrl.pathname !== "/m") {
-      request.nextUrl.pathname = "/m"
-      return NextResponse.redirect(request.nextUrl)
-    }
-    return
-  }
   if (
     request.nextUrl.pathname === "/" ||
     request.nextUrl.pathname === "/trade"
diff --git a/package.json b/package.json
index 1f28ef6b..bb59b0f2 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@datadog/browser-rum": "^5.23.3",
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-context-menu": "^2.2.1",
@@ -44,11 +45,12 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "connectkit": "^1.8.1",
+    "connectkit": "~1.8.2",
     "dayjs": "^1.11.11",
     "framer-motion": "^11.3.31",
     "lucide-react": "^0.383.0",
     "motion-number": "^0.1.7",
+    "nanoevents": "^9.0.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
     "numeral": "^2.0.6",
@@ -63,9 +65,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.3.3",
     "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.1",
+    "vaul": "0.9.1",
     "viem": "~2.15.1",
-    "wagmi": "^2.12.1",
+    "wagmi": "~2.12.11",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0107d9c8..7555a8db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.0
+        version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-avatar':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -105,7 +108,7 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       connectkit:
-        specifier: ^1.8.1
+        specifier: ~1.8.2
         version: 1.8.2(@babel/core@7.24.7)(@tanstack/react-query@5.45.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(viem@2.15.1(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(wagmi@2.12.11(@tanstack/query-core@5.45.0)(@tanstack/react-query@5.45.1(react@18.3.1))(@types/react@18.3.3)(@upstash/redis@1.34.0)(@vercel/kv@2.0.0)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10))(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.15.1(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8))
       dayjs:
         specifier: ^1.11.11
@@ -119,6 +122,9 @@ importers:
       motion-number:
         specifier: ^0.1.7
         version: 0.1.7(framer-motion@11.3.31(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nanoevents:
+        specifier: ^9.0.0
+        version: 9.0.0
       next:
         specifier: 14.2.3
         version: 14.2.3(@babel/core@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -162,13 +168,13 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0(react@18.3.1)
       vaul:
-        specifier: ^0.9.1
+        specifier: 0.9.1
         version: 0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       viem:
         specifier: ~2.15.1
         version: 2.15.1(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)
       wagmi:
-        specifier: ^2.12.1
+        specifier: ~2.12.11
         version: 2.12.11(@tanstack/query-core@5.45.0)(@tanstack/react-query@5.45.1(react@18.3.1))(@types/react@18.3.3)(@upstash/redis@1.34.0)(@vercel/kv@2.0.0)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10))(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.15.1(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8)
       zod:
         specifier: ^3.23.8
@@ -1614,6 +1620,19 @@ packages:
   '@radix-ui/primitive@1.1.0':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
+  '@radix-ui/react-accordion@1.2.0':
+    resolution: {integrity: sha512-HJOzSX8dQqtsp/3jVxCU3CXEONF7/2jlGAB28oX8TTw1Dz8JYbEI1UcL8355PuLBE41/IRRMvCw7VkiK/jcUOQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.0':
     resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
     peerDependencies:
@@ -1653,6 +1672,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.0':
+    resolution: {integrity: sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -4911,6 +4943,10 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  nanoevents@9.0.0:
+    resolution: {integrity: sha512-X8pU7IOpgKXVLPxYUI55ymXc8XuBE+uypfEyEFBtHkD1EX9KavYTVc+vXZHFyHKzA1TaZoVDqklLdQBBrxIuAw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -8265,6 +8301,23 @@ snapshots:
 
   '@radix-ui/primitive@1.1.0': {}
 
+  '@radix-ui/react-accordion@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collapsible': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -8302,6 +8355,22 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-collapsible@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -12468,6 +12537,8 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nanoevents@9.0.0: {}
+
   nanoid@3.3.7: {}
 
   natural-compare@1.4.0: {}
diff --git a/providers/wagmi-provider/wagmi-provider.tsx b/providers/wagmi-provider/wagmi-provider.tsx
index 7847ade7..90ba4ff7 100644
--- a/providers/wagmi-provider/wagmi-provider.tsx
+++ b/providers/wagmi-provider/wagmi-provider.tsx
@@ -64,7 +64,6 @@ export function WagmiProvider({
   cookie?: string
 }) {
   const [open, setOpen] = React.useState(false)
-  const onOpenChange = () => setOpen(!open)
   const initialState = cookieToInitialState(config, cookie)
   return (
     <Provider
@@ -80,14 +79,14 @@ export function WagmiProvider({
             enforceSupportedChains: true,
           }}
           theme="midnight"
-          onConnect={onOpenChange}
+          onConnect={() => setOpen(true)}
         >
           {children}
           <SyncRenegadeWagmiState />
         </ConnectKitProvider>
         <SignInDialog
           open={open}
-          onOpenChange={onOpenChange}
+          onOpenChange={setOpen}
         />
       </QueryProvider>
     </Provider>
diff --git a/public/static/theme.css b/public/static/theme.css
index 44c8bb15..f19451f8 100644
--- a/public/static/theme.css
+++ b/public/static/theme.css
@@ -45,4 +45,23 @@
 	--tv-color-popup-element-text-hover: #FFFFFF;
 	--tv-color-popup-element-background-active: #1c1917;
 	--tv-color-popup-element-text-active: #FFFFFF;
+
+    --tv-color-toolbar-button-background-hover: #2A2E39;
+    --tv-color-toolbar-button-background-expanded: #27272A;
+    --tv-color-toolbar-button-text: hsl(24, 5.4%, 63.9%);
+    --tv-color-toolbar-button-text-hover: hsl(24, 5.4%, 63.9%);
+    --tv-color-toolbar-button-text-active: #2A62FF;
+    --tv-color-toolbar-button-text-active-hover: #2A62FF;
+    --tv-color-toolbar-divider-background: hsl(12 6.5% 15.1%);
+
+
+    --tv-color-popup-element-background-hover: #2A2E39;
+    --tv-color-popup-element-divider-background: #444651;
+    --tv-color-popup-element-secondary-text: #5E606B;
+    --tv-color-popup-element-hint-text: #5E606B;
+    --tv-color-popup-element-toolbox-text: hsl(24, 5.4%, 63.9%);
+    --tv-color-popup-element-toolbox-text-hover: hsl(24, 5.4%, 63.9%);
+    --tv-color-popup-element-toolbox-text-active-hover: #90BFF9;
+    --tv-color-popup-element-toolbox-background-hover: #363A45;
+    --tv-color-popup-element-toolbox-background-active-hover: #1849CD;
 }
\ No newline at end of file