diff --git a/.vscode/settings.json b/.vscode/settings.json
index 731b2e1e8..139027372 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "css.customData": [".vscode/css_custom_data.json"]
+  "css.customData": [
+    ".vscode/css_custom_data.json"
+  ]
 }
diff --git a/package.json b/package.json
index 85224e730..335ca7694 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@airswap/libraries": "4.3.6",
+    "@airswap/libraries": "5.0.3",
     "@akkafinance/web3-react-bitkeep": "^1.0.0",
     "@coinbase/wallet-sdk": "^3.7.2",
     "@craco/craco": "^6.2.0",
diff --git a/public/index.html b/public/index.html
index 718bf6e27..9f4b98b6e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,7 +31,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://use.typekit.net/wyd3jpl.css" />
+    <link rel="stylesheet" href="https://use.typekit.net/eix0liv.css" />
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-XSB2E7X42G"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index d4984caf8..ea94e5332 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -7,7 +7,6 @@
     "addToTokenSet": "Import",
     "balance": "Balance",
     "failedToFetchAllowances": "Failed to fetch token allowances",
-    "failedToFetchAllowancesCta": "Please reload the page",
     "tokenBalances": "Token balances",
     "unsupportedToken": "Not yet supported"
   },
@@ -41,11 +40,12 @@
     "language": "Language",
     "learn": "learn",
     "light": "Light",
-    "make": "Make",
+    "make": "OTC",
     "makeOrder": "Make new order",
     "max": "Max",
     "minutes": "minutes",
     "minutesShort": "Min",
+    "myOrders": "OTC",
     "networks": "Networks",
     "no": "No",
     "noResultsFound": "No results found",
@@ -56,8 +56,9 @@
     "receive": "Receive",
     "reloadPage": "Reload Page",
     "review": "Review",
-    "rfq": "RFQ",
+    "rfq": "DEX",
     "select": "Select",
+    "selectToken": "Select token",
     "send": "Send",
     "settings": "Settings",
     "sign": "Sign",
@@ -87,43 +88,41 @@
     "counterParty.title": "Counterparty Wallets",
     "gasFreeSwaps.paragraph": "You found a gasless swap!",
     "gasFreeSwaps.paragraph2": "Some swaps do not require you to pay gas because the transaction is handled by the maker. You'll still need to sign the swap using your wallet to proceed.",
-    "gasFreeSwaps.title": "Gasless swaps",
-    "join.ambassador": "Ambassador",
-    "join.author": "Author",
-    "join.developer": "Developer",
-    "join.getStarted": "Get started",
-    "join.intro": "AirSwap is an open community of developers, designers, writers, and tinkerers building decentralized trading systems. Protocol fees are automatically distributed to contributors.",
-    "join.paragraph2": "Check out the following guides to learn more.",
-    "join.title": "Join AirSwap",
-    "join.voter": "Voter",
-    "protocolFee.paragraph": "AirSwap includes protocol fees distributed to active contributor community members. By using AirSwap you're supporting the development and stewardship of decentralized trading protocols.",
+    "gasFreeSwaps.title": "Gasless swap",
+    "protocolFee.paragraph": "A protocol fee is processed on each swap and distributed to AirSwap contributors and active participants in the decentralized governance process. Using AirSwap supports the development and stewardship of decentralized protocols.",
     "protocolFee.title": "Protocol Fee"
   },
   "marketing": {
-    "includesFee": "Includes 0.07% fee",
-    "welcomeHeading": "Secure and efficient P2P swaps",
-    "welcomeMessage": "Decentralized trading with zero slippage "
+    "welcomeMessage": "Swap tokens with zero slippage"
   },
   "orders": {
-    "actionCannotBeReversed": "This action cannot be reversed",
+    "actionCannotBeReversed": "This will cancel the order on-chain",
     "afterFee": "After {{fee}} fee",
     "amount": "Amount",
     "anyone": "Anyone",
     "approve": "Approve",
-    "approveMessage": "Approve AirSwap to transfer your tokens.",
-    "approvePending": "Prepared to approve {{symbol}}",
+    "orderAmount": "Order amount",
+    "feeAmount": "Protocol fee",
+    "currentApprovalAmount": "Current approval",
+    "requiredApprovalAmount": "Required approval",
+    "approveTokenInYourWallet": "Approve token in your wallet",
+    "approvalComplete": "Approved",
+    "approvalProcessing": "Approving swap...",
     "areYouSureYouWantToCancel": "Are you sure you want to cancel?",
     "availableOrders": "Available orders",
     "bestQuote": "Best quote",
-    "cancelOrder": "Cancel order",
-    "chooseToken": "Choose token",
+    "cancelOrder": "Cancel",
+    "chooseToken": "Select token",
     "clearCustomServer": "Clear custom server",
-    "confirmCancel": "Confirm cancel",
+    "confirmCancel": "Cancel",
+    "connectWallet": "Connect your wallet to proceed",
     "continue": "Continue",
     "copyLink": "Copy link",
     "counterPartyAddress": "Counterparty address",
+    "depositComplete": "Deposit complete",
+    "depositProcessing": "Deposit processing...",
     "dismiss": "Dismiss",
-    "editCustomTokens": "Edit Custom Tokens",
+    "editCustomTokens": "Edit",
     "enterAmount": "Enter an amount",
     "enterAmounts": "Enter amounts",
     "enterTakerAddressOrENS": "Enter taker address or ENS",
@@ -135,21 +134,25 @@
     "expandedResults": "Expanded results from inactive Token Lists",
     "expiryShouldBeMoreThan0": "Expiry should be more than 0",
     "expiryTime": "Expiry",
-    "findingBestPrice": "Finding the best prices...",
+    "findingBestPrice": "Fetching available prices...",
     "from": "From",
     "gasCost": "Gas cost",
-    "gasFreeTrade": "Gasless swap",
-    "insufficientBalance": "Insufficient {{symbol}} balance",
+    "gasFreeTrade": "Gasless",
+    "getAPrice": "Get prices from online servers",
+    "insufficientBalance": "Insufficient balance",
     "listed": "Listed",
     "listingType": "Listing type",
-    "makeNewOrder": "New order",
+    "makeAnOrder": "Make an order",
+    "makeNewOrder": "Make new order",
     "makeNewSwap": "New swap",
     "moreInformation": "More information",
     "nativeCurrencyMaxInfoText": "{{amount}}. This amount is calculated after subtracting a {{fee}} gas fee from your total balance.",
-    "newQuoteIn": "New Quote In",
+    "newQuoteIn": "New quote in",
     "noIndexerOrdersFound": "No orders found for this token pair",
     "noIndexersFound": "No indexer nodes found",
     "orderSuccessfullyCreated": "Order successfully created.",
+    "pendingWallet": "Waiting for wallet",
+    "pendingConfirmation": "Confirm to proceed",
     "price": "Price",
     "priceDifference": "Price difference",
     "protocolFee": "Fee",
@@ -166,8 +169,7 @@
     "selectedServer": "Selected {{serverUrl}} as custom server",
     "settings": "Settings",
     "specificTaker": "Specific Taker",
-    "startByCreatingANewOrder": "Start by creating a new order",
-    "submitted": "Transaction Submitted",
+    "startByCreatingANewOrder": "Start by making an order.",
     "swapExpired": "Swap expired",
     "swapExpiredCallToAction": "Please try again",
     "swapFailed": "Error submitting swap",
@@ -175,24 +177,30 @@
     "swapMessage": "Accept on your wallet to proceed",
     "swapPending": "Prepared to swap",
     "swapRejected": "Price expired",
-    "swapRejectedByUser": "Swap rejected by user",
+    "swapRejectedByUser": "Rejected by wallet",
     "swapRejectedCallToAction": "Please try again",
     "takeOtc": "Take",
-    "takeQuote": "Complete Swap",
+    "takeQuote": "Take",
     "thisOrderIsForADifferentTaker": "This order is for a different taker",
-    "thisOrderIsForAnotherChain": "This order is for the {{chainName}} chain",
+    "thisOrderIsForAnotherChain": "This order is for {{chainName}}",
     "thisOrderWasForADifferentTaker": "This order was for a different taker",
+    "takeSwap": "Take",
     "to": "To",
     "tokenInfoNotFound": "Token info not found",
     "tokenPairUnavailable": "No quotes available",
+    "noValidResponses": "No servers currently available",
     "total": "Total",
     "track": "Track",
-    "trackTransaction": "Track this transaction on the top right",
-    "transactionCompleted": "Transaction Completed",
+    "trackTransaction": "View in transaction history",
+    "transactionCompleted": "Swap complete",
+    "orderSent": "Sending order...",
+    "orderSentToMaker": "Sending order to the maker",
+    "orderSubmitted": "Order submitted...",
+    "orderSubmittedByMaker": "Maker has submitted order",
     "unableTake": "Unable to take",
     "viewAllQuotes": "View all quotes",
     "wrapMessage": "No protocol fee for ETH/WETH swaps",
-    "youHaveNoOpenOTCOrders": "You have no open OTC orders"
+    "youHaveNoOpenOTCOrders": "You have no orders."
   },
   "toast": {
     "approvalComplete": "Approval Complete",
@@ -215,6 +223,7 @@
     "nonceAlreadyUsed": "Nonce has been already used or cancelled",
     "senderAllowanceLow": "Sender (taker) has not approved the required amount",
     "senderBalanceLow": "Sender (taker) does not have the required balance",
+    "signatureInvalid": "Invalid signature",
     "signerAllowanceLow": "Signer (maker) has not approved the required amount",
     "signerBalanceLow": "Signer (maker) does not have the required balance",
     "swapFail": "The swap would fail for the following reasons.",
@@ -228,7 +237,7 @@
     "approve": "Approve {{symbol}}",
     "cleanupOptions": "Cleanup options",
     "completedTransactions": "Completed transactions",
-    "connectWallet": "Connect Wallet",
+    "connectWallet": "Continue",
     "copyAddress": "Copy address",
     "dayAgo_one": "{{count}} day ago",
     "dayAgo_other": "{{count}} days ago",
@@ -236,7 +245,6 @@
     "get": "Get",
     "hourAgo_one": "{{count}} hour ago",
     "hourAgo_other": "{{count}} hours ago",
-    "ifYourWalletDoesNotOpenSomethingWentWrong": "If your wallet does not open, something went wrong.",
     "justNow": "Just now",
     "lastLookTransaction": "{{signerAmount}} {{signerToken}} → {{senderAmount}} {{senderToken}}",
     "latestGithubCommit": "Latest github commit",
@@ -248,11 +256,10 @@
     "noCompletedTransactions": "No completed transactions",
     "noTransactions": "No Transactions",
     "notConnected": "Not connected",
-    "selectWallet": "Select a wallet",
-    "signInWallet": "Sign in wallet",
+    "selectWallet": "Select wallet",
     "switchNetwork": "Switch network",
     "transaction": "{{senderAmount}} {{senderToken}} → {{signerAmount}} {{signerToken}}",
-    "transactionLink": "Transaction link",
+    "transactionLink": "View on block explorer",
     "unsupported": "Unsupported",
     "unsupportedNetwork": "Unsupported network",
     "viewOnExplorer": "View on explorer",
diff --git a/public/locales/th/translation.json b/public/locales/th/translation.json
new file mode 100644
index 000000000..849fa092b
--- /dev/null
+++ b/public/locales/th/translation.json
@@ -0,0 +1,267 @@
+{
+  "app": {
+    "description": "AirSwap ขับเคลื่อนการซื้อขายโทเค็นแบบ Peer to Peer",
+    "title": "AirSwap: กระดานเทรดไร้ศูนย์กลาง สำหรับซื้อขายเหรียญโทเค็น แบบ Peer to Peer และ Open Source Developer บน DAO"
+  },
+  "balances": {
+    "addToTokenSet": "นำเข้า",
+    "balance": "ยอดคงเหลือ",
+    "failedToFetchAllowances": "ไม่สามารถดึงข้อมูลสิทธิ์การใช้งานโทเค็น",
+    "failedToFetchAllowancesCta": "กรุณาโหลดหน้าใหม่",
+    "tokenBalances": "ยอดคงเหลือโทเค็น",
+    "unsupportedToken": "ยังไม่รองรับ"
+  },
+  "common": {
+    "AirSwap": "AirSwap",
+    "account": "บัญชี",
+    "active": "กำลังใช้งาน",
+    "all": "ทั้งหมด",
+    "back": "กลับ",
+    "build": "สร้าง",
+    "cancel": "ยกเลิก",
+    "canceled": "ถูกยกเลิก",
+    "chainId": "หมายเลข Chain",
+    "close": "ปิด",
+    "closeOverlay": "ปิดหน้าต่าง",
+    "dark": "โหมดมืด",
+    "days": "วัน",
+    "daysShort": "วัน",
+    "done": "เสร็จสิ้น",
+    "edit": "แก้ไข",
+    "expired": "หมดอายุ",
+    "expiresIn": "หมดอายุใน",
+    "expiry": "วันหมดอายุ",
+    "failed": "ล้มเหลว",
+    "fee": "ค่าธรรมเนียม",
+    "fetching": "กำลังดึงข้อมูล",
+    "for": "สำหรับ",
+    "hours": "ชั่วโมง",
+    "hoursShort": "ชม.",
+    "join": "เข้าร่วม",
+    "language": "ภาษา",
+    "learn": "เรียนรู้",
+    "light": "โหมดสว่าง",
+    "make": "สร้าง",
+    "makeOrder": "สร้างคำสั่งใหม่",
+    "max": "สูงสุด",
+    "minutes": "นาที",
+    "minutesShort": "นาที",
+    "myOrders": "คำสั่งของฉัน",
+    "networks": "เครือข่าย",
+    "no": "ไม่",
+    "noResultsFound": "ไม่พบผลลัพธ์",
+    "order": "คำสั่ง",
+    "otc": "OTC",
+    "pair": "คู่สกุลเงิน",
+    "processing": "กำลังดำเนินการ",
+    "receive": "รับมา",
+    "reloadPage": "โหลดหน้าใหม่",
+    "review": "ตรวจสอบ",
+    "rfq": "RFQ",
+    "select": "เลือก",
+    "selectToken": "เลือกโทเค็น",
+    "send": "ส่ง",
+    "settings": "การตั้งค่า",
+    "sign": "เซ็น",
+    "stats": "สถิติ",
+    "status": "สถานะ",
+    "success": "สำเร็จ",
+    "swap": "แลกเปลี่ยน",
+    "system": "ระบบ",
+    "taken": "ถูกใช้ไปแล้ว",
+    "theme": "ธีม",
+    "token": "โทเค็น",
+    "undefined": "ไม่ได้ระบุ",
+    "unknown": "ไม่ทราบ",
+    "verifyToken": "ยืนยันโทเค็น",
+    "vote": "โหวต",
+    "weeks": "สัปดาห์",
+    "weeksShort": "สัปดาห์",
+    "wrap": "แปลงโทเค็น",
+    "yes": "ใช่",
+    "you": "คุณ"
+  },
+  "information": {
+    "counterParty.anyone.paragraph": "หากคุณไม่ระบุที่อยู่กระเป๋าเงินของคู่สัญญา กระเป๋าเงินใดๆก็จะสามารถทำการแลกเปลี่ยนได้ ซึ่งอาจทำให้ธุรกรรมถูกดำเนินการล่วงหน้าโดยบุคคลที่สามได้",
+    "counterParty.anyone.title": "ใครก็ได้",
+    "counterParty.specify.paragraph": "หากคุณระบุที่อยู่กระเป๋าเงินของคู่สัญญา เฉพาะกระเป๋าเงินนั้นเท่านั้นที่สามารถทำการแลกเปลี่ยนได้ วิธีนี้ช่วยป้องกันการดำเนินการล่วงหน้าและทำให้มั่นใจว่ามีเพียงคู่สัญญาที่ต้องการเท่านั้นที่สามารถทำได้",
+    "counterParty.specify.title": "ระบุ",
+    "counterParty.title": "Wallet ของคู่สัญญา",
+    "gasFreeSwaps.paragraph": "คุณพบการแลกเปลี่ยนที่ไม่ต้องเสียค่าแก๊ส!",
+    "gasFreeSwaps.paragraph2": "การแลกเปลี่ยนบางรายการไม่ต้องจ่ายค่าแก๊ส เนื่องจาก Maker เป็นผู้ดำเนินการ แต่คุณยังคงต้อง Sign การแลกเปลี่ยนโดยใช้ Wallet ของคุณ",
+    "gasFreeSwaps.title": "การแลกเปลี่ยนที่ไม่ต้องเสียค่าแก๊ส",
+    "join.ambassador": "Ambassador",
+    "join.author": "ผู้เขียน",
+    "join.developer": "นักพัฒนา",
+    "join.getStarted": "เริ่มต้น",
+    "join.intro": "AirSwap เป็นชุมชนเปิดที่รวมกลุ่มนักพัฒนา นักออกแบบ นักเขียน และนักคิดสร้างสรรค์ เพื่อสร้างระบบการซื้อขายแบบกระจายอำนาจ ค่าธรรมเนียมในโปรโตคอลจะถูกแจกจ่ายโดยอัตโนมัติให้กับผู้ร่วมสร้าง",
+    "join.paragraph2": "ดูคำแนะนำต่อไปนี้เพื่อเรียนรู้เพิ่มเติม",
+    "join.title": "เข้าร่วม AirSwap",
+    "join.voter": "ผู้ลงคะแนน",
+    "protocolFee.paragraph": "AirSwap มีค่าธรรมเนียมโปรโตคอลที่กระจายไปยังสมาชิกชุมชนผู้ร่วมพัฒนา เมื่อคุณใช้งาน AirSwap เท่ากับคุณร่วมสนับสนุนโปรโตคอลการซื้อขายแบบกระจายอำนาจ",
+    "protocolFee.title": "ค่าธรรมเนียมโปรโตคอล"
+  },
+  "marketing": {
+    "includesFee": "รวมค่าธรรมเนียม 0.07%",
+    "welcomeHeading": "การแลกเปลี่ยน P2P ที่ปลอดภัยและมีประสิทธิภาพ",
+    "welcomeMessage": "การแลกเปลี่ยนแบบปราศจากความคลาดเคลื่อน (Zero slippage)"
+  },
+  "orders": {
+    "actionCannotBeReversed": "ไม่สามารถยกเลิกการกระทำนี้ได้",
+    "afterFee": "หลังหักค่าธรรมเนียม {{fee}}",
+    "amount": "จำนวน",
+    "anyone": "ใครก็ได้",
+    "approve": "อนุมัติ",
+    "approveMessage": "อนุมัติให้ AirSwap โอนโทเค็นของคุณ",
+    "approvePending": "เตรียมการอนุมัติ {{symbol}}",
+    "approveTokenInYourWallet": "อนุมัติโทเค็นในกระเป๋าเงินของคุณ",
+    "areYouSureYouWantToCancel": "คุณแน่ใจหรือไม่ว่าต้องการยกเลิก?",
+    "availableOrders": "คำสั่งซื้อที่ใช้ได้",
+    "bestQuote": "อัตราดีที่สุด",
+    "cancelOrder": "ยกเลิกคำสั่งซื้อ",
+    "chooseToken": "เลือกโทเค็น",
+    "clearCustomServer": "ล้างเซิร์ฟเวอร์ที่กำหนดเอง",
+    "confirmCancel": "ยืนยันการยกเลิก",
+    "connectWallet": "เชื่อมต่อกระเป๋าเงินของคุณเพื่อดูการแลกเปลี่ยน",
+    "continue": "ดำเนินการต่อ",
+    "copyLink": "คัดลอกลิงก์",
+    "counterPartyAddress": "ที่อยู่ของคู่สัญญา",
+    "dismiss": "ปิด",
+    "editCustomTokens": "แก้ไขโทเค็นแบบกำหนดเอง",
+    "enterAmount": "ใส่จำนวน",
+    "enterAmounts": "ใส่จำนวน",
+    "enterTakerAddressOrENS": "ใส่ที่อยู่ผู้รับหรือ ENS",
+    "enterTokenAmount": "ใส่จำนวน {{symbol}}",
+    "enterValidTakerAddress": "ใส่ที่อยู่ผู้รับที่ถูกต้อง",
+    "errorRequesting": "มีข้อผิดพลาดในการร้องขอคำสั่งซื้อ",
+    "errorRequestingCta": "โปรดรีเฟรชหน้าแล้วลองใหม่อีกครั้ง",
+    "exchangeRate": "อัตราแลกเปลี่ยน",
+    "expandedResults": "ผลลัพธ์เพิ่มเติมจากรายการโทเค็นที่ไม่ได้ใช้งาน",
+    "expiryShouldBeMoreThan0": "วันหมดอายุควรมากกว่า 0",
+    "expiryTime": "วันหมดอายุ",
+    "findingBestPrice": "กำลังค้นหาราคาที่ดีที่สุด...",
+    "from": "จาก",
+    "gasCost": "ค่าแก๊ส",
+    "gasFreeTrade": "การแลกเปลี่ยนแบบไม่ใช้แก๊ส",
+    "insufficientBalance": "ยอดเงิน {{symbol}} ไม่เพียงพอ",
+    "listed": "รายการ",
+    "listingType": "ประเภทรายการ",
+    "makeNewOrder": "คำสั่งซื้อใหม่",
+    "makeNewSwap": "การแลกเปลี่ยนใหม่",
+    "moreInformation": "ข้อมูลเพิ่มเติม",
+    "nativeCurrencyMaxInfoText": "{{amount}}. จำนวนนี้คำนวณหลังหักค่าธรรมเนียมแก๊ส {{fee}} จากยอดคงเหลือทั้งหมดของคุณ",
+    "newQuoteIn": "เสนอราคาใหม่ใน",
+    "noIndexerOrdersFound": "ไม่พบคำสั่งซื้อสำหรับคู่โทเค็นนี้",
+    "noIndexersFound": "ไม่พบโหนดดัชนี",
+    "orderSuccessfullyCreated": "สร้างคำสั่งซื้อสำเร็จ",
+    "pendingConfirmation": "รอการอนุมัติ",
+    "price": "ราคา",
+    "priceDifference": "ความแตกต่างของราคา",
+    "protocolFee": "ค่าธรรมเนียม",
+    "protocolFeeActive": "ค่าธรรมเนียมโปรโตคอล {{fee}} เปิดใช้งาน",
+    "publiclyList": "ลงรายการสาธารณะ",
+    "publiclyListDescription": "อนุญาตให้ผู้อื่นค้นหาการแลกเปลี่ยนของฉันได้",
+    "rate": "อัตรา",
+    "receivedQuotes": "ราคาเสนอที่ได้รับ",
+    "removeFromActive": "นำออกจากรายการที่ใช้งานอยู่",
+    "retryOrCancel": "ลองเพิ่มขนาดหรือเลือกโทเค็นอื่น",
+    "revertPrice": "กลับสู่ราคาเดิม",
+    "scanningPeers": "กำลังสแกนเครือข่ายผู้ใช้งาน",
+    "searchByNameOrAddress": "ค้นหาชื่อหรือวางที่อยู่",
+    "selectedServer": "เลือก {{serverUrl}} เป็นเซิร์ฟเวอร์ที่กำหนดเอง",
+    "settings": "การตั้งค่า",
+    "signTransactionInYourWallet": "ลงนามธุรกรรมในกระเป๋าเงินของคุณ",
+    "specificTaker": "ผู้รับเฉพาะ",
+    "startByCreatingANewOrder": "เริ่มโดยสร้างคำสั่งซื้อใหม่",
+    "submitted": "ธุรกรรมถูกส่งแล้ว",
+    "swapExpired": "การแลกเปลี่ยนหมดอายุ",
+    "swapExpiredCallToAction": "โปรดลองใหม่",
+    "swapFailed": "มีข้อผิดพลาดในการส่งการแลกเปลี่ยน",
+    "swapFailedCallToAction": "โปรดลองใหม่",
+    "swapMessage": "ยอมรับในกระเป๋าเงินของคุณเพื่อดำเนินการต่อ",
+    "swapPending": "เตรียมการแลกเปลี่ยน",
+    "swapRejected": "ราคาหมดอายุ",
+    "swapRejectedByUser": "การแลกเปลี่ยนถูกปฏิเสธโดยผู้ใช้",
+    "swapRejectedCallToAction": "โปรดลองใหม่",
+    "takeOtc": "รับ",
+    "takeQuote": "ดำเนินการแลกเปลี่ยน",
+    "thisOrderIsForADifferentTaker": "คำสั่งซื้อนี้สำหรับผู้รับคนอื่น",
+    "thisOrderIsForAnotherChain": "คำสั่งซื้อนี้สำหรับ {{chainName}}",
+    "thisOrderWasForADifferentTaker": "คำสั่งซื้อนี้สำหรับผู้รับที่ต่างกัน",
+    "to": "ถึง",
+    "tokenInfoNotFound": "ไม่พบข้อมูลโทเค็น",
+    "tokenPairUnavailable": "ไม่มีข้อเสนอราคา",
+    "total": "รวม",
+    "track": "ติดตาม",
+    "trackTransaction": "ติดตามธุรกรรมนี้ที่มุมขวาบน",
+    "transactionCompleted": "ธุรกรรมเสร็จสมบูรณ์",
+    "unableTake": "ไม่สามารถรับได้",
+    "viewAllQuotes": "ดูข้อเสนอราคาทั้งหมด",
+    "wrapMessage": "ไม่มีค่าธรรมเนียมโปรโตคอลสำหรับการแลกเปลี่ยน ETH/WETH",
+    "youHaveNoOpenOTCOrders": "คุณไม่มีคำสั่งซื้อ OTC ที่เปิดอยู่"
+  },
+  "toast": {
+    "approvalComplete": "การอนุมัติเสร็จสมบูรณ์",
+    "approvalFail": "การอนุมัติล้มเหลว",
+    "approve": "อนุมัติ {{symbol}}",
+    "cancelComplete": "ยกเลิกเสร็จสมบูรณ์",
+    "cancelFailed": "ยกเลิกล้มเหลว",
+    "copiedToClipboard": "คัดลอกไปยังคลิปบอร์ดแล้ว",
+    "copyFailed": "การคัดลอกล้มเหลว",
+    "swapComplete": "การแลกเปลี่ยนเสร็จสมบูรณ์",
+    "swapFail": "การแลกเปลี่ยนล้มเหลว",
+    "transaction": "{{senderAmount}} {{senderToken}} → {{signerAmount}} {{signerToken}}"
+  },
+  "validatorErrors": {
+    "arithmeticUnderflow": "จำนวนเงินน้อยเกินไป",
+    "expiryPassed": "คำสั่งหมดอายุแล้ว",
+    "invalidAddress": "{{address}} เป็นที่อยู่ที่ไม่ถูกต้อง",
+    "invalidSignature": "ลายเซ็นไม่ถูกต้อง",
+    "invalidValue": "{{address}} เป็นค่าที่ไม่ถูกต้อง",
+    "nonceAlreadyUsed": "Nonce ถูกใช้หรือยกเลิกไปแล้ว",
+    "senderAllowanceLow": "ผู้ส่ง (taker) ยังไม่ได้อนุมัติจำนวนที่ต้องการ",
+    "senderBalanceLow": "ผู้ส่ง (taker) มียอดคงเหลือไม่เพียงพอ",
+    "signatureInvalid": "ลายเซ็นไม่ถูกต้อง",
+    "signerAllowanceLow": "ผู้ลงนาม (maker) ยังไม่ได้อนุมัติจำนวนที่ต้องการ",
+    "signerBalanceLow": "ผู้ลงนาม (maker) มียอดคงเหลือไม่เพียงพอ",
+    "swapFail": "การแลกเปลี่ยนจะล้มเหลวเนื่องจากเหตุผลต่อไปนี้",
+    "unableSwap": "ไม่สามารถแลกเปลี่ยนได้",
+    "unauthorized": "ลายเซ็นไม่ถูกต้องหรือผู้ลงนามไม่ได้รับอนุญาต",
+    "unknownError": "เกิดข้อผิดพลาดที่ไม่รู้จัก",
+    "unpredictableGasLimit": "ขีดจำกัดของแก๊สไม่แน่นอน"
+  },
+  "wallet": {
+    "activeTransactions": "ธุรกรรมที่ใช้งานอยู่",
+    "approve": "อนุมัติ {{symbol}}",
+    "cleanupOptions": "ตัวเลือกการล้างข้อมูล",
+    "completedTransactions": "ธุรกรรมที่เสร็จสิ้น",
+    "connectWallet": "เชื่อมต่อกระเป๋าเงิน",
+    "copyAddress": "คัดลอกที่อยู่",
+    "dayAgo_one": "{{count}} วันที่แล้ว",
+    "dayAgo_other": "{{count}} วันที่แล้ว",
+    "disconnectWallet": "ยกเลิกการเชื่อมต่อกระเป๋าเงิน",
+    "get": "รับ",
+    "hourAgo_one": "{{count}} ชั่วโมงที่แล้ว",
+    "hourAgo_other": "{{count}} ชั่วโมงที่แล้ว",
+    "justNow": "เมื่อสักครู่",
+    "lastLookTransaction": "{{signerAmount}} {{signerToken}} → {{senderAmount}} {{senderToken}}",
+    "latestGithubCommit": "Commit ล่าสุดบน Github",
+    "minuteAgo_one": "{{count}} นาทีที่แล้ว",
+    "minuteAgo_other": "{{count}} นาทีที่แล้ว",
+    "monthAgo_one": "{{count}} เดือนที่แล้ว",
+    "monthAgo_other": "{{count}} เดือนที่แล้ว",
+    "noActiveTransactions": "ไม่มีธุรกรรมที่ใช้งานอยู่",
+    "noCompletedTransactions": "ไม่มีธุรกรรมที่เสร็จสิ้น",
+    "noTransactions": "ไม่มีธุรกรรม",
+    "notConnected": "ไม่ได้เชื่อมต่อ",
+    "selectWallet": "เลือกกระเป๋าเงิน",
+    "switchNetwork": "เปลี่ยนเครือข่าย",
+    "transaction": "{{senderAmount}} {{senderToken}} → {{signerAmount}} {{signerToken}}",
+    "transactionLink": "ลิงก์ธุรกรรม",
+    "unsupported": "ไม่รองรับ",
+    "unsupportedNetwork": "เครือข่ายที่ไม่รองรับ",
+    "viewOnExplorer": "ดูบน Explorer",
+    "yearAgo_one": "{{count}} ปีที่แล้ว",
+    "yearAgo_other": "{{count}} ปีที่แล้ว"
+  }
+}
diff --git a/src/app/store.ts b/src/app/store.ts
index 802696bbe..7688f4d21 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -8,10 +8,8 @@ import gasCostReducer from "../features/gasCost/gasCostSlice";
 import indexerReducer from "../features/indexer/indexerSlice";
 import makeOtcReducer from "../features/makeOtc/makeOtcSlice";
 import metadataReducer from "../features/metadata/metadataSlice";
-import { subscribeToSavedTokenChangesForLocalStoragePersisting } from "../features/metadata/metadataSubscriber";
 import myOrdersReducer from "../features/myOrders/myOrdersSlice";
 import ordersReducer from "../features/orders/ordersSlice";
-import pricingReducer from "../features/pricing/pricingSlice";
 import quotesReducer from "../features/quotes/quotesSlice";
 import registryReducer from "../features/registry/registrySlice";
 import takeOtcReducer from "../features/takeOtc/takeOtcSlice";
@@ -29,7 +27,6 @@ export const store = configureStore({
     tradeTerms: tradeTermsReducer,
     indexer: indexerReducer,
     orders: ordersReducer,
-    pricing: pricingReducer,
     gasCost: gasCostReducer,
     registry: registryReducer,
     userSettings: userSettingsReducer,
@@ -41,8 +38,6 @@ export const store = configureStore({
   },
 });
 
-subscribeToSavedTokenChangesForLocalStoragePersisting();
-
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppThunk<ReturnType = void> = ThunkAction<
diff --git a/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx b/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx
index d0f01444a..d8760a6d3 100644
--- a/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx
+++ b/src/components/@reviewScreens/ApproveReview/ApproveReview.tsx
@@ -15,8 +15,8 @@ import {
   ReviewListItemValue,
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
 import { ErrorList } from "../../ErrorList/ErrorList";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
-import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import { StyledIconButton } from "../MakeOrderReview/MakeOrderReview.styles";
@@ -93,7 +93,7 @@ const ApproveReview: FC<ApproveReviewProps> = ({
     <Container className={className}>
       <StyledWidgetHeader>
         <Title type="h2" as="h1">
-          {t("orders.approve")} {tokenSymbol}
+          {t("orders.approve")}
         </Title>
       </StyledWidgetHeader>
       <OrderReviewToken
@@ -103,41 +103,40 @@ const ApproveReview: FC<ApproveReviewProps> = ({
         tokenUri={justifiedToken?.logoURI}
       />
       <ReviewList>
-        {readableAllowance !== "0" && (
-          <ReviewListItem>
-            <ReviewListItemLabel>Current approve amount</ReviewListItemLabel>
-            <ReviewListItemValue>
-              {readableAllowance} {tokenSymbol}
-            </ReviewListItemValue>
-          </ReviewListItem>
-        )}
         {roundedFeeAmount && (
           <>
             <ReviewListItem>
-              <ReviewListItemLabel>Order amount</ReviewListItemLabel>
-              <ReviewListItemValue>
-                {amount} {tokenSymbol}
-              </ReviewListItemValue>
+              <ReviewListItemLabel>
+                {t("orders.orderAmount")}
+              </ReviewListItemLabel>
+              <ReviewListItemValue>{amount}</ReviewListItemValue>
             </ReviewListItem>
             <ReviewListItem>
               <ReviewListItemLabel>
-                {t("orders.protocolFee")}
+                {t("orders.feeAmount")}
                 <StyledIconButton
                   icon="information-circle-outline"
                   onClick={toggleShowFeeInfo}
                 />
               </ReviewListItemLabel>
-              <ReviewListItemValue>
-                {roundedFeeAmount} {tokenSymbol}
-              </ReviewListItemValue>
+              <ReviewListItemValue>{roundedFeeAmount}</ReviewListItemValue>
             </ReviewListItem>
           </>
         )}
-
+        {readableAllowance !== "0" && (
+          <ReviewListItem>
+            <ReviewListItemLabel>
+              {t("orders.currentApprovalAmount")}
+            </ReviewListItemLabel>
+            <ReviewListItemValue>{readableAllowance}</ReviewListItemValue>
+          </ReviewListItem>
+        )}
         <ReviewListItem>
-          <ReviewListItemLabel>Total approve amount</ReviewListItemLabel>
+          <ReviewListItemLabel>
+            {t("orders.requiredApprovalAmount")}
+          </ReviewListItemLabel>
           <ReviewListItemValue>
-            {roundedAmountPlusFee || amount} {tokenSymbol}
+            {roundedAmountPlusFee || amount}
           </ReviewListItemValue>
         </ReviewListItem>
       </ReviewList>
@@ -157,14 +156,14 @@ const ApproveReview: FC<ApproveReviewProps> = ({
       />
 
       {onRestartButtonClick && (
-        <Overlay
+        <ModalOverlay
           title={t("validatorErrors.unableSwap")}
           subTitle={t("validatorErrors.swapFail")}
-          onCloseButtonClick={onRestartButtonClick}
+          onClose={onRestartButtonClick}
           isHidden={!errors.length}
         >
           <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
-        </Overlay>
+        </ModalOverlay>
       )}
     </Container>
   );
diff --git a/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx b/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx
index 2898fed7f..915ea31a5 100644
--- a/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx
+++ b/src/components/@reviewScreens/TakeOrderReview/TakeOrderReview.tsx
@@ -14,8 +14,8 @@ import {
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
 import { getTokenPairTranslation } from "../../@widgets/MakeWidget/helpers";
 import { ErrorList } from "../../ErrorList/ErrorList";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
-import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import {
@@ -129,14 +129,14 @@ const MakeOrderReview: FC<TakeOrderReviewProps> = ({
         onCloseButtonClick={() => toggleShowFeeInfo()}
       />
 
-      <Overlay
+      <ModalOverlay
         title={t("validatorErrors.unableSwap")}
         subTitle={t("validatorErrors.swapFail")}
-        onCloseButtonClick={onRestartButtonClick}
+        onClose={onRestartButtonClick}
         isHidden={!errors.length}
       >
         <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
-      </Overlay>
+      </ModalOverlay>
     </Container>
   );
 };
diff --git a/src/components/@reviewScreens/WrapReview/WrapReview.tsx b/src/components/@reviewScreens/WrapReview/WrapReview.tsx
index 96014e2cd..619428b9a 100644
--- a/src/components/@reviewScreens/WrapReview/WrapReview.tsx
+++ b/src/components/@reviewScreens/WrapReview/WrapReview.tsx
@@ -16,8 +16,8 @@ import {
   ReviewListItemValue,
 } from "../../../styled-components/ReviewListItem/ReviewListItem";
 import { ErrorList } from "../../ErrorList/ErrorList";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import OrderReviewToken from "../../OrderReviewToken/OrderReviewToken";
-import Overlay from "../../Overlay/Overlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
 import { Title } from "../../Typography/Typography";
 import { StyledIconButton } from "../MakeOrderReview/MakeOrderReview.styles";
@@ -160,14 +160,14 @@ const ApproveReview: FC<WrapReviewProps> = ({
       />
 
       {onRestartButtonClick && (
-        <Overlay
+        <ModalOverlay
           title={t("validatorErrors.unableSwap")}
           subTitle={t("validatorErrors.swapFail")}
-          onCloseButtonClick={onRestartButtonClick}
+          onClose={onRestartButtonClick}
           isHidden={!errors.length}
         >
           <ErrorList errors={errors} onBackButtonClick={onRestartButtonClick} />
-        </Overlay>
+        </ModalOverlay>
       )}
     </Container>
   );
diff --git a/src/components/@widgets/CancelWidget/CancelWidget.tsx b/src/components/@widgets/CancelWidget/CancelWidget.tsx
index 789937e1f..dbb85e985 100644
--- a/src/components/@widgets/CancelWidget/CancelWidget.tsx
+++ b/src/components/@widgets/CancelWidget/CancelWidget.tsx
@@ -75,7 +75,7 @@ export const CancelWidget: FC<CancelWidgetProps> = ({ order, library }) => {
   if (status === "signing") {
     return (
       <Container>
-        <WalletSignScreen />
+        <WalletSignScreen type="cancel" />
       </Container>
     );
   }
diff --git a/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx b/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx
index a9987d36f..2d21bc1c8 100644
--- a/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx
+++ b/src/components/@widgets/MakeWidget/MakeWidget.styles.tsx
@@ -1,12 +1,13 @@
 import styled from "styled-components/macro";
 
 import breakPoints from "../../../style/breakpoints";
-import { SelectLabel } from "../../../styled-components/Select/Select";
+import { sizes } from "../../../style/sizes";
+import SwapInputs from "../../SwapInputs/SwapInputs";
 import Tooltip from "../../SwapInputs/subcomponents/Tooltip/Tooltip";
 import ActionButtons from "./subcomponents/ActionButtons/ActionButtons";
 import AddressInput from "./subcomponents/AddressInput/AddressInput";
+import { ExpirySelector } from "./subcomponents/ExpirySelector/ExpirySelector";
 import InfoSection from "./subcomponents/InfoSection/InfoSection";
-import InputSection from "./subcomponents/InputSection/InputSection";
 import OrderTypeSelector from "./subcomponents/OrderTypeSelector/OrderTypeSelector";
 import { RateField } from "./subcomponents/RateField/RateField";
 
@@ -16,54 +17,41 @@ export const Container = styled.div`
   flex-grow: 1;
 `;
 
-export const StyledOrderTypeSelector = styled(OrderTypeSelector)`
-  margin-bottom: 1rem;
-  width: calc(50% - 1rem);
-  
-  ${SelectLabel} {
-    flex-shrink: 0;
-  }
-
-  @media ${breakPoints.phoneOnly} {
-    width: auto;
-  }
-}
+export const StyledSwapInputs = styled(SwapInputs)`
+  margin-block-start: 2rem;
 `;
 
-export const StyledRateField = styled(RateField)`
-  justify-content: flex-end;
-  margin-left: 1rem;
-  margin-bottom: 1rem;
-  width: 50%;
-
-  @media ${breakPoints.phoneOnly} {
-    width: auto;
-  }
+export const StyledOrderTypeSelector = styled(OrderTypeSelector)`
+  margin-bottom: ${sizes.widgetGutter};
+  width: calc(46% - ${sizes.widgetGutter});
+}
 `;
 
-export const OrderTypeSelectorAndRateFieldWrapper = styled.div`
+export const OrderTypeSelectorAndExpirySelectorWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  margin-top: 1rem;
-
-  @media ${breakPoints.phoneOnly} {
-    flex-direction: column;
-    align-items: center;
-  }
+  margin-top: ${sizes.widgetGutter};
 `;
 
-export const StyledInputSection = styled(InputSection)`
-  border-radius: 2px;
-  margin-bottom: 1rem;
-  height: 3.5rem;
+export const StyledExpirySelector = styled(ExpirySelector)<{
+  hideExpirySelector: boolean;
+}>`
+  width: 54%;
+  transition: opacity 0.3s ease-out;
+
+  margin-left: ${sizes.widgetGutter};
+  visibility: ${({ hideExpirySelector }) =>
+    hideExpirySelector ? "hidden" : "visible"};
 `;
 
 export const StyledAddressInput = styled(AddressInput)`
-  margin-bottom: 1rem;
+  margin-bottom: ${sizes.widgetGutter};
   height: 3.5rem;
 `;
 
-export const StyledActionButtons = styled(ActionButtons)``;
+export const StyledActionButtons = styled(ActionButtons)`
+  margin-block-start: 0.5rem;
+`;
 
 export const StyledInfoSection = styled(InfoSection)`
   flex-grow: 1;
@@ -89,3 +77,12 @@ export const TooltipContainer = styled.div`
   flex-direction: column;
   position: relative;
 `;
+
+export const StyledRateField = styled(RateField)`
+  margin-inline: auto;
+  margin-block-start: 1rem;
+
+  @media ${breakPoints.phoneOnly} {
+    width: auto;
+  }
+`;
diff --git a/src/components/@widgets/MakeWidget/MakeWidget.tsx b/src/components/@widgets/MakeWidget/MakeWidget.tsx
index 4b182dc68..4e0744ce8 100644
--- a/src/components/@widgets/MakeWidget/MakeWidget.tsx
+++ b/src/components/@widgets/MakeWidget/MakeWidget.tsx
@@ -43,6 +43,7 @@ import toRoundedNumberString from "../../../helpers/toRoundedNumberString";
 import useAllowance from "../../../hooks/useAllowance";
 import useAllowancesOrBalancesFailed from "../../../hooks/useAllowancesOrBalancesFailed";
 import useApprovalPending from "../../../hooks/useApprovalPending";
+import { useBalanceLoading } from "../../../hooks/useBalanceLoading";
 import useDepositPending from "../../../hooks/useDepositPending";
 import useInsufficientBalance from "../../../hooks/useInsufficientBalance";
 import useMaxAmount from "../../../hooks/useMaxAmount";
@@ -57,22 +58,25 @@ import { TokenSelectModalTypes } from "../../../types/tokenSelectModalTypes";
 import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
 import MakeOrderReview from "../../@reviewScreens/MakeOrderReview/MakeOrderReview";
 import WrapReview from "../../@reviewScreens/WrapReview/WrapReview";
+import ApprovalSubmittedScreen from "../../ApprovalSubmittedScreen/ApprovalSubmittedScreen";
+import DepositSubmittedScreen from "../../DepositSubmittedScreen/DepositSubmittedScreen";
 import { SelectOption } from "../../Dropdown/Dropdown";
 import OrderTypesModal from "../../InformationModals/subcomponents/OrderTypesModal/OrderTypesModal";
-import Overlay from "../../Overlay/Overlay";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import ProtocolFeeOverlay from "../../ProtocolFeeOverlay/ProtocolFeeOverlay";
-import SwapInputs from "../../SwapInputs/SwapInputs";
 import { notifyOrderCreated } from "../../Toasts/ToastController";
 import TokenList from "../../TokenList/TokenList";
+import TransactionOverlay from "../../TransactionOverlay/TransactionOverlay";
 import WalletSignScreen from "../../WalletSignScreen/WalletSignScreen";
 import {
   Container,
-  OrderTypeSelectorAndRateFieldWrapper,
+  OrderTypeSelectorAndExpirySelectorWrapper,
   StyledActionButtons,
   StyledAddressInput,
+  StyledExpirySelector,
   StyledInfoSection,
   StyledOrderTypeSelector,
-  StyledRateField,
+  StyledSwapInputs,
   StyledTooltip,
   TooltipContainer,
 } from "./MakeWidget.styles";
@@ -141,6 +145,7 @@ const MakeWidget: FC = () => {
     makerAmount,
     true
   );
+  const isBalanceLoading = useBalanceLoading();
   const hasMissingMakerAmount =
     !makerAmount.length || parseFloat(makerAmount) === 0 || makerAmount === ".";
   const hasMissingTakerAmount =
@@ -151,20 +156,21 @@ const MakeWidget: FC = () => {
     !!maxAmount &&
     makerTokenInfo?.address === ADDRESS_ZERO &&
     !!nativeCurrencySafeTransactionFee[makerTokenInfo.chainId];
-  const hasApprovalPending = !!useApprovalPending(makerTokenInfo?.address);
+  const approvalTransaction = useApprovalPending(makerTokenInfo?.address, true);
+  const depositTransaction = useDepositPending(true);
   const wrappedNativeToken = useNativeWrappedToken(chainId);
   const shouldDepositNativeTokenAmount = useShouldDepositNativeToken(
     makerTokenInfo?.address,
     makerAmount
   );
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
-  const hasDepositPending = useDepositPending();
   const isValidAddress = useValidAddress(takerAddress);
   const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
   const isNetworkSupported = useNetworkSupported();
 
   // Modal states
-  const { setShowWalletList } = useContext(InterfaceContext);
+  const { setShowWalletList, transactionsTabIsOpen } =
+    useContext(InterfaceContext);
   const [showOrderTypeInfo, toggleShowOrderTypeInfo] = useToggle(false);
   const [showFeeInfo, toggleShowFeeInfo] = useToggle(false);
   const [showTokenSelectModal, setShowTokenSelectModal] =
@@ -175,6 +181,12 @@ const MakeWidget: FC = () => {
     dispatch(reset());
   }, []);
 
+  useEffect(() => {
+    if (transactionsTabIsOpen) {
+      setShowTokenSelectModal(null);
+    }
+  }, [transactionsTabIsOpen]);
+
   useEffect(() => {
     if (library) {
       dispatch(fetchIndexerUrls({ provider: library }));
@@ -367,159 +379,188 @@ const MakeWidget: FC = () => {
     }
   };
 
-  if (makeOtcStatus === "signing" || ordersStatus === "signing") {
-    return (
-      <Container>
-        <WalletSignScreen />
-      </Container>
-    );
-  }
+  const renderScreens = () => {
+    if (state === MakeWidgetState.review && shouldDepositNativeToken) {
+      return (
+        <>
+          <WrapReview
+            hasEditButton
+            isLoading={!!depositTransaction}
+            amount={makerAmount}
+            amountPlusFee={makerAmountPlusFee}
+            shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
+            wrappedNativeToken={wrappedNativeToken}
+            onEditButtonClick={handleEditButtonClick}
+            onRestartButtonClick={restart}
+            onSignButtonClick={depositNativeToken}
+          />
+        </>
+      );
+    }
+
+    if (
+      (state === MakeWidgetState.review && !hasSufficientAllowance) ||
+      !!approvalTransaction
+    ) {
+      return (
+        <>
+          <ApproveReview
+            hasEditButton
+            isLoading={!!approvalTransaction}
+            amount={makerAmount}
+            amountPlusFee={makerAmountPlusFee}
+            readableAllowance={readableAllowance}
+            token={makerTokenInfo}
+            wrappedNativeToken={wrappedNativeToken}
+            onEditButtonClick={handleEditButtonClick}
+            onRestartButtonClick={restart}
+            onSignButtonClick={approveToken}
+          />
+        </>
+      );
+    }
+
+    if (state === MakeWidgetState.review) {
+      return (
+        <>
+          <MakeOrderReview
+            chainId={chainId}
+            expiry={expiry}
+            orderType={orderType}
+            senderAddress={takerAddress}
+            senderAmount={takerAmount}
+            senderToken={takerTokenInfo}
+            signerAmount={makerAmount}
+            signerAmountPlusFee={makerAmountPlusFee}
+            signerToken={makerTokenInfo}
+            wrappedNativeToken={wrappedNativeToken}
+            onEditButtonClick={handleEditButtonClick}
+            onSignButtonClick={createOrder}
+          />
+        </>
+      );
+    }
 
-  if (state === MakeWidgetState.review && shouldDepositNativeToken) {
     return (
-      <Container>
-        <WrapReview
-          hasEditButton
-          isLoading={hasDepositPending}
-          amount={makerAmount}
-          amountPlusFee={makerAmountPlusFee}
-          shouldDepositNativeTokenAmount={shouldDepositNativeTokenAmount}
-          wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={restart}
-          onSignButtonClick={depositNativeToken}
+      <>
+        <MakeWidgetHeader />
+
+        <StyledSwapInputs
+          canSetQuoteAmount
+          disabled={!isActive || isAllowancesOrBalancesFailed}
+          readOnly={!isActive || !isNetworkSupported}
+          showMaxButton={showMaxButton}
+          showMaxInfoButton={showMaxInfoButton}
+          baseAmount={makerAmount}
+          baseTokenInfo={makerTokenInfo}
+          maxAmount={maxAmount}
+          side="sell"
+          quoteAmount={takerAmount}
+          quoteTokenInfo={takerTokenInfo}
+          onBaseAmountChange={handleMakerAmountChange}
+          onChangeTokenClick={setShowTokenSelectModal}
+          onMaxButtonClick={() => handleMakerAmountChange(maxAmount || "0")}
+          onQuoteAmountChange={handleTakerAmountChange}
+          onSwitchTokensButtonClick={handleSwitchTokensButtonClick}
         />
-      </Container>
-    );
-  }
+        <OrderTypeSelectorAndExpirySelectorWrapper>
+          <StyledOrderTypeSelector
+            isDisabled={!isActive}
+            options={orderTypeSelectOptions}
+            selectedOrderTypeOption={orderScopeTypeOption}
+            onChange={setOrderScopeTypeOption}
+          />
 
-  if (state === MakeWidgetState.review && !hasSufficientAllowance) {
-    return (
-      <Container>
-        <ApproveReview
-          hasEditButton
-          isLoading={hasApprovalPending}
-          amount={makerAmount}
-          amountPlusFee={makerAmountPlusFee}
-          readableAllowance={readableAllowance}
-          token={makerTokenInfo}
-          wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={restart}
-          onSignButtonClick={approveToken}
+          <StyledExpirySelector
+            isDisabled={!isActive}
+            onChange={setExpiry}
+            hideExpirySelector={!!showTokenSelectModal}
+          />
+        </OrderTypeSelectorAndExpirySelectorWrapper>
+
+        {orderType === OrderType.private && (
+          <TooltipContainer>
+            <StyledAddressInput
+              hasError={!!error}
+              value={takerAddress}
+              onChange={handleAddressInputChange}
+              onInfoButtonClick={toggleShowOrderTypeInfo}
+            />
+
+            {error && (
+              <StyledTooltip>
+                {t("validatorErrors.invalidAddress", {
+                  address: takerAddress,
+                })}
+              </StyledTooltip>
+            )}
+          </TooltipContainer>
+        )}
+
+        <StyledInfoSection
+          isAllowancesFailed={isAllowancesOrBalancesFailed}
+          isNetworkUnsupported={isActive && !isNetworkSupported}
         />
-      </Container>
-    );
-  }
 
-  if (state === MakeWidgetState.review) {
-    return (
-      <Container>
-        <MakeOrderReview
-          chainId={chainId}
-          expiry={expiry}
-          orderType={orderType}
-          senderAddress={takerAddress}
-          senderAmount={takerAmount}
-          senderToken={takerTokenInfo}
-          signerAmount={makerAmount}
-          signerAmountPlusFee={makerAmountPlusFee}
-          signerToken={makerTokenInfo}
-          wrappedNativeToken={wrappedNativeToken}
-          onEditButtonClick={handleEditButtonClick}
-          onSignButtonClick={createOrder}
+        <StyledActionButtons
+          hasInsufficientExpiry={expiry === 0}
+          hasInsufficientAllowance={!hasSufficientAllowance}
+          hasInsufficientBalance={
+            hasInsufficientBalance && !shouldDepositNativeToken
+          }
+          hasMissingMakerAmount={hasMissingMakerAmount}
+          hasMissingMakerToken={!makerTokenInfo}
+          hasMissingTakerAmount={hasMissingTakerAmount}
+          hasMissingTakerToken={!takerTokenInfo}
+          isLoading={isBalanceLoading}
+          isNetworkUnsupported={!isNetworkSupported}
+          shouldDepositNativeToken={shouldDepositNativeToken}
+          shouldRefresh={isAllowancesOrBalancesFailed}
+          walletIsNotConnected={!isActive}
+          makerTokenSymbol={makerTokenInfo?.symbol}
+          onBackButtonClick={handleBackButtonClick}
+          onActionButtonClick={handleActionButtonClick}
         />
-      </Container>
+      </>
     );
-  }
+  };
 
   return (
     <Container>
-      <MakeWidgetHeader
-        hideExpirySelector={!!showTokenSelectModal}
-        onExpiryChange={setExpiry}
-      />
-      <SwapInputs
-        canSetQuoteAmount
-        disabled={!isActive || isAllowancesOrBalancesFailed}
-        readOnly={!isActive || !isNetworkSupported}
-        showMaxButton={showMaxButton}
-        showMaxInfoButton={showMaxInfoButton}
-        baseAmount={makerAmount}
-        baseTokenInfo={makerTokenInfo}
-        maxAmount={maxAmount}
-        side="sell"
-        quoteAmount={takerAmount}
-        quoteTokenInfo={takerTokenInfo}
-        onBaseAmountChange={handleMakerAmountChange}
-        onChangeTokenClick={setShowTokenSelectModal}
-        onMaxButtonClick={() => handleMakerAmountChange(maxAmount || "0")}
-        onQuoteAmountChange={handleTakerAmountChange}
-        onSwitchTokensButtonClick={handleSwitchTokensButtonClick}
-      />
-      <OrderTypeSelectorAndRateFieldWrapper>
-        <StyledOrderTypeSelector
-          options={orderTypeSelectOptions}
-          selectedOrderTypeOption={orderScopeTypeOption}
-          onChange={setOrderScopeTypeOption}
-        />
-        {makerTokenInfo &&
-          takerTokenInfo &&
-          !hasMissingMakerAmount &&
-          !hasMissingTakerAmount && (
-            <StyledRateField
-              token1={makerTokenInfo.symbol}
-              token2={takerTokenInfo.symbol}
-              rate={new BigNumber(takerAmount).dividedBy(
-                new BigNumber(makerAmount)
-              )}
-            />
-          )}
-      </OrderTypeSelectorAndRateFieldWrapper>
-      {orderType === OrderType.private && (
-        <TooltipContainer>
-          <StyledAddressInput
-            hasError={!!error}
-            value={takerAddress}
-            onChange={handleAddressInputChange}
-            onInfoButtonClick={toggleShowOrderTypeInfo}
+      {renderScreens()}
+
+      <TransactionOverlay
+        isHidden={ordersStatus !== "signing" && makeOtcStatus !== "signing"}
+      >
+        <WalletSignScreen type="signature" />
+      </TransactionOverlay>
+
+      <TransactionOverlay
+        isHidden={ordersStatus === "signing" || !approvalTransaction}
+      >
+        {approvalTransaction && (
+          <ApprovalSubmittedScreen
+            chainId={chainId}
+            transaction={approvalTransaction}
           />
+        )}
+      </TransactionOverlay>
 
-          {error && (
-            <StyledTooltip>
-              {t("validatorErrors.invalidAddress", {
-                address: takerAddress,
-              })}
-            </StyledTooltip>
-          )}
-        </TooltipContainer>
-      )}
-
-      <StyledInfoSection
-        isAllowancesFailed={isAllowancesOrBalancesFailed}
-        isNetworkUnsupported={!isNetworkSupported}
-      />
+      <TransactionOverlay
+        isHidden={ordersStatus === "signing" || !depositTransaction}
+      >
+        {depositTransaction && (
+          <DepositSubmittedScreen
+            chainId={chainId}
+            transaction={depositTransaction}
+          />
+        )}
+      </TransactionOverlay>
 
-      <StyledActionButtons
-        hasInsufficientExpiry={expiry === 0}
-        hasInsufficientAllowance={!hasSufficientAllowance}
-        hasInsufficientBalance={
-          hasInsufficientBalance && !shouldDepositNativeToken
-        }
-        hasMissingMakerAmount={hasMissingMakerAmount}
-        hasMissingMakerToken={!makerTokenInfo}
-        hasMissingTakerAmount={hasMissingTakerAmount}
-        hasMissingTakerToken={!takerTokenInfo}
-        isNetworkUnsupported={!isNetworkSupported}
-        shouldDepositNativeToken={shouldDepositNativeToken}
-        shouldRefresh={isAllowancesOrBalancesFailed}
-        walletIsNotConnected={!isActive}
-        makerTokenSymbol={makerTokenInfo?.symbol}
-        onBackButtonClick={handleBackButtonClick}
-        onActionButtonClick={handleActionButtonClick}
-      />
-      <Overlay
-        onCloseButtonClick={() => setShowTokenSelectModal(null)}
+      <ModalOverlay
+        hasDynamicHeight
+        onClose={() => setShowTokenSelectModal(null)}
+        title={t("common.selectToken")}
         isHidden={!showTokenSelectModal}
       >
         <TokenList
@@ -532,17 +573,17 @@ const MakeWidget: FC = () => {
             setShowTokenSelectModal(null);
           }}
         />
-      </Overlay>
-      <Overlay
+      </ModalOverlay>
+      <ModalOverlay
         title={t("information.counterParty.title")}
-        onCloseButtonClick={() => toggleShowOrderTypeInfo()}
+        onClose={() => toggleShowOrderTypeInfo(false)}
         isHidden={!showOrderTypeInfo}
       >
         <OrderTypesModal onCloseButtonClick={() => toggleShowOrderTypeInfo()} />
-      </Overlay>
+      </ModalOverlay>
       <ProtocolFeeOverlay
         isHidden={showFeeInfo}
-        onCloseButtonClick={() => toggleShowFeeInfo()}
+        onCloseButtonClick={() => toggleShowFeeInfo(false)}
       />
     </Container>
   );
diff --git a/src/components/@widgets/MakeWidget/helpers/index.ts b/src/components/@widgets/MakeWidget/helpers/index.ts
index 10f851b8d..1cd3807ce 100644
--- a/src/components/@widgets/MakeWidget/helpers/index.ts
+++ b/src/components/@widgets/MakeWidget/helpers/index.ts
@@ -12,12 +12,17 @@ export const getActionButtonTranslation = (
   hasMissingMakerToken: boolean,
   hasMissingTakerAmount: boolean,
   hasMissingTakerToken: boolean,
+  isLoading: boolean,
   networkIsUnsupported: boolean,
   shouldDepositNativeToken: boolean,
   shouldRefresh: boolean,
   walletIsNotConnected: boolean,
   makerTokenSymbol?: string
 ): string => {
+  if (isLoading) {
+    return "";
+  }
+
   if (walletIsNotConnected) {
     return i18n.t("wallet.connectWallet");
   }
@@ -47,7 +52,7 @@ export const getActionButtonTranslation = (
   }
 
   if (hasInsufficientBalance) {
-    return i18n.t("orders.insufficientBalance", { symbol: makerTokenSymbol });
+    return i18n.t("orders.insufficientBalance");
   }
 
   if (shouldDepositNativeToken) {
@@ -55,7 +60,7 @@ export const getActionButtonTranslation = (
   }
 
   if (hasInsufficientAllowance) {
-    return `${i18n.t("orders.approve")} ${makerTokenSymbol}`;
+    return `${i18n.t("orders.continue")}`;
   }
 
   return i18n.t("common.review");
diff --git a/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
index f80d77365..13e46006b 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components/macro";
 
-import { InputOrButtonBorderStyle } from "../../../../../style/mixins";
 import Button from "../../../../Button/Button";
 
 export const Container = styled.div`
@@ -11,8 +10,6 @@ export const Container = styled.div`
 `;
 
 const ButtonStyle = css`
-  ${InputOrButtonBorderStyle};
-
   width: calc(50% - 0.5rem);
   height: auto;
   min-height: 3rem;
diff --git a/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.tsx b/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.tsx
index b6c48181e..df0bb9d94 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/ActionButtons/ActionButtons.tsx
@@ -21,6 +21,7 @@ type ActionButtonsProps = {
   hasMissingMakerToken: boolean;
   hasMissingTakerAmount: boolean;
   hasMissingTakerToken: boolean;
+  isLoading: boolean;
   isNetworkUnsupported: boolean;
   shouldDepositNativeToken: boolean;
   shouldRefresh: boolean;
@@ -40,6 +41,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   hasMissingMakerToken,
   hasMissingTakerAmount,
   hasMissingTakerToken,
+  isLoading,
   isNetworkUnsupported,
   shouldDepositNativeToken,
   shouldRefresh,
@@ -57,7 +59,8 @@ const ActionButtons: FC<ActionButtonsProps> = ({
       hasMissingMakerAmount ||
       hasMissingMakerToken ||
       hasMissingTakerAmount ||
-      hasMissingTakerToken) &&
+      hasMissingTakerToken ||
+      isLoading) &&
     !walletIsNotConnected &&
     !shouldRefresh &&
     !isNetworkUnsupported;
@@ -70,6 +73,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
     hasMissingMakerToken,
     hasMissingTakerAmount,
     hasMissingTakerToken,
+    isLoading,
     isNetworkUnsupported,
     shouldDepositNativeToken,
     shouldRefresh,
@@ -99,6 +103,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
       <SignButton
         disabled={isDisabled}
         intent="primary"
+        loading={isLoading}
         onClick={handleSignButtonClick}
       >
         {buttonText}
diff --git a/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx
index 1bb25c9b0..c1d64b134 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/AddressInput/AddressInput.styles.tsx
@@ -1,21 +1,27 @@
 import styled from "styled-components/macro";
 
-import { InputTextStyle } from "../../../../../style/mixins";
+import {
+  BorderlessButtonStyleType2,
+  InputTextStyle,
+} from "../../../../../style/mixins";
 import IconButton from "../../../../IconButton/IconButton";
 import TextInput from "../../../../TextInput/TextInput";
 import { StyledInput } from "../../../../TextInput/TextInput.styles";
 
 export const Wrapper = styled.div`
   position: relative;
-  background: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.darkGrey : theme.colors.primaryLight};
 `;
 
 export const StyledIconButton = styled(IconButton)`
   position: absolute;
   top: 0.825rem;
   right: 0.5rem;
-  color: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.lightGrey};
+
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.colors.white};
+  }
 `;
 
 export const Input = styled(TextInput)`
@@ -27,7 +33,7 @@ export const Input = styled(TextInput)`
     ${({ hasError, theme }) =>
       hasError ? `border-color: ${theme.colors.red}` : ""};
 
-    border-radius: 2px;
+    border-radius: 0.5rem;
     padding-right: 3.5rem;
     padding-left: 1rem;
     height: 100%;
diff --git a/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx
index 297b66427..bfe956526 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.styles.tsx
@@ -1,15 +1,20 @@
 import styled, { css } from "styled-components/macro";
 
-import { InputOrButtonBorderStyleType2 } from "../../../../../style/mixins";
+import {
+  InputOrButtonBorderStyle,
+  InputOrButtonBorderStyleType2,
+} from "../../../../../style/mixins";
+import { fontWide } from "../../../../../style/themes";
 import Dropdown from "../../../../Dropdown/Dropdown";
 import { SelectButtonText } from "../../../../Dropdown/Dropdown.styles";
 
 export const SelectorStyle = css`
   ${InputOrButtonBorderStyleType2};
 
-  font-size: 0.75rem;
-  font-weight: 700;
-  margin-right: -1px;
+  border-inline: unset;
+  font-family: ${fontWide};
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.carteBlanche};
 
   @supports (-moz-appearance: none) {
     padding-top: 0.125rem;
@@ -45,11 +50,12 @@ export const Input = styled.input`
   all: unset;
 
   ${SelectorStyle};
+  ${InputOrButtonBorderStyle};
 
   width: 2.5rem;
   text-align: center;
 
-  &:hover,
+  &:hover:enabled,
   :active,
   :focus {
     z-index: 1;
@@ -57,6 +63,9 @@ export const Input = styled.input`
 `;
 
 export const StyledDropdown = styled(Dropdown)`
+  flex-grow: 1;
+  margin-inline-start: -1px;
+
   ${SelectButtonText} {
     max-width: 7rem;
   }
diff --git a/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.tsx b/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.tsx
index f0258f101..b30e8ba1a 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/ExpirySelector/ExpirySelector.tsx
@@ -12,11 +12,13 @@ import getExpirySelectOptions from "./helpers/getExpirySelectOptions";
 const floatRegExp = new RegExp("^([0-9])*$");
 
 export type ExpirySelectorProps = {
+  isDisabled?: boolean;
   onChange: (msToExpiry: number) => void;
   className?: string;
 };
 
 export const ExpirySelector: React.FC<ExpirySelectorProps> = ({
+  isDisabled,
   onChange,
   className,
 }) => {
@@ -46,10 +48,16 @@ export const ExpirySelector: React.FC<ExpirySelectorProps> = ({
   }
 
   return (
-    <SelectWrapper className={className}>
+    <SelectWrapper className={className} isDisabled={isDisabled}>
       <SelectLabel>{t("common.expiresIn")}</SelectLabel>
-      <Input maxLength={3} value={amount} onChange={handleAmountChange} />
+      <Input
+        disabled={isDisabled}
+        maxLength={3}
+        value={amount}
+        onChange={handleAmountChange}
+      />
       <StyledDropdown
+        isDisabled={isDisabled}
         selectedOption={unit}
         options={translatedOptions}
         onChange={handleUnitChange}
diff --git a/src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.tsx
index 48c169ac8..635c5c1a5 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -34,9 +34,6 @@ const InfoSection: FC<ActionButtonsProps> = ({
         <StyledInfoHeading>
           {t("balances.failedToFetchAllowances")}
         </StyledInfoHeading>
-        <StyledInfoSubHeading>
-          {t("balances.failedToFetchAllowancesCta")}
-        </StyledInfoSubHeading>
       </Container>
     );
   }
diff --git a/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.styles.tsx
index 7279ab24f..a001d4093 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.styles.tsx
@@ -4,12 +4,3 @@ import { WidgetHeader } from "../../../../../styled-components/WidgetHeader/Widg
 import { ExpirySelector } from "../ExpirySelector/ExpirySelector";
 
 export const StyledWidgetHeader = styled(WidgetHeader)``;
-
-export const StyledExpirySelector = styled(ExpirySelector)<{
-  hideExpirySelector: boolean;
-}>`
-  transition: opacity 0.3s ease-out;
-
-  margin-left: 1rem;
-  opacity: ${({ hideExpirySelector }) => (hideExpirySelector ? 0 : 1)};
-`;
diff --git a/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.tsx b/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.tsx
index 0080da611..c63721994 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/MakeWidgetHeader/MakeWidgetHeader.tsx
@@ -2,31 +2,20 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Title } from "../../../../Typography/Typography";
-import {
-  StyledExpirySelector,
-  StyledWidgetHeader,
-} from "./MakeWidgetHeader.styles";
+import { StyledWidgetHeader } from "./MakeWidgetHeader.styles";
 
 type MakeWidgetHeaderProps = {
-  hideExpirySelector?: boolean;
-  onExpiryChange: (date: number) => void;
+  className?: string;
 };
 
-const MakeWidgetHeader: FC<MakeWidgetHeaderProps> = ({
-  hideExpirySelector = false,
-  onExpiryChange,
-}) => {
+const MakeWidgetHeader: FC<MakeWidgetHeaderProps> = ({ className = "" }) => {
   const { t } = useTranslation();
 
   return (
-    <StyledWidgetHeader>
+    <StyledWidgetHeader className={className}>
       <Title type="h2" as="h1">
         {t("common.make")}
       </Title>
-      <StyledExpirySelector
-        onChange={onExpiryChange}
-        hideExpirySelector={hideExpirySelector}
-      />
     </StyledWidgetHeader>
   );
 };
diff --git a/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.styles.tsx
index de1d82f06..1acba5891 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.styles.tsx
@@ -1,5 +1,10 @@
 import styled from "styled-components/macro";
 
+import { SelectLabel } from "../../../../../styled-components/Select/Select";
 import Dropdown from "../../../../Dropdown/Dropdown";
 
-export const StyledDropdown = styled(Dropdown)``;
+export const StyledDropdown = styled(Dropdown)`
+  width: calc(100% - 3.25rem);
+`;
+
+export const StyledSelectLabel = styled(SelectLabel)``;
diff --git a/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.tsx b/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.tsx
index ae806da70..b3db91ebe 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/OrderTypeSelector/OrderTypeSelector.tsx
@@ -6,9 +6,10 @@ import {
   SelectWrapper,
 } from "../../../../../styled-components/Select/Select";
 import { SelectOption } from "../../../../Dropdown/Dropdown";
-import { StyledDropdown } from "./OrderTypeSelector.styles";
+import { StyledDropdown, StyledSelectLabel } from "./OrderTypeSelector.styles";
 
 export type OrderTypeSelectorProps = {
+  isDisabled?: boolean;
   options: SelectOption[];
   selectedOrderTypeOption: SelectOption;
   onChange: (option: SelectOption) => void;
@@ -16,6 +17,7 @@ export type OrderTypeSelectorProps = {
 };
 
 const OrderTypeSelector: FC<OrderTypeSelectorProps> = ({
+  isDisabled,
   options,
   selectedOrderTypeOption,
   className,
@@ -24,9 +26,10 @@ const OrderTypeSelector: FC<OrderTypeSelectorProps> = ({
   const { t } = useTranslation();
 
   return (
-    <SelectWrapper className={className}>
-      <SelectLabel>{t("common.for")}</SelectLabel>
+    <SelectWrapper className={className} isDisabled={isDisabled}>
+      <StyledSelectLabel>{t("common.for")}</StyledSelectLabel>
       <StyledDropdown
+        isDisabled={isDisabled}
         selectedOption={selectedOrderTypeOption}
         options={options}
         onChange={onChange}
diff --git a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx
index 87b273c6e..4150b8306 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.styles.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components/macro";
 
 import { TextEllipsis } from "../../../../../style/mixins";
-import { fontMono } from "../../../../../style/themes";
+import { fontMono, fontWide } from "../../../../../style/themes";
 import { LargePillButtonStyle } from "../../../../../styled-components/Pill/Pill";
 import IconButton from "../../../../IconButton/IconButton";
 
@@ -14,28 +14,22 @@ export const StyledIconButton = styled(IconButton)`
 export const Text = styled.div`
   ${TextEllipsis};
 
-  margin-left: 0.25rem;
-  max-width: 3rem;
+  max-width: 5rem;
 `;
 
-export const Equals = styled.div`
-  margin-left: 0.25rem;
-`;
-
-export const RateBox = styled.div`
-  ${TextEllipsis};
-
-  margin-left: 0.25rem;
-  max-width: 7rem;
-`;
+export const Rate = styled.div``;
 
 export const Wrapper = styled.div<{ isButton: boolean }>`
   display: flex;
   align-items: center;
-  width: fit-content;
-  font-weight: bold;
+  justify-content: center;
+  width: 100%;
+  line-height: 1;
+  font-family: ${fontWide};
+  font-weight: 500;
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 1rem;
+  opacity: 0.75;
   ${({ isButton, theme }) =>
     isButton
       ? LargePillButtonStyle
@@ -47,15 +41,9 @@ export const Wrapper = styled.div<{ isButton: boolean }>`
         margin-left: -0.25rem;
       }
 
-      ${RateBox} {
-        border-radius: 0.125rem;
-        border: 1px solid ${theme.colors.borderGrey};
-        margin: 0;
-        height: 2rem;
-        padding: 0 0.5rem;
-        line-height: 2;
+      ${Rate} {
         font-family: ${fontMono};
-        font-size: 0.875rem;
+        font-size: 1rem;
         font-weight: 500;
       }
     `};
diff --git a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
index 9abe63499..a30700400 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
@@ -1,16 +1,10 @@
-import { useState, useMemo, useEffect } from "react";
+import { FC, useState, useMemo, useEffect } from "react";
 
 import BigNumber from "bignumber.js";
 
 import stringToSignificantDecimals from "../../../../../helpers/stringToSignificantDecimals";
 import Icon from "../../../../Icon/Icon";
-import {
-  Text,
-  Wrapper,
-  StyledIconButton,
-  RateBox,
-  Equals,
-} from "./RateField.styles";
+import { Text, Wrapper, StyledIconButton, Rate } from "./RateField.styles";
 
 export type RateFieldProps = {
   isButton?: boolean;
@@ -20,7 +14,7 @@ export type RateFieldProps = {
   className?: string;
 };
 
-export const RateField: React.FC<RateFieldProps> = ({
+export const RateField: FC<RateFieldProps> = ({
   isButton = false,
   token1,
   token2,
@@ -59,9 +53,8 @@ export const RateField: React.FC<RateFieldProps> = ({
       isButton={isButton}
       className={className}
     >
-      1<Text title={firstDisplayedToken}>{firstDisplayedToken}</Text>
-      <Equals>=</Equals>
-      <RateBox title={displayRate}>{displayRate}</RateBox>
+      1<Text title={firstDisplayedToken}>{firstDisplayedToken}</Text>=
+      <Rate title={displayRate}>{displayRate}</Rate>
       <Text title={secondDisplayedToken}>{secondDisplayedToken}</Text>
       {isButton ? (
         <Icon name="swap-horizontal" iconSize={0.75} />
diff --git a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx
index bfe08c1cd..a358714a4 100644
--- a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.styles.tsx
@@ -1,18 +1,25 @@
 import { css } from "styled-components";
 import styled from "styled-components/macro";
 
+import breakPoints from "../../../style/breakpoints";
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  justify-content: center;
 `;
 
 export const MyOrdersGrid = css`
   display: grid;
-  grid-template-columns: 1rem calc(50% - 5.5rem) calc(50% - 5.5rem) 4.5rem 1.5rem;
+  grid-template-columns: 1rem 0 calc(50% - 6.5rem) calc(50% - 6.5rem) 5.5rem 1.5rem;
   grid-column-gap: 1rem;
   width: 100%;
   padding: 0 1rem;
+
+  @media ${breakPoints.tabletPortraitUp} {
+    grid-template-columns: 1rem 3rem calc(50% - 8rem) calc(50% - 8rem) 5.5rem 1.5rem;
+  }
 `;
 
 export const InfoSectionContainer = styled.div`
@@ -20,7 +27,6 @@ export const InfoSectionContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex-grow: 2;
-  margin-bottom: 0.5rem;
+  margin-top: 1rem;
   text-align: center;
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx
index ce6419440..38776d9c6 100644
--- a/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx
+++ b/src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx
@@ -92,9 +92,9 @@ const MyOrdersWidget: FC = () => {
 
   return (
     <Container>
+      <MyOrdersWidgetHeader title={t("common.myOrders")} />
       {!!sortedUserOrders.length && (
         <>
-          <MyOrdersWidgetHeader title={t("common.otc")} />
           <MyOrdersList
             activeSortType={activeSortType}
             orders={sortedUserOrders}
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
index eaf5dd4ec..35c4e0fc7 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
@@ -7,9 +7,8 @@ import { ButtonStyle } from "../../../../Button/Button.styles";
 
 export const Container = styled.div`
   display: flex;
-  justify-content: space-between;
-  justify-self: flex-end;
-  margin-top: auto;
+  justify-content: center;
+  margin-block-start: 2.5rem;
 `;
 
 export const SignButton = styled(Button)`
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/helpers/index.ts b/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/helpers/index.ts
index a6604d757..5a527629a 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/helpers/index.ts
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/ActionButtons/helpers/index.ts
@@ -7,5 +7,5 @@ export const getActionButtonTranslation = (
     return i18n.t("wallet.connectWallet");
   }
 
-  return i18n.t("orders.makeNewOrder");
+  return i18n.t("orders.makeAnOrder");
 };
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
index d9661a02f..482f9d529 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components/macro";
 
+import { fontWide } from "../../../../../style/themes";
 import { InfoHeading, InfoSubHeading } from "../../../../Typography/Typography";
 
 export const StyledInfoHeading = styled(InfoHeading)`
@@ -7,6 +8,6 @@ export const StyledInfoHeading = styled(InfoHeading)`
   align-items: center;
 
   & + ${InfoSubHeading} {
-    margin-top: 0.25rem;
+    margin-top: 1rem;
   }
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
index 565c5ab63..1a7d63587 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -18,7 +18,7 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (walletIsNotConnected) {
     return (
       <>
-        <StyledInfoHeading>{t("wallet.connectWallet")}</StyledInfoHeading>
+        <InfoSubHeading>{t("orders.connectWallet")}</InfoSubHeading>
       </>
     );
   }
@@ -26,10 +26,11 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (userHasNoOrders) {
     return (
       <>
-        <StyledInfoHeading>
+        <InfoSubHeading>
           {t("orders.youHaveNoOpenOTCOrders")}
-        </StyledInfoHeading>
-        <InfoSubHeading>{t("orders.startByCreatingANewOrder")}</InfoSubHeading>
+          {` `}
+          {t("orders.startByCreatingANewOrder")}
+        </InfoSubHeading>
       </>
     );
   }
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx
index a0dadf4bc..acf46904b 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.styles.tsx
@@ -4,11 +4,17 @@ import { ScrollBarStyle } from "../../../../../style/mixins";
 import Tooltip from "../../../../ExpiryIndicator/subcomponents/Tooltip";
 import MyOrdersListSortButtons from "../MyOrdersListSortButtons/MyOrdersListSortButtons";
 
-export const Container = styled.div`
+export const Container = styled.div<{ hasOverflow: boolean }>`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
   position: relative;
+  margin-block-start: 2rem;
+  padding-block-end: ${({ hasOverflow }) => (hasOverflow ? "2rem" : "0")};
+
+  -webkit-mask-image: ${({ hasOverflow }) =>
+    hasOverflow
+      ? "-webkit-gradient(linear, 0 75%, 0 100%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))"
+      : ""};
 `;
 
 export const StyledMyOrdersListSortButtons = styled(MyOrdersListSortButtons)<{
@@ -20,31 +26,14 @@ export const StyledMyOrdersListSortButtons = styled(MyOrdersListSortButtons)<{
 export const OrdersContainer = styled.div`
   ${ScrollBarStyle};
 
-  margin-top: 0.5rem;
-  width: calc(100% + 0.5rem);
-  max-height: 17rem;
-  padding-right: 0.5rem;
+  margin-top: 1rem;
+  width: 100%;
+  max-height: 20rem;
+  padding-right: 1rem;
   overflow-y: auto;
   overflow-x: visible;
 `;
 
-const darkShadow =
-  "linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%)";
-const lightShadow =
-  "linear-gradient(0deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%)";
-
-export const Shadow = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 3rem;
-  z-index: 2;
-  background: ${({ theme }) =>
-    theme.name === "dark" ? darkShadow : lightShadow};
-  pointer-events: none;
-`;
-
 export const TooltipContainer = styled.div`
   position: relative;
 `;
@@ -55,8 +44,10 @@ export const StyledTooltip = styled(Tooltip)<{
 }>`
   justify-content: flex-start;
   position: absolute;
+  left: unset;
+  right: 3rem;
   top: calc(
-    4rem + ${({ containerScrollTop }) => -containerScrollTop}px + 3rem *
+    2.25rem + ${({ containerScrollTop }) => -containerScrollTop}px + 3rem *
       ${({ orderIndex }) => orderIndex}
   );
   width: auto;
@@ -65,13 +56,11 @@ export const StyledTooltip = styled(Tooltip)<{
 `;
 
 export const DeleteButtonTooltip = styled(StyledTooltip)`
-  left: 100%;
   margin-left: -1rem;
 `;
 
 export const OrderIndicatorTooltip = styled(StyledTooltip)`
   justify-content: flex-end;
   margin-left: 0.5rem;
-  left: 0;
   width: 0;
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.tsx
index ee3dbbffb..336dd160e 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersList/MyOrdersList.tsx
@@ -1,9 +1,10 @@
-import React, { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { FullOrderERC20 } from "@airswap/utils";
 
 import { OrdersSortType } from "../../../../../features/myOrders/myOrdersSlice";
+import useIsOverflowing from "../../../../../hooks/useIsOverflowing";
 import useWindowSize from "../../../../../hooks/useWindowSize";
 import { OrderStatus } from "../../../../../types/orderStatus";
 import { getOrderStatusTranslation } from "../../helpers";
@@ -13,7 +14,6 @@ import {
   DeleteButtonTooltip,
   OrderIndicatorTooltip,
   OrdersContainer,
-  Shadow,
   StyledMyOrdersListSortButtons,
 } from "./MyOrdersList.styles";
 
@@ -48,6 +48,8 @@ const MyOrdersList: FC<MyOrdersListProps> = ({
   const [containerScrollTop, setContainerScrollTop] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
 
+  const [, hasOverflow] = useIsOverflowing(containerRef);
+
   const handleDeleteOrderButtonClick = (order: FullOrderERC20) => {
     setActiveDeleteButtonTooltipIndex(undefined);
     onDeleteOrderButtonClick(order);
@@ -90,10 +92,12 @@ const MyOrdersList: FC<MyOrdersListProps> = ({
       handleOnContainerScroll.bind(this)
     );
 
-    return containerRef.current?.removeEventListener(
-      "scroll",
-      handleOnContainerScroll.bind(this)
-    );
+    return () => {
+      containerRef.current?.removeEventListener(
+        "scroll",
+        handleOnContainerScroll.bind(this)
+      );
+    };
   }, [containerRef]);
 
   useEffect(() => {
@@ -101,10 +105,11 @@ const MyOrdersList: FC<MyOrdersListProps> = ({
   }, [containerRef, windowWidth]);
 
   return (
-    <Container className={className}>
+    <Container className={className} hasOverflow={hasOverflow}>
       <StyledMyOrdersListSortButtons
         width={containerWidth}
         activeSortType={activeSortType}
+        hasOverflow={hasOverflow}
         sortTypeDirection={sortTypeDirection}
         onSortButtonClick={onSortButtonClick}
       />
@@ -138,7 +143,6 @@ const MyOrdersList: FC<MyOrdersListProps> = ({
           </OrderIndicatorTooltip>
         )}
       </OrdersContainer>
-      <Shadow />
     </Container>
   );
 };
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.styles.tsx
index ac371a6eb..6225cafa2 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.styles.tsx
@@ -2,8 +2,12 @@ import styled from "styled-components/macro";
 
 import { MyOrdersGrid } from "../../MyOrdersWidget.styles";
 
-export const Container = styled.div`
+export const Container = styled.div<{ hasOverflow: boolean }>`
   ${MyOrdersGrid};
 
-  padding-right: 1.5rem;
+  padding-right: ${({ hasOverflow }) => (hasOverflow ? "2.5rem" : "2rem")};
+`;
+
+export const PairButtonWrapper = styled.div`
+  overflow: hidden;
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.tsx
index 132c99209..7cdc7d3da 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/MyOrdersListSortButtons/MyOrdersListSortButtons.tsx
@@ -3,10 +3,11 @@ import { useTranslation } from "react-i18next";
 
 import { OrdersSortType } from "../../../../../features/myOrders/myOrdersSlice";
 import SortButton from "../SortButton/SortButton";
-import { Container } from "./MyOrdersListSortButtons.styles";
+import { Container, PairButtonWrapper } from "./MyOrdersListSortButtons.styles";
 
 interface MyOrdersListProps {
   activeSortType: OrdersSortType;
+  hasOverflow: boolean;
   sortTypeDirection: Record<OrdersSortType, boolean>;
   onSortButtonClick: (type: OrdersSortType) => void;
   className?: string;
@@ -14,6 +15,7 @@ interface MyOrdersListProps {
 
 const MyOrdersListSortButtons: FC<MyOrdersListProps> = ({
   activeSortType,
+  hasOverflow,
   sortTypeDirection,
   onSortButtonClick,
   className,
@@ -21,13 +23,16 @@ const MyOrdersListSortButtons: FC<MyOrdersListProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Container className={className}>
+    <Container className={className} hasOverflow={hasOverflow}>
       <SortButton
         isSortable
         isActive={activeSortType === "active"}
         isDescending={sortTypeDirection.active}
         onClick={() => onSortButtonClick("active")}
       />
+      <PairButtonWrapper>
+        <SortButton isDisabled>{t("common.pair")}</SortButton>
+      </PairButtonWrapper>
       <SortButton
         isSortable
         isActive={activeSortType === "signerToken"}
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.styles.tsx
index 99f063aa6..8850ccd17 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.styles.tsx
@@ -2,10 +2,11 @@ import { NavLink } from "react-router-dom";
 
 import styled, { DefaultTheme } from "styled-components/macro";
 
-import { InputOrButtonBorderStyleType2 } from "../../../../../style/mixins";
+import breakPoints from "../../../../../style/breakpoints";
 import { fontMono } from "../../../../../style/themes";
 import { OrderStatus } from "../../../../../types/orderStatus";
 import IconButton from "../../../../IconButton/IconButton";
+import TokenLogo from "../../../../TokenLogo/TokenLogo";
 import { MyOrdersGrid } from "../../MyOrdersWidget.styles";
 
 export const Circle = styled.div`
@@ -34,7 +35,6 @@ export const Container = styled.div<{ orderStatus: OrderStatus }>`
   ${MyOrdersGrid};
 
   position: relative;
-  border-top: 1px solid ${({ theme }) => theme.colors.borderGrey};
   align-items: center;
   height: 3rem;
 
@@ -56,20 +56,23 @@ export const StatusIndicator = styled.div`
 
 export const Text = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   position: relative;
   font-family: ${fontMono};
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   text-overflow: ellipsis;
   text-transform: uppercase;
-  word-break: break-word;
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+  word-break: break-all;
+  color: ${({ theme }) => theme.colors.carteBlanche};
   overflow: hidden;
   z-index: 2;
   pointer-events: none;
+
+  @media ${breakPoints.tabletPortraitUp} {
+    font-size: 1rem;
+  }
 `;
 
 export const ActionButtonContainer = styled.div`
@@ -77,8 +80,6 @@ export const ActionButtonContainer = styled.div`
 `;
 
 export const ActionButton = styled(IconButton)`
-  ${InputOrButtonBorderStyleType2};
-
   position: relative;
   border: 1px solid ${({ theme }) => theme.colors.borderGrey};
   border-radius: 50%;
@@ -91,26 +92,48 @@ export const ActionButton = styled(IconButton)`
   &:hover,
   &:focus,
   &:active {
+    border: 1px solid ${({ theme }) => theme.colors.borderGrey};
     color: ${({ theme }) =>
       theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+    background: ${({ theme }) => theme.colors.darkGrey};
   }
 `;
 
-export const StyledNavLink = styled(NavLink)`
-  ${InputOrButtonBorderStyleType2};
-
+export const StyledNavLink = styled(NavLink)<{ isHovered: boolean }>`
   position: absolute;
   top: -1px;
   left: 0;
+  border-radius: 0.5rem;
   width: 100%;
   height: calc(100% + 1px);
-  background: ${({ theme }) => theme.colors.borderGrey};
-  opacity: 0;
+  background: ${({ theme }) => theme.colors.darkBlue};
+  opacity: ${({ isHovered }) => (isHovered ? 1 : 0)};
   z-index: 1;
 
   &:hover,
   &:focus,
   &:active {
-    opacity: 0.5;
+    opacity: 1;
+
+    & + ${ActionButtonContainer} ${ActionButton} {
+      background: ${({ theme }) => theme.colors.darkGrey};
+    }
+  }
+`;
+
+export const Tokens = styled.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`;
+
+export const TokenIcon = styled(TokenLogo)`
+  min-width: 1.875rem;
+  aspect-ratio: 1;
+  background: ${({ theme }) => theme.colors.darkGrey};
+  z-index: 3;
+  &:not(:first-child) {
+    margin-left: -1rem;
+    z-index: 2;
   }
 `;
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.tsx
index 32b514442..aa662f168 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/Order/Order.tsx
@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useMemo } from "react";
+import React, { FC, PropsWithChildren, useMemo, useState } from "react";
 
 import { compressFullOrderERC20, FullOrderERC20 } from "@airswap/utils";
 
@@ -22,6 +22,8 @@ import {
   StatusIndicator,
   StyledNavLink,
   Text,
+  TokenIcon,
+  Tokens,
 } from "./Order.styles";
 
 interface OrderProps {
@@ -50,6 +52,8 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
   const cancelInProgress = useCancelPending(order.nonce);
   const [orderStatus] = useOrderStatus(order);
 
+  const [isHoveredActionButton, setIsHoveredActionButton] = useState(false);
+
   const senderAmount = useMemo(
     () =>
       getHumanReadableNumber(
@@ -85,6 +89,17 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
 
   const handleDeleteOrderButtonClick = () => {
     onDeleteOrderButtonClick(order);
+    setIsHoveredActionButton(false);
+  };
+
+  const handleActionButtonMouseEnter = () => {
+    setIsHoveredActionButton(true);
+    onDeleteOrderButtonMouseEnter(index, orderStatus === OrderStatus.open);
+  };
+
+  const handleActionButtonMouseLeave = () => {
+    setIsHoveredActionButton(false);
+    onDeleteOrderButtonMouseLeave();
   };
 
   return (
@@ -95,12 +110,19 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
       >
         <Circle />
       </StatusIndicator>
+      <Tokens>
+        <TokenIcon logoURI={signerTokenInfo?.logoURI} />
+        <TokenIcon logoURI={senderTokenInfo?.logoURI} />
+      </Tokens>
       <Text>{`${signerAmount} ${signerTokenInfo?.symbol || ""}`}</Text>
       <Text>{`${senderAmount} ${senderTokenInfo?.symbol || ""}`}</Text>
       <Text>
         {orderStatus === OrderStatus.open ? timeLeft : orderStatusTranslation}
       </Text>
-      <StyledNavLink to={`/${AppRoutes.order}/${orderString}`} />
+      <StyledNavLink
+        isHovered={isHoveredActionButton}
+        to={`/${AppRoutes.order}/${orderString}`}
+      />
 
       <ActionButtonContainer>
         {cancelInProgress ? (
@@ -110,13 +132,8 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
             icon={orderStatus !== OrderStatus.open ? "bin" : "button-x"}
             iconSize={orderStatus === OrderStatus.open ? 0.5625 : 0.675}
             onClick={handleDeleteOrderButtonClick}
-            onMouseEnter={() =>
-              onDeleteOrderButtonMouseEnter(
-                index,
-                orderStatus === OrderStatus.open
-              )
-            }
-            onMouseLeave={onDeleteOrderButtonMouseLeave}
+            onMouseEnter={handleActionButtonMouseEnter}
+            onMouseLeave={handleActionButtonMouseLeave}
           />
         )}
       </ActionButtonContainer>
diff --git a/src/components/@widgets/MyOrdersWidget/subcomponents/SortButton/SortButton.styles.tsx b/src/components/@widgets/MyOrdersWidget/subcomponents/SortButton/SortButton.styles.tsx
index 4d1f68c45..abcc2fc69 100644
--- a/src/components/@widgets/MyOrdersWidget/subcomponents/SortButton/SortButton.styles.tsx
+++ b/src/components/@widgets/MyOrdersWidget/subcomponents/SortButton/SortButton.styles.tsx
@@ -4,16 +4,19 @@ import { InputOrButtonBorderStyleType2 } from "../../../../../style/mixins";
 
 export const Container = styled.div`
   display: flex;
-  margin-left: -0.25rem;
+
+  &:not(&:first-child) {
+    margin-left: -0.25rem;
+  }
 `;
 
 export const Arrow = styled.span`
   width: 0;
   height: 0;
-  border-left: 0.3125rem solid transparent;
-  border-right: 0.3125rem solid transparent;
-
-  border-top: 0.3125rem solid ${({ theme }) => theme.colors.lightGrey};
+  border-style: solid;
+  border-width: 0 0.1875rem 0.375rem 0.1875rem;
+  border-color: transparent transparent ${({ theme }) => theme.colors.lightGrey}
+    transparent;
 `;
 
 export const Button = styled.button<{
@@ -29,11 +32,10 @@ export const Button = styled.button<{
   line-height: 1;
   height: 1.5rem;
   padding: 0 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+  font-size: 1rem;
+  font-weight: 500;
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.colors.white : theme.colors.lightGrey};
 
   &:not(&:focus) {
     border-color: transparent;
@@ -43,15 +45,15 @@ export const Button = styled.button<{
   &:focus,
   &:active {
     ${Arrow} {
-      border-top-color: ${(props) => props.theme.colors.primary};
+      border-top-color: ${(props) => props.theme.colors.white};
     }
   }
 
   ${Arrow} {
     transform: ${({ isDescending }) =>
-      isDescending ? "rotate(180deg)" : "none"};
-    margin-left: ${({ hasText }) => (hasText ? "0.25rem" : "0")};
-    border-top-color: ${({ theme, isActive }) =>
-      isActive ? theme.colors.primary : theme.colors.lightGrey};
+      isDescending ? "rotate(180deg) translateY(-1px)" : "translateY(1px)"};
+    margin-left: ${({ hasText }) => (hasText ? "0.5rem" : "0")};
+    border-bottom-color: ${({ theme, isActive }) =>
+      isActive ? theme.colors.white : theme.colors.lightGrey};
   }
 `;
diff --git a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.styles.tsx b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.styles.tsx
index b87fa83df..24b3dabdf 100644
--- a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.styles.tsx
@@ -1,7 +1,8 @@
 import styled from "styled-components/macro";
 
+import { sizes } from "../../../style/sizes";
+import { RecipientAndStatus } from "../SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus";
 import ActionButtons from "./subcomponents/ActionButtons/ActionButtons";
-import InfoButtons from "./subcomponents/InfoButtons/InfoButtons";
 import InfoSection from "./subcomponents/InfoSection/InfoSection";
 
 export const Container = styled.div`
@@ -11,16 +12,14 @@ export const Container = styled.div`
   height: 100%;
 `;
 
-export const StyledInfoButtons = styled(InfoButtons)`
-  flex-grow: 1;
+export const StyledRecipientAndStatus = styled(RecipientAndStatus)`
+  margin-block-start: ${sizes.widgetGutter};
 `;
 
-export const StyledActionButtons = styled(ActionButtons)``;
-
 export const StyledInfoSection = styled(InfoSection)`
-  flex-grow: 1;
+  margin-top: ${sizes.widgetGutter};
+`;
 
-  & + ${StyledActionButtons} {
-    margin-top: 1rem;
-  }
+export const StyledActionButtons = styled(ActionButtons)`
+  margin-top: ${sizes.widgetGutter};
 `;
diff --git a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx
index 2a4b2454c..f62fabc59 100644
--- a/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx
+++ b/src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx
@@ -1,7 +1,7 @@
 import { FC, useContext, useMemo, useState } from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation, useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 
 import { FullOrderERC20, ADDRESS_ZERO } from "@airswap/utils";
 import { Web3Provider } from "@ethersproject/providers";
@@ -17,7 +17,6 @@ import {
   getFilteredOrders,
 } from "../../../features/indexer/indexerActions";
 import { selectIndexerReducer } from "../../../features/indexer/indexerSlice";
-import { selectMyOrdersReducer } from "../../../features/myOrders/myOrdersSlice";
 import { approve, deposit, take } from "../../../features/orders/ordersActions";
 import { check } from "../../../features/orders/ordersHelpers";
 import {
@@ -34,6 +33,7 @@ import { compareAddresses } from "../../../helpers/string";
 import useAllowance from "../../../hooks/useAllowance";
 import useAllowancesOrBalancesFailed from "../../../hooks/useAllowancesOrBalancesFailed";
 import useApprovalPending from "../../../hooks/useApprovalPending";
+import { useBalanceLoading } from "../../../hooks/useBalanceLoading";
 import useDepositPending from "../../../hooks/useDepositPending";
 import useInsufficientBalance from "../../../hooks/useInsufficientBalance";
 import useNativeWrappedToken from "../../../hooks/useNativeWrappedToken";
@@ -42,22 +42,23 @@ import useShouldDepositNativeToken from "../../../hooks/useShouldDepositNativeTo
 import { AppRoutes } from "../../../routes";
 import { OrderStatus } from "../../../types/orderStatus";
 import { OrderType } from "../../../types/orderTypes";
-import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
 import TakeOrderReview from "../../@reviewScreens/TakeOrderReview/TakeOrderReview";
 import WrapReview from "../../@reviewScreens/WrapReview/WrapReview";
+import ApprovalSubmittedScreen from "../../ApprovalSubmittedScreen/ApprovalSubmittedScreen";
 import AvailableOrdersWidget from "../../AvailableOrdersWidget/AvailableOrdersWidget";
 import addAndSwitchToChain from "../../ChainSelectionPopover/helpers/addAndSwitchToChain";
 import { ErrorList } from "../../ErrorList/ErrorList";
 import ProtocolFeeModal from "../../InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import OrderSubmittedScreen from "../../OrderSubmittedScreen/OrderSubmittedScreen";
-import Overlay from "../../Overlay/Overlay";
 import SwapInputs from "../../SwapInputs/SwapInputs";
+import TransactionOverlay from "../../TransactionOverlay/TransactionOverlay";
 import WalletSignScreen from "../../WalletSignScreen/WalletSignScreen";
 import {
   Container,
   StyledActionButtons,
-  StyledInfoButtons,
   StyledInfoSection,
+  StyledRecipientAndStatus,
 } from "./OrderDetailWidget.styles";
 import useFormattedTokenAmount from "./hooks/useFormattedTokenAmount";
 import { useOrderStatus } from "./hooks/useOrderStatus";
@@ -79,10 +80,8 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   const { t } = useTranslation();
   const { provider: library } = useWeb3React<Web3Provider>();
   const { isActive, account, chainId } = useAppSelector((state) => state.web3);
+
   const history = useHistory();
-  const location = useLocation<{ isFromAvailableOrdersWidget?: boolean }>();
-  const isFromAvailableOrdersWidget =
-    !!location.state?.isFromAvailableOrdersWidget;
   const dispatch = useAppDispatch();
   const params = useParams<{ compressedOrder: string }>();
   const { setShowWalletList, setTransactionsTabIsOpen } =
@@ -91,7 +90,6 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   const ordersStatus = useAppSelector(selectOrdersStatus);
   const ordersErrors = useAppSelector(selectOrdersErrors);
   const takeOtcErrors = useAppSelector(selectTakeOtcErrors);
-  const { userOrders } = useAppSelector(selectMyOrdersReducer);
   const { indexerUrls } = useAppSelector(selectIndexerReducer);
 
   const errors = [...ordersErrors, ...takeOtcErrors];
@@ -101,12 +99,14 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   );
   const [orderStatus, isOrderStatusLoading] = useOrderStatus(order);
   const [senderToken, isSenderTokenLoading] = useTakerTokenInfo(
-    order.senderToken
+    order.senderToken,
+    order.chainId
   );
   const [signerToken, isSignerTokenLoading] = useTakerTokenInfo(
-    order.signerToken
+    order.signerToken,
+    order.chainId
   );
-
+  const isBalanceLoading = useBalanceLoading();
   const senderAmount = useFormattedTokenAmount(
     order.senderAmount,
     senderToken?.decimals
@@ -120,9 +120,10 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   const tokenExchangeRate = new BigNumber(senderAmount!).dividedBy(
     signerAmount!
   );
-  const hasApprovalPending = !!useApprovalPending(order.senderToken);
+  const approvalTransaction = useApprovalPending(order.senderToken, true);
   const wrappedNativeToken = useNativeWrappedToken(chainId);
   const orderTransaction = useSessionOrderTransaction(order.nonce);
+
   const { hasSufficientAllowance } = useAllowance(
     senderToken,
     senderAmount,
@@ -140,7 +141,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   );
   const isAllowancesOrBalancesFailed = useAllowancesOrBalancesFailed();
   const shouldDepositNativeToken = !!shouldDepositNativeTokenAmount;
-  const hasDepositPending = useDepositPending();
+  const hasDepositPending = !!useDepositPending();
   const orderTransactionLink = useOrderTransactionLink(order.nonce);
   const orderChainId = useMemo(() => order.chainId, [order]);
   const walletChainIdIsDifferentThanOrderChainId =
@@ -188,18 +189,6 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
     });
   };
 
-  const handleBackButtonClick = () => {
-    if (isFromAvailableOrdersWidget) {
-      backToSwapPage();
-
-      return;
-    }
-
-    history.push({
-      pathname: `/${userOrders.length ? AppRoutes.myOrders : AppRoutes.make}`,
-    });
-  };
-
   const takeOrder = async () => {
     if (!library) return;
 
@@ -231,12 +220,14 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
   };
 
   const depositNativeToken = async () => {
-    deposit(
-      shouldDepositNativeTokenAmount!,
-      senderToken!,
-      wrappedNativeToken!,
-      chainId!,
-      library!
+    dispatch(
+      deposit(
+        shouldDepositNativeTokenAmount!,
+        senderToken!,
+        wrappedNativeToken!,
+        chainId!,
+        library!
+      )
     );
   };
 
@@ -263,6 +254,10 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
       restart();
     }
 
+    if (action === ButtonActions.approve) {
+      approveToken();
+    }
+
     if (action === ButtonActions.review) {
       setState(OrderDetailWidgetState.review);
     }
@@ -270,30 +265,19 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
     if (action === ButtonActions.cancel) {
       history.push({ pathname: `/order/${params.compressedOrder}/cancel` });
     }
-  };
 
-  if (ordersStatus === "signing") {
-    return (
-      <Container>
-        <WalletSignScreen />
-      </Container>
-    );
-  }
-
-  if (orderTransaction) {
-    return (
-      <OrderSubmittedScreen
-        chainId={chainId}
-        transaction={orderTransaction}
-        onMakeNewOrderButtonClick={restart}
-        onTrackTransactionButtonClick={openTransactionsTab}
-      />
-    );
-  }
+    if (action === ButtonActions.take) {
+      takeOrder();
+    }
+  };
 
-  if (state === OrderDetailWidgetState.review && shouldDepositNativeToken) {
-    return (
-      <Container>
+  const renderScreens = () => {
+    if (
+      state === OrderDetailWidgetState.review &&
+      shouldDepositNativeToken &&
+      !orderTransaction
+    ) {
+      return (
         <WrapReview
           isLoading={hasDepositPending}
           amount={senderAmount || "0"}
@@ -303,30 +287,11 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
           onRestartButtonClick={backToOverview}
           onSignButtonClick={depositNativeToken}
         />
-      </Container>
-    );
-  }
-
-  if (state === OrderDetailWidgetState.review && !hasSufficientAllowance) {
-    return (
-      <Container>
-        <ApproveReview
-          isLoading={hasApprovalPending}
-          amount={senderAmount || "0"}
-          errors={errors}
-          readableAllowance={"0"}
-          token={senderToken}
-          wrappedNativeToken={wrappedNativeToken}
-          onRestartButtonClick={backToOverview}
-          onSignButtonClick={approveToken}
-        />
-      </Container>
-    );
-  }
+      );
+    }
 
-  if (state === OrderDetailWidgetState.review && !orderTransaction) {
-    return (
-      <Container>
+    if (state === OrderDetailWidgetState.review) {
+      return (
         <TakeOrderReview
           errors={errors}
           expiry={+order.expiry}
@@ -339,95 +304,101 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
           onRestartButtonClick={restart}
           onSignButtonClick={takeOrder}
         />
-      </Container>
+      );
+    }
+
+    return (
+      <>
+        <OrderDetailWidgetHeader isMakerOfSwap={userIsMakerOfSwap} />
+        <SwapInputs
+          readOnly
+          disabled={orderStatus === OrderStatus.canceled}
+          isRequestingBaseAmount={isSignerTokenLoading}
+          isRequestingBaseToken={isSignerTokenLoading}
+          isRequestingQuoteAmount={isSenderTokenLoading}
+          isRequestingQuoteToken={isSenderTokenLoading}
+          showTokenContractLink
+          baseAmount={signerAmount || "0.00"}
+          baseTokenInfo={signerToken}
+          maxAmount={null}
+          side={userIsMakerOfSwap ? "sell" : "buy"}
+          tradeNotAllowed={walletChainIdIsDifferentThanOrderChainId}
+          quoteAmount={senderAmount || "0.00"}
+          quoteTokenInfo={senderToken}
+          onBaseAmountChange={() => {}}
+          onChangeTokenClick={() => {}}
+          onMaxButtonClick={() => {}}
+        />
+
+        <StyledRecipientAndStatus
+          isLoading={isOrderStatusLoading}
+          expiry={parsedExpiry}
+          link={orderTransactionLink}
+          orderType={orderType}
+          recipient={order.senderWallet}
+          status={orderStatus}
+          userAddress={account || undefined}
+        />
+
+        <StyledInfoSection
+          isAllowancesFailed={isAllowancesOrBalancesFailed}
+          isExpired={orderStatus === OrderStatus.expired}
+          isDifferentChainId={walletChainIdIsDifferentThanOrderChainId}
+          isIntendedRecipient={userIsIntendedRecipient}
+          isMakerOfSwap={userIsMakerOfSwap}
+          isNotConnected={!isActive}
+          orderChainId={orderChainId}
+          token1={signerTokenSymbol}
+          token2={senderTokenSymbol}
+          rate={tokenExchangeRate}
+          onFeeButtonClick={toggleShowFeeInfo}
+        />
+
+        <StyledActionButtons
+          hasInsufficientBalance={hasInsufficientTokenBalance}
+          hasInsufficientAllowance={!hasSufficientAllowance}
+          isExpired={orderStatus === OrderStatus.expired}
+          isCanceled={orderStatus === OrderStatus.canceled}
+          isTaken={orderStatus === OrderStatus.taken}
+          isDifferentChainId={walletChainIdIsDifferentThanOrderChainId}
+          isIntendedRecipient={userIsIntendedRecipient}
+          isLoading={isBalanceLoading}
+          isMakerOfSwap={userIsMakerOfSwap}
+          isNotConnected={!isActive}
+          requiresReload={isAllowancesOrBalancesFailed}
+          shouldDepositNativeToken={shouldDepositNativeToken}
+          onActionButtonClick={handleActionButtonClick}
+        />
+      </>
     );
-  }
+  };
 
   return (
     <Container>
-      <OrderDetailWidgetHeader
-        isMakerOfSwap={userIsMakerOfSwap}
-        isOrderStatusLoading={isOrderStatusLoading}
-        expiry={parsedExpiry}
-        orderStatus={orderStatus}
-        orderType={orderType}
-        recipientAddress={order.senderWallet}
-        transactionLink={orderTransactionLink}
-        userAddress={account || undefined}
-      />
-      <SwapInputs
-        readOnly
-        disabled={orderStatus === OrderStatus.canceled}
-        isRequestingBaseAmount={isSignerTokenLoading}
-        isRequestingBaseToken={isSignerTokenLoading}
-        isRequestingQuoteAmount={isSenderTokenLoading}
-        isRequestingQuoteToken={isSenderTokenLoading}
-        showTokenContractLink
-        baseAmount={signerAmount || "0.00"}
-        baseTokenInfo={signerToken}
-        maxAmount={null}
-        side={userIsMakerOfSwap ? "sell" : "buy"}
-        tradeNotAllowed={walletChainIdIsDifferentThanOrderChainId}
-        quoteAmount={senderAmount || "0.00"}
-        quoteTokenInfo={senderToken}
-        onBaseAmountChange={() => {}}
-        onChangeTokenClick={() => {}}
-        onMaxButtonClick={() => {}}
-      />
-      <StyledInfoButtons
-        isMakerOfSwap={userIsMakerOfSwap}
-        showViewAllQuotes={isFromAvailableOrdersWidget && !userIsMakerOfSwap}
-        token1={signerTokenSymbol}
-        token2={senderTokenSymbol}
-        rate={tokenExchangeRate}
-        onViewAllQuotesButtonClick={toggleShowViewAllQuotes}
-        onFeeButtonClick={toggleShowFeeInfo}
-      />
-      <StyledInfoSection
-        isAllowancesFailed={isAllowancesOrBalancesFailed}
-        isExpired={orderStatus === OrderStatus.expired}
-        isDifferentChainId={walletChainIdIsDifferentThanOrderChainId}
-        isIntendedRecipient={userIsIntendedRecipient}
-        isMakerOfSwap={userIsMakerOfSwap}
-        isNotConnected={!isActive}
-        orderChainId={orderChainId}
-      />
-      <StyledActionButtons
-        hasInsufficientBalance={hasInsufficientTokenBalance}
-        hasInsufficientAllowance={!hasSufficientAllowance}
-        isExpired={orderStatus === OrderStatus.expired}
-        isCanceled={orderStatus === OrderStatus.canceled}
-        isTaken={orderStatus === OrderStatus.taken}
-        isDifferentChainId={walletChainIdIsDifferentThanOrderChainId}
-        isIntendedRecipient={userIsIntendedRecipient}
-        isMakerOfSwap={userIsMakerOfSwap}
-        isNotConnected={!isActive}
-        requiresReload={isAllowancesOrBalancesFailed}
-        shouldDepositNativeToken={shouldDepositNativeToken}
-        senderTokenSymbol={senderTokenSymbol}
-        onBackButtonClick={handleBackButtonClick}
-        onActionButtonClick={handleActionButtonClick}
-      />
-      <Overlay
+      {renderScreens()}
+
+      <ModalOverlay
         title={t("information.protocolFee.title")}
-        onCloseButtonClick={() => toggleShowFeeInfo()}
+        onClose={() => toggleShowFeeInfo()}
         isHidden={!showFeeInfo}
       >
         <ProtocolFeeModal onCloseButtonClick={() => toggleShowFeeInfo()} />
-      </Overlay>
-      <Overlay
+      </ModalOverlay>
+
+      <ModalOverlay
         title={t("validatorErrors.unableSwap")}
         subTitle={t("validatorErrors.swapFail")}
-        onCloseButtonClick={restart}
+        onClose={restart}
         isHidden={!errors.length}
       >
         <ErrorList errors={errors} onBackButtonClick={restart} />
-      </Overlay>
+      </ModalOverlay>
+
       {signerToken && senderToken && (
-        <Overlay
+        <ModalOverlay
           title={t("orders.availableOrders")}
           isHidden={!showViewAllQuotes}
-          onCloseButtonClick={() => toggleShowViewAllQuotes()}
+          onClose={() => toggleShowViewAllQuotes()}
         >
           <AvailableOrdersWidget
             senderToken={senderToken}
@@ -435,8 +406,34 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
             onSwapLinkClick={backToSwapPage}
             onFullOrderLinkClick={toggleShowViewAllQuotes}
           />
-        </Overlay>
+        </ModalOverlay>
       )}
+
+      <TransactionOverlay isHidden={ordersStatus !== "signing"}>
+        <WalletSignScreen type="swap" />
+      </TransactionOverlay>
+
+      <TransactionOverlay
+        isHidden={ordersStatus === "signing" || !approvalTransaction}
+      >
+        {approvalTransaction && (
+          <ApprovalSubmittedScreen
+            chainId={chainId}
+            transaction={approvalTransaction}
+          />
+        )}
+      </TransactionOverlay>
+
+      <TransactionOverlay isHidden={!orderTransaction}>
+        {orderTransaction && (
+          <OrderSubmittedScreen
+            chainId={chainId}
+            transaction={orderTransaction}
+            onMakeNewOrderButtonClick={restart}
+            onTrackTransactionButtonClick={openTransactionsTab}
+          />
+        )}
+      </TransactionOverlay>
     </Container>
   );
 };
diff --git a/src/components/@widgets/OrderDetailWidget/helpers/index.ts b/src/components/@widgets/OrderDetailWidget/helpers/index.ts
index 95b8bdfcc..bd884a63a 100644
--- a/src/components/@widgets/OrderDetailWidget/helpers/index.ts
+++ b/src/components/@widgets/OrderDetailWidget/helpers/index.ts
@@ -22,7 +22,6 @@ export const getFullOrderERC20WarningTranslation = (
   if (isAllowancesFailed) {
     return {
       heading: i18n.t("balances.failedToFetchAllowances"),
-      subHeading: i18n.t("balances.failedToFetchAllowancesCta"),
     };
   }
 
diff --git a/src/components/@widgets/OrderDetailWidget/hooks/useTakerTokenInfo.tsx b/src/components/@widgets/OrderDetailWidget/hooks/useTakerTokenInfo.tsx
index 5e44c8e8a..66e7bb183 100644
--- a/src/components/@widgets/OrderDetailWidget/hooks/useTakerTokenInfo.tsx
+++ b/src/components/@widgets/OrderDetailWidget/hooks/useTakerTokenInfo.tsx
@@ -1,99 +1,66 @@
 import { useEffect, useState } from "react";
 
 import { TokenInfo } from "@airswap/utils";
-import { Web3Provider } from "@ethersproject/providers";
-import { useWeb3React } from "@web3-react/core";
-
-import { getDefaultProvider } from "ethers";
 
 import { useAppDispatch, useAppSelector } from "../../../../app/hooks";
-import { getAllTokensFromLocalStorage } from "../../../../features/metadata/metadataApi";
 import {
-  addTokenInfo,
-  selectAllTokenInfo,
+  addActiveToken,
+  fetchUnkownTokens,
+} from "../../../../features/metadata/metadataActions";
+import {
+  selectActiveTokenAddresses,
+  selectAllTokens,
 } from "../../../../features/metadata/metadataSlice";
 import { selectTakeOtcReducer } from "../../../../features/takeOtc/takeOtcSlice";
 import findEthOrTokenByAddress from "../../../../helpers/findEthOrTokenByAddress";
-import { getRpcUrl } from "../../../../helpers/getRpcUrl";
-import scrapeToken from "../../../../helpers/scrapeToken";
+import useDefaultLibrary from "../../../../hooks/useDefaultLibrary";
+import useJsonRpcProvider from "../../../../hooks/useJsonRpcProvider";
 
 // OTC Taker version of useTokenInfo. Look at chainId of the active FullOrderERC20 instead
 // of active wallet chainId. This way we don't need to connect a wallet to show order tokens.
 
 const useTakerTokenInfo = (
-  address: string | null
+  address: string | null,
+  chainId: number
 ): [TokenInfo | null, boolean] => {
   const dispatch = useAppDispatch();
-  const { provider: library } = useWeb3React<Web3Provider>();
-  const { isActive } = useAppSelector((state) => state.web3);
+  // Using JsonRpcProvider for unconnected wallets or for wallets connected to a different chain
+  const library = useJsonRpcProvider(chainId);
 
-  const allTokens = useAppSelector(selectAllTokenInfo);
+  const allTokens = useAppSelector(selectAllTokens);
+  const activeTokenAddresses = useAppSelector(selectActiveTokenAddresses);
   const { activeOrder } = useAppSelector(selectTakeOtcReducer);
 
   const [token, setToken] = useState<TokenInfo>();
-  const [scrapedToken, setScrapedToken] = useState<TokenInfo>();
-  const [isCallScrapeTokenLoading, setIsCallScrapeTokenLoading] =
-    useState(false);
-  const [isCallScrapeTokenSuccess, setIsCallScrapeTokenSuccess] =
-    useState(false);
 
   useEffect(() => {
-    if (scrapedToken) {
-      dispatch(addTokenInfo(scrapedToken));
+    if (
+      address &&
+      allTokens.find((token) => token.address === address) &&
+      !activeTokenAddresses.includes(address)
+    ) {
+      // Add as active token so balance and token info will be fetched
+      dispatch(addActiveToken(address));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrapedToken]);
+  }, [address, allTokens]);
 
   useEffect(() => {
-    if (!activeOrder || !address || !allTokens.length) {
+    if (!address || !allTokens.length || token || !library) {
       return;
     }
 
-    const chainId = activeOrder.chainId;
-
-    // If wallet is not connected the metadata tokens can't be filled yet because it gets chainId from
-    // the wallet. But in this case we have the chainId from the order already. So we can get tokens from
-    // localStorage directly so we don't have to wait for the wallet getting connected.
-
-    const tokensObject = getAllTokensFromLocalStorage(chainId);
-
-    const tokens = [
-      ...allTokens,
-      ...(!isActive ? Object.values(tokensObject) : []),
-    ];
-
-    const callScrapeToken = async () => {
-      setIsCallScrapeTokenLoading(true);
-
-      const lib = library || getDefaultProvider(getRpcUrl(activeOrder.chainId));
-
-      if (lib) {
-        const result = await scrapeToken(address, lib);
-        if (result) {
-          setScrapedToken(result);
-        }
-        setIsCallScrapeTokenSuccess(true);
-      } else {
-        setIsCallScrapeTokenSuccess(false);
-      }
-      setIsCallScrapeTokenLoading(false);
-    };
-
-    const tokenFromStore = findEthOrTokenByAddress(address, tokens, chainId);
+    const tokenFromStore = findEthOrTokenByAddress(address, allTokens, chainId);
 
     if (tokenFromStore) {
       setToken(tokenFromStore);
-    } else if (
-      !tokenFromStore &&
-      !isCallScrapeTokenLoading &&
-      !isCallScrapeTokenSuccess
-    ) {
-      callScrapeToken();
+    } else {
+      dispatch(addActiveToken(address));
+      dispatch(fetchUnkownTokens({ provider: library, tokens: [address] }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allTokens, address, activeOrder, isActive]);
+  }, [address, activeOrder, allTokens.length]);
 
-  return [token || scrapedToken || null, isCallScrapeTokenLoading];
+  return [token || null, false];
 };
 
 export default useTakerTokenInfo;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
index b5d5bb692..7e2138cf9 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
@@ -1,19 +1,16 @@
 import styled from "styled-components/macro";
 
-import { InputOrButtonBorderStyle } from "../../../../../style/mixins";
 import Button from "../../../../Button/Button";
 import CopyLinkButton from "../CopyLinkButton/CopyLinkButton";
 
-export const Container = styled.div`
+export const Container = styled.div<{ center?: boolean }>`
   display: flex;
-  justify-content: space-between;
+  justify-content: ${({ center }) => (center ? "center" : "space-between")};
   justify-self: flex-end;
   margin-top: auto;
 `;
 
 export const BackButton = styled(Button)`
-  ${InputOrButtonBorderStyle};
-
   width: calc(50% - 0.5rem);
 `;
 
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.tsx
index 725eb76fc..33dfb2d48 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/ActionButtons/ActionButtons.tsx
@@ -1,8 +1,6 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { OrderType } from "../../../../../types/orderTypes";
-import CopyLinkButton from "../CopyLinkButton/CopyLinkButton";
 import {
   BackButton,
   Container,
@@ -11,12 +9,14 @@ import {
 } from "./ActionButtons.styles";
 
 export enum ButtonActions {
-  connectWallet,
-  switchNetwork,
-  reloadPage,
-  restart,
-  cancel,
-  review,
+  approve = "approve",
+  cancel = "cancel",
+  connectWallet = "connectWallet",
+  reloadPage = "reloadPage",
+  restart = "restart",
+  review = "review",
+  switchNetwork = "switchNetwork",
+  take = "take",
 }
 
 type ActionButtonsProps = {
@@ -27,12 +27,11 @@ type ActionButtonsProps = {
   isTaken: boolean;
   isDifferentChainId: boolean;
   isIntendedRecipient: boolean;
+  isLoading: boolean;
   isMakerOfSwap: boolean;
   isNotConnected: boolean;
   requiresReload: boolean;
   shouldDepositNativeToken: boolean;
-  senderTokenSymbol?: string;
-  onBackButtonClick: () => void;
   onActionButtonClick: (action: ButtonActions) => void;
   className?: string;
 };
@@ -45,22 +44,28 @@ const ActionButtons: FC<ActionButtonsProps> = ({
   isTaken,
   isDifferentChainId,
   isIntendedRecipient,
+  isLoading,
   isMakerOfSwap,
   isNotConnected,
   requiresReload,
   shouldDepositNativeToken,
-  senderTokenSymbol,
-  onBackButtonClick,
   onActionButtonClick,
   className,
 }) => {
   const { t } = useTranslation();
 
+  if (isLoading) {
+    return (
+      <Container center className={className}>
+        <SignButton disabled intent="primary" loading />
+      </Container>
+    );
+  }
+
   if (isNotConnected) {
     return (
-      <Container className={className}>
+      <Container center className={className}>
         <SignButton
-          isFilled
           intent="primary"
           onClick={() => onActionButtonClick(ButtonActions.connectWallet)}
         >
@@ -72,9 +77,8 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (isDifferentChainId) {
     return (
-      <Container className={className}>
+      <Container center className={className}>
         <SignButton
-          isFilled
           intent="primary"
           onClick={() => onActionButtonClick(ButtonActions.switchNetwork)}
         >
@@ -86,7 +90,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (requiresReload) {
     return (
-      <Container className={className}>
+      <Container center className={className}>
         <SignButton
           intent="primary"
           onClick={() => onActionButtonClick(ButtonActions.reloadPage)}
@@ -99,8 +103,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (isExpired || isTaken || isCanceled) {
     return (
-      <Container className={className}>
-        <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
+      <Container center className={className}>
         <SignButton
           intent="primary"
           onClick={() => onActionButtonClick(ButtonActions.restart)}
@@ -124,8 +127,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (!isIntendedRecipient) {
     return (
-      <Container className={className}>
-        <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
+      <Container center className={className}>
         <SignButton disabled intent="neutral">
           {t("orders.unableTake")}
         </SignButton>
@@ -135,13 +137,12 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (shouldDepositNativeToken) {
     return (
-      <Container className={className}>
-        <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
+      <Container center className={className}>
         <SignButton
           intent="primary"
           onClick={() => onActionButtonClick(ButtonActions.review)}
         >
-          {`${t("common.wrap")} ${senderTokenSymbol}`}
+          {t("common.wrap")}
         </SignButton>
       </Container>
     );
@@ -149,10 +150,9 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (hasInsufficientBalance) {
     return (
-      <Container className={className}>
-        <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
-        <SignButton disabled intent="neutral">
-          {t("orders.insufficientBalance", { symbol: senderTokenSymbol })}
+      <Container center className={className}>
+        <SignButton disabled intent="neutral" isFilled={true}>
+          {t("orders.insufficientBalance")}
         </SignButton>
       </Container>
     );
@@ -160,26 +160,24 @@ const ActionButtons: FC<ActionButtonsProps> = ({
 
   if (hasInsufficientAllowance) {
     return (
-      <Container className={className}>
-        <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
+      <Container center className={className}>
         <SignButton
           intent="primary"
-          onClick={() => onActionButtonClick(ButtonActions.review)}
+          onClick={() => onActionButtonClick(ButtonActions.approve)}
         >
-          {`${t("orders.approve")} ${senderTokenSymbol || ""}`}
+          {t("orders.approve")}
         </SignButton>
       </Container>
     );
   }
 
   return (
-    <Container className={className}>
-      <BackButton onClick={onBackButtonClick}>{t("common.back")}</BackButton>
+    <Container center className={className}>
       <SignButton
         intent="primary"
-        onClick={() => onActionButtonClick(ButtonActions.review)}
+        onClick={() => onActionButtonClick(ButtonActions.take)}
       >
-        {t("common.review")}
+        {t("orders.takeSwap")}
       </SignButton>
     </Container>
   );
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.styles.tsx
deleted file mode 100644
index 0fea968eb..000000000
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.styles.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from "styled-components/macro";
-
-import { LargePillButton } from "../../../../../styled-components/Pill/Pill";
-import CopyLinkButton from "../CopyLinkButton/CopyLinkButton";
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 1rem;
-`;
-
-export const ButtonsWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-
-  > button,
-  > div {
-    margin-bottom: 1rem;
-  }
-`;
-
-export const StyledLargePillButton = styled(LargePillButton)`
-  margin: 0 0.5rem;
-`;
-
-export const StyledCopyLinkButton = styled(CopyLinkButton)`
-  margin: 0 0.5rem;
-`;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.tsx
deleted file mode 100644
index 34db450fa..000000000
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoButtons/InfoButtons.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-import { BigNumber } from "bignumber.js";
-
-import { useAppSelector } from "../../../../../app/hooks";
-import { selectProtocolFee } from "../../../../../features/metadata/metadataSlice";
-import Icon from "../../../../Icon/Icon";
-import { RateField } from "../../../MakeWidget/subcomponents/RateField/RateField";
-import {
-  ButtonsWrapper,
-  Container,
-  StyledLargePillButton,
-} from "./InfoButtons.styles";
-
-type InfoButtonsProps = {
-  isMakerOfSwap: boolean;
-  showViewAllQuotes: boolean;
-  token1?: string;
-  token2?: string;
-  rate: BigNumber;
-  onViewAllQuotesButtonClick: () => void;
-  onFeeButtonClick: () => void;
-  className?: string;
-};
-
-const InfoButtons: FC<InfoButtonsProps> = ({
-  isMakerOfSwap,
-  showViewAllQuotes,
-  token1,
-  token2,
-  rate,
-  onViewAllQuotesButtonClick,
-  onFeeButtonClick,
-  className,
-}) => {
-  const { t } = useTranslation();
-  const protocolFee = useAppSelector(selectProtocolFee);
-
-  return (
-    <Container className={className}>
-      <ButtonsWrapper>
-        {token1 && token2 && rate && (
-          <RateField isButton token1={token1} token2={token2} rate={rate} />
-        )}
-        {isMakerOfSwap && (
-          <StyledLargePillButton onClick={onFeeButtonClick}>
-            {`${t("common.fee")} ${protocolFee / 100}%`}
-            <Icon name="information-circle-outline" />
-          </StyledLargePillButton>
-        )}
-        {showViewAllQuotes && (
-          <StyledLargePillButton onClick={onViewAllQuotesButtonClick}>
-            {t("orders.viewAllQuotes")}
-            <Icon name="chevron-down" />
-          </StyledLargePillButton>
-        )}
-      </ButtonsWrapper>
-    </Container>
-  );
-};
-
-export default InfoButtons;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.styles.tsx
index b79783730..0697a92d4 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.styles.tsx
@@ -4,10 +4,6 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 3.5rem;
   text-align: center;
 `;
-
-export const Strong = styled.strong`
-  margin: 0 0.25rem;
-  color: ${(props) => props.theme.colors.white};
-`;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.tsx
index e2665eed0..21f431589 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -1,14 +1,12 @@
-import React, { FC, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { FC, useMemo } from "react";
 
-import useShouldDepositNativeTokenAmountInfo from "../../../../../hooks/useShouldDepositNativeTokenAmountInfo";
+import BigNumber from "bignumber.js";
+
+import { PriceConverter } from "../../../../PriceConverter/PriceConverter";
 import { InfoSubHeading } from "../../../../Typography/Typography";
-import {
-  StyledInfoHeading,
-  StyledInfoSubHeading,
-} from "../../../../Typography/Typography.styles";
+import { RateField } from "../../../MakeWidget/subcomponents/RateField/RateField";
 import { getFullOrderERC20WarningTranslation } from "../../helpers";
-import { Container, Strong } from "./InfoSection.styles";
+import { Container } from "./InfoSection.styles";
 
 type ActionButtonsProps = {
   isAllowancesFailed: boolean;
@@ -18,6 +16,10 @@ type ActionButtonsProps = {
   isMakerOfSwap: boolean;
   isNotConnected: boolean;
   orderChainId: number;
+  token1?: string;
+  token2?: string;
+  rate: BigNumber;
+  onFeeButtonClick: () => void;
   className?: string;
 };
 
@@ -29,6 +31,9 @@ const InfoSection: FC<ActionButtonsProps> = ({
   isMakerOfSwap,
   isNotConnected,
   orderChainId,
+  token1,
+  token2,
+  rate,
   className,
 }) => {
   const warningText = useMemo(() => {
@@ -53,16 +58,24 @@ const InfoSection: FC<ActionButtonsProps> = ({
   if (warningText) {
     return (
       <Container className={className}>
-        <StyledInfoHeading>{warningText.heading}</StyledInfoHeading>
+        <InfoSubHeading>{warningText.heading}</InfoSubHeading>
+      </Container>
+    );
+  }
 
-        {warningText.subHeading && (
-          <StyledInfoSubHeading>{warningText.subHeading}</StyledInfoSubHeading>
-        )}
+  if (token1 && token2 && rate) {
+    return (
+      <Container className={className}>
+        <PriceConverter
+          baseTokenSymbol={token1}
+          quoteTokenSymbol={token2}
+          price={rate}
+        />
       </Container>
     );
   }
 
-  return null;
+  return <Container className={className} />;
 };
 
 export default InfoSection;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.styles.tsx
index ebf0fb99f..96de9fa0a 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.styles.tsx
@@ -1,28 +1,12 @@
 import styled from "styled-components/macro";
 
 import { WidgetHeader } from "../../../../../styled-components/WidgetHeader/WidgetHeader";
-import OrderRecipientInfo from "../OrderRecipientInfo/OrderRecipientInfo";
-import OrderStatusInfo from "../OrderStatusInfo/OrderStatusInfo";
-
-export const InfoContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  position: relative;
-  margin-left: 0.5rem;
-`;
+import { Title } from "../../../../Typography/Typography";
 
 export const StyledWidgetHeader = styled(WidgetHeader)`
-  margin-bottom: 1.375rem;
-`;
-
-export const StyledOrderRecipientInfo = styled(OrderRecipientInfo)`
-  max-width: 100%;
-  margin-bottom: 0.5rem;
+  margin-bottom: 2rem;
 `;
 
-export const StyledOrderStatusInfo = styled(OrderStatusInfo)`
-  max-width: 100%;
-  margin-left: 0.5rem;
+export const StyledTitle = styled(Title)`
+  color: ${({ theme }) => theme.colors.carteBlanche};
 `;
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.tsx
index c7c220184..ad8fe0ef3 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderDetailWidgetHeader/OrderDetailWidgetHeader.tsx
@@ -1,37 +1,16 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { OrderStatus } from "../../../../../types/orderStatus";
-import { OrderType } from "../../../../../types/orderTypes";
 import { Title } from "../../../../Typography/Typography";
-import {
-  InfoContainer,
-  StyledOrderRecipientInfo,
-  StyledOrderStatusInfo,
-  StyledWidgetHeader,
-} from "./OrderDetailWidgetHeader.styles";
+import { StyledWidgetHeader } from "./OrderDetailWidgetHeader.styles";
 
 type OrderDetailWidgetHeaderProps = {
   isMakerOfSwap: boolean;
-  isOrderStatusLoading: boolean;
-  expiry: Date;
-  orderStatus: OrderStatus;
-  orderType: OrderType;
-  recipientAddress?: string;
-  transactionLink?: string;
-  userAddress?: string;
   className?: string;
 };
 
 const OrderDetailWidgetHeader: FC<OrderDetailWidgetHeaderProps> = ({
   isMakerOfSwap,
-  isOrderStatusLoading,
-  expiry,
-  orderStatus,
-  orderType,
-  recipientAddress,
-  transactionLink,
-  userAddress,
   className,
 }) => {
   const { t } = useTranslation();
@@ -39,21 +18,8 @@ const OrderDetailWidgetHeader: FC<OrderDetailWidgetHeaderProps> = ({
   return (
     <StyledWidgetHeader className={className}>
       <Title type="h2" as="h1">
-        {isMakerOfSwap ? t("common.order") : t("common.otc")}
+        {isMakerOfSwap ? t("common.order") : t("orders.takeOtc")}
       </Title>
-      <InfoContainer>
-        <StyledOrderRecipientInfo
-          orderType={orderType}
-          recipientAddress={recipientAddress}
-          userAddress={userAddress}
-        />
-        <StyledOrderStatusInfo
-          isLoading={isOrderStatusLoading}
-          expiry={expiry}
-          status={orderStatus}
-          link={transactionLink}
-        />
-      </InfoContainer>
     </StyledWidgetHeader>
   );
 };
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.styles.tsx
index a540d98f9..e185f3605 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components/macro";
 
+import { InputOrButtonBorderStyleType2 } from "../../../../../style/mixins";
 import { PillButton, Pill } from "../../../../../styled-components/Pill/Pill";
 import Icon from "../../../../Icon/Icon";
 
@@ -21,22 +22,36 @@ export const StyledCopyIcon = styled(Icon)`
   color: ${({ theme }) => theme.colors.lightGrey};
 `;
 
-export const Button = styled(PillButton)`
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const CopyButton = styled.button`
+  ${InputOrButtonBorderStyleType2};
+
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.white};
+
   ${StyledCopyIcon} {
     margin-left: 0.25rem;
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.colors.white};
+  &:hover:enabled,
+  &:focus:enabled {
+    outline: none;
+    border-color: transparent;
 
-    ${For},
     ${StyledCopyIcon} {
       color: ${({ theme }) => theme.colors.white};
     }
   }
 `;
 
-export const InfoWrapper = styled(Pill)`
+export const InfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.lightGrey : theme.colors.primary};
 
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.tsx
index fe9439746..bc2ba3b5f 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo.tsx
@@ -1,11 +1,14 @@
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import truncateEthAddress from "truncate-eth-address";
+
 import writeTextToClipboard from "../../../../../helpers/writeTextToClipboard";
 import useEnsAddress from "../../../../../hooks/useEnsAddress";
 import { OrderType } from "../../../../../types/orderTypes";
 import {
-  Button,
+  Container,
+  CopyButton,
   For,
   InfoWrapper,
   StyledCheckIcon,
@@ -49,17 +52,16 @@ const OrderRecipientInfo: FC<OrderRecipientInfoProps> = ({
     orderType === OrderType.private
   ) {
     return (
-      <Button onClick={handleClick} className={className}>
+      <Container onClick={handleClick} className={className}>
         <For>{`${t("common.for")}:`}</For>
-        {`${readableAddress.substr(0, 3)}...${readableAddress.substr(
-          readableAddress.length - 3,
-          3
-        )}`}
-        <StyledCopyIcon
-          name={writeAddressToClipboardSuccess ? "check" : "copy"}
-          iconSize={0.875}
-        />
-      </Button>
+        <CopyButton>
+          {truncateEthAddress(readableAddress)}
+          <StyledCopyIcon
+            name={writeAddressToClipboardSuccess ? "check" : "copy"}
+            iconSize={0.875}
+          />
+        </CopyButton>
+      </Container>
     );
   }
 
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.styles.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.styles.tsx
index d50061a39..d24b19ae4 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.styles.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.styles.tsx
@@ -1,10 +1,11 @@
 import styled from "styled-components/macro";
 
-import { Pill, PillButton } from "../../../../../styled-components/Pill/Pill";
 import Icon from "../../../../Icon/Icon";
 import LoadingSpinner from "../../../../LoadingSpinner/LoadingSpinner";
 
-export const InfoWrapper = styled(Pill)`
+export const InfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
   color: ${({ theme }) => theme.colors.lightGrey};
 `;
 
@@ -12,8 +13,12 @@ export const StyledIcon = styled(Icon)`
   color: ${({ theme }) => theme.colors.lightGrey};
 `;
 
-export const Button = styled(PillButton)`
+export const Button = styled.button`
+  display: flex;
+  align-items: center;
+
   ${StyledIcon} {
+    margin-top: 0.125rem;
     margin-left: 0.375rem;
     color: ${({ theme }) =>
       theme.name === "dark" ? theme.colors.lightGrey : theme.colors.primary};
diff --git a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.tsx b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.tsx
index 7a4d38dfc..3543365e6 100644
--- a/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.tsx
+++ b/src/components/@widgets/OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { OrderStatus } from "../../../../../types/orderStatus";
diff --git a/src/components/@widgets/SwapWidget/SwapWidget.styles.tsx b/src/components/@widgets/SwapWidget/SwapWidget.styles.tsx
index 9e435f4b6..1e3bc4bcd 100644
--- a/src/components/@widgets/SwapWidget/SwapWidget.styles.tsx
+++ b/src/components/@widgets/SwapWidget/SwapWidget.styles.tsx
@@ -1,30 +1,41 @@
 import styled from "styled-components/macro";
 
+import { fontWide } from "../../../style/themes";
+import SwapInputs from "../../SwapInputs/SwapInputs";
 import WalletProviderList from "../../WalletProviderList/WalletProviderList";
+import ActionButtons from "./subcomponents/ActionButtons/ActionButtons";
 import DebugMenu from "./subcomponents/DebugMenu/DebugMenu";
+import SwapWidgetHeader from "./subcomponents/SwapWidgetHeader/SwapWidgetHeader";
 
-export const Header = styled.div`
-  display: flex;
-  margin-bottom: 2rem;
-  width: 100%;
+export const StyledHeader = styled(SwapWidgetHeader)`
+  order: -2;
 `;
 
-export const InfoContainer = styled.div`
+export const WelcomeMessage = styled.h2`
+  margin-block-start: 0.75rem;
+  color: ${(props) => props.theme.colors.lightGrey};
+  text-align: center;
+  font-family: ${fontWide};
+  font-size: 1.125rem;
+`;
+
+export const InfoContainer = styled.div<{ hasQuoteText: boolean }>`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: ${(props) =>
+    props.hasQuoteText ? "space-between" : "center"};
   align-items: center;
-  flex-grow: 2;
-  margin: 1rem 0;
-  max-height: 16rem;
+  gap: 0.25rem;
+  margin-block-start: 2rem;
+  padding-inline: 1rem;
   text-align: center;
 `;
 
-export const ButtonContainer = styled.div`
-  display: flex;
-  margin-top: auto;
-  justify-self: flex-end;
-  gap: 1.25rem;
+export const StyledSwapInputs = styled(SwapInputs)`
+  margin-block-start: 2rem;
+`;
+
+export const StyledActionButtons = styled(ActionButtons)`
+  margin-block-start: 2rem;
 `;
 
 export const StyledSwapWidget = styled.div`
@@ -34,16 +45,10 @@ export const StyledSwapWidget = styled.div`
   height: 100%;
 `;
 
-export const StyledWalletProviderList = styled(WalletProviderList)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
+export const StyledWalletProviderList = styled(WalletProviderList)``;
 
 export const StyledDebugMenu = styled(DebugMenu)`
-  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
 `;
 
 export default StyledSwapWidget;
diff --git a/src/components/@widgets/SwapWidget/SwapWidget.tsx b/src/components/@widgets/SwapWidget/SwapWidget.tsx
index 24b3109df..fbb904499 100644
--- a/src/components/@widgets/SwapWidget/SwapWidget.tsx
+++ b/src/components/@widgets/SwapWidget/SwapWidget.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useContext, useEffect, useMemo, useState } from "react";
+import { FC, useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 
@@ -56,7 +56,6 @@ import {
 } from "../../../features/tradeTerms/tradeTermsSlice";
 import {
   selectCustomServerUrl,
-  setCustomServerUrl,
   setUserTokens,
 } from "../../../features/userSettings/userSettingsSlice";
 import stringToSignificantDecimals from "../../../helpers/stringToSignificantDecimals";
@@ -66,6 +65,7 @@ import useAllowancesOrBalancesFailed from "../../../hooks/useAllowancesOrBalance
 import useAppRouteParams from "../../../hooks/useAppRouteParams";
 import useApprovalPending from "../../../hooks/useApprovalPending";
 import useApprovalSuccess from "../../../hooks/useApprovalSuccess";
+import { useBalanceLoading } from "../../../hooks/useBalanceLoading";
 import useDepositPending from "../../../hooks/useDepositPending";
 import useInsufficientBalance from "../../../hooks/useInsufficientBalance";
 import useMaxAmount from "../../../hooks/useMaxAmount";
@@ -80,34 +80,32 @@ import { AppRoutes } from "../../../routes";
 import { SwapType } from "../../../types/swapType";
 import { TokenSelectModalTypes } from "../../../types/tokenSelectModalTypes";
 import { TransactionStatusType } from "../../../types/transactionTypes";
-import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
+import ApprovalSubmittedScreen from "../../ApprovalSubmittedScreen/ApprovalSubmittedScreen";
 import AvailableOrdersWidget from "../../AvailableOrdersWidget/AvailableOrdersWidget";
 import { ErrorList } from "../../ErrorList/ErrorList";
 import GasFreeSwapsModal from "../../InformationModals/subcomponents/GasFreeSwapsModal/GasFreeSwapsModal";
 import ProtocolFeeModal from "../../InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import OrderSubmittedScreen from "../../OrderSubmittedScreen/OrderSubmittedScreen";
-import Overlay from "../../Overlay/Overlay";
-import SwapInputs from "../../SwapInputs/SwapInputs";
 import TokenList from "../../TokenList/TokenList";
+import TransactionOverlay from "../../TransactionOverlay/TransactionOverlay";
 import WalletSignScreen from "../../WalletSignScreen/WalletSignScreen";
-import { Container } from "../MakeWidget/MakeWidget.styles";
 import StyledSwapWidget, {
-  ButtonContainer,
   InfoContainer,
   StyledDebugMenu,
+  StyledHeader,
+  StyledActionButtons,
+  StyledSwapInputs,
 } from "./SwapWidget.styles";
 import getTokenPairs from "./helpers/getTokenPairs";
 import useTokenOrFallback from "./hooks/useTokenOrFallback";
-import ActionButtons, {
-  ButtonActions,
-} from "./subcomponents/ActionButtons/ActionButtons";
+import { ButtonActions } from "./subcomponents/ActionButtons/ActionButtons";
 import InfoSection from "./subcomponents/InfoSection/InfoSection";
-import SwapWidgetHeader from "./subcomponents/SwapWidgetHeader/SwapWidgetHeader";
+import QuoteText from "./subcomponents/QuoteText/QuoteText";
 
 export enum SwapWidgetState {
   overview = "overview",
   requestPrices = "requestPrices",
-  review = "review",
 }
 
 const SwapWidget: FC = () => {
@@ -182,21 +180,21 @@ const SwapWidget: FC = () => {
   const swapType = useSwapType(baseTokenInfo, quoteTokenInfo);
   const nativeTokenInfo = useNativeToken(chainId);
   const wrappedNativeTokenInfo = useNativeWrappedToken(chainId);
-  const { hasSufficientAllowance, readableAllowance } = useAllowance(
-    baseTokenInfo,
-    baseAmount
-  );
-  const shouldApprove =
-    !hasSufficientAllowance && swapType !== SwapType.wrapOrUnwrap;
+  const { hasSufficientAllowance } = useAllowance(baseTokenInfo, baseAmount);
+  const isBalanceLoading = useBalanceLoading();
 
   const activeOrderTransaction = useOrderTransaction(
     activeOrderNonce,
     activeWrapOrUnwrapHash
   );
-  const approvalTransaction = useApprovalPending(baseToken);
+  const approvalTransaction = useApprovalPending(baseToken, true);
   const hasApprovalPending = !!approvalTransaction;
   const hasApprovalSuccess = useApprovalSuccess(activeApprovalHash);
-  const hasDepositPending = useDepositPending();
+  const shouldApprove =
+    !hasSufficientAllowance &&
+    !hasApprovalSuccess &&
+    swapType !== SwapType.wrapOrUnwrap;
+  const hasDepositPending = !!useDepositPending();
   const hasWithdrawalPending = useWithdrawalPending();
   const hasDepositOrWithdrawalPending =
     hasDepositPending || hasWithdrawalPending;
@@ -212,6 +210,12 @@ const SwapWidget: FC = () => {
     baseTokenInfo?.address === ADDRESS_ZERO &&
     !!nativeCurrencySafeTransactionFee[baseTokenInfo.chainId];
 
+  useEffect(() => {
+    if (transactionsTabIsOpen) {
+      setShowTokenSelectModalFor(null);
+    }
+  }, [transactionsTabIsOpen]);
+
   useEffect(() => {
     setTokenFrom(appRouteParams.tokenFrom);
     setTokenTo(appRouteParams.tokenTo);
@@ -269,12 +273,6 @@ const SwapWidget: FC = () => {
     }
   }, [hasDepositOrWithdrawalPending]);
 
-  useEffect(() => {
-    if (hasApprovalSuccess && SwapWidgetState.review) {
-      setState(SwapWidgetState.requestPrices);
-    }
-  }, [hasApprovalSuccess]);
-
   useEffect(() => {
     if (approvalTransaction) {
       setActiveApprovalHash(approvalTransaction.hash);
@@ -441,6 +439,7 @@ const SwapWidget: FC = () => {
         break;
 
       case ButtonActions.restart:
+        setTransactionsTabIsOpen(false);
         restart();
         break;
 
@@ -463,7 +462,7 @@ const SwapWidget: FC = () => {
         break;
 
       case ButtonActions.approve:
-        setState(SwapWidgetState.review);
+        approveToken();
         break;
 
       case ButtonActions.takeQuote:
@@ -514,202 +513,187 @@ const SwapWidget: FC = () => {
     setIsApproving(false);
   };
 
-  const handleEditButtonClick = () => {
-    setState(SwapWidgetState.overview);
-  };
-
-  const handleClearServerUrl = () => {
-    dispatch(setCustomServerUrl(null));
-  };
-
   const backToOverview = () => {
     handleActionButtonClick(ButtonActions.restart);
   };
 
-  if (ordersStatus === "signing") {
-    return (
-      <Container>
-        <WalletSignScreen />
-      </Container>
-    );
-  }
-
-  if (activeOrderTransaction) {
-    return (
-      <Container>
-        <OrderSubmittedScreen
-          showTrackTransactionButton={
-            activeOrderTransaction.status ===
-              TransactionStatusType.processing && !transactionsTabIsOpen
-          }
-          chainId={chainId}
-          transaction={activeOrderTransaction}
-          onMakeNewOrderButtonClick={() =>
-            handleActionButtonClick(ButtonActions.restart)
-          }
-          onTrackTransactionButtonClick={() =>
-            handleActionButtonClick(ButtonActions.trackTransaction)
-          }
-        />
-      </Container>
-    );
-  }
-
-  if (state === SwapWidgetState.review && shouldApprove) {
-    return (
-      <Container>
-        <ApproveReview
-          isLoading={hasApprovalPending}
-          amount={baseAmount || "0"}
-          errors={ordersErrors}
-          readableAllowance={readableAllowance}
-          token={baseTokenInfo}
-          wrappedNativeToken={wrappedNativeTokenInfo}
-          onEditButtonClick={handleEditButtonClick}
-          onRestartButtonClick={backToOverview}
-          onSignButtonClick={approveToken}
-        />
-      </Container>
-    );
-  }
-
   return (
     <>
       <StyledSwapWidget>
-        <SwapWidgetHeader
-          isLastLook={quote.bestOrderType === ProtocolIds.LastLookERC20}
-          title={isApproving ? t("orders.approve") : t("common.rfq")}
-          isQuote={!hasSubmittedTransaction}
-          onGasFreeTradeButtonClick={() => setShowGasFeeInfo(true)}
-          expiry={quote.bestOrder?.expiry}
-        />
+        <StyledHeader />
+
         {isDebugMode && <StyledDebugMenu />}
-        {!isApproving && !hasSubmittedTransaction && (
-          <SwapInputs
-            baseAmount={baseAmount}
-            baseTokenInfo={baseTokenInfo}
-            quoteTokenInfo={quoteTokenInfo}
-            side="sell"
-            tradeNotAllowed={!!quote.error}
-            isRequestingQuoteAmount={quote.isLoading}
-            // Note that using the quoteAmount from tradeTerms will stop this
-            // updating when the user clicks the take button.
-            quoteAmount={formattedQuoteAmount}
-            disabled={!isActive || isAllowancesOrBalancesFailed}
-            readOnly={
-              !!quote.bestQuote ||
-              !!quote.error ||
-              isWrapping ||
-              !isActive ||
-              !isNetworkSupported
-            }
-            showMaxButton={showMaxButton}
-            showMaxInfoButton={showMaxInfoButton}
-            maxAmount={maxAmount}
-            onBaseAmountChange={setBaseAmount}
-            onChangeTokenClick={setShowTokenSelectModalFor}
-            onMaxButtonClick={() => setBaseAmount(maxAmount || "0")}
-            onSwitchTokensButtonClick={handleSwitchTokensButtonClick}
-          />
-        )}
-        <InfoContainer>
+
+        <StyledSwapInputs
+          baseAmount={baseAmount}
+          baseTokenInfo={baseTokenInfo}
+          quoteTokenInfo={quoteTokenInfo}
+          side="sell"
+          tradeNotAllowed={!!quote.error}
+          isRequestingQuoteAmount={quote.isLoading}
+          // Note that using the quoteAmount from tradeTerms will stop this
+          // updating when the user clicks the take button.
+          quoteAmount={formattedQuoteAmount}
+          disabled={!isActive || isAllowancesOrBalancesFailed}
+          readOnly={
+            !!quote.bestQuote ||
+            !!quote.error ||
+            isWrapping ||
+            !isActive ||
+            isApproving ||
+            !isNetworkSupported
+          }
+          showMaxButton={showMaxButton}
+          showMaxInfoButton={showMaxInfoButton}
+          maxAmount={maxAmount}
+          onBaseAmountChange={setBaseAmount}
+          onChangeTokenClick={setShowTokenSelectModalFor}
+          onMaxButtonClick={() => setBaseAmount(maxAmount || "0")}
+          onSwitchTokensButtonClick={handleSwitchTokensButtonClick}
+        />
+
+        <InfoContainer hasQuoteText={!!quote.bestOrder}>
           <InfoSection
             failedToFetchAllowances={isAllowancesOrBalancesFailed}
             hasSelectedCustomServer={!!customServerUrl}
-            isApproving={isApproving}
             isConnected={isActive}
             isFetchingOrders={quote.isLoading}
             isNetworkUnsupported={!isNetworkSupported}
-            isWrapping={isWrapping}
-            showViewAllQuotes={indexerOrders.length > 0}
             bestQuote={quote.bestQuote}
             baseTokenInfo={baseTokenInfo}
             baseAmount={baseAmount}
             pricingError={quote.error}
             serverUrl={customServerUrl}
             quoteTokenInfo={quoteTokenInfo}
-            onClearServerUrlButtonClick={handleClearServerUrl}
-            onViewAllQuotesButtonClick={() => toggleShowViewAllQuotes()}
           />
+
+          {quote.bestOrder && (
+            <QuoteText
+              isGasFreeTrade={quote.bestOrderType === ProtocolIds.LastLookERC20}
+              expiry={quote.bestOrder?.expiry}
+              onGasFreeTradeButtonClick={() => setShowGasFeeInfo(true)}
+            />
+          )}
         </InfoContainer>
-        <ButtonContainer>
-          <ActionButtons
-            walletIsActive={isActive}
-            isNetworkUnsupported={!isNetworkSupported}
-            requiresReload={isAllowancesOrBalancesFailed}
-            baseTokenInfo={baseTokenInfo}
-            quoteTokenInfo={quoteTokenInfo}
-            hasAmount={
-              !!baseAmount.length && baseAmount !== "0" && baseAmount !== "."
+
+        <StyledActionButtons
+          hasError={!!quote.error}
+          hasInsufficientAllowance={!!quote.bestQuote && shouldApprove}
+          hasInsufficientBalance={
+            ordersStatus === "idle" && insufficientBalance
+          }
+          hasQuote={!!quote.bestQuote}
+          isBalanceLoading={isBalanceLoading}
+          isLoading={
+            isConnecting ||
+            quote.isLoading ||
+            ordersStatus === "requesting" ||
+            hasSubmittedTransaction
+          }
+          isNotConnected={!isActive}
+          requiresReload={isAllowancesOrBalancesFailed}
+          shouldEnterAmount={
+            !baseAmount.length || baseAmount === "0" || baseAmount === "."
+          }
+          onBackButtonClick={backToOverview}
+          onActionButtonClick={handleActionButtonClick}
+        />
+
+        <ModalOverlay
+          hasDynamicHeight
+          isHidden={!showTokenSelectModalFor}
+          title={t("common.selectToken")}
+          onClose={() => setShowTokenSelectModalFor(null)}
+        >
+          <TokenList
+            onSelectToken={(newTokenAddress) => {
+              // e.g. handleSetToken("base", "0x123")
+              handleSetToken(showTokenSelectModalFor, newTokenAddress);
+              // Close the modal
+              setShowTokenSelectModalFor(null);
+            }}
+            balances={balances}
+            allTokens={allTokens}
+            activeTokens={activeTokens}
+            supportedTokenAddresses={supportedTokens}
+            onAfterRemoveActiveToken={handleRemoveActiveToken}
+          />
+        </ModalOverlay>
+        <ModalOverlay
+          title={t("validatorErrors.unableSwap")}
+          subTitle={t("validatorErrors.swapFail")}
+          onClose={backToOverview}
+          isHidden={!ordersErrors.length}
+        >
+          <ErrorList errors={ordersErrors} onBackButtonClick={backToOverview} />
+        </ModalOverlay>
+        <ModalOverlay
+          title={t("information.gasFreeSwaps.title")}
+          onClose={() => setShowGasFeeInfo(false)}
+          isHidden={!showGasFeeInfo}
+        >
+          <GasFreeSwapsModal
+            onCloseButtonClick={() => setShowGasFeeInfo(false)}
+          />
+        </ModalOverlay>
+        <ModalOverlay
+          title={t("information.protocolFee.title")}
+          onClose={() => setProtocolFeeInfo(false)}
+          isHidden={!protocolFeeInfo}
+        >
+          <ProtocolFeeModal
+            onCloseButtonClick={() => setProtocolFeeInfo(false)}
+          />
+        </ModalOverlay>
+        {baseTokenInfo && quoteTokenInfo && (
+          <ModalOverlay
+            title={t("orders.availableOrders")}
+            isHidden={!showViewAllQuotes}
+            onClose={() => toggleShowViewAllQuotes()}
+          >
+            <AvailableOrdersWidget
+              senderToken={baseTokenInfo}
+              signerToken={quoteTokenInfo}
+              onSwapLinkClick={() => toggleShowViewAllQuotes()}
+            />
+          </ModalOverlay>
+        )}
+
+        <TransactionOverlay isHidden={ordersStatus !== "signing"}>
+          <WalletSignScreen type="approve" />
+        </TransactionOverlay>
+
+        <TransactionOverlay
+          isHidden={ordersStatus === "signing" || !approvalTransaction}
+        >
+          {approvalTransaction && (
+            <ApprovalSubmittedScreen
+              chainId={chainId}
+              transaction={approvalTransaction}
+            />
+          )}
+        </TransactionOverlay>
+
+        <TransactionOverlay
+          isHidden={!activeOrderTransaction && ordersStatus !== "requesting"}
+        >
+          <OrderSubmittedScreen
+            isSendingOrder={ordersStatus === "requesting"}
+            showTrackTransactionButton={
+              activeOrderTransaction?.status ===
+                TransactionStatusType.processing && !transactionsTabIsOpen
             }
-            hasQuote={!!quote.bestQuote}
-            hasSufficientBalance={!insufficientBalance}
-            needsApproval={!!baseToken && shouldApprove}
-            hasError={!!quote.error}
-            onButtonClicked={(action) => handleActionButtonClick(action)}
-            isLoading={
-              isConnecting || quote.isLoading || ordersStatus === "requesting"
+            chainId={chainId}
+            transaction={activeOrderTransaction}
+            onMakeNewOrderButtonClick={() =>
+              handleActionButtonClick(ButtonActions.restart)
+            }
+            onTrackTransactionButtonClick={() =>
+              handleActionButtonClick(ButtonActions.trackTransaction)
             }
           />
-        </ButtonContainer>
+        </TransactionOverlay>
       </StyledSwapWidget>
-      <Overlay
-        onCloseButtonClick={() => setShowTokenSelectModalFor(null)}
-        isHidden={!showTokenSelectModalFor}
-      >
-        <TokenList
-          onSelectToken={(newTokenAddress) => {
-            // e.g. handleSetToken("base", "0x123")
-            handleSetToken(showTokenSelectModalFor, newTokenAddress);
-            // Close the modal
-            setShowTokenSelectModalFor(null);
-          }}
-          balances={balances}
-          allTokens={allTokens}
-          activeTokens={activeTokens}
-          supportedTokenAddresses={supportedTokens}
-          onAfterRemoveActiveToken={handleRemoveActiveToken}
-        />
-      </Overlay>
-      <Overlay
-        title={t("validatorErrors.unableSwap")}
-        subTitle={t("validatorErrors.swapFail")}
-        onCloseButtonClick={backToOverview}
-        isHidden={!ordersErrors.length}
-      >
-        <ErrorList errors={ordersErrors} onBackButtonClick={backToOverview} />
-      </Overlay>
-      <Overlay
-        title={t("information.gasFreeSwaps.title")}
-        onCloseButtonClick={() => setShowGasFeeInfo(false)}
-        isHidden={!showGasFeeInfo}
-      >
-        <GasFreeSwapsModal
-          onCloseButtonClick={() => setShowGasFeeInfo(false)}
-        />
-      </Overlay>
-      <Overlay
-        title={t("information.protocolFee.title")}
-        onCloseButtonClick={() => setProtocolFeeInfo(false)}
-        isHidden={!protocolFeeInfo}
-      >
-        <ProtocolFeeModal
-          onCloseButtonClick={() => setProtocolFeeInfo(false)}
-        />
-      </Overlay>
-      {baseTokenInfo && quoteTokenInfo && (
-        <Overlay
-          title={t("orders.availableOrders")}
-          isHidden={!showViewAllQuotes}
-          onCloseButtonClick={() => toggleShowViewAllQuotes()}
-        >
-          <AvailableOrdersWidget
-            senderToken={baseTokenInfo}
-            signerToken={quoteTokenInfo}
-            onSwapLinkClick={() => toggleShowViewAllQuotes()}
-          />
-        </Overlay>
-      )}
     </>
   );
 };
diff --git a/src/components/@widgets/SwapWidget/helpers/getTokenOrFallback.ts b/src/components/@widgets/SwapWidget/helpers/getTokenOrFallback.ts
index 9020287ee..80a6d1155 100644
--- a/src/components/@widgets/SwapWidget/helpers/getTokenOrFallback.ts
+++ b/src/components/@widgets/SwapWidget/helpers/getTokenOrFallback.ts
@@ -3,11 +3,9 @@ import { UserTokenPair } from "../../../../features/userSettings/userSettingsSli
 export default function getTokenOrFallback(
   token: string | undefined,
   pairedToken: string | undefined,
-  userToken: UserTokenPair["tokenTo"] | UserTokenPair["tokenFrom"],
   pairedUserToken: UserTokenPair["tokenTo"] | UserTokenPair["tokenFrom"],
   defaultTokenAddress: string | null,
-  defaultPairedTokenAddress: string | null,
-  customTokens: string[]
+  defaultPairedTokenAddress: string | null
 ): string | null {
   if (token) {
     return token;
@@ -18,11 +16,6 @@ export default function getTokenOrFallback(
     return null;
   }
 
-  // Else get the user token from store (if it's not a custom token)
-  if (userToken && !customTokens.includes(userToken)) {
-    return userToken;
-  }
-
   // Check if the paired token is not already the default token address
   if (pairedUserToken === defaultTokenAddress) {
     return defaultPairedTokenAddress;
diff --git a/src/components/@widgets/SwapWidget/hooks/useTokenOrFallback.ts b/src/components/@widgets/SwapWidget/hooks/useTokenOrFallback.ts
index 88ba0d496..da1eba2e3 100644
--- a/src/components/@widgets/SwapWidget/hooks/useTokenOrFallback.ts
+++ b/src/components/@widgets/SwapWidget/hooks/useTokenOrFallback.ts
@@ -2,7 +2,6 @@ import { useMemo } from "react";
 
 import { useAppSelector } from "../../../../app/hooks";
 import nativeCurrency from "../../../../constants/nativeCurrency";
-import { selectCustomTokenAddresses } from "../../../../features/metadata/metadataSlice";
 import { selectUserTokens } from "../../../../features/userSettings/userSettingsSlice";
 import useTokenAddress from "../../../../hooks/useTokenAddress";
 import getTokenOrFallback from "../helpers/getTokenOrFallback";
@@ -15,7 +14,6 @@ const useTokenOrFallback = (
   isFrom?: boolean
 ): string | null => {
   const userTokens = useAppSelector(selectUserTokens);
-  const customTokens = useAppSelector(selectCustomTokenAddresses);
   const { chainId } = useAppSelector((state) => state.web3);
 
   const defaultBaseTokenAddress = useTokenAddress("USDT");
@@ -25,11 +23,9 @@ const useTokenOrFallback = (
     return getTokenOrFallback(
       isFrom ? tokenFrom : tokenTo,
       isFrom ? tokenTo : tokenFrom,
-      isFrom ? userTokens.tokenFrom : userTokens.tokenTo,
       isFrom ? userTokens.tokenTo : userTokens.tokenFrom,
       isFrom ? defaultBaseTokenAddress : defaultQuoteTokenAddress,
-      isFrom ? defaultQuoteTokenAddress : defaultBaseTokenAddress,
-      customTokens
+      isFrom ? defaultQuoteTokenAddress : defaultBaseTokenAddress
     );
   }, [
     userTokens,
@@ -38,7 +34,6 @@ const useTokenOrFallback = (
     isFrom,
     defaultBaseTokenAddress,
     defaultQuoteTokenAddress,
-    customTokens,
   ]);
 };
 
diff --git a/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
index 523357574..e3fb932ba 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.styles.tsx
@@ -2,9 +2,17 @@ import styled from "styled-components/macro";
 
 import Button from "../../../../Button/Button";
 
+export const Container = styled.div<{ center?: boolean }>`
+  display: flex;
+  justify-content: ${({ center }) => (center ? "center" : "space-between")};
+  justify-self: flex-end;
+  margin-top: auto;
+`;
+
 export const BackButton = styled(Button)`
-  flex: 1 0 0;
+  width: calc(50% - 0.5rem);
 `;
-export const MainButton = styled(Button)`
-  flex: 2.33333333 0 0;
+
+export const SignButton = styled(Button)<{ isFilled?: boolean }>`
+  ${({ isFilled }) => (isFilled ? `` : `width: calc(50% - 0.5rem);`)};
 `;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.tsx b/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.tsx
index 6d4ac6c22..528efdccc 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/ActionButtons/ActionButtons.tsx
@@ -1,132 +1,166 @@
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { TokenInfo } from "@airswap/utils";
-
-import { MainButton, BackButton } from "./ActionButtons.styles";
+import { BackButton, Container, SignButton } from "./ActionButtons.styles";
 
 export enum ButtonActions {
-  connectWallet,
-  switchNetwork,
-  restart,
-  goBack,
-  approve,
-  reloadPage,
-  requestQuotes,
-  takeQuote,
-  trackTransaction,
+  approve = "approve",
+  connectWallet = "connectWallet",
+  goBack = "goBack",
+  reloadPage = "reloadPage",
+  requestQuotes = "requestQuotes",
+  restart = "restart",
+  switchNetwork = "switchNetwork",
+  takeQuote = "takeQuote",
+  trackTransaction = "trackTransaction",
 }
 
-const buttonTextMapping: Record<ButtonActions, string> = {
-  [ButtonActions.connectWallet]: "wallet.connectWallet",
-  [ButtonActions.switchNetwork]: "wallet.switchNetwork",
-  [ButtonActions.reloadPage]: "common.reloadPage",
-  [ButtonActions.restart]: "orders.makeNewSwap",
-  [ButtonActions.goBack]: "common.back",
-  [ButtonActions.approve]: "orders.approve",
-  [ButtonActions.requestQuotes]: "orders.continue",
-  [ButtonActions.takeQuote]: "orders.takeQuote",
-  [ButtonActions.trackTransaction]: "orders.track",
-};
-
-/**
- * This can either be:
- *  - Connect wallet button (Wallet not connected, OR isConnecting [loading])
- *  - Invisible (approving and swapping - TBD - could be overlay)
- *  - Back button (pair unavailable)
- *  - New swap button (to restart after order has been submitted)
- *  - "Back" and "Complete Swap" buttons (when ready to go)
- *  - "Back" and "Approve" buttons
- *  - A disabled button containing reason text (enter an amount, token info
- *    not found, or insufficient balance)
- *  - A continue button to request quotes
- */
-const ActionButtons: FC<{
-  walletIsActive: boolean;
-  isNetworkUnsupported: boolean;
-  requiresReload: boolean;
-  hasError: boolean;
+type ActionButtonsProps = {
+  hasInsufficientAllowance: boolean;
+  hasInsufficientBalance: boolean;
   hasQuote: boolean;
-  needsApproval: boolean;
-  hasAmount: boolean;
-  baseTokenInfo: TokenInfo | null;
-  quoteTokenInfo: TokenInfo | null;
-  hasSufficientBalance: boolean;
+  hasError: boolean;
+  isBalanceLoading: boolean;
   isLoading: boolean;
-  onButtonClicked: (action: ButtonActions) => void;
-}> = ({
-  walletIsActive,
-  isNetworkUnsupported,
-  requiresReload,
-  hasError,
+  isNotConnected: boolean;
+  requiresReload: boolean;
+  shouldEnterAmount: boolean;
+  onBackButtonClick: () => void;
+  onActionButtonClick: (action: ButtonActions) => void;
+  className?: string;
+};
+
+const ActionButtons: FC<ActionButtonsProps> = ({
+  hasInsufficientAllowance,
+  hasInsufficientBalance,
   hasQuote,
-  needsApproval,
-  hasAmount,
-  baseTokenInfo,
-  quoteTokenInfo,
-  hasSufficientBalance,
+  hasError,
+  isBalanceLoading,
   isLoading,
-  onButtonClicked,
+  isNotConnected,
+  requiresReload,
+  shouldEnterAmount,
+  onBackButtonClick,
+  onActionButtonClick,
+  className,
 }) => {
   const { t } = useTranslation();
 
-  // First determine the next action.
-  let nextAction: ButtonActions;
-  // Note that wallet is not considered "active" if connected to wrong network
-  if (!walletIsActive) nextAction = ButtonActions.connectWallet;
-  else if (isNetworkUnsupported) nextAction = ButtonActions.switchNetwork;
-  else if (hasError) nextAction = ButtonActions.goBack;
-  else if (requiresReload) nextAction = ButtonActions.reloadPage;
-  else if (hasQuote && needsApproval) nextAction = ButtonActions.approve;
-  else if (hasQuote) nextAction = ButtonActions.takeQuote;
-  else nextAction = ButtonActions.requestQuotes;
+  const handleBackButtonClick = () => {
+    onActionButtonClick(ButtonActions.goBack);
+  };
 
-  // If there's something to fix before progress can be made, the button will
-  // be disabled. These disabled states never have a back button.
-  let isDisabled =
-    walletIsActive &&
-    !requiresReload &&
-    !isNetworkUnsupported &&
-    (!hasSufficientBalance || !baseTokenInfo || !quoteTokenInfo || !hasAmount);
+  if (isBalanceLoading) {
+    return (
+      <Container center className={className}>
+        <SignButton disabled intent="primary" loading />
+      </Container>
+    );
+  }
 
-  // Some actions require an additional back button
-  const hasBackButton: boolean =
-    !isDisabled &&
-    (nextAction === ButtonActions.takeQuote ||
-      nextAction === ButtonActions.approve);
+  if (isNotConnected) {
+    return (
+      <Container center className={className}>
+        <SignButton
+          isFilled
+          intent="primary"
+          disabled={isLoading}
+          onClick={() => onActionButtonClick(ButtonActions.connectWallet)}
+        >
+          {t("wallet.connectWallet")}
+        </SignButton>
+      </Container>
+    );
+  }
 
-  // The text depends on the next action, unless the button is disabled, when
-  // it depends on the reason for being disabled instead.
-  let mainButtonText;
-  if (isDisabled) {
-    if (!hasAmount) mainButtonText = t("orders.enterAmount");
-    else if (!baseTokenInfo || !quoteTokenInfo)
-      mainButtonText = t("orders.chooseToken");
-    else if (!hasSufficientBalance)
-      mainButtonText = t("orders.insufficientBalance", {
-        symbol: baseTokenInfo.symbol,
-      });
-  } else {
-    // @ts-ignore dynamic translation key.
-    mainButtonText = t(buttonTextMapping[nextAction]);
+  if (requiresReload) {
+    return (
+      <Container className={className}>
+        <SignButton
+          intent="primary"
+          disabled={isLoading}
+          onClick={() => onActionButtonClick(ButtonActions.reloadPage)}
+        >
+          {t("common.reloadPage")}
+        </SignButton>
+      </Container>
+    );
   }
 
-  return (
-    <>
-      {hasBackButton && (
-        <BackButton onClick={onButtonClicked.bind(null, ButtonActions.goBack)}>
+  if (hasError) {
+    return (
+      <Container center className={className}>
+        <BackButton onClick={handleBackButtonClick}>
           {t("common.back")}
         </BackButton>
-      )}
-      <MainButton
-        intent={nextAction === ButtonActions.goBack ? "neutral" : "primary"}
-        loading={isLoading}
-        disabled={isDisabled}
-        onClick={onButtonClicked.bind(null, nextAction)}
+      </Container>
+    );
+  }
+
+  if (shouldEnterAmount) {
+    return (
+      <Container center className={className}>
+        <SignButton disabled intent="primary" isFilled={true}>
+          {t("orders.enterAmount")}
+        </SignButton>
+      </Container>
+    );
+  }
+
+  if (hasInsufficientBalance) {
+    return (
+      <Container center className={className}>
+        <SignButton disabled intent="neutral" isFilled={true}>
+          {t("orders.insufficientBalance")}
+        </SignButton>
+      </Container>
+    );
+  }
+
+  if (hasInsufficientAllowance) {
+    return (
+      <Container className={className}>
+        <BackButton onClick={handleBackButtonClick}>
+          {t("common.back")}
+        </BackButton>
+        <SignButton
+          intent="primary"
+          disabled={isLoading}
+          onClick={() => onActionButtonClick(ButtonActions.approve)}
+        >
+          {t("orders.approve")}
+        </SignButton>
+      </Container>
+    );
+  }
+
+  if (hasQuote) {
+    return (
+      <Container className={className}>
+        <BackButton onClick={handleBackButtonClick}>
+          {t("common.back")}
+        </BackButton>
+        <SignButton
+          intent="primary"
+          disabled={isLoading}
+          onClick={() => onActionButtonClick(ButtonActions.takeQuote)}
+        >
+          {t("orders.takeQuote")}
+        </SignButton>
+      </Container>
+    );
+  }
+
+  return (
+    <Container center className={className}>
+      <SignButton
+        intent="primary"
+        disabled={isLoading}
+        onClick={() => onActionButtonClick(ButtonActions.requestQuotes)}
       >
-        {mainButtonText}
-      </MainButton>
-    </>
+        {t("orders.continue")}
+      </SignButton>
+    </Container>
   );
 };
 
diff --git a/src/components/@widgets/SwapWidget/subcomponents/DebugMenu/DebugMenu.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/DebugMenu/DebugMenu.styles.tsx
index ec6c9412d..dd15e0b75 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/DebugMenu/DebugMenu.styles.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/DebugMenu/DebugMenu.styles.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components/macro";
 
 import CloseButton from "../../../../../styled-components/CloseButton/CloseButton";
 import Checkbox from "../../../../Checkbox/Checkbox";
+import { StyledIcon } from "../../../../Icon/Icon.styles";
 
 export const Container = styled.div`
   position: relative;
@@ -17,4 +18,11 @@ export const StyledCloseButton = styled(CloseButton)`
   position: absolute;
   top: 0;
   right: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+
+  ${StyledIcon} svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 `;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.styles.tsx
deleted file mode 100644
index 4c29fcc08..000000000
--- a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.styles.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { MdDoneAll } from "react-icons/md";
-
-import styled from "styled-components/macro";
-
-import { BorderlessButtonStyle } from "../../../../../style/mixins";
-import { LargePillButton } from "../../../../../styled-components/Pill/Pill";
-import IconButton from "../../../../IconButton/IconButton";
-import TransactionLink from "../../../../TransactionLink/TransactionLink";
-import { InfoHeading, InfoSubHeading } from "../../../../Typography/Typography";
-import { StyledParagraph } from "../../../../Typography/Typography.styles";
-
-export const StyledInfoHeading = styled(InfoHeading)`
-  display: flex;
-  align-items: center;
-
-  & + ${InfoSubHeading} {
-    margin-top: 0.25rem;
-  }
-`;
-
-export const FeeTextContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const FeeText = styled(StyledParagraph)`
-  color: ${(props) => props.theme.colors.lightGrey};
-`;
-
-export const ApprovalText = styled(InfoSubHeading)`
-  font-size: 1rem;
-`;
-
-export const InfoButton = styled(IconButton)`
-  display: inline-block;
-  padding: 0.25rem;
-  color: ${(props) => props.theme.colors.lightGrey};
-
-  &:hover,
-  &:focus {
-    color: ${(props) => props.theme.colors.white};
-  }
-`;
-
-export const RevertPriceButton = styled(IconButton)`
-  transform: rotate(90deg);
-  position: relative;
-  margin-left: 0.25rem;
-  padding: 0.25rem;
-  font-size: 1rem;
-  color: ${(props) => props.theme.colors.white};
-
-  &:hover,
-  &:focus {
-    color: ${(props) => props.theme.colors.white};
-  }
-
-  ${BorderlessButtonStyle}
-`;
-
-export const StyledLargePillButton = styled(LargePillButton)`
-  margin-top: 1rem;
-`;
-
-export const DoneAllIcon = styled(MdDoneAll)`
-  font-size: 8rem;
-  margin: 0 auto 2rem;
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
-`;
-
-export const StyledTransactionLink = styled(TransactionLink)`
-  margin-top: 0.5rem;
-`;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx b/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx
index 542618b14..7333cd44f 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/InfoSection/InfoSection.tsx
@@ -1,204 +1,107 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { TokenInfo } from "@airswap/utils";
 
 import { BigNumber } from "bignumber.js";
 
-import { SubmittedTransaction } from "../../../../../entities/SubmittedTransaction/SubmittedTransaction";
 import { PricingErrorType } from "../../../../../errors/pricingError";
-import stringToSignificantDecimals from "../../../../../helpers/stringToSignificantDecimals";
-import Icon from "../../../../Icon/Icon";
-import { InfoSubHeading } from "../../../../Typography/Typography";
-import ClearServerButton from "../ClearServerButton/ClearServerButton";
+import { InfoSectionHeading } from "../../../../../styled-components/InfoSection/InfoSection";
+import { PriceConverter } from "../../../../PriceConverter/PriceConverter";
 import PricingErrorInfo from "../PricingErrorInfo/PricingErrorInfo";
-import pricingErrorInfo from "../PricingErrorInfo/PricingErrorInfo";
-import {
-  DoneAllIcon,
-  RevertPriceButton,
-  StyledInfoHeading,
-  StyledLargePillButton,
-  StyledTransactionLink,
-} from "./InfoSection.styles";
 
 export type InfoSectionProps = {
   failedToFetchAllowances: boolean;
   hasSelectedCustomServer: boolean;
-  isApproving: boolean;
   isConnected: boolean;
   isFetchingOrders: boolean;
   isNetworkUnsupported: boolean;
-  isWrapping: boolean;
-  showViewAllQuotes: boolean;
-  bestQuote?: string;
   pricingError?: PricingErrorType;
   quoteTokenInfo: TokenInfo | null;
   baseTokenInfo: TokenInfo | null;
   baseAmount: string;
+  bestQuote?: string;
   serverUrl: string | null;
-  onClearServerUrlButtonClick: () => void;
-  onViewAllQuotesButtonClick: () => void;
+  // TODO: Enable these once we reinstate these features
+  // showViewAllQuotes: boolean;
+  // onClearServerUrlButtonClick: () => void;
+  // onViewAllQuotesButtonClick: () => void;
 };
 
 const InfoSection: FC<InfoSectionProps> = ({
   failedToFetchAllowances,
   hasSelectedCustomServer,
-  isApproving,
   isConnected,
   isFetchingOrders,
   isNetworkUnsupported,
-  isWrapping,
-  showViewAllQuotes,
-  bestQuote,
+  pricingError,
   baseTokenInfo,
   baseAmount,
-  pricingError,
+  bestQuote,
   quoteTokenInfo,
   serverUrl,
-  onClearServerUrlButtonClick,
-  onViewAllQuotesButtonClick,
 }) => {
   const { t } = useTranslation();
-  const [invertPrice, setInvertPrice] = useState<boolean>(false);
 
-  // Wallet not connected.
   if (!isConnected) {
     return (
-      <>
-        <StyledInfoHeading>{t("marketing.welcomeHeading")}</StyledInfoHeading>
-        <InfoSubHeading>{t("marketing.welcomeMessage")}</InfoSubHeading>
-      </>
+      <InfoSectionHeading>{t("marketing.welcomeMessage")}</InfoSectionHeading>
     );
   }
 
   if (isNetworkUnsupported) {
     return (
-      <StyledInfoHeading>{t("wallet.unsupportedNetwork")}</StyledInfoHeading>
+      <InfoSectionHeading>{t("wallet.unsupportedNetwork")}</InfoSectionHeading>
     );
   }
 
   if (failedToFetchAllowances) {
     return (
-      <>
-        <StyledInfoHeading>
-          {t("balances.failedToFetchAllowances")}
-        </StyledInfoHeading>
-        <InfoSubHeading>
-          {t("balances.failedToFetchAllowancesCta")}
-        </InfoSubHeading>
-      </>
+      <InfoSectionHeading>
+        {t("balances.failedToFetchAllowances")}
+      </InfoSectionHeading>
     );
   }
 
-  if (isConnected && failedToFetchAllowances && (!!bestQuote || isWrapping)) {
+  if (isConnected && failedToFetchAllowances && !!bestQuote) {
     return (
-      <>
-        <StyledInfoHeading>
-          {t("balances.failedToFetchAllowances")}
-        </StyledInfoHeading>
-        <InfoSubHeading>
-          {t("balances.failedToFetchAllowancesCta")}
-        </InfoSubHeading>
-      </>
+      <InfoSectionHeading>
+        {t("balances.failedToFetchAllowances")}
+      </InfoSectionHeading>
     );
   }
 
   if (isFetchingOrders) {
     return (
-      <>
-        <StyledInfoHeading>{t("orders.findingBestPrice")}</StyledInfoHeading>
-        <InfoSubHeading>{t("orders.scanningPeers")}</InfoSubHeading>
-      </>
+      <InfoSectionHeading>{t("orders.findingBestPrice")}</InfoSectionHeading>
     );
   }
 
   if (pricingError) {
-    return (
-      <>
-        <PricingErrorInfo pricingError={pricingError} />
-        {showViewAllQuotes && (
-          <StyledLargePillButton onClick={onViewAllQuotesButtonClick}>
-            {t("orders.viewAllQuotes")}
-            <Icon name="chevron-down" />
-          </StyledLargePillButton>
-        )}
-      </>
-    );
-  }
-
-  if (isApproving) {
-    return (
-      <>
-        <StyledInfoHeading>
-          {t("orders.approvePending", { symbol: baseTokenInfo!.symbol })}
-        </StyledInfoHeading>
-        <InfoSubHeading>{t("orders.approveMessage")}</InfoSubHeading>
-      </>
-    );
-  }
-
-  if (isWrapping) {
-    return (
-      <>
-        <StyledInfoHeading>
-          1 {invertPrice ? quoteTokenInfo!.symbol : baseTokenInfo!.symbol} = 1{" "}
-          {invertPrice ? baseTokenInfo!.symbol : quoteTokenInfo!.symbol}
-        </StyledInfoHeading>
-        <InfoSubHeading>{t("orders.wrapMessage")}</InfoSubHeading>
-      </>
-    );
+    return <PricingErrorInfo pricingError={pricingError} />;
   }
 
   if (bestQuote) {
     let price = new BigNumber(bestQuote).dividedBy(baseAmount);
 
-    if (invertPrice) {
-      price = new BigNumber(1).dividedBy(price);
-    }
-
     return (
-      <>
-        <>
-          <StyledInfoHeading>
-            1 {invertPrice ? quoteTokenInfo!.symbol : baseTokenInfo!.symbol} ={" "}
-            {stringToSignificantDecimals(price.toString())}{" "}
-            {invertPrice ? baseTokenInfo!.symbol : quoteTokenInfo!.symbol}
-            <RevertPriceButton
-              icon="swap"
-              ariaLabel={t("orders.revertPrice")}
-              iconSize={1}
-              onClick={() => setInvertPrice((p) => !p)}
-            />
-          </StyledInfoHeading>
-        </>
-        {showViewAllQuotes && (
-          <StyledLargePillButton onClick={onViewAllQuotesButtonClick}>
-            {t("orders.viewAllQuotes")}
-            <Icon name="chevron-down" />
-          </StyledLargePillButton>
-        )}
-      </>
+      <PriceConverter
+        baseTokenSymbol={baseTokenInfo!.symbol}
+        price={price}
+        quoteTokenSymbol={quoteTokenInfo!.symbol}
+      />
     );
   }
 
   if (hasSelectedCustomServer) {
     return (
-      <>
-        <StyledInfoHeading>
-          {t("orders.selectedServer", { serverUrl })}
-        </StyledInfoHeading>
-        <ClearServerButton onClick={onClearServerUrlButtonClick} />
-      </>
+      <InfoSectionHeading>
+        {t("orders.selectedServer", { serverUrl })}
+      </InfoSectionHeading>
     );
   }
 
-  // No order & not fetching, but wallet connected.
-  return (
-    <>
-      <StyledInfoHeading>{t("marketing.welcomeHeading")}</StyledInfoHeading>
-      <InfoSubHeading>{t("marketing.welcomeMessage")}</InfoSubHeading>
-    </>
-  );
+  return <InfoSectionHeading>{t("orders.getAPrice")}</InfoSectionHeading>;
 };
 
 export default InfoSection;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/PricingErrorInfo/PricingErrorInfo.tsx b/src/components/@widgets/SwapWidget/subcomponents/PricingErrorInfo/PricingErrorInfo.tsx
index a2d9c56bc..fc2bb9304 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/PricingErrorInfo/PricingErrorInfo.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/PricingErrorInfo/PricingErrorInfo.tsx
@@ -2,8 +2,7 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { PricingErrorType } from "../../../../../errors/pricingError";
-import { InfoSubHeading } from "../../../../Typography/Typography";
-import { StyledInfoHeading } from "../InfoSection/InfoSection.styles";
+import { InfoSectionHeading } from "../../../../../styled-components/InfoSection/InfoSection";
 
 export type PricingErrorInfoProps = {
   pricingError: PricingErrorType;
@@ -15,10 +14,9 @@ const PricingErrorInfo: FC<PricingErrorInfoProps> = ({ pricingError }) => {
   if (pricingError === PricingErrorType.belowMinimumAmount) {
     return (
       <>
-        <StyledInfoHeading>
+        <InfoSectionHeading>
           Requested price under minimum amount
-        </StyledInfoHeading>
-        <InfoSubHeading>Retry order with higher price</InfoSubHeading>
+        </InfoSectionHeading>
       </>
     );
   }
@@ -26,16 +24,16 @@ const PricingErrorInfo: FC<PricingErrorInfoProps> = ({ pricingError }) => {
   if (pricingError === PricingErrorType.noServersFound) {
     return (
       <>
-        <StyledInfoHeading>No servers found at this time</StyledInfoHeading>
-        <InfoSubHeading>Please retry later</InfoSubHeading>
+        <InfoSectionHeading>{t("orders.noValidResponses")}</InfoSectionHeading>
       </>
     );
   }
 
   return (
     <>
-      <StyledInfoHeading>{t("orders.tokenPairUnavailable")}</StyledInfoHeading>
-      <InfoSubHeading>{t("orders.retryOrCancel")}</InfoSubHeading>
+      <InfoSectionHeading>
+        {t("orders.tokenPairUnavailable")}
+      </InfoSectionHeading>
     </>
   );
 };
diff --git a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx
new file mode 100644
index 000000000..3b00f7f27
--- /dev/null
+++ b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.styles.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+import { fontLoos } from "../../../../../style/themes";
+import Timer from "../../../../Timer/Timer";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: ${(props) => props.theme.colors.lightGrey};
+`;
+
+export const GasFreeButton = styled.button`
+  color: ${(props) => props.theme.colors.lightGrey};
+  text-transform: uppercase;
+
+  &:hover,
+  &:focus {
+    color: ${(props) => props.theme.colors.white};
+  }
+`;
+
+export const StyledTimer = styled(Timer)`
+  min-width: 2.125rem;
+  text-align: left;
+  font-family: ${fontLoos};
+  color: ${(props) => props.theme.colors.white};
+`;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx
new file mode 100644
index 000000000..05df269e1
--- /dev/null
+++ b/src/components/@widgets/SwapWidget/subcomponents/QuoteText/QuoteText.tsx
@@ -0,0 +1,45 @@
+import { FC, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { getOrderExpiryWithBufferInSeconds } from "../../../../../entities/OrderERC20/OrderERC20Helpers";
+import { InfoSectionHeading } from "../../../../../styled-components/InfoSection/InfoSection";
+import { Container, GasFreeButton, StyledTimer } from "./QuoteText.styles";
+
+interface QuoteTextProps {
+  isGasFreeTrade: boolean;
+  expiry?: string;
+  onGasFreeTradeButtonClick: () => void;
+  className?: string;
+}
+
+const QuoteText: FC<QuoteTextProps> = ({
+  isGasFreeTrade,
+  expiry,
+  onGasFreeTradeButtonClick,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  const expiryTime = useMemo(() => {
+    return expiry ? getOrderExpiryWithBufferInSeconds(expiry) : undefined;
+  }, [expiry]);
+
+  if (isGasFreeTrade) {
+    return (
+      <Container className={className}>
+        <GasFreeButton onClick={onGasFreeTradeButtonClick}>
+          {t("orders.gasFreeTrade")} ♻️
+        </GasFreeButton>
+      </Container>
+    );
+  }
+
+  return (
+    <Container className={className}>
+      <InfoSectionHeading>{t("orders.newQuoteIn")}:</InfoSectionHeading>
+      {expiryTime && <StyledTimer expiryTime={expiryTime} />}
+    </Container>
+  );
+};
+
+export default QuoteText;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.styles.tsx
new file mode 100644
index 000000000..d591fb128
--- /dev/null
+++ b/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.styles.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+import { InfoSectionHeading } from "../../../../../styled-components/InfoSection/InfoSection";
+import OrderStatusInfo from "../../../OrderDetailWidget/subcomponents/OrderStatusInfo/OrderStatusInfo";
+
+export const Container = styled(InfoSectionHeading)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  height: 3rem;
+  border: 1px solid ${({ theme }) => theme.colors.borderGrey};
+  border-radius: 0.5rem;
+  padding-inline: 1rem;
+  font-weight: 500;
+  background-color: ${({ theme }) => theme.colors.darkGrey};
+`;
+
+export const StyledInfoSectionHeading = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+`;
+
+export const Recipient = styled.span`
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+export const StyledOrderStatusInfo = styled(OrderStatusInfo)``;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.tsx b/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.tsx
new file mode 100644
index 000000000..41372aa59
--- /dev/null
+++ b/src/components/@widgets/SwapWidget/subcomponents/RecipientAndStatus/RecipientAndStatus.tsx
@@ -0,0 +1,55 @@
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ADDRESS_ZERO } from "@airswap/utils";
+
+import truncateEthAddress from "truncate-eth-address";
+
+import { OrderStatus } from "../../../../../types/orderStatus";
+import { OrderType } from "../../../../../types/orderTypes";
+import OrderRecipientInfo from "../../../OrderDetailWidget/subcomponents/OrderRecipientInfo/OrderRecipientInfo";
+import {
+  Container,
+  Recipient,
+  StyledInfoSectionHeading,
+  StyledOrderStatusInfo,
+} from "./RecipientAndStatus.styles";
+
+interface RecipientAndStatusProps {
+  isLoading?: boolean;
+  expiry: Date;
+  link?: string;
+  orderType: OrderType;
+  recipient?: string;
+  status: OrderStatus;
+  userAddress?: string;
+  className?: string;
+}
+
+export const RecipientAndStatus: FC<RecipientAndStatusProps> = ({
+  isLoading = false,
+  expiry,
+  link,
+  recipient,
+  status,
+  orderType,
+  userAddress,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      <OrderRecipientInfo
+        orderType={orderType}
+        recipientAddress={recipient}
+        userAddress={userAddress}
+      />
+
+      <StyledOrderStatusInfo
+        isLoading={isLoading}
+        expiry={expiry}
+        link={link}
+        status={status}
+      />
+    </Container>
+  );
+};
diff --git a/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.styles.tsx b/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.styles.tsx
deleted file mode 100644
index e2cdb9b13..000000000
--- a/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.styles.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-import { InputOrButtonBorderStyleType2 } from "../../../../../style/mixins";
-import Icon from "../../../../Icon/Icon";
-import Timer from "../../../../Timer/Timer";
-
-export const PillStyle = css`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 1rem;
-  height: 2rem;
-  border-radius: 1rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-`;
-
-export const Button = styled.button`
-  ${PillStyle}
-  ${InputOrButtonBorderStyleType2}
-
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
-`;
-
-export const Quote = styled.span`
-  ${PillStyle};
-  border: 1px solid ${(props) => props.theme.colors.borderGrey};
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
-`;
-
-export const NewQuoteText = styled.span`
-  margin-right: 0.3125rem;
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.lightGrey : theme.colors.primary};
-`;
-
-export const StyledIcon = styled(Icon)`
-  margin-right: 0.375rem;
-`;
-
-export const StyledTimer = styled(Timer)`
-  margin-top: 0.125rem;
-  font-size: 0.6875rem;
-`;
diff --git a/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.tsx b/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.tsx
index c78e7e786..a4501878d 100644
--- a/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.tsx
+++ b/src/components/@widgets/SwapWidget/subcomponents/SwapWidgetHeader/SwapWidgetHeader.tsx
@@ -1,57 +1,21 @@
-import { FC, useMemo } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { getOrderExpiryWithBufferInSeconds } from "../../../../../entities/OrderERC20/OrderERC20Helpers";
 import { WidgetHeader } from "../../../../../styled-components/WidgetHeader/WidgetHeader";
 import { Title } from "../../../../Typography/Typography";
-import {
-  Button,
-  NewQuoteText,
-  Quote,
-  StyledIcon,
-  StyledTimer,
-} from "./SwapWidgetHeader.styles";
 
 interface SwapWidgetHeaderProps {
-  isLastLook: boolean;
-  title: string;
-  isQuote: boolean;
-  onGasFreeTradeButtonClick: () => void;
-  expiry?: string;
+  className?: string;
 }
 
-const SwapWidgetHeader: FC<SwapWidgetHeaderProps> = ({
-  isLastLook,
-  title,
-  isQuote,
-  onGasFreeTradeButtonClick,
-  expiry,
-}) => {
+const SwapWidgetHeader: FC<SwapWidgetHeaderProps> = ({ className }) => {
   const { t } = useTranslation();
 
-  const expiryTime = useMemo(() => {
-    return expiry ? getOrderExpiryWithBufferInSeconds(expiry) : undefined;
-  }, [expiry]);
-
   return (
-    <WidgetHeader>
+    <WidgetHeader className={className}>
       <Title type="h2" as="h1">
-        {title}
+        {t("common.rfq")}
       </Title>
-
-      {isLastLook && isQuote && (
-        <Button onClick={onGasFreeTradeButtonClick}>
-          <StyledIcon name="star" iconSize={0.875} />
-          {t("orders.gasFreeTrade")}
-        </Button>
-      )}
-
-      {!isLastLook && isQuote && expiryTime && (
-        <Quote>
-          <NewQuoteText>{t("orders.newQuoteIn")}</NewQuoteText>
-          {expiryTime && <StyledTimer expiryTime={expiryTime} />}
-        </Quote>
-      )}
     </WidgetHeader>
   );
 };
diff --git a/src/components/@widgets/WalletConnector/WalletConnector.tsx b/src/components/@widgets/WalletConnector/WalletConnector.tsx
index 3e6b393db..4fbd21f3d 100644
--- a/src/components/@widgets/WalletConnector/WalletConnector.tsx
+++ b/src/components/@widgets/WalletConnector/WalletConnector.tsx
@@ -18,7 +18,7 @@ import {
 import { buildGnosisSafeConnector } from "../../../web3-connectors/gnosis";
 import { tryActivateConnector } from "../../../web3-connectors/helpers";
 import { WalletProvider } from "../../../web3-connectors/walletProviders";
-import Overlay from "../../Overlay/Overlay";
+import ModalOverlay from "../../ModalOverlay/ModalOverlay";
 import { StyledWalletProviderList } from "../SwapWidget/SwapWidget.styles";
 
 interface WalletConnectorProps {
@@ -126,17 +126,17 @@ const WalletConnector: FC<WalletConnectorProps> = ({ className }) => {
   );
 
   return (
-    <Overlay
+    <ModalOverlay
       isHidden={!showWalletList}
       title={t("wallet.selectWallet")}
-      onCloseButtonClick={handleCloseButtonClick}
+      onClose={handleCloseButtonClick}
       className={className}
     >
       <StyledWalletProviderList
         onClose={handleCloseButtonClick}
         onWalletProviderButtonClick={handleWalletProviderButtonClick}
       />
-    </Overlay>
+    </ModalOverlay>
   );
 };
 
diff --git a/src/components/AccountLink/AccountLink.tsx b/src/components/AccountLink/AccountLink.tsx
index 19373f5d2..b63db2a54 100644
--- a/src/components/AccountLink/AccountLink.tsx
+++ b/src/components/AccountLink/AccountLink.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { useTranslation } from "react-i18next";
 
 import { getAccountUrl } from "@airswap/utils";
@@ -6,21 +6,23 @@ import { getAccountUrl } from "@airswap/utils";
 import Icon from "../Icon/Icon";
 import { Link } from "./AccountLink.style";
 
-type AccountLinkProps = {
+interface AccountLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   chainId: number;
   address: string;
   className?: string;
-};
+}
 
 const AccountLink = ({
   chainId,
   address,
   className = "",
+  ...props
 }: AccountLinkProps) => {
   const { t } = useTranslation();
 
   return (
     <Link
+      {...props}
       className={className}
       target="_blank"
       rel="noreferrer"
diff --git a/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx
new file mode 100644
index 000000000..8bd0a35db
--- /dev/null
+++ b/src/components/ApprovalSubmittedScreen/ApprovalSubmittedScreen.tsx
@@ -0,0 +1,67 @@
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { SubmittedApprovalTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import useDebounce from "../../hooks/useDebounce";
+import {
+  OverlayContainer,
+  OverlaySubHeading,
+  OverlayTitle,
+  OverlayTransactionLink,
+} from "../../styled-components/Overlay/Overlay";
+import { TransactionStatusType } from "../../types/transactionTypes";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
+
+interface ApprovalSubmittedScreenProps {
+  chainId?: number;
+  transaction?: SubmittedApprovalTransaction;
+  className?: string;
+}
+
+const ApprovalSubmittedScreen: FC<ApprovalSubmittedScreenProps> = ({
+  chainId,
+  transaction,
+  className = "",
+}) => {
+  const { t } = useTranslation();
+  const [isAnimatedToCenter, setIsAnimatedToCenter] = useState(false);
+
+  const isSucceeded = transaction?.status === TransactionStatusType.succeeded;
+
+  useDebounce(
+    () => {
+      if (isSucceeded) {
+        setIsAnimatedToCenter(true);
+      }
+    },
+    500,
+    [isSucceeded]
+  );
+
+  return (
+    <OverlayContainer
+      className={className}
+      style={{
+        transform: isAnimatedToCenter ? "translateY(2.5rem)" : "translateY(0)",
+      }}
+    >
+      <OverlayLoader isSucceeded={isSucceeded} />
+      <OverlayTitle type="h2">
+        {isSucceeded
+          ? t("orders.approvalComplete")
+          : t("orders.approvalProcessing")}
+      </OverlayTitle>
+      <OverlaySubHeading isHidden={isSucceeded}>
+        {transaction?.hash && chainId && (
+          <OverlayTransactionLink
+            isHidden={isSucceeded}
+            chainId={chainId}
+            hash={transaction.hash}
+          />
+        )}
+      </OverlaySubHeading>
+    </OverlayContainer>
+  );
+};
+
+export default ApprovalSubmittedScreen;
diff --git a/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx b/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx
index 1bf926f79..797220f21 100644
--- a/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx
+++ b/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx
@@ -46,6 +46,10 @@ const AvailableOrdersWidget = ({
   const sortedOrders = useMemo(() => {
     const ordersToSort: (FullOrderERC20 | OrderERC20)[] = [...orders];
 
+    if (!bestRfqOrder) {
+      return ordersToSort;
+    }
+
     if (
       bestRfqOrder.senderToken === senderToken.address &&
       bestRfqOrder.signerToken === signerToken.address
@@ -124,7 +128,7 @@ const AvailableOrdersWidget = ({
         onFullOrderLinkClick={onFullOrderLinkClick}
       />
       <ActionButton
-        title={t("orders.makeNewOrder")}
+        title={t("orders.makeAnOrder")}
         onClick={handleCreateSwapClick}
       />
     </Container>
diff --git a/src/components/AvailableOrdersWidget/subcomponents/Order/Order.tsx b/src/components/AvailableOrdersWidget/subcomponents/Order/Order.tsx
index eb84a1d8b..6ba230089 100644
--- a/src/components/AvailableOrdersWidget/subcomponents/Order/Order.tsx
+++ b/src/components/AvailableOrdersWidget/subcomponents/Order/Order.tsx
@@ -71,7 +71,6 @@ const Order: FC<PropsWithChildren<OrderProps>> = ({
     if (isFullOrder(order)) {
       history.push({
         pathname: `/order/${compressFullOrderERC20(order)}`,
-        state: { isFromAvailableOrdersWidget: true },
       });
       onFullOrderLinkClick?.();
     } else {
diff --git a/src/components/Button/Button.styles.tsx b/src/components/Button/Button.styles.tsx
index 9ff49f508..bbeb16c2a 100644
--- a/src/components/Button/Button.styles.tsx
+++ b/src/components/Button/Button.styles.tsx
@@ -1,5 +1,7 @@
 import styled, { css, DefaultTheme } from "styled-components/macro";
 
+import breakPoints from "../../style/breakpoints";
+import { fontWide } from "../../style/themes";
 import Icon from "../Icon/Icon";
 import { ButtonIntent, ButtonJustifyContent } from "./Button";
 
@@ -13,7 +15,7 @@ function getButtonBackground(
     case "positive":
       return theme.colors.green;
     case "neutral":
-      return theme.colors.black;
+      return theme.colors.darkBlue;
     default:
       return theme.colors.primary;
   }
@@ -29,7 +31,7 @@ function getButtonHoverBackground(
     case "positive":
       return theme.colors.green;
     case "neutral":
-      return theme.colors.black;
+      return theme.colors.darkGrey;
     default:
       return theme.colors.primaryDark;
   }
@@ -44,18 +46,12 @@ function getButtonBorderColor(
     return theme.colors.darkGrey;
   }
 
-  if (intent === "neutral") {
-    return theme.name === "dark"
-      ? theme.colors.lightGrey
-      : theme.colors.borderGrey;
-  }
-
-  return theme.colors.borderGrey;
+  return "transparent";
 }
 
 function getButtonHoverBorderColor(theme: DefaultTheme, intent?: ButtonIntent) {
   if (intent === "neutral") {
-    return theme.colors.lightGrey;
+    return "transparent";
   }
 
   return theme.colors.primaryDark;
@@ -76,16 +72,16 @@ export const ButtonStyle = css<StyledButtonProps>`
   display: flex;
   align-items: center;
   justify-content: ${(props) => props.justifyContent || "center"};
-  width: 100%;
+  width: fit-content;
   height: 3rem;
-  padding: 0 1rem;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  text-transform: uppercase;
+  padding: 0 2rem;
+  font-family: ${fontWide};
+  font-size: 1.25rem;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-radius: 2px;
+  border-radius: 0.5rem;
   border-style: "solid";
   border-width: 1px;
   border-color: ${(props) =>
@@ -117,6 +113,10 @@ export const ButtonStyle = css<StyledButtonProps>`
     border-color: ${(props) => props.theme.colors.primary};
   }
 
+  @media ${breakPoints.phoneOnly} {
+    font-size: 1.125rem;
+  }
+
   @supports (-moz-appearance: none) {
     padding-top: 0.125rem;
   }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a41283559..c6a5874de 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import Icon from "../Icon/Icon";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
 import { StyledButton, StyledIcon, Text } from "./Button.styles";
 
@@ -8,7 +7,7 @@ export type ButtonIntent = "neutral" | "primary" | "positive" | "destructive";
 export type ButtonJustifyContent = "center" | "flex-start" | "flex-end";
 
 export type ButtonProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
   icon?: string;
   /**
diff --git a/src/components/ChainSelectionPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx b/src/components/ChainSelectionPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
index 7f8a81be0..b344c7dec 100644
--- a/src/components/ChainSelectionPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
+++ b/src/components/ChainSelectionPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components/macro";
 
-import { StyledTitle } from "../../../Overlay/Overlay.styles";
+import { StyledTitle } from "../../../ModalOverlay/ModalOverlay.styles";
 
 export const Container = styled.div`
   padding: 0 1rem;
diff --git a/src/components/ChainSelector/ChainSelector.style.tsx b/src/components/ChainSelector/ChainSelector.style.tsx
index 014030a03..91c7dd20b 100644
--- a/src/components/ChainSelector/ChainSelector.style.tsx
+++ b/src/components/ChainSelector/ChainSelector.style.tsx
@@ -7,7 +7,6 @@ import { IconButtonStyle } from "../IconButton/IconButton.styles";
 
 type ContainerProps = {
   isOpen: boolean;
-  shiftLeft: boolean;
 };
 
 type ArrowIconProps = {
@@ -16,16 +15,6 @@ type ArrowIconProps = {
 
 export const Container = styled.div<ContainerProps>`
   position: relative;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
-  @media ${breakPoints.tabletPortraitUp} {
-    transform: ${({ shiftLeft }) =>
-      shiftLeft ? "translate(-12.75rem, 0)" : "0"};
-    transition: transform 0.3s ease-in-out;
-  }
 `;
 
 export const ChainSelectButton = styled.button`
@@ -33,10 +22,10 @@ export const ChainSelectButton = styled.button`
   ${InputOrButtonBorderStyle}
 
   align-items: center;
-  padding: 0 0.5rem;
+  padding: 0 1rem;
 
   @media ${breakPoints.tabletPortraitUp} {
-    padding: 0 1rem;
+    padding: 0 1.5rem;
   }
 
   @media ${breakPoints.phoneOnly} {
@@ -47,18 +36,18 @@ export const ChainSelectButton = styled.button`
 `;
 
 export const ChainIcon = styled.img`
-  width: 1.5rem;
+  width: 1rem;
 
   @media ${breakPoints.tabletPortraitUp} {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
   }
 `;
 
 export const ChainNameText = styled.span`
   display: none;
   text-transform: uppercase;
-  font-size: 0.8rem;
-  font-weight: bold;
+  font-size: 0.9375rem;
+  font-weight: 700;
 
   @media ${breakPoints.tabletPortraitUp} {
     display: inline;
@@ -66,9 +55,15 @@ export const ChainNameText = styled.span`
 `;
 
 export const ArrowIcon = styled.div<ArrowIconProps>`
-  margin-left: 0.5rem;
+  margin-top: 0.125rem;
+  margin-left: 0.25rem;
   transition: transform 0.3s ease-in-out;
 
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
   ${({ isOpen }) => (isOpen ? "transform: rotateX(180deg);" : "")}
 `;
 
diff --git a/src/components/ChainSelector/ChainSelector.tsx b/src/components/ChainSelector/ChainSelector.tsx
index 5a9ed70f3..ac8526637 100644
--- a/src/components/ChainSelector/ChainSelector.tsx
+++ b/src/components/ChainSelector/ChainSelector.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { GoChevronDown } from "react-icons/go";
+import { MdKeyboardArrowDown } from "react-icons/md";
 
 import { chainNames } from "@airswap/utils";
 
@@ -15,7 +15,6 @@ import {
 type ChainSelectorType = {
   chainId: number;
   chainSelectionOpen: boolean;
-  transactionsTabOpen: boolean;
   setChainSelectionOpen: (x: boolean) => void;
   className?: string;
 };
@@ -23,7 +22,6 @@ type ChainSelectorType = {
 const ChainSelector = ({
   chainId,
   chainSelectionOpen,
-  transactionsTabOpen,
   setChainSelectionOpen,
   className,
 }: ChainSelectorType) => {
@@ -61,7 +59,6 @@ const ChainSelector = ({
       className={className}
       ref={containerRef}
       isOpen={chainSelectionOpen}
-      shiftLeft={transactionsTabOpen}
     >
       <ChainSelectButton
         onClick={() => {
@@ -71,7 +68,7 @@ const ChainSelector = ({
         <ChainIcon src={`images/networks/${chainId}.png`} />
         <ChainNameText>{chainNames[chainId]}</ChainNameText>
         <ArrowIcon isOpen={chainSelectionOpen}>
-          <GoChevronDown />
+          <MdKeyboardArrowDown />
         </ArrowIcon>
       </ChainSelectButton>
       {chainSelectionOpen && (
diff --git a/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx b/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx
new file mode 100644
index 000000000..4e504c851
--- /dev/null
+++ b/src/components/DepositSubmittedScreen/DepositSubmittedScreen.tsx
@@ -0,0 +1,67 @@
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { SubmittedDepositTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import useDebounce from "../../hooks/useDebounce";
+import {
+  OverlayContainer,
+  OverlaySubHeading,
+  OverlayTitle,
+  OverlayTransactionLink,
+} from "../../styled-components/Overlay/Overlay";
+import { TransactionStatusType } from "../../types/transactionTypes";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
+
+interface DepositSubmittedScreenProps {
+  chainId?: number;
+  transaction?: SubmittedDepositTransaction;
+  className?: string;
+}
+
+const DepositSubmittedScreen: FC<DepositSubmittedScreenProps> = ({
+  chainId,
+  transaction,
+  className = "",
+}) => {
+  const { t } = useTranslation();
+  const [isAnimatedToCenter, setIsAnimatedToCenter] = useState(false);
+
+  const isSucceeded = transaction?.status === TransactionStatusType.succeeded;
+
+  useDebounce(
+    () => {
+      if (isSucceeded) {
+        setIsAnimatedToCenter(true);
+      }
+    },
+    500,
+    [isSucceeded]
+  );
+
+  return (
+    <OverlayContainer
+      className={className}
+      style={{
+        transform: isAnimatedToCenter ? "translateY(2.5rem)" : "translateY(0)",
+      }}
+    >
+      <OverlayLoader isSucceeded={isSucceeded} />
+      <OverlayTitle type="h2">
+        {isSucceeded
+          ? t("orders.depositComplete")
+          : t("orders.depositProcessing")}
+      </OverlayTitle>
+      <OverlaySubHeading isHidden={isSucceeded}>
+        {transaction?.hash && chainId && (
+          <OverlayTransactionLink
+            isHidden={isSucceeded}
+            chainId={chainId}
+            hash={transaction.hash}
+          />
+        )}
+      </OverlaySubHeading>
+    </OverlayContainer>
+  );
+};
+
+export default DepositSubmittedScreen;
diff --git a/src/components/Dropdown/Dropdown.styles.tsx b/src/components/Dropdown/Dropdown.styles.tsx
index 4614a96ac..cdccccb0c 100644
--- a/src/components/Dropdown/Dropdown.styles.tsx
+++ b/src/components/Dropdown/Dropdown.styles.tsx
@@ -2,6 +2,7 @@ import styled, { css } from "styled-components/macro";
 
 import breakPoints from "../../style/breakpoints";
 import { InputOrButtonBorderStyle, TextEllipsis } from "../../style/mixins";
+import { fontWide } from "../../style/themes";
 import Icon from "../Icon/Icon";
 
 const ButtonStyle = css`
@@ -15,13 +16,11 @@ const ButtonStyle = css`
   width: 100%;
   height: var(--dropdown-button-height);
   padding: 0 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-family: ${fontWide};
+  font-weight: 500;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
   overflow: hidden;
-  background: ${({ theme }) => theme.colors.black};
 
   @supports (-moz-appearance: none) {
     padding-top: 0.125rem;
@@ -87,6 +86,7 @@ export const SelectButtonText = styled.div<{ width?: number }>`
 
   width: ${(props) => `${props.width}px` || "auto"};
   text-align: left;
+  color: ${({ theme }) => theme.colors.carteBlanche};
 `;
 
 export const DropdownButtonText = styled.div`
@@ -127,8 +127,8 @@ const SelectStyle = css`
   ${InputOrButtonBorderStyle};
   ${ButtonStyle};
 
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
   padding-right: 0.5rem;
 
   &:focus + ${SelectOptions} {
@@ -146,7 +146,7 @@ export const NativeSelectWrapper = styled.div`
 
 export const NativeSelectIcon = styled(Icon)`
   position: absolute;
-  top: 0.25rem;
+  top: 0.75rem;
   right: 0.5625rem;
   pointer-events: none;
   z-index: 2;
@@ -158,12 +158,13 @@ export const NativeSelect = styled.select`
 
   appearance: none;
   padding-right: 2rem;
+  background: none;
 `;
 
 export const Wrapper = styled.div`
   position: relative;
 
-  --dropdown-button-height: 2rem;
+  --dropdown-button-height: 3rem;
   --dropdown-options-wrapper-padding: 0.5rem;
 
   ${NativeSelectWrapper} {
@@ -192,3 +193,7 @@ export const Sizer = styled.div`
   pointer-events: none;
   opacity: 0;
 `;
+
+export const StyledIcon = styled(Icon)`
+  translate: 0 1px;
+`;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index b5b513e77..9d528bea4 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
-import React, { Dispatch, FC, useCallback, useState } from "react";
+import React, { FC, useCallback, useState } from "react";
 
-import Icon from "../Icon/Icon";
 import {
   Option,
   Wrapper,
@@ -13,6 +12,7 @@ import {
   NativeSelectWrapper,
   NativeSelectIcon,
   DropdownButtonText,
+  StyledIcon,
 } from "./Dropdown.styles";
 
 export type SelectOption = {
@@ -22,6 +22,7 @@ export type SelectOption = {
 
 export type DropdownProps = {
   isMenuOpen?: boolean;
+  isDisabled?: boolean;
   selectedOption: SelectOption;
   options: SelectOption[];
   onChange: (option: SelectOption) => void;
@@ -30,6 +31,7 @@ export type DropdownProps = {
 
 const Dropdown: FC<DropdownProps> = ({
   isMenuOpen = false,
+  isDisabled = false,
   selectedOption,
   options,
   onChange,
@@ -83,11 +85,15 @@ const Dropdown: FC<DropdownProps> = ({
 
   return (
     <Wrapper className={className}>
-      <Select onClick={handleSelectClick} onBlur={handleSelectBlur}>
+      <Select
+        onClick={handleSelectClick}
+        onBlur={handleSelectBlur}
+        disabled={isDisabled}
+      >
         <SelectButtonText width={selectWidth}>
           {selectedOption.label}
         </SelectButtonText>
-        <Icon name={"chevron-up-down"} iconSize={1.5} />
+        <StyledIcon name={"chevron-up-down"} iconSize={1.5} />
       </Select>
       <SelectOptions
         activeIndex={isMenuOpen ? 0 : activeOptionIndex}
diff --git a/src/components/ErrorList/ErrorList.styles.tsx b/src/components/ErrorList/ErrorList.styles.tsx
index 06bf0551a..c2c5d2a1b 100644
--- a/src/components/ErrorList/ErrorList.styles.tsx
+++ b/src/components/ErrorList/ErrorList.styles.tsx
@@ -1,21 +1,15 @@
 import styled from "styled-components/macro";
 
-import { sizes } from "../../style/sizes";
-import { ScrollContainer } from "../Overlay/Overlay.styles";
+import { ScrollContainer } from "../ModalOverlay/ModalOverlay.styles";
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0 ${sizes.tradeContainerPadding} ${sizes.tradeContainerPadding};
 `;
 
 export const StyledScrollContainer = styled(ScrollContainer)`
-  max-height: calc(100% - 3.125rem);
+  padding-block-start: 1rem;
+  height: 14.5rem;
   overflow-y: ${(props) => (props.$overflow ? "scroll" : "hidden")};
 `;
 
@@ -24,10 +18,3 @@ export const StyledErrorList = styled.div`
   flex-direction: column;
   background: ${(props) => props.theme.colors.black};
 `;
-
-export const LegendDivider = styled.div`
-  width: calc(100% - 4rem);
-  height: 1px;
-  background: ${(props) => props.theme.colors.borderGrey};
-  align-self: center;
-`;
diff --git a/src/components/ErrorList/ErrorList.tsx b/src/components/ErrorList/ErrorList.tsx
index 647dcf032..b1c81633a 100644
--- a/src/components/ErrorList/ErrorList.tsx
+++ b/src/components/ErrorList/ErrorList.tsx
@@ -2,11 +2,10 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { AppError } from "../../errors/appError";
-import { OverlayActionButton } from "../Overlay/Overlay.styles";
+import { OverlayActionButton } from "../ModalOverlay/ModalOverlay.styles";
 import {
   Container,
   StyledErrorList,
-  LegendDivider,
   StyledScrollContainer,
 } from "./ErrorList.styles";
 import { getAppErrorTranslation } from "./helpers";
@@ -30,17 +29,14 @@ export const ErrorList = ({
 
   return (
     <Container>
-      <LegendDivider />
-      <StyledScrollContainer>
-        <StyledErrorList>
-          {errorListItems.map((error) => (
-            <ErrorListItem
-              key={error.title}
-              title={error.title}
-              text={error.text}
-            />
-          ))}
-        </StyledErrorList>
+      <StyledScrollContainer $overflow>
+        {errorListItems.map((error) => (
+          <ErrorListItem
+            key={error.title}
+            title={error.title}
+            text={error.text}
+          />
+        ))}
       </StyledScrollContainer>
       <OverlayActionButton onClick={onBackButtonClick}>
         {t("common.back")}
diff --git a/src/components/ErrorList/helpers/index.ts b/src/components/ErrorList/helpers/index.ts
index 915597d1e..2770282f1 100644
--- a/src/components/ErrorList/helpers/index.ts
+++ b/src/components/ErrorList/helpers/index.ts
@@ -4,6 +4,13 @@ import { AppError, AppErrorType } from "../../../errors/appError";
 import { ErrorListItemProps } from "../subcomponents/ErrorListItem/ErrorListItem";
 
 export const getAppErrorTranslation = (error: AppError): ErrorListItemProps => {
+  if (error.type === AppErrorType.signatureInvalid) {
+    return {
+      title: AppErrorType.signatureInvalid,
+      text: i18n.t("validatorErrors.signatureInvalid"),
+    };
+  }
+
   if (error.type === AppErrorType.expiryPassed) {
     return {
       title: AppErrorType.expiryPassed,
diff --git a/src/components/ErrorList/subcomponents/ErrorListItem/ErrorListItem.styles.tsx b/src/components/ErrorList/subcomponents/ErrorListItem/ErrorListItem.styles.tsx
index b482d31e6..3f88e3988 100644
--- a/src/components/ErrorList/subcomponents/ErrorListItem/ErrorListItem.styles.tsx
+++ b/src/components/ErrorList/subcomponents/ErrorListItem/ErrorListItem.styles.tsx
@@ -8,7 +8,10 @@ export const Container = styled.div`
   align-items: center;
   width: 100%;
   height: 3rem;
-  margin-top: 1.5rem;
+
+  & + & {
+    margin-top: 1.5rem;
+  }
 `;
 
 export const ErrorTextContainer = styled.div`
diff --git a/src/components/ExpiryIndicator/ExpiryIndicator.styles.tsx b/src/components/ExpiryIndicator/ExpiryIndicator.styles.tsx
index 2c53f5bae..d04de3f44 100644
--- a/src/components/ExpiryIndicator/ExpiryIndicator.styles.tsx
+++ b/src/components/ExpiryIndicator/ExpiryIndicator.styles.tsx
@@ -1,10 +1,11 @@
 import styled from "styled-components/macro";
 
 import { TextEllipsis } from "../../style/mixins";
-import { Pill } from "../../styled-components/Pill/Pill";
 import Tooltip from "./subcomponents/Tooltip";
 
 export const Container = styled.div`
+  display: flex;
+  align-items: center;
   position: relative;
   width: fit-content;
   height: 2rem;
@@ -13,15 +14,10 @@ export const Container = styled.div`
 export const Text = styled.span<{ hasExpired: boolean }>`
   ${TextEllipsis};
 
-  color: ${({ theme, hasExpired }) =>
-    hasExpired
-      ? theme.name === "dark"
-        ? theme.colors.white
-        : theme.colors.primary
-      : theme.colors.lightGrey};
+  color: ${({ theme }) => theme.colors.lightGrey};
 `;
 
-export const Strong = styled.strong`
+export const TimeLeft = styled.div`
   ${TextEllipsis};
 
   display: inline;
@@ -36,7 +32,7 @@ export const StyledTooltip = styled(Tooltip)`
   bottom: 2.5rem;
 `;
 
-export const StyledPill = styled(Pill)`
+export const Expiry = styled.div`
   ${TextEllipsis};
 
   &:hover + ${StyledTooltip} {
diff --git a/src/components/ExpiryIndicator/ExpiryIndicator.tsx b/src/components/ExpiryIndicator/ExpiryIndicator.tsx
index 2e8155cc5..3ca249e42 100644
--- a/src/components/ExpiryIndicator/ExpiryIndicator.tsx
+++ b/src/components/ExpiryIndicator/ExpiryIndicator.tsx
@@ -6,8 +6,8 @@ import { compareAsc, format } from "date-fns";
 import { getExpiryTranslation } from "../../helpers/getExpiryTranslation";
 import {
   Container,
-  Strong,
-  StyledPill,
+  TimeLeft,
+  Expiry,
   StyledTooltip,
   Text,
 } from "./ExpiryIndicator.styles";
@@ -39,12 +39,12 @@ const ExpiryIndicator: FC<ExpiryIndicatorProps> = ({ expiry, className }) => {
 
   return (
     <Container className={className}>
-      <StyledPill>
+      <Expiry>
         <Text hasExpired={hasExpired}>
           {hasExpired ? t("common.expired") : t("common.expiresIn")}
         </Text>
-        {!hasExpired && <Strong>{timeLeft}</Strong>}
-      </StyledPill>
+        {!hasExpired && <TimeLeft>{timeLeft}</TimeLeft>}
+      </Expiry>
       <StyledTooltip>{format(expiry, "dd-MMM-yyyy pppp")}</StyledTooltip>
     </Container>
   );
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index edc39bb43..1f622a256 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -6,6 +6,7 @@ import { IoMdInformationCircleOutline, IoMdSettings } from "react-icons/io";
 import { StyledIcon } from "./Icon.styles";
 import {
   IconAirswap,
+  IconAirswapFull,
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
@@ -17,6 +18,7 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconClose,
+  IconCloseCircleOutline,
   IconCode,
   IconCopy,
   IconCopy2,
@@ -41,7 +43,7 @@ import {
   IconTwitter,
   IconVote,
   IconX,
-  IconCloseCircleOutline,
+  IconCheckCircle,
 } from "./icons";
 
 type IconSet = {
@@ -57,6 +59,7 @@ export interface SvgIconProps {
 export const icons: IconSet = {
   learn: IconLibrary,
   airswap: IconAirswap,
+  "airswap-full": IconAirswapFull,
   "arrow-down": IconArrowDown,
   "arrow-right": IconArrowRight,
   "arrow-left": IconArrowLeft,
@@ -65,6 +68,7 @@ export const icons: IconSet = {
   "button-x": IconX,
   campaign: IconCampaign,
   check: IconCheck,
+  "check-circle": IconCheckCircle,
   "chevron-down": IconChevronDown,
   "chevron-right": IconChevronRight,
   "chevron-up-down": IconChevronUpDown,
diff --git a/src/components/Icon/icons/IconAirswapFull.tsx b/src/components/Icon/icons/IconAirswapFull.tsx
new file mode 100644
index 000000000..553c81701
--- /dev/null
+++ b/src/components/Icon/icons/IconAirswapFull.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactElement } from "react";
+
+import { SvgIconProps } from "../Icon";
+
+const IconAirswapFull: FC<SvgIconProps> = ({
+  className = "",
+}): ReactElement => (
+  <svg fill="none" viewBox="0 0 142 32" className={className}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M57.9872 9.00391H55.147V24.6475H57.9872V9.00391Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M83.166 15.5549C86.094 16.2432 87.7841 17.2164 88.1888 19.1391C88.2583 19.4588 88.2902 19.7854 88.284 20.1123C88.284 23.0318 86.2368 24.8833 82.9042 24.8833C80.3614 24.8622 77.9078 23.9459 75.9771 22.296L77.6672 20.3259C79.1907 21.6314 80.9998 22.4622 82.9756 22.4622C84.9513 22.4622 85.4988 21.5839 85.4988 20.3734C85.4988 19.1628 84.8561 18.6406 81.9044 17.976C78.5241 17.1927 76.5722 16.0771 76.5722 13.1812C76.5722 10.2854 78.5955 8.76624 81.7377 8.76624C83.9268 8.74179 86.0618 9.44321 87.8079 10.7601L86.3082 12.8252C84.8799 11.7808 83.2612 11.0687 81.8091 11.0687C80.3571 11.0687 79.3573 11.8995 79.3573 12.9439C79.3573 13.9883 80.1428 14.8428 83.166 15.5549Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M109.756 9.00391L105.95 20.5345L102.048 9.00391H99.7073L95.8058 20.5345L91.999 9.00391H88.9961L94.529 24.6475H96.9408L100.842 13.4973L104.744 24.6475H107.132L112.665 9.00391H109.756Z"
+    />
+    <path d="M134.792 11.5002H130.834V16.9921H134.792C136.914 16.9921 138.225 16.1838 138.225 14.163C138.225 12.1421 136.89 11.5002 134.792 11.5002ZM134.697 19.4409H130.834V24.6475H128.045V9.00391H135.031C138.726 9.00391 141.063 10.8821 141.063 14.0441C141.063 17.5627 138.464 19.4409 134.697 19.4409Z" />
+    <path d="M68.3651 11.5002H64.3341V16.9684H68.3888C70.3806 16.9684 71.661 15.8034 71.661 14.2105C71.661 12.6176 70.428 11.5002 68.3651 11.5002ZM71.2579 24.6475L67.796 19.3934H64.3341V24.6475H61.5361V9.00391H68.6022C72.2301 9.00391 74.4827 11.1674 74.4827 14.2105C74.4827 16.7782 72.9178 18.3235 70.6889 18.9416L74.5539 24.6475H71.2579Z" />
+    <path d="M44.7355 12.261L46.9976 18.2046C45.2787 18.2018 43.58 18.575 42.0211 19.2983L44.7355 12.261ZM36.6875 24.6475H39.6162C39.6162 24.6475 41.7354 20.1541 47.95 20.6534L49.6167 24.6475H52.5455L46.0689 9.00391H43.3307L36.6875 24.6475Z" />
+    <path d="M121.063 19.2983C119.506 18.5765 117.81 18.2032 116.094 18.2046L118.352 12.261L121.063 19.2983ZM119.755 9.00391H117.021L110.53 24.6475H113.455L115.143 20.6534C121.324 20.1541 123.44 24.6475 123.44 24.6475H126.388L119.755 9.00391Z" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24.0823 23.9414L15.9514 32.0002L11.9219 28.0065C16.2672 27.7436 20.4639 26.3407 24.0823 23.9414Z"
+    />
+    <path d="M31.6893 15.7519L30.6909 14.751L15.9754 0L1.25997 14.751L0 16.014L0.451686 16.4191C0.974691 16.8481 1.4977 17.2532 2.04447 17.6345C6.03833 20.4376 10.7803 21.973 15.6554 22.0409C20.5306 22.1088 25.3134 20.7064 29.3834 18.0157C29.9539 17.6345 30.5245 17.2055 31.0712 16.7766C31.618 16.3476 31.6656 16.2761 31.9508 16.014L31.6893 15.7519ZM19.8504 19.4456C15.4603 16.7439 10.4052 15.3246 5.25382 15.3467C11.9816 12.4156 20.207 12.0105 27.7668 16.3714C25.3515 17.9002 22.6628 18.9444 19.8504 19.4456Z" />
+  </svg>
+);
+
+export default IconAirswapFull;
diff --git a/src/components/Icon/icons/IconCheckCircle.tsx b/src/components/Icon/icons/IconCheckCircle.tsx
new file mode 100644
index 000000000..bbe40c2b5
--- /dev/null
+++ b/src/components/Icon/icons/IconCheckCircle.tsx
@@ -0,0 +1,21 @@
+import React, { FC, ReactElement } from "react";
+
+import { SvgIconProps } from "../Icon";
+
+const IconCheckCircle: FC<SvgIconProps> = ({
+  className = "",
+}): ReactElement => (
+  <svg fill="none" viewBox="0 0 59 59" className={className}>
+    <path d="M29.2486 1.77293C29.2486 0.793257 28.4536 -0.00652814 27.4757 0.0528439C22.3139 0.366237 17.3158 2.04374 12.9984 4.92851C8.18836 8.14248 4.43938 12.7106 2.22556 18.0553C0.0117348 23.3999 -0.567504 29.281 0.561094 34.9549C1.68969 40.6287 4.47544 45.8405 8.56605 49.9311C12.6567 54.0217 17.8684 56.8074 23.5423 57.936C29.2161 59.0646 35.0972 58.4854 40.4419 56.2716C45.7865 54.0577 50.3546 50.3088 53.5686 45.4987C56.4534 41.1814 58.1309 36.1832 58.4443 31.0214C58.5037 30.0435 57.7039 29.2486 56.7242 29.2486C55.7445 29.2486 54.9567 30.0437 54.8892 31.0211C54.5809 35.4806 53.1137 39.7939 50.6188 43.5277C47.7947 47.7544 43.7806 51.0486 39.0842 52.9939C34.3878 54.9392 29.22 55.4482 24.2344 54.4565C19.2487 53.4648 14.6691 51.0169 11.0746 47.4225C7.48019 43.828 5.03233 39.2484 4.04062 34.2627C3.04891 29.2771 3.55789 24.1093 5.5032 19.4129C7.44851 14.7165 10.7428 10.7025 14.9694 7.87831C18.7032 5.38346 23.0165 3.9162 27.476 3.60795C28.4534 3.5404 29.2486 2.75259 29.2486 1.77293Z" />
+    <path
+      d="M17.6797 27.4374L25.6109 35.3686L42.8409 18.1387"
+      strokeWidth="3.6"
+      className="stroke"
+    />
+    <circle cx="38.3481" cy="3.31099" r="2.24654" />
+    <circle cx="49.1313" cy="10.0512" r="2.24654" />
+    <circle cx="54.9731" cy="19.936" r="2.24654" />
+  </svg>
+);
+
+export default IconCheckCircle;
diff --git a/src/components/Icon/icons/index.ts b/src/components/Icon/icons/index.ts
index 604972266..f716736fc 100644
--- a/src/components/Icon/icons/index.ts
+++ b/src/components/Icon/icons/index.ts
@@ -1,4 +1,5 @@
 import IconAirswap from "./IconAirswap";
+import IconAirswapFull from "./IconAirswapFull";
 import IconArrowDown from "./IconArrowDown";
 import IconArrowLeft from "./IconArrowLeft";
 import IconArrowRight from "./IconArrowRight";
@@ -6,6 +7,7 @@ import IconBars from "./IconBars";
 import IconBin from "./IconBin";
 import IconCampaign from "./IconCampaign";
 import IconCheck from "./IconCheck";
+import IconCheckCircle from "./IconCheckCircle";
 import IconChevronDown from "./IconChevronDown";
 import IconChevronRight from "./IconChevronRight";
 import IconChevronUpDown from "./IconChevronUpDown";
@@ -38,6 +40,7 @@ import IconX from "./IconX";
 
 export {
   IconAirswap,
+  IconAirswapFull,
   IconArrowDown,
   IconArrowRight,
   IconArrowLeft,
@@ -45,6 +48,7 @@ export {
   IconBin,
   IconCampaign,
   IconCheck,
+  IconCheckCircle,
   IconChevronDown,
   IconChevronRight,
   IconChevronUpDown,
diff --git a/src/components/InformationModals/subcomponents/GasFreeSwapsModal/GasFreeSwapsModal.tsx b/src/components/InformationModals/subcomponents/GasFreeSwapsModal/GasFreeSwapsModal.tsx
index 377fa0660..6dbd92a57 100644
--- a/src/components/InformationModals/subcomponents/GasFreeSwapsModal/GasFreeSwapsModal.tsx
+++ b/src/components/InformationModals/subcomponents/GasFreeSwapsModal/GasFreeSwapsModal.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { ModalParagraph } from "../../../../styled-components/Modal/Modal";
-import { OverlayActionButton } from "../../../Overlay/Overlay.styles";
+import { OverlayActionButton } from "../../../ModalOverlay/ModalOverlay.styles";
 import { Container } from "./GasFreeModal.styles";
 
 interface GasFreeSwapsModalProps {
diff --git a/src/components/InformationModals/subcomponents/JoinModal/JoinModal.styles.tsx b/src/components/InformationModals/subcomponents/JoinModal/JoinModal.styles.tsx
deleted file mode 100644
index d80e68f8c..000000000
--- a/src/components/InformationModals/subcomponents/JoinModal/JoinModal.styles.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from "styled-components/macro";
-
-import breakPoints from "../../../../style/breakpoints";
-
-export const GuideButtons = styled.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-  margin-top: 2.125rem;
-
-  @media ${breakPoints.phoneOnly} {
-    flex-wrap: wrap;
-  }
-`;
diff --git a/src/components/InformationModals/subcomponents/JoinModal/JoinModal.tsx b/src/components/InformationModals/subcomponents/JoinModal/JoinModal.tsx
deleted file mode 100644
index d6c87771d..000000000
--- a/src/components/InformationModals/subcomponents/JoinModal/JoinModal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-import {
-  ModalParagraph,
-  ModalSubTitle,
-  ScrollableModalContainer,
-} from "../../../../styled-components/Modal/Modal";
-import HelmetContainer from "../../../HelmetContainer/HelmetContainer";
-import GuideButton, { GuideButtonProps } from "../GuideButton/GuideButton";
-import { GuideButtons } from "./JoinModal.styles";
-
-const guideButtons: GuideButtonProps[] = [
-  {
-    iconName: "vote",
-    text: "information.join.voter",
-    href: "https://about.airswap.io/guides/voters",
-  },
-  {
-    iconName: "code",
-    text: "information.join.developer",
-    href: "https://github.com/airswap",
-  },
-  {
-    iconName: "campaign",
-    text: "information.join.ambassador",
-    href: "https://about.airswap.io/guides/ambassadors",
-  },
-  {
-    iconName: "edit",
-    text: "information.join.author",
-    href: "https://about.airswap.io/guides/authors",
-  },
-];
-
-const JoinModal: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <HelmetContainer
-        title={`${t("common.AirSwap")} - ${t("information.join.title")}`}
-        description={t("information.join.intro")}
-      />
-
-      <ScrollableModalContainer>
-        <ModalParagraph>{t("information.join.intro")}</ModalParagraph>
-
-        <ModalSubTitle type="h2">
-          {t("information.join.getStarted")}
-        </ModalSubTitle>
-
-        <ModalParagraph>{t("information.join.paragraph2")}</ModalParagraph>
-
-        <GuideButtons>
-          {guideButtons.map((guideButton, index) => {
-            return (
-              <GuideButton
-                key={`${guideButton.iconName}-${index}`}
-                iconName={guideButton.iconName}
-                text={guideButton.text}
-                href={guideButton.href}
-              />
-            );
-          })}
-        </GuideButtons>
-      </ScrollableModalContainer>
-    </>
-  );
-};
-
-export default JoinModal;
diff --git a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx
index ae2cdad4c..e9f866db5 100644
--- a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx
+++ b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx
@@ -1,6 +1,10 @@
 import styled from "styled-components/macro";
 
-import { OverlayActionButton } from "../../../Overlay/Overlay.styles";
+import { OverlayActionButton } from "../../../ModalOverlay/ModalOverlay.styles";
+
+export const Container = styled.div`
+  padding-bottom: 2rem;
+`;
 
 export const StyledCloseButton = styled(OverlayActionButton)`
   margin-top: 1.5rem;
diff --git a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.tsx b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.tsx
index 82c1913a9..9821eb3d5 100644
--- a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.tsx
+++ b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.tsx
@@ -4,9 +4,8 @@ import { useTranslation } from "react-i18next";
 import {
   ModalParagraph,
   ModalSubTitle,
-  ScrollableModalContainer,
 } from "../../../../styled-components/Modal/Modal";
-import { StyledCloseButton } from "./OrderTypesModal.styles";
+import { Container, StyledCloseButton } from "./OrderTypesModal.styles";
 
 type OrderTypesModalProps = {
   onCloseButtonClick: () => void;
@@ -16,7 +15,7 @@ const OrderTypesModal: FC<OrderTypesModalProps> = ({ onCloseButtonClick }) => {
   const { t } = useTranslation();
 
   return (
-    <ScrollableModalContainer>
+    <Container>
       <ModalSubTitle type="h2">
         {t("information.counterParty.specify.title")}
       </ModalSubTitle>
@@ -32,7 +31,7 @@ const OrderTypesModal: FC<OrderTypesModalProps> = ({ onCloseButtonClick }) => {
       <StyledCloseButton onClick={onCloseButtonClick}>
         {t("common.back")}
       </StyledCloseButton>
-    </ScrollableModalContainer>
+    </Container>
   );
 };
 
diff --git a/src/components/InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal.tsx b/src/components/InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal.tsx
index b186c4c2f..25abb331d 100644
--- a/src/components/InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal.tsx
+++ b/src/components/InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { ModalParagraph } from "../../../../styled-components/Modal/Modal";
-import { OverlayActionButton } from "../../../Overlay/Overlay.styles";
+import { OverlayActionButton } from "../../../ModalOverlay/ModalOverlay.styles";
 import { FeeContainer } from "./ProtocolFeeModal.styles";
 
 type ProtocolFeeModalProps = {
diff --git a/src/components/ModalOverlay/ModalOverlay.styles.tsx b/src/components/ModalOverlay/ModalOverlay.styles.tsx
new file mode 100644
index 000000000..bb728dbf4
--- /dev/null
+++ b/src/components/ModalOverlay/ModalOverlay.styles.tsx
@@ -0,0 +1,175 @@
+import { motion } from "framer-motion";
+import { css } from "styled-components";
+import styled from "styled-components/macro";
+
+import breakPoints from "../../style/breakpoints";
+import { ScrollBarStyle } from "../../style/mixins";
+import { sizes } from "../../style/sizes";
+import CloseButton from "../../styled-components/CloseButton/CloseButton";
+import Button from "../Button/Button";
+import { InfoSubHeading } from "../Typography/Typography";
+import { StyledH3 } from "../Typography/Typography.styles";
+
+type ContainerProps = {
+  isAnimating: boolean;
+  isHidden: boolean;
+  hasDynamicHeight: boolean;
+  hasTitle: boolean;
+  hasOverflow: boolean;
+};
+
+type ScrollContainerProps = {
+  $overflow?: boolean;
+};
+
+export const ScrollContainer = styled.div<ScrollContainerProps>`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 99;
+  width: 100%;
+  height: 100%;
+  margin-block-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+  padding-block-end: 1.5rem;
+  overflow-x: hidden;
+  overflow-y: ${(props) => (props.$overflow ? "scroll" : "hidden")};
+
+  -webkit-mask-image: -webkit-gradient(
+    linear,
+    0 75%,
+    0 100%,
+    from(rgba(0, 0, 0, 1)),
+    to(rgba(0, 0, 0, 0))
+  );
+
+  ${ScrollBarStyle};
+`;
+
+export const ContentContainer = styled(motion.div)`
+  position: relative;
+  border: 1px solid ${(props) => props.theme.colors.borderGrey};
+  border-radius: 2rem;
+  margin-block-end: 2rem;
+  width: calc(100vw - 4rem);
+  max-width: 38.75rem;
+  height: fit-content;
+  max-height: 47.5rem;
+  min-height: 30rem;
+  padding: 0 ${sizes.tradeContainerPadding};
+
+  @media ${breakPoints.phoneOnly} {
+    padding: 0 ${sizes.tradeContainerMobilePadding};
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 2rem;
+    width: 100%;
+    height: 100%;
+    background: ${(props) => props.theme.colors.darkBlue};
+    filter: brightness(0.5);
+    opacity: 0.75;
+    pointer-events: none;
+    z-index: -1;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-block-end: 1rem;
+  padding-block-start: ${sizes.tradeContainerPadding};
+  transition: background ease-in-out 0.3s;
+
+  @media ${breakPoints.phoneOnly} {
+    padding-block-start: ${sizes.tradeContainerMobilePadding};
+  }
+`;
+
+export const TitleSubContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledTitle = styled(StyledH3)<{
+  type: keyof JSX.IntrinsicElements;
+  as?: keyof JSX.IntrinsicElements;
+}>`
+  min-height: 1.875rem;
+  padding-right: 1rem;
+  flex-grow: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity ease-in-out 0.3s;
+  will-change: opacity;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+
+export const StyledInfoSubHeading = styled(InfoSubHeading)`
+  margin-top: 0.5rem;
+  transition: opacity ease-in-out 0.3s;
+  will-change: opacity;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+
+const OverlayActionButtonStyle = css`
+  margin-top: 1rem;
+  margin-inline: auto;
+`;
+
+export const OverlayActionButton = styled(Button)`
+  ${OverlayActionButtonStyle};
+`;
+
+const containerDynamicHeightStyle = css`
+  padding-block-start: 5.5rem;
+
+  @media ${breakPoints.bigDesktopUp} {
+    padding-block-start: 2rem;
+  }
+
+  @media ${breakPoints.phoneOnly} {
+    padding-block-start: 4.25rem;
+  }
+`;
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  flex-direction: column;
+  justify-content: ${(props) => (props.hasOverflow ? "flex-start" : "center")};;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${(props) => (props.hasDynamicHeight ? "auto" : "100%")};
+  min-height: 100vh;
+  min-height: 100svh;
+  padding-block-start: 2rem;
+  pointer-events: ${(props) => (props.isHidden ? "none" : "visible")};
+  z-index: 20;
+  overflow: ${(props) => (props.isAnimating ? "hidden" : "auto")};
+
+  ${(props) => props.hasDynamicHeight && containerDynamicHeightStyle};
+}
+`;
+
+export const StyledCloseButton = styled(CloseButton)`
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+  z-index: 3;
+`;
diff --git a/src/components/ModalOverlay/ModalOverlay.tsx b/src/components/ModalOverlay/ModalOverlay.tsx
new file mode 100644
index 000000000..5c79ff160
--- /dev/null
+++ b/src/components/ModalOverlay/ModalOverlay.tsx
@@ -0,0 +1,143 @@
+import { FC, useContext, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AnimatePresence, useReducedMotion } from "framer-motion";
+
+import { InterfaceContext } from "../../contexts/interface/Interface";
+import useDebounce from "../../hooks/useDebounce";
+import useElementSize from "../../hooks/useElementSize";
+import useIsOverflowing from "../../hooks/useIsOverflowing";
+import { useKeyPress } from "../../hooks/useKeyPress";
+import {
+  Container,
+  StyledTitle,
+  TitleContainer,
+  ContentContainer,
+  TitleSubContainer,
+  StyledInfoSubHeading,
+  StyledCloseButton,
+} from "./ModalOverlay.styles";
+
+export type ModalOverlayProps = {
+  /**
+   * Function to close component
+   */
+  onClose: () => void;
+  /**
+   * Title shown on top
+   */
+  title?: string;
+  /**
+   * Subtitle shown under title
+   */
+  subTitle?: string;
+  /**
+   * Hide or show the component
+   */
+  isHidden?: boolean;
+  shouldAnimate?: boolean;
+  hasDynamicHeight?: boolean;
+  className?: string;
+};
+
+export const overlayShowHideAnimationDuration = 0.3;
+
+const ModalOverlay: FC<ModalOverlayProps> = ({
+  onClose,
+  title = "",
+  hasDynamicHeight = false,
+  isHidden = true,
+  subTitle = "",
+  shouldAnimate = true,
+  children,
+  className = "",
+}) => {
+  const { t } = useTranslation();
+  const shouldReduceMotion = useReducedMotion();
+  const [initialized, setInitialized] = useState(false);
+  const animationIsDisabled = !shouldAnimate || (!isHidden && !initialized);
+  const ref = useRef<HTMLDivElement>(null);
+  const { height: elementHeight } = useElementSize(ref);
+
+  const { setOverlayHeight, setShowModalOverlay } =
+    useContext(InterfaceContext);
+  const [, hasOverflow] = useIsOverflowing(ref);
+
+  useKeyPress(onClose, ["Escape"]);
+
+  useEffect(() => {
+    if (!isHidden) {
+      setOverlayHeight(elementHeight);
+    }
+  }, [elementHeight]);
+
+  useEffect(() => {
+    setInitialized(true);
+  }, []);
+
+  useEffect(() => {
+    if (isHidden) {
+      setShowModalOverlay(false);
+    }
+  }, [isHidden]);
+
+  useDebounce(
+    () => {
+      // Make sure the animation ended before setting the showOverlay state
+      setShowModalOverlay(!isHidden);
+    },
+    250,
+    [isHidden]
+  );
+
+  return (
+    <Container
+      ref={ref}
+      hasDynamicHeight={hasDynamicHeight}
+      hasOverflow={hasDynamicHeight && hasOverflow}
+      hasTitle={!!title}
+      isHidden={isHidden}
+      isAnimating={!animationIsDisabled}
+      className={className}
+    >
+      <AnimatePresence>
+        {!isHidden && (
+          <ContentContainer
+            key="content"
+            transition={{
+              ease: "easeOut",
+              duration:
+                shouldReduceMotion || animationIsDisabled
+                  ? 0
+                  : overlayShowHideAnimationDuration,
+            }}
+            initial={{ y: "100vh" }}
+            animate={{ y: "0%" }}
+            exit={{ y: "100vh" }}
+          >
+            <TitleContainer>
+              <TitleSubContainer>
+                <StyledTitle type="h2" as="h1">
+                  {title}
+                </StyledTitle>
+                {!!subTitle && (
+                  <StyledInfoSubHeading>{subTitle}</StyledInfoSubHeading>
+                )}
+              </TitleSubContainer>
+              <StyledCloseButton
+                icon="exit-modal"
+                ariaLabel={t("common.back")}
+                iconSize={1}
+                tabIndex={isHidden ? -1 : 0}
+                onClick={onClose}
+              />
+            </TitleContainer>
+            {children}
+          </ContentContainer>
+        )}
+      </AnimatePresence>
+    </Container>
+  );
+};
+
+export default ModalOverlay;
diff --git a/src/components/OrderReviewToken/OrderReviewToken.styles.tsx b/src/components/OrderReviewToken/OrderReviewToken.styles.tsx
index 6925dca46..7cd082bb0 100644
--- a/src/components/OrderReviewToken/OrderReviewToken.styles.tsx
+++ b/src/components/OrderReviewToken/OrderReviewToken.styles.tsx
@@ -57,4 +57,6 @@ export const Symbol = styled.div`
 
 export const StyledTokenLogo = styled(TokenLogo)`
   margin-left: 1rem;
+  min-width: 1.5rem;
+  aspect-ratio: 1;
 `;
diff --git a/src/components/OrderReviewToken/OrderReviewToken.tsx b/src/components/OrderReviewToken/OrderReviewToken.tsx
index 0adc60ce0..4e104ecfe 100644
--- a/src/components/OrderReviewToken/OrderReviewToken.tsx
+++ b/src/components/OrderReviewToken/OrderReviewToken.tsx
@@ -28,7 +28,7 @@ const OrderReviewToken: FC<OrderReviewTokenProps> = ({
       <Label>{label}</Label>
       <Amount>{amount}</Amount>
       <Symbol>{tokenSymbol}</Symbol>
-      <StyledTokenLogo logoURI={tokenUri} size="small" />
+      <StyledTokenLogo logoURI={tokenUri} />
     </Container>
   );
 };
diff --git a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx
index 051cd7f24..c7e164708 100644
--- a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx
+++ b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.styles.tsx
@@ -1,10 +1,11 @@
-import { MdDoneAll } from "react-icons/md";
-
-import styled from "styled-components/macro";
+import styled, { css } from "styled-components/macro";
 
+import {
+  OverlaySubHeading,
+  OverlayTitle,
+} from "../../styled-components/Overlay/Overlay";
 import Button from "../Button/Button";
-import TransactionLink from "../TransactionLink/TransactionLink";
-import { InfoHeading, InfoSubHeading } from "../Typography/Typography";
+import Icon from "../Icon/Icon";
 
 export const Container = styled.div`
   display: flex;
@@ -19,36 +20,53 @@ export const InfoContainer = styled.div`
   align-items: center;
   text-align: center;
   flex-grow: 1;
-  padding-bottom: 4rem;
+  padding-bottom: 2rem;
 `;
 
-export const StyledInfoHeading = styled(InfoHeading)`
-  & + ${InfoSubHeading} {
-    margin-top: 0.25rem;
+export const StyledOverlayTitle = styled(OverlayTitle)`
+  margin-top: 1.75rem;
+
+  & + ${OverlaySubHeading} {
+    margin-top: 1.25rem;
   }
 `;
 
-export const StyledTransactionLink = styled(TransactionLink)`
-  margin-top: 1rem;
+export const IconWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
+  width: 3.6875rem;
+  height: 3.6875rem;
 `;
 
-export const DoneAllIcon = styled(MdDoneAll)`
-  font-size: 8rem;
-  margin: 2rem auto;
+export const StyledIcon = styled(Icon)`
+  width: 100%;
+  height: 100%;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 export const ButtonsContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   gap: 1rem;
+  padding-top: 2rem;
 `;
 
-export const MakeNewOrderButton = styled(Button)`
-  width: 100%;
+const ButtonStyle = css`
+  width: fit-content;
+  padding-inline: 3.5rem;
 `;
 
+export const MakeNewOrderButton = styled(Button)`
+  ${ButtonStyle};
+`;
 export const TrackTransactionButton = styled(Button)`
-  width: 100%;
+  ${ButtonStyle};
 `;
diff --git a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx
index 0b1c3165e..7faf3a74f 100644
--- a/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx
+++ b/src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx
@@ -1,30 +1,33 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import {
+  OverlayContainer,
+  OverlaySubHeading,
+  OverlayTitle,
+  OverlayTransactionLink,
+} from "../../styled-components/Overlay/Overlay";
 import { TransactionStatusType } from "../../types/transactionTypes";
-import { InfoSubHeading } from "../Typography/Typography";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
 import {
   ButtonsContainer,
-  Container,
-  DoneAllIcon,
-  InfoContainer,
   MakeNewOrderButton,
-  StyledInfoHeading,
-  StyledTransactionLink,
   TrackTransactionButton,
 } from "./OrderSubmittedScreen.styles";
 
 interface OrderSubmittedInfoProps {
+  isSendingOrder?: boolean;
   showTrackTransactionButton?: boolean;
   chainId?: number;
-  transaction: SubmittedTransaction;
+  transaction?: SubmittedTransaction;
   onMakeNewOrderButtonClick: () => void;
   onTrackTransactionButtonClick?: () => void;
   className?: string;
 }
 
 const OrderSubmittedScreen: FC<OrderSubmittedInfoProps> = ({
+  isSendingOrder,
   showTrackTransactionButton,
   chainId,
   transaction,
@@ -34,45 +37,57 @@ const OrderSubmittedScreen: FC<OrderSubmittedInfoProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const isSucceeded = transaction?.status === TransactionStatusType.succeeded;
+
   return (
-    <Container className={className}>
-      <InfoContainer>
-        <DoneAllIcon />
-        {transaction.status === TransactionStatusType.processing && (
-          <>
-            <StyledInfoHeading>{t("orders.submitted")}</StyledInfoHeading>
-            <InfoSubHeading>{t("orders.trackTransaction")}</InfoSubHeading>
-          </>
-        )}
-        {transaction.status === TransactionStatusType.succeeded && (
-          <>
-            <StyledInfoHeading>
-              {t("orders.transactionCompleted")}
-            </StyledInfoHeading>
-          </>
-        )}
-        {transaction.hash && chainId && (
-          <StyledTransactionLink chainId={chainId} hash={transaction.hash} />
-        )}
-      </InfoContainer>
-      <ButtonsContainer>
-        <MakeNewOrderButton
-          intent="primary"
-          onClick={onMakeNewOrderButtonClick}
-        >
-          {t("orders.makeNewOrder")}
-        </MakeNewOrderButton>
+    <OverlayContainer className={className}>
+      <OverlayLoader isSucceeded={isSucceeded} />
+      {isSendingOrder && (
+        <>
+          <OverlayTitle type="h2">{t("orders.orderSent")}</OverlayTitle>
+          <OverlaySubHeading>{t("orders.orderSentToMaker")}</OverlaySubHeading>
+        </>
+      )}
+      {transaction?.status === TransactionStatusType.processing && (
+        <>
+          <OverlayTitle type="h2">{t("orders.orderSubmitted")}</OverlayTitle>
+          <OverlaySubHeading>
+            {(transaction?.hash && chainId && (
+              <OverlayTransactionLink
+                chainId={chainId}
+                hash={transaction.hash}
+              />
+            )) ||
+              t("orders.orderSubmittedByMaker")}
+          </OverlaySubHeading>
+        </>
+      )}
+      {isSucceeded && (
+        <OverlayTitle type="h2">
+          {t("orders.transactionCompleted")}
+        </OverlayTitle>
+      )}
 
-        {showTrackTransactionButton && (
-          <TrackTransactionButton
-            intent="neutral"
-            onClick={onTrackTransactionButtonClick}
+      {isSucceeded && (
+        <ButtonsContainer>
+          <MakeNewOrderButton
+            intent="primary"
+            onClick={onMakeNewOrderButtonClick}
           >
-            {t("orders.track")}
-          </TrackTransactionButton>
-        )}
-      </ButtonsContainer>
-    </Container>
+            {t("orders.makeNewSwap")}
+          </MakeNewOrderButton>
+
+          {showTrackTransactionButton && (
+            <TrackTransactionButton
+              intent="neutral"
+              onClick={onTrackTransactionButtonClick}
+            >
+              {t("orders.track")}
+            </TrackTransactionButton>
+          )}
+        </ButtonsContainer>
+      )}
+    </OverlayContainer>
   );
 };
 
diff --git a/src/components/Overlay/Overlay.styles.tsx b/src/components/Overlay/Overlay.styles.tsx
deleted file mode 100644
index f06e1a474..000000000
--- a/src/components/Overlay/Overlay.styles.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { motion } from "framer-motion";
-import { css } from "styled-components";
-import styled from "styled-components/macro";
-
-import convertHexToRGBA from "../../helpers/transformHexToRgba";
-import breakPoints from "../../style/breakpoints";
-import { ScrollBarStyle } from "../../style/mixins";
-import { sizes } from "../../style/sizes";
-import CloseButton from "../../styled-components/CloseButton/CloseButton";
-import Button from "../Button/Button";
-import { ButtonStyle } from "../Button/Button.styles";
-import { InfoSubHeading } from "../Typography/Typography";
-import { StyledH2 } from "../Typography/Typography.styles";
-
-type ContainerProps = {
-  isHidden: boolean;
-  hasTitle: boolean;
-};
-
-type ScrollContainerProps = {
-  $overflow?: boolean;
-};
-
-export const ScrollContainer = styled.div<ScrollContainerProps>`
-  flex-grow: 99;
-  width: calc(100% + (${sizes.tradeContainerPadding} / 2));
-  height: 100%;
-  max-height: calc(100% - 3.75rem);
-  padding-right: calc(${sizes.tradeContainerPadding} / 2);
-  padding-left: 0.125rem;
-  padding-bottom: 1rem;
-  overflow-x: hidden;
-  overflow-y: ${(props) => (props.$overflow ? "scroll" : "hidden")};
-
-  ${ScrollBarStyle}
-`;
-
-export const ContentContainer = styled(motion.div)`
-  position: relative;
-  height: calc(100% - 5.625rem);
-  padding: 0 ${sizes.tradeContainerPadding};
-  background-color: ${(props) => props.theme.colors.black};
-
-  @media ${breakPoints.phoneOnly} {
-    height: calc(100% - 3.625rem);
-    padding: 0 ${sizes.tradeContainerMobilePadding};
-  }
-`;
-
-export const TitleContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: ${sizes.tradeContainerPadding};
-  transition: background ease-in-out 0.3s;
-
-  @media ${breakPoints.phoneOnly} {
-    padding: ${sizes.tradeContainerMobilePadding};
-  }
-`;
-
-export const TitleSubContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const StyledTitle = styled(StyledH2)<{
-  type: keyof JSX.IntrinsicElements;
-  as?: keyof JSX.IntrinsicElements;
-}>`
-  min-height: 1.875rem;
-  padding-right: 1rem;
-  flex-grow: 2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: opacity ease-in-out 0.3s;
-  will-change: opacity;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-
-export const StyledInfoSubHeading = styled(InfoSubHeading)`
-  margin-top: 0.5rem;
-  transition: opacity ease-in-out 0.3s;
-  will-change: opacity;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-
-const OverlayActionButtonStyle = css`
-  margin-top: auto;
-  justify-self: flex-end;
-`;
-
-export const OverlayActionButton = styled(Button)`
-  ${OverlayActionButtonStyle};
-`;
-
-export const OverlayActionLink = styled.a`
-  ${ButtonStyle}
-  ${OverlayActionButtonStyle};
-  color: ${(props) => props.theme.colors.alwaysWhite};
-  background-color: ${(props) => props.theme.colors.primary};
-
-  &:focus,
-  &:hover {
-    outline: 0;
-    border-color: ${(props) => props.theme.colors.primaryDark};
-    color: ${(props) => props.theme.colors.alwaysWhite};
-    background-color: ${(props) => props.theme.colors.primaryDark};
-  }
-
-  &:active {
-    border-color: ${(props) => props.theme.colors.primary};
-  }
-`;
-
-export const StyledSubTitle = styled(InfoSubHeading)`
-  transition: opacity ease-in-out 0.3s;
-  will-change: opacity;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-right: 1rem;
-`;
-
-export const Container = styled.div<ContainerProps>`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: ${(props) => (props.isHidden ? "none" : "visible")};
-  z-index: 2;
-  overflow: hidden;
-  
-  ${CloseButton} {
-    transition: transform ${(props) =>
-      props.isHidden
-        ? "0.25s ease-in"
-        : "0.75s cubic-bezier(0.12, 0.71, 0.36, 1)"};
-    transform: translateY(${(props) => (props.isHidden ? "-5rem" : "0%")});
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-  }
-  
-  ${StyledTitle} {
-    opacity: ${(props) => (props.isHidden ? 0 : 1)};
-    pointer-events: ${(props) => (props.isHidden ? "none" : "visible")};
-  }
-
-  ${StyledInfoSubHeading} {
-    opacity: ${(props) => (props.isHidden ? 0 : 1)};
-    pointer-events: ${(props) => (props.isHidden ? "none" : "visible")};
-  }
-  
-  ${TitleContainer} {
-    background: ${(props) =>
-      props.isHidden || !props.hasTitle
-        ? convertHexToRGBA(props.theme.colors.black, 0)
-        : props.theme.colors.black};
-  }
-}
-`;
diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx
deleted file mode 100644
index 144a2ce34..000000000
--- a/src/components/Overlay/Overlay.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import { AnimatePresence, useReducedMotion } from "framer-motion";
-
-import { useKeyPress } from "../../hooks/useKeyPress";
-import CloseButton from "../../styled-components/CloseButton/CloseButton";
-import {
-  Container,
-  StyledTitle,
-  TitleContainer,
-  ContentContainer,
-  TitleSubContainer,
-  StyledInfoSubHeading,
-} from "./Overlay.styles";
-
-export type OverlayProps = {
-  /**
-   * Function to close component
-   */
-  onCloseButtonClick: () => void;
-  /**
-   * Title shown on top
-   */
-  title?: string;
-  /**
-   * Subtitle shown under title
-   */
-  subTitle?: string;
-  /**
-   * Hide or show the component
-   */
-  isHidden?: boolean;
-  shouldAnimate?: boolean;
-  className?: string;
-};
-
-export const overlayShowHideAnimationDuration = 0.3;
-
-const Overlay: FC<OverlayProps> = ({
-  onCloseButtonClick,
-  title = "",
-  isHidden = true,
-  subTitle = "",
-  shouldAnimate = true,
-  children,
-  className = "",
-}) => {
-  const { t } = useTranslation();
-  const shouldReduceMotion = useReducedMotion();
-  const [initialized, setInitialized] = useState(false);
-  const animationIsDisabled = !shouldAnimate || (!isHidden && !initialized);
-
-  useKeyPress(onCloseButtonClick, ["Escape"]);
-
-  useEffect(() => {
-    setInitialized(true);
-  }, []);
-
-  return (
-    <Container hasTitle={!!title} isHidden={isHidden} className={className}>
-      <TitleContainer>
-        <TitleSubContainer>
-          <StyledTitle type="h2" as="h1">
-            {title}
-          </StyledTitle>
-          {!!subTitle && (
-            <StyledInfoSubHeading>{subTitle}</StyledInfoSubHeading>
-          )}
-        </TitleSubContainer>
-        <CloseButton
-          icon="chevron-down"
-          ariaLabel={t("common.back")}
-          iconSize={1}
-          tabIndex={isHidden ? -1 : 0}
-          onClick={onCloseButtonClick}
-        />
-      </TitleContainer>
-      <AnimatePresence>
-        {!isHidden && (
-          <ContentContainer
-            key="content"
-            transition={{
-              ease: "easeOut",
-              duration:
-                shouldReduceMotion || animationIsDisabled
-                  ? 0
-                  : overlayShowHideAnimationDuration,
-            }}
-            initial={{ y: "100%" }}
-            animate={{ y: "0%" }}
-            exit={{ y: "100%" }}
-          >
-            {children}
-          </ContentContainer>
-        )}
-      </AnimatePresence>
-    </Container>
-  );
-};
-
-export default Overlay;
diff --git a/src/components/OverlayLoader/OverlayLoader.styles.tsx b/src/components/OverlayLoader/OverlayLoader.styles.tsx
new file mode 100644
index 000000000..c77aa5e8f
--- /dev/null
+++ b/src/components/OverlayLoader/OverlayLoader.styles.tsx
@@ -0,0 +1,24 @@
+import styled from "styled-components/macro";
+
+import Icon from "../Icon/Icon";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
+  width: 3.6875rem;
+  height: 3.6875rem;
+`;
+
+export const StyledIcon = styled(Icon)`
+  width: 100%;
+  height: 100%;
+  color: ${({ theme }) =>
+    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
diff --git a/src/components/OverlayLoader/OverlayLoader.tsx b/src/components/OverlayLoader/OverlayLoader.tsx
new file mode 100644
index 000000000..698cb0984
--- /dev/null
+++ b/src/components/OverlayLoader/OverlayLoader.tsx
@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+import { OverlaySpinningLoader } from "../../styled-components/Overlay/Overlay";
+import { Container, StyledIcon } from "./OverlayLoader.styles";
+
+interface OverlayLoaderProps {
+  isSucceeded?: boolean;
+  className?: string;
+}
+
+const OverlayLoader: FC<OverlayLoaderProps> = ({ isSucceeded, className }) => {
+  return (
+    <Container className={className}>
+      {isSucceeded ? (
+        <StyledIcon name="check-circle" />
+      ) : (
+        <OverlaySpinningLoader />
+      )}
+    </Container>
+  );
+};
+
+export default OverlayLoader;
diff --git a/src/components/Page/Page.styles.tsx b/src/components/Page/Page.styles.tsx
index 3d74ca30f..ee4b8f0bf 100644
--- a/src/components/Page/Page.styles.tsx
+++ b/src/components/Page/Page.styles.tsx
@@ -22,13 +22,28 @@ export const InnerContainer = styled.div<{ $isScrollLocked?: boolean }>`
     height: 100%;
     padding-bottom: 2rem;
   }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: ${(props) =>
+      props.theme.name === "dark"
+        ? "conic-gradient(from 180deg at -10% -10%, #060607 -7.2deg, #2B71FF 37.8deg, #060607 352.8deg, #2B71FF 397.8deg)"
+        : props.theme.colors.primary};
+    transform: rotate(0.5turn) scaleX(-1);
+  }
 `;
 
 export const StyledPage = styled.div`
   position: relative;
   min-width: 18rem;
   height: 100vh;
-  min-height: 35rem;
+  min-height: 34.5rem;
 
   @media (min-height: 29rem) and (max-width: ${breakpointSizes.phone}) {
     display: flex;
@@ -52,7 +67,7 @@ export const StyledSocialButtons = styled(SocialButtons)`
 
   @media ${breakPoints.tabletPortraitUp} {
     display: flex;
-    position: fixed;
+    position: absolute;
     bottom: 1.5rem;
     right: 1.5rem;
   }
@@ -68,3 +83,17 @@ export const StyledSocialButtons = styled(SocialButtons)`
     padding-bottom: 1.5rem;
   }
 `;
+
+export const BlurredOverlay = styled.div<{ isVisible: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  backdrop-filter: blur(20px);
+  opacity: ${(props) => (props.isVisible ? "1" : "0")};
+  transition: opacity 0.3s ease-out;
+  filter: brightness(0.5);
+  pointer-events: ${(props) => (props.isVisible ? "visible" : "none")};
+`;
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 3af92ed3a..08cc100b2 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -13,7 +13,12 @@ import HelmetContainer from "../HelmetContainer/HelmetContainer";
 import Toaster from "../Toasts/Toaster";
 import Toolbar from "../Toolbar/Toolbar";
 import WidgetFrame from "../WidgetFrame/WidgetFrame";
-import { InnerContainer, StyledPage, StyledSocialButtons } from "./Page.styles";
+import {
+  BlurredOverlay,
+  InnerContainer,
+  StyledPage,
+  StyledSocialButtons,
+} from "./Page.styles";
 
 type PageProps = {
   className?: string;
@@ -30,11 +35,17 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
   const appRouteParams = useAppRouteParams();
   const {
     showMobileToolbar,
+    showModalOverlay,
+    showTransactionOverlay,
     transactionsTabIsOpen,
     pageHeight,
+    overlayHeight,
     setShowMobileToolbar,
   } = useContext(InterfaceContext);
 
+  const showBlurOverlay =
+    showModalOverlay || showTransactionOverlay || transactionsTabIsOpen;
+
   useKeyPress(() => setShowMobileToolbar(false), ["Escape"]);
 
   const reset = () => {
@@ -70,7 +81,9 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
   return (
     <StyledPage style={{ height: `${pageHeight}px` }} className={className}>
       <HelmetContainer title={t("app.title")} />
-      <InnerContainer>
+      <InnerContainer
+        style={{ minHeight: showModalOverlay ? `${overlayHeight}px` : "unset" }}
+      >
         <Toaster open={transactionsTabIsOpen} />
         <Toolbar
           isHiddenOnMobile={!showMobileToolbar}
@@ -83,13 +96,15 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
         />
 
         <WidgetFrame
-          isOpen={transactionsTabIsOpen}
           isConnected={web3ProviderIsActive}
+          isOverlayOpen={showModalOverlay}
         >
           {children}
-
           <WalletConnector />
         </WidgetFrame>
+
+        <BlurredOverlay isVisible={showBlurOverlay} />
+
         <StyledSocialButtons />
       </InnerContainer>
     </StyledPage>
diff --git a/src/components/PriceConverter/PriceConverter.styles.tsx b/src/components/PriceConverter/PriceConverter.styles.tsx
new file mode 100644
index 000000000..5fcac1cc7
--- /dev/null
+++ b/src/components/PriceConverter/PriceConverter.styles.tsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+import { BorderlessButtonStyle } from "../../style/mixins";
+import IconButton from "../IconButton/IconButton";
+
+export const RevertPriceButton = styled(IconButton)`
+  transform: rotate(90deg);
+  position: relative;
+  margin-left: 0.25rem;
+  padding: 0.25rem;
+  font-size: 1rem;
+  color: ${(props) => props.theme.colors.white};
+
+  &:hover,
+  &:focus {
+    color: ${(props) => props.theme.colors.white};
+  }
+
+  ${BorderlessButtonStyle}
+`;
diff --git a/src/components/PriceConverter/PriceConverter.tsx b/src/components/PriceConverter/PriceConverter.tsx
new file mode 100644
index 000000000..d21e636ae
--- /dev/null
+++ b/src/components/PriceConverter/PriceConverter.tsx
@@ -0,0 +1,41 @@
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useToggle } from "react-use";
+
+import BigNumber from "bignumber.js";
+
+import { stringToSignificantDecimals } from "../../helpers/stringToSignificantDecimals";
+import { InfoSectionHeading } from "../../styled-components/InfoSection/InfoSection";
+import { RevertPriceButton } from "./PriceConverter.styles";
+
+interface PriceConverterProps {
+  baseTokenSymbol: string;
+  price: BigNumber;
+  quoteTokenSymbol: string;
+  className?: string;
+}
+
+export const PriceConverter: FC<PriceConverterProps> = ({
+  baseTokenSymbol,
+  price,
+  quoteTokenSymbol,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  const [isPriceInverted, toggleIsPriceInverted] = useToggle(false);
+
+  return (
+    <InfoSectionHeading className={className}>
+      1 {isPriceInverted ? quoteTokenSymbol : baseTokenSymbol} ={" "}
+      {stringToSignificantDecimals(price.toString())}{" "}
+      {isPriceInverted ? baseTokenSymbol : quoteTokenSymbol}
+      <RevertPriceButton
+        icon="swap"
+        ariaLabel={t("orders.revertPrice")}
+        iconSize={1}
+        onClick={toggleIsPriceInverted}
+      />
+    </InfoSectionHeading>
+  );
+};
diff --git a/src/components/ProtocolFeeOverlay/ProtocolFeeOverlay.tsx b/src/components/ProtocolFeeOverlay/ProtocolFeeOverlay.tsx
index 0459e1de8..9bf65d0f5 100644
--- a/src/components/ProtocolFeeOverlay/ProtocolFeeOverlay.tsx
+++ b/src/components/ProtocolFeeOverlay/ProtocolFeeOverlay.tsx
@@ -2,7 +2,7 @@ import { FC, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import ProtocolFeeModal from "../InformationModals/subcomponents/ProtocolFeeModal/ProtocolFeeModal";
-import Overlay from "../Overlay/Overlay";
+import ModalOverlay from "../ModalOverlay/ModalOverlay";
 
 interface ProtocolFeeOverlayProps {
   isHidden: boolean;
@@ -18,14 +18,14 @@ const ProtocolFeeOverlay: FC<ProtocolFeeOverlayProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Overlay
+    <ModalOverlay
       title={t("information.protocolFee.title")}
       isHidden={!isHidden}
-      onCloseButtonClick={onCloseButtonClick}
+      onClose={onCloseButtonClick}
       className={className}
     >
       <ProtocolFeeModal onCloseButtonClick={onCloseButtonClick} />
-    </Overlay>
+    </ModalOverlay>
   );
 };
 
diff --git a/src/components/SettingsButton/SettingsButton.style.tsx b/src/components/SettingsButton/SettingsButton.style.tsx
index 750e90f19..0379cf4de 100644
--- a/src/components/SettingsButton/SettingsButton.style.tsx
+++ b/src/components/SettingsButton/SettingsButton.style.tsx
@@ -9,14 +9,8 @@ import {
 } from "../../style/mixins";
 import { IconButtonStyle } from "../IconButton/IconButton.styles";
 
-type ContainerProps = {
-  isOpen: boolean;
-};
-
-export const Container = styled.div<ContainerProps>`
+export const Container = styled.div`
   position: relative;
-  transform: ${(props) => (props.isOpen ? "translate(-12.75rem, 0)" : "0")};
-  transition: transform 0.3s ease-in-out;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
diff --git a/src/components/SettingsButton/SettingsButton.tsx b/src/components/SettingsButton/SettingsButton.tsx
index 0704875f2..aa2959950 100644
--- a/src/components/SettingsButton/SettingsButton.tsx
+++ b/src/components/SettingsButton/SettingsButton.tsx
@@ -7,14 +7,12 @@ import { Container, SettingsButtonContainer } from "./SettingsButton.style";
 
 type SettingsButtonType = {
   settingsOpen: boolean;
-  transactionsTabOpen: boolean;
   setSettingsOpen: (x: boolean) => void;
   className?: string;
 };
 
 const SettingsButton = ({
   settingsOpen,
-  transactionsTabOpen,
   setSettingsOpen,
   className,
 }: SettingsButtonType) => {
@@ -57,11 +55,7 @@ const SettingsButton = ({
 
   return (
     <>
-      <Container
-        className={className}
-        ref={containerRef}
-        isOpen={transactionsTabOpen}
-      >
+      <Container className={className} ref={containerRef}>
         <SettingsButtonContainer
           aria-label={t("common.settings")}
           onClick={() => setSettingsOpen(!settingsOpen)}
@@ -69,9 +63,7 @@ const SettingsButton = ({
           <Icon iconSize={1.5} name="settings" />
         </SettingsButtonContainer>
       </Container>
-      {settingsOpen && (
-        <SettingsPopover isOpen={transactionsTabOpen} popoverRef={popoverRef} />
-      )}
+      {settingsOpen && <SettingsPopover popoverRef={popoverRef} />}
     </>
   );
 };
diff --git a/src/components/SettingsPopover/SettingsPopover.styles.tsx b/src/components/SettingsPopover/SettingsPopover.styles.tsx
index 456ce94b0..b9953d63b 100644
--- a/src/components/SettingsPopover/SettingsPopover.styles.tsx
+++ b/src/components/SettingsPopover/SettingsPopover.styles.tsx
@@ -8,11 +8,7 @@ import {
 } from "../../style/mixins";
 import PopoverSection from "./subcomponents/PopoverSection/PopoverSection";
 
-type ContainerProps = {
-  isOpen: boolean;
-};
-
-export const Container = styled.div<ContainerProps>`
+export const Container = styled.div`
   position: absolute;
   display: grid;
   grid-template-rows: 5rem auto 5.125rem;
@@ -21,7 +17,6 @@ export const Container = styled.div<ContainerProps>`
   top: 5rem;
   right: 3.75rem;
   padding-top: 0.5rem;
-  transform: ${(props) => (props.isOpen ? "translate(-11.5rem, 0)" : "0")};
   color: ${(props) => props.theme.colors.darkSubText};
   background-color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.darkGrey : theme.colors.black};
@@ -30,7 +25,7 @@ export const Container = styled.div<ContainerProps>`
   z-index: 1000;
 
   @media ${breakPoints.tabletPortraitUp} {
-    right: 13.75rem;
+    right: 1.5rem;
   }
 
   @media ${breakPoints.phoneOnly} {
@@ -64,6 +59,11 @@ export const ThemeButton = styled.button<ButtonStyleProps>`
       : props.theme.colors.darkSubText};
   background-color: ${(props) =>
     props.$isActive ? props.theme.colors.borderGrey : "transparent"};
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 `;
 
 type LocaleContainerType = {
diff --git a/src/components/SettingsPopover/SettingsPopover.tsx b/src/components/SettingsPopover/SettingsPopover.tsx
index e249f5c5a..f14991c46 100644
--- a/src/components/SettingsPopover/SettingsPopover.tsx
+++ b/src/components/SettingsPopover/SettingsPopover.tsx
@@ -27,13 +27,11 @@ import GithubInfo from "./subcomponents/GithubInfo/GithubInfo";
 import PopoverSection from "./subcomponents/PopoverSection/PopoverSection";
 
 type SettingsPopoverPropsType = {
-  isOpen: boolean;
   popoverRef: RefObject<HTMLDivElement>;
   className?: string;
 };
 
 const SettingsPopover = ({
-  isOpen,
   popoverRef,
   className,
 }: SettingsPopoverPropsType) => {
@@ -69,7 +67,7 @@ const SettingsPopover = ({
   }, [popoverRef, scrollContainerRef, width, height]);
 
   return (
-    <Container isOpen={isOpen} ref={popoverRef} className={className}>
+    <Container ref={popoverRef} className={className}>
       <PopoverSection title={t("common.theme")}>
         <ThemeContainer>
           <ThemeButton
@@ -79,6 +77,7 @@ const SettingsPopover = ({
             {t("common.system")}
           </ThemeButton>
           <ThemeButton
+            disabled
             $isActive={selectedTheme === "light"}
             onClick={() => handleThemeButtonClick("light")}
           >
diff --git a/src/components/SettingsPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx b/src/components/SettingsPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
index a1008c5e4..171720531 100644
--- a/src/components/SettingsPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
+++ b/src/components/SettingsPopover/subcomponents/PopoverSection/PopoverSection.styles.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components/macro";
 
-import { StyledTitle } from "../../../Overlay/Overlay.styles";
+import { StyledTitle } from "../../../ModalOverlay/ModalOverlay.styles";
 
 export const Container = styled.div`
   padding: 0 1rem;
diff --git a/src/components/SocialButtons/SocialButtons.styles.tsx b/src/components/SocialButtons/SocialButtons.styles.tsx
index ba64b2a49..66893deb9 100644
--- a/src/components/SocialButtons/SocialButtons.styles.tsx
+++ b/src/components/SocialButtons/SocialButtons.styles.tsx
@@ -4,7 +4,7 @@ import { BorderedPill, InputOrButtonBorderStyle } from "../../style/mixins";
 import Icon from "../Icon/Icon";
 import { Link } from "../Typography/Typography";
 
-export const Container = styled.div`
+export const Container = styled.div<{ isVisible: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: flex-end;
@@ -12,6 +12,8 @@ export const Container = styled.div`
   position: relative;
   height: 2.5rem;
   z-index: 1;
+  opacity: ${({ isVisible }) => (isVisible ? "1" : "0")};
+  transition: opacity 0.3s ease-out;
 `;
 
 export const Divider = styled.div`
diff --git a/src/components/SocialButtons/SocialButtons.tsx b/src/components/SocialButtons/SocialButtons.tsx
index bf74034b7..32b8d05fe 100644
--- a/src/components/SocialButtons/SocialButtons.tsx
+++ b/src/components/SocialButtons/SocialButtons.tsx
@@ -1,5 +1,6 @@
-import { FC, useState } from "react";
+import { FC, useContext, useState } from "react";
 
+import { InterfaceContext } from "../../contexts/interface/Interface";
 import { icons } from "../Icon/Icon";
 import {
   Container,
@@ -47,6 +48,7 @@ type SocialButtonsProps = {
 };
 
 const SocialButtons: FC<SocialButtonsProps> = ({ className = "" }) => {
+  const { transactionsTabIsOpen } = useContext(InterfaceContext);
   const [hoveredIcon, setHoveredIcon] = useState<keyof typeof icons | null>(
     null
   );
@@ -69,7 +71,7 @@ const SocialButtons: FC<SocialButtonsProps> = ({ className = "" }) => {
   };
 
   return (
-    <Container className={className}>
+    <Container isVisible={!transactionsTabIsOpen} className={className}>
       {destinations.map((dest) => {
         const locales = Object.keys(dest.locales || {});
 
diff --git a/src/components/SwapInputs/SwapInputs.styles.tsx b/src/components/SwapInputs/SwapInputs.styles.tsx
index bfe39b074..fd03c0bd1 100644
--- a/src/components/SwapInputs/SwapInputs.styles.tsx
+++ b/src/components/SwapInputs/SwapInputs.styles.tsx
@@ -13,7 +13,6 @@ export const Container = styled.div<{ $disabled: boolean }>`
   will-change: opacity, transform;
   transition: opacity 0.3s ease-in-out,
     transform 0.4s cubic-bezier(0.45, 0.22, 0, 1);
-  transform: scale(${(props) => (props.$disabled ? 0.95 : 1)});
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -22,28 +21,36 @@ export const Container = styled.div<{ $disabled: boolean }>`
 `;
 
 export const SwitchTokensButton = styled.button`
-  ${InputOrButtonBorderStyle}
+  ${InputOrButtonBorderStyle};
 
   position: absolute;
-  right: calc(50% - 0.75rem);
-  top: calc(50% - 0.75rem);
+  right: calc(50% - 1rem);
+  top: calc(50% - 1rem);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 2rem;
+  aspect-ratio: 1;
   border-radius: 50%;
   color: ${(props) =>
     props.theme.name === "dark"
       ? props.theme.colors.lightGrey
       : props.theme.colors.darkGrey};
-  background-color: ${(props) => props.theme.colors.black};
-  font-size: 1.25rem;
+  background-color: ${(props) =>
+    props.theme.name === "dark"
+      ? props.theme.colors.darkGrey
+      : props.theme.colors.white};
   z-index: 1;
 
   &:disabled {
     pointer-events: none;
   }
+
+  @media ${breakPoints.phoneOnly} {
+    right: calc(50% - 0.875rem);
+    top: calc(50% - 0.875rem);
+    width: 1.75rem;
+  }
 `;
 
 export const MaxAmountInfoTooltip = styled(Tooltip)`
diff --git a/src/components/SwapInputs/SwapInputs.tsx b/src/components/SwapInputs/SwapInputs.tsx
index 39993f2cb..ee2fa5a10 100644
--- a/src/components/SwapInputs/SwapInputs.tsx
+++ b/src/components/SwapInputs/SwapInputs.tsx
@@ -46,6 +46,7 @@ const SwapInputs: FC<{
   onMaxButtonClick: () => void;
   onQuoteAmountChange?: (newValue: string) => void;
   onSwitchTokensButtonClick?: () => void;
+  className?: string;
 }> = ({
   disabled = false,
   canSetQuoteAmount = false,
@@ -74,6 +75,8 @@ const SwapInputs: FC<{
   onMaxButtonClick,
   onQuoteAmountChange,
   onSwitchTokensButtonClick,
+
+  className = "",
 }) => {
   const { t } = useTranslation();
   const [showMaxAmountInfo, setShowMaxAmountInfo] = useState(false);
@@ -115,7 +118,7 @@ const SwapInputs: FC<{
   };
 
   return (
-    <Container $disabled={disabled}>
+    <Container $disabled={disabled} className={className}>
       <TokenSelect
         hasError={!!baseAmountError}
         isQuote={isQuote}
@@ -148,7 +151,7 @@ const SwapInputs: FC<{
         disabled={tradeNotAllowed || readOnly}
         onClick={onSwitchTokensButtonClick}
       >
-        {getSwitchTokensButtonIcon(tradeNotAllowed)}
+        {getSwitchTokensButtonIcon(tradeNotAllowed, isQuote)}
       </SwitchTokensButton>
       <TokenSelect
         hasError={!!quoteAmountError}
diff --git a/src/components/SwapInputs/helpers/getSwapInputIcon.tsx b/src/components/SwapInputs/helpers/getSwapInputIcon.tsx
index c36f9d95f..6bd9309da 100644
--- a/src/components/SwapInputs/helpers/getSwapInputIcon.tsx
+++ b/src/components/SwapInputs/helpers/getSwapInputIcon.tsx
@@ -3,11 +3,16 @@ import { ReactElement } from "react";
 import Icon from "../../Icon/Icon";
 
 export default function getSwapInputIcon(
-  tradeNotAllowed: boolean
+  tradeNotAllowed: boolean,
+  hasQuote: boolean
 ): ReactElement {
   if (tradeNotAllowed) {
     return <Icon name="forbidden" iconSize={0.9375} />;
   }
 
-  return <Icon name="swap" iconSize={0.8125} />;
+  if (hasQuote) {
+    return <Icon name="arrow-down" iconSize={0.9375} />;
+  }
+
+  return <Icon name="swap" iconSize={1.125} />;
 }
diff --git a/src/components/Toasts/ToastController.tsx b/src/components/Toasts/ToastController.tsx
index b6a7482bc..dd3de4dbc 100644
--- a/src/components/Toasts/ToastController.tsx
+++ b/src/components/Toasts/ToastController.tsx
@@ -10,7 +10,6 @@ import {
   SubmittedTransaction,
   SubmittedOrder,
   SubmittedWithdrawTransaction,
-  SubmittedOrderUnderConsideration,
 } from "../../entities/SubmittedTransaction/SubmittedTransaction";
 import findEthOrTokenByAddress from "../../helpers/findEthOrTokenByAddress";
 import { TransactionTypes } from "../../types/transactionTypes";
diff --git a/src/components/TokenList/TokenList.styles.tsx b/src/components/TokenList/TokenList.styles.tsx
index 6a59dda76..e6ab06dc7 100644
--- a/src/components/TokenList/TokenList.styles.tsx
+++ b/src/components/TokenList/TokenList.styles.tsx
@@ -1,29 +1,28 @@
 import styled from "styled-components/macro";
 
 import isActiveLanguageLogographic from "../../helpers/isActiveLanguageLogographic";
-import breakPoints from "../../style/breakpoints";
 import { InputTextStyle } from "../../style/mixins";
-import { sizes } from "../../style/sizes";
+import { fontWide } from "../../style/themes";
 import Icon from "../Icon/Icon";
-import { ScrollContainer } from "../Overlay/Overlay.styles";
+import { ScrollContainer } from "../ModalOverlay/ModalOverlay.styles";
 import TextInput from "../TextInput/TextInput";
 import { StyledInput } from "../TextInput/TextInput.styles";
-import { Title } from "../Typography/Typography";
 
 export const StyledScrollContainer = styled(ScrollContainer)`
-  max-height: calc(100% - 7rem);
-  overflow-y: ${(props) => (props.$overflow ? "scroll" : "hidden")};
+  position: relative;
+  margin-block-start: 0.625rem;
+  margin-inline-start: -0.875rem;
+  width: calc(100% + 3.25rem);
+  max-height: 20rem;
+  padding-inline: 0.875rem 2.25rem;
+  padding-block-start: 0.125rem;
+  overflow-y: auto;
 `;
 
 export const ContentContainer = styled.div`
   position: relative;
   height: 100%;
-  padding: 0 ${sizes.tradeContainerPadding} ${sizes.tradeContainerPadding};
-  background-color: ${(props) => props.theme.colors.black};
-
-  @media ${breakPoints.phoneOnly} {
-    padding: 0 1.5rem ${sizes.tradeContainerMobilePadding};
-  }
+  padding-block-end: 2rem;
 `;
 
 export const SizingContainer = styled.div`
@@ -34,30 +33,23 @@ export const SizingContainer = styled.div`
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
+  margin-block-start: 2rem;
   width: 100%;
   height: 100%;
-`;
-
-export const StyledTitle = styled(Title)`
-  visibility: hidden;
-`;
-
-export const StyledLabel = styled.label`
-  font-size: 1rem;
+  max-height: calc(100% - 5.75rem);
 `;
 
 export const SearchInput = styled(TextInput)`
-  margin-bottom: 1.25rem;
   width: 100%;
-  background-color: ${(props) => props.theme.colors.black};
 
   ${StyledInput} {
     ${InputTextStyle};
 
-    border-radius: 2px;
+    border-radius: 0.5rem;
+    padding-inline: 1.25rem;
+    line-height: 3;
+    font-size: 1.25rem;
+    height: 3.5rem;
     background: transparent;
   }
 `;
@@ -68,25 +60,18 @@ export const Legend = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.25rem;
   min-height: 1.5rem;
+  margin-block-start: 2rem;
 `;
 
 export const LegendItem = styled.div`
   word-break: keep-all;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: ${() => (isActiveLanguageLogographic() ? "0.875rem" : "0.625rem")};
+  font-family: ${fontWide};
+  font-weight: 500;
+  font-size: ${() => (isActiveLanguageLogographic() ? "0.875rem" : "1rem")};
   color: ${(props) => props.theme.colors.lightGrey};
 `;
 
-export const LegendDivider = styled.div`
-  margin: 0 1rem;
-  width: 100%;
-  height: 1px;
-  background: ${({ theme }) => theme.colors.borderGrey};
-`;
-
 export const InactiveTitleContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.borderGrey};
   border-radius: 2px;
@@ -109,5 +94,6 @@ export const InformationIcon = styled(Icon)`
 `;
 
 export const NoResultsContainer = styled.div`
+  margin-block-start: 1rem;
   text-align: center;
 `;
diff --git a/src/components/TokenList/TokenList.tsx b/src/components/TokenList/TokenList.tsx
index df33488b4..d88706952 100644
--- a/src/components/TokenList/TokenList.tsx
+++ b/src/components/TokenList/TokenList.tsx
@@ -11,12 +11,10 @@ import nativeCurrency from "../../constants/nativeCurrency";
 import { BalancesState } from "../../features/balances/balancesSlice";
 import {
   addActiveToken,
-  addCustomToken,
   removeActiveToken,
-  removeCustomToken,
-} from "../../features/metadata/metadataSlice";
+} from "../../features/metadata/metadataActions";
 import useWindowSize from "../../hooks/useWindowSize";
-import { OverlayActionButton } from "../Overlay/Overlay.styles";
+import { OverlayActionButton } from "../ModalOverlay/ModalOverlay.styles";
 import { InfoHeading } from "../Typography/Typography";
 import {
   Container,
@@ -24,7 +22,6 @@ import {
   TokenContainer,
   Legend,
   LegendItem,
-  LegendDivider,
   StyledScrollContainer,
   ContentContainer,
   NoResultsContainer,
@@ -86,7 +83,6 @@ const TokenList = ({
   const sizingContainerRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [overflow, setOverflow] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const [tokenQuery, setTokenQuery] = useState<string>("");
 
@@ -135,11 +131,6 @@ const TokenList = ({
     ) {
       const { offsetTop, scrollHeight } = scrollContainerRef.current;
       const { clientHeight: buttonHeight } = buttonRef.current;
-
-      setOverflow(
-        scrollHeight + offsetTop + buttonHeight >
-          sizingContainerRef.current.offsetHeight
-      );
     }
   }, [
     sizingContainerRef,
@@ -153,12 +144,7 @@ const TokenList = ({
   ]);
 
   const handleAddToken = async (address: string) => {
-    const isCustomToken = scrapedToken?.address === address;
-
     if (library && account) {
-      if (isCustomToken) {
-        dispatch(addCustomToken(address));
-      }
       await dispatch(addActiveToken(address));
 
       onAfterAddActiveToken && onAfterAddActiveToken(address);
@@ -168,7 +154,6 @@ const TokenList = ({
   const handleRemoveActiveToken = (address: string) => {
     if (library) {
       dispatch(removeActiveToken(address));
-      dispatch(removeCustomToken(address));
 
       onAfterRemoveActiveToken && onAfterRemoveActiveToken(address);
     }
@@ -190,13 +175,12 @@ const TokenList = ({
             }}
           />
 
-          <StyledScrollContainer ref={scrollContainerRef} $overflow={overflow}>
-            <Legend>
-              <LegendItem>{t("common.token")}</LegendItem>
-              <LegendDivider />
-              <LegendItem>{t("balances.balance")}</LegendItem>
-            </Legend>
+          <Legend>
+            <LegendItem>{t("common.token")}</LegendItem>
+            <LegendItem>{t("balances.balance")}</LegendItem>
+          </Legend>
 
+          <StyledScrollContainer ref={scrollContainerRef}>
             <TokenContainer>
               {[nativeCurrency[chainId || 1], ...sortedFilteredTokens].map(
                 (token) => (
diff --git a/src/components/TokenList/hooks/useScrapeToken.ts b/src/components/TokenList/hooks/useScrapeToken.ts
index 3ee68d20e..d201a9df6 100644
--- a/src/components/TokenList/hooks/useScrapeToken.ts
+++ b/src/components/TokenList/hooks/useScrapeToken.ts
@@ -5,7 +5,7 @@ import { TokenInfo } from "@airswap/utils";
 import { Web3Provider } from "@ethersproject/providers";
 import { useWeb3React } from "@web3-react/core";
 
-import { addTokenInfo } from "../../../features/metadata/metadataSlice";
+import { addUnknownTokenInfo } from "../../../features/metadata/metadataActions";
 import scrapeToken from "../../../helpers/scrapeToken";
 
 const useScrapeToken = (
@@ -19,7 +19,7 @@ const useScrapeToken = (
 
   useEffect(() => {
     if (scrapedToken) {
-      dispatch(addTokenInfo(scrapedToken));
+      dispatch(addUnknownTokenInfo(scrapedToken));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrapedToken]);
diff --git a/src/components/TokenList/subcomponents/TokenButton/TokenButton.styles.tsx b/src/components/TokenList/subcomponents/TokenButton/TokenButton.styles.tsx
index 47a8d30a0..48ad7c90e 100644
--- a/src/components/TokenList/subcomponents/TokenButton/TokenButton.styles.tsx
+++ b/src/components/TokenList/subcomponents/TokenButton/TokenButton.styles.tsx
@@ -6,6 +6,7 @@ import { BorderlessButtonStyle, TextEllipsis } from "../../../../style/mixins";
 import { fontMono } from "../../../../style/themes";
 import AccountLink from "../../../AccountLink/AccountLink";
 import Icon from "../../../Icon/Icon";
+import TokenLogo from "../../../TokenLogo/TokenLogo";
 
 type ContainerProps = {
   disabled: boolean;
@@ -24,7 +25,7 @@ export const TokenName = styled.h3`
 
   line-height: 1.25;
   max-width: 8.5rem;
-  font-size: 1rem;
+  font-size: 1.25rem;
   font-weight: 400;
   text-align: left;
   color: ${({ theme }) =>
@@ -32,12 +33,13 @@ export const TokenName = styled.h3`
 
   @media ${breakPoints.phoneOnly} {
     line-height: calc(1 + (1 / 3));
-    font-size: 0.75rem;
+    font-size: 1rem;
   }
 `;
 
 export const Balance = styled.div`
   font-family: ${fontMono};
+  font-size: 1.25rem;
   font-weight: 500;
   text-align: right;
   white-space: nowrap;
@@ -81,26 +83,44 @@ export const TokenSymbolAndName = styled.div`
   }
 `;
 
+export const StyledTokenLogo = styled(TokenLogo)`
+  min-width: 1.875rem;
+  aspect-ratio: 1;
+
+  @media ${breakPoints.phoneOnly} {
+    min-width: 1.5rem;
+  }
+`;
+
 export const Container = styled.button<ContainerProps>`
   ${BorderlessButtonStyle};
 
   display: grid;
   grid-auto-flow: column;
-  grid-template-columns: 1.25rem 50% calc(50% - 3.5rem);
-  grid-gap: 1rem;
+  grid-template-columns: 1.25rem 50% calc(50% - 4.25rem);
+  grid-gap: 1.5rem;
   align-items: center;
   position: relative;
   width: 100%;
-  height: 2rem;
-  padding: 0.25rem 0;
+  padding-block: 0.625rem;
   opacity: ${(props) => (props.disabled ? 0.6 : 1)};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 
-  &:not(:first-of-type) {
-    margin-top: 0.5rem;
-  }
+  &:hover,
+  &:focus-within {
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -0.125rem;
+      left: -0.75rem;
+      border-radius: 0.5rem;
+      width: calc(100% + 1.5rem);
+      height: calc(100% + 0.25rem);
+      background: ${(props) => props.theme.colors.darkBlue};
+      z-index: -1;
+    }
 
-  &:hover {
     ${TokenName} {
       color: ${({ theme, disabled }) =>
         disabled
@@ -128,8 +148,9 @@ export const Container = styled.button<ContainerProps>`
       props.showDeleteButton
         ? "1.25rem calc(100% - 7.5rem) 4.25rem"
         : "1.25rem calc(50% - 2rem) calc(50% - 1.5rem)"};
+    gap: 1rem;
     align-items: flex-start;
-    height: 2.5rem;
+    height: 3.25rem;
   }
 `;
 
@@ -144,7 +165,7 @@ export const Symbol = styled.h3`
   width: 5rem;
   text-align: left;
   line-height: calc(1 + (1 / 3));
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
@@ -185,6 +206,9 @@ export const Tooltip = styled.div`
 export const StyledIcon = styled(AccountLink)`
   display: flex;
   position: relative;
+  margin-inline-start: 0.25rem;
+  translate: 0 0.125rem;
+  transform: scale(0.875);
 
   &:hover {
     color: ${(props) => props.theme.colors.white};
diff --git a/src/components/TokenList/subcomponents/TokenButton/TokenButton.tsx b/src/components/TokenList/subcomponents/TokenButton/TokenButton.tsx
index 12097e3a3..8c9417790 100644
--- a/src/components/TokenList/subcomponents/TokenButton/TokenButton.tsx
+++ b/src/components/TokenList/subcomponents/TokenButton/TokenButton.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { TokenInfo } from "@airswap/utils";
 
 import stringToSignificantDecimals from "../../../../helpers/stringToSignificantDecimals";
-import TokenLogo from "../../../TokenLogo/TokenLogo";
 import {
   Container,
   Symbol,
@@ -14,6 +13,7 @@ import {
   TokenSymbolAndName,
   StyledIcon,
   Tooltip,
+  StyledTokenLogo,
 } from "./TokenButton.styles";
 
 export type TokenRowProps = {
@@ -70,7 +70,7 @@ const TokenButton = ({
       disabled={disabled}
       showDeleteButton={showDeleteButton}
     >
-      <TokenLogo logoURI={token.logoURI} size="small" />
+      <StyledTokenLogo logoURI={token.logoURI} />
 
       <TokenSymbolAndName>
         <Symbol>{token.symbol}</Symbol>
diff --git a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
index e02f088fd..79254de38 100644
--- a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
+++ b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components/macro";
 
+import TokenLogo from "../../../TokenLogo/TokenLogo";
 import { Metadata } from "../../../Typography/Typography";
 
 export const Container = styled.div`
@@ -19,6 +20,11 @@ export const Container = styled.div`
   }
 `;
 
+export const StyledTokenLogo = styled(TokenLogo)`
+  min-width: 2rem;
+  aspect-ratio: 1;
+`;
+
 export const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.tsx b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.tsx
index 5beed4961..566a58bd9 100644
--- a/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.tsx
+++ b/src/components/TokenList/subcomponents/TokenImportButton/TokenImportButton.tsx
@@ -10,6 +10,7 @@ import {
   TokenName,
   ImportButton,
   UnsupportedTokenText,
+  StyledTokenLogo,
 } from "./TokenImportButton.styles";
 
 export type TokenImportRowProps = {
@@ -36,7 +37,7 @@ const TokenImportButton = ({
 
   return (
     <Container>
-      <TokenLogo logoURI={token.logoURI} size="medium" />
+      <StyledTokenLogo logoURI={token.logoURI} />
 
       <TextContainer>
         <Symbol>{token.symbol}</Symbol>
diff --git a/src/components/TokenLogo/TokenLogo.styles.tsx b/src/components/TokenLogo/TokenLogo.styles.tsx
index 423fc3390..090d943e8 100644
--- a/src/components/TokenLogo/TokenLogo.styles.tsx
+++ b/src/components/TokenLogo/TokenLogo.styles.tsx
@@ -1,23 +1,10 @@
 import styled from "styled-components/macro";
 
-export type sizes = "tiny" | "small" | "medium" | "large";
-
 export type StyledTokenLogoProps = {
-  size: sizes;
   logoURI?: string;
 };
 
-const remSizes: Record<sizes, string> = {
-  tiny: "1.125rem",
-  small: "1.5rem",
-  medium: "2rem",
-  large: "2.5rem",
-};
-
 const StyledTokenLogo = styled.div<StyledTokenLogoProps>`
-  width: ${(props) => remSizes[props.size]};
-  min-width: ${(props) => remSizes[props.size]};
-  height: ${(props) => remSizes[props.size]};
   background-image: ${(props) =>
     !!props.logoURI ? `url("${props.logoURI}")` : "none"};
   background-size: cover;
diff --git a/src/components/TokenSelect/TokenSelect.styles.tsx b/src/components/TokenSelect/TokenSelect.styles.tsx
index 626f733be..b9a723ae3 100644
--- a/src/components/TokenSelect/TokenSelect.styles.tsx
+++ b/src/components/TokenSelect/TokenSelect.styles.tsx
@@ -3,19 +3,29 @@ import { MdKeyboardArrowDown } from "react-icons/md";
 import styled, { css, keyframes } from "styled-components/macro";
 
 import isActiveLanguageLogographic from "../../helpers/isActiveLanguageLogographic";
+import breakPoints from "../../style/breakpoints";
 import {
   BorderlessButtonStyle,
   InputOrButtonBorderStyle,
   TextEllipsis,
 } from "../../style/mixins";
+import { sizes } from "../../style/sizes";
+import { fontWide } from "../../style/themes";
 import AccountLink from "../AccountLink/AccountLink";
 import TokenLogo from "../TokenLogo/TokenLogo";
 import StyledTokenLogo from "../TokenLogo/TokenLogo.styles";
 import { SelectItem, FormLabel, FormInput } from "../Typography/Typography";
+import TokenSelectBackground from "./subcomponents/TokenSelectBackground/TokenSelectBackground";
+import {
+  TokenSelectLeftBorderBackground,
+  TokenSelectLeftGradientBackground,
+  TokenSelectRightBorderBackground,
+  TokenSelectRightGradientBackground,
+} from "./subcomponents/TokenSelectBackground/TokenSelectBackground.styles";
 
 const fadeOut = keyframes`
   from {
-    opacity: 1;
+    opacity: 0.5;
   }
 
   to {
@@ -44,14 +54,19 @@ const fontTransition = css`
 export const ContainingButton = styled.button`
   display: flex;
   flex-direction: row;
+  position: relative;
   width: 40%;
-  height: 2.5rem;
+  height: 3.125rem;
   cursor: ${(props) => (props.disabled ? "initial" : "pointer")};
   pointer-events: ${(props) => (props.disabled ? "none" : "inherit")};
 
   &:focus {
     outline: 0;
   }
+
+  @media ${breakPoints.phoneOnly} {
+    height: 2.75rem;
+  }
 `;
 
 export const AmountAndDetailsContainer = styled.div`
@@ -77,20 +92,23 @@ export const MaxButtonStyle = css`
   position: relative;
   bottom: 1px;
   align-self: center;
-  border-radius: 0.125rem;
-  font-family: Verdana, sans-serif;
-  font-weight: 600;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+  font-family: ${fontWide};
+  font-weight: 500;
   font-size: 0.75rem;
   line-height: 1;
-  background-color: ${(props) => props.theme.colors.lightGrey};
-  color: ${(props) => props.theme.colors.black};
-  opacity: 0.6;
+  padding: 0.25rem 0.5rem;
+  background-color: ${(props) => props.theme.colors.darkBlue};
+  color: ${(props) => props.theme.colors.lightGrey};
+  opacity: 1;
 
   ${BorderlessButtonStyle}
 
   &:hover,
   &:focus {
-    background-color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.white};
     opacity: 1;
   }
 `;
@@ -99,10 +117,8 @@ export const MaxButton = styled.button`
   ${MaxButtonStyle};
 
   width: ${() => (isActiveLanguageLogographic() ? "1.75rem" : "auto")};
-  padding: 0.125rem;
-  text-transform: uppercase;
-  letter-spacing: ${() => (isActiveLanguageLogographic() ? 0 : "0.0625rem")};
-  font-size: ${() => (isActiveLanguageLogographic() ? "0.75rem" : "0.5rem")};
+  font-size: ${() => (isActiveLanguageLogographic() ? "0.75rem" : "0.6875rem")};
+  font-weight: 700;
 `;
 
 export const InfoLabel = styled.div`
@@ -136,18 +152,29 @@ export const AmountInput = styled(FormInput)<{
 `;
 
 export const PlaceHolderBar = styled.div`
-  width: 100%;
-  height: 1.5rem;
-  background-image: ${(props) => props.theme.colors.placeholderGradient};
+  border-radius: 0.5rem;
+  width: 65%;
+  height: 1rem;
+  background: ${(props) => props.theme.colors.placeholder};
   animation: ${fadeOut} 0.35s ease-in-out infinite alternate;
 `;
 
 export const TokenLogoLeft = styled(TokenLogo)`
   ${quoteTransition};
+
+  min-width: 3.125rem;
+  aspect-ratio: 1;
+
+  @media ${breakPoints.phoneOnly} {
+    min-width: 2.5rem;
+  }
 `;
 
 export const TokenLogoRight = styled(TokenLogo)`
   ${quoteTransition};
+
+  min-width: 3rem;
+  aspect-ratio: 1;
 `;
 
 export const StyledSelector = styled.div`
@@ -155,7 +182,7 @@ export const StyledSelector = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: -0.125rem;
+  gap: 0.125rem;
   margin-left: 0.9375rem;
   height: 100%;
 `;
@@ -167,18 +194,23 @@ export const StyledSelectItem = styled(SelectItem)`
   align-items: center;
   text-align: left;
   line-height: 1;
+  font-family: ${fontWide};
+  font-weight: 700;
   gap: 0.375rem;
-  max-width: 7rem;
+  max-width: 9rem;
   color: ${(props) =>
     props.theme.name === "dark"
       ? props.theme.colors.white
       : props.theme.colors.primary};
+
+  @media ${breakPoints.phoneOnly} {
+    max-width: 7rem;
+  }
 `;
 
 export const StyledLabel = styled(FormLabel)`
   ${fontTransition};
   text-align: left;
-  text-transform: uppercase;
 `;
 
 export const SubText = styled.div`
@@ -192,32 +224,35 @@ export const SubText = styled.div`
 `;
 
 export const TokenSelectContainer = styled.div<{
-  $isLoading: boolean;
-  $isQuote: boolean;
+  isLoading: boolean;
+  isQuote: boolean;
+  isAmountFocused: boolean;
+  isTokenFocused: boolean;
   showTokenContractLink: boolean;
 }>`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   position: relative;
   width: 100%;
-  height: 4.5rem;
-  padding: 1rem;
-  border: 1px solid ${(props) => props.theme.colors.borderGrey};
-  border-radius: 2px;
-  background-color: ${(props) =>
-    props.theme.name === "dark"
-      ? props.theme.colors.darkGrey
-      : props.theme.colors.primaryLight};
-  overflow: hidden;
+  height: 6.25rem;
+  border-radius: 0.75rem;
 
   &:first-of-type {
-    margin-bottom: 0.5rem;
+    margin-bottom: ${sizes.widgetGutter};
+  }
+
+  @media ${breakPoints.phoneOnly} {
+    height: 5.75rem;
+  }
+
+  ${TokenSelectRightGradientBackground}, ${TokenSelectRightBorderBackground} {
+    opacity: ${(props) => (props.isAmountFocused ? 1 : 0)};
+  }
+
+  ${TokenSelectLeftGradientBackground}, ${TokenSelectLeftBorderBackground} {
+    opacity: ${(props) => (props.isTokenFocused ? 1 : 0)};
   }
 
   ${PlaceHolderBar} {
-    ${(props) => (!props.$isLoading ? "animation: none" : "")};
+    ${(props) => (!props.isLoading ? "animation: none" : "")};
   }
 
   ${ContainingButton} ${StyledTokenLogo} {
@@ -226,12 +261,12 @@ export const TokenSelectContainer = styled.div<{
 
   ${TokenLogoLeft} {
     transform: ${(props) =>
-      props.$isQuote ? "translateX(-3.6rem)" : "translateX(0)"};
+      props.isQuote ? "translateX(-4.625rem)" : "translateX(0)"};
   }
 
   ${StyledSelector} {
     transform: ${(props) =>
-      props.$isQuote ? "translateX(-3.4rem)" : "translateX(0)"};
+      props.isQuote ? "translateX(-3.4rem)" : "translateX(0)"};
   }
 
   ${SubText},
@@ -239,21 +274,19 @@ export const TokenSelectContainer = styled.div<{
   ${MaxButton},
   ${InfoLabel} {
     transform: ${(props) =>
-      props.$isQuote ? "translateX(0)" : "translateX(2.75rem)"};
+      props.isQuote ? "translateX(0)" : "translateX(3.75rem)"};
   }
 
   ${TokenLogoRight} {
     transform: ${(props) =>
-      props.$isQuote ? "translateX(0)" : "translateX(3rem)"};
-  }
-
-  ${StyledLabel} {
-    font-size: ${(props) => (props.$isQuote ? "0.625rem" : "0.75rem")};
+      props.isQuote ? "translateX(0)" : "translateX(4.5rem)"};
   }
+`;
 
-  ${StyledSelectItem} {
-    font-size: ${(props) => (props.$isQuote ? "0.875rem" : "1.125rem")};
-  }
+export const StyledTokenSelectBackground = styled(TokenSelectBackground)`
+  position: absolute;
+  top: 0;
+  left: 0;
 `;
 
 const fadeOutWhenInvisible = css<{ $invisible: boolean }>`
@@ -271,12 +304,15 @@ export const StyledSelectButtonContent = styled.span`
 export const StyledDownArrow = styled(MdKeyboardArrowDown)<{
   $invisible: boolean;
 }>`
-  ${fadeOutWhenInvisible}
+  ${fadeOutWhenInvisible};
+
+  translate: 0 3px;
 `;
 
 export const PlaceholderContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   justify-content: center;
   width: 50%;
 
@@ -291,9 +327,21 @@ export const TokenAccountButton = styled(AccountLink)`
 
   border-radius: 50%;
   margin-right: 0.5rem;
+  position: relative;
   min-width: 1.625rem;
   max-width: 1.625rem;
   min-height: 1.625rem;
   max-height: 1.625rem;
-  background: ${(props) => props.theme.colors.black};
+`;
+
+export const TokenSelectOverflowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.75rem;
+  padding-inline: 1.5rem;
+  overflow: hidden;
 `;
diff --git a/src/components/TokenSelect/TokenSelect.tsx b/src/components/TokenSelect/TokenSelect.tsx
index d3797e837..b8aa5729f 100644
--- a/src/components/TokenSelect/TokenSelect.tsx
+++ b/src/components/TokenSelect/TokenSelect.tsx
@@ -1,4 +1,10 @@
-import { FC, MouseEventHandler, FormEventHandler, useMemo } from "react";
+import {
+  FC,
+  MouseEventHandler,
+  FormEventHandler,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 
 import { TokenInfo } from "@airswap/utils";
@@ -22,9 +28,10 @@ import {
   InfoLabel,
   SubText,
   TokenAccountButton,
+  TokenSelectOverflowContainer,
+  StyledTokenSelectBackground,
 } from "./TokenSelect.styles";
 import { getTokenText } from "./helpers";
-import TokenSelectFocusBorder from "./subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder";
 
 export type TokenSelectProps = {
   /**
@@ -117,84 +124,123 @@ const TokenSelect: FC<TokenSelectProps> = ({
   showTokenContractLink = false,
 }) => {
   const { t } = useTranslation();
+  const [isTokenFocused, setTokenFocused] = useState(false);
+  const [isAmountFocused, setIsAmountFocused] = useState(false);
+  const [isAmountHovered, setIsAmountHovered] = useState(false);
+  const [isMaxButtonFocused, setIsMaxButtonFocused] = useState(false);
 
   const tokenText = useMemo(() => {
     return getTokenText(selectedToken, readOnly);
   }, [selectedToken, readOnly]);
 
+  const handleAmountFocus = () => setIsAmountFocused(true);
+  const handleAmountBlur = () => setIsAmountFocused(false);
+  const handleAmountMouseEnter = () => setIsAmountHovered(true);
+  const handleAmountMouseLeave = () => setIsAmountHovered(false);
+  const handleMaxButtonFocus = () => setIsMaxButtonFocused(true);
+  const handleMaxButtonBlur = () => setIsMaxButtonFocused(false);
+  const handleTokenFocus = () => setTokenFocused(true);
+  const handleTokenBlur = () => setTokenFocused(false);
+
   return (
     <TokenSelectContainer
-      $isQuote={isQuote}
-      $isLoading={isRequestingAmount}
+      isQuote={isQuote}
+      isLoading={isRequestingAmount}
+      isAmountFocused={isAmountFocused || isMaxButtonFocused || isAmountHovered}
+      isTokenFocused={isTokenFocused}
       showTokenContractLink={showTokenContractLink}
     >
-      {selectedToken && showTokenContractLink && (
-        <TokenAccountButton
-          chainId={selectedToken.chainId}
-          address={selectedToken.address}
-        />
-      )}
-      {!isRequestingToken ? (
-        <ContainingButton onClick={onChangeTokenClicked} disabled={readOnly}>
-          <TokenLogoLeft logoURI={selectedToken?.logoURI} size="large" />
-          <StyledSelector>
+      <StyledTokenSelectBackground />
+      <TokenSelectOverflowContainer>
+        {selectedToken && showTokenContractLink && (
+          <TokenAccountButton
+            chainId={selectedToken.chainId}
+            address={selectedToken.address}
+            onBlur={handleTokenBlur}
+            onFocus={handleTokenFocus}
+            onMouseEnter={handleTokenFocus}
+            onMouseLeave={handleTokenBlur}
+          />
+        )}
+        {!isRequestingToken ? (
+          <ContainingButton
+            disabled={readOnly}
+            onClick={onChangeTokenClicked}
+            onBlur={handleTokenBlur}
+            onFocus={handleTokenFocus}
+            onMouseEnter={handleTokenFocus}
+            onMouseLeave={handleTokenBlur}
+          >
+            <TokenLogoLeft logoURI={selectedToken?.logoURI} />
+            <StyledSelector>
+              <StyledLabel>{label}</StyledLabel>
+              <StyledSelectItem>
+                <StyledSelectButtonContent>
+                  {tokenText}
+                </StyledSelectButtonContent>
+                <StyledDownArrow $invisible={readOnly} />
+              </StyledSelectItem>
+            </StyledSelector>
+          </ContainingButton>
+        ) : (
+          <PlaceholderContainer>
             <StyledLabel>{label}</StyledLabel>
-            <StyledSelectItem>
-              <StyledSelectButtonContent>{tokenText}</StyledSelectButtonContent>
-              <StyledDownArrow $invisible={readOnly} />
-            </StyledSelectItem>
-          </StyledSelector>
-        </ContainingButton>
-      ) : (
-        <PlaceholderContainer>
-          <StyledLabel>{label}</StyledLabel>
-          <PlaceHolderBar />
-        </PlaceholderContainer>
-      )}
-      <TokenSelectFocusBorder position="left" />
-      {includeAmountInput && selectedToken && !isRequestingAmount ? (
-        <InputAndMaxButtonWrapper>
-          <AmountAndDetailsContainer>
-            <AmountInput
-              // @ts-ignore
-              inputMode="decimal"
-              hasSubtext={!!subText}
-              tabIndex={readOnly ? -1 : 0}
-              autoComplete="off"
-              pattern="^[0-9]*[.,]?[0-9]*$"
-              minLength={1}
-              maxLength={79}
-              spellCheck={false}
-              value={amount}
-              disabled={readOnly}
-              onChange={onAmountChange}
-              placeholder="0.00"
-            />
-            {!readOnly && (
-              <TokenSelectFocusBorder position="right" hasError={hasError} />
+            <PlaceHolderBar />
+          </PlaceholderContainer>
+        )}
+        {includeAmountInput && selectedToken && !isRequestingAmount ? (
+          <InputAndMaxButtonWrapper>
+            <AmountAndDetailsContainer>
+              <AmountInput
+                // @ts-ignore
+                inputMode="decimal"
+                hasSubtext={!!subText}
+                tabIndex={readOnly ? -1 : 0}
+                autoComplete="off"
+                pattern="^[0-9]*[.,]?[0-9]*$"
+                minLength={1}
+                maxLength={79}
+                spellCheck={false}
+                value={amount}
+                disabled={readOnly}
+                onBlur={handleAmountBlur}
+                onChange={onAmountChange}
+                onFocus={handleAmountFocus}
+                onMouseEnter={handleAmountMouseEnter}
+                onMouseLeave={handleAmountMouseLeave}
+                placeholder="0.00"
+              />
+              {subText && <SubText>{subText}</SubText>}
+            </AmountAndDetailsContainer>
+            {onMaxClicked && showMaxButton && !readOnly && (
+              <MaxButton
+                onClick={onMaxClicked}
+                onBlur={handleMaxButtonBlur}
+                onFocus={handleMaxButtonFocus}
+                onMouseEnter={handleMaxButtonFocus}
+                onMouseLeave={handleMaxButtonBlur}
+              >
+                {t("common.max")}
+              </MaxButton>
+            )}
+            {showMaxInfoButton && !showMaxButton && !readOnly && (
+              <InfoLabel
+                onMouseOver={onInfoLabelMouseEnter}
+                onFocus={onInfoLabelMouseEnter}
+                onMouseOut={onInfoLabelMouseLeave}
+                onBlur={onInfoLabelMouseLeave}
+              >
+                i
+              </InfoLabel>
             )}
-            {subText && <SubText>{subText}</SubText>}
-          </AmountAndDetailsContainer>
-          {onMaxClicked && showMaxButton && !readOnly && (
-            <MaxButton onClick={onMaxClicked}>{t("common.max")}</MaxButton>
-          )}
-          {showMaxInfoButton && !showMaxButton && !readOnly && (
-            <InfoLabel
-              onMouseOver={onInfoLabelMouseEnter}
-              onFocus={onInfoLabelMouseEnter}
-              onMouseOut={onInfoLabelMouseLeave}
-              onBlur={onInfoLabelMouseLeave}
-            >
-              i
-            </InfoLabel>
-          )}
-          <TokenLogoRight logoURI={selectedToken?.logoURI} size="medium" />
-        </InputAndMaxButtonWrapper>
-      ) : (
-        <PlaceholderContainer>
-          <PlaceHolderBar />
-        </PlaceholderContainer>
-      )}
+            <TokenLogoRight logoURI={selectedToken?.logoURI} />
+          </InputAndMaxButtonWrapper>
+        ) : (
+          <PlaceholderContainer>
+            <PlaceHolderBar />
+          </PlaceholderContainer>
+        )}
+      </TokenSelectOverflowContainer>
     </TokenSelectContainer>
   );
 };
diff --git a/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.styles.tsx b/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.styles.tsx
new file mode 100644
index 000000000..d2ffce7d9
--- /dev/null
+++ b/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.styles.tsx
@@ -0,0 +1,63 @@
+import styled from "styled-components/macro";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 0.75rem;
+  background: ${(props) =>
+    props.theme.name === "dark"
+      ? "linear-gradient(90deg, #111D34 0%, #142445 100%)"
+      : props.theme.colors.primaryLight};
+`;
+
+export const GradientBackground = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.75rem;
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+`;
+
+export const TokenSelectLeftGradientBackground = styled(GradientBackground)`
+  background: linear-gradient(90deg, #2b71ff -125%, #142445 50%);
+`;
+export const TokenSelectRightGradientBackground = styled(GradientBackground)`
+  background: linear-gradient(270deg, #2b71ff -125%, #142445 50%);
+`;
+
+export const BorderBackground = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -2;
+  margin: -1px;
+  border-radius: inherit;
+  background: ${({ theme }) => theme.colors.borderGrey};
+  background-clip: padding-box;
+  transition: opacity 0.25s ease-out;
+`;
+
+export const TokenSelectLeftBorderBackground = styled(BorderBackground)`
+  z-index: -1;
+  opacity: 0;
+  background: linear-gradient(
+    90deg,
+    ${({ theme }) => theme.colors.primary} -25%,
+    ${({ theme }) => theme.colors.borderGrey} 75%
+  );
+`;
+
+export const TokenSelectRightBorderBackground = styled(BorderBackground)`
+  z-index: -1;
+  opacity: 0;
+  background: linear-gradient(
+    270deg,
+    ${({ theme }) => theme.colors.primary} -25%,
+    ${({ theme }) => theme.colors.borderGrey} 75%
+  );
+`;
diff --git a/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.tsx b/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.tsx
new file mode 100644
index 000000000..0237b3aae
--- /dev/null
+++ b/src/components/TokenSelect/subcomponents/TokenSelectBackground/TokenSelectBackground.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+import {
+  Container,
+  TokenSelectLeftGradientBackground,
+  BorderBackground,
+  TokenSelectRightGradientBackground,
+  TokenSelectLeftBorderBackground,
+  TokenSelectRightBorderBackground,
+} from "./TokenSelectBackground.styles";
+
+interface TokenSelectBackgroundProps {
+  className?: string;
+}
+
+const TokenSelectBackground: FC<TokenSelectBackgroundProps> = ({
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      <BorderBackground />
+      <TokenSelectLeftBorderBackground />
+      <TokenSelectRightBorderBackground />
+      <TokenSelectLeftGradientBackground />
+      <TokenSelectRightGradientBackground />
+    </Container>
+  );
+};
+
+export default TokenSelectBackground;
diff --git a/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.styles.tsx b/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.styles.tsx
deleted file mode 100644
index 3090d29e4..000000000
--- a/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.styles.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import styled, { createGlobalStyle } from "styled-components/macro";
-
-import convertHexToRGBA from "../../../../helpers/transformHexToRgba";
-
-type BorderType = {
-  position: "left" | "right";
-  hasError: boolean;
-};
-
-const Border = styled.div<BorderType>`
-  transition: opacity ease-out 0.3s;
-  display: block;
-  position: absolute;
-  opacity: ${({ hasError }) => (hasError ? 1 : 0)};
-`;
-
-export const BorderRight = styled(Border)`
-  top: 0;
-  right: ${(props) => (props.position === "right" ? 0 : "auto")};
-  left: ${(props) => (props.position === "left" ? 0 : "auto")};
-  width: 1px;
-  height: 100%;
-  background: ${({ theme, hasError }) =>
-    hasError ? theme.colors.red : theme.colors.primary};
-`;
-
-export const BorderHorizontal = styled(Border)`
-  width: 50%;
-  height: 1px;
-  background: linear-gradient(
-    ${(props) => (props.position === "left" ? "to left" : "to right")},
-    ${({ theme, hasError }) =>
-        convertHexToRGBA(hasError ? theme.colors.red : theme.colors.primary, 0)}
-      0%,
-    ${({ theme, hasError }) =>
-        convertHexToRGBA(hasError ? theme.colors.red : theme.colors.primary, 1)}
-      100%
-  );
-`;
-
-export const BorderTop = styled(BorderHorizontal)`
-  top: 0;
-  right: ${(props) => (props.position === "right" ? 0 : "auto")};
-  left: ${(props) => (props.position === "left" ? 0 : "auto")};
-`;
-
-export const BorderBottom = styled(BorderHorizontal)`
-  bottom: 0;
-  right: ${(props) => (props.position === "right" ? 0 : "auto")};
-  left: ${(props) => (props.position === "left" ? 0 : "auto")};
-`;
-
-export const GlobalStyle = createGlobalStyle`
-  input, button {
-    &:focus, &:hover {
-      & ~ ${Border} {
-        opacity: 1;
-      }
-    }
-  }
-`;
diff --git a/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.tsx b/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.tsx
deleted file mode 100644
index 260e2eb08..000000000
--- a/src/components/TokenSelect/subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from "react";
-
-import {
-  GlobalStyle,
-  BorderBottom,
-  BorderRight,
-  BorderTop,
-} from "./TokenSelectFocusBorder.styles";
-
-type TokenSelectFocusBorderProps = {
-  position?: "left" | "right";
-  hasError?: boolean;
-};
-
-const TokenSelectFocusBorder: FC<TokenSelectFocusBorderProps> = ({
-  position = "right",
-  hasError = false,
-}) => {
-  return (
-    <>
-      <GlobalStyle />
-      <BorderRight position={position} hasError={hasError} />
-      <BorderTop position={position} hasError={hasError} />
-      <BorderBottom position={position} hasError={hasError} />
-    </>
-  );
-};
-
-export default TokenSelectFocusBorder;
diff --git a/src/components/Toolbar/Toolbar.styles.tsx b/src/components/Toolbar/Toolbar.styles.tsx
index 479b182c7..3107c88bc 100644
--- a/src/components/Toolbar/Toolbar.styles.tsx
+++ b/src/components/Toolbar/Toolbar.styles.tsx
@@ -23,7 +23,7 @@ export const ToolbarContainer = styled.div<{
   left: 100%;
   width: 100%;
   height: 100%;
-  z-index: 5;
+  z-index: 100;
   background: ${({ theme, $overflow }) =>
     theme.name === "dark"
       ? convertHexToRGBA(theme.colors.black, $overflow ? 1 : 0.8)
@@ -35,27 +35,7 @@ export const ToolbarContainer = styled.div<{
   }
 
   @media ${breakPoints.tabletPortraitUp} {
-    transform: none;
-    transition: none;
-
-    align-items: center;
-    position: absolute;
-    left: 0;
-    width: 7rem;
-    height: 100%;
-    padding: 0 1rem 0;
-    border-right: 1px solid
-      ${({ theme }) =>
-        theme.name === "dark"
-          ? theme.colors.borderGrey
-          : convertHexToRGBA(theme.colors.borderGrey, 0.2)};
-    overflow: hidden;
-    background: ${(props) =>
-      props.theme.name === "dark"
-        ? props.theme.colors.black
-        : props.theme.colors.primary};
-    z-index: 3;
-    backdrop-filter: none;
+    display: none;
   }
 `;
 
@@ -75,12 +55,6 @@ export const ToolbarButtonsContainer = styled.div<{ $overflow?: boolean }>`
   @media (min-height: ${sizes.toolbarMaxHeight}) and (${breakPoints.tabletPortraitUp}) {
     margin: 2rem 0 4.5rem;
   }
-
-  @media ${breakPoints.tabletPortraitUp} {
-    justify-content: center;
-    width: auto;
-    overflow-y: auto;
-  }
 `;
 
 export const StyledAirswapButton = styled(AirswapButton)`
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 0ad21f4cf..3b0fbb3a3 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,8 +1,6 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppSelector } from "../../app/hooks";
-import { selectMyOrdersReducer } from "../../features/myOrders/myOrdersSlice";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import useWindowSize from "../../hooks/useWindowSize";
 import { AppRoutes } from "../../routes";
@@ -31,7 +29,6 @@ const Toolbar: FC<ToolbarProps> = ({
 }) => {
   const { t } = useTranslation();
   const { width, height } = useWindowSize();
-  const { userOrders } = useAppSelector(selectMyOrdersReducer);
   const isTabletPortraitUp = useMediaQuery(breakPoints.tabletPortraitUp);
   const containerRef = useRef<HTMLDivElement>(null);
   const mobileTopBarRef = useRef<HTMLDivElement>(null);
@@ -78,7 +75,7 @@ const Toolbar: FC<ToolbarProps> = ({
           iconName="plus"
           iconSize={0.875}
           text={t("common.otc")}
-          link={`/${userOrders.length ? AppRoutes.myOrders : AppRoutes.make}`}
+          link={`/${AppRoutes.myOrders}`}
         />
         <ToolbarButton
           iconName="bars"
diff --git a/src/components/Toolbar/subcomponents/ToolbarMobileTopBar/ToolbarMobileTopBar.styles.tsx b/src/components/Toolbar/subcomponents/ToolbarMobileTopBar/ToolbarMobileTopBar.styles.tsx
index f38ba4d62..16774185e 100644
--- a/src/components/Toolbar/subcomponents/ToolbarMobileTopBar/ToolbarMobileTopBar.styles.tsx
+++ b/src/components/Toolbar/subcomponents/ToolbarMobileTopBar/ToolbarMobileTopBar.styles.tsx
@@ -12,6 +12,7 @@ export const Container = styled.div`
   padding: 0 1.125rem;
   background: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.black : theme.colors.primary};
+  z-index: 100;
 
   @media ${breakPoints.tabletPortraitUp} {
     display: none;
diff --git a/src/components/TransactionLink/TransactionLink.style.tsx b/src/components/TransactionLink/TransactionLink.style.tsx
index 940ba1271..181991440 100644
--- a/src/components/TransactionLink/TransactionLink.style.tsx
+++ b/src/components/TransactionLink/TransactionLink.style.tsx
@@ -1,11 +1,14 @@
 import styled from "styled-components/macro";
 
 import { BorderlessButtonStyle } from "../../style/mixins";
+import Icon from "../Icon/Icon";
 
 export const Link = styled.a`
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
-  padding: 0.25rem;
+  gap: 0.5rem;
+  padding: 0 0.25rem;
   color: ${(props) => props.theme.colors.lightGrey};
 
   &:hover {
@@ -15,6 +18,7 @@ export const Link = styled.a`
   ${BorderlessButtonStyle}
 `;
 
-export const Label = styled.div`
-  margin-right: 0.5rem;
+export const Label = styled.div``;
+export const StyledIcon = styled(Icon)`
+  margin-bottom: -0.125rem;
 `;
diff --git a/src/components/TransactionLink/TransactionLink.tsx b/src/components/TransactionLink/TransactionLink.tsx
index 950fcc470..b37ecae45 100644
--- a/src/components/TransactionLink/TransactionLink.tsx
+++ b/src/components/TransactionLink/TransactionLink.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { getReceiptUrl } from "@airswap/utils";
 
-import Icon from "../Icon/Icon";
-import { Label, Link } from "./TransactionLink.style";
+import { Label, Link, StyledIcon } from "./TransactionLink.style";
 
 type TransactionLinkProps = {
   hideLabel?: boolean;
@@ -33,8 +32,8 @@ const TransactionLink = ({
       aria-label={t("wallet.transactionLink")}
       href={receiptUrl}
     >
+      <StyledIcon iconSize={1} name="transaction-link" />
       {!hideLabel && <Label>{t("wallet.transactionLink")}</Label>}
-      <Icon iconSize={1} name="transaction-link" />
     </Link>
   );
 };
diff --git a/src/components/TransactionOverlay/TransactionOverlay.styles.tsx b/src/components/TransactionOverlay/TransactionOverlay.styles.tsx
new file mode 100644
index 000000000..26eea3dfd
--- /dev/null
+++ b/src/components/TransactionOverlay/TransactionOverlay.styles.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Container = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 21;
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+  pointer-events: ${({ isOpen }) => (isOpen ? "visible" : "none")};
+  transition: opacity 0.3s ease-in-out;
+`;
diff --git a/src/components/TransactionOverlay/TransactionOverlay.tsx b/src/components/TransactionOverlay/TransactionOverlay.tsx
new file mode 100644
index 000000000..71387a1ec
--- /dev/null
+++ b/src/components/TransactionOverlay/TransactionOverlay.tsx
@@ -0,0 +1,29 @@
+import { FC, PropsWithChildren, useContext, useEffect } from "react";
+
+import { InterfaceContext } from "../../contexts/interface/Interface";
+import { Container } from "./TransactionOverlay.styles";
+
+type TransactionOverlayProps = {
+  isHidden: boolean;
+  className?: string;
+};
+
+const TransactionOverlay: FC<PropsWithChildren<TransactionOverlayProps>> = ({
+  isHidden,
+  className,
+  children,
+}) => {
+  const { setShowTransactionOverlay } = useContext(InterfaceContext);
+
+  useEffect(() => {
+    setShowTransactionOverlay(!isHidden);
+  }, [isHidden]);
+
+  return (
+    <Container isOpen={!isHidden} className={className}>
+      {children}
+    </Container>
+  );
+};
+
+export default TransactionOverlay;
diff --git a/src/components/TransactionsTab/TransactionsTab.styles.tsx b/src/components/TransactionsTab/TransactionsTab.styles.tsx
index 5ffd1d6e2..8d2e0acad 100644
--- a/src/components/TransactionsTab/TransactionsTab.styles.tsx
+++ b/src/components/TransactionsTab/TransactionsTab.styles.tsx
@@ -9,12 +9,7 @@ import {
 } from "../../style/mixins";
 import { sizes } from "../../style/sizes";
 import Button from "../Button/Button";
-import TransactionLink from "../TransactionLink/TransactionLink";
-import {
-  InfoSubHeading,
-  InfoHeading,
-  FormLabel,
-} from "../Typography/Typography";
+import { InfoSubHeading } from "../Typography/Typography";
 import WalletInfoButton from "./subcomponents/WalletInfoButton/WalletInfoButton";
 import WalletMobileMenu from "./subcomponents/WalletMobileMenu/WalletMobileMenu";
 
@@ -24,14 +19,13 @@ export const Container = styled(motion.div)`
   flex-direction: column;
   width: 100%;
   max-width: ${sizes.widgetMobileSize};
-  height: 100%;
+  height: calc(100% - 5rem);
   padding: 1.5rem 1.5rem 0;
-  background-color: ${(props) => props.theme.colors.black};
-  border-left: 1px solid ${(props) => props.theme.colors.borderGrey};
-  top: 0;
+  top: 5rem;
   right: 0;
-  z-index: 1001;
+  z-index: 25;
   will-change: transform;
+  backdrop-filter: drop-shadow(4px 4px 10px blue);
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -39,9 +33,13 @@ export const Container = styled(motion.div)`
 
   @media ${breakPoints.phoneOnly} {
     position: fixed;
+    top: 0;
     width: 100%;
     max-width: inherit;
+    height: 100%;
     padding: 1rem 1rem 0;
+    background-color: ${({ theme }) => theme.colors.black};
+    z-index: 1000;
   }
 `;
 
@@ -59,25 +57,17 @@ export const WalletHeader = styled.div`
   }
 `;
 
-export const StyledTransactionLink = styled(TransactionLink)`
-  justify-self: flex-end;
-  margin-left: auto;
-
-  &:hover {
-    color: ${(props) => props.theme.colors.alwaysWhite};
-  }
-`;
-
 export const LegendContainer = styled.div<{ $isVisible?: boolean }>`
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${({ $isVisible }) => ($isVisible ? "1rem" : "0")};
+  margin-bottom: ${({ $isVisible }) => ($isVisible ? ".75rem" : "0")};
+  padding-inline: 1.5rem;
   width: 100%;
   height: ${({ $isVisible }) => ($isVisible ? "1rem" : "0")};
+  visibility: ${({ $isVisible }) => ($isVisible ? "visible" : "hidden")};
   transition: height ease-out 0.3s, margin-bottom ease-out 0.3s;
-  background: ${(props) => props.theme.colors.black};
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -87,44 +77,35 @@ export const LegendContainer = styled.div<{ $isVisible?: boolean }>`
 export const Legend = styled(InfoSubHeading)`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding: 0;
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
   width: 100%;
-  color: ${(props) => props.theme.colors.lightGrey};
-
-  &:after {
-    margin: 0 0 0 0.5rem;
-    background: ${(props) => props.theme.colors.borderGrey};
-    height: 1px;
-    flex: 1;
-    content: "";
-  }
-
-  &:before {
-    background: none;
-  }
-`;
-
-export const LegendLine = styled.span`
   text-transform: uppercase;
   background: transparent;
+  color: ${(props) => props.theme.colors.lightGrey};
 `;
 
 type TransactionsContainerProps = {
-  $overflow: boolean;
+  hasOverflow: boolean;
 };
 
 export const TransactionsContainer = styled.div<TransactionsContainerProps>`
   ${ScrollBarStyle};
 
-  overflow-y: ${(props) => (props.$overflow ? "scroll" : "hidden")};
-  padding-right: ${(props) => (props.$overflow ? "1rem" : "0")};
+  overflow-y: ${(props) => (props.hasOverflow ? "scroll" : "hidden")};
+  padding-right: ${(props) => (props.hasOverflow ? "1rem" : "0")};
+  padding-bottom: ${(props) => (props.hasOverflow ? "2rem" : "0")};
 
   flex-grow: 99;
   height: 100%;
+
+  -webkit-mask-image: ${({ hasOverflow }) =>
+    hasOverflow
+      ? "-webkit-gradient(linear, 0 85%, 0 100%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))"
+      : ""};
 `;
 
 export const TransactionContainer = styled.div<{ $isEmpty?: boolean }>`
@@ -133,7 +114,7 @@ export const TransactionContainer = styled.div<{ $isEmpty?: boolean }>`
   align-items: center;
   justify-content: center;
   flex-grow: 2;
-  margin-bottom: ${({ $isEmpty }) => ($isEmpty ? "0" : "1rem")};
+  margin-bottom: ${({ $isEmpty }) => ($isEmpty ? "0" : "1.5rem")};
   width: 100%;
   transition: margin-bottom ease-out 0.3s;
   overflow: hidden;
@@ -147,12 +128,15 @@ export const NoTransactions = styled(motion.div)`
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-block-start: 1rem;
   height: 4.5rem;
   color: ${(props) => props.theme.colors.lightGrey};
 `;
 
 export const BottomButtonContainer = styled.div`
-  padding: 1rem 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 1rem 0 2rem;
 `;
 
 export const DisconnectButton = styled(Button)`
@@ -186,43 +170,6 @@ export const IconContainer = styled.div`
   border-radius: 50%;
 `;
 
-export const BackButton = styled(motion.button)`
-  ${InputOrButtonBorderStyleType2};
-
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: -1.5rem;
-  top: 1.5rem;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.colors.black};
-  color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
-
-  @media ${breakPoints.phoneOnly} {
-    display: none !important;
-  }
-`;
-
-export const NetworkInfoContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-  max-width: 5.5rem;
-`;
-
-export const NetworkName = styled(FormLabel)`
-  text-transform: uppercase;
-`;
-
-export const Balances = styled(InfoHeading)`
-  line-height: 1;
-`;
-
 export const ConnectionStatusCircle = styled.div<{ $connected: boolean }>`
   margin-right: 0.5rem;
   width: 0.75rem;
diff --git a/src/components/TransactionsTab/TransactionsTab.tsx b/src/components/TransactionsTab/TransactionsTab.tsx
index 2059dbee5..1a2554cea 100644
--- a/src/components/TransactionsTab/TransactionsTab.tsx
+++ b/src/components/TransactionsTab/TransactionsTab.tsx
@@ -1,22 +1,11 @@
 import { useEffect, useRef, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import {
-  getAccountUrl,
-  chainCurrencies,
-  chainNames,
-  ADDRESS_ZERO,
-} from "@airswap/utils";
-
-import { formatUnits } from "ethers/lib/utils";
 import { AnimatePresence, useReducedMotion } from "framer-motion";
 
 import { useAppSelector } from "../../app/hooks";
-import { supportedNetworks } from "../../constants/supportedNetworks";
 import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
 import { getSubmittedTransactionKey } from "../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
-import { BalancesState } from "../../features/balances/balancesSlice";
-import useAddressOrEnsName from "../../hooks/useAddressOrEnsName";
 import { useKeyPress } from "../../hooks/useKeyPress";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import useWindowSize from "../../hooks/useWindowSize";
@@ -26,27 +15,19 @@ import { TransactionStatusType } from "../../types/transactionTypes";
 import Icon from "../Icon/Icon";
 import {
   Container,
-  WalletHeader,
   Legend,
-  LegendLine,
   TransactionContainer,
   TransactionsContainer,
   BottomButtonContainer,
   DisconnectButton,
   NoTransactions,
   IconContainer,
-  BackButton,
-  NetworkInfoContainer,
-  NetworkName,
-  Balances,
   LegendContainer,
   MobileBackButton,
-  DesktopWalletInfoButton,
-  MobileWalletInfoButton,
-  StyledWalletMobileMenu,
   BackdropFilter,
   ConnectButton,
 } from "./TransactionsTab.styles";
+import useClickOutsideTransactionsTab from "./hooks/useClickOutsideTransactionsTab";
 import AnimatedWalletTransaction from "./subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction";
 import ClearTransactionsSelector from "./subcomponents/ClearTransactionsSelector/ClearTransactionsSelector";
 
@@ -60,8 +41,6 @@ interface TransactionsTabProps {
   onConnectButtonClick: () => void;
   onDisconnectButtonClick: () => void;
   transactions: SubmittedTransaction[];
-  balances: BalancesState;
-  isUnsupportedNetwork?: boolean;
 }
 
 const TransactionsTab = ({
@@ -73,9 +52,7 @@ const TransactionsTab = ({
   onClearTransactionsChange,
   onConnectButtonClick,
   onDisconnectButtonClick,
-  transactions = [],
-  balances,
-  isUnsupportedNetwork = false,
+  transactions,
 }: TransactionsTabProps) => {
   const { width, height } = useWindowSize();
   const shouldReduceMotion = useReducedMotion();
@@ -91,19 +68,8 @@ const TransactionsTab = ({
   const transactionsScrollRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLDivElement>(null);
 
-  const addressOrName = useAddressOrEnsName(account);
-  const walletInfoText = useMemo(() => {
-    return isUnsupportedNetwork
-      ? t("wallet.unsupported")
-      : addressOrName
-      ? addressOrName
-      : t("wallet.notConnected");
-  }, [addressOrName, isUnsupportedNetwork, t]);
-  const walletUrl = useMemo(
-    () => getAccountUrl(chainId, account),
-    [chainId, account]
-  );
   useKeyPress(() => setTransactionsTabOpen(false), ["Escape"]);
+  useClickOutsideTransactionsTab(() => setTransactionsTabOpen(false));
 
   const toggleWalletMobileMenu = () => {
     setShowMobileMenu(!showMobileMenu);
@@ -158,8 +124,6 @@ const TransactionsTab = ({
       .sort((a, b) => b.timestamp - a.timestamp);
   }, [transactions]);
 
-  const balance = balances.values[ADDRESS_ZERO] || "0";
-
   return (
     <AnimatePresence initial={false}>
       {open && (
@@ -167,61 +131,15 @@ const TransactionsTab = ({
           ref={containerRef}
           animate={{ x: 0 }}
           transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
-          initial={{ x: isMobile ? "100%" : "24rem" }}
-          exit={{ x: isMobile ? "100%" : "24rem" }}
+          initial={{ x: isMobile ? "100%" : "27.75rem" }}
+          exit={{ x: isMobile ? "100%" : "27.75rem" }}
         >
-          <BackButton
-            aria-label={t("common.back")}
-            animate={{ y: 0 }}
-            transition={{ duration: shouldReduceMotion ? 0 : 0.5 }}
-            initial={{ y: "-5rem" }}
-            exit={{ opacity: 0 }}
-            onClick={() => setTransactionsTabOpen(false)}
-          >
-            <Icon name="chevron-right" iconSize={1.5} />
-          </BackButton>
-          <WalletHeader>
-            <NetworkInfoContainer>
-              <NetworkName>
-                {isActive &&
-                  !supportedNetworks.includes(chainId) &&
-                  t("wallet.unsupported")}
-              </NetworkName>
-              {isActive && (
-                <Balances>
-                  {formatUnits(balance).substring(0, 4)}{" "}
-                  {chainCurrencies[chainId]}
-                </Balances>
-              )}
-            </NetworkInfoContainer>
-            <DesktopWalletInfoButton
-              isConnected={isActive}
-              onClick={setTransactionsTabOpen.bind(null, false)}
-            >
-              {walletInfoText}
-            </DesktopWalletInfoButton>
-            <MobileWalletInfoButton onClick={toggleWalletMobileMenu}>
-              {walletInfoText}
-            </MobileWalletInfoButton>
-            {showMobileMenu && (
-              <StyledWalletMobileMenu
-                walletUrl={walletUrl}
-                address={account}
-                onDisconnectButtonClick={onDisconnectButtonClick}
-              />
-            )}
-          </WalletHeader>
-
           <TransactionsContainer
             ref={transactionsScrollRef}
-            $overflow={overflow}
+            hasOverflow={overflow}
           >
             <LegendContainer $isVisible={!!pendingTransactions.length}>
-              <Legend>
-                <LegendLine>
-                  {t("wallet.activeTransactions").toUpperCase()}
-                </LegendLine>
-              </Legend>
+              <Legend>{t("wallet.activeTransactions").toUpperCase()}</Legend>
             </LegendContainer>
             <TransactionContainer $isEmpty={!pendingTransactions.length}>
               <AnimatePresence initial={false}>
@@ -236,10 +154,8 @@ const TransactionsTab = ({
                 ))}
               </AnimatePresence>
             </TransactionContainer>
-            <LegendContainer $isVisible>
-              <Legend>
-                <LegendLine>{t("wallet.completedTransactions")}</LegendLine>
-              </Legend>
+            <LegendContainer $isVisible={isActive}>
+              <Legend>{t("wallet.completedTransactions")}</Legend>
               <ClearTransactionsSelector onChange={onClearTransactionsChange} />
             </LegendContainer>
             <TransactionContainer>
@@ -254,7 +170,7 @@ const TransactionsTab = ({
                   />
                 ))}
               </AnimatePresence>
-              {!completedTransactions.length && (
+              {isActive && !completedTransactions.length && (
                 <NoTransactions>
                   <IconContainer>
                     <Icon name="transaction" />
diff --git a/src/components/TransactionsTab/hooks/useClickOutsideTransactionsTab.ts b/src/components/TransactionsTab/hooks/useClickOutsideTransactionsTab.ts
new file mode 100644
index 000000000..6040b6ec0
--- /dev/null
+++ b/src/components/TransactionsTab/hooks/useClickOutsideTransactionsTab.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+import { useClickAnyWhere, useMediaQuery } from "usehooks-ts";
+
+import useWindowSize from "../../../hooks/useWindowSize";
+import breakPoints from "../../../style/breakpoints";
+
+const desktopWidth = 460;
+
+const useClickOutsideTransactionsTab = (callback: () => void) => {
+  const [clickedOutside, setClickedOutside] = useState(false);
+  const isMobile = useMediaQuery(breakPoints.phoneOnly);
+
+  const { width: windowWidth } = useWindowSize();
+
+  useClickAnyWhere((e: MouseEvent) => {
+    if (!windowWidth || isMobile) return;
+
+    if (e.clientX < windowWidth - desktopWidth) {
+      setClickedOutside(true);
+    } else {
+      setClickedOutside(false);
+    }
+  });
+
+  useEffect(() => {
+    if (clickedOutside) {
+      callback();
+    }
+  }, [clickedOutside]);
+
+  return { clickedOutside };
+};
+
+export default useClickOutsideTransactionsTab;
diff --git a/src/components/TransactionsTab/subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction.styles.tsx b/src/components/TransactionsTab/subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction.styles.tsx
index 7e6b65587..b4111841f 100644
--- a/src/components/TransactionsTab/subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction.styles.tsx
+++ b/src/components/TransactionsTab/subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction.styles.tsx
@@ -9,8 +9,4 @@ export const Container = styled(motion.div)`
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
   overflow: hidden;
-
-  & + & {
-    margin-top: 0.5rem;
-  }
 `;
diff --git a/src/components/TransactionsTab/subcomponents/ClearTransactionsSelector/ClearTransactionsSelector.styles.tsx b/src/components/TransactionsTab/subcomponents/ClearTransactionsSelector/ClearTransactionsSelector.styles.tsx
index 8c32cc10b..2e59ae7eb 100644
--- a/src/components/TransactionsTab/subcomponents/ClearTransactionsSelector/ClearTransactionsSelector.styles.tsx
+++ b/src/components/TransactionsTab/subcomponents/ClearTransactionsSelector/ClearTransactionsSelector.styles.tsx
@@ -32,6 +32,11 @@ export const ClearListButton = styled(IconButton)`
   margin-left: 0.5rem;
   color: ${(props) => props.theme.colors.lightGrey};
 
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
   &:hover {
     color: ${(props) => props.theme.colors.white};
   }
diff --git a/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.styles.tsx b/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.styles.tsx
index 0ab6ed254..247278a5d 100644
--- a/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.styles.tsx
+++ b/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.styles.tsx
@@ -1,51 +1,65 @@
 import { motion } from "framer-motion";
 import styled, { css } from "styled-components/macro";
 
-import { InputOrButtonBorderStyle } from "../../../../style/mixins";
+import { TextEllipsis } from "../../../../style/mixins";
 import Icon from "../../../Icon/Icon";
 import TransactionLink from "../../../TransactionLink/TransactionLink";
 import WalletTransactionStatus from "../WalletTransactionStatus/WalletTransactionStatus";
 
 export const StyledWalletTransactionStatus = styled(WalletTransactionStatus)``;
 
-export const walletTransactionHeight = "4.125rem";
+export const walletTransactionHeight = "5rem";
 
-export const Container = styled(motion.div)`
-  ${InputOrButtonBorderStyle};
+export const SpanSubtitle = styled.span`
+  line-height: 1.25;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  color: ${(props) => props.theme.colors.lightGrey};
+`;
 
+export const Container = styled(motion.div)<{ isActive?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
-  border-color: ${({ theme }) => theme.colors.borderGrey};
-  border-radius: 0.1875rem;
+  border-radius: 0.75rem;
   width: 100%;
   height: ${walletTransactionHeight};
-  padding: 0 1.5rem;
+  padding: 1rem 1.5rem;
   gap: 1rem;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+  background: ${({ theme, isActive }) =>
+    isActive ? theme.colors.darkBlue : "transparent"};
 
   &:hover {
-    border-color: ${({ theme }) => theme.colors.lightGrey} !important;
+    background: ${({ theme }) => theme.colors.darkGrey};
+
+    ${SpanSubtitle} {
+      color: ${({ theme }) => theme.colors.white};
+    }
   }
 `;
 
 export const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%;
   flex: 1;
   flex-wrap: wrap;
   justify-content: center;
+  max-width: calc(100% - 2.5rem);
+  height: 100%;
 `;
 
 export const SpanTitle = styled.span<{
   hasProgress?: boolean;
 }>`
+  ${TextEllipsis};
+
+  width: 100%;
   line-height: 1.25;
-  font-size: 0.875rem;
-  font-weight: 700;
+  font-size: 1.125rem;
+  font-weight: 400;
   ${({ hasProgress }) =>
     hasProgress &&
     css`
@@ -53,15 +67,11 @@ export const SpanTitle = styled.span<{
     `}
 `;
 
-export const SpanSubtitle = styled.span`
-  line-height: 1.25;
-  font-size: 1rem;
-  font-weight: 400;
-  color: ${(props) => props.theme.colors.lightGrey};
-`;
-
 export const StyledTransactionLink = styled(TransactionLink)`
+  align-self: flex-start;
   align-items: center;
+  margin-top: 0.125rem;
+
   &:hover {
     color: ${(props) => props.theme.colors.white};
   }
diff --git a/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.tsx b/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.tsx
index e06bf32fa..ebedb7a74 100644
--- a/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.tsx
+++ b/src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.tsx
@@ -44,6 +44,8 @@ const WalletTransaction = ({
 }: WalletTransactionProps) => {
   const { t } = useTranslation();
 
+  const isActive = transaction.status === TransactionStatusType.processing;
+
   const statusText = useMemo(() => {
     return getWalletTransactionStatusText(transaction.status, t);
   }, [transaction.status, t]);
@@ -55,7 +57,12 @@ const WalletTransaction = ({
     );
 
     return (
-      <Container transition={transition} animate={animate} initial={initial}>
+      <Container
+        isActive={isActive}
+        transition={transition}
+        animate={animate}
+        initial={initial}
+      >
         <TextContainer>
           <SpanTitle>
             {t("wallet.approve", { symbol: transaction.token.symbol })}
@@ -82,7 +89,12 @@ const WalletTransaction = ({
     );
 
     return (
-      <Container transition={transition} animate={animate} initial={initial}>
+      <Container
+        isActive={isActive}
+        transition={transition}
+        animate={animate}
+        initial={initial}
+      >
         <TextContainer>
           <SpanTitle>{t("orders.cancelOrder")}</SpanTitle>
           <SpanSubtitle>
@@ -115,7 +127,12 @@ const WalletTransaction = ({
     );
 
     return (
-      <Container transition={transition} animate={animate} initial={initial}>
+      <Container
+        isActive={isActive}
+        transition={transition}
+        animate={animate}
+        initial={initial}
+      >
         {transaction.status === TransactionStatusType.processing && (
           <RotatedIcon name="swap" iconSize={1.25} />
         )}
diff --git a/src/components/Typography/Typography.styles.tsx b/src/components/Typography/Typography.styles.tsx
index 714e8d921..78d2e1823 100644
--- a/src/components/Typography/Typography.styles.tsx
+++ b/src/components/Typography/Typography.styles.tsx
@@ -6,6 +6,7 @@ import styled, {
 } from "styled-components/macro";
 
 import breakPoints from "../../style/breakpoints";
+import { fontLoos, fontWide } from "../../style/themes";
 
 const elementMap: Record<
   keyof DefaultTheme["typography"],
@@ -49,6 +50,8 @@ const makeTypographyComponent = (
     {},
     never
   >)`
+    font-family: ${(props) =>
+      props.theme.typography[key].desktop.isWide ? fontWide : fontLoos};
     font-size: ${(props) => props.theme.typography[key].desktop.fontSize};
     font-weight: ${(props) => props.theme.typography[key].desktop.fontWeight};
     line-height: ${(props) => props.theme.typography[key].desktop.lineHeight};
@@ -118,11 +121,17 @@ export const StyledLink = makeTypographyComponent(
 ) as StyledComponent<"a", DefaultTheme, {}>;
 
 export const StyledNavigation = makeTypographyComponent("nav");
-export const StyledInfoHeading = makeTypographyComponent("infoHeading");
+export const StyledInfoHeading = makeTypographyComponent(
+  "infoHeading",
+  css`
+    font-family: ${fontWide};
+  `
+);
 export const StyledInfoSubHeading = makeTypographyComponent(
   "infoSubHeading",
   css`
     color: ${(props) => props.theme.colors.lightGrey};
+    font-family: ${fontWide};
   `
 );
 export const StyledFormLabel = makeTypographyComponent(
@@ -137,13 +146,13 @@ export const StyledFormInput = makeTypographyComponent(
   css`
     color: ${(props) =>
       props.theme.name === "dark"
-        ? props.theme.colors.white
+        ? props.theme.colors.carteBlanche
         : props.theme.colors.primary};
     background-color: transparent;
     border: none;
 
     &::placeholder {
-      color: ${(props) => props.theme.colors.placeholderGrey};
+      color: ${(props) => props.theme.colors.placeholder};
     }
   `
 );
diff --git a/src/components/WalletButton/subcomponents/WalletAddress/WalletAddress.styles.tsx b/src/components/WalletButton/subcomponents/WalletAddress/WalletAddress.styles.tsx
index b4ff7dfa6..b54e9ce7b 100644
--- a/src/components/WalletButton/subcomponents/WalletAddress/WalletAddress.styles.tsx
+++ b/src/components/WalletButton/subcomponents/WalletAddress/WalletAddress.styles.tsx
@@ -1,12 +1,6 @@
-import Blockies from "react-blockies";
-
 import styled from "styled-components/macro";
 
 import breakPoints from "../../../../style/breakpoints";
-import {
-  BorderedPill,
-  InputOrButtonBorderStyle,
-} from "../../../../style/mixins";
 import BorderedButton from "../../../../styled-components/BorderedButton/BorderedButton";
 import { InfoHeading } from "../../../Typography/Typography";
 
@@ -19,8 +13,10 @@ export const Button = styled.div`
 `;
 
 export const StyledBorderedButton = styled(BorderedButton)`
+  padding-inline: 1.5rem;
+
   @media ${breakPoints.phoneOnly} {
-    padding: 0 1rem;
+    padding-inline: 1rem;
   }
 `;
 
@@ -29,48 +25,20 @@ export const WalletAddressText = styled(InfoHeading)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-weight: 700;
+  font-size: 0.9375rem;
 
   @media ${breakPoints.phoneOnly} {
     font-size: 0.875rem;
-    font-weight: 500;
-  }
-`;
-
-export const BlockiesContainer = styled.div`
-  position: relative;
-  margin-right: 1.25rem;
-
-  &::after {
-    display: block;
-    content: "";
-    position: absolute;
-    background-color: ${(props) => props.theme.colors.green};
-    border-radius: 50%;
-    z-index: 5;
-    width: 0.5rem;
-    height: 0.5rem;
-    top: 1rem;
-    left: 1rem;
   }
 `;
 
-export const StyledBlockies = styled(Blockies)`
-  border-radius: 50%;
-  overflow: hidden;
-`;
-
 export const ConnectionStatusCircle = styled.div<{ $connected: boolean }>`
+  margin-top: 0.125rem;
   margin-right: 0.75rem;
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.625rem;
+  height: 0.625rem;
   background-color: ${(props) =>
     props.$connected ? props.theme.colors.green : props.theme.colors.red};
   border-radius: 50%;
 `;
-
-export const Placeholder = styled.div`
-  ${BorderedPill}
-  ${InputOrButtonBorderStyle}
-  width: 11.125rem;
-  height: 3rem;
-`;
diff --git a/src/components/WalletProviderList/WalletProviderList.styles.tsx b/src/components/WalletProviderList/WalletProviderList.styles.tsx
index cfe9c1300..b376d1616 100644
--- a/src/components/WalletProviderList/WalletProviderList.styles.tsx
+++ b/src/components/WalletProviderList/WalletProviderList.styles.tsx
@@ -1,17 +1,10 @@
 import styled from "styled-components/macro";
 
-import breakPoints from "../../style/breakpoints";
-import { sizes } from "../../style/sizes";
-
 export const StyledWalletProviderList = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0 ${sizes.tradeContainerPadding};
-  background: ${(props) => props.theme.colors.black};
-
-  @media ${breakPoints.phoneOnly} {
-    padding: 0 ${sizes.tradeContainerMobilePadding};
-  }
+  margin-block-start: 3rem;
+  padding-block-end: 2rem;
 `;
 
 export const TitleContainer = styled.div`
diff --git a/src/components/WalletProviderList/WalletProviderList.tsx b/src/components/WalletProviderList/WalletProviderList.tsx
index 13a57c0ab..8c27a8cde 100644
--- a/src/components/WalletProviderList/WalletProviderList.tsx
+++ b/src/components/WalletProviderList/WalletProviderList.tsx
@@ -3,7 +3,7 @@ import { useReducedMotion } from "framer-motion";
 import walletProviders, {
   WalletProvider,
 } from "../../web3-connectors/walletProviders";
-import { overlayShowHideAnimationDuration } from "../Overlay/Overlay";
+import { overlayShowHideAnimationDuration } from "../ModalOverlay/ModalOverlay";
 import { StyledWalletProviderList } from "./WalletProviderList.styles";
 import WalletProviderButton from "./subcomponents/WalletProviderButton/WalletProviderButton";
 
diff --git a/src/components/WalletProviderList/subcomponents/WalletProviderButton/WalletProviderButton.styles.tsx b/src/components/WalletProviderList/subcomponents/WalletProviderButton/WalletProviderButton.styles.tsx
index a6e3c89ef..16d3c6697 100644
--- a/src/components/WalletProviderList/subcomponents/WalletProviderButton/WalletProviderButton.styles.tsx
+++ b/src/components/WalletProviderList/subcomponents/WalletProviderButton/WalletProviderButton.styles.tsx
@@ -1,22 +1,27 @@
 import styled, { css } from "styled-components/macro";
 
-import { InputOrButtonBorderStyleType2 } from "../../../../style/mixins";
+import { BorderlessButtonStyle } from "../../../../style/mixins";
 
 export const ButtonStyle = css`
-  ${InputOrButtonBorderStyleType2};
+  ${BorderlessButtonStyle};
 
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
-  padding: 1rem;
-  height: 4.5rem;
-  background: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.darkGrey : theme.colors.primaryLight};
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  height: 3.5rem;
+  font-size: 1.25rem;
+
+  &:hover,
+  &:focus {
+    background: ${({ theme }) => theme.colors.darkBlue};
+  }
 
   & + a,
   & + button {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
   }
 `;
 
diff --git a/src/components/WalletSignScreen/WalletSignScreen.styles.tsx b/src/components/WalletSignScreen/WalletSignScreen.styles.tsx
deleted file mode 100644
index c217795f9..000000000
--- a/src/components/WalletSignScreen/WalletSignScreen.styles.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled from "styled-components/macro";
-
-import { WidgetHeader } from "../../styled-components/WidgetHeader/WidgetHeader";
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-`;
-
-export const Text = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  padding: 0 15%;
-  text-align: center;
-  color: ${({ theme }) => theme.colors.darkSubText};
-`;
-
-export const StyledWidgetHeader = styled(WidgetHeader)`
-  justify-self: flex-start;
-  margin-bottom: auto;
-`;
diff --git a/src/components/WalletSignScreen/WalletSignScreen.tsx b/src/components/WalletSignScreen/WalletSignScreen.tsx
index 5510bdd57..97fab50ee 100644
--- a/src/components/WalletSignScreen/WalletSignScreen.tsx
+++ b/src/components/WalletSignScreen/WalletSignScreen.tsx
@@ -1,27 +1,39 @@
-import React, { FC, ReactElement } from "react";
-import { useTranslation } from "react-i18next";
+import { FC, ReactElement } from "react";
 
-import { Title } from "../Typography/Typography";
-import { Container, StyledWidgetHeader, Text } from "./WalletSignScreen.styles";
+import i18n from "i18next";
+
+import {
+  OverlayContainer,
+  OverlaySpinningLoader,
+  OverlaySubHeading,
+  OverlayTitle,
+} from "../../styled-components/Overlay/Overlay";
+import OverlayLoader from "../OverlayLoader/OverlayLoader";
+
+type WalletSignScreenType =
+  | "approve"
+  | "deposit"
+  | "signature"
+  | "swap"
+  | "cancel";
 
 interface WalletConfirmScreenProps {
+  type?: WalletSignScreenType;
   className?: string;
 }
 
 const WalletSignScreen: FC<WalletConfirmScreenProps> = ({
+  type = "approve",
   className = "",
 }): ReactElement => {
-  const { t } = useTranslation();
-
   return (
-    <Container className={className}>
-      <StyledWidgetHeader>
-        <Title type="h2" as="h1">
-          {t("wallet.signInWallet")}
-        </Title>
-      </StyledWidgetHeader>
-      <Text>{t("wallet.ifYourWalletDoesNotOpenSomethingWentWrong")}</Text>
-    </Container>
+    <OverlayContainer className={className}>
+      <OverlayLoader />
+      <OverlayTitle type="h2">{i18n.t("orders.pendingWallet")}</OverlayTitle>
+      <OverlaySubHeading>
+        {i18n.t("orders.pendingConfirmation")}
+      </OverlaySubHeading>
+    </OverlayContainer>
   );
 };
 
diff --git a/src/components/WidgetFrame/WidgetFrame.styles.tsx b/src/components/WidgetFrame/WidgetFrame.styles.tsx
index f69ceda5a..87b8d3501 100644
--- a/src/components/WidgetFrame/WidgetFrame.styles.tsx
+++ b/src/components/WidgetFrame/WidgetFrame.styles.tsx
@@ -6,21 +6,12 @@ import { sizes } from "../../style/sizes";
 export const WidgetFrameWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  position: relative;
   border-radius: 0.25rem;
   margin: 0 ${sizes.pageMobilePadding};
-  width: ${sizes.widgetSize};
+  width: ${sizes.widgetWidth};
   height: fit-content;
-  min-height: ${sizes.widgetSize};
+  min-height: ${sizes.widgetHeight};
   padding: ${sizes.tradeContainerPadding};
-  background: ${(props) => props.theme.colors.black};
-  box-shadow: ${(props) => props.theme.shadows.widgetGlow};
-  transition: box-shadow 0.3s ease-in-out;
-  will-change: transform;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 
   @media ${breakPoints.phoneOnly} {
     width: 100%;
@@ -31,30 +22,18 @@ export const WidgetFrameWrapper = styled.div`
 `;
 
 type StyledTradeContainerProps = {
-  $isOpen?: boolean;
   $isConnected?: boolean;
+  $isOverlayOpen?: boolean;
 };
 
 export const StyledWidgetFrame = styled.div<StyledTradeContainerProps>`
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  min-height: ${sizes.widgetSize};
-
-  ${WidgetFrameWrapper} {
-    box-shadow: ${(props) =>
-      props.$isConnected
-        ? props.theme.shadows.widgetGlow
-        : props.theme.shadows.widgetGlowOff};
-  }
-
-  @media ${breakPoints.tabletPortraitUp} {
-    transition: transform 0.3s ease-in-out;
-    transform: ${(props) => (props.$isOpen ? "translate(-6.5rem, 0rem)" : "0")};
-  }
+  min-height: ${sizes.widgetHeight};
+  overflow-y: ${(props) => (props.$isOverlayOpen ? "auto" : "hidden")};
 
   @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} {
     margin-bottom: 1.5rem;
diff --git a/src/components/WidgetFrame/WidgetFrame.tsx b/src/components/WidgetFrame/WidgetFrame.tsx
index 769f45bff..49c1042d0 100644
--- a/src/components/WidgetFrame/WidgetFrame.tsx
+++ b/src/components/WidgetFrame/WidgetFrame.tsx
@@ -5,16 +5,19 @@ import { WidgetFrameWrapper, StyledWidgetFrame } from "./WidgetFrame.styles";
 type WidgetFrameType = {
   children?: React.ReactNode;
   isConnected?: boolean;
-  isOpen?: boolean;
+  isOverlayOpen?: boolean;
 };
 
 const WidgetFrame: FC<WidgetFrameType> = ({
   children,
-  isOpen,
   isConnected,
+  isOverlayOpen,
 }): ReactElement => {
   return (
-    <StyledWidgetFrame $isOpen={isOpen} $isConnected={isConnected}>
+    <StyledWidgetFrame
+      $isConnected={isConnected}
+      $isOverlayOpen={isOverlayOpen}
+    >
       <WidgetFrameWrapper>{children}</WidgetFrameWrapper>
     </StyledWidgetFrame>
   );
diff --git a/src/constants/locales.ts b/src/constants/locales.ts
index 204365cd1..611e2bb79 100644
--- a/src/constants/locales.ts
+++ b/src/constants/locales.ts
@@ -9,6 +9,7 @@ export const SUPPORTED_LOCALES = [
   "ro",
   "ukr",
   "zh-tr",
+  "th",
 ] as const;
 
 export type SupportedLocale = typeof SUPPORTED_LOCALES[number];
@@ -25,6 +26,7 @@ export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
   ro: "Limba română",
   ukr: "українська",
   "zh-tr": "中文繁體",
+  th: "ภาษาไทย",
 };
 
 export const getUserLanguage = (): SupportedLocale => {
diff --git a/src/contexts/interface/Interface.tsx b/src/contexts/interface/Interface.tsx
index b92b96ddb..271991d62 100644
--- a/src/contexts/interface/Interface.tsx
+++ b/src/contexts/interface/Interface.tsx
@@ -1,47 +1,63 @@
 import React, { Dispatch, FC, useEffect, useState } from "react";
 
+import useAppRouteParams from "../../hooks/useAppRouteParams";
 import useDebounce from "../../hooks/useDebounce";
 import useWindowSize from "../../hooks/useWindowSize";
 
 export interface InterfaceContextContextProps {
   isConnecting: boolean;
   isDebugMode: boolean;
+  showModalOverlay: boolean;
+  showTransactionOverlay: boolean;
   showMobileToolbar: boolean;
   showWalletList: boolean;
   transactionsTabIsOpen: boolean;
 
   pageHeight?: number;
+  overlayHeight?: number;
 
   setIsConnecting: Dispatch<React.SetStateAction<boolean>>;
   setIsDebugMode: Dispatch<React.SetStateAction<boolean>>;
   setShowMobileToolbar: Dispatch<React.SetStateAction<boolean>>;
+  setShowModalOverlay: Dispatch<React.SetStateAction<boolean>>;
+  setShowTransactionOverlay: Dispatch<React.SetStateAction<boolean>>;
   setShowWalletList: Dispatch<React.SetStateAction<boolean>>;
   setTransactionsTabIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  setOverlayHeight: Dispatch<React.SetStateAction<number>>;
 }
 
 export const InterfaceContext =
   React.createContext<InterfaceContextContextProps>({
     isConnecting: false,
     isDebugMode: false,
-    showWalletList: false,
     showMobileToolbar: false,
+    showModalOverlay: false,
+    showTransactionOverlay: false,
+    showWalletList: false,
     transactionsTabIsOpen: false,
     setIsConnecting: () => {},
     setIsDebugMode: () => {},
     setShowMobileToolbar: () => {},
+    setShowModalOverlay: () => {},
+    setShowTransactionOverlay: () => {},
     setShowWalletList: () => {},
     setTransactionsTabIsOpen: () => {},
+    setOverlayHeight: () => {},
   });
 
 const InterfaceProvider: FC = ({ children }) => {
   const { height: windowHeight } = useWindowSize();
+  const appRouteParams = useAppRouteParams();
 
   const [isConnecting, setIsConnecting] = useState(false);
   const [isDebugMode, setIsDebugMode] = useState(false);
   const [showMobileToolbar, setShowMobileToolbar] = useState(false);
+  const [showModalOverlay, setShowModalOverlay] = useState(false);
+  const [showTransactionOverlay, setShowTransactionOverlay] = useState(false);
   const [showWalletList, setShowWalletList] = useState(false);
   const [transactionsTabIsOpen, setTransactionsTabIsOpen] = useState(false);
   const [pageHeight, setPageHeight] = useState(windowHeight);
+  const [overlayHeight, setOverlayHeight] = useState(0);
 
   useDebounce(
     () => {
@@ -51,6 +67,12 @@ const InterfaceProvider: FC = ({ children }) => {
     [windowHeight]
   );
 
+  useEffect(() => {
+    if (!showModalOverlay) {
+      setOverlayHeight(0);
+    }
+  }, [showModalOverlay]);
+
   useEffect(() => {
     if (showMobileToolbar) {
       document.body.classList.add("scroll-locked");
@@ -59,20 +81,32 @@ const InterfaceProvider: FC = ({ children }) => {
     }
   }, [showMobileToolbar]);
 
+  useEffect(() => {
+    setShowTransactionOverlay(false);
+    setTransactionsTabIsOpen(false);
+    setShowModalOverlay(false);
+  }, [appRouteParams.route]);
+
   return (
     <InterfaceContext.Provider
       value={{
         isConnecting,
         isDebugMode,
         showMobileToolbar,
+        showModalOverlay,
+        showTransactionOverlay,
         showWalletList,
         transactionsTabIsOpen,
         pageHeight,
+        overlayHeight,
         setIsConnecting,
         setIsDebugMode,
         setShowMobileToolbar,
+        setShowModalOverlay,
+        setShowTransactionOverlay,
         setShowWalletList,
         setTransactionsTabIsOpen,
+        setOverlayHeight,
       }}
     >
       {children}
diff --git a/src/entities/ExtendedPricing/ExtendedPricingHelpers.ts b/src/entities/ExtendedPricing/ExtendedPricingHelpers.ts
index ff18064e7..c2c7fd080 100644
--- a/src/entities/ExtendedPricing/ExtendedPricingHelpers.ts
+++ b/src/entities/ExtendedPricing/ExtendedPricingHelpers.ts
@@ -3,8 +3,10 @@ import { calculateCostFromLevels, Pricing } from "@airswap/utils";
 import { BigNumber } from "bignumber.js";
 
 import { PricingErrorType } from "../../errors/pricingError";
+import { compareAddresses } from "../../helpers/string";
 import { isLevels } from "../Pricing/PricingHelpers";
 import { ExtendedPricing } from "./ExtendedPricing";
+import { transformToExtendedPricing } from "./ExtendedPricingTransformers";
 
 export const isExtendedPricing = (value: any): value is ExtendedPricing =>
   typeof value === "object" &&
@@ -32,8 +34,6 @@ export const getPricingQuoteAmount = (
 
   if (pricing.minimum) {
     if (signerAmount.isLessThan(pricing.minimum)) {
-      console.error("[getPricingQuoteAmount] Amount too low");
-
       return PricingErrorType.belowMinimumAmount;
     }
   }
@@ -41,3 +41,55 @@ export const getPricingQuoteAmount = (
   // NOTE: this can throw if requested amount exceeds available.
   return calculateCostFromLevels(signerAmount.toString(), levels);
 };
+
+export const getBestPricing = (
+  pricings: ExtendedPricing[],
+  baseTokenAmount: string,
+  protocolFee: number
+): ExtendedPricing | PricingErrorType => {
+  const quoteAmounts = pricings.map((pricing) =>
+    getPricingQuoteAmount(pricing, baseTokenAmount, protocolFee)
+  );
+
+  // If all pricings are errors, return the first error
+  if (quoteAmounts.every((quoteAmount) => quoteAmount in PricingErrorType)) {
+    return quoteAmounts.find(
+      (quoteAmount) => quoteAmount in PricingErrorType
+    ) as PricingErrorType;
+  }
+
+  const highestQuoteIndex = quoteAmounts
+    .filter((quoteAmount) => typeof quoteAmount === "string")
+    .reduce(
+      (maxIndex, current, index, arr) =>
+        new BigNumber(arr[maxIndex]).isLessThan(new BigNumber(current))
+          ? index
+          : maxIndex,
+      0
+    );
+
+  return pricings[highestQuoteIndex];
+};
+
+export const handlePricingErc20Event = (
+  resources: Pricing[],
+  locator: string,
+  serverWallet: string | null,
+  baseToken: string,
+  baseTokenAmount: string,
+  quoteToken: string,
+  protocolFee: number
+): ExtendedPricing | PricingErrorType => {
+  const pricings = resources
+    .map((pricing) =>
+      transformToExtendedPricing(pricing, locator, serverWallet)
+    )
+    .filter((pricing) => {
+      return (
+        compareAddresses(pricing.baseToken, baseToken) &&
+        compareAddresses(pricing.quoteToken, quoteToken)
+      );
+    });
+
+  return getBestPricing(pricings, baseTokenAmount, protocolFee);
+};
diff --git a/src/entities/ExtendedPricing/ExtendedPricingService.ts b/src/entities/ExtendedPricing/ExtendedPricingService.ts
index 86a8dd823..157ae92fe 100644
--- a/src/entities/ExtendedPricing/ExtendedPricingService.ts
+++ b/src/entities/ExtendedPricing/ExtendedPricingService.ts
@@ -12,6 +12,9 @@ export const subscribeExtendedPricingERC20 = async (
     { baseToken, quoteToken },
   ]);
 
+  server.unsubscribePricingERC20([{ baseToken, quoteToken }]);
+  server.disconnect();
+
   return pricings.map((pricing) =>
     transformToExtendedPricing(
       pricing,
@@ -28,6 +31,8 @@ export const getExtendedPricingERC20 = async (
 ): Promise<ExtendedPricing[]> => {
   const pricings = await server.getPricingERC20([{ baseToken, quoteToken }]);
 
+  server.disconnect();
+
   return pricings.map((pricing) =>
     transformToExtendedPricing(
       pricing,
diff --git a/src/entities/ExtendedPricing/ExtendedPricingTransformers.ts b/src/entities/ExtendedPricing/ExtendedPricingTransformers.ts
index 5bd8d8836..daaa0532e 100644
--- a/src/entities/ExtendedPricing/ExtendedPricingTransformers.ts
+++ b/src/entities/ExtendedPricing/ExtendedPricingTransformers.ts
@@ -1,5 +1,10 @@
 import { Pricing } from "@airswap/utils";
+import { createOrderERC20, TokenInfo } from "@airswap/utils";
 
+import BigNumber from "bignumber.js";
+
+import { LAST_LOOK_ORDER_EXPIRY_SEC } from "../../constants/configParams";
+import { getPricingQuoteAmount } from "../../entities/ExtendedPricing/ExtendedPricingHelpers";
 import { ExtendedPricing } from "./ExtendedPricing";
 
 export const transformToExtendedPricing = (
@@ -11,3 +16,47 @@ export const transformToExtendedPricing = (
   serverWallet,
   locator,
 });
+
+interface TransformExtendedPricingToUnsignedOrderProps {
+  account: string;
+  baseToken: TokenInfo;
+  baseAmount: string;
+  pricing: ExtendedPricing;
+  protocolFee: number;
+  quoteToken: TokenInfo;
+}
+
+export const transformExtendedPricingToUnsignedOrder = (
+  props: TransformExtendedPricingToUnsignedOrderProps
+) => {
+  const { account, baseToken, baseAmount, pricing, protocolFee, quoteToken } =
+    props;
+
+  const quoteAmount = getPricingQuoteAmount(pricing, baseAmount, protocolFee);
+  const senderWallet = pricing.serverWallet;
+
+  const baseAmountAtomic = new BigNumber(baseAmount)
+    .multipliedBy(10 ** baseToken.decimals)
+    // Note that we remove the signer fee from the amount that we send.
+    // This was already done to determine quoteAmount.
+    .dividedBy(1 + protocolFee / 10000)
+    .integerValue(BigNumber.ROUND_CEIL)
+    .toString();
+
+  const quoteAmountAtomic = new BigNumber(quoteAmount)
+    .multipliedBy(10 ** quoteToken.decimals)
+    .integerValue(BigNumber.ROUND_FLOOR)
+    .toString();
+
+  return createOrderERC20({
+    expiry: Math.floor(Date.now() / 1000 + LAST_LOOK_ORDER_EXPIRY_SEC),
+    nonce: Date.now().toString(),
+    senderWallet,
+    signerWallet: account,
+    signerToken: baseToken.address,
+    senderToken: quoteToken.address,
+    protocolFee: protocolFee.toString(),
+    signerAmount: baseAmountAtomic,
+    senderAmount: quoteAmountAtomic,
+  });
+};
diff --git a/src/entities/Server/ServerService.ts b/src/entities/Server/ServerService.ts
index 1d79d8e05..3a1e575e2 100644
--- a/src/entities/Server/ServerService.ts
+++ b/src/entities/Server/ServerService.ts
@@ -1,30 +1,10 @@
-import { Server, RegistryV3, Registry } from "@airswap/libraries";
+import { Server, Registry } from "@airswap/libraries";
 import { ProtocolIds } from "@airswap/utils";
 import { BaseProvider } from "@ethersproject/providers";
 
 import { REGISTRY_SERVER_RESPONSE_TIME_MS } from "../../constants/configParams";
 import { isServer } from "./ServerHelpers";
 
-export const getVersionedRegistryServers = (
-  provider: BaseProvider,
-  chainId: number,
-  protocol: ProtocolIds,
-  quoteToken: string,
-  baseToken: string
-): Promise<Server[]> => {
-  if (RegistryV3.addresses[chainId]) {
-    return RegistryV3.getServers(provider, chainId, quoteToken, baseToken);
-  }
-
-  return Registry.getServers(
-    provider,
-    chainId,
-    protocol,
-    quoteToken,
-    baseToken
-  );
-};
-
 export const getRegistryServers = async (
   provider: BaseProvider,
   chainId: number,
@@ -34,13 +14,7 @@ export const getRegistryServers = async (
 ): Promise<Server[]> => {
   try {
     const response = await Promise.race([
-      getVersionedRegistryServers(
-        provider,
-        chainId,
-        protocol,
-        quoteToken,
-        baseToken
-      ),
+      Registry.getServers(provider, chainId, protocol, quoteToken, baseToken),
       new Promise((_, reject) =>
         setTimeout(
           () => reject(new Error("Timeout")),
diff --git a/src/features/balances/balancesHooks.ts b/src/features/balances/balancesHooks.ts
index e7095e59c..323d7bdcf 100644
--- a/src/features/balances/balancesHooks.ts
+++ b/src/features/balances/balancesHooks.ts
@@ -5,7 +5,6 @@ import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { TransactionTypes } from "../../types/transactionTypes";
-import { fetchUnkownTokens } from "../metadata/metadataActions";
 import { selectActiveTokens } from "../metadata/metadataSlice";
 import useLatestSucceededTransaction from "../transactions/hooks/useLatestSucceededTransaction";
 import {
@@ -34,8 +33,10 @@ export const useBalances = () => {
     if (
       activeAccount === account &&
       activeChainId === chainId &&
-      activeTokens.length === activeTokensLength
+      activeTokens.length <= activeTokensLength
     ) {
+      setActiveTokensLength(activeTokens.length);
+
       return;
     }
 
@@ -46,9 +47,12 @@ export const useBalances = () => {
     dispatch(requestActiveTokenBalances({ provider: library }));
     dispatch(requestActiveTokenAllowancesSwap({ provider: library }));
     dispatch(requestActiveTokenAllowancesWrapper({ provider: library }));
-    dispatch(fetchUnkownTokens({ provider: library }));
   }, [account, chainId, library, activeTokens]);
 
+  useEffect(() => {
+    setActiveTokensLength(activeTokens.length);
+  }, [account, chainId]);
+
   useEffect(() => {
     if (!isActive) {
       setActiveAccount(undefined);
@@ -64,6 +68,10 @@ export const useBalances = () => {
 
     const { type } = latestSuccessfulTransaction;
 
+    if (latestSuccessfulTransaction.type === TransactionTypes.order) {
+      return;
+    }
+
     if (type === TransactionTypes.order) {
       dispatch(requestActiveTokenBalances({ provider: library }));
       dispatch(requestActiveTokenAllowancesSwap({ provider: library }));
diff --git a/src/features/balances/balancesSlice.ts b/src/features/balances/balancesSlice.ts
index 77942ddc4..a904b093b 100644
--- a/src/features/balances/balancesSlice.ts
+++ b/src/features/balances/balancesSlice.ts
@@ -84,8 +84,7 @@ const getThunk: (
           ? getWethAddress(chainId)
           : undefined;
         const activeTokensAddresses = [
-          ...state.metadata.tokens.active,
-          ...state.metadata.tokens.custom,
+          ...state.metadata.activeTokens,
           ...(wrappedNativeToken ? [wrappedNativeToken] : []),
           ADDRESS_ZERO,
         ];
@@ -123,7 +122,7 @@ const getThunk: (
         // If we're not fetching, definitely continue
         if (sliceState.status !== "fetching") return true;
         if (sliceState.inFlightFetchTokens) {
-          const tokensToFetch = getState().metadata.tokens.active;
+          const tokensToFetch = getState().metadata.activeTokens;
           // only fetch if new list is larger.
           return tokensToFetch.length > sliceState.inFlightFetchTokens.length;
         }
diff --git a/src/features/indexer/indexerActions.ts b/src/features/indexer/indexerActions.ts
index 80bfc80fa..f0ad5608c 100644
--- a/src/features/indexer/indexerActions.ts
+++ b/src/features/indexer/indexerActions.ts
@@ -17,6 +17,7 @@ export const fetchIndexerUrls = createAsyncThunk<
   // First get a list of indexer nodes from the contract
   return await getIndexerUrls(web3.chainId!, provider);
 });
+
 export const getFilteredOrders = createAsyncThunk<
   FullOrderERC20[],
   { filter: Pick<OrderFilter, "senderToken" | "signerToken"> },
@@ -50,7 +51,7 @@ export const getFilteredOrders = createAsyncThunk<
         const ordersToAdd = orderResponse.orders;
         orders = { ...orders, ...ordersToAdd };
       } catch (e) {
-        console.log(
+        console.error(
           `[indexerSlice] Order request failed for ${
             indexerState.indexerUrls![i] || "an indexer node"
           }`,
diff --git a/src/features/metadata/metadataActions.ts b/src/features/metadata/metadataActions.ts
index 4343c462e..9b5b1684f 100644
--- a/src/features/metadata/metadataActions.ts
+++ b/src/features/metadata/metadataActions.ts
@@ -5,48 +5,65 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import * as ethers from "ethers";
 
 import { AppDispatch, RootState } from "../../app/store";
-import { getProtocolFee, getUnknownTokens } from "./metadataApi";
+import { getUniqueSingleDimensionArray } from "../../helpers/array";
+import { Web3State } from "../web3/web3Slice";
+import {
+  getActiveTokensLocalStorageKey,
+  getProtocolFee,
+  getUnknownTokens,
+  getUnknownTokensLocalStorageKey,
+} from "./metadataApi";
+import {
+  setActiveTokens,
+  MetadataTokenInfoMap,
+  setUnknownTokens,
+} from "./metadataSlice";
+
+const transformTokenInfoArrayToMap = (tokens: TokenInfo[]) => {
+  return tokens.reduce((acc, token) => {
+    const address = token.address.toLowerCase();
+
+    acc[address] = { ...token, address };
+    return acc;
+  }, {} as MetadataTokenInfoMap);
+};
 
 export const fetchAllTokens = createAsyncThunk<
-  TokenInfo[], // Return type
-  number, // First argument
+  MetadataTokenInfoMap,
+  number,
   {
-    // thunkApi
     dispatch: AppDispatch;
     state: RootState;
   }
->("metadata/getKnownTokens", async (chainId, thunkApi) => {
+>("metadata/getKnownTokens", async (chainId) => {
   const response = await getKnownTokens(chainId);
 
   if (response.errors.length) {
-    console.log("Errors fetching metadata", response.errors);
+    console.error("Errors fetching metadata", response.errors);
 
-    return [];
+    return {};
   }
 
-  return response.tokens;
+  return transformTokenInfoArrayToMap(response.tokens);
 });
 export const fetchUnkownTokens = createAsyncThunk<
-  TokenInfo[], // Return type
+  MetadataTokenInfoMap,
   {
-    // First argument
     provider: ethers.providers.BaseProvider;
+    tokens: string[];
   },
   {
-    // thunkApi
     dispatch: AppDispatch;
     state: RootState;
   }
->("metadata/fetchUnknownTokens", async ({ provider }, thunkApi) => {
-  const { registry, metadata, web3 } = thunkApi.getState();
-  if (!web3.chainId) return [];
+>("metadata/fetchUnknownTokens", async ({ provider, tokens }, thunkApi) => {
+  const response = await getUnknownTokens(provider, tokens);
 
-  return await getUnknownTokens(
-    web3.chainId!,
-    registry.allSupportedTokens,
-    Object.values(metadata.tokens.all),
-    provider
-  );
+  if (!response) {
+    return {};
+  }
+
+  return transformTokenInfoArrayToMap(response);
 });
 export const fetchProtocolFee = createAsyncThunk<
   number,
@@ -57,3 +74,93 @@ export const fetchProtocolFee = createAsyncThunk<
 >("metadata/fetchProtocolFee", async ({ provider, chainId }) =>
   getProtocolFee(chainId, provider)
 );
+
+const writeActiveTokensToLocalStorage = (
+  activeTokens: string[],
+  web3: Web3State
+) => {
+  if (!web3.account || !web3.chainId) {
+    return;
+  }
+
+  const localStorageKey = getActiveTokensLocalStorageKey(
+    web3.account,
+    web3.chainId
+  );
+
+  localStorage.setItem(localStorageKey, JSON.stringify(activeTokens));
+};
+
+const writeUnknownTokensToLocalStorage = (
+  unknownTokens: MetadataTokenInfoMap,
+  web3: Web3State
+) => {
+  if (!web3.chainId) {
+    return;
+  }
+
+  const localStorageKey = getUnknownTokensLocalStorageKey(web3.chainId);
+
+  localStorage.setItem(localStorageKey, JSON.stringify(unknownTokens));
+};
+
+export const addActiveToken = createAsyncThunk<
+  void,
+  string,
+  {
+    dispatch: AppDispatch;
+    state: RootState;
+  }
+>("metadata/addActiveToken", async (token, { dispatch, getState }) => {
+  const { metadata, web3 } = getState();
+
+  const activeTokens = [...metadata.activeTokens, token.toLowerCase()].filter(
+    getUniqueSingleDimensionArray
+  );
+
+  writeActiveTokensToLocalStorage(activeTokens, web3);
+  dispatch(setActiveTokens(activeTokens));
+});
+
+export const removeActiveToken = createAsyncThunk<
+  void,
+  string,
+  {
+    dispatch: AppDispatch;
+    state: RootState;
+  }
+>("metadata/removeActiveToken", async (token, { dispatch, getState }) => {
+  const { metadata, web3 } = getState();
+
+  const activeTokens = metadata.activeTokens.filter(
+    (t) => t !== token.toLowerCase()
+  );
+
+  writeActiveTokensToLocalStorage(activeTokens, web3);
+  dispatch(setActiveTokens(activeTokens));
+});
+
+export const addUnknownTokenInfo = createAsyncThunk<
+  void,
+  TokenInfo,
+  {
+    dispatch: AppDispatch;
+    state: RootState;
+  }
+>("metadata/addUnknownTokenInfo", async (tokenInfo, { dispatch, getState }) => {
+  const { metadata, web3 } = getState();
+
+  const unknownToken = {
+    ...tokenInfo,
+    address: tokenInfo.address.toLowerCase(),
+  };
+
+  const unknownTokens = {
+    ...metadata.unknownTokens,
+    [unknownToken.address]: unknownToken,
+  };
+
+  writeUnknownTokensToLocalStorage(unknownTokens, web3);
+
+  dispatch(setUnknownTokens(unknownTokens));
+});
diff --git a/src/features/metadata/metadataApi.ts b/src/features/metadata/metadataApi.ts
index d4cb3e7b2..47999b3a1 100644
--- a/src/features/metadata/metadataApi.ts
+++ b/src/features/metadata/metadataApi.ts
@@ -4,7 +4,7 @@ import { Web3Provider } from "@ethersproject/providers";
 import * as ethers from "ethers";
 
 import { getSwapErc20Contract } from "../../helpers/swapErc20";
-import { MetadataTokens } from "./metadataSlice";
+import { MetadataTokenInfoMap } from "./metadataSlice";
 
 export const getActiveTokensLocalStorageKey: (
   account: string,
@@ -12,76 +12,50 @@ export const getActiveTokensLocalStorageKey: (
 ) => string = (account, chainId) =>
   `airswap/activeTokens/${account}/${chainId}`;
 
-export const getCustomTokensLocalStorageKey: (
-  account: string,
-  chainId: number
-) => string = (account, chainId) =>
-  `airswap/customTokens/${account}/${chainId}`;
-
-export const getAllTokensLocalStorageKey = (chainId: number): string =>
-  `airswap/metadataCache/${chainId}`;
+export const getUnknownTokensLocalStorageKey: (chainId: number) => string = (
+  chainId
+) => `airswap/unknownTokens/${chainId}`;
 
 export const getUnknownTokens = async (
-  chainId: number,
-  supportedTokenAddresses: string[],
-  allTokens: TokenInfo[],
-  provider: ethers.providers.BaseProvider
+  provider: ethers.providers.BaseProvider,
+  tokens: string[]
 ): Promise<TokenInfo[]> => {
-  // Determine tokens we still don't know about.
-  const allTokenAddresses = allTokens.map((token) => token.address);
-  const unknownTokens = supportedTokenAddresses.filter(
-    (supportedTokenAddr) => !allTokenAddresses.includes(supportedTokenAddr)
-  );
+  const scrapePromises = tokens.map((t) => getTokenInfo(provider, t));
+  const results = await Promise.allSettled(scrapePromises);
 
-  let scrapedTokens: TokenInfo[] = [];
-  if (unknownTokens.length) {
-    const scrapePromises = unknownTokens.map((t) => getTokenInfo(provider, t));
-    const results = await Promise.allSettled(scrapePromises);
-    scrapedTokens = results
-      .filter((r) => r.status === "fulfilled")
-      .map((r) => {
-        const tokenInfo = (r as PromiseFulfilledResult<TokenInfo>).value;
-        return {
-          ...tokenInfo,
-          address: tokenInfo.address.toLowerCase(),
-        };
-      });
-  }
-
-  return scrapedTokens;
+  return results
+    .filter((r) => r.status === "fulfilled")
+    .map((r) => {
+      const tokenInfo = (r as PromiseFulfilledResult<TokenInfo>).value;
+      return {
+        ...tokenInfo,
+        address: tokenInfo.address.toLowerCase(),
+      };
+    });
 };
 
 export const getActiveTokensFromLocalStorage = (
   account: string,
   chainId: number
-): MetadataTokens["active"] => {
-  const savedTokens = (
-    localStorage.getItem(getActiveTokensLocalStorageKey(account, chainId)) || ""
-  )
-    .split(",")
-    .filter((address) => address.length);
-  return (savedTokens.length && savedTokens) || [];
-};
+): string[] | undefined => {
+  const savedTokenString = localStorage.getItem(
+    getActiveTokensLocalStorageKey(account, chainId)
+  );
 
-export const getCustomTokensFromLocalStorage = (
-  account: string,
-  chainId: number
-): MetadataTokens["custom"] => {
-  const savedTokens = (
-    localStorage.getItem(getCustomTokensLocalStorageKey(account, chainId)) || ""
-  )
-    .split(",")
-    .filter((address) => address.length);
-  return (savedTokens.length && savedTokens) || [];
+  try {
+    return savedTokenString ? JSON.parse(savedTokenString) : undefined;
+  } catch (e) {
+    console.error(e);
+    return undefined;
+  }
 };
 
-export const getAllTokensFromLocalStorage = (
+export const getUnknownTokensFromLocalStorage = (
   chainId: number
-): MetadataTokens["all"] => {
-  const localStorageItem = localStorage.getItem(
-    getAllTokensLocalStorageKey(chainId)
+): MetadataTokenInfoMap => {
+  return JSON.parse(
+    localStorage.getItem(getUnknownTokensLocalStorageKey(chainId)) || "{}"
   );
-  return localStorageItem ? JSON.parse(localStorageItem) : {};
 };
 
 export const getProtocolFee = async (
diff --git a/src/features/metadata/metadataHooks.ts b/src/features/metadata/metadataHooks.ts
index fd2cebfac..9fd687450 100644
--- a/src/features/metadata/metadataHooks.ts
+++ b/src/features/metadata/metadataHooks.ts
@@ -3,46 +3,71 @@ import { useEffect, useState } from "react";
 import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { getUniqueSingleDimensionArray } from "../../helpers/array";
 import { fetchSupportedTokens } from "../registry/registryActions";
-import { fetchAllTokens, fetchProtocolFee } from "./metadataActions";
+import { selectAllSupportedTokens } from "../registry/registrySlice";
+import {
+  fetchAllTokens,
+  fetchProtocolFee,
+  fetchUnkownTokens,
+} from "./metadataActions";
 import {
   getActiveTokensFromLocalStorage,
-  getAllTokensFromLocalStorage,
-  getCustomTokensFromLocalStorage,
+  getUnknownTokensFromLocalStorage,
 } from "./metadataApi";
-import { MetadataTokens, setTokens } from "./metadataSlice";
+import {
+  selectActiveTokenAddresses,
+  selectAllTokens,
+  setActiveTokens,
+  setUnknownTokens,
+} from "./metadataSlice";
 
 const useMetadata = () => {
   const dispatch = useAppDispatch();
 
   const { provider } = useWeb3React();
+  const allTokens = useAppSelector(selectAllTokens);
+  const activeTokenAddresses = useAppSelector(selectActiveTokenAddresses);
+  const supportedTokenAddresses = useAppSelector(selectAllSupportedTokens);
   const { isActive, account, chainId } = useAppSelector((state) => state.web3);
-  const { tokens } = useAppSelector((state) => state.metadata);
+  const { isFetchingAllTokensSuccess } = useAppSelector(
+    (state) => state.metadata
+  );
+  const { isFetchingSupportedTokensSuccess } = useAppSelector(
+    (state) => state.registry
+  );
 
   const [activeAccount, setActiveAccount] = useState<string>();
   const [activeAccountChainId, setActiveAccountChainId] = useState<number>();
   const [activeChainId, setActiveChainId] = useState<number>();
+  const [activeSupportedTokens, setActiveSupportedTokens] = useState<string[]>(
+    []
+  );
 
   useEffect(() => {
     if (!account || !chainId || !provider) {
       return;
     }
 
-    if (activeAccount === account && activeAccountChainId === chainId) {
+    if (
+      activeAccount === account &&
+      activeAccountChainId === chainId &&
+      JSON.stringify(activeSupportedTokens) ===
+        JSON.stringify(supportedTokenAddresses)
+    ) {
       return;
     }
 
     setActiveAccount(account);
     setActiveAccountChainId(chainId);
+    setActiveSupportedTokens(supportedTokenAddresses);
+
+    const newActiveTokens = getActiveTokensFromLocalStorage(account, chainId);
 
-    const tokens: MetadataTokens = {
-      all: getAllTokensFromLocalStorage(chainId),
-      active: getActiveTokensFromLocalStorage(account, chainId),
-      custom: getCustomTokensFromLocalStorage(account, chainId),
-    };
+    dispatch(setActiveTokens(newActiveTokens || supportedTokenAddresses));
+  }, [account, chainId, provider, isFetchingSupportedTokensSuccess]);
 
-    dispatch(setTokens(tokens));
-  }, [account, chainId, provider]);
+  // TODO: Fetch unknown when active tokens are added
 
   useEffect(() => {
     if (!chainId || !provider || !account) {
@@ -53,13 +78,43 @@ const useMetadata = () => {
       return;
     }
 
+    const unknownTokens = getUnknownTokensFromLocalStorage(chainId);
+
     setActiveChainId(chainId);
 
+    if (Object.keys(unknownTokens).length) {
+      dispatch(setUnknownTokens(unknownTokens));
+    }
+
     dispatch(fetchAllTokens(chainId));
     dispatch(fetchSupportedTokens({ account, chainId, provider }));
     dispatch(fetchProtocolFee({ chainId, provider }));
   }, [chainId, provider]);
 
+  useEffect(() => {
+    if (
+      !chainId ||
+      !provider ||
+      !isFetchingAllTokensSuccess ||
+      !isFetchingSupportedTokensSuccess
+    ) {
+      return;
+    }
+
+    const allTokenAddresses = allTokens.map((token) => token.address);
+    const activeAndSupportedTokenAddresses = [
+      ...activeTokenAddresses,
+      ...supportedTokenAddresses,
+    ].filter(getUniqueSingleDimensionArray);
+    const tokensMissingInfo = activeAndSupportedTokenAddresses.filter(
+      (address) => !allTokenAddresses.includes(address)
+    );
+
+    if (tokensMissingInfo.length) {
+      dispatch(fetchUnkownTokens({ provider, tokens: tokensMissingInfo }));
+    }
+  }, [isFetchingAllTokensSuccess, isFetchingSupportedTokensSuccess]);
+
   useEffect(() => {
     if (!isActive) {
       setActiveAccount(undefined);
diff --git a/src/features/metadata/metadataSlice.ts b/src/features/metadata/metadataSlice.ts
index 0cf831fc5..59f7c5eb6 100644
--- a/src/features/metadata/metadataSlice.ts
+++ b/src/features/metadata/metadataSlice.ts
@@ -2,77 +2,56 @@ import { TokenInfo } from "@airswap/utils";
 import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import { RootState } from "../../app/store";
-import { fetchSupportedTokens } from "../registry/registryActions";
-import { walletDisconnected } from "../web3/web3Actions";
-import { selectChainId, setWeb3Data } from "../web3/web3Slice";
+import { getUniqueSingleDimensionArray } from "../../helpers/array";
+import {
+  chainIdChanged,
+  walletChanged,
+  walletDisconnected,
+} from "../web3/web3Actions";
+import { selectChainId } from "../web3/web3Slice";
 import {
   fetchAllTokens,
   fetchProtocolFee,
   fetchUnkownTokens,
 } from "./metadataActions";
-import {
-  getActiveTokensFromLocalStorage,
-  getAllTokensFromLocalStorage,
-  getCustomTokensFromLocalStorage,
-} from "./metadataApi";
 
-export interface MetadataTokens {
-  all: {
-    [address: string]: TokenInfo;
-  };
-  active: string[];
-  custom: string[];
-}
+export type MetadataTokenInfoMap = {
+  [address: string]: TokenInfo;
+};
 
 export interface MetadataState {
   isFetchingAllTokens: boolean;
+  isFetchingAllTokensSuccess: boolean;
+  knownTokens: MetadataTokenInfoMap;
+  unknownTokens: MetadataTokenInfoMap;
   protocolFee: number;
-  tokens: MetadataTokens;
+  activeTokens: string[];
 }
 
 const initialState: MetadataState = {
   isFetchingAllTokens: false,
+  isFetchingAllTokensSuccess: false,
+  knownTokens: {},
+  unknownTokens: {},
   protocolFee: 0,
-  tokens: {
-    all: {},
-    active: [],
-    custom: [],
-  },
+  activeTokens: [],
 };
 
 export const metadataSlice = createSlice({
   name: "metadata",
   initialState,
   reducers: {
-    addActiveToken: (state, action: PayloadAction<string>) => {
-      const lowerCasedToken = action.payload.trim().toLowerCase();
-      if (!state.tokens.active.includes(lowerCasedToken)) {
-        state.tokens.active.push(lowerCasedToken);
-      }
-    },
-    addCustomToken: (state, action: PayloadAction<string>) => {
-      const lowerCasedToken = action.payload.trim().toLowerCase();
-      if (!state.tokens.custom.includes(lowerCasedToken)) {
-        state.tokens.custom.push(lowerCasedToken);
-      }
-    },
-    addTokenInfo: (state, action: PayloadAction<TokenInfo>) => {
-      state.tokens.all[action.payload.address] = action.payload;
-    },
-    removeActiveToken: (state, action: PayloadAction<string>) => {
-      state.tokens.active = state.tokens.active.filter(
-        (tokenAddress) => tokenAddress !== action.payload
-      );
-    },
-    removeCustomToken: (state, action: PayloadAction<string>) => {
-      state.tokens.custom = state.tokens.active.filter(
-        (tokenAddress) => tokenAddress !== action.payload
-      );
+    setActiveTokens: (state, action: PayloadAction<string[]>) => {
+      return {
+        ...state,
+        isInitialized: true,
+        activeTokens: action.payload.map((token) => token.toLowerCase()),
+      };
     },
-    setTokens: (state, action: PayloadAction<MetadataTokens>) => {
+    setUnknownTokens: (state, action: PayloadAction<MetadataTokenInfoMap>) => {
       return {
         ...state,
-        tokens: action.payload,
+        unknownTokens: action.payload,
       };
     },
   },
@@ -82,65 +61,54 @@ export const metadataSlice = createSlice({
         return {
           ...state,
           isFetchingAllTokens: true,
+          isFetchingAllTokensSuccess: false,
         };
       })
       .addCase(fetchAllTokens.fulfilled, (state, action): MetadataState => {
-        const { payload: tokenInfo } = action;
-        const newAllTokens = tokenInfo.reduce(
-          (allTokens: MetadataTokens["all"], token) => {
-            const address = token.address.toLowerCase();
-            if (!allTokens[address]) {
-              allTokens[address] = {
-                ...token,
-                address: token.address.toLowerCase(),
-              };
-            }
-            return allTokens;
-          },
-          {}
-        );
-
-        const stateAllTokens = Object.keys(state.tokens.all).reduce(
-          (allTokens: MetadataTokens["all"], token) => {
-            return {
-              ...allTokens,
-              [token.toLowerCase()]: state.tokens.all[token],
-            };
-          },
-          {}
-        );
-
-        const tokens = {
-          ...state.tokens,
-          all: {
-            ...stateAllTokens,
-            ...newAllTokens,
-          },
-        };
-
         return {
           ...state,
           isFetchingAllTokens: false,
-          tokens,
+          isFetchingAllTokensSuccess: true,
+          knownTokens: {
+            ...state.knownTokens,
+            ...action.payload,
+          },
         };
       })
-      .addCase(fetchAllTokens.rejected, (state, action): MetadataState => {
+      .addCase(fetchAllTokens.rejected, (state): MetadataState => {
         return {
           ...state,
           isFetchingAllTokens: false,
         };
       })
-      .addCase(fetchSupportedTokens.fulfilled, (state, action) => {
-        if (!state.tokens.active?.length)
-          state.tokens.active = action.payload.activeTokens || [];
-      })
       .addCase(fetchUnkownTokens.fulfilled, (state, action) => {
-        action.payload.forEach((token) => {
-          state.tokens.all[token.address] = token;
-        });
+        return {
+          ...state,
+          unknownTokens: {
+            ...state.unknownTokens,
+            ...action.payload,
+          },
+        };
       })
       .addCase(fetchProtocolFee.fulfilled, (state, action) => {
-        state.protocolFee = action.payload;
+        return {
+          ...state,
+          protocolFee: action.payload,
+        };
+      })
+      .addCase(walletChanged, (state): MetadataState => {
+        return {
+          ...state,
+          activeTokens: [],
+        };
+      })
+      .addCase(chainIdChanged, (state): MetadataState => {
+        return {
+          ...state,
+          knownTokens: {},
+          unknownTokens: {},
+          activeTokens: [],
+        };
       })
       .addCase(walletDisconnected, (): MetadataState => {
         return initialState;
@@ -148,21 +116,13 @@ export const metadataSlice = createSlice({
   },
 });
 
-export const {
-  addActiveToken,
-  addCustomToken,
-  addTokenInfo,
-  removeActiveToken,
-  removeCustomToken,
-  setTokens,
-} = metadataSlice.actions;
+export const { setActiveTokens, setUnknownTokens } = metadataSlice.actions;
 
-const selectActiveTokenAddresses = (state: RootState) =>
-  state.metadata.tokens.active;
-export const selectCustomTokenAddresses = (state: RootState) =>
-  state.metadata.tokens.custom;
+export const selectActiveTokenAddresses = (state: RootState) =>
+  state.metadata.activeTokens;
 export const selectAllTokens = (state: RootState) => [
-  ...Object.values(state.metadata.tokens.all),
+  ...Object.values(state.metadata.knownTokens),
+  ...Object.values(state.metadata.unknownTokens),
 ];
 export const selectAllTokenInfo = createSelector(
   [selectAllTokens, selectChainId],
@@ -178,16 +138,6 @@ export const selectActiveTokens = createSelector(
     );
   }
 );
-export const selectActiveTokensWithoutCustomTokens = createSelector(
-  [selectActiveTokenAddresses, selectCustomTokenAddresses, selectAllTokenInfo],
-  (activeTokenAddresses, customTokenAddresses, allTokenInfo) => {
-    return Object.values(allTokenInfo).filter(
-      (tokenInfo) =>
-        activeTokenAddresses.includes(tokenInfo.address) &&
-        !customTokenAddresses.includes(tokenInfo.address)
-    );
-  }
-);
 export const selectMetaDataReducer = (state: RootState) => state.metadata;
 export const selectProtocolFee = (state: RootState) =>
   state.metadata.protocolFee;
diff --git a/src/features/metadata/metadataSubscriber.ts b/src/features/metadata/metadataSubscriber.ts
deleted file mode 100644
index 1e51a85cb..000000000
--- a/src/features/metadata/metadataSubscriber.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { TokenInfo } from "@airswap/utils";
-
-import { store } from "../../app/store";
-import {
-  getActiveTokensLocalStorageKey,
-  getAllTokensLocalStorageKey,
-  getCustomTokensLocalStorageKey,
-} from "./metadataApi";
-
-interface TokensCache {
-  [address: string]: {
-    [chainId: number]: string[];
-  };
-}
-
-interface AllTokensCache {
-  [chainId: number]: {
-    [address: string]: TokenInfo;
-  };
-}
-
-const compareAndWriteTokensToLocalStorage = (
-  tokensCache: TokensCache,
-  tokens: string[],
-  address: string,
-  chainId: number,
-  localStorageKey: string
-) => {
-  if (!tokensCache[address]) {
-    tokensCache[address] = {};
-  }
-  const cachedActiveTokensForActiveWallet = tokensCache[address][chainId];
-  if (tokens.length && cachedActiveTokensForActiveWallet !== tokens) {
-    // active tokens have changed, persist to local storage.
-    tokensCache[address][chainId] = tokens;
-    localStorage.setItem(localStorageKey, tokens.join(","));
-  }
-};
-
-export const subscribeToSavedTokenChangesForLocalStoragePersisting = () => {
-  const activeTokensCache: TokensCache = {};
-  const customTokensCache: TokensCache = {};
-  const allTokensCache: AllTokensCache = {};
-
-  store.subscribe(() => {
-    const { web3, metadata, transactions } = store.getState();
-    if (!web3.isActive) return;
-
-    // All tokens
-    if (!allTokensCache[web3.chainId!]) {
-      allTokensCache[web3.chainId!] = {};
-    }
-
-    const cachedAllTokensForChain = allTokensCache[web3.chainId!];
-
-    if (
-      Object.values(metadata.tokens.all).length !==
-      Object.values(cachedAllTokensForChain).length
-    ) {
-      // all tokens have changed, persist to local storage.
-
-      allTokensCache[web3.chainId!] = metadata.tokens.all;
-      localStorage.setItem(
-        getAllTokensLocalStorageKey(web3.chainId!),
-        JSON.stringify(metadata.tokens.all)
-      );
-    }
-
-    if (!web3.account || !web3.chainId) {
-      return;
-    }
-
-    // Active tokens
-    compareAndWriteTokensToLocalStorage(
-      activeTokensCache,
-      metadata.tokens.active,
-      web3.account,
-      web3.chainId,
-      getActiveTokensLocalStorageKey(web3.account, web3.chainId)
-    );
-
-    // Custom tokens
-    compareAndWriteTokensToLocalStorage(
-      customTokensCache,
-      metadata.tokens.custom,
-      web3.account,
-      web3.chainId,
-      getCustomTokensLocalStorageKey(web3.account, web3.chainId)
-    );
-  });
-};
diff --git a/src/features/orders/ordersActions.ts b/src/features/orders/ordersActions.ts
index ead3129db..458e3840c 100644
--- a/src/features/orders/ordersActions.ts
+++ b/src/features/orders/ordersActions.ts
@@ -383,6 +383,8 @@ export const takeLastLookOrder =
   async (
     dispatch: AppDispatch
   ): Promise<SubmittedOrderUnderConsideration | undefined> => {
+    dispatch(setStatus("signing"));
+
     const servers = await Registry.getServers(
       library,
       chainId,
@@ -399,8 +401,6 @@ export const takeLastLookOrder =
       return;
     }
 
-    dispatch(setStatus("signing"));
-
     const signature = await createOrderERC20Signature(
       unsignedOrder,
       library.getSigner(),
diff --git a/src/features/orders/ordersHelpers.ts b/src/features/orders/ordersHelpers.ts
index f7518f82c..927a3e53c 100644
--- a/src/features/orders/ordersHelpers.ts
+++ b/src/features/orders/ordersHelpers.ts
@@ -229,7 +229,7 @@ export async function check(
     : errors;
 
   if (filteredErrors.length) {
-    console.error("check returned errors", errors);
+    console.error("check returned errors", filteredErrors);
   }
 
   return filteredErrors.map((error) => transformSwapErrorToAppError(error));
diff --git a/src/features/orders/ordersSlice.spec.ts b/src/features/orders/ordersSlice.spec.ts
index 515c23807..2144341ce 100644
--- a/src/features/orders/ordersSlice.spec.ts
+++ b/src/features/orders/ordersSlice.spec.ts
@@ -50,7 +50,7 @@ describe.only("orders reducer", () => {
         ],
       },
     };
-    expect(selectBestOrder(state).signerAmount).toBe("7");
+    expect(selectBestOrder(state)!.signerAmount).toBe("7");
   });
 
   it("should select the best sender side order", () => {
@@ -80,7 +80,7 @@ describe.only("orders reducer", () => {
         ],
       },
     };
-    expect(selectBestOrder(state).senderAmount).toBe("6");
+    expect(selectBestOrder(state)!.senderAmount).toBe("6");
   });
 
   it("should select orders based on longest expiry if token amounts are equal", () => {
@@ -112,7 +112,7 @@ describe.only("orders reducer", () => {
         ],
       },
     };
-    expect(selectBestOrder(state).expiry).toBe("1654764000");
+    expect(selectBestOrder(state)!.expiry).toBe("1654764000");
     jest.useRealTimers();
   });
 });
diff --git a/src/features/orders/ordersSlice.ts b/src/features/orders/ordersSlice.ts
index 734f19702..1f44bce24 100644
--- a/src/features/orders/ordersSlice.ts
+++ b/src/features/orders/ordersSlice.ts
@@ -56,7 +56,7 @@ export const { clear, setErrors, setResetStatus, setStatus } =
  * Sorts orders and returns the best order based on tokens received or sent
  * then falling back to expiry.
  */
-export const selectBestOrder = (state: RootState) =>
+export const selectBestOrder = (state: RootState): OrderERC20 | undefined =>
   // Note that `.sort` mutates the array, so we need to clone it first to
   // prevent mutating state.
   [...state.orders.orders].sort(orderSortingFunction)[0];
diff --git a/src/features/pricing/pricingApi.ts b/src/features/pricing/pricingApi.ts
deleted file mode 100644
index 1cf796e80..000000000
--- a/src/features/pricing/pricingApi.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  calculateCostFromLevels,
-  Formula,
-  Levels,
-  Pricing,
-} from "@airswap/utils";
-
-import { BigNumber } from "bignumber.js";
-
-export function pricingIsLevels(value: Levels | Formula): value is Levels {
-  return typeof value !== "string";
-}
-
-/**
- * Calculates the quote amount from pricing, given a base amount, fee, and
- * pricing.
- */
-export const calculateQuoteAmount: (params: {
-  baseAmount: string;
-  side: "buy" | "sell";
-  protocolFee: number;
-  pricing: Pricing;
-}) => string = ({ baseAmount, side, protocolFee, pricing }) => {
-  // baseAmount always known.
-  // For a sell, baseAmount is signerAmount.
-  // For a buy, baseAmount is senderAmount.
-
-  if (side === "sell") {
-    const levels = pricing.bid;
-    if (!pricingIsLevels(levels)) {
-      throw new Error("formulaic pricing not yet supported");
-    }
-    const signerAmount = new BigNumber(baseAmount)
-      // Get fee amount from protocolFee in metadata store
-      .dividedBy(1 + protocolFee / 10000);
-    // .integerValue(BigNumber.ROUND_CEIL)
-
-    if (pricing.minimum) {
-      if (signerAmount.isLessThan(pricing.minimum)) {
-        throw new Error("Amount too low");
-      }
-    }
-
-    // NOTE: this can throw if requested amount exceeds available.
-    const senderAmount = calculateCostFromLevels(
-      signerAmount.toString(),
-      levels
-    );
-
-    return senderAmount;
-  } else {
-    // buy order.
-    const levels = pricing.ask;
-    if (!pricingIsLevels(levels)) {
-      throw new Error("formulaic pricing not yet supported");
-    }
-    const senderAmount = baseAmount;
-    // Fee comes out of signerAmount, so we need to add it to the quoteAmount
-    const signerAmount = new BigNumber(
-      calculateCostFromLevels(senderAmount, levels)
-    )
-      .multipliedBy(1 + protocolFee / 10000)
-      // .integerValue(BigNumber.ROUND_FLOOR)
-      .toString();
-    return signerAmount;
-  }
-};
diff --git a/src/features/pricing/pricingSlice.ts b/src/features/pricing/pricingSlice.ts
deleted file mode 100644
index d82d1b946..000000000
--- a/src/features/pricing/pricingSlice.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Pricing } from "@airswap/utils";
-import { createSlice, PayloadAction, createSelector } from "@reduxjs/toolkit";
-
-import BigNumber from "bignumber.js";
-
-import { RootState } from "../../app/store";
-import { selectProtocolFee } from "../metadata/metadataSlice";
-import {
-  clearTradeTerms,
-  selectTradeTerms,
-} from "../tradeTerms/tradeTermsSlice";
-import { calculateQuoteAmount } from "./pricingApi";
-
-export interface PricingState {
-  [locator: string]: Pricing[];
-}
-
-type Pair = {
-  baseToken: string;
-  quoteToken: string;
-};
-
-// Initially empty
-const initialState: PricingState = {};
-
-export const pricingSlice = createSlice({
-  name: "pricing",
-  initialState,
-  reducers: {
-    updatePricing: (
-      state,
-      action: PayloadAction<{ locator: string; pricing: Pricing }>
-    ) => {
-      const { locator, pricing } = action.payload;
-      if (!state[locator]) {
-        state[locator] = [pricing];
-      } else {
-        const existingIndex = state[locator].findIndex(
-          (existingPricing) =>
-            existingPricing.baseToken === pricing.baseToken &&
-            existingPricing.quoteToken === pricing.quoteToken
-        );
-        if (existingIndex !== -1) {
-          state[locator][existingIndex] = pricing;
-        } else {
-          state[locator].push(pricing);
-        }
-      }
-    },
-    clearPricing: (
-      state,
-      action: PayloadAction<{ locator: string; pair: Pair }>
-    ) => {
-      const { locator, pair } = action.payload;
-      if (!state[locator]) return;
-      const i = state[locator].findIndex(
-        (existingPricing) =>
-          existingPricing.baseToken === pair.baseToken &&
-          existingPricing.quoteToken === pair.quoteToken
-      );
-      if (i === -1) return;
-      state[locator].splice(i, 1);
-    },
-  },
-  extraReducers: (builder) => {
-    builder.addCase(clearTradeTerms, () => initialState);
-  },
-});
-
-export const { updatePricing, clearPricing } = pricingSlice.actions;
-
-const selectPricing = (state: RootState) => state.pricing;
-
-export const selectBestPricing = createSelector(
-  selectTradeTerms,
-  selectPricing,
-  selectProtocolFee,
-  (terms, pricing, protocolFee) => {
-    let bestQuoteAmount = new BigNumber(0);
-    let bestPricing: {
-      locator: string;
-      quoteAmount: string;
-    } | null = null;
-
-    const { quoteToken, baseToken, baseAmount: baseTokenAmount, side } = terms;
-
-    Object.keys(pricing).forEach((locator) => {
-      const locatorPricing = pricing[locator];
-      const relevantIndex = locatorPricing.findIndex(
-        (p) =>
-          p.quoteToken.toLowerCase() === quoteToken.address.toLowerCase() &&
-          p.baseToken.toLowerCase() === baseToken.address.toLowerCase()
-      );
-
-      if (relevantIndex === -1) return;
-      const relevantPricing: Pricing = locatorPricing[relevantIndex];
-
-      try {
-        const quoteAmount = new BigNumber(
-          calculateQuoteAmount({
-            baseAmount: baseTokenAmount,
-            pricing: relevantPricing,
-            protocolFee: protocolFee,
-            side,
-          })
-        );
-        if (
-          (side === "sell" && quoteAmount.gt(bestQuoteAmount)) ||
-          (side === "buy" && quoteAmount.lt(bestQuoteAmount))
-        ) {
-          bestQuoteAmount = quoteAmount;
-          bestPricing = {
-            locator,
-            quoteAmount: quoteAmount.toString(),
-          };
-        }
-      } catch (e) {
-        // calculateQuoteAmount will throw if the amount exceeds the maximum or
-        // is less than the minimum - we can ignore these makers for the purpose
-        // of this quote.
-        // TODO: Show a warning to the user that the amount is too high or too low
-        console.error(e);
-        return;
-      }
-    });
-
-    return bestPricing;
-  }
-);
-
-export default pricingSlice.reducer;
diff --git a/src/features/quotes/hooks/useQuotesDebug.ts b/src/features/quotes/hooks/useQuotesDebug.ts
index 55a8b03f2..725c1070e 100644
--- a/src/features/quotes/hooks/useQuotesDebug.ts
+++ b/src/features/quotes/hooks/useQuotesDebug.ts
@@ -33,6 +33,8 @@ const useQuotesDebug = () => {
     bestQuote,
     lastLookError,
     rfqError,
+    streamedBestPricing,
+    streamedLastLookOrder,
   } = useAppSelector((state) => state.quotes);
   const { isLoading: isGasCostLoading, swapTransactionCost } = useAppSelector(
     (state) => state.gasCost
@@ -59,6 +61,18 @@ const useQuotesDebug = () => {
     }
   }, [bestPricing]);
 
+  useEffect(() => {
+    if (isDebugMode && streamedLastLookOrder) {
+      console.log("streamedLastLookOrder:", streamedLastLookOrder);
+    }
+  }, [streamedLastLookOrder]);
+
+  useEffect(() => {
+    if (isDebugMode && streamedBestPricing) {
+      console.log("streamedBestPricing:", streamedBestPricing);
+    }
+  }, [streamedBestPricing]);
+
   useEffect(() => {
     if (isDebugMode && bestRfqOrder) {
       console.log("bestRfqOrder:", bestRfqOrder);
diff --git a/src/features/quotes/quotesActions.ts b/src/features/quotes/quotesActions.ts
index 71ec4d89d..236f84e2a 100644
--- a/src/features/quotes/quotesActions.ts
+++ b/src/features/quotes/quotesActions.ts
@@ -1,6 +1,7 @@
+import { Server } from "@airswap/libraries";
 import {
-  createOrderERC20,
   OrderERC20,
+  Pricing,
   ProtocolIds,
   TokenInfo,
   UnsignedOrderERC20,
@@ -9,20 +10,19 @@ import { Web3Provider } from "@ethersproject/providers";
 import { formatUnits } from "@ethersproject/units";
 
 import { BigNumber } from "bignumber.js";
+import { providers } from "ethers";
 
 import { AppDispatch } from "../../app/store";
-import { LAST_LOOK_ORDER_EXPIRY_SEC } from "../../constants/configParams";
 import { ExtendedPricing } from "../../entities/ExtendedPricing/ExtendedPricing";
-import { getPricingQuoteAmount } from "../../entities/ExtendedPricing/ExtendedPricingHelpers";
+import {
+  handlePricingErc20Event,
+  isExtendedPricing,
+} from "../../entities/ExtendedPricing/ExtendedPricingHelpers";
+import { transformExtendedPricingToUnsignedOrder } from "../../entities/ExtendedPricing/ExtendedPricingTransformers";
+import { getRegistryServers } from "../../entities/Server/ServerService";
 import { PricingErrorType } from "../../errors/pricingError";
 import { fetchBestPricing, fetchBestRfqOrder } from "./quotesApi";
-import {
-  reset,
-  setBestLastLookOrder,
-  setBestOrder,
-  setLastLookError,
-  setRfqError,
-} from "./quotesSlice";
+import { reset, setBestOrder, setStreamedOrderAndPricing } from "./quotesSlice";
 
 interface FetchBestPricingAndRfqOrder {
   isSubmitted: boolean;
@@ -45,7 +45,6 @@ export const fetchBestPricingAndRfqOrder =
       baseToken,
       baseTokenAmount,
       chainId,
-      pricing,
       protocolFee,
       library,
       quoteToken,
@@ -84,52 +83,6 @@ export const fetchBestPricingAndRfqOrder =
     );
   };
 
-interface CreateLastLookUnsignedOrderProps {
-  account: string;
-  baseToken: TokenInfo;
-  baseAmount: string;
-  pricing: ExtendedPricing;
-  protocolFee: number;
-  quoteToken: TokenInfo;
-}
-
-export const createLastLookUnsignedOrder =
-  (props: CreateLastLookUnsignedOrderProps) =>
-  async (dispatch: AppDispatch): Promise<void> => {
-    const { account, baseToken, baseAmount, pricing, protocolFee, quoteToken } =
-      props;
-
-    const quoteAmount = getPricingQuoteAmount(pricing, baseAmount, protocolFee);
-    const senderWallet = pricing.serverWallet;
-
-    const baseAmountAtomic = new BigNumber(baseAmount)
-      .multipliedBy(10 ** baseToken.decimals)
-      // Note that we remove the signer fee from the amount that we send.
-      // This was already done to determine quoteAmount.
-      .dividedBy(1 + protocolFee / 10000)
-      .integerValue(BigNumber.ROUND_CEIL)
-      .toString();
-
-    const quoteAmountAtomic = new BigNumber(quoteAmount)
-      .multipliedBy(10 ** quoteToken.decimals)
-      .integerValue(BigNumber.ROUND_FLOOR)
-      .toString();
-
-    const unsignedOrder = createOrderERC20({
-      expiry: Math.floor(Date.now() / 1000 + LAST_LOOK_ORDER_EXPIRY_SEC),
-      nonce: Date.now().toString(),
-      senderWallet,
-      signerWallet: account,
-      signerToken: baseToken.address,
-      senderToken: quoteToken.address,
-      protocolFee: protocolFee.toString(),
-      signerAmount: baseAmountAtomic,
-      senderAmount: quoteAmountAtomic,
-    });
-
-    dispatch(setBestLastLookOrder(unsignedOrder));
-  };
-
 export const compareOrdersAndSetBestOrder =
   (
     token: TokenInfo,
@@ -203,3 +156,83 @@ export const compareOrdersAndSetBestOrder =
       })
     );
   };
+
+interface SubscribePricingERC20 {
+  provider: providers.BaseProvider;
+  account: string;
+  chainId: number;
+  baseToken: TokenInfo;
+  baseTokenAmount: string;
+  quoteToken: TokenInfo;
+  protocolFee: number;
+  bestPricing: ExtendedPricing;
+}
+
+export const subscribePricingERC20 =
+  (params: SubscribePricingERC20) =>
+  async (dispatch: AppDispatch): Promise<Server | PricingErrorType> => {
+    const {
+      account,
+      baseTokenAmount,
+      provider,
+      protocolFee,
+      chainId,
+      quoteToken,
+      baseToken,
+      bestPricing,
+    } = params;
+
+    const servers = await getRegistryServers(
+      provider,
+      chainId,
+      ProtocolIds.LastLookERC20,
+      quoteToken.address,
+      baseToken.address
+    );
+
+    const server = servers.find(
+      (server) => server.locator === bestPricing.locator
+    );
+
+    if (!server) {
+      return PricingErrorType.noServersFound;
+    }
+
+    server.on("pricing-erc20", (e: Pricing[]) => {
+      const newBestPricing = handlePricingErc20Event(
+        e,
+        bestPricing.locator,
+        server.getSenderWallet(),
+        baseToken.address,
+        baseTokenAmount,
+        quoteToken.address,
+        protocolFee
+      );
+
+      if (!isExtendedPricing(newBestPricing)) {
+        return;
+      }
+
+      const newLastLookOrder = transformExtendedPricingToUnsignedOrder({
+        account,
+        baseToken,
+        baseAmount: baseTokenAmount,
+        pricing: newBestPricing,
+        protocolFee,
+        quoteToken,
+      });
+
+      dispatch(
+        setStreamedOrderAndPricing({
+          lastLookOrder: newLastLookOrder,
+          bestPricing: newBestPricing,
+        })
+      );
+    });
+
+    server.subscribePricingERC20([
+      { baseToken: baseToken.address, quoteToken: quoteToken.address },
+    ]);
+
+    return server;
+  };
diff --git a/src/features/quotes/quotesApi.ts b/src/features/quotes/quotesApi.ts
index f2f3da6d3..e1957742b 100644
--- a/src/features/quotes/quotesApi.ts
+++ b/src/features/quotes/quotesApi.ts
@@ -1,8 +1,7 @@
-import { Registry, Server } from "@airswap/libraries";
+import { Server } from "@airswap/libraries";
 import { OrderERC20, ProtocolIds, TokenInfo } from "@airswap/utils";
 import { createAsyncThunk } from "@reduxjs/toolkit";
 
-import BigNumber from "bignumber.js";
 import { providers } from "ethers";
 
 import {
@@ -11,7 +10,7 @@ import {
 } from "../../constants/configParams";
 import { ExtendedPricing } from "../../entities/ExtendedPricing/ExtendedPricing";
 import {
-  getPricingQuoteAmount,
+  getBestPricing,
   isExtendedPricing,
 } from "../../entities/ExtendedPricing/ExtendedPricingHelpers";
 import { getExtendedPricingERC20 } from "../../entities/ExtendedPricing/ExtendedPricingService";
@@ -74,8 +73,6 @@ export const fetchBestPricing = createAsyncThunk<
 
     const responses = await Promise.allSettled(pricingPromises);
 
-    servers.forEach((server) => server.disconnect());
-
     const pricings = responses
       .filter((response): response is PromiseFulfilledResult<unknown> =>
         isPromiseFulfilledResult<unknown>(response)
@@ -93,28 +90,7 @@ export const fetchBestPricing = createAsyncThunk<
       return PricingErrorType.noPricingFound;
     }
 
-    const quoteAmounts = pricings.map((pricing) =>
-      getPricingQuoteAmount(pricing, baseTokenAmount, protocolFee)
-    );
-
-    // If all pricings are errors, return the first error
-    if (quoteAmounts.every((quoteAmount) => quoteAmount in PricingErrorType)) {
-      return quoteAmounts.find(
-        (quoteAmount) => quoteAmount in PricingErrorType
-      ) as PricingErrorType;
-    }
-
-    const highestQuoteIndex = quoteAmounts
-      .filter((quoteAmount) => typeof quoteAmount === "string")
-      .reduce(
-        (maxIndex, current, index, arr) =>
-          new BigNumber(arr[maxIndex]).isLessThan(new BigNumber(current))
-            ? index
-            : maxIndex,
-        0
-      );
-
-    return pricings[highestQuoteIndex];
+    return getBestPricing(pricings, baseTokenAmount, protocolFee);
   }
 );
 
@@ -183,3 +159,26 @@ export const fetchBestRfqOrder = createAsyncThunk<
     return getBestOrder(orders);
   }
 );
+
+export const getBestPricingServer = async (
+  params: FetchBestPricingParams,
+  locator: string
+): Promise<Server | PricingErrorType> => {
+  const { provider, chainId, quoteToken, baseToken } = params;
+
+  const servers = await getRegistryServers(
+    provider,
+    chainId,
+    ProtocolIds.LastLookERC20,
+    quoteToken,
+    baseToken
+  );
+
+  const server = servers.find((server) => server.locator === locator);
+
+  if (!server) {
+    return PricingErrorType.noServersFound;
+  }
+
+  return server;
+};
diff --git a/src/features/quotes/quotesHooks.ts b/src/features/quotes/quotesHooks.ts
index d849d8d4a..9d171aa23 100644
--- a/src/features/quotes/quotesHooks.ts
+++ b/src/features/quotes/quotesHooks.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { Wrapper } from "@airswap/libraries";
+import { Server, Wrapper } from "@airswap/libraries";
 import {
   ADDRESS_ZERO,
   OrderERC20,
@@ -12,7 +12,9 @@ import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { ExtendedPricing } from "../../entities/ExtendedPricing/ExtendedPricing";
+import { transformExtendedPricingToUnsignedOrder } from "../../entities/ExtendedPricing/ExtendedPricingTransformers";
 import { getOrderExpiryWithBufferInSeconds } from "../../entities/OrderERC20/OrderERC20Helpers";
+import { isServer } from "../../entities/Server/ServerHelpers";
 import { PricingErrorType } from "../../errors/pricingError";
 import useNativeWrappedToken from "../../hooks/useNativeWrappedToken";
 import useSwapType from "../../hooks/useSwapType";
@@ -25,10 +27,10 @@ import { selectTradeTerms } from "../tradeTerms/tradeTermsSlice";
 import useQuotesDebug from "./hooks/useQuotesDebug";
 import {
   compareOrdersAndSetBestOrder,
-  createLastLookUnsignedOrder,
+  subscribePricingERC20,
 } from "./quotesActions";
 import { fetchBestPricing, fetchBestRfqOrder } from "./quotesApi";
-import { reset, setDisableLastLook } from "./quotesSlice";
+import { reset, setBestLastLookOrder, setDisableLastLook } from "./quotesSlice";
 
 interface UseQuotesValues {
   isLoading: boolean;
@@ -71,6 +73,8 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
     bestQuote,
     lastLookError,
     rfqError,
+    streamedBestPricing,
+    streamedLastLookOrder,
   } = useAppSelector((state) => state.quotes);
 
   const isLoading = isLastLookLoading || isRfqLoading || isGasCostLoading;
@@ -98,7 +102,7 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
   }, [isSubmitted]);
 
   useEffect(() => {
-    if (!bestOrder) {
+    if (!bestOrder || bestOrderType !== ProtocolIds.RequestForQuoteERC20) {
       return noop;
     }
 
@@ -170,16 +174,16 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
       return;
     }
 
-    dispatch(
-      createLastLookUnsignedOrder({
-        account,
-        baseToken: justifiedBaseTokenInfo,
-        baseAmount: baseTokenAmount,
-        pricing: bestPricing,
-        protocolFee,
-        quoteToken: justifiedQuoteTokenInfo,
-      })
-    );
+    const newLastLookOrder = transformExtendedPricingToUnsignedOrder({
+      account,
+      baseToken: justifiedBaseTokenInfo,
+      baseAmount: baseTokenAmount,
+      pricing: bestPricing,
+      protocolFee,
+      quoteToken: justifiedQuoteTokenInfo,
+    });
+
+    dispatch(setBestLastLookOrder(newLastLookOrder));
   }, [bestPricing]);
 
   useEffect(() => {
@@ -202,6 +206,7 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
     );
   }, [
     isGasCostSuccessful,
+    isLoading,
     disableLastLook,
     disableRfq,
     bestLastLookOrder,
@@ -209,10 +214,52 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
   ]);
 
   useEffect(() => {
-    // LastLook not working for gnosis provider, I have not been able to find the root cause.
-    if (connectionType === ConnectionType.gnosis) {
-      dispatch(setDisableLastLook(true));
+    if (
+      !library ||
+      !chainId ||
+      !bestPricing ||
+      !justifiedBaseTokenInfo ||
+      !justifiedQuoteTokenInfo ||
+      !account ||
+      !isSubmitted ||
+      bestOrderType !== ProtocolIds.LastLookERC20
+    ) {
+      return;
     }
+
+    let server: Server | PricingErrorType;
+
+    const subscribe = async () => {
+      // @ts-ignore
+      server = await dispatch(
+        subscribePricingERC20({
+          account,
+          baseToken: justifiedBaseTokenInfo,
+          baseTokenAmount,
+          quoteToken: justifiedQuoteTokenInfo,
+          protocolFee,
+          bestPricing,
+          provider: library,
+          chainId,
+        })
+      );
+    };
+
+    subscribe();
+
+    return () => {
+      if (isServer(server)) {
+        server.unsubscribePricingERC20([
+          { baseToken: baseToken.address, quoteToken: quoteToken.address },
+        ]);
+        server.disconnect();
+      }
+    };
+  }, [bestOrderType, isSubmitted]);
+
+  useEffect(() => {
+    // LastLook not working for gnosis provider, I have not been able to find the root cause.
+    dispatch(setDisableLastLook(connectionType === ConnectionType.gnosis));
   }, [connectionType]);
 
   if (swapType === SwapType.wrapOrUnwrap) {
@@ -226,8 +273,8 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
   return {
     isFailed: !isLoading && !!error,
     isLoading: isLastLookLoading || isRfqLoading,
-    bestPricing,
-    bestOrder,
+    bestPricing: streamedBestPricing || bestPricing,
+    bestOrder: streamedLastLookOrder || bestOrder,
     bestOrderType,
     bestQuote,
     error,
diff --git a/src/features/quotes/quotesSlice.ts b/src/features/quotes/quotesSlice.ts
index 38c4a98de..e1a2a98e1 100644
--- a/src/features/quotes/quotesSlice.ts
+++ b/src/features/quotes/quotesSlice.ts
@@ -20,6 +20,8 @@ interface QuotesState {
   bestQuote?: string;
   lastLookError?: PricingErrorType;
   rfqError?: PricingErrorType;
+  streamedBestPricing?: ExtendedPricing;
+  streamedLastLookOrder?: UnsignedOrderERC20;
 }
 
 const initialState: QuotesState = {
@@ -97,6 +99,17 @@ const quotesSlice = createSlice({
       ...state,
       rfqError: action.payload,
     }),
+    setStreamedOrderAndPricing: (
+      state,
+      action: PayloadAction<{
+        lastLookOrder: UnsignedOrderERC20;
+        bestPricing: ExtendedPricing;
+      }>
+    ): QuotesState => ({
+      ...state,
+      streamedLastLookOrder: action.payload.lastLookOrder,
+      streamedBestPricing: action.payload.bestPricing,
+    }),
   },
   extraReducers: (builder) => {
     builder.addCase(
@@ -183,6 +196,7 @@ export const {
   setDisableRfq,
   setLastLookError,
   setRfqError,
+  setStreamedOrderAndPricing,
 } = quotesSlice.actions;
 
 export default quotesSlice.reducer;
diff --git a/src/features/registry/registryActions.ts b/src/features/registry/registryActions.ts
index de67671bc..5fb23099a 100644
--- a/src/features/registry/registryActions.ts
+++ b/src/features/registry/registryActions.ts
@@ -4,14 +4,12 @@ import { providers } from "ethers";
 import uniqBy from "lodash.uniqby";
 
 import { AppDispatch, RootState } from "../../app/store";
-import { getActiveTokensFromLocalStorage } from "../metadata/metadataApi";
 import { getStakerTokens } from "./registryApi";
 
 export const fetchSupportedTokens = createAsyncThunk<
   {
     allSupportedTokens: string[];
     stakerTokens: Record<string, string[]>;
-    activeTokens: string[];
   },
   {
     account: string;
@@ -19,25 +17,16 @@ export const fetchSupportedTokens = createAsyncThunk<
     provider: providers.Provider;
   },
   {
-    // Optional fields for defining thunkApi field types
     dispatch: AppDispatch;
     state: RootState;
   }
->("registry/fetchSupportedTokens", async ({ account, chainId, provider }) => {
+>("registry/fetchSupportedTokens", async ({ chainId, provider }) => {
   const stakerTokens = await getStakerTokens(chainId, provider);
 
-  // Combine token lists from all makers and flatten them.
   const allSupportedTokens = uniqBy(
     Object.values(stakerTokens).flat(),
     (i) => i
   );
-  const activeTokensLocalStorage = getActiveTokensFromLocalStorage(
-    account,
-    chainId
-  );
-  const activeTokens =
-    (activeTokensLocalStorage.length && activeTokensLocalStorage) ||
-    allSupportedTokens ||
-    [];
-  return { stakerTokens, allSupportedTokens, activeTokens };
+
+  return { stakerTokens, allSupportedTokens };
 });
diff --git a/src/features/registry/registryApi.ts b/src/features/registry/registryApi.ts
index 809b86d5f..e3745e14a 100644
--- a/src/features/registry/registryApi.ts
+++ b/src/features/registry/registryApi.ts
@@ -1,65 +1,55 @@
 import { Registry } from "@airswap/libraries";
+import { ProtocolIds } from "@airswap/utils";
 
-import { providers, Event } from "ethers";
+import { providers, Contract } from "ethers";
 
-async function getStakerTokens(chainId: number, provider: providers.Provider) {
-  const registryContract = Registry.getContract(provider, chainId);
+import { getUniqueSingleDimensionArray } from "../../helpers/array";
+
+const getStakersForProtocol = async (
+  registryContract: Contract,
+  protocolId: ProtocolIds
+): Promise<string[]> => {
+  const [stakers]: [string[], string[]] =
+    await registryContract.functions.getStakersForProtocol(protocolId);
+
+  return stakers;
+};
 
-  const firstTxRegistryContract =
-    chainId &&
-    Registry.deployedBlocks[chainId as keyof typeof Registry.deployedBlocks];
-  const currentBlock = await provider?.getBlockNumber();
+const getTokensForStaker = async (
+  registryContract: Contract,
+  staker: string
+): Promise<string[]> => {
+  const [tokens]: [string[], string[]] =
+    await registryContract.functions.getTokensForStaker(staker);
 
-  const addTokensEventFilter = registryContract.filters.AddTokens();
-  const removeTokensEventFilter = registryContract.filters.RemoveTokens();
+  return tokens;
+};
+
+async function getStakerTokens(
+  chainId: number,
+  provider: providers.Provider
+): Promise<Record<string, string[]>> {
+  const registryContract = Registry.getContract(provider, chainId);
 
-  // Fetch all AddTokens and RemoveTokens events from the registry
-  const [addEvents, removeEvents] = await Promise.all([
-    registryContract.queryFilter(
-      addTokensEventFilter,
-      firstTxRegistryContract,
-      currentBlock
-    ),
-    registryContract.queryFilter(
-      removeTokensEventFilter,
-      firstTxRegistryContract,
-      currentBlock
-    ),
+  const [rfqStakers, lastLookStakers] = await Promise.all([
+    getStakersForProtocol(registryContract, ProtocolIds.RequestForQuoteERC20),
+    getStakersForProtocol(registryContract, ProtocolIds.LastLookERC20),
   ]);
 
-  // Order matters here, so order AddTokens and RemoveTokens chronologically
-  const sortedEvents: Event[] = [...addEvents, ...removeEvents]
-    .filter((log) => !log.removed)
-    .sort((a, b) => {
-      // Sort by oldest first. If they're not in the same block, sort based
-      // on blocknumber
-      if (a.blockNumber !== b.blockNumber) return a.blockNumber - b.blockNumber;
-      // if in the same block, sort by the index of the log in the block
-      return a.logIndex - b.logIndex;
-    });
+  const stakers = [...rfqStakers, ...lastLookStakers].filter(
+    getUniqueSingleDimensionArray
+  );
 
-  // Hold a list of tokens for each staker.
-  const stakerTokens: Record<string, string[]> = {};
+  const tokensForStakers = await Promise.all(
+    stakers.map((staker) => getTokensForStaker(registryContract, staker))
+  );
 
-  sortedEvents.forEach((log) => {
-    if (!log.args) return;
-    // @ts-ignore (args are not typed)
-    const [staker, tokens] = log.args as [string, string[]];
-    const lowerCasedTokens = tokens.map((t) => t.toLowerCase());
-    if (log.event === "AddTokens") {
-      // Adding tokens
-      stakerTokens[staker] = (stakerTokens[staker] || []).concat(
-        lowerCasedTokens
-      );
-    } else {
-      // Removing tokens
-      stakerTokens[staker] = (stakerTokens[staker] || []).filter(
-        (token) => !lowerCasedTokens.includes(token)
-      );
-    }
-  });
+  return stakers.reduce((acc, staker, index) => {
+    const stakerTokens = tokensForStakers[index].map((t) => t.toLowerCase());
+    const address = staker.toLowerCase();
 
-  return stakerTokens;
+    return { ...acc, [address]: stakerTokens };
+  }, {});
 }
 
 export { getStakerTokens };
diff --git a/src/features/registry/registrySlice.ts b/src/features/registry/registrySlice.ts
index 0302cf164..ffda9030d 100644
--- a/src/features/registry/registrySlice.ts
+++ b/src/features/registry/registrySlice.ts
@@ -1,16 +1,22 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import { RootState } from "../../app/store";
-import { walletDisconnected } from "../web3/web3Actions";
+import {
+  chainIdChanged,
+  walletChanged,
+  walletDisconnected,
+} from "../web3/web3Actions";
 import { fetchSupportedTokens } from "./registryActions";
 
 export interface RegistryState {
+  isFetchingSupportedTokensSuccess: boolean;
   stakerTokens: Record<string, string[]>;
   allSupportedTokens: string[];
   status: "idle" | "fetching" | "failed";
 }
 
 const initialState: RegistryState = {
+  isFetchingSupportedTokensSuccess: false,
   stakerTokens: {},
   allSupportedTokens: [],
   status: "idle",
@@ -20,15 +26,6 @@ export const registrySlice = createSlice({
   name: "registry",
   initialState,
   reducers: {
-    setStakerTokens: (
-      state,
-      action: PayloadAction<Record<string, string[]>>
-    ) => {
-      state.stakerTokens = { ...action.payload };
-    },
-    setAllSupportedTokens: (state, action: PayloadAction<string[]>) => {
-      state.allSupportedTokens = [...action.payload];
-    },
     reset: () => {
       return { ...initialState };
     },
@@ -36,22 +33,33 @@ export const registrySlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(fetchSupportedTokens.pending, (state) => {
-        state.status = "fetching";
+        return {
+          ...state,
+          isFetchingSupportedTokensSuccess: false,
+          status: "fetching",
+        };
       })
       .addCase(fetchSupportedTokens.fulfilled, (state, action) => {
-        state.status = "idle";
-        state.allSupportedTokens = [...action.payload.allSupportedTokens];
-        state.stakerTokens = { ...action.payload.stakerTokens };
+        return {
+          ...state,
+          isFetchingSupportedTokensSuccess: true,
+          status: "idle",
+          allSupportedTokens: action.payload.allSupportedTokens,
+          stakerTokens: action.payload.stakerTokens,
+        };
       })
       .addCase(fetchSupportedTokens.rejected, (state) => {
-        state.status = "failed";
+        return {
+          ...state,
+          status: "failed",
+        };
       })
-      .addCase(walletDisconnected, () => initialState);
+      .addCase(walletDisconnected, () => initialState)
+      .addCase(chainIdChanged, () => initialState);
   },
 });
 
-export const { setStakerTokens, setAllSupportedTokens, reset } =
-  registrySlice.actions;
+export const { reset } = registrySlice.actions;
 export const selectAllSupportedTokens = (state: RootState) =>
   state.registry.allSupportedTokens;
 export default registrySlice.reducer;
diff --git a/src/features/transactions/helpers/getOrdersFromLogs.ts b/src/features/transactions/helpers/getOrdersFromLogs.ts
index 844146b94..d4cb769d5 100644
--- a/src/features/transactions/helpers/getOrdersFromLogs.ts
+++ b/src/features/transactions/helpers/getOrdersFromLogs.ts
@@ -48,7 +48,7 @@ export const getOrdersFromLogs = async (
       const receipt = receipts[index];
 
       const swap = await getFullSwapERC20(
-        swapLog.transactionHash,
+        nonce.toString(),
         signerAddress,
         feeReceiver,
         receipt.logs
@@ -62,7 +62,9 @@ export const getOrdersFromLogs = async (
         hash: swapLog.transactionHash,
         order,
         swap,
-        timestamp: blocks[index].timestamp * 1000,
+        timestamp: blocks[index]?.timestamp
+          ? blocks[index].timestamp * 1000
+          : 0,
       };
     })
   );
diff --git a/src/features/transactions/hooks/useLatestSwapFromEvents.ts b/src/features/transactions/hooks/useLatestSwapFromEvents.ts
index fc7f27adc..fbd3c3d40 100644
--- a/src/features/transactions/hooks/useLatestSwapFromEvents.ts
+++ b/src/features/transactions/hooks/useLatestSwapFromEvents.ts
@@ -34,12 +34,6 @@ const useLatestSwapFromEvents = (
       const handleSwapEvent = async (
         nonce: BigNumber,
         signerAddress: string,
-        a: string,
-        b: number,
-        c: number,
-        d: string,
-        e: string,
-        f: number,
         swapEvent: Event
       ) => {
         const receipt = await swapEvent.getTransactionReceipt();
diff --git a/src/features/transactions/hooks/useLatestTransaction.ts b/src/features/transactions/hooks/useLatestTransaction.ts
index 20e50ecb5..fa8b3aaec 100644
--- a/src/features/transactions/hooks/useLatestTransaction.ts
+++ b/src/features/transactions/hooks/useLatestTransaction.ts
@@ -36,6 +36,10 @@ const useLatestTransaction = (storeTransactions: SubmittedTransaction[]) => {
   }, [account, chainId, storeTransactions]);
 
   useEffect(() => {
+    if (!activeAccount) {
+      return;
+    }
+
     const stateHashes = stateTransactions.map(
       (transaction) => transaction.hash
     );
diff --git a/src/features/transactions/transactionsSlice.ts b/src/features/transactions/transactionsSlice.ts
index 52685b736..22191abb5 100644
--- a/src/features/transactions/transactionsSlice.ts
+++ b/src/features/transactions/transactionsSlice.ts
@@ -173,6 +173,11 @@ export const selectSuccessfulTransactions = (
     (tx) => tx.status === TransactionStatusType.succeeded
   ) as SubmittedTransaction[];
 
+export const selectAllDeposits = (state: RootState) =>
+  state.transactions.transactions.filter(
+    (tx) => tx.type === TransactionTypes.deposit
+  ) as SubmittedDepositTransaction[];
+
 export const selectPendingDeposits = (
   state: RootState
 ): SubmittedDepositTransaction[] =>
diff --git a/src/features/wallet/Wallet.tsx b/src/features/wallet/Wallet.tsx
index ed089080b..5a542e75d 100644
--- a/src/features/wallet/Wallet.tsx
+++ b/src/features/wallet/Wallet.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useContext, useState } from "react";
+import { FC, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
@@ -6,10 +6,13 @@ import TransactionsTab from "../../components/TransactionsTab/TransactionsTab";
 import { InterfaceContext } from "../../contexts/interface/Interface";
 import useNetworkSupported from "../../hooks/useNetworkSupported";
 import {
+  AirswapButtonAndNavigationContainer,
   StyledAirswapButton,
+  StyledAirswapFullButton,
   StyledChainSelector,
   StyledMenuButton,
   StyledSettingsButton,
+  StyledSiteNavigation,
   StyledWalletButton,
   TopBar,
 } from "../../styled-components/TopBar/Topbar";
@@ -76,17 +79,25 @@ export const Wallet: FC<WalletProps> = ({
   return (
     <>
       <TopBar>
-        <StyledAirswapButton
-          onClick={onAirswapButtonClick}
-          ariaLabel={t("common.AirSwap")}
-          icon="airswap"
-          iconSize={2}
-        />
+        <AirswapButtonAndNavigationContainer>
+          <StyledAirswapButton
+            onClick={onAirswapButtonClick}
+            ariaLabel={t("common.AirSwap")}
+            icon="airswap"
+            iconSize={2}
+          />
+          <StyledAirswapFullButton
+            onClick={onAirswapButtonClick}
+            ariaLabel={t("common.AirSwap")}
+            icon="airswap-full"
+            iconSize={2}
+          />
+          <StyledSiteNavigation />
+        </AirswapButtonAndNavigationContainer>
         {chainId && (
           <StyledChainSelector
             chainId={chainId}
             chainSelectionOpen={chainsOpen}
-            transactionsTabOpen={transactionsTabIsOpen}
             setChainSelectionOpen={setChainsOpen}
           />
         )}
@@ -95,13 +106,14 @@ export const Wallet: FC<WalletProps> = ({
           isUnsupportedNetwork={false}
           address={account}
           glow={!!pendingTransactions.length}
-          setTransactionsTabOpen={() => setTransactionsTabIsOpen(true)}
+          setTransactionsTabOpen={() =>
+            setTransactionsTabIsOpen(!transactionsTabIsOpen)
+          }
           setShowWalletList={setShowWalletList}
         />
         <StyledSettingsButton
           settingsOpen={settingsOpen}
           setSettingsOpen={setSettingsOpen}
-          transactionsTabOpen={transactionsTabIsOpen}
         />
         <StyledMenuButton
           onClick={onMobileMenuButtonClick}
@@ -120,8 +132,6 @@ export const Wallet: FC<WalletProps> = ({
         onConnectButtonClick={handleConnectWalletClicked}
         onDisconnectButtonClick={handleDisconnectWalletClicked}
         transactions={transactions}
-        balances={balances!}
-        isUnsupportedNetwork={!isSupportedNetwork}
       />
     </>
   );
diff --git a/src/features/wallet/subcomponents/SiteNavigation.styles.tsx b/src/features/wallet/subcomponents/SiteNavigation.styles.tsx
new file mode 100644
index 000000000..83b8e8199
--- /dev/null
+++ b/src/features/wallet/subcomponents/SiteNavigation.styles.tsx
@@ -0,0 +1,34 @@
+import { Link, NavLink } from "react-router-dom";
+
+import styled, { css } from "styled-components/macro";
+
+import { BorderlessButtonStyle } from "../../../style/mixins";
+
+export const Container = styled.div`
+  display: flex;
+  gap: 1.5rem;
+`;
+
+const ButtonStyle = css`
+  ${BorderlessButtonStyle};
+
+  font-size: 0.9375rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding-inline: 0.25rem;
+  color: ${({ theme }) => theme.colors.carteBlanche};
+
+  &:hover,
+  &:focus,
+  &.active {
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+export const NavigationLink = styled.a`
+  ${ButtonStyle};
+`;
+
+export const NavigationNavLink = styled(NavLink)`
+  ${ButtonStyle};
+`;
diff --git a/src/features/wallet/subcomponents/SiteNavigation.tsx b/src/features/wallet/subcomponents/SiteNavigation.tsx
new file mode 100644
index 000000000..5cabc65ea
--- /dev/null
+++ b/src/features/wallet/subcomponents/SiteNavigation.tsx
@@ -0,0 +1,50 @@
+import { FC, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AppRoutes } from "../../../routes";
+import {
+  Container,
+  NavigationLink,
+  NavigationNavLink,
+} from "./SiteNavigation.styles";
+
+interface NavigationProps {
+  className?: string;
+}
+
+const SiteNavigation: FC<NavigationProps> = ({ className }): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Container className={className}>
+      <NavigationNavLink
+        to={`/${AppRoutes.swap}`}
+        isActive={(match, location) => {
+          return (
+            location.pathname.includes(AppRoutes.swap) ||
+            location.pathname === "/"
+          );
+        }}
+      >
+        {t("common.rfq")}
+      </NavigationNavLink>
+      <NavigationNavLink
+        to={`/${AppRoutes.myOrders}`}
+        isActive={(match, location) => {
+          return (
+            location.pathname.includes(AppRoutes.myOrders) ||
+            location.pathname.includes(AppRoutes.make) ||
+            location.pathname.includes(AppRoutes.order)
+          );
+        }}
+      >
+        {t("common.otc")}
+      </NavigationNavLink>
+      <NavigationLink href="https://analytics.airswap.xyz/" target="_blank">
+        {t("common.stats")}
+      </NavigationLink>
+    </Container>
+  );
+};
+
+export default SiteNavigation;
diff --git a/src/features/web3/web3Actions.ts b/src/features/web3/web3Actions.ts
index b7c85224b..b29977093 100644
--- a/src/features/web3/web3Actions.ts
+++ b/src/features/web3/web3Actions.ts
@@ -3,3 +3,5 @@ import { createAction } from "@reduxjs/toolkit";
 export const walletDisconnected = createAction("web3/walletDisconnected");
 
 export const walletChanged = createAction("web3/walletChanged");
+
+export const chainIdChanged = createAction("web3/chainIdChanged");
diff --git a/src/features/web3/web3Hooks.ts b/src/features/web3/web3Hooks.ts
index 59c95ef79..5906412e2 100644
--- a/src/features/web3/web3Hooks.ts
+++ b/src/features/web3/web3Hooks.ts
@@ -1,13 +1,19 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDebounce } from "react-use";
 
 import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { clearedCachedLibrary, setCachedLibrary } from "../../helpers/ethers";
-import { walletChanged, walletDisconnected } from "./web3Actions";
+import {
+  chainIdChanged,
+  walletChanged,
+  walletDisconnected,
+} from "./web3Actions";
 import { setLibraries, setWeb3Data } from "./web3Slice";
 
+const useWeb3ReactRouteDebounceDuration = 100;
+
 const useWeb3 = (): void => {
   const dispatch = useAppDispatch();
 
@@ -30,7 +36,7 @@ const useWeb3 = (): void => {
         })
       );
     },
-    100,
+    useWeb3ReactRouteDebounceDuration,
     [isActive, account, chainId, library]
   );
 
@@ -67,6 +73,12 @@ const useWeb3 = (): void => {
       dispatch(walletChanged());
     }
   }, [account]);
+
+  useEffect(() => {
+    if (isInitialized && isActive && chainId) {
+      dispatch(chainIdChanged());
+    }
+  }, [chainId]);
 };
 
 export default useWeb3;
diff --git a/src/features/web3/web3Slice.ts b/src/features/web3/web3Slice.ts
index 53d8ad401..64014d914 100644
--- a/src/features/web3/web3Slice.ts
+++ b/src/features/web3/web3Slice.ts
@@ -10,6 +10,7 @@ import {
 
 export interface Web3State {
   isActive: boolean;
+  isDisconnected: boolean;
   isInitialized: boolean;
   isUnsupportedChain: boolean;
   account?: string;
@@ -22,6 +23,7 @@ export interface Web3State {
 
 const initialState: Web3State = {
   isActive: false,
+  isDisconnected: false,
   isInitialized: false,
   isUnsupportedChain: false,
   libraries: {},
@@ -56,6 +58,7 @@ export const web3Slice = createSlice({
     setIsInitialized: (state, action: PayloadAction<boolean>) => ({
       ...state,
       isInitialized: action.payload,
+      isDisconnected: !action.payload,
     }),
     setLibraries: (state, action: PayloadAction<Record<number, boolean>>) => ({
       ...state,
@@ -74,6 +77,7 @@ export const web3Slice = createSlice({
     builder.addCase(walletDisconnected, () => {
       return {
         ...initialState,
+        isDisconnected: true,
         isInitialized: false,
       };
     });
diff --git a/src/helpers/createSwapSignature.ts b/src/helpers/createSwapSignature.ts
index 3823195b0..c533385b4 100644
--- a/src/helpers/createSwapSignature.ts
+++ b/src/helpers/createSwapSignature.ts
@@ -8,8 +8,6 @@ import { JsonRpcSigner } from "@ethersproject/providers/src.ts/json-rpc-provider
 import { AppError } from "../errors/appError";
 import transformUnknownErrorToAppError from "../errors/transformUnknownErrorToAppError";
 
-const SWAP_ERC20_VERSION = "4";
-
 export const createOrderERC20Signature = (
   unsignedOrder: UnsignedOrderERC20,
   signer: JsonRpcSigner,
@@ -23,8 +21,7 @@ export const createOrderERC20Signature = (
         // @ts-ignore
         signer,
         swapContract,
-        chainId,
-        SWAP_ERC20_VERSION
+        chainId
       );
       resolve(signature);
     } catch (error: unknown) {
diff --git a/src/helpers/ethers.ts b/src/helpers/ethers.ts
index df81bbe09..e1cd499e8 100644
--- a/src/helpers/ethers.ts
+++ b/src/helpers/ethers.ts
@@ -18,20 +18,6 @@ export const clearedCachedLibrary = (): void => {
   cachedLibrary = {};
 };
 
-export const getRpcUrl = (chainId: number): string | undefined => {
-  const rpcUrl = rpcUrls[chainId];
-
-  if (!rpcUrl) {
-    console.error(
-      `No rpc url found for chainId ${chainId}, did you setup your .env correctly?`
-    );
-
-    return undefined;
-  }
-
-  return rpcUrl;
-};
-
 export const getTransactionReceiptMined = (
   transactionHash: string,
   provider: Web3Provider
diff --git a/src/helpers/getContractEvents.ts b/src/helpers/getContractEvents.ts
index 1fcaaea77..d7915bda0 100644
--- a/src/helpers/getContractEvents.ts
+++ b/src/helpers/getContractEvents.ts
@@ -76,7 +76,7 @@ export const getContractEvents = (
 
         if (!blockLimit) {
           console.error(
-            "[getContractQueryFilter]: Error when getting logs, but no block limit could be found",
+            `[getContractQueryFilter]: Error when getting logs (${startBlock} to ${endBlock}) but no block limit could be found`,
             error
           );
 
diff --git a/src/helpers/swapErc20.ts b/src/helpers/swapErc20.ts
index f557349fe..10f248842 100644
--- a/src/helpers/swapErc20.ts
+++ b/src/helpers/swapErc20.ts
@@ -1,595 +1,13 @@
 import { SwapERC20 } from "@airswap/libraries";
-import { mainnets, OrderERC20, orderERC20ToParams } from "@airswap/utils";
+import { OrderERC20, orderERC20ToParams } from "@airswap/utils";
 
 import { ethers } from "ethers";
 
-const shouldOverride = true;
-const addressV4 = "0xd82FA167727a4dc6D6F55830A2c47aBbB4b3a0F8";
-const contractV4Abi = [
-  {
-    inputs: [
-      { internalType: "uint256", name: "_protocolFee", type: "uint256" },
-      { internalType: "uint256", name: "_protocolFeeLight", type: "uint256" },
-      { internalType: "address", name: "_protocolFeeWallet", type: "address" },
-      { internalType: "uint256", name: "_rebateScale", type: "uint256" },
-      { internalType: "uint256", name: "_rebateMax", type: "uint256" },
-      { internalType: "address", name: "_staking", type: "address" },
-    ],
-    stateMutability: "nonpayable",
-    type: "constructor",
-  },
-  { inputs: [], name: "ChainIdChanged", type: "error" },
-  { inputs: [], name: "InvalidFee", type: "error" },
-  { inputs: [], name: "InvalidFeeLight", type: "error" },
-  { inputs: [], name: "InvalidFeeWallet", type: "error" },
-  { inputs: [], name: "InvalidStaking", type: "error" },
-  { inputs: [], name: "MaxTooHigh", type: "error" },
-  {
-    inputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    name: "NonceAlreadyUsed",
-    type: "error",
-  },
-  { inputs: [], name: "OrderExpired", type: "error" },
-  { inputs: [], name: "ScaleTooHigh", type: "error" },
-  { inputs: [], name: "SignatoryInvalid", type: "error" },
-  { inputs: [], name: "SignatoryUnauthorized", type: "error" },
-  { inputs: [], name: "SignatureInvalid", type: "error" },
-  { inputs: [], name: "Unauthorized", type: "error" },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signer",
-        type: "address",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signerWallet",
-        type: "address",
-      },
-    ],
-    name: "Authorize",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "uint256",
-        name: "nonce",
-        type: "uint256",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signerWallet",
-        type: "address",
-      },
-    ],
-    name: "Cancel",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "previousOwner",
-        type: "address",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "newOwner",
-        type: "address",
-      },
-    ],
-    name: "OwnershipTransferStarted",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "previousOwner",
-        type: "address",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "newOwner",
-        type: "address",
-      },
-    ],
-    name: "OwnershipTransferred",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signer",
-        type: "address",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signerWallet",
-        type: "address",
-      },
-    ],
-    name: "Revoke",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "protocolFee",
-        type: "uint256",
-      },
-    ],
-    name: "SetProtocolFee",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "protocolFeeLight",
-        type: "uint256",
-      },
-    ],
-    name: "SetProtocolFeeLight",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "feeWallet",
-        type: "address",
-      },
-    ],
-    name: "SetProtocolFeeWallet",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "rebateMax",
-        type: "uint256",
-      },
-    ],
-    name: "SetRebateMax",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "rebateScale",
-        type: "uint256",
-      },
-    ],
-    name: "SetRebateScale",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "staking",
-        type: "address",
-      },
-    ],
-    name: "SetStaking",
-    type: "event",
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "uint256",
-        name: "nonce",
-        type: "uint256",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "signerWallet",
-        type: "address",
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "signerToken",
-        type: "address",
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "signerAmount",
-        type: "uint256",
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "protocolFee",
-        type: "uint256",
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "senderWallet",
-        type: "address",
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "senderToken",
-        type: "address",
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "senderAmount",
-        type: "uint256",
-      },
-    ],
-    name: "SwapERC20",
-    type: "event",
-  },
-  {
-    inputs: [],
-    name: "DOMAIN_CHAIN_ID",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "DOMAIN_NAME",
-    outputs: [{ internalType: "string", name: "", type: "string" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "DOMAIN_SEPARATOR",
-    outputs: [{ internalType: "bytes32", name: "", type: "bytes32" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "DOMAIN_VERSION",
-    outputs: [{ internalType: "string", name: "", type: "string" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "FEE_DIVISOR",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "ORDER_TYPEHASH",
-    outputs: [{ internalType: "bytes32", name: "", type: "bytes32" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "acceptOwnership",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "address", name: "signatory", type: "address" }],
-    name: "authorize",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "address", name: "", type: "address" }],
-    name: "authorized",
-    outputs: [{ internalType: "address", name: "", type: "address" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "uint256", name: "stakingBalance", type: "uint256" },
-      { internalType: "uint256", name: "feeAmount", type: "uint256" },
-    ],
-    name: "calculateDiscount",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "wallet", type: "address" },
-      { internalType: "uint256", name: "amount", type: "uint256" },
-    ],
-    name: "calculateProtocolFee",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "uint256[]", name: "nonces", type: "uint256[]" }],
-    name: "cancel",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "senderWallet", type: "address" },
-      { internalType: "uint256", name: "nonce", type: "uint256" },
-      { internalType: "uint256", name: "expiry", type: "uint256" },
-      { internalType: "address", name: "signerWallet", type: "address" },
-      { internalType: "address", name: "signerToken", type: "address" },
-      { internalType: "uint256", name: "signerAmount", type: "uint256" },
-      { internalType: "address", name: "senderToken", type: "address" },
-      { internalType: "uint256", name: "senderAmount", type: "uint256" },
-      { internalType: "uint8", name: "v", type: "uint8" },
-      { internalType: "bytes32", name: "r", type: "bytes32" },
-      { internalType: "bytes32", name: "s", type: "bytes32" },
-    ],
-    name: "check",
-    outputs: [
-      { internalType: "uint256", name: "", type: "uint256" },
-      { internalType: "bytes32[]", name: "", type: "bytes32[]" },
-    ],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "signer", type: "address" },
-      { internalType: "uint256", name: "nonce", type: "uint256" },
-    ],
-    name: "nonceUsed",
-    outputs: [{ internalType: "bool", name: "", type: "bool" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "owner",
-    outputs: [{ internalType: "address", name: "", type: "address" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "pendingOwner",
-    outputs: [{ internalType: "address", name: "", type: "address" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "protocolFee",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "protocolFeeLight",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "protocolFeeWallet",
-    outputs: [{ internalType: "address", name: "", type: "address" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "rebateMax",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "rebateScale",
-    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "renounceOwnership",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "revoke",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "uint256", name: "_protocolFee", type: "uint256" },
-    ],
-    name: "setProtocolFee",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "uint256", name: "_protocolFeeLight", type: "uint256" },
-    ],
-    name: "setProtocolFeeLight",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "_protocolFeeWallet", type: "address" },
-    ],
-    name: "setProtocolFeeWallet",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "uint256", name: "_rebateMax", type: "uint256" }],
-    name: "setRebateMax",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "uint256", name: "_rebateScale", type: "uint256" },
-    ],
-    name: "setRebateScale",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "address", name: "newstaking", type: "address" }],
-    name: "setStaking",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [],
-    name: "staking",
-    outputs: [{ internalType: "address", name: "", type: "address" }],
-    stateMutability: "view",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "recipient", type: "address" },
-      { internalType: "uint256", name: "nonce", type: "uint256" },
-      { internalType: "uint256", name: "expiry", type: "uint256" },
-      { internalType: "address", name: "signerWallet", type: "address" },
-      { internalType: "address", name: "signerToken", type: "address" },
-      { internalType: "uint256", name: "signerAmount", type: "uint256" },
-      { internalType: "address", name: "senderToken", type: "address" },
-      { internalType: "uint256", name: "senderAmount", type: "uint256" },
-      { internalType: "uint8", name: "v", type: "uint8" },
-      { internalType: "bytes32", name: "r", type: "bytes32" },
-      { internalType: "bytes32", name: "s", type: "bytes32" },
-    ],
-    name: "swap",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "address", name: "recipient", type: "address" },
-      { internalType: "uint256", name: "nonce", type: "uint256" },
-      { internalType: "uint256", name: "expiry", type: "uint256" },
-      { internalType: "address", name: "signerWallet", type: "address" },
-      { internalType: "address", name: "signerToken", type: "address" },
-      { internalType: "uint256", name: "signerAmount", type: "uint256" },
-      { internalType: "address", name: "senderToken", type: "address" },
-      { internalType: "uint256", name: "senderAmount", type: "uint256" },
-      { internalType: "uint8", name: "v", type: "uint8" },
-      { internalType: "bytes32", name: "r", type: "bytes32" },
-      { internalType: "bytes32", name: "s", type: "bytes32" },
-    ],
-    name: "swapAnySender",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [
-      { internalType: "uint256", name: "nonce", type: "uint256" },
-      { internalType: "uint256", name: "expiry", type: "uint256" },
-      { internalType: "address", name: "signerWallet", type: "address" },
-      { internalType: "address", name: "signerToken", type: "address" },
-      { internalType: "uint256", name: "signerAmount", type: "uint256" },
-      { internalType: "address", name: "senderToken", type: "address" },
-      { internalType: "uint256", name: "senderAmount", type: "uint256" },
-      { internalType: "uint8", name: "v", type: "uint8" },
-      { internalType: "bytes32", name: "r", type: "bytes32" },
-      { internalType: "bytes32", name: "s", type: "bytes32" },
-    ],
-    name: "swapLight",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-  {
-    inputs: [{ internalType: "address", name: "newOwner", type: "address" }],
-    name: "transferOwnership",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function",
-  },
-];
-
 export const getSwapErc20Contract = (
   providerOrSigner: ethers.providers.Provider | ethers.Signer,
   chainId: number
 ): ethers.Contract => {
-  if (!shouldOverride || !mainnets.includes(chainId)) {
-    return SwapERC20.getContract(providerOrSigner, chainId);
-  }
-
-  const address = addressV4;
-  const contractInterface = new ethers.utils.Interface(contractV4Abi);
-
-  return new ethers.Contract(address, contractInterface, providerOrSigner);
-};
-
-const isV4CheckResponse = (response: any): response is [number, string[]] => {
-  return (
-    Array.isArray(response) &&
-    response.length === 2 &&
-    Array.isArray(response[1])
-  );
+  return SwapERC20.getContract(providerOrSigner, chainId);
 };
 
 export const checkSwapErc20Order = async (
@@ -605,17 +23,9 @@ export const checkSwapErc20Order = async (
     ...orderERC20ToParams(order)
   );
 
-  if (isV4CheckResponse(response)) {
-    return response[1];
-  }
-
   return response;
 };
 
 export const getSwapErc20Address = (chainId: number): string | undefined => {
-  if (!shouldOverride || chainId !== 1) {
-    return SwapERC20.getAddress(chainId) || undefined;
-  }
-
-  return addressV4;
+  return SwapERC20.getAddress(chainId) || undefined;
 };
diff --git a/src/hooks/useApprovalPending.ts b/src/hooks/useApprovalPending.ts
index c2fa50647..8951ed7bd 100644
--- a/src/hooks/useApprovalPending.ts
+++ b/src/hooks/useApprovalPending.ts
@@ -1,20 +1,30 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { ADDRESS_ZERO } from "@airswap/utils";
 
 import { useAppSelector } from "../app/hooks";
 import { SubmittedApprovalTransaction } from "../entities/SubmittedTransaction/SubmittedTransaction";
-import { selectPendingApprovals } from "../features/transactions/transactionsSlice";
+import {
+  selectApprovals,
+  selectPendingApprovals,
+} from "../features/transactions/transactionsSlice";
 import getWethAddress from "../helpers/getWethAddress";
+import useDebounce from "./useDebounce";
 
+//* Will return the pending approval if it exists, and optionally the resolved approval for 2 seconds (for the transaction overlay).
 const useApprovalPending = (
-  tokenAddress?: string | null
+  tokenAddress?: string | null,
+  showResolvedApproval: boolean = false
 ): SubmittedApprovalTransaction | undefined => {
   const { chainId } = useAppSelector((state) => state.web3);
+  const [debouncedApproval, setDebouncedApproval] = useState<
+    SubmittedApprovalTransaction | undefined
+  >(undefined);
 
   const pendingApprovals = useAppSelector(selectPendingApprovals);
+  const allApprovals = useAppSelector(selectApprovals);
 
-  return useMemo(() => {
+  const pendingApproval = useMemo(() => {
     if (!tokenAddress || !pendingApprovals.length || !chainId) {
       return undefined;
     }
@@ -25,6 +35,34 @@ const useApprovalPending = (
 
     return pendingApprovals.find((tx) => tx.tokenAddress === justifiedAddress);
   }, [tokenAddress, pendingApprovals, chainId]);
+
+  const resolvedApproval = useMemo(() => {
+    if (debouncedApproval) {
+      return allApprovals.find((tx) => tx.hash === debouncedApproval.hash);
+    }
+
+    return undefined;
+  }, [debouncedApproval, allApprovals]);
+
+  useEffect(() => {
+    if (pendingApproval) {
+      setDebouncedApproval(pendingApproval);
+    }
+  }, [pendingApproval]);
+
+  useDebounce(
+    () => {
+      if (pendingApproval === undefined) {
+        setDebouncedApproval(undefined);
+      }
+    },
+    3000,
+    [pendingApproval]
+  );
+
+  return (
+    pendingApproval || (showResolvedApproval ? resolvedApproval : undefined)
+  );
 };
 
 export default useApprovalPending;
diff --git a/src/hooks/useBalanceLoading.ts b/src/hooks/useBalanceLoading.ts
new file mode 100644
index 000000000..36cc23185
--- /dev/null
+++ b/src/hooks/useBalanceLoading.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+import { useWeb3React } from "@web3-react/core";
+
+import { useAppSelector } from "../app/hooks";
+import {
+  selectAllowancesSwap,
+  selectAllowancesWrapper,
+  selectBalances,
+} from "../features/balances/balancesSlice";
+
+export const useBalanceLoading = () => {
+  const { isActive, isDisconnected, isInitialized } = useAppSelector(
+    (state) => state.web3
+  );
+
+  const { account } = useWeb3React();
+  const balances = useAppSelector(selectBalances);
+  const swapAllowances = useAppSelector(selectAllowancesSwap);
+  const wrapperAllowances = useAppSelector(selectAllowancesWrapper);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isBalancesLoading = balances.status === "fetching";
+  const isSwapLoading = swapAllowances.status === "fetching";
+  const isWrapperLoading = wrapperAllowances.status === "fetching";
+
+  // Fires after wallet connect or wallet change
+  useEffect(() => {
+    if (isInitialized && isActive && account) {
+      setIsLoading(true);
+    }
+  }, [account]);
+
+  // Fires after balances, swap allowances, and wrapper allowances are fetched
+  useEffect(() => {
+    if (!isBalancesLoading && !isSwapLoading && !isWrapperLoading && isActive) {
+      setIsLoading(false);
+    }
+  }, [isBalancesLoading, isSwapLoading, isWrapperLoading]);
+
+  // This will be true when the page loads and the wallet is connected
+  if (!isInitialized && !isDisconnected) {
+    return true;
+  }
+
+  return isLoading;
+};
diff --git a/src/hooks/useDefaultLibrary.ts b/src/hooks/useDefaultLibrary.ts
index 277877711..966935360 100644
--- a/src/hooks/useDefaultLibrary.ts
+++ b/src/hooks/useDefaultLibrary.ts
@@ -1,10 +1,12 @@
 import { useMemo } from "react";
 
-import { BaseProvider, Web3Provider } from "@ethersproject/providers";
+import {
+  BaseProvider,
+  Web3Provider,
+  JsonRpcProvider,
+} from "@ethersproject/providers";
 import { useWeb3React } from "@web3-react/core";
 
-import { getDefaultProvider } from "ethers";
-
 import { getRpcUrl } from "../helpers/getRpcUrl";
 
 // Hook for getting library from connected wallet or from rpc url, this way you can still use it in ethers.js methods
@@ -19,7 +21,7 @@ const useDefaultLibrary = (
       return library;
     }
 
-    return getDefaultProvider(getRpcUrl(chainId));
+    return new JsonRpcProvider(getRpcUrl(chainId));
   }, [library, chainId]);
 };
 
diff --git a/src/hooks/useDepositPending.ts b/src/hooks/useDepositPending.ts
index 8dbd89da1..2244352c5 100644
--- a/src/hooks/useDepositPending.ts
+++ b/src/hooks/useDepositPending.ts
@@ -1,10 +1,52 @@
+import { useEffect, useMemo, useState } from "react";
+import { useDebounce } from "react-use";
+
 import { useAppSelector } from "../app/hooks";
-import { selectPendingDeposits } from "../features/transactions/transactionsSlice";
+import { SubmittedDepositTransaction } from "../entities/SubmittedTransaction/SubmittedTransaction";
+import {
+  selectAllDeposits,
+  selectPendingDeposits,
+} from "../features/transactions/transactionsSlice";
 
-const useDepositPending = (): boolean => {
+const useDepositPending = (
+  showResolvedDeposit: boolean = false
+): SubmittedDepositTransaction | undefined => {
   const pendingDeposits = useAppSelector(selectPendingDeposits);
+  const allDeposits = useAppSelector(selectAllDeposits);
+
+  const [debouncedDeposit, setDebouncedDeposit] = useState<
+    SubmittedDepositTransaction | undefined
+  >(undefined);
+
+  const pendingDeposit = pendingDeposits.length
+    ? pendingDeposits[0]
+    : undefined;
+
+  const resolvedDeposit = useMemo(() => {
+    if (debouncedDeposit) {
+      return allDeposits.find((tx) => tx.hash === debouncedDeposit.hash);
+    }
+
+    return undefined;
+  }, [debouncedDeposit, allDeposits]);
+
+  useEffect(() => {
+    if (pendingDeposit) {
+      setDebouncedDeposit(pendingDeposit);
+    }
+  }, [pendingDeposit]);
+
+  useDebounce(
+    () => {
+      if (pendingDeposit === undefined) {
+        setDebouncedDeposit(undefined);
+      }
+    },
+    3000,
+    [pendingDeposit]
+  );
 
-  return !!pendingDeposits.length;
+  return pendingDeposit || (showResolvedDeposit ? resolvedDeposit : undefined);
 };
 
 export default useDepositPending;
diff --git a/src/hooks/useElementSize.ts b/src/hooks/useElementSize.ts
new file mode 100644
index 000000000..936cfc2b6
--- /dev/null
+++ b/src/hooks/useElementSize.ts
@@ -0,0 +1,55 @@
+import { RefObject, useEffect, useState } from "react";
+
+interface Size {
+  width: number;
+  height: number;
+  scrollWidth: number;
+  scrollHeight: number;
+  top: number;
+}
+
+const useElementSize = (
+  ref: RefObject<HTMLElement>,
+  deps = [] as unknown[]
+): Size => {
+  const [size, setSize] = useState<Size>({
+    width: 0,
+    height: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+    top: 0,
+  });
+
+  let resizeObserver: ResizeObserver;
+
+  useEffect(
+    (): (() => void) => {
+      resizeObserver = new ResizeObserver((entries): void => {
+        for (let i = 0; i < entries.length; i += 1) {
+          const entry = entries[i];
+
+          const { scrollWidth, scrollHeight } = entry.target;
+          const { width, height, top } = entry.target.getBoundingClientRect();
+
+          // Use requestAnimationFrame to batch updates to prevent resizeObserver lost event error
+          requestAnimationFrame(() => {
+            setSize({ width, height, scrollWidth, scrollHeight, top });
+          });
+        }
+      });
+
+      if (ref.current) {
+        resizeObserver.observe(ref.current);
+      }
+
+      return (): void => {
+        resizeObserver.disconnect();
+      };
+    },
+    deps ? [ref, ...deps] : [ref]
+  );
+
+  return size;
+};
+
+export default useElementSize;
diff --git a/src/hooks/useIsOverflowing.ts b/src/hooks/useIsOverflowing.ts
new file mode 100644
index 000000000..c55157f1c
--- /dev/null
+++ b/src/hooks/useIsOverflowing.ts
@@ -0,0 +1,22 @@
+import { RefObject, useEffect, useState } from "react";
+import { useWindowSize } from "react-use";
+
+import useElementSize from "./useElementSize";
+
+const useIsOverflowing = (ref: RefObject<HTMLElement>): [boolean, boolean] => {
+  const [overflow, setOverflow] = useState<[boolean, boolean]>([false, false]);
+  const { width, height } = useElementSize(ref);
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+  useEffect(() => {
+    if (ref.current) {
+      const xOverflow = ref.current.scrollWidth > ref.current.clientWidth;
+      const yOverflow = ref.current.scrollHeight > ref.current.clientHeight;
+      setOverflow([xOverflow, yOverflow]);
+    }
+  }, [width, windowWidth, height, windowHeight]);
+
+  return overflow;
+};
+
+export default useIsOverflowing;
diff --git a/src/hooks/useJsonRpcProvider.ts b/src/hooks/useJsonRpcProvider.ts
new file mode 100644
index 000000000..f69b0189b
--- /dev/null
+++ b/src/hooks/useJsonRpcProvider.ts
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+
+import {
+  BaseProvider,
+  Web3Provider,
+  JsonRpcProvider,
+} from "@ethersproject/providers";
+
+import { getRpcUrl } from "../helpers/getRpcUrl";
+
+const useJsonRpcProvider = (
+  chainId: number
+): Web3Provider | BaseProvider | undefined => {
+  return useMemo(() => {
+    return new JsonRpcProvider(getRpcUrl(chainId));
+  }, [chainId]);
+};
+
+export default useJsonRpcProvider;
diff --git a/src/hooks/useSystemTheme.ts b/src/hooks/useSystemTheme.ts
index ff271b306..16bdf2893 100644
--- a/src/hooks/useSystemTheme.ts
+++ b/src/hooks/useSystemTheme.ts
@@ -19,7 +19,9 @@ const useSystemTheme = () => {
     };
   }, []);
 
-  return systemTheme;
+  // TOOD: Enable when light mode is ready
+  return "dark" as ThemeType;
+  // return systemTheme;
 };
 
 export default useSystemTheme;
diff --git a/src/pages/MyOrders/MyOrders.styles.tsx b/src/pages/MyOrders/MyOrders.styles.tsx
new file mode 100644
index 000000000..d7a336890
--- /dev/null
+++ b/src/pages/MyOrders/MyOrders.styles.tsx
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+import Page from "../../components/Page/Page";
+import { WidgetFrameWrapper } from "../../components/WidgetFrame/WidgetFrame.styles";
+
+export const StyledMyOrdersPage = styled(Page)`
+  ${WidgetFrameWrapper} {
+    width: 100%;
+    max-width: 52rem;
+  }
+`;
diff --git a/src/pages/MyOrders/MyOrders.tsx b/src/pages/MyOrders/MyOrders.tsx
index 4cc354965..520ac6d3c 100644
--- a/src/pages/MyOrders/MyOrders.tsx
+++ b/src/pages/MyOrders/MyOrders.tsx
@@ -1,13 +1,13 @@
 import React, { FC } from "react";
 
 import MyOrdersWidget from "../../components/@widgets/MyOrdersWidget/MyOrdersWidget";
-import Page from "../../components/Page/Page";
+import { StyledMyOrdersPage } from "./MyOrders.styles";
 
 const MyOrdersPage: FC = () => {
   return (
-    <Page>
+    <StyledMyOrdersPage>
       <MyOrdersWidget />
-    </Page>
+    </StyledMyOrdersPage>
   );
 };
 
diff --git a/src/pages/OrderDetail/OrderDetail.tsx b/src/pages/OrderDetail/OrderDetail.tsx
index a9e16c4e7..1053dffdd 100644
--- a/src/pages/OrderDetail/OrderDetail.tsx
+++ b/src/pages/OrderDetail/OrderDetail.tsx
@@ -7,7 +7,11 @@ import Page from "../../components/Page/Page";
 import { fetchAllTokens } from "../../features/metadata/metadataActions";
 import { selectMetaDataReducer } from "../../features/metadata/metadataSlice";
 import { decompressAndSetActiveOrder } from "../../features/takeOtc/takeOtcActions";
-import { selectTakeOtcReducer } from "../../features/takeOtc/takeOtcSlice";
+import {
+  reset,
+  selectTakeOtcReducer,
+  setActiveOrder,
+} from "../../features/takeOtc/takeOtcSlice";
 import InvalidOrder from "./subcomponents/InvalidOrder/InvalidOrder";
 
 const OrderDetail: FC = () => {
@@ -21,6 +25,10 @@ const OrderDetail: FC = () => {
     if (compressedOrder) {
       dispatch(decompressAndSetActiveOrder({ compressedOrder }));
     }
+
+    return () => {
+      dispatch(reset());
+    };
   }, [dispatch, compressedOrder]);
 
   useEffect(() => {
diff --git a/src/style/GlobalStyle.ts b/src/style/GlobalStyle.ts
index 535c7b4ff..f0b6cc33f 100644
--- a/src/style/GlobalStyle.ts
+++ b/src/style/GlobalStyle.ts
@@ -15,11 +15,7 @@ const GlobalStyle = createGlobalStyle`
     overflow-x: hidden;
     font-family: ${fontLoos};
     color: ${(props) => props.theme.colors.alwaysWhite};
-    background: ${(props) =>
-      props.theme.name === "dark"
-        ? props.theme.colors.black
-        : props.theme.colors.primary};
-    -webkit-font-smoothing: antialiased;
+      -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
diff --git a/src/style/breakpoints.ts b/src/style/breakpoints.ts
index a59305325..fe52fe91e 100644
--- a/src/style/breakpoints.ts
+++ b/src/style/breakpoints.ts
@@ -1,6 +1,6 @@
 export const breakpointSizes = {
   tinyScreen: "320px",
-  phone: "480px",
+  phone: "560px",
   phoneLandscape: "400px",
   tabletPortrait: "768px",
   tabletLandscape: "1024px",
diff --git a/src/style/mixins.ts b/src/style/mixins.ts
index a80313320..c3e1785c0 100644
--- a/src/style/mixins.ts
+++ b/src/style/mixins.ts
@@ -5,15 +5,13 @@ import breakPoints from "./breakpoints";
 
 export const ScrollBarStyle = css`
   &::-webkit-scrollbar {
-    border-radius: 0.5rem;
-    width: 0.5rem;
-    background: ${({ theme }) =>
-      theme.name === "dark" ? theme.colors.darkGrey : theme.colors.borderGrey};
+    width: 0.375rem;
+    background: none;
   }
 
   &::-webkit-scrollbar-thumb {
     background: ${({ theme }) =>
-      theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+      theme.name === "dark" ? theme.colors.darkBlue : theme.colors.primary};
     border-radius: 0.5rem;
   }
 `;
@@ -25,25 +23,29 @@ export const InputOrButtonBorderStyle = css`
         ? theme.colors.borderGrey
         : convertHexToRGBA(theme.colors.borderGrey, 0.2)};
 
-  &:hover,
-  &:focus {
+  &:hover:enabled,
+  &:focus:enabled {
     outline: 0;
     border-color: ${(props) => props.theme.colors.lightGrey};
   }
 
-  &:active {
+  &:active:enabled {
     border-color: ${(props) =>
       props.theme.name === "dark"
         ? props.theme.colors.primary
         : props.theme.colors.alwaysWhite};
   }
+
+  &:disabled {
+    pointer-events: none;
+  }
 `;
 
 export const InputOrButtonBorderStyleType2 = css`
-  border: 1px solid ${({ theme }) => theme.colors.borderGrey};
+  border: 1px solid transparent;
 
-  &:hover,
-  &:focus {
+  &:hover:enabled,
+  &:focus:enabled {
     outline: 0;
     border-color: ${(props) => props.theme.colors.lightGrey};
   }
@@ -54,7 +56,7 @@ export const InputOrButtonBorderStyleType2 = css`
 `;
 
 export const InputTextStyle = css`
-  ${InputOrButtonBorderStyleType2};
+  ${InputOrButtonBorderStyle};
 
   line-height: 2.25;
   padding: 0.25rem 0.625rem;
@@ -66,7 +68,7 @@ export const InputTextStyle = css`
     color: ${(props) => props.theme.colors.lightGrey};
   }
 
-  &:focus {
+  &:focus:enabled {
     border-color: ${(props) => props.theme.colors.primary};
   }
 `;
@@ -74,12 +76,12 @@ export const InputTextStyle = css`
 export const BorderlessButtonStyle = css`
   border: 1px solid transparent;
 
-  &:focus {
+  &:focus:enabled {
     outline: 0;
     border-color: ${(props) => props.theme.colors.lightGrey};
   }
 
-  &:active {
+  &:active:enabled {
     border-color: ${(props) => props.theme.colors.primary};
   }
 `;
@@ -100,7 +102,7 @@ export const BorderedPill = css`
   align-items: center;
   justify-content: center;
   border: 1px solid ${(props) => props.theme.colors.borderGrey};
-  border-radius: 24rem;
+  border-radius: 0.75rem;
   height: 3rem;
   padding: 0 1.25rem;
 
diff --git a/src/style/sizes.ts b/src/style/sizes.ts
index 9da640269..79ef288f7 100644
--- a/src/style/sizes.ts
+++ b/src/style/sizes.ts
@@ -2,8 +2,10 @@ export const sizes = {
   pageMobilePadding: "0.5rem",
   toolBarWidth: "7rem",
   toolbarMaxHeight: "44rem",
-  tradeContainerPadding: "2rem",
-  tradeContainerMobilePadding: "1rem",
-  widgetSize: "30rem",
-  widgetMobileSize: "24rem",
+  tradeContainerPadding: "3.75rem",
+  tradeContainerMobilePadding: "1.25rem",
+  widgetGutter: "1rem",
+  widgetHeight: "34.5rem",
+  widgetWidth: "37.5rem",
+  widgetMobileSize: "27.75rem",
 };
diff --git a/src/style/styled.d.ts b/src/style/styled.d.ts
index 2a98ac0c9..fa7a66509 100644
--- a/src/style/styled.d.ts
+++ b/src/style/styled.d.ts
@@ -18,6 +18,7 @@ type Typography =
   | "subText";
 
 type FontProps = {
+  isWide?: boolean;
   fontSize: string;
   fontWeight: number;
   lineHeight: number;
@@ -31,6 +32,7 @@ declare module "styled-components" {
       primary: string;
       primaryDark: string;
       primaryLight: string;
+      darkBlue: string;
       white: string;
       alwaysWhite: string;
       black: string;
@@ -39,12 +41,12 @@ declare module "styled-components" {
       borderGrey: string;
       darkGrey: string;
       lightGrey: string;
-      placeholderGrey: string;
       red: string;
       orange: string;
       green: string;
-      placeholderGradient: string;
+      placeholder: string;
       darkSubText: string;
+      carteBlanche: string;
     };
     shadows: {
       widgetGlow: string;
diff --git a/src/style/themes.ts b/src/style/themes.ts
index 96ffa4885..5376be1db 100644
--- a/src/style/themes.ts
+++ b/src/style/themes.ts
@@ -1,19 +1,22 @@
 import { DefaultTheme } from "styled-components/macro";
 
 export const fontLoos = '"loos-normal", sans-serif';
+export const fontWide = '"loos-wide", sans-serif';
 export const fontMono = '"DM Mono", monospace';
 
 const typography: DefaultTheme["typography"] = {
   title1: {
     desktop: {
-      fontSize: "2rem",
+      isWide: true,
+      fontSize: "2.5rem",
       lineHeight: 1.167,
-      fontWeight: 500,
+      fontWeight: 700,
     },
   },
   title2: {
     desktop: {
-      fontSize: "1.5rem",
+      isWide: true,
+      fontSize: "2.5rem",
       lineHeight: 1.25,
       fontWeight: 700,
     },
@@ -25,13 +28,15 @@ const typography: DefaultTheme["typography"] = {
   },
   title3: {
     desktop: {
-      fontSize: "1.25rem",
+      isWide: true,
+      fontSize: "2rem",
       lineHeight: 1.25,
-      fontWeight: 400,
+      fontWeight: 700,
     },
   },
   title4: {
     desktop: {
+      isWide: true,
       fontSize: "1rem",
       lineHeight: 1.33,
       fontWeight: 700,
@@ -55,36 +60,32 @@ const typography: DefaultTheme["typography"] = {
     desktop: {
       fontSize: "1rem",
       lineHeight: 1.25,
-      fontWeight: 600,
-    },
-    mobile: {
-      fontSize: "1rem",
-      lineHeight: 1.25,
-      fontWeight: 600,
+      fontWeight: 400,
     },
   },
   infoSubHeading: {
     desktop: {
-      fontSize: "1.0625rem",
-      lineHeight: 1.25,
-      fontWeight: 400,
-    },
-    mobile: {
       fontSize: "1rem",
-      lineHeight: 1.25,
+      lineHeight: 1,
       fontWeight: 400,
     },
   },
   formLabel: {
     desktop: {
-      fontSize: "0.75rem",
-      lineHeight: 1.5,
-      fontWeight: 600,
+      isWide: true,
+      fontSize: "1rem",
+      lineHeight: 1,
+      fontWeight: 500,
+    },
+    mobile: {
+      fontSize: ".875rem",
+      lineHeight: 1,
+      fontWeight: 500,
     },
   },
   formInput: {
     desktop: {
-      fontSize: "1.5rem",
+      fontSize: "1.75rem",
       lineHeight: 1.5,
       fontWeight: 500,
     },
@@ -109,9 +110,14 @@ const typography: DefaultTheme["typography"] = {
   // Form select inputs
   selectItem: {
     desktop: {
-      fontSize: "1.125rem",
+      fontSize: "1.5rem",
+      lineHeight: 1 + 1 / 3,
+      fontWeight: 700,
+    },
+    mobile: {
+      fontSize: "1.25rem",
       lineHeight: 1 + 1 / 3,
-      fontWeight: 600,
+      fontWeight: 700,
     },
   },
   link: {
@@ -148,19 +154,20 @@ export const darkTheme: DefaultTheme = {
     primary: "#2B71FF",
     primaryDark: "#0752EB",
     primaryLight: "#F5F9FF",
+    darkBlue: "#21396A",
     white: "#FFFFFF",
     alwaysWhite: "#FFFFFF",
     black: "#060607",
     alwaysBlack: "#060607",
     grey: "#404040",
-    borderGrey: "#1A1E25",
-    darkGrey: "#101217",
-    lightGrey: "#6E7686",
-    placeholderGrey: "#6E7686",
+    borderGrey: "#34425C",
+    darkGrey: "#12213D",
+    lightGrey: "#798BAD",
+    placeholder: "#5A709D",
+    carteBlanche: "#EBF1FF",
     red: "#FF0000",
     orange: "#E7765A",
     green: "#60FF66",
-    placeholderGradient: "linear-gradient(270deg, #232833 0%, #2F364400 93.3%)",
     darkSubText: "#9EA3AC",
   },
   shadows: {
@@ -180,6 +187,7 @@ export const lightTheme: DefaultTheme = {
     primary: "#2B71FF",
     primaryDark: "#0752EB",
     primaryLight: "#F5F9FF",
+    darkBlue: "#21396A",
     white: "#060607",
     alwaysWhite: "#FFFFFF",
     black: "#FFFFFF",
@@ -188,11 +196,11 @@ export const lightTheme: DefaultTheme = {
     borderGrey: "#E7ECF3",
     darkGrey: "#9BA8C4",
     lightGrey: "#B3BCC9",
-    placeholderGrey: "#9BA8C4",
+    placeholder: "#5A709D",
+    carteBlanche: "#EBF1FF",
     red: "#FF0000",
     orange: "#E7765A",
     green: "#60FF66",
-    placeholderGradient: "linear-gradient(270deg, #E1EBFF 0%, #E1EBFF 93.3%)",
     darkSubText: "#9EA3AC",
   },
   shadows: {
diff --git a/src/styled-components/BorderedButton/BorderedButton.tsx b/src/styled-components/BorderedButton/BorderedButton.tsx
index 05bdc04e5..9f0cf1b92 100644
--- a/src/styled-components/BorderedButton/BorderedButton.tsx
+++ b/src/styled-components/BorderedButton/BorderedButton.tsx
@@ -2,21 +2,23 @@ import styled, { keyframes, css } from "styled-components/macro";
 
 import { BorderedPill, InputOrButtonBorderStyle } from "../../style/mixins";
 
-const beatAnimation = keyframes`
+const pulseStartOpacity = 0.2;
+const pulseEndOpacity = 0.5;
+const pulseAnimation = keyframes`
  0% {
-    transform: scale(0.9);
+    opacity: ${pulseStartOpacity};
   }
  20% {
-    transform: scale(0.9);
+    opacity: ${pulseStartOpacity};
   }
   50% {
-    transform: scale(1);
+    opacity: ${pulseEndOpacity};
   }
   80% {
-    transform: scale(0.9);
+    opacity: ${pulseStartOpacity};
   }
   100% {
-    transform: scale(0.9);
+    opacity: ${pulseStartOpacity};
   }
 `;
 
@@ -28,28 +30,24 @@ const BorderedButton = styled.button<{ $glow?: boolean }>`
     $glow !== undefined &&
     css`
       position: relative;
-      background: ${theme.name === "dark"
-        ? theme.colors.black
-        : theme.colors.primary};
       ${$glow &&
       css`
         border-color: ${theme.name === "dark"
           ? theme.colors.primary
           : theme.colors.borderGrey};
       `};
-      &:after {
+      &:before {
+        content: "";
+        display: ${$glow ? "block" : "none"};
         position: absolute;
-        display: block;
+        z-index: -1;
         inset: 0;
-        border-radius: 24rem;
-        content: "";
-        opacity: ${$glow ? 1 : 0};
+        border-radius: 0.75rem;
         transition: opacity 1.2s ease-in-out;
         box-shadow: ${theme.shadows.buttonGlow};
-        background: ${theme.shadows.buttonGlowFill};
-        will-change: transform, opacity;
-        animation: ${beatAnimation} 3s ease-in-out infinite;
-        z-index: -1;
+        will-change: opacity;
+        animation: ${pulseAnimation} 3s ease-in-out infinite;
+        pointer-events: none;
       }
     `}
 `;
diff --git a/src/styled-components/CloseButton/CloseButton.tsx b/src/styled-components/CloseButton/CloseButton.tsx
index dc81e4d3f..4d25fbfca 100644
--- a/src/styled-components/CloseButton/CloseButton.tsx
+++ b/src/styled-components/CloseButton/CloseButton.tsx
@@ -1,20 +1,26 @@
 import styled from "styled-components/macro";
 
 import IconButton from "../../components/IconButton/IconButton";
-import { InputOrButtonBorderStyleType2 } from "../../style/mixins";
+import { StyledIcon } from "../../components/IconButton/IconButton.styles";
+import { InputOrButtonBorderStyle } from "../../style/mixins";
 
 const CloseButton = styled(IconButton)`
-  ${InputOrButtonBorderStyleType2};
+  ${InputOrButtonBorderStyle};
 
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
   padding: 0;
   color: ${({ theme }) =>
-    theme.name === "dark" ? theme.colors.white : theme.colors.primary};
-  background: ${(props) => props.theme.colors.black};
+    theme.name === "dark" ? theme.colors.lightGrey : theme.colors.primary};
+
+  ${StyledIcon} svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 `;
 
 export default CloseButton;
diff --git a/src/styled-components/InfoSection/InfoSection.tsx b/src/styled-components/InfoSection/InfoSection.tsx
new file mode 100644
index 000000000..9f7191065
--- /dev/null
+++ b/src/styled-components/InfoSection/InfoSection.tsx
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+import IconButton from "../../components/IconButton/IconButton";
+import { InfoHeading } from "../../components/Typography/Typography";
+import { BorderlessButtonStyle } from "../../style/mixins";
+
+export const InfoSectionHeading = styled(InfoHeading)`
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.theme.colors.lightGrey};
+`;
+
+export const RevertPriceButton = styled(IconButton)`
+  transform: rotate(90deg);
+  position: relative;
+  margin-left: 0.25rem;
+  padding: 0.25rem;
+  font-size: 1rem;
+  color: ${(props) => props.theme.colors.white};
+
+  &:hover,
+  &:focus {
+    color: ${(props) => props.theme.colors.white};
+  }
+
+  ${BorderlessButtonStyle}
+`;
diff --git a/src/styled-components/Modal/Modal.tsx b/src/styled-components/Modal/Modal.tsx
index 8f57cb965..b66c73b60 100644
--- a/src/styled-components/Modal/Modal.tsx
+++ b/src/styled-components/Modal/Modal.tsx
@@ -2,21 +2,10 @@ import { DefaultTheme } from "styled-components/macro";
 import styled from "styled-components/macro";
 
 import { InfoSubHeading, Title } from "../../components/Typography/Typography";
-import { ScrollBarStyle } from "../../style/mixins";
-import { sizes } from "../../style/sizes";
-
-export const ScrollableModalContainer = styled.div`
-  ${ScrollBarStyle};
-
-  padding-right: 1rem;
-  padding-bottom: 1.5rem;
-  width: calc(100% + 1rem);
-  height: calc(100% - ${sizes.tradeContainerPadding});
-  overflow-y: auto;
-`;
 
 export const ModalParagraph = styled(InfoSubHeading)`
-  color: ${(props: { theme: DefaultTheme }) => props.theme.colors.darkSubText};
+  line-height: 1.5;
+  color: ${(props: { theme: DefaultTheme }) => props.theme.colors.white};
 
   & + & {
     margin-top: 1rem;
diff --git a/src/styled-components/Overlay/Overlay.tsx b/src/styled-components/Overlay/Overlay.tsx
new file mode 100644
index 000000000..86e544bb1
--- /dev/null
+++ b/src/styled-components/Overlay/Overlay.tsx
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { keyframes } from "styled-components";
+
+import TransactionLink from "../../components/TransactionLink/TransactionLink";
+import { InfoSubHeading, Title } from "../../components/Typography/Typography";
+
+export const OverlayContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  transition: transform 0.3s cubic-bezier(0.68, 0.007, 0.488, 0.997);
+`;
+
+export const OverlayTitle = styled(Title)<{ isFocused?: boolean }>`
+  margin-block-start: 1.75rem;
+  font-size: 1.875rem;
+  color: ${({ theme }) => theme.colors.carteBlanche};
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+`;
+
+export const OverlaySubHeading = styled(InfoSubHeading)<{ isHidden?: boolean }>`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  margin-top: 1.75rem;
+  padding: 0 15%;
+  font-weight: 500;
+  text-align: center;
+  transition: opacity 0.3s ease-in-out;
+
+  ${({ isHidden }) => isHidden && "opacity: 0; pointer-events: none;"}
+`;
+
+export const OverlayTransactionLink = styled(TransactionLink)<{
+  isHidden?: boolean;
+}>`
+  margin-top: 0rem;
+  transition: opacity 0.3s ease-in;
+
+  ${({ isHidden }) => isHidden && "opacity: 0; pointer-events: none;"}
+`;
+
+const spin = keyframes`
+  to {
+    transform: rotate(1turn);
+  }
+`;
+
+export const OverlaySpinningLoader = styled.div`
+  width: 3.6875rem;
+  height: 3.6875rem;
+  border-radius: 50%;
+  border: 4px solid;
+  border-color: #475777;
+  border-right-color: ${({ theme }) => theme.colors.carteBlanche};
+  animation: ${spin} 2s infinite linear;
+`;
diff --git a/src/styled-components/ReviewListItem/ReviewListItem.tsx b/src/styled-components/ReviewListItem/ReviewListItem.tsx
index 3c6d06f62..9f00be4f3 100644
--- a/src/styled-components/ReviewListItem/ReviewListItem.tsx
+++ b/src/styled-components/ReviewListItem/ReviewListItem.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components/macro";
 
 import { TextEllipsis } from "../../style/mixins";
+import { fontMono } from "../../style/themes";
 
 export const ReviewListItem = styled.li`
   display: flex;
@@ -23,5 +24,6 @@ export const ReviewListItemValue = styled.div`
 
   display: flex;
   align-items: center;
+  font-family: ${fontMono};
   color: ${(props) => props.theme.colors.white};
 `;
diff --git a/src/styled-components/Select/Select.tsx b/src/styled-components/Select/Select.tsx
index 898c894cc..600abe4fe 100644
--- a/src/styled-components/Select/Select.tsx
+++ b/src/styled-components/Select/Select.tsx
@@ -1,41 +1,41 @@
 import styled, { css } from "styled-components/macro";
 
-import {
-  InputOrButtonBorderStyleType2,
-  TextEllipsis,
-} from "../../style/mixins";
+import { InputOrButtonBorderStyle, TextEllipsis } from "../../style/mixins";
+import { fontWide } from "../../style/themes";
 
 export const SelectElementStyle = css`
-  ${InputOrButtonBorderStyleType2};
+  ${InputOrButtonBorderStyle};
 
-  font-size: 0.75rem;
-  font-weight: 700;
-  margin-right: -1px;
+  font-family: ${fontWide};
+  font-size: 1rem;
+  font-weight: 500;
 `;
 
-export const SelectWrapper = styled.div`
+export const SelectWrapper = styled.div<{ isDisabled?: boolean }>`
   display: flex;
-  height: 2rem;
+  height: 3rem;
   width: fit-content;
   color: ${({ theme }) =>
     theme.name === "dark" ? theme.colors.white : theme.colors.primary};
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
 `;
 
 export const SelectLabel = styled.div`
   ${SelectElementStyle};
   ${TextEllipsis};
 
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-  line-height: 2.5;
-  padding: 0 0.75rem;
+  display: flex;
+  align-items: center;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  border-inline-end: unset;
+  padding-inline: 0.875rem;
   color: ${({ theme }) => theme.colors.lightGrey};
-  text-transform: uppercase;
 
   &:hover,
   :active,
   :focus {
-    border: 1px solid ${({ theme }) => theme.colors.borderGrey};
+    border-color: ${({ theme }) => theme.colors.borderGrey};
     cursor: initial;
   }
 
diff --git a/src/styled-components/TopBar/Topbar.tsx b/src/styled-components/TopBar/Topbar.tsx
index 3d603c493..d343a54e1 100644
--- a/src/styled-components/TopBar/Topbar.tsx
+++ b/src/styled-components/TopBar/Topbar.tsx
@@ -5,6 +5,7 @@ import IconButton from "../../components/IconButton/IconButton";
 import { IconButtonStyle } from "../../components/IconButton/IconButton.styles";
 import SettingsButton from "../../components/SettingsButton/SettingsButton";
 import WalletButton from "../../components/WalletButton/WalletButton";
+import SiteNavigation from "../../features/wallet/subcomponents/SiteNavigation";
 import breakPoints from "../../style/breakpoints";
 import { BorderedPill, InputOrButtonBorderStyle } from "../../style/mixins";
 import { AirswapButton } from "../AirswapButton/AirswapButton";
@@ -20,10 +21,14 @@ export const TopBar = styled.div`
   width: calc(100% - 3rem);
   height: 3rem;
   padding: 1.5rem;
-  z-index: 1;
+  z-index: 30;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
 
   @media ${breakPoints.tabletPortraitUp} {
-    width: auto;
     padding: 1.5rem;
   }
 
@@ -42,16 +47,44 @@ export const TopBar = styled.div`
   }
 `;
 
+export const AirswapButtonAndNavigationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: -0.25rem auto 0 -0.25rem;
+`;
+
+export const StyledSiteNavigation = styled(SiteNavigation)`
+  display: none;
+
+  @media ${breakPoints.tabletLandscapeUp} {
+    display: flex;
+    margin-left: 1.5rem;
+  } ;
+`;
+
 export const StyledAirswapButton = styled(AirswapButton)`
   display: block;
   justify-self: flex-start;
-  margin: -0.25rem auto 0 -0.25rem;
 
   @media ${breakPoints.tabletPortraitUp} {
     display: none;
   }
 `;
 
+export const StyledAirswapFullButton = styled(AirswapButton)`
+  display: none;
+  justify-self: flex-start;
+
+  svg {
+    width: 8.875rem;
+    height: 2rem;
+  }
+
+  @media ${breakPoints.tabletPortraitUp} {
+    display: block;
+  }
+`;
+
 export const StyledMenuButton = styled(IconButton)`
   ${BorderedPill};
   ${InputOrButtonBorderStyle};
@@ -77,14 +110,14 @@ export const StyledMenuButton = styled(IconButton)`
   }
 `;
 
-export const StyledSettingsButton = styled(SettingsButton)`
+export const StyledWalletButton = styled(WalletButton)`
   @media ${breakPoints.tabletPortraitUp} {
     order: 2;
     margin-right: 1rem;
   }
 `;
 
-export const StyledWalletButton = styled(WalletButton)`
+export const StyledSettingsButton = styled(SettingsButton)`
   margin-right: 0.5rem;
 
   @media ${breakPoints.tabletPortraitUp} {
diff --git a/src/styled-components/WidgetHeader/WidgetHeader.tsx b/src/styled-components/WidgetHeader/WidgetHeader.tsx
index 7e9fe3809..a6d71d1af 100644
--- a/src/styled-components/WidgetHeader/WidgetHeader.tsx
+++ b/src/styled-components/WidgetHeader/WidgetHeader.tsx
@@ -4,12 +4,13 @@ import breakPoints from "../../style/breakpoints";
 
 export const WidgetHeader = styled.div`
   display: flex;
-  justify-content: space-between;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
   min-height: 2rem;
-  margin-bottom: 1.875rem;
   width: 100%;
 
   @media ${breakPoints.phoneOnly} {
-    margin-bottom: 1rem;
+    // margin-bottom: 1rem;
   }
 `;
diff --git a/src/web3-connectors/bitKeep.ts b/src/web3-connectors/bitKeep.ts
index 7695c44c0..8020b6be2 100644
--- a/src/web3-connectors/bitKeep.ts
+++ b/src/web3-connectors/bitKeep.ts
@@ -4,7 +4,7 @@ import {
 } from "@akkafinance/web3-react-bitkeep";
 import { initializeConnector } from "@web3-react/core";
 
-import { getRpcUrl } from "../helpers/ethers";
+import { getRpcUrl } from "../helpers/getRpcUrl";
 import { Connection, ConnectionType } from "./connections";
 import { onConnectionError } from "./helpers";
 
diff --git a/src/web3-connectors/coinbase.ts b/src/web3-connectors/coinbase.ts
index 21f2f4458..d66c8f5b2 100644
--- a/src/web3-connectors/coinbase.ts
+++ b/src/web3-connectors/coinbase.ts
@@ -4,7 +4,7 @@ import {
 } from "@web3-react/coinbase-wallet";
 import { initializeConnector } from "@web3-react/core";
 
-import { getRpcUrl } from "../helpers/ethers";
+import { getRpcUrl } from "../helpers/getRpcUrl";
 import { Connection, ConnectionType } from "./connections";
 import { onConnectionError } from "./helpers";
 
diff --git a/yarn.lock b/yarn.lock
index c467cbf91..fdb67c226 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,10 +7,19 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
   integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
 
-"@airswap/batch-call@4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@airswap/batch-call/-/batch-call-4.2.3.tgz#a6db2b0a4627eadfe9136715f92642c2d536f98f"
-  integrity sha512-/jbrEw1ecTpYAoNw3s9Ank5UBjD1bMTiox+AmafChIr9hET3wYulmg6rm5hzJTL99cZkZm9dwpsV5LRubVirNA==
+"@airswap/batch-call@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/batch-call/-/batch-call-5.0.1.tgz#e0f95da0b65eecafa151cbbe84ce2698e46fa75b"
+  integrity sha512-+2FH4QicX7sXXqeaMEpNKYROoYffLcA0LZR1rSnKq5KJDgdqVHJGHmJ31bQqHom1aCALPXp6Uc5GnxeCdaqAwA==
+  dependencies:
+    ethers "^5.7.2"
+
+"@airswap/delegate@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/delegate/-/delegate-5.0.1.tgz#0fb25951359093ceddce047f9ad38a03b4e36f49"
+  integrity sha512-DXKhz1/MZphzAwgNFpLCZFnEBK+Hs9AstDzs5ljyxIFO49dM8UdUt3BC5x072nmsAjH7r6j0IcEaddX9CYvpYA==
+  dependencies:
+    ethers "^5.7.2"
 
 "@airswap/jsonrpc-client-websocket@0.0.1":
   version "0.0.1"
@@ -19,20 +28,21 @@
   dependencies:
     get-parameter-names "^0.3.0"
 
-"@airswap/libraries@4.3.6":
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/@airswap/libraries/-/libraries-4.3.6.tgz#e0ab72f685ab8c12b44f58444daeb7f214bf7040"
-  integrity sha512-PiN64Fbkyh4uzJfXCR7z5amw2VMifwjewpyIKa09IQTMiCoI38VhYRjvi2jujn/p9hiR3+RiawAwXEAr8W8paw==
+"@airswap/libraries@5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@airswap/libraries/-/libraries-5.0.3.tgz#8d9a55574e6a190384c17e995a684dce4ad92bf6"
+  integrity sha512-g9Wn2dTvCQ+C4R66WfHWGNFT+ECLJsaa+LB5i34oJvoNwqzHMwEm0dD8O7XauUWwo5sjQw4OLt9N94fZte7l8w==
   dependencies:
-    "@airswap/batch-call" "4.2.3"
+    "@airswap/batch-call" "5.0.1"
+    "@airswap/delegate" "5.0.1"
     "@airswap/jsonrpc-client-websocket" "0.0.1"
-    "@airswap/pool" "4.2.2"
-    "@airswap/registry" "4.2.2"
-    "@airswap/staking" "4.2.2"
-    "@airswap/swap" "4.2.2"
-    "@airswap/swap-erc20" "4.3.1"
-    "@airswap/utils" "4.3.3"
-    "@airswap/wrapper" "4.2.3"
+    "@airswap/pool" "5.0.1"
+    "@airswap/registry" "5.0.1"
+    "@airswap/staking" "5.0.1"
+    "@airswap/swap" "5.0.1"
+    "@airswap/swap-erc20" "5.0.1"
+    "@airswap/utils" "5.0.2"
+    "@airswap/wrapper" "5.0.1"
     browser-or-node "^2.1.1"
     ethers "^5.7.2"
     jayson "^4.0.0"
@@ -40,35 +50,45 @@
     tiny-typed-emitter "^2.1.0"
     websocket "^1.0.34"
 
-"@airswap/pool@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@airswap/pool/-/pool-4.2.2.tgz#1da2f372487b74ba410913a267ec7da326f4fb4f"
-  integrity sha512-IIjcY71qExkA6tFMAJCKTwSE5T3QLmqcV5C+VQZFfeUd9gUt39FYnMsOlQhQvRGZroOAubODutKCIXPBUWPfAw==
+"@airswap/pool@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/pool/-/pool-5.0.1.tgz#7761e58e3ff3a4aea08cd1c36f9f479b79463257"
+  integrity sha512-UIAYmjaXhwgCQZhEq7AKQlBgieYwSlyMMq2pekT/5aFXMfCLN3S7cbpwC8Vwxk3EUr9WxKpPVyO8rJ6+WHSlNg==
+  dependencies:
+    ethers "^5.7.2"
 
-"@airswap/registry@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@airswap/registry/-/registry-4.2.2.tgz#efedc470f583a6da1f970b565d70c0d5fc2055d1"
-  integrity sha512-R7h0YZwAN7W7yYLuW11dlVeuYO65sk9VbIkY82sEdsxKJ6pb7deViJCv16AvQ7nmAVMofNuTDHpcaPky9EuYhA==
+"@airswap/registry@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/registry/-/registry-5.0.1.tgz#473854d84291561aba02944f0f12e92792fdcad2"
+  integrity sha512-eQeGj0MK5bWWLQ1oZVZEsHNE7W6b+bY+bOLNdx7mAHxA7SMoH73O2u/dletTn/saHtkoMxIfL+jlYE039/5amQ==
+  dependencies:
+    ethers "^5.7.2"
 
-"@airswap/staking@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@airswap/staking/-/staking-4.2.2.tgz#1c43ec6dfaa89c165d301e349c08d98ab029f21a"
-  integrity sha512-YeLEXkAie7n98p4iwdD1FmqxM3JxoAXGgPxaHQpa8rlO83+3xlPo5CGsHLiFDIIVjauqBnesELj4ilrCsUve+w==
+"@airswap/staking@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/staking/-/staking-5.0.1.tgz#dc181c7fd198613163321035ac59c7d555d1401f"
+  integrity sha512-tgxTjm/X61kRL2KCGx0kfEIXGnSYFZpWlulU8xiX2lf8RCcF8vPF1no2crqdfImqku8aXN6KQlXrS+5llLZzPg==
+  dependencies:
+    ethers "^5.7.2"
 
-"@airswap/swap-erc20@4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@airswap/swap-erc20/-/swap-erc20-4.3.1.tgz#8d8faeb9d88d1669afa2116a48f341d64fb9c910"
-  integrity sha512-uZ8ldGhODbf/44yTuNAZ11jDdCGtesj4mBhnd3/NK1NliYdQqnxwS0O+xoF4rpW78eunZUJ4ujROIzGOo35iBg==
+"@airswap/swap-erc20@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/swap-erc20/-/swap-erc20-5.0.1.tgz#7c953d6cfa8e5a2ae4c8b7a5d35c016759b35454"
+  integrity sha512-qppBnnoQFd+7LjhOSUX1gDx+vOzS62roQEVIpnV3TLET2HMDWNwKArdk55xiKPbtGx4yQWWuxMHlhWZSAh1fEw==
+  dependencies:
+    ethers "^5.7.2"
 
-"@airswap/swap@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@airswap/swap/-/swap-4.2.2.tgz#6587f437980f5cf1715d5135039141ff66f491e3"
-  integrity sha512-EIx0btHqx4aq8J4hnYe1fignNIuQwlnPnQWK7qgONpEnV++GfUwwbTso62jb7gmmU/pQAdl4Qm1TZfljvfoDdg==
+"@airswap/swap@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/swap/-/swap-5.0.1.tgz#957429381c3c30db2ea5d1a9d52a176a61f22050"
+  integrity sha512-7+6aP+/hljvo3ULWLPmyZNr7N7TjRJqp1N0bg3kRBcr6U9ibfdHYAo2cFJZJ/1qBlX8MscD7Muy/mSB0/F0C9g==
+  dependencies:
+    ethers "^5.7.2"
 
-"@airswap/utils@4.3.3":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@airswap/utils/-/utils-4.3.3.tgz#f42e5db25a8808d8fba97634f7e751e87530d29c"
-  integrity sha512-J5tAMeRwlnFoXNGLCN5Gn4pARBS0ACVCawbuq7BMCNOPlFCNMU4y6SkIz3R79MQ5Vd9AAKXCPedBFe1jUJG3KA==
+"@airswap/utils@5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@airswap/utils/-/utils-5.0.2.tgz#2c79dd17e06ff3232225f68e7c2f777bf7d1e744"
+  integrity sha512-JIDR6hW8EX6zWvpA/rNetPpNv7Dwkza9bhgj6TaM0rhYSyyySj3cUTmGXHJTqZv7SOFw9LLFashhbqxtW+nG/A==
   dependencies:
     "@metamask/eth-sig-util" "^5.0.2"
     "@uniswap/token-lists" "^1.0.0-beta.24"
@@ -78,10 +98,10 @@
     lz-string "^1.5.0"
     valid-url "^1.0.9"
 
-"@airswap/wrapper@4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@airswap/wrapper/-/wrapper-4.2.3.tgz#80d1e11f9951d061bf012dd178ba9d0f9fa9271a"
-  integrity sha512-d/cW4AOYXjZxP6cY+jMVXCqGG9Ev2PJzMkhmPq0yxYrhkk7iFxPLUmrvW0pBF2Gg6EqEZJd7RvGX7BKw8QYiLA==
+"@airswap/wrapper@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@airswap/wrapper/-/wrapper-5.0.1.tgz#32e2a15a4d62fc2da7b2a20956ca58ec8fa00b43"
+  integrity sha512-H0N2XDS6f2W7D+ZAmtPOfVd/jEaFnaxRLZ534yWLViGRpV7oN2Ic5kl5CtxzeGuEsxVPXllFL6KhnOOP0auoBg==
 
 "@akkafinance/bitkeep-detect-provider@^1.0.0":
   version "1.0.0"