diff --git a/src/App.tsx b/src/App.tsx
index 429f5869..4230ceff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ import { Logs } from '@/components/Logs'
 import SwitchWallet from '@/components/SwitchWallet'
 import { EarnPage } from '@/components/earn/EarnPage'
 import { Layout } from '@/components/layout/Layout'
-import { Orderbook } from '@/components/orderbook/Orderbook'
+import { OrderbookPage } from '@/components/orderbook/OrderbookPage'
 import { ReceivePage } from '@/components/receive/ReceivePage'
 import { SendPage } from '@/components/send/SendPage'
 import { RescanChainPage } from '@/components/settings/RescanChainPage'
@@ -104,7 +104,7 @@ function App() {
             <Route path={routes.earn} element={<EarnPage walletFileName={walletFileName!} />} />
             <Route path={routes.sweep} element={<SweepPage walletFileName={walletFileName!} />} />
             <Route path={routes.settings} element={<SettingsPage walletFileName={walletFileName!} />} />
-            <Route path={routes.orderbook} element={<Orderbook />} />
+            <Route path={routes.orderbook} element={<OrderbookPage />} />
             <Route path={routes.logs} element={<Logs />} />
             <Route path={routes.rescan} element={<RescanChainPage walletFileName={walletFileName!} />} />
             {isDebugFeatureEnabled('devPage') && (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 145b3faa..dfd3fe72 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import { AlertTriangleIcon, BlocksIcon, BookOpenIcon, CheckIcon, FileIcon, XIcon
 import { useTranslation, Trans } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { useStore } from 'zustand'
-import { OrderbookDialog } from '@/components/orderbook/OrderbookDialog'
+import { OrderbookOverlay } from '@/components/orderbook/OrderbookOverlay'
 import { Button } from '@/components/ui/button'
 import { isDebugFeatureEnabled } from '@/constants/debugFeatures'
 import { routes } from '@/constants/routes'
@@ -12,6 +12,7 @@ import { useJmInfo } from '@/hooks/useJmInfo'
 import { toSemVer } from '@/lib/utils'
 import { jmSessionStore } from '@/store/jmSessionStore'
 import packageInfo from '../../package.json'
+import PageTitle from './PageTitle'
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from './ui/dialog'
 
 const APP_DISPLAY_VERSION = (() => {
@@ -24,11 +25,11 @@ export function Footer() {
   const blockHeight = useStore(jmSessionStore, (state) => state.state?.block_height)
   const [isCheatsheetOpen, setIsCheatsheetOpen] = useState(false)
   const [isShowBetaWarning, setShowBetaWarning] = useState(false)
-  const [isOrderbookOpen, setIsOrderbookOpen] = useState(false)
+  const [isOrderbookOverlayOpen, setIsOrderbookOverlayOpen] = useState(false)
 
   return (
     <>
-      <footer className="flex items-center justify-between bg-white p-4 text-black opacity-80 transition-colors duration-300 dark:bg-[#181b20] dark:text-white">
+      <footer className="flex items-center justify-between p-4">
         <div className="flex-1 text-xs">
           <BetaWarningModal open={isShowBetaWarning} onOpenChange={setShowBetaWarning} />
           <Trans i18nKey="footer.warning">
@@ -39,11 +40,11 @@ export function Footer() {
           </Trans>
         </div>
         <div className="flex flex-1 items-center justify-center gap-2">
-          <Button variant="ghost" size="sm" className="border" onClick={() => setIsCheatsheetOpen(true)}>
+          <Button variant="outline" size="sm" onClick={() => setIsCheatsheetOpen(true)}>
             <FileIcon />
             {t('footer.cheatsheet')}
           </Button>
-          <Button variant="ghost" size="sm" onClick={() => setIsOrderbookOpen(true)} className="border">
+          <Button variant="outline" size="sm" onClick={() => setIsOrderbookOverlayOpen(true)}>
             <BookOpenIcon />
             {t('footer.orderbook')}
           </Button>
@@ -78,7 +79,7 @@ export function Footer() {
       </footer>
 
       {isCheatsheetOpen && <Cheatsheet setIsCheatsheetOpen={setIsCheatsheetOpen} />}
-      <OrderbookDialog open={isOrderbookOpen} onOpenChange={setIsOrderbookOpen} />
+      <OrderbookOverlay open={isOrderbookOverlayOpen} onOpenChange={setIsOrderbookOverlayOpen} />
     </>
   )
 }
@@ -139,16 +140,14 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
         }`}
       >
         <div className="flex-shrink-0 p-6 pb-4">
-          <div className="flex items-center justify-between">
-            <span className="text-foreground text-2xl font-semibold">{t('cheatsheet.title')}</span>
-            <button
-              onClick={handleClose}
-              className="text-muted-foreground hover:text-foreground ml-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
-            >
+          <div className="flex items-center justify-between gap-2">
+            <PageTitle title={t('cheatsheet.title')} />
+            <Button onClick={handleClose} variant="ghost" size="lg" title={t('global.close')}>
               <XIcon />
-            </button>
+              <span className="sr-only">{t('global.close')}</span>
+            </Button>
           </div>
-          <p className="text-muted-foreground mt-2 leading-relaxed">
+          <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
             <Trans i18nKey="cheatsheet.description">
               Follow the steps below to increase your financial privacy. It is advisable to switch from{' '}
               <a
@@ -190,7 +189,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
               <div className="flex-1">
                 <h3 className="text-foreground mb-1">
                   <Trans i18nKey="cheatsheet.receive.title">
-                    <Link to={'/receive'} className="font-semibold underline">
+                    <Link to={routes.receive} className="font-semibold underline">
                       <span>Fund</span>
                     </Link>{' '}
                     your wallet.
@@ -207,7 +206,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
               <div className="flex-1">
                 <h3 className="text-foreground mb-1">
                   <Trans i18nKey="cheatsheet.send.title">
-                    <Link to={'/send'} className="font-semibold underline">
+                    <Link to={routes.send} className="font-semibold underline">
                       <span>Send</span>
                     </Link>{' '}
                     a collaborative transaction to another jar.
@@ -225,7 +224,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
                 <h3 className="text-foreground mb-1">
                   <Trans i18nKey="cheatsheet.bond.title">
                     Optional:
-                    <Link to={'/earn'} className="font-semibold underline">
+                    <Link to={routes.earn} className="font-semibold underline">
                       <span>Lock</span>
                     </Link>{' '}
                     funds in a fidelity bond.
@@ -242,7 +241,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
               <div className="flex-1">
                 <h3 className="text-foreground mb-1">
                   <Trans i18nKey="cheatsheet.earn.title">
-                    <Link to={'/earn'} className="font-semibold underline">
+                    <Link to={routes.earn} className="font-semibold underline">
                       <span>Earn</span>
                     </Link>{' '}
                     sats by providing liquidity.
@@ -260,7 +259,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
                 <h3 className="text-foreground mb-1">
                   <Trans i18nKey="cheatsheet.schedule.title">
                     Schedule
-                    <Link to={'/sweep'} className="font-semibold underline">
+                    <Link to={routes.sweep} className="font-semibold underline">
                       sweep
                     </Link>{' '}
                     transactions to empty your wallet.
@@ -272,7 +271,7 @@ const Cheatsheet = ({ setIsCheatsheetOpen }: { setIsCheatsheetOpen: (value: bool
 
             <div className="flex gap-4">
               <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-black font-bold text-white dark:bg-white dark:text-black">
-                <CheckIcon className="p-0.5" />
+                <CheckIcon className="size-4" />
               </div>
               <div className="flex-1">
                 <h3 className="text-foreground mb-1">{t('cheatsheet.repeat.title')}</h3>
diff --git a/src/components/orderbook/Orderbook.tsx b/src/components/orderbook/OrderbookContent.tsx
similarity index 98%
rename from src/components/orderbook/Orderbook.tsx
rename to src/components/orderbook/OrderbookContent.tsx
index d85a019b..0a75d402 100644
--- a/src/components/orderbook/Orderbook.tsx
+++ b/src/components/orderbook/OrderbookContent.tsx
@@ -22,7 +22,6 @@ import {
 } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
-import PageTitle from '../PageTitle'
 import { DevBadge } from '../dev/DevBadge'
 import { Alert, AlertDescription } from '../ui/alert'
 import { Label } from '../ui/label'
@@ -393,14 +392,3 @@ export const OrderbookContent = ({ className }: OrderbookContentProps) => {
     </div>
   )
 }
-
-export const Orderbook = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="mx-auto space-y-3 p-4">
-      <PageTitle title={t('orderbook.title')} />
-      <OrderbookContent />
-    </div>
-  )
-}
diff --git a/src/components/orderbook/OrderbookDialog.tsx b/src/components/orderbook/OrderbookOverlay.tsx
similarity index 84%
rename from src/components/orderbook/OrderbookDialog.tsx
rename to src/components/orderbook/OrderbookOverlay.tsx
index 4d419016..4274359d 100644
--- a/src/components/orderbook/OrderbookDialog.tsx
+++ b/src/components/orderbook/OrderbookOverlay.tsx
@@ -2,14 +2,14 @@ import { XIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import PageTitle from '../PageTitle'
-import { OrderbookContent } from './Orderbook'
+import { OrderbookContent } from './OrderbookContent'
 
-interface OrderbookDialogProps {
+interface OrderbookOverlayProps {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export function OrderbookDialog({ open, onOpenChange }: OrderbookDialogProps) {
+export function OrderbookOverlay({ open, onOpenChange }: OrderbookOverlayProps) {
   const { t } = useTranslation()
   if (!open) {
     return <></>
diff --git a/src/components/orderbook/OrderbookPage.tsx b/src/components/orderbook/OrderbookPage.tsx
new file mode 100644
index 00000000..583a068b
--- /dev/null
+++ b/src/components/orderbook/OrderbookPage.tsx
@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next'
+import PageTitle from '../PageTitle'
+import { OrderbookContent } from './OrderbookContent'
+
+export const OrderbookPage = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="mx-auto space-y-3 p-4">
+      <PageTitle title={t('orderbook.title')} />
+      <OrderbookContent />
+    </div>
+  )
+}