diff --git a/public/index.html b/public/index.html
index b464660..822486a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,9 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet" />
     <title>Static Exchange</title>
   </head>
-  <body>
+  <body class="bg-canvas font-sans">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.tsx b/src/App.tsx
index 6cdf7de..a6cbb91 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,27 @@
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import {
+  ConnectionProvider,
+  WalletProvider,
+} from "@solana/wallet-adapter-react";
 import { createWeb3Modal, defaultConfig } from "@web3modal/ethers/react";
 
-import Chain from "./Chain";
+import {
+  CoinbaseWalletAdapter,
+  LedgerWalletAdapter,
+  SolflareWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+import { BackpackWalletAdapter } from "@solana/wallet-adapter-backpack";
+import Swap from "./Swap";
 import { Toaster } from "react-hot-toast";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import { clusterApiUrl } from "@solana/web3.js";
+import { useMemo } from "react";
+
+require("@solana/wallet-adapter-react-ui/styles.css");
 
-// 1. Get projectId at https://cloud.walletconnect.com
 const projectId = process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID as string;
 
-// 2. Set chains
 const polygon = {
   chainId: 137,
   name: "Polygon",
@@ -16,7 +30,6 @@ const polygon = {
   rpcUrl: "https://rpc-mainnet.maticvigil.com",
 };
 
-// 3. Create modal
 const metadata = {
   name: "Static Exchange",
   description: "",
@@ -31,7 +44,6 @@ createWeb3Modal({
 });
 
 const HOST = "https://dev-static-api.ap.ngrok.io";
-// const HOST = "http://localhost:8911";
 const STATIC_GRAPHQL_URI = `${HOST}/graphql`;
 const c = new ApolloClient({
   uri: STATIC_GRAPHQL_URI,
@@ -39,11 +51,30 @@ const c = new ApolloClient({
 });
 
 function App() {
+  const network = WalletAdapterNetwork.Mainnet;
+  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+  const wallets = useMemo(
+    () => [
+      new BackpackWalletAdapter(),
+      new CoinbaseWalletAdapter(),
+      new LedgerWalletAdapter(),
+      new SolflareWalletAdapter(),
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [network]
+  );
+
   return (
-    <div className="App">
+    <div className="min-h-screen bg-canvas pt-10">
       <ApolloProvider client={c}>
-        <Toaster />
-        <Chain />
+        <ConnectionProvider endpoint={endpoint}>
+          <WalletProvider wallets={wallets} autoConnect>
+            <WalletModalProvider>
+              <Toaster />
+              <Swap />
+            </WalletModalProvider>
+          </WalletProvider>
+        </ConnectionProvider>
       </ApolloProvider>
     </div>
   );
diff --git a/src/Chain.tsx b/src/Chain.tsx
deleted file mode 100644
index a10953e..0000000
--- a/src/Chain.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ChainOptions } from "./constants";
-import Connect from "./Connect";
-import Swap from "./Swap";
-import { useState } from "react";
-
-function Chain() {
-  const [chain, setChain] = useState(ChainOptions.Polygon);
-  const buttonColor = (test: ChainOptions) => {
-    if (chain === test) {
-      return "bg-blue-300";
-    }
-  };
-  const swapEl = () => {
-    switch (chain) {
-      case ChainOptions.Polygon:
-        return <Swap key={"1"} chain={ChainOptions.Polygon}></Swap>;
-      case ChainOptions.Solana:
-        return (
-          <Connect chain={ChainOptions.Solana}>
-            <Swap key={"2"} chain={ChainOptions.Solana}></Swap>
-          </Connect>
-        );
-      case ChainOptions.Tron:
-        return <Swap key={"3"} chain={ChainOptions.Tron}></Swap>;
-    }
-  };
-  const chainButton = (
-    chainOpt: ChainOptions,
-    imgsrc: string,
-    text: string
-  ) => {
-    return (
-      <button
-        className={`border-1 rounded-xl px-4 py-1 ${buttonColor(chainOpt)}`}
-        onClick={() => setChain(chainOpt)}
-      >
-        <div className="flex gap-2 items-center justify-center">
-          <img className="w-5 h-5" src={imgsrc} alt="logo"></img>
-          <p>{text}</p>
-        </div>
-      </button>
-    );
-  };
-  return (
-    <>
-      <div className="m-4 flex justify-center">
-        {chainButton(ChainOptions.Polygon, "./matic.png", "Polygon")}
-        {chainButton(ChainOptions.Solana, "./sol.png", "Solana")}
-        {chainButton(ChainOptions.Tron, "./tron.png", "Tron")}
-      </div>
-      <div>{swapEl()}</div>
-    </>
-  );
-}
-
-export default Chain;
diff --git a/src/Connect.tsx b/src/Connect.tsx
deleted file mode 100644
index bc06edd..0000000
--- a/src/Connect.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  CoinbaseWalletAdapter,
-  LedgerWalletAdapter,
-  SolflareWalletAdapter,
-} from "@solana/wallet-adapter-wallets";
-import {
-  ConnectionProvider,
-  WalletProvider,
-} from "@solana/wallet-adapter-react";
-import { ReactElement, useMemo } from "react";
-
-import { BackpackWalletAdapter } from "@solana/wallet-adapter-backpack";
-import { ChainOptions } from "./constants";
-import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-import { clusterApiUrl } from "@solana/web3.js";
-
-require("@solana/wallet-adapter-react-ui/styles.css");
-
-export interface ConnectParams {
-  children: ReactElement;
-  chain: ChainOptions;
-}
-
-export default function Connect({ chain, children }: ConnectParams) {
-  // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
-  const network = WalletAdapterNetwork.Mainnet;
-  // You can also provide a custom RPC endpoint.
-  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
-
-  const wallets = useMemo(
-    () => [
-      new BackpackWalletAdapter(),
-      new CoinbaseWalletAdapter(),
-      new LedgerWalletAdapter(),
-      new SolflareWalletAdapter(),
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [network]
-  );
-
-  return (
-    <ConnectionProvider endpoint={endpoint}>
-      <WalletProvider wallets={wallets} autoConnect>
-        <WalletModalProvider>{children}</WalletModalProvider>
-      </WalletProvider>
-    </ConnectionProvider>
-  );
-}
diff --git a/src/Loading.tsx b/src/Loading.tsx
index 874a45e..c9d751b 100644
--- a/src/Loading.tsx
+++ b/src/Loading.tsx
@@ -3,7 +3,7 @@ export default function Loading() {
     <div role="status">
       <svg
         aria-hidden="true"
-        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        className="w-8 h-8 text-gray-200 animate-spin fill-walnut"
         viewBox="0 0 100 101"
         fill="none"
       >
diff --git a/src/Order.tsx b/src/Order.tsx
index 3a25466..412a346 100644
--- a/src/Order.tsx
+++ b/src/Order.tsx
@@ -1,5 +1,6 @@
 import { gql, useQuery } from "@apollo/client";
 
+import Button from "./ui/Button";
 import { Clipboard } from "@capacitor/clipboard";
 import Loading from "./Loading";
 import { QRCodeSVG } from "qrcode.react";
@@ -24,6 +25,7 @@ const GET_SELL_ORDER = gql`
 const HOST = "https://dev-static-api.ap.ngrok.io";
 const STATIC_PREIMAGE_URI = `${HOST}/preimage`;
 const TWO_SEC_MS = 2000;
+
 export default function Order({
   orderId,
   preimage,
@@ -120,91 +122,99 @@ export default function Order({
     }
   };
 
+  const statusDotColor = () => {
+    if (!data?.sellOrder?.status) return "bg-muted";
+    switch (data.sellOrder.status) {
+      case "ReleasedFund":
+        return "bg-success";
+      case "Expired":
+        return "bg-danger";
+      default:
+        return "bg-accent";
+    }
+  };
+
   return (
-    <>
-      <div className="flex flex-col justify-center items-center">
-        <div className="w-60 flex flex-col justify-center items-center">
-          {loading ? <Loading /> : <></>}
-          {error ? <p>{"Error:" + error.message}</p> : <></>}
-          {data?.sellOrder.status ? (
-            <p className="border-2 p-4 rounded-3xl bg-slate-600 text-slate-200 shadow-lg break-normal">
-              {mapStatus(data?.sellOrder.status)}
+    <div className="flex flex-col gap-4 mt-2">
+      {loading && (
+        <div className="flex justify-center">
+          <Loading />
+        </div>
+      )}
+      {error && <p className="text-sm text-danger">{"Error: " + error.message}</p>}
+      {data?.sellOrder.status && (
+        <div className="bg-surface border border-border rounded-field p-4 flex items-start gap-3">
+          <span className={`w-2.5 h-2.5 rounded-full mt-1 shrink-0 ${statusDotColor()}`} />
+          <p className="text-sm text-ink break-words">
+            {mapStatus(data.sellOrder.status)}
+          </p>
+        </div>
+      )}
+      {data?.sellOrder?.metadata.invoice &&
+      data?.sellOrder?.status === "AwaitingPayment" && (
+        <div className="flex flex-col items-center gap-4">
+          <div className="bg-inset rounded-card p-4">
+            <QRCodeSVG
+              size={220}
+              includeMargin={true}
+              value={data.sellOrder.metadata.invoice}
+              onClick={() => writeToClipboard(data.sellOrder.metadata.invoice)}
+              onTouchEnd={() => writeToClipboard(data.sellOrder.metadata.invoice)}
+            />
+          </div>
+          {!hasWriteToClipboardPermission && (
+            <p className="truncate w-48 text-xs text-muted">
+              {data.sellOrder.metadata.invoice}
             </p>
-          ) : (
-            <></>
           )}
-          {data?.sellOrder?.metadata.invoice &&
-          data?.sellOrder?.status === "AwaitingPayment" ? (
-            <div className="flex flex-col justify-center items-center">
-              <QRCodeSVG
-                size={250}
-                includeMargin={true}
-                value={data?.sellOrder?.metadata.invoice}
-                onClick={() =>
-                  writeToClipboard(data?.sellOrder?.metadata.invoice)
-                }
-                onTouchEnd={() =>
-                  writeToClipboard(data?.sellOrder?.metadata.invoice)
-                }
-              />
-              {!hasWriteToClipboardPermission ? (
-                <p className="truncate w-48">
-                  {data?.sellOrder?.metadata.invoice}
-                </p>
-              ) : (
-                <></>
-              )}
-            </div>
-          ) : (
-            <></>
+          <Button
+            onClick={() => writeToClipboard(data.sellOrder.metadata.invoice)}
+          >
+            Copy invoice
+          </Button>
+        </div>
+      )}
+      {data?.sellOrder && (
+        <>
+          {data.sellOrder.metadata.failureReason && (
+            <p className="text-sm text-danger">{data.sellOrder.metadata.failureReason}</p>
           )}
-          {data?.sellOrder ? (
-            <>
-              <div className="text-sm break-normal text-red-500 mt-4">
-                <p>{data?.sellOrder.metadata.failureReason}</p>
+          {data.sellOrder.metadata.depositTx && (
+            <div className="flex flex-col gap-1 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted">Deposit Txn</span>
+                <a
+                  className="text-walnut underline"
+                  href={
+                    chainName === "Polygon"
+                      ? `https://polygonscan.com/tx/${data.sellOrder.metadata.depositTx}`
+                      : `https://solscan.io/tx/${data.sellOrder.metadata.depositTx}`
+                  }
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  link
+                </a>
               </div>
-              {data?.sellOrder.metadata.depositTx ? (
-                <>
-                  <div className="flex text-md">
-                    <p>{"Deposit Txn: "}</p>
-                    <a
-                      className="text-blue underline ml-4"
-                      href={
-                        chainName === "Polygon"
-                          ? `https://polygonscan.com/tx/${data?.sellOrder.metadata.depositTx}`
-                          : `https://solscan.io/tx/${data?.sellOrder.metadata.depositTx}`
-                      }
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      link
-                    </a>
-                  </div>
-                  <div className="flex text-md">
-                    <p>{"Release Txn: "}</p>
-                    <a
-                      className="text-blue underline ml-4"
-                      href={
-                        chainName === "Polygon"
-                          ? `https://polygonscan.com/tx/${data?.sellOrder.metadata.transactionHash}`
-                          : `https://solscan.io/tx/${data?.sellOrder.metadata.transactionHash}`
-                      }
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      link
-                    </a>
-                  </div>
-                </>
-              ) : (
-                <></>
-              )}
-            </>
-          ) : (
-            <></>
+              <div className="flex justify-between">
+                <span className="text-muted">Release Txn</span>
+                <a
+                  className="text-walnut underline"
+                  href={
+                    chainName === "Polygon"
+                      ? `https://polygonscan.com/tx/${data.sellOrder.metadata.transactionHash}`
+                      : `https://solscan.io/tx/${data.sellOrder.metadata.transactionHash}`
+                  }
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  link
+                </a>
+              </div>
+            </div>
           )}
-        </div>
-      </div>
-    </>
+        </>
+      )}
+    </div>
   );
 }
diff --git a/src/PolygonAddress.tsx b/src/PolygonAddress.tsx
deleted file mode 100644
index 443f417..0000000
--- a/src/PolygonAddress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"; // This is a client component
-
-import { useEffect } from "react";
-import { useWeb3ModalAccount } from "@web3modal/ethers/react";
-
-export default function PolygonAddress({ destAddress, setDestAddress }: any) {
-  const { address } = useWeb3ModalAccount();
-
-  useEffect(() => {
-    setDestAddress(address as string);
-  }, [address, setDestAddress]);
-
-  return (
-    <>
-      <div className="bg-gray-100 rounded-3xl mb-4">
-        <div className="flex flex-col my-10 mx-4">
-          <p className="text-gray-500">Receive to:</p>
-          <input
-            className="text-2xl bg-transparent placeholder-gray-300 flex-grow"
-            type="text"
-            placeholder="0x..."
-            value={destAddress}
-            onChange={(e) => {
-              setDestAddress(e.target.value);
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/src/ReceiveAddressField.tsx b/src/ReceiveAddressField.tsx
new file mode 100644
index 0000000..fe9f677
--- /dev/null
+++ b/src/ReceiveAddressField.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { ChainOptions } from "./constants";
+import { useEffect } from "react";
+import { useWeb3ModalAccount } from "@web3modal/ethers/react";
+import { useWallet } from "@solana/wallet-adapter-react";
+
+interface ReceiveAddressFieldProps {
+  chain: ChainOptions;
+  destAddress: string;
+  setDestAddress: (addr: string) => void;
+}
+
+function PolygonAutoFill({ setDestAddress }: { setDestAddress: (addr: string) => void }) {
+  const { address } = useWeb3ModalAccount();
+  useEffect(() => {
+    setDestAddress(address as string);
+  }, [address, setDestAddress]);
+  return null;
+}
+
+function SolanaAutoFill({ setDestAddress }: { setDestAddress: (addr: string) => void }) {
+  const { publicKey } = useWallet();
+  useEffect(() => {
+    if (publicKey) {
+      setDestAddress(publicKey.toString());
+    } else {
+      setDestAddress("");
+    }
+  }, [publicKey, setDestAddress]);
+  return null;
+}
+
+export default function ReceiveAddressField({
+  chain,
+  destAddress,
+  setDestAddress,
+}: ReceiveAddressFieldProps) {
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      setDestAddress(text);
+    } catch {
+      // Clipboard API not available
+    }
+  };
+
+  const placeholder = chain === ChainOptions.Tron ? "T..." : "0x...";
+
+  return (
+    <div>
+      {chain === ChainOptions.Polygon && <PolygonAutoFill setDestAddress={setDestAddress} />}
+      {chain === ChainOptions.Solana && <SolanaAutoFill setDestAddress={setDestAddress} />}
+      <span className="text-xs uppercase tracking-wider text-muted">Receive to</span>
+      <div className="flex items-center gap-2 bg-inset rounded-field px-4 py-3 mt-1.5">
+        <input
+          className="text-sm text-ink bg-transparent placeholder-muted outline-none w-full min-w-0"
+          type="text"
+          placeholder={placeholder}
+          value={destAddress}
+          onChange={(e) => setDestAddress(e.target.value)}
+        />
+        <button
+          type="button"
+          onClick={handlePaste}
+          className="text-xs font-semibold text-walnut shrink-0 px-2 py-1 rounded-pill hover:bg-border/50 transition-colors"
+        >
+          Paste
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/SolAddress.tsx b/src/SolAddress.tsx
deleted file mode 100644
index c29bc06..0000000
--- a/src/SolAddress.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client"; // This is a client component
-
-import { useEffect } from "react";
-import { useWallet } from "@solana/wallet-adapter-react";
-
-export default function SolAddress({ destAddress, setDestAddress }: any) {
-  const { publicKey } = useWallet();
-
-  useEffect(() => {
-    if (publicKey) {
-      setDestAddress(publicKey.toString());
-    } else {
-      setDestAddress("");
-    }
-  }, [publicKey, setDestAddress]);
-
-  return (
-    <>
-      <div className="bg-gray-100 rounded-3xl mb-4">
-        <div className="flex flex-col my-10 mx-4">
-          <p className="text-gray-500">Receive to:</p>
-          <input
-            className="text-2xl bg-transparent placeholder-gray-300 flex-grow"
-            type="text"
-            placeholder="0x..."
-            value={destAddress}
-            onChange={(e) => {
-              setDestAddress(e.target.value);
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/src/Swap.tsx b/src/Swap.tsx
index 4525cf5..5600b3d 100644
--- a/src/Swap.tsx
+++ b/src/Swap.tsx
@@ -1,34 +1,36 @@
-"use client"; // This is a client component
+"use client";
 
 import {
   CREATE_POLYGON_SELL_ORDER,
   CREATE_SOLANA_SELL_ORDER,
   CREATE_TRON_SELL_ORDER,
+  ChainOptions,
 } from "./constants";
 import { Wallet, getBytesCopy, sha256 } from "ethers";
 
-import { ChainOptions } from "./constants";
+import AmountInput from "./ui/AmountInput";
+import AssetPill from "./ui/AssetPill";
+import AssetSheet from "./ui/AssetSheet";
+import Button from "./ui/Button";
+import Card from "./ui/Card";
 import Decimal from "decimal.js";
-import { FaAngleDown } from "react-icons/fa";
 import Loading from "./Loading";
 import Order from "./Order";
-import PolygonAddress from "./PolygonAddress";
-import SolAddress from "./SolAddress";
+import ReceiveAddressField from "./ReceiveAddressField";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import { useMutation } from "@apollo/client";
 import { useState } from "react";
 
-export interface SwapParams {
-  chain: ChainOptions;
-}
-
-export default function Swap({ chain }: SwapParams) {
+export default function Swap() {
   const MIN_AMOUNT = "0.01";
   const [destAddress, setDestAddress] = useState("");
+  const [chain, setChain] = useState(ChainOptions.Solana);
+  const [sheetOpen, setSheetOpen] = useState(false);
 
   const [preimage] = useState<string>(Wallet.createRandom().privateKey);
   const [paymentHash] = useState<string>(sha256(getBytesCopy(preimage)));
   const [amount, setAmount] = useState(MIN_AMOUNT);
+
   const gql = (): any => {
     switch (chain) {
       case ChainOptions.Polygon:
@@ -62,6 +64,7 @@ export default function Swap({ chain }: SwapParams) {
         return "USDT";
     }
   };
+
   const chainName = () => {
     switch (chain) {
       case ChainOptions.Polygon:
@@ -72,31 +75,6 @@ export default function Swap({ chain }: SwapParams) {
         return "Tron";
     }
   };
-  const swapIcon = () => {
-    switch (chain) {
-      case ChainOptions.Polygon:
-        return (
-          <>
-            <img className="w-8 h-8" alt="xsgd logo" src="./xsgd.png" />
-            <p className="text-sm">XSGD</p>
-          </>
-        );
-      case ChainOptions.Solana:
-        return (
-          <>
-            <img className="w-8 h-8" alt="usdc logo" src="./usdc.png" />
-            <p className="text-sm">USDC</p>
-          </>
-        );
-      case ChainOptions.Tron:
-        return (
-          <>
-            <img className="w-8 h-8" alt="usdt logo" src="./usdt.png" />
-            <p className="text-sm">USDT</p>
-          </>
-        );
-    }
-  };
 
   const connectButton = () => {
     switch (chain) {
@@ -105,45 +83,7 @@ export default function Swap({ chain }: SwapParams) {
       case ChainOptions.Solana:
         return <WalletMultiButton />;
       case ChainOptions.Tron:
-        return <></>;
-    }
-  };
-
-  const addressEl = () => {
-    switch (chain) {
-      case ChainOptions.Polygon:
-        return (
-          <PolygonAddress
-            destAddress={destAddress}
-            setDestAddress={setDestAddress}
-          ></PolygonAddress>
-        );
-      case ChainOptions.Solana:
-        return (
-          <SolAddress
-            destAddress={destAddress}
-            setDestAddress={setDestAddress}
-          ></SolAddress>
-        );
-      case ChainOptions.Tron:
-        return (
-          <>
-            <div className="bg-gray-100 rounded-3xl mb-4">
-              <div className="flex flex-col my-10 mx-4">
-                <p className="text-gray-500">Receive to:</p>
-                <input
-                  className="text-2xl bg-transparent placeholder-gray-300 flex-grow"
-                  type="text"
-                  placeholder="0x..."
-                  value={destAddress}
-                  onChange={(e) => {
-                    setDestAddress(e.target.value);
-                  }}
-                />
-              </div>
-            </div>
-          </>
-        );
+        return null;
     }
   };
 
@@ -158,65 +98,75 @@ export default function Swap({ chain }: SwapParams) {
     );
   };
 
+  const handleChainSelect = (newChain: ChainOptions) => {
+    if (newChain !== chain) {
+      setDestAddress("");
+    }
+    setChain(newChain);
+  };
+
   return (
-    <>
-      <div className="flex flex-col items-center">
-        <div>
-          <div className="flex flex-col border-2 rounded-3xl shadow-lg p-4">
-            <div className="flex justify-end mb-3">{connectButton()}</div>
-
-            <div className="bg-gray-100 rounded-3xl mb-2">
-              <div className="flex items-center justify-between mx-4">
-                <div className="mb-8 mt-6">
-                  <p className="text-gray-500">You buy</p>
-                  <input
-                    className="text-3xl bg-transparent placeholder-gray-300 w-20"
-                    placeholder="0.00"
-                    type="number"
-                    value={amount}
-                    onChange={(e) => setAmount(e.target.value)}
-                  />
-                </div>
-                <div className="flex items-center justify-center rounded-full border-2 px-1 py-1 bg-gray-50 shadow-sm gap-2">
-                  {swapIcon()}
-                  <FaAngleDown className="w-6 h-6" />
-                </div>
+    <div className="flex flex-col items-center px-5">
+      <div className="w-full max-w-md">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-sm font-semibold text-ink">Swap</h1>
+          {connectButton()}
+        </div>
+
+        <Card>
+          <div className="flex flex-col gap-5">
+            <AmountInput
+              value={amount}
+              onChange={setAmount}
+              pill={
+                <AssetPill
+                  chain={chain}
+                  onClick={() => setSheetOpen(true)}
+                />
+              }
+            />
+
+            <div className="flex items-center gap-3 px-4 py-3 bg-inset rounded-field">
+              <div className="w-8 h-8 rounded-full bg-walnut flex items-center justify-center shrink-0">
+                <span className="text-surface text-sm">&#9889;</span>
+              </div>
+              <div className="flex flex-col leading-tight">
+                <span className="text-xs text-muted">Pay with</span>
+                <span className="text-sm font-semibold text-ink">Lightning BTC</span>
               </div>
             </div>
-            <div className="bg-gray-100 rounded-3xl mb-2">
-              <div className="flex items-center justify-between mx-4">
-                <div className="mb-8 mt-6">
-                  <p className="text-gray-500">You pay</p>
-                  <input
-                    className="text-3xl bg-transparent placeholder-gray-300 w-20"
-                    placeholder="0.00"
-                    type="number"
-                    value={amount}
-                    disabled={true}
-                  />
-                </div>
-                <div className="flex items-center justify-center rounded-full border-2 px-1 pr-2 py-1 bg-gray-50 shadow-sm gap-2">
-                  <img className="w-8 h-8" alt="xsgd logo" src="./ln.png" />
-                  <p className="text-sm">BTC(Lightning)</p>
-                  <FaAngleDown className="w-6 h-6" />
-                </div>
+
+            <ReceiveAddressField
+              chain={chain}
+              destAddress={destAddress}
+              setDestAddress={setDestAddress}
+            />
+
+            <div className="border-t border-border pt-3 flex flex-col gap-2">
+              <div className="flex justify-between text-xs">
+                <span className="text-muted">Pay via</span>
+                <span className="text-ink">Lightning Network</span>
+              </div>
+              <div className="flex justify-between text-xs">
+                <span className="text-muted">Est. settlement</span>
+                <span className="text-ink">~ 30 seconds</span>
               </div>
             </div>
-            {addressEl()}
 
             {data?.[accessor()]?.id ? (
-              <></>
+              <Order
+                orderId={data[accessor()].id}
+                preimage={preimage}
+                assetName={assetName()}
+                chainName={chainName()}
+              />
             ) : loading ? (
-              <div className="flex flex-col justify-center items-center">
-                <Loading></Loading>
+              <div className="flex justify-center py-4">
+                <Loading />
               </div>
             ) : (
-              <button
-                className={
-                  canCreateOrder()
-                    ? "p-4 rounded-full text-gray-100 bg-blue-500 shadow-sm active:bg-blue-200"
-                    : "border-2 p-4 border-gray-200 rounded-full text-gray-300"
-                }
+              <Button
+                disabled={!canCreateOrder()}
                 onClick={() => {
                   if (canCreateOrder()) {
                     createOrder({
@@ -229,22 +179,19 @@ export default function Swap({ chain }: SwapParams) {
                   }
                 }}
               >
-                Create Order
-              </button>
-            )}
-            {data?.[accessor()]?.id.length > 1 ? (
-              <Order
-                orderId={data?.[accessor()]?.id}
-                preimage={preimage}
-                assetName={assetName()}
-                chainName={chainName()}
-              ></Order>
-            ) : (
-              <></>
+                Create order
+              </Button>
             )}
           </div>
-        </div>
+        </Card>
       </div>
-    </>
+
+      <AssetSheet
+        open={sheetOpen}
+        selected={chain}
+        onSelect={handleChainSelect}
+        onClose={() => setSheetOpen(false)}
+      />
+    </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index b5c61c9..d42991f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,26 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-up {
+  animation: slide-up 0.25s ease-out;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
diff --git a/src/ui/AmountInput.tsx b/src/ui/AmountInput.tsx
new file mode 100644
index 0000000..f9b713a
--- /dev/null
+++ b/src/ui/AmountInput.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+interface AmountInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  pill: ReactNode;
+}
+
+export default function AmountInput({
+  value,
+  onChange,
+  placeholder = "0.00",
+  pill,
+}: AmountInputProps) {
+  return (
+    <div className="bg-inset rounded-field px-4 py-5">
+      <span className="text-xs uppercase tracking-wider text-muted">You receive</span>
+      <div className="flex items-center justify-between mt-2 gap-3">
+        <input
+          className="text-5xl font-semibold bg-transparent text-ink placeholder-border outline-none w-full min-w-0"
+          type="number"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {pill}
+      </div>
+    </div>
+  );
+}
diff --git a/src/ui/AssetPill.tsx b/src/ui/AssetPill.tsx
new file mode 100644
index 0000000..d3f8c49
--- /dev/null
+++ b/src/ui/AssetPill.tsx
@@ -0,0 +1,39 @@
+import { FaAngleDown } from "react-icons/fa";
+import { ChainOptions } from "../constants";
+
+interface AssetPillProps {
+  chain: ChainOptions;
+  onClick: () => void;
+}
+
+const ASSET_CONFIG: Record<ChainOptions, { logo: string; symbol: string; chainName: string; alt: string }> = {
+  [ChainOptions.Polygon]: { logo: "./xsgd.png", symbol: "XSGD", chainName: "Polygon", alt: "xsgd logo" },
+  [ChainOptions.Solana]: { logo: "./usdc.png", symbol: "USDC", chainName: "Solana", alt: "usdc logo" },
+  [ChainOptions.Tron]: { logo: "./usdt.png", symbol: "USDT", chainName: "Tron", alt: "usdt logo" },
+};
+
+export default function AssetPill({ chain, onClick }: AssetPillProps) {
+  const config = ASSET_CONFIG[chain];
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-center gap-2 bg-surface border border-border rounded-pill pl-1.5 pr-3 py-1.5 shadow-sm hover:shadow transition-shadow cursor-pointer shrink-0"
+    >
+      <div className="relative">
+        <img className="w-7 h-7 rounded-full" alt={config.alt} src={config.logo} />
+        <img
+          className="w-3.5 h-3.5 rounded-full absolute -bottom-0.5 -right-0.5 border border-surface"
+          alt={`${config.chainName} logo`}
+          src={`./${config.chainName.toLowerCase() === "polygon" ? "matic" : config.chainName.toLowerCase()}.png`}
+        />
+      </div>
+      <div className="flex flex-col items-start leading-tight">
+        <span className="text-sm font-semibold text-ink">{config.symbol}</span>
+        <span className="text-xs text-muted">{config.chainName}</span>
+      </div>
+      <FaAngleDown className="w-3 h-3 text-muted" />
+    </button>
+  );
+}
diff --git a/src/ui/AssetSheet.tsx b/src/ui/AssetSheet.tsx
new file mode 100644
index 0000000..7ec02cb
--- /dev/null
+++ b/src/ui/AssetSheet.tsx
@@ -0,0 +1,95 @@
+import { ChainOptions } from "../constants";
+
+interface AssetOption {
+  chain: ChainOptions;
+  symbol: string;
+  chainName: string;
+  logo: string;
+  chainLogo: string;
+  alt: string;
+}
+
+const ASSETS: AssetOption[] = [
+  {
+    chain: ChainOptions.Polygon,
+    symbol: "XSGD",
+    chainName: "Polygon",
+    logo: "./xsgd.png",
+    chainLogo: "./matic.png",
+    alt: "xsgd logo",
+  },
+  {
+    chain: ChainOptions.Solana,
+    symbol: "USDC",
+    chainName: "Solana",
+    logo: "./usdc.png",
+    chainLogo: "./sol.png",
+    alt: "usdc logo",
+  },
+  {
+    chain: ChainOptions.Tron,
+    symbol: "USDT",
+    chainName: "Tron",
+    logo: "./usdt.png",
+    chainLogo: "./tron.png",
+    alt: "usdt logo",
+  },
+];
+
+interface AssetSheetProps {
+  open: boolean;
+  selected: ChainOptions;
+  onSelect: (chain: ChainOptions) => void;
+  onClose: () => void;
+}
+
+export default function AssetSheet({ open, selected, onSelect, onClose }: AssetSheetProps) {
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 bg-ink/30 z-40"
+        onClick={onClose}
+      />
+      <div className="fixed bottom-0 left-0 right-0 bg-surface rounded-t-card z-50 p-6 pb-8 animate-slide-up">
+        <div className="w-10 h-1 bg-border rounded-pill mx-auto mb-5" />
+        <h3 className="text-sm font-semibold text-ink mb-4">Select asset</h3>
+        <div className="flex flex-col gap-2">
+          {ASSETS.map((asset) => {
+            const isSelected = asset.chain === selected;
+            return (
+              <button
+                key={asset.chain}
+                type="button"
+                onClick={() => {
+                  onSelect(asset.chain);
+                  onClose();
+                }}
+                className={`flex items-center gap-3 px-4 py-3 rounded-field transition-colors w-full text-left ${
+                  isSelected ? "bg-inset" : "hover:bg-inset"
+                }`}
+              >
+                <div className="relative shrink-0">
+                  <img className="w-9 h-9 rounded-full" alt={asset.alt} src={asset.logo} />
+                  <img
+                    className="w-4 h-4 rounded-full absolute -bottom-0.5 -right-0.5 border-2 border-surface"
+                    alt={`${asset.chainName} logo`}
+                    src={asset.chainLogo}
+                  />
+                </div>
+                <div className="flex flex-col leading-tight">
+                  <span className="text-sm font-semibold text-ink">{asset.symbol}</span>
+                  <span className="text-xs text-muted">{asset.chainName}</span>
+                </div>
+                {isSelected && (
+                  <span className="ml-auto text-success font-semibold text-sm">&#10003;</span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
new file mode 100644
index 0000000..6e65ccf
--- /dev/null
+++ b/src/ui/Button.tsx
@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+}
+
+export default function Button({
+  variant = "primary",
+  className = "",
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  const base = "px-6 py-4 rounded-field text-sm font-semibold transition-colors w-full";
+  const variants = {
+    primary: disabled
+      ? "bg-border text-muted cursor-not-allowed"
+      : "bg-walnut text-surface active:bg-ink cursor-pointer",
+    secondary:
+      "border border-ink text-ink bg-transparent active:bg-inset cursor-pointer",
+  };
+
+  return (
+    <button
+      className={`${base} ${variants[variant]} ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/ui/Card.tsx b/src/ui/Card.tsx
new file mode 100644
index 0000000..e349dd9
--- /dev/null
+++ b/src/ui/Card.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Card({ children, className = "" }: CardProps) {
+  return (
+    <div className={`bg-surface border border-border rounded-card p-6 ${className}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5a66654..bddfad9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,28 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        canvas:  '#F5F1EA',
+        surface: '#FFFFFF',
+        inset:   '#FBF8F2',
+        border:  '#EBE4D8',
+        ink:     '#1F1D1B',
+        muted:   '#857F77',
+        walnut:  '#2A1F1A',
+        accent:  '#B4513D',
+        success: '#6FB28A',
+        danger:  '#B4413D',
+      },
+      fontFamily: {
+        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
+      },
+      borderRadius: {
+        pill: '9999px',
+        card: '24px',
+        field: '16px',
+      },
+    },
   },
   plugins: [],
-}
\ No newline at end of file
+}
