diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..47e64770
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,7 @@
+# Disable git operations during npm install to prevent issues in CI/CD environments
+# This fixes the git config error during Cloudflare Pages deployment
+unsafe-perm=true
+ignore-scripts=false
+
+# Configure git to use system config only
+git-tag-version=false
diff --git a/Builders codes/fetch_builder_data.js b/Builders codes/fetch_builder_data.js
new file mode 100644
index 00000000..c5a68c00
--- /dev/null
+++ b/Builders codes/fetch_builder_data.js	
@@ -0,0 +1,118 @@
+const https = require('https');
+const fs = require('fs');
+const lz4js = require('lz4js');
+
+const builderAddress = '0x5e1d081488a5e746c1a13bf92103c1b9ee5962a2';
+// 2026-01-12 is today. Let's check 12, 11, 10.
+const dates = ['20260112', '20260111', '20260110', '20260109'];
+
+async function fetchAndProcess(date) {
+    const url = `https://stats-data.hyperliquid.xyz/Mainnet/builder_fills/${builderAddress}/${date}.csv.lz4`;
+    // console.log(`Fetching ${url}...`);
+
+    return new Promise((resolve) => {
+        https.get(url, (res) => {
+            if (res.statusCode !== 200) {
+                // console.log(`No data for ${date} (Status: ${res.statusCode})`);
+                resolve(null);
+                return;
+            }
+
+            const chunks = [];
+            res.on('data', chunk => chunks.push(chunk));
+            res.on('end', () => {
+                const buffer = Buffer.concat(chunks);
+                try {
+                    const decompressed = lz4js.decompress(buffer);
+                    const csv = Buffer.from(decompressed).toString('utf8');
+                    resolve({ date, csv });
+                } catch (e) {
+                    console.error(`Error decompressing ${date}:`, e.message);
+                    resolve(null);
+                }
+            });
+            res.on('error', () => resolve(null));
+        });
+    });
+}
+
+function parseCSV(csv) {
+    const lines = csv.trim().split('\n');
+    const headers = lines[0].split(',');
+    const data = [];
+    for (let i = 1; i < lines.length; i++) {
+        const values = lines[i].split(',');
+        const row = {};
+        headers.forEach((h, index) => {
+            row[h] = values[index];
+        });
+        data.push(row);
+    }
+    return data;
+}
+
+async function main() {
+    const results = [];
+    for (const date of dates) {
+        const result = await fetchAndProcess(date);
+        if (result) {
+            results.push(result);
+        }
+    }
+
+    if (results.length === 0) {
+        console.log("No builder referral data found for the last 3-4 days.");
+        return;
+    }
+
+    console.log("Builder Code Referrals (Last available data):");
+    let totalFees = 0;
+    const uniqueUsers = new Set();
+    const dailyStats = {};
+
+    results.forEach(({ date, csv }) => {
+        const records = parseCSV(csv);
+        let dailyFees = 0;
+        let dailyUsers = new Set();
+
+        records.forEach(r => {
+            const fee = parseFloat(r.builder_fee || 0);
+            dailyFees += fee;
+            totalFees += fee;
+            if (r.user) {
+                uniqueUsers.add(r.user);
+                dailyUsers.add(r.user);
+            }
+        });
+
+        dailyStats[date] = {
+            fees: dailyFees,
+            users: dailyUsers.size,
+            transactions: records.length
+        };
+    });
+
+    console.table(dailyStats);
+    console.log(`\nTotal Builder Fees: ${totalFees.toFixed(6)} USDC`);
+    console.log(`Total Unique Users: ${uniqueUsers.size}`);
+
+    console.log("\nUser Breakdown:");
+    const userBreakdown = {};
+    results.forEach(({ csv }) => {
+        const records = parseCSV(csv);
+        records.forEach(r => {
+            if (r.user) {
+                if (!userBreakdown[r.user]) {
+                    userBreakdown[r.user] = 0;
+                }
+                userBreakdown[r.user] += parseFloat(r.builder_fee || 0);
+            }
+        });
+    });
+
+    Object.entries(userBreakdown).forEach(([user, fee]) => {
+        console.log(`User: ${user}, Total Fee: ${fee.toFixed(6)} USDC`);
+    });
+}
+
+main();
diff --git a/Builders codes/node_modules/.package-lock.json b/Builders codes/node_modules/.package-lock.json
new file mode 100644
index 00000000..2632ac8d
--- /dev/null
+++ b/Builders codes/node_modules/.package-lock.json	
@@ -0,0 +1,14 @@
+{
+  "name": "builder-codes-fetcher",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/lz4js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/lz4js/-/lz4js-0.2.0.tgz",
+      "integrity": "sha512-gY2Ia9Lm7Ep8qMiuGRhvUq0Q7qUereeldZPP1PMEJxPtEWHJLqw9pgX68oHajBH0nzJK4MaZEA/YNV3jT8u8Bg==",
+      "license": "ISC"
+    }
+  }
+}
diff --git a/Builders codes/node_modules/lz4js/.eslintrc b/Builders codes/node_modules/lz4js/.eslintrc
new file mode 100644
index 00000000..c147bfff
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/.eslintrc	
@@ -0,0 +1,3 @@
+{
+  "extends": "semistandard"
+}
diff --git a/Builders codes/node_modules/lz4js/.npmignore b/Builders codes/node_modules/lz4js/.npmignore
new file mode 100644
index 00000000..b512c09d
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/.npmignore	
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/Builders codes/node_modules/lz4js/.travis.yml b/Builders codes/node_modules/lz4js/.travis.yml
new file mode 100644
index 00000000..f2badf90
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/.travis.yml	
@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - "6.0"
+  - "4.1"
+  - "0.12"
+  - "0.10"
+before_script:
+  - "npm install codecov.io istanbul"
+script:
+  - "istanbul cover ./node_modules/mocha/bin/_mocha -- -R spec test/cases && cat ./coverage/coverage.json | ./node_modules/codecov.io/bin/codecov.io.js"
\ No newline at end of file
diff --git a/Builders codes/node_modules/lz4js/README.md b/Builders codes/node_modules/lz4js/README.md
new file mode 100644
index 00000000..2da39985
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/README.md	
@@ -0,0 +1,39 @@
+# Lz4.js [![NPM version](https://badge.fury.io/js/lz4js.svg)](https://www.npmjs.com/package/lz4js) [![Build Status](https://travis-ci.org/Benzinga/lz4js.svg?branch=master)](https://travis-ci.org/Benzinga/lz4js) [![codecov](https://codecov.io/gh/Benzinga/lz4js/branch/master/graph/badge.svg)](https://codecov.io/gh/Benzinga/lz4js)
+Lz4.js is an implementation of Lz4 designed to be used in web browsers. It contains no dependencies on external libraries or Node.JS, though it is organized as a set of CommonJS modules. It is recommended to use Browserify or WebPack to bundle this for the web browser.
+
+## Installation
+```
+npm install lz4js
+```
+
+## Usage
+```javascript
+var lz4 = require("lz4js");
+var fs = require("fs");
+
+// Compress 128 bytes of zero.
+var compressed = lz4.compress(new Array(128));
+
+// Decompress.
+var decompressed = lz4.decompress(compressed);
+
+// Compress file.bin to file.lz4.
+var data = fs.readFileSync("file.bin");
+compressed = Buffer.from(lz4.compress(data));
+fs.writeFileSync('file.lz4', compressed);
+```
+
+> **Note**: The high-level `compress` and `decompress` functions deal with framed Lz4 data and do not support raw block data nor legacy Lz4 blocks.
+
+## API
+The API accepts either `Array`s or `Uint8Array`s. Arrays are expected to be arrays of unsigned 8-bit values. The API will return `Uint8Array`s if the browser supports them, or `Array`s otherwise.
+
+  - `compress(buffer: Array, maxSize: Number): Array`
+
+    Compresses a buffer using Lz4. maxSize sets bounds on the output length; it is recommended to not specify this unless you know what you're doing.
+    Any unused buffer data will be sliced before the buffer is returned.
+
+  - `decompress(buffer: Array, maxSize: Number): Array`
+
+    Decompresses a buffer using Lz4. maxSize sets bounds on the output length; if you know the output length, this will reduce memory usage somewhat.
+    Any unused buffer data will be sliced before the buffer is returned.
diff --git a/Builders codes/node_modules/lz4js/lz4.js b/Builders codes/node_modules/lz4js/lz4.js
new file mode 100644
index 00000000..821dbb6f
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/lz4.js	
@@ -0,0 +1,560 @@
+// lz4.js - An implementation of Lz4 in plain JavaScript.
+//
+// TODO:
+// - Unify header parsing/writing.
+// - Support options (block size, checksums)
+// - Support streams
+// - Better error handling (handle bad offset, etc.)
+// - HC support (better search algorithm)
+// - Tests/benchmarking
+
+var xxhash = require('./xxh32.js');
+var util = require('./util.js');
+
+// Constants
+// --
+
+// Compression format parameters/constants.
+var minMatch = 4;
+var minLength = 13;
+var searchLimit = 5;
+var skipTrigger = 6;
+var hashSize = 1 << 16;
+
+// Token constants.
+var mlBits = 4;
+var mlMask = (1 << mlBits) - 1;
+var runBits = 4;
+var runMask = (1 << runBits) - 1;
+
+// Shared buffers
+var blockBuf = makeBuffer(5 << 20);
+var hashTable = makeHashTable();
+
+// Frame constants.
+var magicNum = 0x184D2204;
+
+// Frame descriptor flags.
+var fdContentChksum = 0x4;
+var fdContentSize = 0x8;
+var fdBlockChksum = 0x10;
+// var fdBlockIndep = 0x20;
+var fdVersion = 0x40;
+var fdVersionMask = 0xC0;
+
+// Block sizes.
+var bsUncompressed = 0x80000000;
+var bsDefault = 7;
+var bsShift = 4;
+var bsMask = 7;
+var bsMap = {
+  4: 0x10000,
+  5: 0x40000,
+  6: 0x100000,
+  7: 0x400000
+};
+
+// Utility functions/primitives
+// --
+
+// Makes our hashtable. On older browsers, may return a plain array.
+function makeHashTable () {
+  try {
+    return new Uint32Array(hashSize);
+  } catch (error) {
+    var hashTable = new Array(hashSize);
+
+    for (var i = 0; i < hashSize; i++) {
+      hashTable[i] = 0;
+    }
+
+    return hashTable;
+  }
+}
+
+// Clear hashtable.
+function clearHashTable (table) {
+  for (var i = 0; i < hashSize; i++) {
+    hashTable[i] = 0;
+  }
+}
+
+// Makes a byte buffer. On older browsers, may return a plain array.
+function makeBuffer (size) {
+  try {
+    return new Uint8Array(size);
+  } catch (error) {
+    var buf = new Array(size);
+
+    for (var i = 0; i < size; i++) {
+      buf[i] = 0;
+    }
+
+    return buf;
+  }
+}
+
+function sliceArray (array, start, end) {
+  if (typeof array.buffer !== undefined) {
+    if (Uint8Array.prototype.slice) {
+      return array.slice(start, end);
+    } else {
+      // Uint8Array#slice polyfill.
+      var len = array.length;
+
+      // Calculate start.
+      start = start | 0;
+      start = (start < 0) ? Math.max(len + start, 0) : Math.min(start, len);
+
+      // Calculate end.
+      end = (end === undefined) ? len : end | 0;
+      end = (end < 0) ? Math.max(len + end, 0) : Math.min(end, len);
+
+      // Copy into new array.
+      var arraySlice = new Uint8Array(end - start);
+      for (var i = start, n = 0; i < end;) {
+        arraySlice[n++] = array[i++];
+      }
+
+      return arraySlice;
+    }
+  } else {
+    // Assume normal array.
+    return array.slice(start, end);
+  }
+}
+
+// Implementation
+// --
+
+// Calculates an upper bound for lz4 compression.
+exports.compressBound = function compressBound (n) {
+  return (n + (n / 255) + 16) | 0;
+};
+
+// Calculates an upper bound for lz4 decompression, by reading the data.
+exports.decompressBound = function decompressBound (src) {
+  var sIndex = 0;
+
+  // Read magic number
+  if (util.readU32(src, sIndex) !== magicNum) {
+    throw new Error('invalid magic number');
+  }
+
+  sIndex += 4;
+
+  // Read descriptor
+  var descriptor = src[sIndex++];
+
+  // Check version
+  if ((descriptor & fdVersionMask) !== fdVersion) {
+    throw new Error('incompatible descriptor version ' + (descriptor & fdVersionMask));
+  }
+
+  // Read flags
+  var useBlockSum = (descriptor & fdBlockChksum) !== 0;
+  var useContentSize = (descriptor & fdContentSize) !== 0;
+
+  // Read block size
+  var bsIdx = (src[sIndex++] >> bsShift) & bsMask;
+
+  if (bsMap[bsIdx] === undefined) {
+    throw new Error('invalid block size ' + bsIdx);
+  }
+
+  var maxBlockSize = bsMap[bsIdx];
+
+  // Get content size
+  if (useContentSize) {
+    return util.readU64(src, sIndex);
+  }
+
+  // Checksum
+  sIndex++;
+
+  // Read blocks.
+  var maxSize = 0;
+  while (true) {
+    var blockSize = util.readU32(src, sIndex);
+    sIndex += 4;
+
+    if (blockSize & bsUncompressed) {
+      blockSize &= ~bsUncompressed;
+      maxSize += blockSize;
+    } else {
+      maxSize += maxBlockSize;
+    }
+
+    if (blockSize === 0) {
+      return maxSize;
+    }
+
+    if (useBlockSum) {
+      sIndex += 4;
+    }
+
+    sIndex += blockSize;
+  }
+};
+
+// Creates a buffer of a given byte-size, falling back to plain arrays.
+exports.makeBuffer = makeBuffer;
+
+// Decompresses a block of Lz4.
+exports.decompressBlock = function decompressBlock (src, dst, sIndex, sLength, dIndex) {
+  var mLength, mOffset, sEnd, n, i;
+
+  // Setup initial state.
+  sEnd = sIndex + sLength;
+
+  // Consume entire input block.
+  while (sIndex < sEnd) {
+    var token = src[sIndex++];
+
+    // Copy literals.
+    var literalCount = (token >> 4);
+    if (literalCount > 0) {
+      // Parse length.
+      if (literalCount === 0xf) {
+        while (true) {
+          literalCount += src[sIndex];
+          if (src[sIndex++] !== 0xff) {
+            break;
+          }
+        }
+      }
+
+      // Copy literals
+      for (n = sIndex + literalCount; sIndex < n;) {
+        dst[dIndex++] = src[sIndex++];
+      }
+    }
+
+    if (sIndex >= sEnd) {
+      break;
+    }
+
+    // Copy match.
+    mLength = (token & 0xf);
+
+    // Parse offset.
+    mOffset = src[sIndex++] | (src[sIndex++] << 8);
+
+    // Parse length.
+    if (mLength === 0xf) {
+      while (true) {
+        mLength += src[sIndex];
+        if (src[sIndex++] !== 0xff) {
+          break;
+        }
+      }
+    }
+
+    mLength += minMatch;
+
+    // Copy match.
+    for (i = dIndex - mOffset, n = i + mLength; i < n;) {
+      dst[dIndex++] = dst[i++] | 0;
+    }
+  }
+
+  return dIndex;
+};
+
+// Compresses a block with Lz4.
+exports.compressBlock = function compressBlock (src, dst, sIndex, sLength, hashTable) {
+  var mIndex, mAnchor, mLength, mOffset, mStep;
+  var literalCount, dIndex, sEnd, n;
+
+  // Setup initial state.
+  dIndex = 0;
+  sEnd = sLength + sIndex;
+  mAnchor = sIndex;
+
+  // Process only if block is large enough.
+  if (sLength >= minLength) {
+    var searchMatchCount = (1 << skipTrigger) + 3;
+
+    // Consume until last n literals (Lz4 spec limitation.)
+    while (sIndex + minMatch < sEnd - searchLimit) {
+      var seq = util.readU32(src, sIndex);
+      var hash = util.hashU32(seq) >>> 0;
+
+      // Crush hash to 16 bits.
+      hash = ((hash >> 16) ^ hash) >>> 0 & 0xffff;
+
+      // Look for a match in the hashtable. NOTE: remove one; see below.
+      mIndex = hashTable[hash] - 1;
+
+      // Put pos in hash table. NOTE: add one so that zero = invalid.
+      hashTable[hash] = sIndex + 1;
+
+      // Determine if there is a match (within range.)
+      if (mIndex < 0 || ((sIndex - mIndex) >>> 16) > 0 || util.readU32(src, mIndex) !== seq) {
+        mStep = searchMatchCount++ >> skipTrigger;
+        sIndex += mStep;
+        continue;
+      }
+
+      searchMatchCount = (1 << skipTrigger) + 3;
+
+      // Calculate literal count and offset.
+      literalCount = sIndex - mAnchor;
+      mOffset = sIndex - mIndex;
+
+      // We've already matched one word, so get that out of the way.
+      sIndex += minMatch;
+      mIndex += minMatch;
+
+      // Determine match length.
+      // N.B.: mLength does not include minMatch, Lz4 adds it back
+      // in decoding.
+      mLength = sIndex;
+      while (sIndex < sEnd - searchLimit && src[sIndex] === src[mIndex]) {
+        sIndex++;
+        mIndex++;
+      }
+      mLength = sIndex - mLength;
+
+      // Write token + literal count.
+      var token = mLength < mlMask ? mLength : mlMask;
+      if (literalCount >= runMask) {
+        dst[dIndex++] = (runMask << mlBits) + token;
+        for (n = literalCount - runMask; n >= 0xff; n -= 0xff) {
+          dst[dIndex++] = 0xff;
+        }
+        dst[dIndex++] = n;
+      } else {
+        dst[dIndex++] = (literalCount << mlBits) + token;
+      }
+
+      // Write literals.
+      for (var i = 0; i < literalCount; i++) {
+        dst[dIndex++] = src[mAnchor + i];
+      }
+
+      // Write offset.
+      dst[dIndex++] = mOffset;
+      dst[dIndex++] = (mOffset >> 8);
+
+      // Write match length.
+      if (mLength >= mlMask) {
+        for (n = mLength - mlMask; n >= 0xff; n -= 0xff) {
+          dst[dIndex++] = 0xff;
+        }
+        dst[dIndex++] = n;
+      }
+
+      // Move the anchor.
+      mAnchor = sIndex;
+    }
+  }
+
+  // Nothing was encoded.
+  if (mAnchor === 0) {
+    return 0;
+  }
+
+  // Write remaining literals.
+  // Write literal token+count.
+  literalCount = sEnd - mAnchor;
+  if (literalCount >= runMask) {
+    dst[dIndex++] = (runMask << mlBits);
+    for (n = literalCount - runMask; n >= 0xff; n -= 0xff) {
+      dst[dIndex++] = 0xff;
+    }
+    dst[dIndex++] = n;
+  } else {
+    dst[dIndex++] = (literalCount << mlBits);
+  }
+
+  // Write literals.
+  sIndex = mAnchor;
+  while (sIndex < sEnd) {
+    dst[dIndex++] = src[sIndex++];
+  }
+
+  return dIndex;
+};
+
+// Decompresses a frame of Lz4 data.
+exports.decompressFrame = function decompressFrame (src, dst) {
+  var useBlockSum, useContentSum, useContentSize, descriptor;
+  var sIndex = 0;
+  var dIndex = 0;
+
+  // Read magic number
+  if (util.readU32(src, sIndex) !== magicNum) {
+    throw new Error('invalid magic number');
+  }
+
+  sIndex += 4;
+
+  // Read descriptor
+  descriptor = src[sIndex++];
+
+  // Check version
+  if ((descriptor & fdVersionMask) !== fdVersion) {
+    throw new Error('incompatible descriptor version');
+  }
+
+  // Read flags
+  useBlockSum = (descriptor & fdBlockChksum) !== 0;
+  useContentSum = (descriptor & fdContentChksum) !== 0;
+  useContentSize = (descriptor & fdContentSize) !== 0;
+
+  // Read block size
+  var bsIdx = (src[sIndex++] >> bsShift) & bsMask;
+
+  if (bsMap[bsIdx] === undefined) {
+    throw new Error('invalid block size');
+  }
+
+  if (useContentSize) {
+    // TODO: read content size
+    sIndex += 8;
+  }
+
+  sIndex++;
+
+  // Read blocks.
+  while (true) {
+    var compSize;
+
+    compSize = util.readU32(src, sIndex);
+    sIndex += 4;
+
+    if (compSize === 0) {
+      break;
+    }
+
+    if (useBlockSum) {
+      // TODO: read block checksum
+      sIndex += 4;
+    }
+
+    // Check if block is compressed
+    if ((compSize & bsUncompressed) !== 0) {
+      // Mask off the 'uncompressed' bit
+      compSize &= ~bsUncompressed;
+
+      // Copy uncompressed data into destination buffer.
+      for (var j = 0; j < compSize; j++) {
+        dst[dIndex++] = src[sIndex++];
+      }
+    } else {
+      // Decompress into blockBuf
+      dIndex = exports.decompressBlock(src, dst, sIndex, compSize, dIndex);
+      sIndex += compSize;
+    }
+  }
+
+  if (useContentSum) {
+    // TODO: read content checksum
+    sIndex += 4;
+  }
+
+  return dIndex;
+};
+
+// Compresses data to an Lz4 frame.
+exports.compressFrame = function compressFrame (src, dst) {
+  var dIndex = 0;
+
+  // Write magic number.
+  util.writeU32(dst, dIndex, magicNum);
+  dIndex += 4;
+
+  // Descriptor flags.
+  dst[dIndex++] = fdVersion;
+  dst[dIndex++] = bsDefault << bsShift;
+
+  // Descriptor checksum.
+  dst[dIndex] = xxhash.hash(0, dst, 4, dIndex - 4) >> 8;
+  dIndex++;
+
+  // Write blocks.
+  var maxBlockSize = bsMap[bsDefault];
+  var remaining = src.length;
+  var sIndex = 0;
+
+  // Clear the hashtable.
+  clearHashTable(hashTable);
+
+  // Split input into blocks and write.
+  while (remaining > 0) {
+    var compSize = 0;
+    var blockSize = remaining > maxBlockSize ? maxBlockSize : remaining;
+
+    compSize = exports.compressBlock(src, blockBuf, sIndex, blockSize, hashTable);
+
+    if (compSize > blockSize || compSize === 0) {
+      // Output uncompressed.
+      util.writeU32(dst, dIndex, 0x80000000 | blockSize);
+      dIndex += 4;
+
+      for (var z = sIndex + blockSize; sIndex < z;) {
+        dst[dIndex++] = src[sIndex++];
+      }
+
+      remaining -= blockSize;
+    } else {
+      // Output compressed.
+      util.writeU32(dst, dIndex, compSize);
+      dIndex += 4;
+
+      for (var j = 0; j < compSize;) {
+        dst[dIndex++] = blockBuf[j++];
+      }
+
+      sIndex += blockSize;
+      remaining -= blockSize;
+    }
+  }
+
+  // Write blank end block.
+  util.writeU32(dst, dIndex, 0);
+  dIndex += 4;
+
+  return dIndex;
+};
+
+// Decompresses a buffer containing an Lz4 frame. maxSize is optional; if not
+// provided, a maximum size will be determined by examining the data. The
+// buffer returned will always be perfectly-sized.
+exports.decompress = function decompress (src, maxSize) {
+  var dst, size;
+
+  if (maxSize === undefined) {
+    maxSize = exports.decompressBound(src);
+  }
+
+  dst = exports.makeBuffer(maxSize);
+  size = exports.decompressFrame(src, dst);
+
+  if (size !== maxSize) {
+    dst = sliceArray(dst, 0, size);
+  }
+
+  return dst;
+};
+
+// Compresses a buffer to an Lz4 frame. maxSize is optional; if not provided,
+// a buffer will be created based on the theoretical worst output size for a
+// given input size. The buffer returned will always be perfectly-sized.
+exports.compress = function compress (src, maxSize) {
+  var dst, size;
+
+  if (maxSize === undefined) {
+    maxSize = exports.compressBound(src.length);
+  }
+
+  dst = exports.makeBuffer(maxSize);
+  size = exports.compressFrame(src, dst);
+
+  if (size !== maxSize) {
+    dst = sliceArray(dst, 0, size);
+  }
+
+  return dst;
+};
diff --git a/Builders codes/node_modules/lz4js/package.json b/Builders codes/node_modules/lz4js/package.json
new file mode 100644
index 00000000..e31d1709
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/package.json	
@@ -0,0 +1,36 @@
+{
+  "name": "lz4js",
+  "version": "0.2.0",
+  "description": "An Lz4 implementation for the browser.",
+  "main": "lz4.js",
+  "scripts": {
+    "test": "mocha -R spec test/cases"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Benzinga/lz4js.git"
+  },
+  "keywords": [
+    "lz4",
+    "compression",
+    "decompression",
+    "browser",
+    "commonjs"
+  ],
+  "author": "John Chadwick",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Benzinga/lz4js/issues"
+  },
+  "homepage": "https://github.com/Benzinga/lz4js#readme",
+  "devDependencies": {
+    "chai": "^3.5.0",
+    "eslint": "^3.0.1",
+    "eslint-config-semistandard": "^6.0.2",
+    "eslint-config-standard": "^5.3.5",
+    "eslint-plugin-promise": "^2.0.0",
+    "eslint-plugin-react": "^5.2.2",
+    "eslint-plugin-standard": "^2.0.0",
+    "mocha": "^2.5.3"
+  }
+}
diff --git a/Builders codes/node_modules/lz4js/test/cases/lz4.js b/Builders codes/node_modules/lz4js/test/cases/lz4.js
new file mode 100644
index 00000000..b24e03f3
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/test/cases/lz4.js	
@@ -0,0 +1,268 @@
+/* eslint-env node, mocha */
+var expect = require('chai').expect;
+var lz4 = require('../../lz4');
+
+// Find root object (depends on JS environment)
+var root;
+if (typeof window !== 'undefined') {
+  root = window;
+} else if (typeof global !== 'undefined') {
+  root = global;
+}
+
+// Use plain old arrays for older browsers and older Node.
+function byteArray (arg) {
+  if (root.Uint8Array) {
+    return new Uint8Array(arg);
+  } else {
+    if (typeof arg === 'number' || typeof arg === 'undefined') {
+      return new Array(arg);
+    } else {
+      return arg;
+    }
+  }
+}
+
+describe('lz4', function () {
+  describe('#decompress', function () {
+    it('should decompress empty lz4 Array correctly', function () {
+      var emptyLz4 = [4, 34, 77, 24, 64, 112, 223, 0, 0, 0, 0];
+      expect(lz4.decompress(emptyLz4)).to.be.deep.equal(byteArray(0));
+    });
+
+    it('should decompress empty lz4 Uint8Array correctly', function () {
+      var emptyLz4 = byteArray([4, 34, 77, 24, 64, 112, 223, 0, 0, 0, 0]);
+      expect(lz4.decompress(emptyLz4)).to.be.deep.equal(byteArray(0));
+    });
+
+    it('should decompress data compressed with lz4c', function () {
+      var output = byteArray([
+        0x54, 0x68, 0x65, 0x20, 0x77, 0x68, 0x6f, 0x6c,
+        0x65, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x20,
+        0x69, 0x73, 0x20, 0x65, 0x6e, 0x64, 0x69, 0x6e,
+        0x67, 0x2e, 0x0a
+      ]);
+      var input = byteArray([
+        0x04, 0x22, 0x4d, 0x18, 0x64, 0x40, 0xa7, 0x1b,
+        0x00, 0x00, 0x80, 0x54, 0x68, 0x65, 0x20, 0x77,
+        0x68, 0x6f, 0x6c, 0x65, 0x20, 0x77, 0x6f, 0x72,
+        0x6c, 0x64, 0x20, 0x69, 0x73, 0x20, 0x65, 0x6e,
+        0x64, 0x69, 0x6e, 0x67, 0x2e, 0x0a, 0x00, 0x00,
+        0x00, 0x00, 0xbc, 0xa8, 0x6b, 0xc5
+      ]);
+      expect(lz4.decompress(input)).to.be.deep.equal(output);
+    });
+
+    it('should decompress data compressed with lz4c (2)', function () {
+      var output = byteArray([
+        0x49, 0x20, 0x66, 0x69, 0x6e, 0x64, 0x20, 0x69, 0x74, 0x20, 0x68, 0x61,
+        0x72, 0x64, 0x20, 0x74, 0x6f, 0x20, 0x74, 0x65, 0x6c, 0x6c, 0x20, 0x79,
+        0x6f, 0x75, 0x0a, 0x49, 0x20, 0x66, 0x69, 0x6e, 0x64, 0x20, 0x69, 0x74,
+        0x20, 0x68, 0x61, 0x72, 0x64, 0x20, 0x74, 0x6f, 0x20, 0x74, 0x61, 0x6b,
+        0x65, 0x0a, 0x57, 0x68, 0x65, 0x6e, 0x20, 0x70, 0x65, 0x6f, 0x70, 0x6c,
+        0x65, 0x20, 0x72, 0x75, 0x6e, 0x20, 0x69, 0x6e, 0x20, 0x63, 0x69, 0x72,
+        0x63, 0x6c, 0x65, 0x73, 0x0a, 0x49, 0x74, 0x27, 0x73, 0x20, 0x61, 0x20,
+        0x76, 0x65, 0x72, 0x79, 0x2c, 0x20, 0x76, 0x65, 0x72, 0x79, 0x20, 0x6d,
+        0x61, 0x64, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x2c, 0x20, 0x6d, 0x61,
+        0x64, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x0a
+      ]);
+      var input = byteArray([
+        0x04, 0x22, 0x4d, 0x18, 0x64, 0x40, 0xa7, 0x67, 0x00, 0x00, 0x00, 0xff,
+        0x0c, 0x49, 0x20, 0x66, 0x69, 0x6e, 0x64, 0x20, 0x69, 0x74, 0x20, 0x68,
+        0x61, 0x72, 0x64, 0x20, 0x74, 0x6f, 0x20, 0x74, 0x65, 0x6c, 0x6c, 0x20,
+        0x79, 0x6f, 0x75, 0x0a, 0x1b, 0x00, 0x00, 0xf1, 0x1c, 0x61, 0x6b, 0x65,
+        0x0a, 0x57, 0x68, 0x65, 0x6e, 0x20, 0x70, 0x65, 0x6f, 0x70, 0x6c, 0x65,
+        0x20, 0x72, 0x75, 0x6e, 0x20, 0x69, 0x6e, 0x20, 0x63, 0x69, 0x72, 0x63,
+        0x6c, 0x65, 0x73, 0x0a, 0x49, 0x74, 0x27, 0x73, 0x20, 0x61, 0x20, 0x76,
+        0x65, 0x72, 0x79, 0x2c, 0x06, 0x00, 0xf0, 0x07, 0x20, 0x6d, 0x61, 0x64,
+        0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x2c, 0x20, 0x6d, 0x61, 0x64, 0x20,
+        0x77, 0x6f, 0x72, 0x6c, 0x64, 0x0a, 0x00, 0x00, 0x00, 0x00, 0x24, 0x2a,
+        0xaf, 0xb9
+      ]);
+      expect(lz4.decompress(input)).to.be.deep.equal(output);
+    });
+
+    it('should decompress data containing content-size', function () {
+      var output = byteArray([
+        0x49, 0x66, 0x20, 0x79, 0x6f, 0x75, 0x20, 0x22,
+        0x77, 0x69, 0x6e, 0x2c, 0x22, 0x20, 0x79, 0x6f,
+        0x75, 0x20, 0x77, 0x6f, 0x6e, 0x27, 0x74, 0x20,
+        0x77, 0x61, 0x6e, 0x74, 0x20, 0x74, 0x6f, 0x20,
+        0x22, 0x70, 0x6c, 0x61, 0x79, 0x22, 0x20, 0x77,
+        0x69, 0x74, 0x68, 0x20, 0x6d, 0x65, 0x20, 0x61,
+        0x6e, 0x79, 0x6d, 0x6f, 0x72, 0x65, 0x2e, 0x0a
+      ]);
+      var input = byteArray([
+        0x04, 0x22, 0x4d, 0x18, 0x6c, 0x40, 0x38, 0x00,
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x58, 0x38,
+        0x00, 0x00, 0x80, 0x49, 0x66, 0x20, 0x79, 0x6f,
+        0x75, 0x20, 0x22, 0x77, 0x69, 0x6e, 0x2c, 0x22,
+        0x20, 0x79, 0x6f, 0x75, 0x20, 0x77, 0x6f, 0x6e,
+        0x27, 0x74, 0x20, 0x77, 0x61, 0x6e, 0x74, 0x20,
+        0x74, 0x6f, 0x20, 0x22, 0x70, 0x6c, 0x61, 0x79,
+        0x22, 0x20, 0x77, 0x69, 0x74, 0x68, 0x20, 0x6d,
+        0x65, 0x20, 0x61, 0x6e, 0x79, 0x6d, 0x6f, 0x72,
+        0x65, 0x2e, 0x0a, 0x00, 0x00, 0x00, 0x00, 0x9f,
+        0xda, 0xad, 0x19
+      ]);
+      expect(lz4.decompress(input)).to.be.deep.equal(output);
+    });
+
+    it('should fail on bad header magic', function () {
+      var input = byteArray([5, 34, 77, 24, 64, 112, 223, 0, 0, 0, 0]);
+      var fn = function () { return lz4.decompress(input); };
+      expect(fn).to.throw(/invalid magic number/);
+    });
+
+    it('should fail on bad block size', function () {
+      var input = byteArray([4, 34, 77, 24, 64, 0, 223, 0, 0, 0, 0]);
+      var fn = function () { return lz4.decompress(input); };
+      expect(fn).to.throw(/invalid block size/);
+    });
+  });
+
+  describe('#decompressBlock', function () {
+    it('should pass the Linux kernel lz4 test vector', function () {
+      // This test comes from the Linux kernel, crypto/testmgr.h.
+      // It is the string, "Join us now and share the software ",
+      // repeated twice. It is probably quoting Richard Stallman's
+      // "Free Software Song." Lz4 is used in the Linux kernel to
+      // compress kernel images.
+      var linuxTestIn = byteArray([
+        0xf0, 0x10, 0x4a, 0x6f, 0x69, 0x6e, 0x20, 0x75,
+        0x73, 0x20, 0x6e, 0x6f, 0x77, 0x20, 0x61, 0x6e,
+        0x64, 0x20, 0x73, 0x68, 0x61, 0x72, 0x65, 0x20,
+        0x74, 0x68, 0x65, 0x20, 0x73, 0x6f, 0x66, 0x74,
+        0x77, 0x0d, 0x00, 0x0f, 0x23, 0x00, 0x0b, 0x50,
+        0x77, 0x61, 0x72, 0x65, 0x20
+      ]);
+      var linuxTestOut = byteArray([
+        0x4a, 0x6f, 0x69, 0x6e, 0x20, 0x75, 0x73, 0x20,
+        0x6e, 0x6f, 0x77, 0x20, 0x61, 0x6e, 0x64, 0x20,
+        0x73, 0x68, 0x61, 0x72, 0x65, 0x20, 0x74, 0x68,
+        0x65, 0x20, 0x73, 0x6f, 0x66, 0x74, 0x77, 0x61,
+        0x72, 0x65, 0x20, 0x4a, 0x6f, 0x69, 0x6e, 0x20,
+        0x75, 0x73, 0x20, 0x6e, 0x6f, 0x77, 0x20, 0x61,
+        0x6e, 0x64, 0x20, 0x73, 0x68, 0x61, 0x72, 0x65,
+        0x20, 0x74, 0x68, 0x65, 0x20, 0x73, 0x6f, 0x66,
+        0x74, 0x77, 0x61, 0x72, 0x65, 0x20
+      ]);
+      var testOut = byteArray(70);
+
+      lz4.decompressBlock(linuxTestIn, testOut, 0, 45, 0);
+      expect(testOut).to.be.deep.equal(linuxTestOut);
+    });
+  });
+
+  describe('#compress', function () {
+    it('should compress empty Array correctly', function () {
+      var emptyLz4 = byteArray([4, 34, 77, 24, 64, 112, 223, 0, 0, 0, 0]);
+      expect(lz4.compress([])).to.be.deep.equal(emptyLz4);
+    });
+
+    it('should compress empty Uint8Array correctly', function () {
+      var emptyLz4 = byteArray([4, 34, 77, 24, 64, 112, 223, 0, 0, 0, 0]);
+      expect(lz4.compress(byteArray(0))).to.be.deep.equal(emptyLz4);
+    });
+
+    it('should output pseudo RLE', function () {
+      var input = byteArray([
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
+      ]);
+      var output = byteArray([
+        0x04, 0x22, 0x4D, 0x18, 0x40, 0x70, 0xDF, 0x0B,
+        0x00, 0x00, 0x00, 0x1F, 0x00, 0x01, 0x00, 0x07,
+        0x50, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+        0x00, 0x00
+      ]);
+      expect(lz4.compress(input)).to.be.deep.equal(output);
+    });
+
+    it('should find matches', function () {
+      var input = byteArray([
+        0x74, 0x65, 0x73, 0x74, 0x74, 0x65, 0x73, 0x74,
+        0x74, 0x65, 0x73, 0x74, 0x74, 0x65, 0x73, 0x74,
+        0x74, 0x65, 0x73, 0x74, 0x74, 0x65, 0x73, 0x74,
+        0x74, 0x65, 0x73, 0x74, 0x74, 0x65, 0x73, 0x74
+      ]);
+
+      // Psuedo-RLE describes when the length is greater than the offset,
+      // i.e. the match goes beyond the cursor. This seems like non-sense, but
+      // it works because this only occurs if there's a repeating pattern that
+      // repeats _before_ the cursor - the match matches itself.
+      var output = byteArray([
+        0x04, 0x22, 0x4d, 0x18, 0x40, 0x70, 0xDF, 0x0E,
+        0x00, 0x00, 0x00, 0x4F, 0x74, 0x65, 0x73, 0x74,
+        0x04, 0x00, 0x04, 0x50, 0x74, 0x74, 0x65, 0x73,
+        0x74, 0x00, 0x00, 0x00, 0x00
+      ]);
+
+      expect(lz4.compress(input)).to.be.deep.equal(output);
+    });
+
+    it('should use maxSize', function () {
+      var emptyLz4 = byteArray([4, 34, 77, 24, 64, 112, 223, 0]);
+      expect(lz4.compress([], 8)).to.be.deep.equal(emptyLz4);
+    });
+
+    it('should not compress uncompressible data', function () {
+      var input = byteArray([
+        0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07,
+        0x08, 0x09, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F,
+        0x10, 0x11, 0x12, 0x13, 0x14, 0x15, 0x16, 0x17,
+        0x18, 0x19, 0x1A, 0x1B, 0x1C, 0x1D, 0x1E, 0x1F
+      ]);
+
+      // Make note of the 0x80000020 frame size - that last bit marks it
+      // as being uncompressed.
+      var output = byteArray([
+        0x04, 0x22, 0x4d, 0x18, 0x40, 0x70, 0xdf, 0x20,
+        0x00, 0x00, 0x80, 0x00, 0x01, 0x02, 0x03, 0x04,
+        0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c,
+        0x0d, 0x0e, 0x0f, 0x10, 0x11, 0x12, 0x13, 0x14,
+        0x15, 0x16, 0x17, 0x18, 0x19, 0x1a, 0x1b, 0x1c,
+        0x1d, 0x1e, 0x1f, 0x00, 0x00, 0x00, 0x00
+      ]);
+
+      expect(lz4.compress(input)).to.be.deep.equal(output);
+    });
+  });
+
+  describe('#compressBlock', function () {
+    it('should be able to output over 15 literals at end', function () {
+      var input = byteArray([
+        0x4a, 0x6f, 0x69, 0x6e, 0x20, 0x75, 0x73, 0x20,
+        0x6e, 0x6f, 0x77, 0x20, 0x61, 0x6e, 0x64, 0x20,
+        0x73, 0x68, 0x61, 0x72, 0x65, 0x20, 0x74, 0x68,
+        0x65, 0x20, 0x73, 0x6f, 0x66, 0x74, 0x77, 0x61,
+        0x72, 0x65, 0x20, 0x4a, 0x6f, 0x69, 0x6e, 0x20,
+        0x75, 0x73, 0x20, 0x6e, 0x6f, 0x77, 0x20, 0x61,
+        0x6e, 0x64, 0x20, 0x73, 0x68, 0x61, 0x72, 0x65,
+        0x20, 0x74, 0x68, 0x65, 0x20, 0x73, 0x6f, 0x66,
+        0x74, 0x77, 0x61, 0x72, 0x65, 0x20, 0x01, 0x02,
+        0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x10,
+        0x11, 0x12, 0x13, 0x14, 0x15, 0x16, 0x17, 0x18
+      ]);
+      var output = byteArray([
+        0xf0, 0x10, 0x4a, 0x6f, 0x69, 0x6e, 0x20, 0x75,
+        0x73, 0x20, 0x6e, 0x6f, 0x77, 0x20, 0x61, 0x6e,
+        0x64, 0x20, 0x73, 0x68, 0x61, 0x72, 0x65, 0x20,
+        0x74, 0x68, 0x65, 0x20, 0x73, 0x6f, 0x66, 0x74,
+        0x77, 0x0d, 0x00, 0x0f, 0x23, 0x00, 0x10, 0xf0,
+        0x03, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07,
+        0x08, 0x09, 0x10, 0x11, 0x12, 0x13, 0x14, 0x15,
+        0x16, 0x17, 0x18
+      ]);
+      var testOut = byteArray(59);
+      var sz;
+
+      sz = lz4.compressBlock(input, testOut, 0, input.length, lz4.makeBuffer(1 << 16));
+
+      expect(sz).to.be.equal(59);
+      expect(testOut).to.be.deep.equal(output);
+    });
+  });
+});
diff --git a/Builders codes/node_modules/lz4js/test/cases/xxh32.js b/Builders codes/node_modules/lz4js/test/cases/xxh32.js
new file mode 100644
index 00000000..e9ee6d67
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/test/cases/xxh32.js	
@@ -0,0 +1,94 @@
+/* eslint-env node, mocha */
+var expect = require('chai').expect;
+var xxh32 = require('../../xxh32');
+
+describe('xxh32', function () {
+  describe('#hash', function () {
+    it('passes the github.com/pierrec/xxHash tests', function () {
+      var tests = [
+        [0x02cc5d05, []],
+        [0x550d7456, [0x61]],
+        [0x4999fc53, [0x61, 0x62]],
+        [0x32d153ff, [0x61, 0x62, 0x63]],
+        [0xa3643705, [0x61, 0x62, 0x63, 0x64]],
+        [0x9738f19b, [0x61, 0x62, 0x63, 0x64, 0x65]],
+        [0x8b7cd587, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66]],
+        [0x9dd093b3, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67]],
+        [0x0bb3c6bb, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68]],
+        [0xd03c13fd, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68,
+                      0x69]],
+        [0x8b988cfe, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68,
+                      0x69, 0x6a]],
+        [0x9d2d8b62, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68,
+                      0x69, 0x6a, 0x6b, 0x6c, 0x6d, 0x6e, 0x6f, 0x70]],
+        [0x42ae804d, [0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68,
+                      0x69, 0x6a, 0x6b, 0x6c, 0x6d, 0x6e, 0x6f, 0x70,
+                      0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77, 0x78,
+                      0x79, 0x7a, 0x30, 0x31, 0x32, 0x33, 0x34, 0x35,
+                      0x36, 0x37, 0x38, 0x39]],
+        [0x62b4ed00, [0x4c, 0x6f, 0x72, 0x65, 0x6d, 0x20, 0x69, 0x70,
+                      0x73, 0x75, 0x6d, 0x20, 0x64, 0x6f, 0x6c, 0x6f,
+                      0x72, 0x20, 0x73, 0x69, 0x74, 0x20, 0x61, 0x6d,
+                      0x65, 0x74, 0x2c, 0x20, 0x63, 0x6f, 0x6e, 0x73,
+                      0x65, 0x63, 0x74, 0x65, 0x74, 0x75, 0x72, 0x20,
+                      0x61, 0x64, 0x69, 0x70, 0x69, 0x73, 0x63, 0x69,
+                      0x6e, 0x67, 0x20, 0x65, 0x6c, 0x69, 0x74, 0x2c,
+                      0x20, 0x73, 0x65, 0x64, 0x20, 0x64, 0x6f, 0x20,
+                      0x65, 0x69, 0x75, 0x73, 0x6d, 0x6f, 0x64, 0x20,
+                      0x74, 0x65, 0x6d, 0x70, 0x6f, 0x72, 0x20, 0x69,
+                      0x6e, 0x63, 0x69, 0x64, 0x69, 0x64, 0x75, 0x6e,
+                      0x74, 0x20, 0x75, 0x74, 0x20, 0x6c, 0x61, 0x62,
+                      0x6f, 0x72, 0x65, 0x20, 0x65, 0x74, 0x20, 0x64,
+                      0x6f, 0x6c, 0x6f, 0x72, 0x65, 0x20, 0x6d, 0x61,
+                      0x67, 0x6e, 0x61, 0x20, 0x61, 0x6c, 0x69, 0x71,
+                      0x75, 0x61, 0x2e, 0x20, 0x55, 0x74, 0x20, 0x65,
+                      0x6e, 0x69, 0x6d, 0x20, 0x61, 0x64, 0x20, 0x6d,
+                      0x69, 0x6e, 0x69, 0x6d, 0x20, 0x76, 0x65, 0x6e,
+                      0x69, 0x61, 0x6d, 0x2c, 0x20, 0x71, 0x75, 0x69,
+                      0x73, 0x20, 0x6e, 0x6f, 0x73, 0x74, 0x72, 0x75,
+                      0x64, 0x20, 0x65, 0x78, 0x65, 0x72, 0x63, 0x69,
+                      0x74, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x20, 0x75,
+                      0x6c, 0x6c, 0x61, 0x6d, 0x63, 0x6f, 0x20, 0x6c,
+                      0x61, 0x62, 0x6f, 0x72, 0x69, 0x73, 0x20, 0x6e,
+                      0x69, 0x73, 0x69, 0x20, 0x75, 0x74, 0x20, 0x61,
+                      0x6c, 0x69, 0x71, 0x75, 0x69, 0x70, 0x20, 0x65,
+                      0x78, 0x20, 0x65, 0x61, 0x20, 0x63, 0x6f, 0x6d,
+                      0x6d, 0x6f, 0x64, 0x6f, 0x20, 0x63, 0x6f, 0x6e,
+                      0x73, 0x65, 0x71, 0x75, 0x61, 0x74, 0x2e, 0x20,
+                      0x44, 0x75, 0x69, 0x73, 0x20, 0x61, 0x75, 0x74,
+                      0x65, 0x20, 0x69, 0x72, 0x75, 0x72, 0x65, 0x20,
+                      0x64, 0x6f, 0x6c, 0x6f, 0x72, 0x20, 0x69, 0x6e,
+                      0x20, 0x72, 0x65, 0x70, 0x72, 0x65, 0x68, 0x65,
+                      0x6e, 0x64, 0x65, 0x72, 0x69, 0x74, 0x20, 0x69,
+                      0x6e, 0x20, 0x76, 0x6f, 0x6c, 0x75, 0x70, 0x74,
+                      0x61, 0x74, 0x65, 0x20, 0x76, 0x65, 0x6c, 0x69,
+                      0x74, 0x20, 0x65, 0x73, 0x73, 0x65, 0x20, 0x63,
+                      0x69, 0x6c, 0x6c, 0x75, 0x6d, 0x20, 0x64, 0x6f,
+                      0x6c, 0x6f, 0x72, 0x65, 0x20, 0x65, 0x75, 0x20,
+                      0x66, 0x75, 0x67, 0x69, 0x61, 0x74, 0x20, 0x6e,
+                      0x75, 0x6c, 0x6c, 0x61, 0x20, 0x70, 0x61, 0x72,
+                      0x69, 0x61, 0x74, 0x75, 0x72, 0x2e, 0x20, 0x45,
+                      0x78, 0x63, 0x65, 0x70, 0x74, 0x65, 0x75, 0x72,
+                      0x20, 0x73, 0x69, 0x6e, 0x74, 0x20, 0x6f, 0x63,
+                      0x63, 0x61, 0x65, 0x63, 0x61, 0x74, 0x20, 0x63,
+                      0x75, 0x70, 0x69, 0x64, 0x61, 0x74, 0x61, 0x74,
+                      0x20, 0x6e, 0x6f, 0x6e, 0x20, 0x70, 0x72, 0x6f,
+                      0x69, 0x64, 0x65, 0x6e, 0x74, 0x2c, 0x20, 0x73,
+                      0x75, 0x6e, 0x74, 0x20, 0x69, 0x6e, 0x20, 0x63,
+                      0x75, 0x6c, 0x70, 0x61, 0x20, 0x71, 0x75, 0x69,
+                      0x20, 0x6f, 0x66, 0x66, 0x69, 0x63, 0x69, 0x61,
+                      0x20, 0x64, 0x65, 0x73, 0x65, 0x72, 0x75, 0x6e,
+                      0x74, 0x20, 0x6d, 0x6f, 0x6c, 0x6c, 0x69, 0x74,
+                      0x20, 0x61, 0x6e, 0x69, 0x6d, 0x20, 0x69, 0x64,
+                      0x20, 0x65, 0x73, 0x74, 0x20, 0x6c, 0x61, 0x62,
+                      0x6f, 0x72, 0x75, 0x6d, 0x2e]]
+      ];
+
+      for (var i = 0; i < tests.length; ++i) {
+        var expected = tests[i][0];
+        var vector = tests[i][1];
+        expect(xxh32.hash(0, vector, 0, vector.length)).to.be.equal(expected);
+      }
+    });
+  });
+});
diff --git a/Builders codes/node_modules/lz4js/util.js b/Builders codes/node_modules/lz4js/util.js
new file mode 100644
index 00000000..80367948
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/util.js	
@@ -0,0 +1,54 @@
+// Simple hash function, from: http://burtleburtle.net/bob/hash/integer.html.
+// Chosen because it doesn't use multiply and achieves full avalanche.
+exports.hashU32 = function hashU32 (a) {
+  a = a | 0;
+  a = a + 2127912214 + (a << 12) | 0;
+  a = a ^ -949894596 ^ a >>> 19;
+  a = a + 374761393 + (a << 5) | 0;
+  a = a + -744332180 ^ a << 9;
+  a = a + -42973499 + (a << 3) | 0;
+  return a ^ -1252372727 ^ a >>> 16 | 0;
+};
+
+// Reads a 64-bit little-endian integer from an array.
+exports.readU64 = function readU64 (b, n) {
+  var x = 0;
+  x |= b[n++] << 0;
+  x |= b[n++] << 8;
+  x |= b[n++] << 16;
+  x |= b[n++] << 24;
+  x |= b[n++] << 32;
+  x |= b[n++] << 40;
+  x |= b[n++] << 48;
+  x |= b[n++] << 56;
+  return x;
+};
+
+// Reads a 32-bit little-endian integer from an array.
+exports.readU32 = function readU32 (b, n) {
+  var x = 0;
+  x |= b[n++] << 0;
+  x |= b[n++] << 8;
+  x |= b[n++] << 16;
+  x |= b[n++] << 24;
+  return x;
+};
+
+// Writes a 32-bit little-endian integer from an array.
+exports.writeU32 = function writeU32 (b, n, x) {
+  b[n++] = (x >> 0) & 0xff;
+  b[n++] = (x >> 8) & 0xff;
+  b[n++] = (x >> 16) & 0xff;
+  b[n++] = (x >> 24) & 0xff;
+};
+
+// Multiplies two numbers using 32-bit integer multiplication.
+// Algorithm from Emscripten.
+exports.imul = function imul (a, b) {
+  var ah = a >>> 16;
+  var al = a & 65535;
+  var bh = b >>> 16;
+  var bl = b & 65535;
+
+  return al * bl + (ah * bl + al * bh << 16) | 0;
+};
diff --git a/Builders codes/node_modules/lz4js/xxh32.js b/Builders codes/node_modules/lz4js/xxh32.js
new file mode 100644
index 00000000..0800f533
--- /dev/null
+++ b/Builders codes/node_modules/lz4js/xxh32.js	
@@ -0,0 +1,102 @@
+// xxh32.js - implementation of xxhash32 in plain JavaScript
+var util = require('./util.js');
+
+// xxhash32 primes
+var prime1 = 0x9e3779b1;
+var prime2 = 0x85ebca77;
+var prime3 = 0xc2b2ae3d;
+var prime4 = 0x27d4eb2f;
+var prime5 = 0x165667b1;
+
+// Utility functions/primitives
+// --
+
+function rotl32 (x, r) {
+  x = x | 0;
+  r = r | 0;
+
+  return x >>> (32 - r | 0) | x << r | 0;
+}
+
+function rotmul32 (h, r, m) {
+  h = h | 0;
+  r = r | 0;
+  m = m | 0;
+
+  return util.imul(h >>> (32 - r | 0) | h << r, m) | 0;
+}
+
+function shiftxor32 (h, s) {
+  h = h | 0;
+  s = s | 0;
+
+  return h >>> s ^ h | 0;
+}
+
+// Implementation
+// --
+
+function xxhapply (h, src, m0, s, m1) {
+  return rotmul32(util.imul(src, m0) + h, s, m1);
+}
+
+function xxh1 (h, src, index) {
+  return rotmul32((h + util.imul(src[index], prime5)), 11, prime1);
+}
+
+function xxh4 (h, src, index) {
+  return xxhapply(h, util.readU32(src, index), prime3, 17, prime4);
+}
+
+function xxh16 (h, src, index) {
+  return [
+    xxhapply(h[0], util.readU32(src, index + 0), prime2, 13, prime1),
+    xxhapply(h[1], util.readU32(src, index + 4), prime2, 13, prime1),
+    xxhapply(h[2], util.readU32(src, index + 8), prime2, 13, prime1),
+    xxhapply(h[3], util.readU32(src, index + 12), prime2, 13, prime1)
+  ];
+}
+
+function xxh32 (seed, src, index, len) {
+  var h, l;
+  l = len;
+  if (len >= 16) {
+    h = [
+      seed + prime1 + prime2,
+      seed + prime2,
+      seed,
+      seed - prime1
+    ];
+
+    while (len >= 16) {
+      h = xxh16(h, src, index);
+
+      index += 16;
+      len -= 16;
+    }
+
+    h = rotl32(h[0], 1) + rotl32(h[1], 7) + rotl32(h[2], 12) + rotl32(h[3], 18) + l;
+  } else {
+    h = (seed + prime5 + len) >>> 0;
+  }
+
+  while (len >= 4) {
+    h = xxh4(h, src, index);
+
+    index += 4;
+    len -= 4;
+  }
+
+  while (len > 0) {
+    h = xxh1(h, src, index);
+
+    index++;
+    len--;
+  }
+
+  h = shiftxor32(util.imul(shiftxor32(util.imul(shiftxor32(h, 15), prime2), 13), prime3), 16);
+
+  return h >>> 0;
+}
+
+exports.hash = xxh32;
diff --git a/Builders codes/package-lock.json b/Builders codes/package-lock.json
new file mode 100644
index 00000000..06693d0e
--- /dev/null
+++ b/Builders codes/package-lock.json	
@@ -0,0 +1,22 @@
+{
+  "name": "builder-codes-fetcher",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "builder-codes-fetcher",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "lz4js": "^0.2.0"
+      }
+    },
+    "node_modules/lz4js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/lz4js/-/lz4js-0.2.0.tgz",
+      "integrity": "sha512-gY2Ia9Lm7Ep8qMiuGRhvUq0Q7qUereeldZPP1PMEJxPtEWHJLqw9pgX68oHajBH0nzJK4MaZEA/YNV3jT8u8Bg==",
+      "license": "ISC"
+    }
+  }
+}
diff --git a/Builders codes/package.json b/Builders codes/package.json
new file mode 100644
index 00000000..41d7545a
--- /dev/null
+++ b/Builders codes/package.json	
@@ -0,0 +1,15 @@
+{
+  "name": "builder-codes-fetcher",
+  "version": "1.0.0",
+  "description": "Fetch builder codes",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "lz4js": "^0.2.0"
+  }
+}
diff --git a/Builders codes/verify_referrals.js b/Builders codes/verify_referrals.js
new file mode 100644
index 00000000..71926877
--- /dev/null
+++ b/Builders codes/verify_referrals.js	
@@ -0,0 +1,38 @@
+const https = require('https');
+
+const data = JSON.stringify({
+    type: "userFunding",
+    user: "0x5e1D081488a5e746c1a13Bf92103C1B9eE5962A2"
+});
+
+const options = {
+    hostname: 'api.hyperliquid.xyz',
+    port: 443,
+    path: '/info',
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': data.length
+    }
+};
+
+const req = https.request(options, (res) => {
+    let body = '';
+    res.on('data', (chunk) => body += chunk);
+    res.on('end', () => {
+        // console.log(body);
+        const parsed = JSON.parse(body);
+        console.log(formatOutput(parsed));
+    });
+});
+
+function formatOutput(data) {
+    return JSON.stringify(data, null, 2);
+}
+
+req.on('error', (error) => {
+    console.error(error);
+});
+
+req.write(data);
+req.end();
diff --git a/index.html b/index.html
index 687fb165..e824529c 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
     </script>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
diff --git a/package-lock.json b/package-lock.json
index 7f07e352..0b5c1c8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "name": "pillarx",
       "version": "1.0.0",
-      "hasInstallScript": true,
       "dependencies": {
         "@emotion/react": "11.11.4",
         "@emotion/styled": "11.11.5",
@@ -15,11 +14,13 @@
         "@etherspot/intent-sdk": "1.0.0-alpha.12",
         "@etherspot/modular-sdk": "6.1.1",
         "@etherspot/transaction-kit": "2.1.4",
+        "@hookform/resolvers": "^5.2.2",
         "@hypelab/sdk-react": "1.0.4",
         "@lifi/sdk": "3.6.8",
         "@mui/icons-material": "5.16.6",
         "@mui/joy": "5.0.0-beta.48",
         "@mui/material": "5.16.6",
+        "@nktkas/hyperliquid": "^0.30.2",
         "@privy-io/react-auth": "2.16.0",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-alert-dialog": "^1.1.14",
@@ -80,11 +81,13 @@
         "iconsax-react": "0.0.8",
         "identicon.js": "2.3.3",
         "input-otp": "^1.4.2",
+        "lightweight-charts": "^5.1.0",
         "lodash": "4.17.21",
         "lucide-react": "^0.462.0",
         "luxon": "3.5.0",
         "mime": "4.0.4",
         "moment": "2.30.1",
+        "next-themes": "^0.4.6",
         "patch-package": "8.0.0",
         "plausible-tracker": "0.3.9",
         "prop-types": "15.8.1",
@@ -119,7 +122,8 @@
         "viem": "2.37.1",
         "vite-plugin-svgr": "4.3.0",
         "wagmi": "2.14.16",
-        "webfontloader": "1.6.28"
+        "webfontloader": "1.6.28",
+        "zod": "^3.25.76"
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "7.21.11",
@@ -2591,9 +2595,9 @@
       }
     },
     "node_modules/@cloudflare/unenv-preset": {
-      "version": "2.7.13",
-      "resolved": "https://registry.npmjs.org/@cloudflare/unenv-preset/-/unenv-preset-2.7.13.tgz",
-      "integrity": "sha512-NulO1H8R/DzsJguLC0ndMuk4Ufv0KSlN+E54ay9rn9ZCQo0kpAPwwh3LhgpZ96a3Dr6L9LqW57M4CqC34iLOvw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/unenv-preset/-/unenv-preset-2.8.0.tgz",
+      "integrity": "sha512-oIAu6EdQ4zJuPwwKr9odIEqd8AV96z1aqi3RBEA4iKaJ+Vd3fvuI6m5EDC7/QCv+oaPIhy1SkYBYxmD09N+oZg==",
       "dev": true,
       "license": "MIT OR Apache-2.0",
       "peerDependencies": {
@@ -2607,9 +2611,9 @@
       }
     },
     "node_modules/@cloudflare/workerd-darwin-64": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-64/-/workerd-darwin-64-1.20251210.0.tgz",
-      "integrity": "sha512-Nn9X1moUDERA9xtFdCQ2XpQXgAS9pOjiCxvOT8sVx9UJLAiBLkfSCGbpsYdarODGybXCpjRlc77Yppuolvt7oQ==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-64/-/workerd-darwin-64-1.20260103.0.tgz",
+      "integrity": "sha512-jhpwADN14T+plfDt3ljYAJL2+nTdTJQ3I/OpedweOz1l2jYZITRD+EI0zUpOzGJRqCE1k5SCkHUXINsWaE6aKg==",
       "cpu": [
         "x64"
       ],
@@ -2624,9 +2628,9 @@
       }
     },
     "node_modules/@cloudflare/workerd-darwin-arm64": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-arm64/-/workerd-darwin-arm64-1.20251210.0.tgz",
-      "integrity": "sha512-Mg8iYIZQFnbevq/ls9eW/eneWTk/EE13Pej1MwfkY5et0jVpdHnvOLywy/o+QtMJFef1AjsqXGULwAneYyBfHw==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-darwin-arm64/-/workerd-darwin-arm64-1.20260103.0.tgz",
+      "integrity": "sha512-RoVMzq+TMoKTPr0aewwRasJumMqNYlBJuTC7ZwPAjfjuqedkLfvLx8GsXkW5zpyUMEsUciRh4DPJfDPKVgAy9g==",
       "cpu": [
         "arm64"
       ],
@@ -2641,9 +2645,9 @@
       }
     },
     "node_modules/@cloudflare/workerd-linux-64": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-64/-/workerd-linux-64-1.20251210.0.tgz",
-      "integrity": "sha512-kjC2fCZhZ2Gkm1biwk2qByAYpGguK5Gf5ic8owzSCUw0FOUfQxTZUT9Lp3gApxsfTLbbnLBrX/xzWjywH9QR4g==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-64/-/workerd-linux-64-1.20260103.0.tgz",
+      "integrity": "sha512-JQN4FnsTiBgtLF/9ABcgJjew+QxonE3ZxnqCT355x45mksJuArjD2iZ4kLZQ16OSEAkno8fmVw0VvljdGd41kg==",
       "cpu": [
         "x64"
       ],
@@ -2658,9 +2662,9 @@
       }
     },
     "node_modules/@cloudflare/workerd-linux-arm64": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-arm64/-/workerd-linux-arm64-1.20251210.0.tgz",
-      "integrity": "sha512-2IB37nXi7PZVQLa1OCuO7/6pNxqisRSO8DmCQ5x/3sezI5op1vwOxAcb1osAnuVsVN9bbvpw70HJvhKruFJTuA==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-linux-arm64/-/workerd-linux-arm64-1.20260103.0.tgz",
+      "integrity": "sha512-kjMHGrnnZrOyQnXuJ8YpblKtjkv45o+utIYk4AZUoaUBbEltwn7CXucDa0MG0jsDDvCCwRabdaJSAXHV6JB/ZQ==",
       "cpu": [
         "arm64"
       ],
@@ -2675,9 +2679,9 @@
       }
     },
     "node_modules/@cloudflare/workerd-windows-64": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-windows-64/-/workerd-windows-64-1.20251210.0.tgz",
-      "integrity": "sha512-Uaz6/9XE+D6E7pCY4OvkCuJHu7HcSDzeGcCGY1HLhojXhHd7yL52c3yfiyJdS8hPatiAa0nn5qSI/42+aTdDSw==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workerd-windows-64/-/workerd-windows-64-1.20260103.0.tgz",
+      "integrity": "sha512-M7mZHV6uWVE+Mf8r/nT6/21N1+Z4JmZTPJjek3rB4n7netOJGZIUQwyuY+5gwOnq+qJsqHoU/RP7b4lFSoMZuQ==",
       "cpu": [
         "x64"
       ],
@@ -6703,6 +6707,18 @@
         "react": ">= 16 || ^19.0.0-rc"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -9050,6 +9066,45 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/@nktkas/hyperliquid": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/@nktkas/hyperliquid/-/hyperliquid-0.30.2.tgz",
+      "integrity": "sha512-xz1/oGRunLxY1z1FOsCsXUFOWx8ADL3vL87pQkpl68gIxHT6Duf5z18uxFQWxlPPyB5PHYmpudlziJ6xVPB4Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nktkas/rews": "^1.2.3",
+        "@noble/hashes": "^2.0.1",
+        "micro-eth-signer": "^0.18.1",
+        "valibot": "1.2.0"
+      },
+      "bin": {
+        "hyperliquid": "esm/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@nktkas/hyperliquid/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@nktkas/rews": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@nktkas/rews/-/rews-1.2.3.tgz",
+      "integrity": "sha512-cpfcIlkUpYlbAI1cvfCTBCajWZfUM6gWyuCJXszECKxdetsU3vURKC8Sz//MDR6RWoULk9T48eJ+0agxT7yB1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@noble/ciphers": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
@@ -9427,21 +9482,21 @@
       "license": "MIT"
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit/-/appkit-1.8.15.tgz",
-      "integrity": "sha512-eO3lcZvXwkcBZqpV+7InlzbLddP/wIJjaqbzlyCJAb0PfQ6fY40etiVpK38eFEDX1WGEYOvhKVO6aMgZtaO2lg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit/-/appkit-1.8.16.tgz",
+      "integrity": "sha512-EleChIVOXa8qylNCcllByP+AYIoktDmPGfavi3Fn4eWWXoc4wlfL58NEiETbCyi1ZgUtaZUfIUiMvwgjJ4+mwQ==",
       "hasInstallScript": true,
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-pay": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@reown/appkit-scaffold-ui": "1.8.15",
-        "@reown/appkit-ui": "1.8.15",
-        "@reown/appkit-utils": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
-        "@walletconnect/universal-provider": "2.23.0",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-pay": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@reown/appkit-scaffold-ui": "1.8.16",
+        "@reown/appkit-ui": "1.8.16",
+        "@reown/appkit-utils": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
+        "@walletconnect/universal-provider": "2.23.1",
         "bs58": "6.0.0",
         "semver": "7.7.2",
         "valtio": "2.1.7",
@@ -9452,9 +9507,9 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-common": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.15.tgz",
-      "integrity": "sha512-swDeGli08KQWB2nkFB5a61IEAfaM5AeDwp5inzlsfW1lHOwS5uO052nacr6wQCCKEp9aWojdEScwnk3qiVFNjQ==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.16.tgz",
+      "integrity": "sha512-og7EkTEI+mxTEEK3cRoX2PJqgij/5t9CJeN/2dnOef8mEiNh0vAPmdzZPXw9v4oVeBsu14jb8n/Y7vIbTOwl6Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "big.js": "6.2.2",
@@ -9463,55 +9518,56 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-polyfills": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.15.tgz",
-      "integrity": "sha512-IDq57jf/a//meerJ7Zl7TG9jxpiQ3dJexv68SlzWWUow0DtDd0TMgykofUq5gzBLZBoFexbHyPZih/ylhScVPg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.16.tgz",
+      "integrity": "sha512-6ArFDoIbI/DHHCdOCSnh7THP4OvhG5XKKgXbCKSNOuj3/RPl3OmmoFJwwf+LvZJ4ggaz7I6qoXFHf8fEEx1FcQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "buffer": "6.0.3"
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-scaffold-ui": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-scaffold-ui/-/appkit-scaffold-ui-1.8.15.tgz",
-      "integrity": "sha512-fqsVbeoJfiTAAGYOkYzm3T//5HKgtX4gSa3GgYdw7nlJeEYEWtw59z3tZV2Wc0+ym+MhLQNsOBO+pllF6oBFgw==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-scaffold-ui/-/appkit-scaffold-ui-1.8.16.tgz",
+      "integrity": "sha512-OzTtxwLkE2RcJh4ai87DpXz1zM7twZOpFA6OKWVXPCe2BASLzXWtKmpW8XA6gpA54oEmG4PtoBW9ogv/Qd2e8Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-ui": "1.8.15",
-        "@reown/appkit-utils": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-pay": "1.8.16",
+        "@reown/appkit-ui": "1.8.16",
+        "@reown/appkit-utils": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
         "lit": "3.3.0"
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-ui": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-ui/-/appkit-ui-1.8.15.tgz",
-      "integrity": "sha512-TDyv3Sn1LMumfbibPjoA8fYs2jeIrgSLQf9aVk6Nc5jc3gYFWW7wrtU5l1SLSlDJR/w8/13GUQuVQNfaGSfj4A==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-ui/-/appkit-ui-1.8.16.tgz",
+      "integrity": "sha512-yd9BtyRUk6zAVQcc8W2t5qqXVHJUweiZ7y/tIeuaGDuG8zRWlWQTX6Q2ivBeLI2fZNix7Or90IpnlcdaOCo2Lw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@phosphor-icons/webcomponents": "2.1.5",
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
         "lit": "3.3.0",
         "qrcode": "1.5.3"
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-utils": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-utils/-/appkit-utils-1.8.15.tgz",
-      "integrity": "sha512-T5MEg7aZ4rOFsKfIQKe83dRPalLtQr6AlsWokZmJpN/bq/sOB8kUvNlOju7drsMAcoWRYSVnXFMYNBqNVymMBg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-utils/-/appkit-utils-1.8.16.tgz",
+      "integrity": "sha512-tCi2ZEOoOIGiddRAy9lJ1jnYj0zMnqEojIk095sWvnMdlNfn/lZdsLt62AGqk5khnlsyg2Zo0vszPBcXLH8/ww==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
         "@wallet-standard/wallet": "1.1.0",
-        "@walletconnect/logger": "3.0.0",
-        "@walletconnect/universal-provider": "2.23.0",
+        "@walletconnect/logger": "3.0.1",
+        "@walletconnect/universal-provider": "2.23.1",
         "valtio": "2.1.7",
         "viem": ">=2.37.9"
       },
@@ -9525,14 +9581,14 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@reown/appkit-wallet": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.15.tgz",
-      "integrity": "sha512-Ui6bfYU6ENDzR1dmKq3Oj+FhxKiFmLHFGTT915BWJrqOSqET4Kku4OIRLIqshzm8ohdsPTdyazZbaTRErYi3iA==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.16.tgz",
+      "integrity": "sha512-UARNgRtzTVojDv2wgILy7RKiYAXpFX9UE7qkficV4oB+IQX7yCPpa0eXN2mDXZBVSz2hSu4rLTa7WNXzZPal/A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@walletconnect/logger": "3.0.0",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@walletconnect/logger": "3.0.1",
         "zod": "3.22.4"
       }
     },
@@ -9571,16 +9627,10 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
-    "node_modules/@privy-io/react-auth/node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "license": "MIT"
-    },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/core": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.0.tgz",
-      "integrity": "sha512-W++xuXf+AsMPrBWn1It8GheIbCTp1ynTQP+aoFB86eUwyCtSiK7UQsn/+vJZdwElrn+Ptp2A0RqQx2onTMVHjQ==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.1.tgz",
+      "integrity": "sha512-fW48PIw41Q/LJW+q0msFogD/OcelkrrDONQMcpGw4C4Y6w+IvFKGEg+7dxGLKWx1g8QuHk/p6C9VEIV/tDsm5A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/heartbeat": "1.2.2",
@@ -9589,13 +9639,13 @@
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/jsonrpc-ws-connection": "1.0.16",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0",
@@ -9721,9 +9771,9 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/logger": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.0.tgz",
-      "integrity": "sha512-DDktPBFdmt5d7U3sbp4e3fQHNS1b6amsR8FmtOnt6L2SnV7VfcZr8VmAGL12zetAR+4fndegbREmX0P8Mw6eDg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.1.tgz",
+      "integrity": "sha512-O8lXGMZO1+e5NtHhBSjsAih/I9KC+1BxNhGNGD+SIWTqWd0zsbT5wJtNnJ+LnSXTRE7XZRxFUlvZgkER3vlhFA==",
       "license": "MIT",
       "dependencies": {
         "@walletconnect/safe-json": "^1.0.2",
@@ -9771,33 +9821,33 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/sign-client": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.0.tgz",
-      "integrity": "sha512-Nzf5x/LnQgC0Yjk0NmkT8kdrIMcScpALiFm9gP0n3CulL+dkf3HumqWzdoTmQSqGPxwHu/TNhGOaRKZLGQXSqw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.1.tgz",
+      "integrity": "sha512-x0sG8ZuuaOi3G/gYWLppf7nmNItWlV8Yga9Bltb46/Ve6G20nCBis6gcTVVeJOpnmqQ85FISwExqOYPmJ0FQlw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@walletconnect/core": "2.23.0",
+        "@walletconnect/core": "2.23.1",
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-utils": "1.0.8",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "events": "3.3.0"
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/types": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.0.tgz",
-      "integrity": "sha512-9ZEOJyx/kNVCRncDHh3Qr9eH7Ih1dXBFB4k1J8iEudkv3t4GhYpXhqIt2kNdQWluPb1BBB4wEuckAT96yKuA8g==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.1.tgz",
+      "integrity": "sha512-sbWOM9oCuzSbz/187rKWnSB3sy7FCFcbTQYeIJMc9+HTMTG2TUPftPCn8NnkfvmXbIeyLw00Y0KNvXoCV/eIeQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "events": "3.3.0"
       }
     },
@@ -9917,9 +9967,9 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/universal-provider": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.0.tgz",
-      "integrity": "sha512-3ZEqAsbtCbk+CV0ZLpy7Qzc04KXEnrW4zCboZ+gkkC0ey4H62x9h23kBOIrU9qew6orjA7D5gg0ikRC2Up1lbw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.1.tgz",
+      "integrity": "sha512-XlvG1clsL7Ds+g28Oz5dXsPA+5ERtQGYvd+L8cskMaTvtphGhipVGgX8WNAhp7p1gfNcDg4tCiTHlj131jctwA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
@@ -9928,10 +9978,10 @@
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
-        "@walletconnect/sign-client": "2.23.0",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/logger": "3.0.1",
+        "@walletconnect/sign-client": "2.23.1",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0"
       }
@@ -10052,9 +10102,9 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/@walletconnect/utils": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.0.tgz",
-      "integrity": "sha512-bVyv4Hl+/wVGueZ6rEO0eYgDy5deSBA4JjpJHAMOdaNoYs05NTE1HymV2lfPQQHuqc7suYexo9jwuW7i3JLuAA==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.1.tgz",
+      "integrity": "sha512-J12DadZHIL0KvsUoQuK0rag9jDUy8qu1zwz47xEHl03LrMcgrotQiXvdTQ3uHwAVA4yKLTQB/LEI2JiTIt7X8Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@msgpack/msgpack": "3.1.2",
@@ -10064,12 +10114,12 @@
         "@scure/base": "1.2.6",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
+        "@walletconnect/types": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "@walletconnect/window-metadata": "1.0.1",
         "blakejs": "1.2.1",
@@ -10266,12 +10316,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@privy-io/react-auth/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
-    },
     "node_modules/@privy-io/react-auth/node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -10534,19 +10578,19 @@
       }
     },
     "node_modules/@privy-io/react-auth/node_modules/styled-components": {
-      "version": "6.1.19",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
-      "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.2.0.tgz",
+      "integrity": "sha512-ryFCkETE++8jlrBmC+BoGPUN96ld1/Yp0s7t5bcXDobrs4XoXroY1tN+JbFi09hV6a5h3MzbcVi8/BGDP0eCgQ==",
       "license": "MIT",
       "dependencies": {
         "@emotion/is-prop-valid": "1.2.2",
         "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.5",
+        "@types/stylis": "4.2.7",
         "css-to-react-native": "3.2.0",
-        "csstype": "3.1.3",
+        "csstype": "3.2.3",
         "postcss": "8.4.49",
         "shallowequal": "1.1.0",
-        "stylis": "4.3.2",
+        "stylis": "4.3.6",
         "tslib": "2.6.2"
       },
       "engines": {
@@ -10561,12 +10605,6 @@
         "react-dom": ">= 16.8.0"
       }
     },
-    "node_modules/@privy-io/react-auth/node_modules/styled-components/node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
-      "license": "MIT"
-    },
     "node_modules/@privy-io/react-auth/node_modules/stylis": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -13023,22 +13061,22 @@
       }
     },
     "node_modules/@reown/appkit-controllers": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-controllers/-/appkit-controllers-1.8.15.tgz",
-      "integrity": "sha512-aCzA8yGQbicLRjU62is+viuVFl2dvpZVnLPG0/2eQbFkCZsawCldbFPfviiTuDsBx7o1pG90Q5rC6LgYoVWA0w==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-controllers/-/appkit-controllers-1.8.16.tgz",
+      "integrity": "sha512-GzhC+/AAYoyLYs/jJd7/D/tv7WCoB4wfv6VkpYcS+3NjL1orGqYnPIXiieiDEGwbfM8h08lmlCsEwOrEoIrchA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
-        "@walletconnect/universal-provider": "2.23.0",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
+        "@walletconnect/universal-provider": "2.23.1",
         "valtio": "2.1.7",
         "viem": ">=2.37.9"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@reown/appkit-common": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.15.tgz",
-      "integrity": "sha512-swDeGli08KQWB2nkFB5a61IEAfaM5AeDwp5inzlsfW1lHOwS5uO052nacr6wQCCKEp9aWojdEScwnk3qiVFNjQ==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.16.tgz",
+      "integrity": "sha512-og7EkTEI+mxTEEK3cRoX2PJqgij/5t9CJeN/2dnOef8mEiNh0vAPmdzZPXw9v4oVeBsu14jb8n/Y7vIbTOwl6Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "big.js": "6.2.2",
@@ -13047,30 +13085,30 @@
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@reown/appkit-polyfills": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.15.tgz",
-      "integrity": "sha512-IDq57jf/a//meerJ7Zl7TG9jxpiQ3dJexv68SlzWWUow0DtDd0TMgykofUq5gzBLZBoFexbHyPZih/ylhScVPg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.16.tgz",
+      "integrity": "sha512-6ArFDoIbI/DHHCdOCSnh7THP4OvhG5XKKgXbCKSNOuj3/RPl3OmmoFJwwf+LvZJ4ggaz7I6qoXFHf8fEEx1FcQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "buffer": "6.0.3"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@reown/appkit-wallet": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.15.tgz",
-      "integrity": "sha512-Ui6bfYU6ENDzR1dmKq3Oj+FhxKiFmLHFGTT915BWJrqOSqET4Kku4OIRLIqshzm8ohdsPTdyazZbaTRErYi3iA==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.16.tgz",
+      "integrity": "sha512-UARNgRtzTVojDv2wgILy7RKiYAXpFX9UE7qkficV4oB+IQX7yCPpa0eXN2mDXZBVSz2hSu4rLTa7WNXzZPal/A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@walletconnect/logger": "3.0.0",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@walletconnect/logger": "3.0.1",
         "zod": "3.22.4"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/core": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.0.tgz",
-      "integrity": "sha512-W++xuXf+AsMPrBWn1It8GheIbCTp1ynTQP+aoFB86eUwyCtSiK7UQsn/+vJZdwElrn+Ptp2A0RqQx2onTMVHjQ==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.1.tgz",
+      "integrity": "sha512-fW48PIw41Q/LJW+q0msFogD/OcelkrrDONQMcpGw4C4Y6w+IvFKGEg+7dxGLKWx1g8QuHk/p6C9VEIV/tDsm5A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/heartbeat": "1.2.2",
@@ -13079,13 +13117,13 @@
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/jsonrpc-ws-connection": "1.0.16",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0",
@@ -13115,9 +13153,9 @@
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/logger": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.0.tgz",
-      "integrity": "sha512-DDktPBFdmt5d7U3sbp4e3fQHNS1b6amsR8FmtOnt6L2SnV7VfcZr8VmAGL12zetAR+4fndegbREmX0P8Mw6eDg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.1.tgz",
+      "integrity": "sha512-O8lXGMZO1+e5NtHhBSjsAih/I9KC+1BxNhGNGD+SIWTqWd0zsbT5wJtNnJ+LnSXTRE7XZRxFUlvZgkER3vlhFA==",
       "license": "MIT",
       "dependencies": {
         "@walletconnect/safe-json": "^1.0.2",
@@ -13165,40 +13203,40 @@
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/sign-client": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.0.tgz",
-      "integrity": "sha512-Nzf5x/LnQgC0Yjk0NmkT8kdrIMcScpALiFm9gP0n3CulL+dkf3HumqWzdoTmQSqGPxwHu/TNhGOaRKZLGQXSqw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.1.tgz",
+      "integrity": "sha512-x0sG8ZuuaOi3G/gYWLppf7nmNItWlV8Yga9Bltb46/Ve6G20nCBis6gcTVVeJOpnmqQ85FISwExqOYPmJ0FQlw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@walletconnect/core": "2.23.0",
+        "@walletconnect/core": "2.23.1",
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-utils": "1.0.8",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/types": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.0.tgz",
-      "integrity": "sha512-9ZEOJyx/kNVCRncDHh3Qr9eH7Ih1dXBFB4k1J8iEudkv3t4GhYpXhqIt2kNdQWluPb1BBB4wEuckAT96yKuA8g==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.1.tgz",
+      "integrity": "sha512-sbWOM9oCuzSbz/187rKWnSB3sy7FCFcbTQYeIJMc9+HTMTG2TUPftPCn8NnkfvmXbIeyLw00Y0KNvXoCV/eIeQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/universal-provider": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.0.tgz",
-      "integrity": "sha512-3ZEqAsbtCbk+CV0ZLpy7Qzc04KXEnrW4zCboZ+gkkC0ey4H62x9h23kBOIrU9qew6orjA7D5gg0ikRC2Up1lbw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.1.tgz",
+      "integrity": "sha512-XlvG1clsL7Ds+g28Oz5dXsPA+5ERtQGYvd+L8cskMaTvtphGhipVGgX8WNAhp7p1gfNcDg4tCiTHlj131jctwA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
@@ -13207,18 +13245,18 @@
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
-        "@walletconnect/sign-client": "2.23.0",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/logger": "3.0.1",
+        "@walletconnect/sign-client": "2.23.1",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-controllers/node_modules/@walletconnect/utils": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.0.tgz",
-      "integrity": "sha512-bVyv4Hl+/wVGueZ6rEO0eYgDy5deSBA4JjpJHAMOdaNoYs05NTE1HymV2lfPQQHuqc7suYexo9jwuW7i3JLuAA==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.1.tgz",
+      "integrity": "sha512-J12DadZHIL0KvsUoQuK0rag9jDUy8qu1zwz47xEHl03LrMcgrotQiXvdTQ3uHwAVA4yKLTQB/LEI2JiTIt7X8Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@msgpack/msgpack": "3.1.2",
@@ -13228,12 +13266,12 @@
         "@scure/base": "1.2.6",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
+        "@walletconnect/types": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "@walletconnect/window-metadata": "1.0.1",
         "blakejs": "1.2.1",
@@ -13909,23 +13947,23 @@
       }
     },
     "node_modules/@reown/appkit-pay": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-pay/-/appkit-pay-1.8.15.tgz",
-      "integrity": "sha512-4byUi+/TBLFbwvgtBjT01zyLo5sAmn8bcOvOp+NpI0UMTWgl2oNbRLVSzPGak3YXBLxiDCdxhnbbA0wqWFPM0A==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-pay/-/appkit-pay-1.8.16.tgz",
+      "integrity": "sha512-V5M9SZnV00ogMeuQDwd0xY6Fa4+yU9NhmWISt0iiAGpNNtKdF+NWybWFbi2GkGjg4IvlJJBBgBlIZtmlZRq8SQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-ui": "1.8.15",
-        "@reown/appkit-utils": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-ui": "1.8.16",
+        "@reown/appkit-utils": "1.8.16",
         "lit": "3.3.0",
         "valtio": "2.1.7"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@reown/appkit-common": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.15.tgz",
-      "integrity": "sha512-swDeGli08KQWB2nkFB5a61IEAfaM5AeDwp5inzlsfW1lHOwS5uO052nacr6wQCCKEp9aWojdEScwnk3qiVFNjQ==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-common/-/appkit-common-1.8.16.tgz",
+      "integrity": "sha512-og7EkTEI+mxTEEK3cRoX2PJqgij/5t9CJeN/2dnOef8mEiNh0vAPmdzZPXw9v4oVeBsu14jb8n/Y7vIbTOwl6Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "big.js": "6.2.2",
@@ -13934,41 +13972,41 @@
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@reown/appkit-polyfills": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.15.tgz",
-      "integrity": "sha512-IDq57jf/a//meerJ7Zl7TG9jxpiQ3dJexv68SlzWWUow0DtDd0TMgykofUq5gzBLZBoFexbHyPZih/ylhScVPg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-polyfills/-/appkit-polyfills-1.8.16.tgz",
+      "integrity": "sha512-6ArFDoIbI/DHHCdOCSnh7THP4OvhG5XKKgXbCKSNOuj3/RPl3OmmoFJwwf+LvZJ4ggaz7I6qoXFHf8fEEx1FcQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "buffer": "6.0.3"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@reown/appkit-ui": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-ui/-/appkit-ui-1.8.15.tgz",
-      "integrity": "sha512-TDyv3Sn1LMumfbibPjoA8fYs2jeIrgSLQf9aVk6Nc5jc3gYFWW7wrtU5l1SLSlDJR/w8/13GUQuVQNfaGSfj4A==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-ui/-/appkit-ui-1.8.16.tgz",
+      "integrity": "sha512-yd9BtyRUk6zAVQcc8W2t5qqXVHJUweiZ7y/tIeuaGDuG8zRWlWQTX6Q2ivBeLI2fZNix7Or90IpnlcdaOCo2Lw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@phosphor-icons/webcomponents": "2.1.5",
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
         "lit": "3.3.0",
         "qrcode": "1.5.3"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@reown/appkit-utils": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-utils/-/appkit-utils-1.8.15.tgz",
-      "integrity": "sha512-T5MEg7aZ4rOFsKfIQKe83dRPalLtQr6AlsWokZmJpN/bq/sOB8kUvNlOju7drsMAcoWRYSVnXFMYNBqNVymMBg==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-utils/-/appkit-utils-1.8.16.tgz",
+      "integrity": "sha512-tCi2ZEOoOIGiddRAy9lJ1jnYj0zMnqEojIk095sWvnMdlNfn/lZdsLt62AGqk5khnlsyg2Zo0vszPBcXLH8/ww==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-controllers": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@reown/appkit-wallet": "1.8.15",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-controllers": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@reown/appkit-wallet": "1.8.16",
         "@wallet-standard/wallet": "1.1.0",
-        "@walletconnect/logger": "3.0.0",
-        "@walletconnect/universal-provider": "2.23.0",
+        "@walletconnect/logger": "3.0.1",
+        "@walletconnect/universal-provider": "2.23.1",
         "valtio": "2.1.7",
         "viem": ">=2.37.9"
       },
@@ -13982,14 +14020,14 @@
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@reown/appkit-wallet": {
-      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.15.tgz",
-      "integrity": "sha512-Ui6bfYU6ENDzR1dmKq3Oj+FhxKiFmLHFGTT915BWJrqOSqET4Kku4OIRLIqshzm8ohdsPTdyazZbaTRErYi3iA==",
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.8.16.tgz",
+      "integrity": "sha512-UARNgRtzTVojDv2wgILy7RKiYAXpFX9UE7qkficV4oB+IQX7yCPpa0eXN2mDXZBVSz2hSu4rLTa7WNXzZPal/A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@reown/appkit-common": "1.8.15",
-        "@reown/appkit-polyfills": "1.8.15",
-        "@walletconnect/logger": "3.0.0",
+        "@reown/appkit-common": "1.8.16",
+        "@reown/appkit-polyfills": "1.8.16",
+        "@walletconnect/logger": "3.0.1",
         "zod": "3.22.4"
       }
     },
@@ -14005,9 +14043,9 @@
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/core": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.0.tgz",
-      "integrity": "sha512-W++xuXf+AsMPrBWn1It8GheIbCTp1ynTQP+aoFB86eUwyCtSiK7UQsn/+vJZdwElrn+Ptp2A0RqQx2onTMVHjQ==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.23.1.tgz",
+      "integrity": "sha512-fW48PIw41Q/LJW+q0msFogD/OcelkrrDONQMcpGw4C4Y6w+IvFKGEg+7dxGLKWx1g8QuHk/p6C9VEIV/tDsm5A==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/heartbeat": "1.2.2",
@@ -14016,13 +14054,13 @@
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/jsonrpc-ws-connection": "1.0.16",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0",
@@ -14052,9 +14090,9 @@
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/logger": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.0.tgz",
-      "integrity": "sha512-DDktPBFdmt5d7U3sbp4e3fQHNS1b6amsR8FmtOnt6L2SnV7VfcZr8VmAGL12zetAR+4fndegbREmX0P8Mw6eDg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-3.0.1.tgz",
+      "integrity": "sha512-O8lXGMZO1+e5NtHhBSjsAih/I9KC+1BxNhGNGD+SIWTqWd0zsbT5wJtNnJ+LnSXTRE7XZRxFUlvZgkER3vlhFA==",
       "license": "MIT",
       "dependencies": {
         "@walletconnect/safe-json": "^1.0.2",
@@ -14102,40 +14140,40 @@
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/sign-client": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.0.tgz",
-      "integrity": "sha512-Nzf5x/LnQgC0Yjk0NmkT8kdrIMcScpALiFm9gP0n3CulL+dkf3HumqWzdoTmQSqGPxwHu/TNhGOaRKZLGQXSqw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.23.1.tgz",
+      "integrity": "sha512-x0sG8ZuuaOi3G/gYWLppf7nmNItWlV8Yga9Bltb46/Ve6G20nCBis6gcTVVeJOpnmqQ85FISwExqOYPmJ0FQlw==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "@walletconnect/core": "2.23.0",
+        "@walletconnect/core": "2.23.1",
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-utils": "1.0.8",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/types": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.0.tgz",
-      "integrity": "sha512-9ZEOJyx/kNVCRncDHh3Qr9eH7Ih1dXBFB4k1J8iEudkv3t4GhYpXhqIt2kNdQWluPb1BBB4wEuckAT96yKuA8g==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.23.1.tgz",
+      "integrity": "sha512-sbWOM9oCuzSbz/187rKWnSB3sy7FCFcbTQYeIJMc9+HTMTG2TUPftPCn8NnkfvmXbIeyLw00Y0KNvXoCV/eIeQ==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
         "@walletconnect/heartbeat": "1.2.2",
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/universal-provider": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.0.tgz",
-      "integrity": "sha512-3ZEqAsbtCbk+CV0ZLpy7Qzc04KXEnrW4zCboZ+gkkC0ey4H62x9h23kBOIrU9qew6orjA7D5gg0ikRC2Up1lbw==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.23.1.tgz",
+      "integrity": "sha512-XlvG1clsL7Ds+g28Oz5dXsPA+5ERtQGYvd+L8cskMaTvtphGhipVGgX8WNAhp7p1gfNcDg4tCiTHlj131jctwA==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@walletconnect/events": "1.0.1",
@@ -14144,18 +14182,18 @@
         "@walletconnect/jsonrpc-types": "1.0.4",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
-        "@walletconnect/sign-client": "2.23.0",
-        "@walletconnect/types": "2.23.0",
-        "@walletconnect/utils": "2.23.0",
+        "@walletconnect/logger": "3.0.1",
+        "@walletconnect/sign-client": "2.23.1",
+        "@walletconnect/types": "2.23.1",
+        "@walletconnect/utils": "2.23.1",
         "es-toolkit": "1.39.3",
         "events": "3.3.0"
       }
     },
     "node_modules/@reown/appkit-pay/node_modules/@walletconnect/utils": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.0.tgz",
-      "integrity": "sha512-bVyv4Hl+/wVGueZ6rEO0eYgDy5deSBA4JjpJHAMOdaNoYs05NTE1HymV2lfPQQHuqc7suYexo9jwuW7i3JLuAA==",
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.23.1.tgz",
+      "integrity": "sha512-J12DadZHIL0KvsUoQuK0rag9jDUy8qu1zwz47xEHl03LrMcgrotQiXvdTQ3uHwAVA4yKLTQB/LEI2JiTIt7X8Q==",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@msgpack/msgpack": "3.1.2",
@@ -14165,12 +14203,12 @@
         "@scure/base": "1.2.6",
         "@walletconnect/jsonrpc-utils": "1.0.8",
         "@walletconnect/keyvaluestorage": "1.1.1",
-        "@walletconnect/logger": "3.0.0",
+        "@walletconnect/logger": "3.0.1",
         "@walletconnect/relay-api": "1.0.11",
         "@walletconnect/relay-auth": "1.1.0",
         "@walletconnect/safe-json": "1.0.2",
         "@walletconnect/time": "1.0.2",
-        "@walletconnect/types": "2.23.0",
+        "@walletconnect/types": "2.23.1",
         "@walletconnect/window-getters": "1.0.1",
         "@walletconnect/window-metadata": "1.0.1",
         "blakejs": "1.2.1",
@@ -18486,9 +18524,9 @@
       }
     },
     "node_modules/@solana/rpc-transport-http/node_modules/undici-types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.17.0.tgz",
-      "integrity": "sha512-aCt4oiOwwDSB1SBIKNLuUghX8LHAZvY6qMaM0e8mifQpxbfqIUvCTF3W0M0wqM0s51opMMfni9999DzdWbaSLw==",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
       "license": "MIT",
       "optional": true
     },
@@ -19321,6 +19359,12 @@
         "@stablelib/wipe": "^1.0.1"
       }
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -19649,12 +19693,12 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.13.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.16.tgz",
-      "integrity": "sha512-y4xLKvLu6UZWiGdNcgk3yYlzCznYIV0m8dSyUzr3eAC0dHLos5V74qhUHxutYddFGgGU8sWLkp6H5c2RCrsrXw==",
+      "version": "3.13.17",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.17.tgz",
+      "integrity": "sha512-gtjQr4CIb86rq03AL4WJnlTaaTU5UU4Xt8tbG1HU3OWVsO4z5OrRKTRDKoWRbkLEPpbPIjPgCoxmV70jTJtWZQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/virtual-core": "3.13.16"
+        "@tanstack/virtual-core": "3.13.17"
       },
       "funding": {
         "type": "github",
@@ -19666,9 +19710,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.13.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.16.tgz",
-      "integrity": "sha512-njazUC8mDkrxWmyZmn/3eXrDcP8Msb3chSr4q6a65RmwdSbMlMCdnOphv6/8mLO7O3Fuza5s4M4DclmvAO5w0w==",
+      "version": "3.13.17",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.17.tgz",
+      "integrity": "sha512-m5mRfGNcL5GUzluWNom0Rmg8P8Dg3h6PnJtJBmJcBiJvkV+vufmUfLnVzKSPGQtmvzMW/ZuUdvL+SyjIUvHV3A==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -20603,9 +20647,9 @@
       "license": "MIT"
     },
     "node_modules/@types/ws": {
-      "version": "7.4.7",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
-      "integrity": "sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==",
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -24413,9 +24457,9 @@
       "license": "MIT"
     },
     "node_modules/axe-core": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
-      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.1.tgz",
+      "integrity": "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -24812,9 +24856,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.11",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
-      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "version": "2.9.12",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.12.tgz",
+      "integrity": "sha512-Mij6Lij93pTAIsSYy5cyBQ975Qh9uLEc5rwGTpomiZeXZL9yIS6uORJakb3ScHgfs0serMMfIbXzokPMuEiRyw==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -25011,6 +25055,20 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/bitcoinjs-lib/node_modules/valibot": {
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-0.38.0.tgz",
+      "integrity": "sha512-RCJa0fetnzp+h+KN9BdgYOgtsMAG9bfoJ9JSjIhFHobKWVWyzM3jjaeNTdpFK9tQtf3q1sguXeERJ/LcmdFE7w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/blake3-wasm": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/blake3-wasm/-/blake3-wasm-2.1.5.tgz",
@@ -25177,6 +25235,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
       "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -30937,6 +30996,12 @@
         "node": "> 0.1.90"
       }
     },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-copy": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
@@ -31760,13 +31825,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.28",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.28.tgz",
-      "integrity": "sha512-AXLnVEC/HHWp6Va1l9xl6cIM4SgdZAmgPLGy/h9w07NOxg0njva/A+3uBE3QUQ3uooi8c8c8HPn/8Md9ol0glg==",
+      "version": "12.24.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.24.10.tgz",
+      "integrity": "sha512-8yoyMkCn2RmV9UB9mfmMuzKyenQe909hRQRl0yGBhbZJjZZ9bSU87NIGAruqCXCuTNCA0qHw2LWLrcXLL9GF6A==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.28",
-        "motion-utils": "^12.23.28",
+        "motion-dom": "^12.24.10",
+        "motion-utils": "^12.24.10",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -33049,7 +33114,9 @@
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "license": "ISC"
+      "dev": true,
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/input-otp": {
       "version": "1.4.2",
@@ -33992,6 +34059,15 @@
       "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==",
       "license": "MIT"
     },
+    "node_modules/jayson/node_modules/@types/ws": {
+      "version": "7.4.7",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
+      "integrity": "sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/jayson/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -36327,6 +36403,15 @@
       "integrity": "sha512-r9kw4OA6oDO4dPXkOrXTkArQAafIKAU71hChInV4FxZ69dxCfbwQGDPzqR5/vea94wU705/3AZroEbSoeVWrQw==",
       "license": "MIT"
     },
+    "node_modules/lightweight-charts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.1.0.tgz",
+      "integrity": "sha512-jEAYR4ODYeyNZcWUigsoLTl52rbPmgXnvd5FLIv/ZoA/2sSDw63YKnef8n4yhzum7W926yHeFwlm7ididKb7YQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -36777,12 +36862,77 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micro-eth-signer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/micro-eth-signer/-/micro-eth-signer-0.18.1.tgz",
+      "integrity": "sha512-vXKhCZxrytpl+dXR9JeaE41ZVFndi7wCKc1Jd22smOMAeDErvRcXaTxhYUf1yQxis4n2kIdv/pH7iuf+5/cj+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/curves": "^2.0.0",
+        "@noble/hashes": "^2.0.0",
+        "micro-packed": "^0.8.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      }
+    },
+    "node_modules/micro-eth-signer/node_modules/@noble/curves": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-2.0.1.tgz",
+      "integrity": "sha512-vs1Az2OOTBiP4q0pwjW5aF0xp9n4MxVrmkFBxc6EKZc6ddYx5gaZiAsZoq0uRRXWbi3AT/sBqn05eRPtn1JCPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/micro-eth-signer/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/micro-ftch": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz",
       "integrity": "sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==",
       "license": "MIT"
     },
+    "node_modules/micro-packed": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/micro-packed/-/micro-packed-0.8.0.tgz",
+      "integrity": "sha512-AKb8znIvg9sooythbXzyFeChEY0SkW0C6iXECpy/ls0e5BtwXO45J9wD9SLzBztnS4XmF/5kwZknsq+jyynd/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@scure/base": "2.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/micro-packed/node_modules/@scure/base": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@scure/base/-/base-2.0.0.tgz",
+      "integrity": "sha512-3E1kpuZginKkek01ovG8krQ0Z44E3DHPjc5S2rjJw9lZn3KSQOs8S7wqikF/AH7iRanHypj85uGyxk0XAyC37w==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -36965,9 +37115,9 @@
       }
     },
     "node_modules/miniflare": {
-      "version": "4.20251210.0",
-      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-4.20251210.0.tgz",
-      "integrity": "sha512-k6kIoXwGVqlPZb0hcn+X7BmnK+8BjIIkusQPY22kCo2RaQJ/LzAjtxHQdGXerlHSnJyQivDQsL6BJHMpQfUFyw==",
+      "version": "4.20260103.0",
+      "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-4.20260103.0.tgz",
+      "integrity": "sha512-iuSU0e+KMuFD7gxuPKoJXFi6cvDu/w/lQP4Wayq3v+YsmZ0dVMAJY9LMZ0TKMLicdAj2So9WcReAhJmJJ9Ppnw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -36979,10 +37129,10 @@
         "sharp": "^0.33.5",
         "stoppable": "1.1.0",
         "undici": "7.14.0",
-        "workerd": "1.20251210.0",
+        "workerd": "1.20260103.0",
         "ws": "8.18.0",
         "youch": "4.1.0-beta.10",
-        "zod": "3.22.3"
+        "zod": "^3.25.76"
       },
       "bin": {
         "miniflare": "bootstrap.js"
@@ -37037,16 +37187,6 @@
         "node": ">=20.18.1"
       }
     },
-    "node_modules/miniflare/node_modules/zod": {
-      "version": "3.22.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
-      "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -37063,6 +37203,7 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -37087,6 +37228,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -37162,18 +37304,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.23.28",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.28.tgz",
-      "integrity": "sha512-XxQ0QDS7nXjug1Q4Z7hwD1DPDM+zJvgteSlQABse1N4F22q6wRLLjBEeMelvJrZNPp9UeS4Q3AVpWzWBLHLmew==",
+      "version": "12.24.10",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.24.10.tgz",
+      "integrity": "sha512-H3HStYaJ6wANoZVNT0ZmYZHGvrpvi9pKJRzsgNEHkdITR4Qd9FFu2e9sH4e2Phr4tKCmyyloex6SOSmv0Tlq+g==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.23.28"
+        "motion-utils": "^12.24.10"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.23.28",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.28.tgz",
-      "integrity": "sha512-0W6cWd5Okoyf8jmessVK3spOmbyE0yTdNKujHctHH9XdAE4QDuZ1/LjSXC68rrhsJU+TkzXURC5OdSWh9ibOwQ==",
+      "version": "12.24.10",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.24.10.tgz",
+      "integrity": "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -37267,6 +37409,16 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -42802,9 +42954,9 @@
       "license": "MIT"
     },
     "node_modules/preact": {
-      "version": "10.28.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.1.tgz",
-      "integrity": "sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==",
+      "version": "10.28.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.2.tgz",
+      "integrity": "sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -43104,209 +43256,6 @@
         "teleport": ">=0.2.0"
       }
     },
-    "node_modules/qrcode": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
-      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "dijkstrajs": "^1.0.1",
-        "pngjs": "^5.0.0",
-        "yargs": "^15.3.1"
-      },
-      "bin": {
-        "qrcode": "bin/qrcode"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/qrcode/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "extraneous": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/qrcode/node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "extraneous": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "extraneous": true,
-      "license": "MIT"
-    },
-    "node_modules/qrcode/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "extraneous": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "extraneous": true,
-      "license": "ISC"
-    },
-    "node_modules/qrcode/node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "extraneous": true,
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/qs": {
       "version": "6.12.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
@@ -43866,18 +43815,6 @@
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
       "license": "MIT"
     },
-    "node_modules/react-loader-spinner/node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "license": "MIT"
-    },
-    "node_modules/react-loader-spinner/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
-    },
     "node_modules/react-loader-spinner/node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
@@ -43907,19 +43844,19 @@
       }
     },
     "node_modules/react-loader-spinner/node_modules/styled-components": {
-      "version": "6.1.19",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
-      "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.2.0.tgz",
+      "integrity": "sha512-ryFCkETE++8jlrBmC+BoGPUN96ld1/Yp0s7t5bcXDobrs4XoXroY1tN+JbFi09hV6a5h3MzbcVi8/BGDP0eCgQ==",
       "license": "MIT",
       "dependencies": {
         "@emotion/is-prop-valid": "1.2.2",
         "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.5",
+        "@types/stylis": "4.2.7",
         "css-to-react-native": "3.2.0",
-        "csstype": "3.1.3",
+        "csstype": "3.2.3",
         "postcss": "8.4.49",
         "shallowequal": "1.1.0",
-        "stylis": "4.3.2",
+        "stylis": "4.3.6",
         "tslib": "2.6.2"
       },
       "engines": {
@@ -43935,9 +43872,9 @@
       }
     },
     "node_modules/react-loader-spinner/node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
     "node_modules/react-redux": {
@@ -45255,15 +45192,6 @@
         "utf-8-validate": "^5.0.2"
       }
     },
-    "node_modules/rpc-websockets/node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/rpc-websockets/node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -46027,7 +45955,9 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "license": "ISC"
+      "dev": true,
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/simple-swizzle": {
       "version": "0.2.4",
@@ -48390,7 +48320,9 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "is-typedarray": "^1.0.0"
       }
@@ -48528,9 +48460,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
-      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.2.tgz",
+      "integrity": "sha512-heMioaxBcG9+Znsda5Q8sQbWnLJSl98AFDXTO80wELWEzX3hordXsTdxrIfMQoO9IY1MEnoGoPjpoKpMj+Yx0Q==",
       "license": "MIT"
     },
     "node_modules/uglify-js": {
@@ -48982,9 +48914,9 @@
       }
     },
     "node_modules/valibot": {
-      "version": "0.38.0",
-      "resolved": "https://registry.npmjs.org/valibot/-/valibot-0.38.0.tgz",
-      "integrity": "sha512-RCJa0fetnzp+h+KN9BdgYOgtsMAG9bfoJ9JSjIhFHobKWVWyzM3jjaeNTdpFK9tQtf3q1sguXeERJ/LcmdFE7w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.2.0.tgz",
+      "integrity": "sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==",
       "license": "MIT",
       "peerDependencies": {
         "typescript": ">=5"
@@ -50514,17 +50446,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -51578,9 +51499,9 @@
       }
     },
     "node_modules/workerd": {
-      "version": "1.20251210.0",
-      "resolved": "https://registry.npmjs.org/workerd/-/workerd-1.20251210.0.tgz",
-      "integrity": "sha512-9MUUneP1BnRE9XAYi94FXxHmiLGbO75EHQZsgWqSiOXjoXSqJCw8aQbIEPxCy19TclEl/kHUFYce8ST2W+Qpjw==",
+      "version": "1.20260103.0",
+      "resolved": "https://registry.npmjs.org/workerd/-/workerd-1.20260103.0.tgz",
+      "integrity": "sha512-uB5eliFHVCdPD3uaPGe6zNRFjWzijOb26c0/1oXKmQFUSUR7GFPCTTd0iJXZAGKZDZ0DNgzQCPoolWelz6W5Zg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
@@ -51591,28 +51512,28 @@
         "node": ">=16"
       },
       "optionalDependencies": {
-        "@cloudflare/workerd-darwin-64": "1.20251210.0",
-        "@cloudflare/workerd-darwin-arm64": "1.20251210.0",
-        "@cloudflare/workerd-linux-64": "1.20251210.0",
-        "@cloudflare/workerd-linux-arm64": "1.20251210.0",
-        "@cloudflare/workerd-windows-64": "1.20251210.0"
+        "@cloudflare/workerd-darwin-64": "1.20260103.0",
+        "@cloudflare/workerd-darwin-arm64": "1.20260103.0",
+        "@cloudflare/workerd-linux-64": "1.20260103.0",
+        "@cloudflare/workerd-linux-arm64": "1.20260103.0",
+        "@cloudflare/workerd-windows-64": "1.20260103.0"
       }
     },
     "node_modules/wrangler": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/wrangler/-/wrangler-4.54.0.tgz",
-      "integrity": "sha512-bANFsjDwJLbprYoBK+hUDZsVbUv2SqJd8QvArLIcZk+fPq4h/Ohtj5vkKXD3k0s2bD1DXLk08D+hYmeNH+xC6A==",
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/wrangler/-/wrangler-4.57.0.tgz",
+      "integrity": "sha512-JTVHmL2zr5PUJ22kT21fNXZBgVm4WzXSHsVc+VVIRANBVgTwn6EikXBx1DMyvHDQP6vkaojuyrRjeasB7rxV9A==",
       "dev": true,
       "license": "MIT OR Apache-2.0",
       "dependencies": {
         "@cloudflare/kv-asset-handler": "0.4.1",
-        "@cloudflare/unenv-preset": "2.7.13",
+        "@cloudflare/unenv-preset": "2.8.0",
         "blake3-wasm": "2.1.5",
         "esbuild": "0.27.0",
-        "miniflare": "4.20251210.0",
+        "miniflare": "4.20260103.0",
         "path-to-regexp": "6.3.0",
         "unenv": "2.0.0-rc.24",
-        "workerd": "1.20251210.0"
+        "workerd": "1.20260103.0"
       },
       "bin": {
         "wrangler": "bin/wrangler.js",
@@ -51625,7 +51546,7 @@
         "fsevents": "~2.3.2"
       },
       "peerDependencies": {
-        "@cloudflare/workers-types": "^4.20251210.0"
+        "@cloudflare/workers-types": "^4.20260103.0"
       },
       "peerDependenciesMeta": {
         "@cloudflare/workers-types": {
@@ -52262,7 +52183,9 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
       "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "is-typedarray": "^1.0.0",
diff --git a/package.json b/package.json
index b022c866..38473dde 100644
--- a/package.json
+++ b/package.json
@@ -2,17 +2,17 @@
   "name": "pillarx",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "dev:functions": "wrangler pages dev build --port 5173 --live-reload",
-    "build": "VITE_COMMIT_SHA=$CF_PAGES_COMMIT_SHA VITE_VERSION=$npm_package_version vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=8192' VITE_COMMIT_SHA=$CF_PAGES_COMMIT_SHA VITE_VERSION=$npm_package_version vite build",
     "preview": "vite preview",
     "test": "vitest",
     "test:watch": "eslint . && vitest",
     "test:update": "vitest -u",
     "test:ci": "vitest run --coverage",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org pillar-project --project x ./build && sentry-cli sourcemaps upload --org pillar-project --project x ./build",
-    "postinstall": "patch-package",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
@@ -24,11 +24,13 @@
     "@etherspot/intent-sdk": "1.0.0-alpha.12",
     "@etherspot/modular-sdk": "6.1.1",
     "@etherspot/transaction-kit": "2.1.4",
+    "@hookform/resolvers": "^5.2.2",
     "@hypelab/sdk-react": "1.0.4",
     "@lifi/sdk": "3.6.8",
     "@mui/icons-material": "5.16.6",
     "@mui/joy": "5.0.0-beta.48",
     "@mui/material": "5.16.6",
+    "@nktkas/hyperliquid": "^0.30.2",
     "@privy-io/react-auth": "2.16.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
@@ -89,11 +91,13 @@
     "iconsax-react": "0.0.8",
     "identicon.js": "2.3.3",
     "input-otp": "^1.4.2",
+    "lightweight-charts": "^5.1.0",
     "lodash": "4.17.21",
     "lucide-react": "^0.462.0",
     "luxon": "3.5.0",
     "mime": "4.0.4",
     "moment": "2.30.1",
+    "next-themes": "^0.4.6",
     "patch-package": "8.0.0",
     "plausible-tracker": "0.3.9",
     "prop-types": "15.8.1",
@@ -128,7 +132,8 @@
     "viem": "2.37.1",
     "vite-plugin-svgr": "4.3.0",
     "wagmi": "2.14.16",
-    "webfontloader": "1.6.28"
+    "webfontloader": "1.6.28",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
@@ -212,4 +217,4 @@
   "resolutions": {
     "styled-components": "6.1.1"
   }
-}
+}
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
index 9f239969..2aa7205d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-undef
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/src/apps/perps/App.css b/src/apps/perps/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/src/apps/perps/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/apps/perps/components/AgentControls.tsx b/src/apps/perps/components/AgentControls.tsx
new file mode 100644
index 00000000..74627992
--- /dev/null
+++ b/src/apps/perps/components/AgentControls.tsx
@@ -0,0 +1,1248 @@
+import { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Badge } from './ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './ui/collapsible';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import {
+  Shield,
+  CheckCircle2,
+  AlertCircle,
+  Copy,
+  Download,
+  Upload,
+  Trash2,
+  Settings,
+  Lock,
+  ChevronDown,
+  Loader2,
+} from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
+import { toast } from 'sonner';
+import { createWalletClient, custom } from 'viem';
+import { arbitrum } from 'viem/chains';
+import useTransactionKit from '../../../hooks/useTransactionKit';
+import { useHyperliquid } from '../hooks/useHyperliquid';
+import { privateKeyToAccount } from 'viem/accounts';
+import type { Hex } from 'viem';
+import { generateAgentWallet } from '../lib/hyperliquid/signing';
+import {
+  buildApproveAgentAction,
+  getApproveAgentTypedData,
+} from '../lib/hyperliquid/signing';
+import { postExchange } from '../lib/hyperliquid/client';
+import { ValidationStatus } from './ValidationStatus';
+import { DepositModal } from './DepositModal';
+import type { UserState } from '../lib/hyperliquid/types';
+import { PinSetupModal } from './PinSetupModal';
+import { UnlockWalletModal } from './UnlockWalletModal';
+import { PrivateKeyModal } from './PrivateKeyModal';
+import { useIsMobile } from '../hooks/use-mobile';
+
+import {
+  storeAgentWallet,
+  updateAgentApproval,
+  updateBuilderApproval,
+  clearAgentWallet,
+  storeAgentWalletEncrypted,
+  unlockAgentWallet,
+  getAgentWallet,
+  getAgentAddress,
+  isAgentWalletEncrypted,
+  isImportedAccountEncrypted,
+  getImportedAccountAddress,
+  getImportedAccount,
+  clearImportedAccount,
+  unlockImportedAccount,
+  storeImportedAccountEncrypted,
+} from '../lib/hyperliquid/keystore';
+import { cn } from '../lib/utils';
+
+type AgentStatus = 'none' | 'created' | 'approved' | 'locked' | 'builder_approval_pending';
+
+interface AgentControlsProps {
+  onStatusChange?: () => void;
+  onAgentAddressChange?: (address: string | null) => void;
+  userState?: UserState;
+  ethPrice?: number;
+}
+
+// Add 'unlock' to revealMode type
+type RevealMode = 'copy' | 'download' | 'unlock';
+
+export function AgentControls({
+  onStatusChange,
+  onAgentAddressChange,
+  userState,
+  ethPrice,
+}: AgentControlsProps) {
+  const { walletProvider } = useTransactionKit();
+  const { address } = useHyperliquid();
+  // Removed useWalletClient from wagmi
+
+  // Calculate master balance for conditional logic
+  const masterBalance = userState?.marginSummary?.accountValue
+    ? parseFloat(userState.marginSummary.accountValue)
+    : 0;
+  const [agentStatus, setAgentStatus] = useState<AgentStatus>('none');
+  const [agentAddress, setAgentAddress] = useState<string>('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [isApproving, setIsApproving] = useState(false);
+  const [isLoadingAgent, setIsLoadingAgent] = useState(false);
+  const [agentPrivateKey, setAgentPrivateKey] = useState<string>('');
+  const [showImportDialog, setShowImportDialog] = useState(false);
+  const [importPrivateKey, setImportPrivateKey] = useState('');
+  const [importAccountAddress, setImportAccountAddress] = useState('');
+  const [isRemoving, setIsRemoving] = useState(false);
+  const isMobile = useIsMobile();
+  const [isOpen, setIsOpen] = useState(true);
+
+  useEffect(() => {
+    if (isMobile) {
+      if (agentStatus === 'approved') {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    } else {
+      setIsOpen(true);
+    }
+  }, [isMobile, agentStatus]);
+
+  const [validationStatus, setValidationStatus] = useState<
+    'idle' | 'validating' | 'success' | 'error'
+  >('idle');
+  const [validationData, setValidationData] = useState<{
+    agentAddress?: string;
+    balance?: string;
+    openPositions?: number;
+    errorMessage?: string;
+  }>({});
+
+  // PIN & Encryption State
+  const [showPinSetup, setShowPinSetup] = useState(false);
+  const [showUnlockReveal, setShowUnlockReveal] = useState(false);
+  const [revealMode, setRevealMode] = useState<'unlock' | 'reveal'>('unlock'); // 'unlock' = just unlock, 'reveal' = show key
+  const [pendingImportData, setPendingImportData] = useState<{
+    address: string;
+    privateKey: Hex;
+    accountState?: any;
+  } | null>(null);
+
+  const [privateKeyModalState, setPrivateKeyModalState] = useState<{
+    isOpen: boolean;
+    address: string;
+    privateKey: string;
+    mode: 'created' | 'revealed';
+  }>({
+    isOpen: false,
+    address: '',
+    privateKey: '',
+    mode: 'created',
+  });
+
+  // Check status on mount / address change
+  useEffect(() => {
+    const checkStatus = async () => {
+      // Priority 1: Check for unlocked imported account (memory/cache)
+      // We check this FIRST so that if we just created/unlocked it, we don't force a re-unlock.
+      const imported = getImportedAccount();
+
+      if (imported) {
+        setAgentAddress(imported.accountAddress);
+        setAgentPrivateKey(imported.privateKey);
+        setAgentStatus('approved');
+        return;
+      }
+
+      // Priority 2: Check for GLOBAL imported account (locked)
+      const isEncrypted = isImportedAccountEncrypted();
+
+      if (isEncrypted) {
+        const addr = getImportedAccountAddress();
+        if (addr) {
+          setAgentAddress(addr);
+          setAgentStatus('locked');
+          // Auto-prompt check
+          setRevealMode('unlock');
+          setShowUnlockReveal(true);
+          return;
+        }
+      }
+
+      // Priority 3: Check for agent wallet (if connected wallet exists)
+      if (!address) {
+        setAgentStatus('none');
+        return;
+      }
+
+      // 3a. Try to get unlocked agent wallet
+      const wallet = await getAgentWallet(address);
+      if (wallet) {
+        setAgentAddress(wallet.address);
+        setAgentPrivateKey(wallet.privateKey);
+        if (wallet.approved) {
+          if (wallet.builderApproved) {
+            setAgentStatus('approved');
+          } else {
+            setAgentStatus('builder_approval_pending');
+          }
+        } else {
+          setAgentStatus('created');
+        }
+        return;
+      }
+
+      // 3b. Check if agent wallet is locked
+      if (isAgentWalletEncrypted(address)) {
+        const addr = getAgentAddress(address);
+        if (addr) {
+          setAgentAddress(addr);
+          setAgentStatus('locked');
+          setRevealMode('unlock');
+          setShowUnlockReveal(true);
+        }
+        return;
+      }
+
+      setAgentStatus('none');
+    };
+
+    checkStatus();
+  }, [address, validationStatus]); // Re-run if validation finishes (import) or address changes
+
+  // Notify parent of agent address changes
+  useEffect(() => {
+    if (onAgentAddressChange) {
+      onAgentAddressChange(agentAddress || null);
+    }
+  }, [agentAddress, onAgentAddressChange]);
+
+  // Auto-show unlock modal when wallet becomes locked
+  useEffect(() => {
+    if (agentStatus === 'locked' && !showUnlockReveal) {
+      setRevealMode('unlock');
+      setShowUnlockReveal(true);
+    }
+  }, [agentStatus, showUnlockReveal]);
+
+  const handleUnlockClick = () => {
+    setShowUnlockReveal(true);
+    setRevealMode('copy'); // Default mode, but actually we just want to unlock session
+    // We need to distinguish between "Unlock Session" and "Reveal Key".
+    // For now, let's just use the same modal.
+    // If we rename revealMode to 'unlock' | 'copy' | 'download'?
+  };
+
+  // Modify handleUnlockForReveal to handle simple unlock
+  const handleUnlockForReveal = async (pin: string): Promise<boolean> => {
+    try {
+      // Priority 1: Try unlocking imported account
+      // Priority 1: Try unlocking imported account
+      if (isImportedAccountEncrypted()) {
+        const unlocked = await unlockImportedAccount(pin);
+        if (unlocked) {
+          setAgentAddress(unlocked.accountAddress);
+          setAgentPrivateKey(unlocked.privateKey);
+          setAgentStatus('approved');
+          setShowUnlockReveal(false);
+
+          // Show Key in Modal ONLY if revealed
+          if (revealMode === 'reveal') {
+            setPrivateKeyModalState({
+              isOpen: true,
+              address: unlocked.accountAddress,
+              privateKey: unlocked.privateKey,
+              mode: 'revealed',
+            });
+          } else {
+            toast.success('Wallet unlocked');
+          }
+
+          // Trigger data refresh on parent
+          if (onStatusChange) {
+            onStatusChange();
+          }
+
+          return true;
+        }
+      }
+
+      // Priority 2: Try unlocking agent wallet (if connected)
+      if (!address) return false;
+      const unlocked = await unlockAgentWallet(address, pin);
+      if (unlocked) {
+        setAgentPrivateKey(unlocked.privateKey);
+        if (unlocked.approved) {
+          if (unlocked.builderApproved) {
+            setAgentStatus('approved');
+          } else {
+            setAgentStatus('builder_approval_pending');
+          }
+        } else {
+          setAgentStatus('created');
+        }
+        setShowUnlockReveal(false);
+
+        // Show Key in Modal ONLY if revealed
+        if (revealMode === 'reveal') {
+          setPrivateKeyModalState({
+            isOpen: true,
+            address: unlocked.address,
+            privateKey: unlocked.privateKey,
+            mode: 'revealed',
+          });
+        } else {
+          toast.success('Wallet unlocked'); // Silent unlock
+        }
+
+        // Trigger data refresh on parent
+        if (onStatusChange) {
+          onStatusChange();
+        }
+
+        return true;
+      }
+      return false;
+    } catch (e) {
+      throw e;
+    }
+  };
+
+  const handleCreateAgentClick = () => {
+    if (!address) {
+      toast.error('Please connect your wallet first');
+      return;
+    }
+
+    // Proceed directly to setup - if UI shows "Create New", we assume we can create new.
+    // Any existing data will be overwritten.
+    setPendingImportData(null);
+    setShowPinSetup(true);
+  };
+
+  const handleAgentCreationWithPin = async (pin: string) => {
+    setShowPinSetup(false);
+    setIsCreating(true);
+    try {
+      if (pendingImportData) {
+        // Encrypt IMPORTED wallet as GLOBAL account
+        await storeImportedAccountEncrypted(
+          importAccountAddress.trim() || pendingImportData.address,
+          pendingImportData.privateKey,
+          pin
+        );
+
+        // Update local state immediately
+        setAgentAddress(
+          importAccountAddress.trim() || pendingImportData.address
+        );
+        setAgentPrivateKey(pendingImportData.privateKey);
+        setAgentStatus('approved');
+
+        // Restore Validation Success Logic (Deferred from Import)
+        // Restore Validation Success Logic (Deferred from Import)
+        // Data is already set in handleImportAgent
+
+        toast.success('✅ Account imported!', {
+          description: 'Agent wallet secured successfully.',
+          duration: 5000,
+        });
+
+        // Clear validation status now that flow is complete
+        setValidationStatus('idle');
+      } else {
+        // Generate NEW wallet
+
+        // Safety check: Verify address still exists before proceeding
+        if (!address) {
+          toast.error(
+            'Wallet connection lost. Please reconnect and try again.'
+          );
+          setIsCreating(false);
+          return;
+        }
+
+        const wallet = generateAgentWallet();
+
+        await storeAgentWalletEncrypted(
+          address,
+          wallet.address,
+          wallet.privateKey,
+          pin,
+          false
+        );
+
+        setAgentAddress(wallet.address);
+        setAgentPrivateKey(wallet.privateKey); // Keep in memory for this session
+        setAgentStatus('created');
+
+        // Show Success Modal
+        setPrivateKeyModalState({
+          isOpen: true,
+          address: wallet.address,
+          privateKey: wallet.privateKey,
+          mode: 'created',
+        });
+      }
+
+      // Trigger data refresh on parent
+      if (onStatusChange) {
+        onStatusChange();
+      }
+    } catch (error: any) {
+      console.error('Agent creation/import error:', error);
+      toast.error('Failed to secure agent wallet');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+
+  const [isApprovingBuilder, setIsApprovingBuilder] = useState(false);
+
+  const handleApproveBuilder = async () => {
+    if (!address || !walletProvider) {
+      toast.error('Please connect your wallet');
+      return;
+    }
+    setIsApprovingBuilder(true);
+    try {
+      console.log('Approving Builder...');
+      const { BUILDER_ADDRESS, BUILDER_FEE_APPROVAL } = await import(
+        '../lib/hyperliquid/builder'
+      );
+
+      const { buildApproveBuilderFeeAction, signApproveBuilderFeeAction } =
+        await import('../lib/hyperliquid/signing');
+      const { postExchange } = await import('../lib/hyperliquid/client');
+
+      // 1. Get account
+      let accountToUse = address as Hex;
+      if (walletProvider && 'request' in walletProvider) {
+        // Logic to ensure account (omitted for brevity, relying on address/provider match)
+      }
+
+      const action = buildApproveBuilderFeeAction({
+        maxFeeRate: BUILDER_FEE_APPROVAL,
+        builderAddress: BUILDER_ADDRESS,
+        nonce: Date.now(),
+      });
+
+      // 2. Sign
+      const signature = await signApproveBuilderFeeAction(
+        walletProvider as any,
+        action
+      );
+
+      const apiAction = {
+        ...action,
+        builder: action.builder.toLowerCase(),
+      };
+
+      const payload = {
+        action: apiAction,
+        nonce: action.nonce,
+        signature,
+        vaultAddress: null,
+      };
+
+      // 3. Post
+      const response = await postExchange(payload);
+      if (response.status === 'ok') {
+        toast.success('PillarX Approved!');
+
+        // Update local state to fully approved
+        updateBuilderApproval(address, true);
+        setAgentStatus('approved');
+
+        if (onStatusChange) {
+          onStatusChange();
+        }
+
+      } else {
+        throw new Error(response.response?.data?.toString() || 'Failed');
+      }
+
+    } catch (error: any) {
+      console.error('Failed to approve PillarX:', error);
+      toast.error(error.message || 'Failed to approve PillarX');
+    } finally {
+      setIsApprovingBuilder(false);
+    }
+  };
+
+  const handleApproveAgent = async () => {
+    if (!address || !walletProvider) {
+      toast.error('Please connect your wallet');
+      return;
+    }
+
+    const agent = await getAgentWallet(address);
+    if (!agent) {
+      toast.error('No agent wallet found');
+      return;
+    }
+
+    if (agent.approved) {
+      // Check builder status
+      if (agent.builderApproved) {
+        toast.success('Agent is already approved');
+        setAgentStatus('approved');
+        return;
+      } else {
+        // Transition to builder pending
+        setAgentStatus('builder_approval_pending');
+        return;
+      }
+    }
+
+    setIsApproving(true);
+    try {
+      let accountToUse = address as Hex;
+
+      // Probe walletProvider structure
+      if (walletProvider) {
+        // Check if we need to request accounts
+        if ('request' in walletProvider) {
+          try {
+            // @ts-ignore
+            const accounts = await walletProvider.request({
+              method: 'eth_accounts',
+            });
+            if (accounts && Array.isArray(accounts) && accounts.length > 0) {
+              // Use the account from the provider to ensure case match
+              accountToUse = accounts[0];
+            } else {
+              console.warn(
+                'No accounts found from provider. Requesting access...'
+              );
+              // @ts-ignore
+              const requested = await walletProvider.request({
+                method: 'eth_requestAccounts',
+              });
+              if (
+                requested &&
+                Array.isArray(requested) &&
+                requested.length > 0
+              ) {
+                accountToUse = requested[0];
+              }
+            }
+          } catch (e) {
+            console.error('Error checking accounts:', e);
+          }
+
+          // Check chain ID and switch if necessary
+          try {
+            // @ts-ignore
+            const chainId = await walletProvider.request({
+              method: 'eth_chainId',
+            });
+
+            const targetChainId = '0xa4b1'; // Arbitrum One
+
+            if (chainId !== targetChainId) {
+              try {
+                // @ts-ignore
+                await walletProvider.request({
+                  method: 'wallet_switchEthereumChain',
+                  params: [{ chainId: targetChainId }],
+                });
+              } catch (switchError: any) {
+                // This error code indicates that the chain has not been added to MetaMask.
+                if (switchError.code === 4902) {
+                  // @ts-ignore
+                  await walletProvider.request({
+                    method: 'wallet_addEthereumChain',
+                    params: [
+                      {
+                        chainId: targetChainId,
+                        chainName: 'Arbitrum One',
+                        rpcUrls: ['https://arb1.arbitrum.io/rpc'],
+                        nativeCurrency: {
+                          name: 'Ether',
+                          symbol: 'ETH',
+                          decimals: 18,
+                        },
+                        blockExplorerUrls: ['https://arbiscan.io'],
+                      },
+                    ],
+                  });
+                } else {
+                  throw switchError;
+                }
+              }
+            }
+          } catch (e) {
+            console.error('Error switching chain:', e);
+            toast.error(
+              'Failed to switch network. Please switch to Arbitrum manually.'
+            );
+            setIsApproving(false);
+            return;
+          }
+        }
+      }
+
+      const actionConfig = buildApproveAgentAction({
+        agentAddress: agent.address,
+        nonce: Date.now(),
+      });
+
+      // Get EIP-712 typed data structures
+      const { domain, types, primaryType, message } = getApproveAgentTypedData(
+        actionConfig.hyperliquidChain,
+        actionConfig.signatureChainId,
+        actionConfig.agentAddress,
+        actionConfig.agentName,
+        actionConfig.nonce
+      );
+
+      // Note: walletProvider is already a viem WalletClient in this context
+      // We cast it to any/WalletClient to access signTypedData
+      const signature = await (walletProvider as any).signTypedData({
+        account: accountToUse,
+        domain,
+        types,
+        primaryType,
+        message,
+      });
+
+      // Ensure agent address is lowercase for API
+      // And include signatureChainId as it is required by the API
+      const apiAction = {
+        ...actionConfig,
+        agentAddress: actionConfig.agentAddress.toLowerCase(),
+      };
+
+      const payload = {
+        action: apiAction,
+        nonce: actionConfig.nonce,
+        signature: {
+          r: signature.slice(0, 66),
+          s: '0x' + signature.slice(66, 130),
+          v: parseInt(signature.slice(130, 132), 16),
+        },
+        vaultAddress: null,
+      };
+
+      const response = await postExchange(payload);
+
+      if (response.status === 'ok') {
+        // Store approval status locally WITHOUT overwriting/touching the keys
+        updateAgentApproval(address, true);
+        // Transition to Builder Approval pending instead of full success
+        setAgentStatus('builder_approval_pending');
+        toast.success('Agent approved! Now verify PillarX.');
+
+        if (onStatusChange) {
+          onStatusChange();
+        }
+      } else {
+        throw new Error(
+          response.response?.data?.toString() || 'Approval failed'
+        );
+      }
+    } catch (error: any) {
+      console.error('Approval error:', error);
+      toast.error('Failed to approve agent', {
+        description: error.message,
+      });
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+  const copyAddress = () => {
+    if (agentAddress) {
+      navigator.clipboard.writeText(agentAddress);
+      toast.success('Agent address copied!');
+    }
+  };
+
+  const copyPrivateKey = () => {
+    if (agentPrivateKey) {
+      navigator.clipboard.writeText(agentPrivateKey);
+      toast.success('Private key copied!');
+    } else {
+      setRevealMode('copy');
+      setShowUnlockReveal(true);
+    }
+  };
+
+  const downloadPrivateKey = () => {
+    if (agentPrivateKey) {
+      downloadKeyFile(agentAddress, agentPrivateKey);
+    } else {
+      setRevealMode('download');
+      setShowUnlockReveal(true);
+    }
+  };
+
+  const downloadKeyFile = (addr: string, key: string) => {
+    const data = JSON.stringify(
+      {
+        address: addr,
+        privateKey: key,
+        createdAt: new Date().toISOString(),
+        note: 'KEEP THIS SAFE. DO NOT SHARE.',
+      },
+      null,
+      2
+    );
+
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `agent-wallet-${addr.slice(0, 8)}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    toast.success('Private key downloaded!');
+  };
+
+  const handleRemoveAccount = async () => {
+    try {
+      // Clear data
+      clearImportedAccount();
+
+      // Reset all local state
+      setAgentAddress('');
+      setAgentPrivateKey('');
+      setAgentStatus('none');
+
+      // Close any open modals
+      setShowPinSetup(false);
+      setShowUnlockReveal(false);
+      setRevealMode('unlock'); // Reset default
+
+      // Reset validation state
+      setValidationData({});
+      // Note: Setting validationStatus to 'idle' will trigger the useEffect to run checkStatus()
+      // This is desired behavior - it will re-check and find 'none' (or fallback to native agent)
+      setValidationStatus('idle');
+
+      toast.success('Imported account removed');
+
+      // Trigger data refresh to clear displayed data
+      if (onStatusChange) {
+        onStatusChange();
+      }
+    } catch (error: any) {
+      console.error('[AgentControls] Error removing account:', error);
+      toast.error('Failed to remove account');
+    }
+  };
+
+  const handleImportAgent = async () => {
+    if (!importAccountAddress.trim()) {
+      toast.error('Please enter an account address');
+      return;
+    }
+
+    if (!importPrivateKey.trim()) {
+      toast.error('Please enter a private key');
+      return;
+    }
+
+    // Show loading toast and set validating status
+    const loadingToast = toast.loading('Validating agent credentials...');
+    setValidationStatus('validating');
+    setValidationData({});
+
+    try {
+      // Validate account address format
+      if (!importAccountAddress.trim().match(/^0x[a-fA-F0-9]{40}$/)) {
+        toast.dismiss(loadingToast);
+        toast.error('Invalid account address format');
+        return;
+      }
+
+      // Validate and derive address from private key
+      const formattedKey = importPrivateKey.trim().startsWith('0x')
+        ? (importPrivateKey.trim() as Hex)
+        : (`0x${importPrivateKey.trim()}` as Hex);
+
+      const account = privateKeyToAccount(formattedKey);
+
+      toast.loading('Checking Hyperliquid connection...', { id: loadingToast });
+
+      // Validate that the ACCOUNT ADDRESS exists on Hyperliquid (not the agent)
+      try {
+        const { getUserState } = await import('../lib/hyperliquid/client');
+        const accountState = await getUserState(importAccountAddress.trim());
+
+        if (!accountState) {
+          toast.dismiss(loadingToast);
+          toast.error('Account address not found on Hyperliquid', {
+            description:
+              'This address has no Hyperliquid account. Please use a valid account address.',
+          });
+          return;
+        }
+
+        toast.loading('Saving credentials...', { id: loadingToast });
+
+        // INSTEAD of storing immediately, we now PROMPT FOR PIN
+        toast.dismiss(loadingToast);
+        setShowImportDialog(false);
+
+        //Set pending data
+        //Set pending data
+        setPendingImportData({
+          address: account.address,
+          privateKey: formattedKey,
+          accountState: accountState,
+        });
+
+        // Show Success status immediately - BEFORE Pin Setup
+        const openPositions =
+          accountState.assetPositions?.filter(
+            (p: any) => parseFloat(p.position.szi) !== 0
+          ).length || 0;
+
+        setValidationStatus('success');
+        setValidationData({
+          agentAddress: importAccountAddress.trim() || account.address,
+          balance: parseFloat(
+            accountState.marginSummary?.totalRawUsd || '0'
+          ).toFixed(2),
+          openPositions,
+        });
+
+        // Open PIN setup
+        setShowPinSetup(true);
+
+        // Notify parent validation passed (optional, keeps UI fresh)
+        if (onStatusChange) {
+          onStatusChange();
+        }
+      } catch (validationError: any) {
+        toast.dismiss(loadingToast);
+        console.error('[Import Agent] Validation error:', validationError);
+
+        // Set error status
+        setValidationStatus('error');
+        setValidationData({
+          errorMessage:
+            validationError.message ||
+            'Could not fetch agent data. Please check your internet connection and try again.',
+        });
+
+        toast.error('❌ Failed to connect to Hyperliquid', {
+          description:
+            validationError.message ||
+            'Could not fetch agent data. Please check your internet connection and try again.',
+          duration: 5000,
+        });
+        return;
+      }
+    } catch (error: any) {
+      toast.dismiss(loadingToast);
+      console.error('Import error:', error);
+      toast.error('Invalid private key', {
+        description: error.message || 'Please check the format and try again',
+      });
+    }
+  };
+
+  const handleRemoveAgent = async () => {
+    if (!address) {
+      toast.error('Please connect your wallet first');
+      return;
+    }
+
+    setIsRemoving(true);
+    try {
+      // Clear from remote first, then local
+      await clearAgentWallet(address);
+
+      // Verify deletion
+      const stillExists = await getAgentWallet(address);
+      if (stillExists) {
+        throw new Error(
+          'Agent wallet still exists after deletion. Please try again.'
+        );
+      }
+
+      // Update UI
+      setAgentAddress('');
+      setAgentPrivateKey('');
+      setAgentStatus('none');
+      toast.success('Agent wallet removed from all storage');
+      onStatusChange?.();
+    } catch (error: any) {
+      console.error('Remove agent error:', error);
+      toast.error(error.message || 'Failed to remove agent wallet');
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  const statusConfig = {
+    locked: {
+      icon: Lock,
+      label: 'Active (Locked)',
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10 border-orange-500/30',
+    },
+    none: {
+      icon: AlertCircle,
+      label: 'No Agent',
+      color: 'text-muted-foreground',
+      bgColor: 'bg-muted',
+    },
+    created: {
+      icon: AlertCircle,
+      label: 'Not Approved',
+      color: 'text-warning',
+      bgColor: 'bg-warning/10 border-warning/30',
+    },
+    'builder_approval_pending': {
+      icon: AlertCircle,
+      label: 'Setup Incomplete',
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10 border-orange-500/30',
+    },
+    approved: {
+      icon: CheckCircle2,
+      label: 'Active',
+      color: 'text-success',
+      bgColor: 'bg-success/10 border-success/30',
+    },
+  };
+
+  const config = statusConfig[agentStatus];
+  const Icon = config.icon;
+
+  // Add Lock icon import if not present (Wait, imports are at top)
+  // I need to add Lock to imports at top manually in first block?
+  // Or assume lucide-react has it (it does).
+  // Let's add the button for Locked state.
+
+  return (
+    <Card className="p-3 pt-4 h-full">
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <config.icon className={cn('h-4 w-4', config.color)} />
+            <h3 className={cn('text-base font-semibold', config.color)}>
+              Perps Account:
+            </h3>
+            <Badge
+              variant="outline"
+              className={cn('ml-2', config.bgColor, config.color)}
+            >
+              {config.label}
+            </Badge>
+          </div>
+          {isMobile && (
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <ChevronDown
+                  className={cn(
+                    'h-4 w-4 transition-transform',
+                    isOpen ? 'rotate-180' : ''
+                  )}
+                />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          )}
+        </div>
+
+        <CollapsibleContent>
+          {/* Validation Status Display */}
+          {validationStatus !== 'idle' && (
+            <div className="mb-3">
+              <ValidationStatus
+                status={validationStatus}
+                agentAddress={validationData.agentAddress}
+                balance={validationData.balance}
+                openPositions={validationData.openPositions}
+                errorMessage={validationData.errorMessage}
+              />
+            </div>
+          )}
+
+          {agentStatus === 'none' && (
+            <>
+              {!address ? null : isLoadingAgent ? (
+                <div className="text-sm text-muted-foreground text-center py-3">
+                  Loading agent wallet...
+                </div>
+              ) : (
+                <>
+                  <div className="grid grid-cols-2 gap-2 mb-2 mt-4">
+                    <Button
+                      onClick={handleCreateAgentClick}
+                      disabled={isCreating}
+                      className="w-full"
+                      size="sm"
+                    >
+                      {isCreating ? 'Creating...' : 'Create New'}
+                    </Button>
+                    <Button
+                      onClick={() => setShowImportDialog(true)}
+                      disabled={isCreating}
+                      className="w-full"
+                      variant="outline"
+                      size="sm"
+                    >
+                      <Upload className="h-3 w-3 mr-2" />
+                      Import Account
+                    </Button>
+                  </div>
+                  <div className="text-xs text-muted-foreground bg-muted border border-border rounded p-2">
+                    💡 Create a new Hyperliquid agent wallet or import your
+                    existing one
+                  </div>
+                </>
+              )}
+            </>
+          )}
+
+          <Dialog
+            open={showImportDialog}
+            onOpenChange={(open) => {
+              setShowImportDialog(open);
+              if (open) {
+                // Pre-fill with connected wallet address when dialog opens
+                setImportAccountAddress(address || '');
+              }
+            }}
+          >
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Import Existing Agent</DialogTitle>
+                <DialogDescription>
+                  Enter the private key of your Hyperliquid agent wallet and
+                  specify which account address to associate it with.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div>
+                  <Label htmlFor="accountAddress">Account Address</Label>
+                  <Input
+                    id="accountAddress"
+                    type="text"
+                    placeholder="0x..."
+                    value={importAccountAddress}
+                    onChange={(e) => setImportAccountAddress(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    This is the PillarX account that will control the agent. You
+                    can change this to any address.
+                  </p>
+                </div>
+                <div>
+                  <Label htmlFor="privateKey">Agent Private Key</Label>
+                  <Input
+                    id="privateKey"
+                    type="password"
+                    placeholder="0x..."
+                    value={importPrivateKey}
+                    onChange={(e) => setImportPrivateKey(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    The private key of your Hyperliquid agent wallet
+                  </p>
+                </div>
+                <div className="flex gap-2">
+                  <Button onClick={handleImportAgent} className="flex-1">
+                    Import
+                  </Button>
+                  <Button
+                    onClick={() => setShowImportDialog(false)}
+                    variant="outline"
+                    className="flex-1"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+
+          {agentStatus === 'locked' && (
+            <Button
+              className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold h-11 mt-4"
+              onClick={() => {
+                setRevealMode('unlock');
+                setShowUnlockReveal(true);
+              }}
+            >
+              Unlock Wallet
+            </Button>
+          )}
+
+          {agentStatus === 'created' && (
+            <div className="space-y-1.5 mt-4">
+              {masterBalance < 10 && userState ? (
+                <DepositModal
+                  userState={userState}
+                  ethPrice={ethPrice}
+                  trigger={
+                    <Button className="w-full" size="sm">
+                      Deposit $10 USDC to Trade
+                    </Button>
+                  }
+                />
+              ) : (
+                <Button
+                  onClick={handleApproveAgent}
+                  disabled={isApproving || !address}
+                  className="w-full"
+                  size="sm"
+                >
+                  {isApproving ? 'Approving...' : 'Activate Account'}
+                </Button>
+              )}
+
+              <Button
+                onClick={handleRemoveAgent}
+                disabled={isRemoving || isApproving}
+                variant="outline"
+                className="w-full text-xs"
+                size="sm"
+              >
+                {isRemoving ? 'Removing...' : 'Remove Account'}
+              </Button>
+            </div>
+
+          )}
+
+          {agentStatus === 'builder_approval_pending' && (
+            <div className="space-y-3 mt-4">
+
+
+              <Button onClick={handleApproveBuilder} disabled={isApprovingBuilder} className="w-full" size="sm">
+                {isApprovingBuilder ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Approve PillarX'}
+              </Button>
+
+              <Button
+                onClick={handleRemoveAgent}
+                disabled={isRemoving || isApprovingBuilder}
+                variant="outline"
+                className="w-full text-xs"
+                size="sm"
+              >
+                {isRemoving ? 'Removing...' : 'Remove Account'}
+              </Button>
+            </div>
+          )}
+
+          {agentStatus === 'approved' && (
+            <div className="space-y-3 mt-4">
+              <div className="bg-success/10 border border-success/30 rounded-lg p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-success" />
+                    <span className="text-sm font-medium text-success">
+                      Activated Account
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-7 w-7">
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setRevealMode('reveal');
+                            setShowUnlockReveal(true);
+                          }}
+                        >
+                          Reveal Private Key
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={handleRemoveAccount}
+                          className="text-destructive"
+                        >
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          Remove Account
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  <span className="font-medium">Address:</span>
+                  <div className="flex items-center gap-2 mt-1">
+                    <div className="font-mono bg-background/50 rounded px-2 py-1 text-[10px] flex-1">
+                      {agentAddress}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => {
+                        navigator.clipboard.writeText(agentAddress);
+                        toast.success('Address copied');
+                      }}
+                    >
+                      <Copy className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <PinSetupModal
+            isOpen={showPinSetup}
+            onConfirm={handleAgentCreationWithPin}
+            onCancel={() => setShowPinSetup(false)}
+          />
+
+          <UnlockWalletModal
+            isOpen={showUnlockReveal}
+            onUnlock={handleUnlockForReveal}
+            onClose={() => setShowUnlockReveal(false)}
+          />
+
+          <PrivateKeyModal
+            isOpen={privateKeyModalState.isOpen}
+            address={privateKeyModalState.address}
+            privateKey={privateKeyModalState.privateKey}
+            mode={privateKeyModalState.mode}
+            mainAddress={address || undefined}
+            onClose={() =>
+              setPrivateKeyModalState({
+                ...privateKeyModalState,
+                isOpen: false,
+              })
+            }
+          />
+        </CollapsibleContent>
+      </Collapsible>
+    </Card >
+  );
+}
diff --git a/src/apps/perps/components/AssetSelector.tsx b/src/apps/perps/components/AssetSelector.tsx
new file mode 100644
index 00000000..0eac5172
--- /dev/null
+++ b/src/apps/perps/components/AssetSelector.tsx
@@ -0,0 +1,187 @@
+import { useState, useMemo } from 'react';
+import { Search, ArrowUpDown } from 'lucide-react';
+import { Input } from './ui/input';
+import { Card } from './ui/card';
+import { ScrollArea } from './ui/scroll-area';
+import { Button } from './ui/button';
+import { AssetInfo, EnhancedAsset } from '../lib/hyperliquid/types';
+import { Skeleton } from './ui/skeleton';
+import { TokenIcon } from './TokenIcon';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+
+interface AssetSelectorProps {
+  selectedSymbol: string | null;
+  onSelect: (symbol: string, asset: AssetInfo) => void;
+  assets: EnhancedAsset[];
+}
+
+type SortBy = 'price' | 'volume' | 'change';
+
+export function AssetSelector({
+  selectedSymbol,
+  onSelect,
+  assets,
+}: AssetSelectorProps) {
+  const [search, setSearch] = useState('');
+  const [sortBy, setSortBy] = useState<SortBy>('volume');
+
+  // Loading state is now determined by whether assets array is empty
+  const isLoading = assets.length === 0;
+
+  const filteredAndSortedAssets = useMemo(() => {
+    let filtered = assets;
+
+    // Filter by search
+    if (search) {
+      const searchLower = search.toLowerCase();
+      filtered = assets.filter((asset) =>
+        asset.symbol.toLowerCase().includes(searchLower)
+      );
+    }
+
+    // Sort
+    return [...filtered].sort((a, b) => {
+      switch (sortBy) {
+        case 'price':
+          return b.price - a.price;
+        case 'volume':
+          return b.volume - a.volume;
+        case 'change':
+          return b.priceChangePercent - a.priceChangePercent;
+        default:
+          return 0;
+      }
+    });
+  }, [assets, search, sortBy]);
+
+  const formatPrice = (price: number): string => {
+    if (price >= 1000) {
+      return price.toLocaleString('en-US', { maximumFractionDigits: 0 });
+    }
+    return price.toFixed(2);
+  };
+
+  const formatVolume = (volume: number): string => {
+    if (volume >= 1e9) {
+      return `$${(volume / 1e9).toFixed(1)}B`;
+    }
+    if (volume >= 1e6) {
+      return `$${(volume / 1e6).toFixed(1)}M`;
+    }
+    if (volume >= 1e3) {
+      return `$${(volume / 1e3).toFixed(1)}K`;
+    }
+    return `$${volume.toFixed(0)}`;
+  };
+
+  if (isLoading) {
+    return (
+      <Card className="p-4">
+        <div className="space-y-3">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="pt-2 px-4 pb-4">
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search assets (e.g., BTC, ETH)..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          {/* Sort Dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon" title="Sort assets">
+                <ArrowUpDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setSortBy('price')}>
+                Sort by Price
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('volume')}>
+                Sort by Volume
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('change')}>
+                Sort by Change %
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <ScrollArea className="h-[500px]">
+          <div className="space-y-1">
+            {filteredAndSortedAssets.map((asset) => {
+              const isPositive = asset.priceChangePercent >= 0;
+
+              return (
+                <button
+                  key={asset.symbol}
+                  onClick={() => onSelect(asset.symbol, asset)}
+                  className={`w-full text-left px-3 py-2.5 rounded-md transition-colors ${selectedSymbol === asset.symbol
+                    ? 'bg-secondary'
+                    : 'hover:bg-secondary/50'
+                    }`}
+                >
+                  <div className="flex items-center gap-3">
+                    {/* Token Logo */}
+                    <TokenIcon
+                      symbol={asset.symbol}
+                      size={32}
+                      className="flex-shrink-0"
+                    />
+
+                    {/* Token Info */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center mb-0.5">
+                        <span className="font-semibold">{asset.symbol}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span>Vol {formatVolume(asset.volume)}</span>
+                        <span>{asset.maxLeverage}x max</span>
+                      </div>
+                    </div>
+
+                    {/* Price & Change */}
+                    <div className="text-right flex-shrink-0">
+                      <div className="font-semibold">
+                        ${formatPrice(asset.price)}
+                      </div>
+                      <div
+                        className={`text-xs ${isPositive ? 'text-green-600' : 'text-red-600'}`}
+                      >
+                        {isPositive ? '+' : ''}
+                        {asset.priceChangePercent.toFixed(2)}%
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+            {filteredAndSortedAssets.length === 0 && (
+              <div className="text-center py-8 text-muted-foreground text-sm">
+                No assets found
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/BalanceCard.tsx b/src/apps/perps/components/BalanceCard.tsx
new file mode 100644
index 00000000..6e05f37f
--- /dev/null
+++ b/src/apps/perps/components/BalanceCard.tsx
@@ -0,0 +1,151 @@
+import { Card } from './ui/card';
+import { RefreshCw, Plus, Minus } from 'lucide-react';
+import { useIsMobile } from '../hooks/use-mobile';
+import { Button } from './ui/button';
+import { DepositModal } from './DepositModal';
+import { WithdrawModal } from './WithdrawModal';
+import type { UserState } from '../lib/hyperliquid/types';
+import { useMemo } from 'react';
+
+interface BalanceCardProps {
+  userState: UserState;
+  isLoading: boolean;
+  masterAddress: string;
+  walletClient: any;
+  onRefresh?: () => void;
+  isImported?: boolean;
+  ethPrice?: number;
+}
+
+export function BalanceCard({
+  userState,
+  isLoading,
+  masterAddress,
+  walletClient,
+  onRefresh,
+  isImported,
+  ethPrice,
+}: BalanceCardProps) {
+  const accountEquity = parseFloat(
+    userState.marginSummary?.accountValue || '0'
+  );
+
+  // Calculate total PnL from all positions
+  const totalPnl = useMemo(() => {
+    if (!userState.assetPositions) return 0;
+    return userState.assetPositions.reduce((sum, pos) => {
+      return sum + parseFloat(pos.position.unrealizedPnl || '0');
+    }, 0);
+  }, [userState.assetPositions]);
+
+  const pnlPercent =
+    accountEquity > 0
+      ? ((totalPnl / (accountEquity - totalPnl)) * 100).toFixed(2)
+      : '0.00';
+
+  const isPnlPositive = totalPnl >= 0;
+
+  const isMobile = useIsMobile();
+
+  return (
+    <Card className="p-3 pt-2 h-full">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          <span className="font-semibold pl-2">Perps Balance</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <DepositModal
+            userState={userState}
+            disabled={isImported}
+            ethPrice={ethPrice}
+            trigger={
+              isMobile ? (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="h-8 w-8"
+                  disabled={isImported}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              ) : undefined
+            }
+          />
+          <WithdrawModal
+            userState={userState}
+            masterAddress={masterAddress}
+            walletClient={walletClient}
+            onSuccess={onRefresh}
+            disabled={isImported}
+            trigger={
+              isMobile ? (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="h-8 w-8"
+                  disabled={isImported}
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+              ) : undefined
+            }
+          />
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="h-8 w-8"
+            >
+              <RefreshCw
+                className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
+              />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-2 pb-1 mt-2 pl-2">
+        {/* Main Balance */}
+        <div>
+          <p className="text-3xl font-bold font-mono-numbers">
+            $
+            {accountEquity.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </p>
+        </div>
+
+        {/* PnL Display */}
+        <div className="flex items-center gap-2">
+          <div
+            className={`px-2.5 py-0.5 rounded-md text-sm font-semibold ${isPnlPositive
+              ? 'bg-green-500/10 text-green-500'
+              : 'bg-red-500/10 text-red-500'
+              }`}
+          >
+            {isPnlPositive ? '+' : ''}$
+            {totalPnl.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </div>
+          <div
+            className={`text-sm font-semibold ${isPnlPositive ? 'text-green-500' : 'text-red-500'
+              }`}
+          >
+            {isPnlPositive ? '+' : ''}
+            {pnlPercent}% {isPnlPositive ? '↑' : '↓'}
+          </div>
+        </div>
+
+        {/* Note about PnL calculation */}
+        <p className="text-xs text-muted-foreground">
+          Showing total unrealized PnL from open positions
+        </p>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/CompactHeader.tsx b/src/apps/perps/components/CompactHeader.tsx
new file mode 100644
index 00000000..4172538e
--- /dev/null
+++ b/src/apps/perps/components/CompactHeader.tsx
@@ -0,0 +1,73 @@
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { Settings, CheckCircle2, AlertCircle } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './ui/dropdown-menu';
+
+interface CompactHeaderProps {
+  accountAddress: string;
+  balance: string;
+  onViewKey: () => void;
+  onRemove: () => void;
+  isConnected: boolean;
+}
+
+export function CompactHeader({
+  accountAddress,
+  balance,
+  onViewKey,
+  onRemove,
+  isConnected,
+}: CompactHeaderProps) {
+  return (
+    <Card className="px-4 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {isConnected ? (
+            <>
+              <CheckCircle2 className="h-4 w-4 text-success" />
+              <span className="text-sm font-medium">
+                {accountAddress.slice(0, 6)}...{accountAddress.slice(-4)}
+              </span>
+            </>
+          ) : (
+            <>
+              <AlertCircle className="h-4 w-4 text-warning" />
+              <span className="text-sm text-muted-foreground">
+                Not connected
+              </span>
+            </>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          {isConnected && (
+            <span className="text-sm font-semibold">${balance}</span>
+          )}
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <Settings className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onViewKey}>
+                View Private Key
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={onRemove} className="text-destructive">
+                Remove Account
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/ConnectButton.tsx b/src/apps/perps/components/ConnectButton.tsx
new file mode 100644
index 00000000..b2586d1f
--- /dev/null
+++ b/src/apps/perps/components/ConnectButton.tsx
@@ -0,0 +1,63 @@
+import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import { Button } from './ui/button';
+import { Wallet, LogOut, AlertTriangle } from 'lucide-react';
+import { Badge } from './ui/badge';
+
+export function ConnectButton() {
+  const { address, isConnected, chain } = useAccount();
+  const { connect, connectors, isPending } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  if (isConnected && address) {
+    const isArbitrum = chain?.id === 42161;
+
+    return (
+      <div className="flex items-center gap-3">
+        <div className="flex flex-col items-end">
+          <span className="text-sm font-mono text-foreground">
+            {address.slice(0, 6)}...{address.slice(-4)}
+          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              {chain?.name || 'Unknown Network'}
+            </span>
+            {!isArbitrum && (
+              <Badge
+                variant="destructive"
+                className="text-xs flex items-center gap-1"
+              >
+                <AlertTriangle className="h-3 w-3" />
+                Switch to Arbitrum
+              </Badge>
+            )}
+          </div>
+        </div>
+        <Button
+          onClick={() => disconnect()}
+          variant="outline"
+          size="sm"
+          className="gap-2"
+        >
+          <LogOut className="h-4 w-4" />
+          Disconnect
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2">
+      {connectors.map((connector) => (
+        <Button
+          key={connector.id}
+          onClick={() => connect({ connector })}
+          disabled={isPending}
+          className="gap-2"
+        >
+          <Wallet className="h-4 w-4" />
+          {isPending ? 'Connecting...' : `Connect ${connector.name}`}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/CopyTile.tsx b/src/apps/perps/components/CopyTile.tsx
new file mode 100644
index 00000000..b845c468
--- /dev/null
+++ b/src/apps/perps/components/CopyTile.tsx
@@ -0,0 +1,137 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { TrendingUp, TrendingDown, Target, Shield, Trophy } from 'lucide-react';
+import type { CopyTile as CopyTileType } from '../lib/hyperliquid/types';
+import { getEntryPrice } from '../lib/hyperliquid/math';
+
+interface CopyTileProps {
+  tile: CopyTileType;
+  onExecute: () => void;
+  isExecuting: boolean;
+  disabled: boolean;
+}
+
+export function CopyTile({
+  tile,
+  onExecute,
+  isExecuting,
+  disabled,
+}: CopyTileProps) {
+  const entryPrice = getEntryPrice(tile.entry);
+  const isLong = tile.side === 'long';
+
+  const formatPrice = (price: number | number[]) => {
+    if (Array.isArray(price)) {
+      return `$${price[0]} - $${price[1]}`;
+    }
+    return `$${price}`;
+  };
+
+  const formatTakeProfits = () => {
+    if (typeof tile.takeProfits === 'number') {
+      return `$${tile.takeProfits}`;
+    }
+    if (tile.takeProfits.length === 2 && !Array.isArray(tile.takeProfits[0])) {
+      return `$${tile.takeProfits[0]} - $${tile.takeProfits[1]}`;
+    }
+    return tile.takeProfits.map((tp) => `$${tp}`).join(', ');
+  };
+
+  return (
+    <Card className="shadow-card border-2 hover:border-primary/50 transition-colors">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle className="text-2xl font-bold flex items-center gap-2">
+              {tile.symbol}
+              <Badge
+                variant="outline"
+                className={
+                  isLong
+                    ? 'text-success border-success'
+                    : 'text-destructive border-destructive'
+                }
+              >
+                {isLong ? (
+                  <>
+                    <TrendingUp className="h-3 w-3 mr-1" />
+                    LONG
+                  </>
+                ) : (
+                  <>
+                    <TrendingDown className="h-3 w-3 mr-1" />
+                    SHORT
+                  </>
+                )}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              Copy Trade • $10 Notional • 5× Leverage
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-3">
+          <div className="flex items-center gap-3 p-3 bg-secondary/50 rounded-lg">
+            <div className="p-2 bg-primary/10 rounded">
+              <Target className="h-4 w-4 text-primary" />
+            </div>
+            <div className="flex-1">
+              <p className="text-xs text-muted-foreground">Entry</p>
+              <p className="font-mono-numbers font-semibold">
+                {formatPrice(tile.entry)}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3 p-3 bg-destructive/10 rounded-lg">
+            <div className="p-2 bg-destructive/20 rounded">
+              <Shield className="h-4 w-4 text-destructive" />
+            </div>
+            <div className="flex-1">
+              <p className="text-xs text-muted-foreground">Stop Loss</p>
+              <p className="font-mono-numbers font-semibold text-destructive">
+                ${tile.stopLoss}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3 p-3 bg-success/10 rounded-lg">
+            <div className="p-2 bg-success/20 rounded">
+              <Trophy className="h-4 w-4 text-success" />
+            </div>
+            <div className="flex-1">
+              <p className="text-xs text-muted-foreground">Take Profits</p>
+              <p className="font-mono-numbers font-semibold text-success">
+                {formatTakeProfits()}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <Button
+          onClick={onExecute}
+          disabled={disabled || isExecuting}
+          className="w-full gradient-primary shadow-glow"
+          size="lg"
+        >
+          {isExecuting ? 'Executing...' : 'Execute Copy Trade'}
+        </Button>
+
+        {disabled && (
+          <p className="text-xs text-center text-muted-foreground">
+            Connect wallet and setup Hyperliquid to trade
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/DepositModal.tsx b/src/apps/perps/components/DepositModal.tsx
new file mode 100644
index 00000000..24025601
--- /dev/null
+++ b/src/apps/perps/components/DepositModal.tsx
@@ -0,0 +1,433 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../components/ui/dialog';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { ArrowDownUp, ExternalLink } from 'lucide-react';
+import { toast } from 'sonner';
+import { ethers } from 'ethers';
+import { checkUSDCBalance } from '../lib/hyperliquid/bridge';
+import useTransactionKit from '../../../hooks/useTransactionKit';
+import { useHyperliquid } from '../hooks/useHyperliquid';
+import { erc20Abi, parseUnits } from 'viem';
+import { cn } from '../lib/utils';
+
+// Contract addresses
+const USDC_CONTRACT_ADDRESS =
+  '0xaf88d065e77c8cC2239327C5EDb3A432268e5831' as const;
+const BRIDGE_CONTRACT_ADDRESS =
+  '0x2Df1c51E09aECF9cacB7bc98cB1742757f163dF7' as const;
+
+interface DepositModalProps {
+  userState: any;
+  targetAddress?: string;
+  trigger?: React.ReactNode;
+  disabled?: boolean;
+  ethPrice?: number;
+}
+
+export function DepositModal({
+  userState,
+  targetAddress,
+  trigger,
+  disabled,
+  ethPrice,
+}: DepositModalProps) {
+  const [open, setOpen] = useState(false);
+  const [amount, setAmount] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [arbitrumBalance, setArbitrumBalance] = useState<string | null>(null);
+  const [arbitrumEthBalance, setArbitrumEthBalance] = useState<string | null>(null);
+  const [txHash, setTxHash] = useState<string | null>(null);
+
+  const { kit, walletProvider } = useTransactionKit();
+  const { address, walletClient } = useHyperliquid();
+  const [isWrongNetwork, setIsWrongNetwork] = useState(false);
+
+  const isAddressMatch =
+    !targetAddress ||
+    !address ||
+    targetAddress.toLowerCase() === address.toLowerCase();
+
+  const checkNetwork = async () => {
+    if (walletProvider && 'request' in walletProvider) {
+      try {
+        // @ts-ignore
+        const chainId = await walletProvider.request({ method: 'eth_chainId' });
+        // Arbitrum One is 0xa4b1 (42161)
+        setIsWrongNetwork(chainId !== '0xa4b1');
+      } catch (e) {
+        console.warn('Failed to check network', e);
+      }
+    }
+  };
+  // ... checkNetwork ...
+
+  const switchToArbitrum = async () => {
+    if (!walletProvider || !('request' in walletProvider)) return;
+
+    try {
+      // @ts-ignore
+      await walletProvider.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: '0xa4b1' }],
+      });
+      setIsWrongNetwork(false);
+    } catch (switchError: any) {
+      // This error code indicates that the chain has not been added to MetaMask.
+      if (switchError.code === 4902) {
+        try {
+          // @ts-ignore
+          await walletProvider.request({
+            method: 'wallet_addEthereumChain',
+            params: [
+              {
+                chainId: '0xa4b1',
+                chainName: 'Arbitrum One',
+                rpcUrls: ['https://arb1.arbitrum.io/rpc'],
+                nativeCurrency: {
+                  name: 'Ether',
+                  symbol: 'ETH',
+                  decimals: 18,
+                },
+                blockExplorerUrls: ['https://arbiscan.io'],
+              },
+            ],
+          });
+          setIsWrongNetwork(false);
+        } catch (addError) {
+          console.error('Failed to add Arbitrum network', addError);
+        }
+      } else {
+        console.error('Failed to switch to Arbitrum', switchError);
+      }
+    }
+  };
+
+  const fetchArbitrumBalance = async () => {
+    if (!address || !kit) return;
+    try {
+      if (!walletProvider) return;
+      const provider = new ethers.providers.Web3Provider(walletProvider as any);
+
+      const balance = await checkUSDCBalance(address, provider);
+      setArbitrumBalance(balance);
+
+      const ethBal = await provider.getBalance(address);
+      setArbitrumEthBalance(ethers.utils.formatEther(ethBal));
+    } catch (error) {
+      console.warn('Failed to fetch Arbitrum balance', error);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen) {
+      checkNetwork();
+      fetchArbitrumBalance();
+      setTxHash(null);
+    }
+  };
+
+  // Check network periodically or on provider change
+  useEffect(() => {
+    if (open) {
+      checkNetwork();
+      if (!isWrongNetwork) {
+        fetchArbitrumBalance();
+      }
+    }
+  }, [open, walletProvider, isWrongNetwork]);
+
+  const handleMaxClick = () => {
+    if (arbitrumBalance) {
+      setAmount(arbitrumBalance);
+    }
+  };
+
+  const handleDeposit = async () => {
+    if (isWrongNetwork) {
+      await switchToArbitrum();
+      return;
+    }
+
+    if (!amount || parseFloat(amount) <= 0) {
+      toast.error('Invalid Amount', {
+        description: 'Please enter a valid amount',
+      });
+      return;
+    }
+    // ... existing validation ...
+    // Check min deposit of 5 USDC for ALL deposits
+    if (parseFloat(amount) < 5) {
+      toast.error('Amount Too Low', {
+        description: 'Minimum deposit is 5 USDC',
+      });
+      return;
+    }
+
+    if (!address || !walletClient) {
+      toast.error('Wallet Not Connected', {
+        description: 'Please connect your wallet',
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // Re-check network just in case
+      if (walletProvider && 'request' in walletProvider) {
+        // @ts-ignore
+        const chainId = await walletProvider.request({ method: 'eth_chainId' });
+        if (chainId !== '0xa4b1') {
+          await switchToArbitrum();
+          // If switch failed or user cancelled, stop
+          // NOTE: switchToArbitrum handles errors but we need to check execution
+          // @ts-ignore
+          const newChainId = await walletProvider.request({ method: 'eth_chainId' });
+          if (newChainId !== '0xa4b1') {
+            setIsLoading(false);
+            return;
+          }
+        }
+      }
+
+      // Check ETH Balance for gas
+      try {
+        if (walletProvider) {
+          const provider = new ethers.providers.Web3Provider(
+            walletProvider as any
+          );
+          const ethBalance = await provider.getBalance(address);
+          if (ethBalance.lt(ethers.utils.parseEther('0.0001'))) {
+            toast.error('Insufficient ETH', {
+              description: 'You need ETH on Arbitrum for gas fees.',
+            });
+            setIsLoading(false);
+            return;
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to check ETH balance:', e);
+      }
+
+      const amountInWei = parseUnits(amount, 6);
+
+      // Transfer USDC directly to bridge contract using viem walletClient
+      toast.info('Confirming Transaction', {
+        description: 'Please sign the transfer transaction in your wallet...',
+      });
+
+      const txHash = await walletClient.writeContract({
+        account: address as `0x${string}`,
+        address: USDC_CONTRACT_ADDRESS,
+        abi: erc20Abi,
+        functionName: 'transfer',
+        args: [BRIDGE_CONTRACT_ADDRESS as `0x${string}`, amountInWei],
+      });
+
+      if (txHash) {
+        toast.success('Success!', {
+          description: `Bridging ${amount} USDC. It will arrive in 5-10 minutes.`,
+          action: {
+            label: 'View on Arbiscan',
+            onClick: () => window.open(`https://arbiscan.io/tx/${txHash}`, '_blank'),
+          },
+        });
+        setOpen(false);
+        setTxHash(null);
+        setAmount('');
+      } else {
+        throw new Error('Transaction failed');
+      }
+    } catch (error: any) {
+      console.error('Bridge error:', error);
+      toast.error('Bridge Failed', {
+        description: error.message || 'Failed to bridge USDC',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Clean up float for display
+  const ethDisplay = arbitrumEthBalance ? parseFloat(arbitrumEthBalance).toFixed(4) : '0';
+
+  const isLowEth = arbitrumEthBalance && parseFloat(arbitrumEthBalance) < 0.0001;
+
+  const currentBalance = userState?.marginSummary?.accountValue || '0';
+  // ...
+  <p className="text-[10px] text-muted-foreground">
+    Min: 0.0001 ETH
+  </p>
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm" disabled={disabled}>
+            <ArrowDownUp className="h-4 w-4 mr-2" />
+            Deposit
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Deposit USDC</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          {!isAddressMatch && (
+            <div className="bg-destructive/15 text-destructive text-sm p-3 rounded-md flex items-start gap-2">
+              <span className="mt-0.5">⚠️</span>
+              <div>
+                <strong>Wallet Mismatch</strong>
+                <p className="mt-1">
+                  You are connected with {address?.slice(0, 6)}... but trying to
+                  deposit to {targetAddress?.slice(0, 6)}...
+                  <br />
+                  Please switch your wallet to the correct account to deposit
+                  defined funds.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {isWrongNetwork && (
+            <div className="bg-yellow-500/15 text-yellow-500 text-sm p-3 rounded-md flex items-start gap-2">
+              <span className="mt-0.5">⚠️</span>
+              <div className="flex-1">
+                <strong>Wrong Network</strong>
+                <p className="mt-1">
+                  You are not on Arbitrum One. Please switch networks to deposit.
+                </p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-2 h-7 border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-500"
+                  onClick={switchToArbitrum}
+                >
+                  Switch to Arbitrum
+                </Button>
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label className="text-sm text-muted-foreground">
+              Current Hyperliquid Balance
+            </Label>
+            <p className="text-2xl font-bold">
+              ${parseFloat(currentBalance).toFixed(2)}
+            </p>
+          </div>
+
+          {/* ... Balance Section ... */}
+          {arbitrumBalance !== null && (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-sm text-muted-foreground">
+                  Arbitrum USDC Balance
+                </Label>
+                <p className="text-lg font-semibold">
+                  {parseFloat(arbitrumBalance).toFixed(2)} USDC
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-sm text-muted-foreground">
+                  Arbitrum ETH Balance
+                </Label>
+                <div className="text-right">
+                  <p className={cn("text-sm font-semibold", isLowEth ? "text-destructive" : "")}>
+                    {ethDisplay} ETH
+
+                  </p>
+                  <p className="text-[10px] text-muted-foreground">
+                    Min: 0.0001 ETH
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="amount">Amount (USDC)</Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleMaxClick}
+                disabled={!arbitrumBalance}
+                className="h-6 text-xs"
+              >
+                Max
+              </Button>
+            </div>
+            <Input
+              id="amount"
+              type="number"
+              placeholder="0.00"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              disabled={isLoading || isWrongNetwork}
+              step="0.01"
+            />
+          </div>
+
+          <div className="rounded-lg bg-muted p-3 space-y-1">
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">NOTE:</span>
+              <span className="text-muted-foreground">Min deposit is $5</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">Network:</span>
+              <span className="text-muted-foreground">Arbitrum One</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">Estimated Time:</span>
+              <span className="text-muted-foreground">5-10 minutes</span>
+            </div>
+          </div>
+
+          <Button
+            onClick={isWrongNetwork ? switchToArbitrum : handleDeposit}
+            disabled={
+              isLoading || (!isWrongNetwork && (!amount || parseFloat(amount) <= 0 || !isAddressMatch))
+            }
+            className="w-full"
+            variant={isWrongNetwork ? "secondary" : "default"}
+          >
+            {isLoading
+              ? 'Processing...'
+              : isWrongNetwork
+                ? 'Switch to Arbitrum'
+                : 'Bridge USDC'
+            }
+          </Button>
+
+          {txHash && (
+            <div className="flex items-center justify-between rounded-lg bg-muted p-3">
+              <span className="text-sm">Transaction submitted</span>
+              <a
+                href={`https://arbiscan.io/tx/${txHash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-sm text-primary hover:underline"
+              >
+                View on Arbiscan
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/apps/perps/components/PasteStrategyButton.tsx b/src/apps/perps/components/PasteStrategyButton.tsx
new file mode 100644
index 00000000..3920a0fd
--- /dev/null
+++ b/src/apps/perps/components/PasteStrategyButton.tsx
@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import { Button } from './ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './ui/dialog';
+import { Textarea } from './ui/textarea';
+import { Label } from './ui/label';
+import { ClipboardPaste } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface StrategyPayload {
+  orderSide: 'buy' | 'sell';
+  ticker: string;
+  exchange: string;
+  entryPrice: number;
+  stopLoss: number;
+  tp1?: number;
+  tp2?: number;
+  tp3?: number;
+  tp4?: number;
+  tp5?: number;
+}
+
+interface ParsedStrategy {
+  ticker: string;
+  side: 'long' | 'short';
+  entryPrice: number;
+  stopLoss: number;
+  takeProfits: string;
+}
+
+interface PasteStrategyButtonProps {
+  onStrategyPasted: (strategy: ParsedStrategy) => void;
+}
+
+export function PasteStrategyButton({
+  onStrategyPasted,
+}: PasteStrategyButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [jsonInput, setJsonInput] = useState('');
+
+  const parseStrategy = (json: string): ParsedStrategy | null => {
+    try {
+      const payload: StrategyPayload = JSON.parse(json);
+
+      // Validate required fields
+      if (!payload.ticker || !payload.orderSide || !payload.entryPrice) {
+        toast.error('Invalid strategy payload', {
+          description:
+            'Missing required fields: ticker, orderSide, or entryPrice',
+        });
+        return null;
+      }
+
+      // Extract ticker symbol (remove USDT.P suffix)
+      const ticker = payload.ticker.replace(/USDT\.P$/i, '');
+
+      // Convert orderSide to long/short
+      const side = payload.orderSide === 'buy' ? 'long' : 'short';
+
+      // Collect take profits (tp1, tp2, tp3)
+      const tps: number[] = [];
+      if (payload.tp1) tps.push(payload.tp1);
+      if (payload.tp2) tps.push(payload.tp2);
+      if (payload.tp3) tps.push(payload.tp3);
+
+      return {
+        ticker,
+        side,
+        entryPrice: payload.entryPrice,
+        stopLoss: payload.stopLoss,
+        takeProfits: tps.join(', '),
+      };
+    } catch (error) {
+      toast.error('Invalid JSON', {
+        description: 'Please paste a valid JSON strategy payload',
+      });
+      return null;
+    }
+  };
+
+  const handlePaste = () => {
+    const strategy = parseStrategy(jsonInput);
+    if (strategy) {
+      onStrategyPasted(strategy);
+      setIsOpen(false);
+      setJsonInput('');
+      toast.success('Strategy loaded!', {
+        description: `${strategy.side.toUpperCase()} ${strategy.ticker} @ $${strategy.entryPrice}`,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <ClipboardPaste className="h-4 w-4" />
+          Paste Strategy
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Paste Trading Strategy</DialogTitle>
+          <DialogDescription>
+            Paste your JSON strategy payload to auto-populate the trade form
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="strategy-json">Strategy JSON</Label>
+            <Textarea
+              id="strategy-json"
+              placeholder={`{\n  "orderSide": "sell",\n  "ticker": "UNIUSDT.P",\n  "exchange": "BINANCE",\n  "entryPrice": 5.762,\n  "stopLoss": 6.037,\n  "tp1": 5.487,\n  "tp2": 5.212,\n  "tp3": 4.937\n}`}
+              value={jsonInput}
+              onChange={(e) => setJsonInput(e.target.value)}
+              className="font-mono text-xs min-h-[200px]"
+            />
+          </div>
+          <div className="flex gap-2 justify-end">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handlePaste}>Load Strategy</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/apps/perps/components/PinSetupModal.tsx b/src/apps/perps/components/PinSetupModal.tsx
new file mode 100644
index 00000000..9904a9e7
--- /dev/null
+++ b/src/apps/perps/components/PinSetupModal.tsx
@@ -0,0 +1,129 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Label } from './ui/label';
+import { Lock } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from './ui/input-otp';
+
+interface PinSetupModalProps {
+    isOpen: boolean;
+    onConfirm: (pin: string) => void;
+    onCancel: () => void;
+}
+
+export function PinSetupModal({ isOpen, onConfirm, onCancel }: PinSetupModalProps) {
+    const [pin, setPin] = useState('');
+    const [confirmPin, setConfirmPin] = useState('');
+    const confirmInputRef = useRef<React.ElementRef<typeof InputOTP>>(null);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (pin.length !== 4) {
+            toast.error('PIN must be 4 digits');
+            return;
+        }
+        if (pin !== confirmPin) {
+            toast.error('PINs do not match');
+            return;
+        }
+
+        onConfirm(pin);
+        // Reset state
+        setPin('');
+        setConfirmPin('');
+    };
+
+    // Auto-focus confirm input when PIN is complete
+    useEffect(() => {
+        if (pin.length === 4) {
+            confirmInputRef.current?.focus();
+        }
+    }, [pin]);
+
+    // Auto-submit when confirm PIN matches
+    useEffect(() => {
+        if (confirmPin.length === 4) {
+            if (confirmPin === pin) {
+                onConfirm(pin);
+                setPin('');
+                setConfirmPin('');
+            } else {
+                toast.error('PINs do not match');
+                // Optional: Clear confirm pin to let them try again? 
+                // Let's keep it so they can see what they typed or backspace.
+            }
+        }
+    }, [confirmPin, pin, onConfirm]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader className="items-center text-center">
+                    <DialogTitle className="flex items-center gap-2 justify-center">
+                        <Lock className="h-5 w-5" />
+                        Set Wallet PIN
+                    </DialogTitle>
+                    <DialogDescription className="text-center">
+                        Create a 4-digit PIN to secure your agent wallet.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit} className="space-y-6 py-4">
+                    <div className="space-y-2 flex flex-col items-center">
+                        <Label htmlFor="pin" className="w-full text-center">Enter PIN</Label>
+                        <InputOTP
+                            maxLength={4}
+                            value={pin}
+                            autoFocus
+                            onChange={(value) => setPin(value)}
+                        >
+                            <InputOTPGroup>
+                                <InputOTPSlot index={0} masked />
+                                <InputOTPSlot index={1} masked />
+                                <InputOTPSlot index={2} masked />
+                                <InputOTPSlot index={3} masked />
+                            </InputOTPGroup>
+                        </InputOTP>
+                    </div>
+
+                    <div className="space-y-2 flex flex-col items-center">
+                        <Label htmlFor="confirmPin" className="w-full text-center">Confirm PIN</Label>
+                        <InputOTP
+                            ref={confirmInputRef}
+                            maxLength={4}
+                            value={confirmPin}
+                            onChange={(value) => setConfirmPin(value)}
+                        >
+                            <InputOTPGroup>
+                                <InputOTPSlot index={0} masked />
+                                <InputOTPSlot index={1} masked />
+                                <InputOTPSlot index={2} masked />
+                                <InputOTPSlot index={3} masked />
+                            </InputOTPGroup>
+                        </InputOTP>
+                    </div>
+
+                    <div className="flex justify-center gap-2 pt-2">
+                        <Button type="button" variant="outline" onClick={onCancel}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={pin.length !== 4 || pin !== confirmPin}>
+                            Confirm & Create
+                        </Button>
+                    </div>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/apps/perps/components/PositionCard.tsx b/src/apps/perps/components/PositionCard.tsx
new file mode 100644
index 00000000..a1f8cc92
--- /dev/null
+++ b/src/apps/perps/components/PositionCard.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import {
+  TrendingUp,
+  TrendingDown,
+  Target,
+  Shield,
+  Trophy,
+  RefreshCw,
+} from 'lucide-react';
+import {
+  getUserState,
+  getOpenOrders,
+  getMarkPrice,
+} from '../lib/hyperliquid/client';
+import {
+  parsePositionForSymbol,
+  parseReduceOnlyOrders,
+} from '../lib/hyperliquid/parsers';
+import { computePnl, formatPrice, formatPnl } from '../lib/hyperliquid/pnl';
+import { cn } from '../lib/utils';
+
+interface PositionCardProps {
+  symbol: string;
+  address?: `0x${string}` | string;
+}
+
+export function PositionCard({ symbol, address }: PositionCardProps) {
+  const [loading, setLoading] = useState(false);
+  const [side, setSide] = useState<'long' | 'short' | null>(null);
+  const [size, setSize] = useState(0);
+  const [entryPx, setEntryPx] = useState(0);
+  const [markPx, setMarkPx] = useState(0);
+  const [stopLoss, setStopLoss] = useState<number | undefined>();
+  const [takeProfits, setTakeProfits] = useState<number[]>([]);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (!address || !symbol) return;
+
+    let alive = true;
+
+    async function load() {
+      try {
+        setLoading(true);
+
+        const [state, orders, mark] = await Promise.all([
+          getUserState(address as string),
+          getOpenOrders(address as string, symbol),
+          getMarkPrice(symbol),
+        ]);
+
+        if (!alive) return;
+
+        // Parse position for the symbol
+        const pos = state ? parsePositionForSymbol(state, symbol) : null;
+
+        if (pos) {
+          setSide(pos.side);
+          setSize(pos.size);
+          setEntryPx(pos.entryPx);
+
+          // Parse SL/TP from reduce-only orders
+          const { sl, tps } = parseReduceOnlyOrders(
+            orders,
+            symbol,
+            pos.side,
+            pos.entryPx
+          );
+          setStopLoss(sl);
+          setTakeProfits(tps);
+        } else {
+          setSide(null);
+          setSize(0);
+          setEntryPx(0);
+          setStopLoss(undefined);
+          setTakeProfits([]);
+        }
+
+        setMarkPx(mark ?? 0);
+        setLastUpdate(new Date());
+      } catch (error) {
+        console.error('Error loading position:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+    const id = setInterval(load, 2000);
+
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, [address, symbol]);
+
+  const pnl = useMemo(() => {
+    if (!side || !size || !entryPx || !markPx) {
+      return { pnlUsd: 0, pnlPct: 0 };
+    }
+    return computePnl(side, size, entryPx, markPx);
+  }, [side, size, entryPx, markPx]);
+
+  if (!address) {
+    return null;
+  }
+
+  if (!side) {
+    return (
+      <Card className="shadow-card">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center justify-between">
+            <span>Position: {symbol}</span>
+            <Badge variant="outline" className="text-muted-foreground">
+              No Position
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-6 text-muted-foreground">
+            No open {symbol} position
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isProfitable = pnl.pnlUsd > 0;
+  const isLong = side === 'long';
+
+  return (
+    <Card className="shadow-card border-2 hover:border-primary/30 transition-colors">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            Position: {symbol}
+            <Badge
+              variant="outline"
+              className={cn(
+                isLong
+                  ? 'text-success border-success'
+                  : 'text-destructive border-destructive'
+              )}
+            >
+              {isLong ? (
+                <>
+                  <TrendingUp className="h-3 w-3 mr-1" />
+                  LONG
+                </>
+              ) : (
+                <>
+                  <TrendingDown className="h-3 w-3 mr-1" />
+                  SHORT
+                </>
+              )}
+            </Badge>
+          </CardTitle>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <RefreshCw className={cn('h-3 w-3', loading && 'animate-spin')} />
+            {lastUpdate && <span>{lastUpdate.toLocaleTimeString()}</span>}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Size and Prices */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="p-3 bg-secondary/50 rounded-lg">
+            <p className="text-xs text-muted-foreground mb-1">Size</p>
+            <p className="font-mono-numbers font-semibold">
+              {formatPrice(size, 4)}
+            </p>
+          </div>
+          <div className="p-3 bg-secondary/50 rounded-lg">
+            <p className="text-xs text-muted-foreground mb-1">Entry Price</p>
+            <p className="font-mono-numbers font-semibold">
+              ${formatPrice(entryPx, 2)}
+            </p>
+          </div>
+        </div>
+
+        {/* Mark Price */}
+        <div className="p-3 bg-primary/5 rounded-lg border border-primary/20">
+          <p className="text-xs text-muted-foreground mb-1">
+            Current Mark Price
+          </p>
+          <p className="font-mono-numbers font-semibold text-lg">
+            ${formatPrice(markPx, 2)}
+          </p>
+        </div>
+
+        {/* PnL */}
+        <div
+          className={cn(
+            'p-4 rounded-lg border-2',
+            isProfitable
+              ? 'bg-success/10 border-success/30'
+              : 'bg-destructive/10 border-destructive/30'
+          )}
+        >
+          <p className="text-xs text-muted-foreground mb-2">Unrealized PnL</p>
+          <div className="flex items-baseline gap-3">
+            <p
+              className={cn(
+                'font-mono-numbers font-bold text-2xl',
+                isProfitable ? 'text-success' : 'text-destructive'
+              )}
+            >
+              {formatPnl(pnl.pnlUsd)}
+            </p>
+            <p
+              className={cn(
+                'font-mono-numbers font-semibold text-lg',
+                isProfitable ? 'text-success' : 'text-destructive'
+              )}
+            >
+              ({formatPnl(pnl.pnlPct, true)})
+            </p>
+          </div>
+        </div>
+
+        {/* SL and TP */}
+        <div className="space-y-2">
+          {stopLoss && (
+            <div className="flex items-center gap-3 p-3 bg-destructive/10 rounded-lg">
+              <div className="p-2 bg-destructive/20 rounded">
+                <Shield className="h-4 w-4 text-destructive" />
+              </div>
+              <div className="flex-1">
+                <p className="text-xs text-muted-foreground">Stop Loss</p>
+                <p className="font-mono-numbers font-semibold text-destructive">
+                  ${formatPrice(stopLoss, 2)}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {takeProfits.length > 0 && (
+            <div className="flex items-start gap-3 p-3 bg-success/10 rounded-lg">
+              <div className="p-2 bg-success/20 rounded">
+                <Trophy className="h-4 w-4 text-success" />
+              </div>
+              <div className="flex-1">
+                <p className="text-xs text-muted-foreground mb-1">
+                  Take Profit Targets
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {takeProfits.map((tp, idx) => (
+                    <Badge
+                      key={idx}
+                      variant="outline"
+                      className="text-success border-success font-mono-numbers"
+                    >
+                      ${formatPrice(tp, 2)}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!stopLoss && takeProfits.length === 0 && (
+            <div className="text-center py-3 text-sm text-muted-foreground">
+              No SL/TP orders detected
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/PositionsCard.tsx b/src/apps/perps/components/PositionsCard.tsx
new file mode 100644
index 00000000..88b3b6e3
--- /dev/null
+++ b/src/apps/perps/components/PositionsCard.tsx
@@ -0,0 +1,1317 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card';
+import { Skeleton } from '../components/ui/skeleton';
+import { Button } from '../components/ui/button';
+import { RefreshCw, X, ChevronLeft, AlertTriangle } from 'lucide-react';
+import { useIsMobile } from '../hooks/use-mobile';
+import { getUserState } from '../lib/hyperliquid/client';
+import type {
+  HyperliquidPosition,
+  HyperliquidOrder,
+  UniverseAsset,
+} from '../lib/hyperliquid/types';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../components/ui/collapsible';
+import { ChevronDown } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogTrigger,
+} from '../components/ui/dialog';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Slider } from '../components/ui/slider';
+import { toast } from 'sonner';
+import {
+  getAgentWallet,
+  getImportedAccount,
+  isAgentWalletEncrypted,
+  unlockAgentWallet,
+  unlockImportedAccount,
+  isImportedAccountEncrypted,
+} from '../lib/hyperliquid/keystore';
+import {
+  placeMarketOrderAgent,
+  cancelOrderAgent,
+} from '../lib/hyperliquid/sdk';
+import {
+  getMarkPrice,
+  getOpenOrders,
+  getFrontendOpenOrders,
+  getMetaAndAssetCtxs,
+  getUserFills,
+} from '../lib/hyperliquid/client';
+import { TokenIcon } from './TokenIcon';
+import { UnlockWalletModal } from './UnlockWalletModal';
+
+interface PositionsCardProps {
+  masterAddress: string;
+  onPositionClick?: (symbol: string) => void;
+  onRefresh?: () => void;
+  userState?: any; // Using any for now to avoid strict type issues with passed state, or  userState?: UserState;
+  assetPositions?: HyperliquidPosition[]; // Direct pass-through
+  openOrders?: HyperliquidOrder[];
+}
+
+export function PositionsCard({
+  masterAddress,
+  onPositionClick,
+  userState,
+  assetPositions: directPositions, // Rename
+  openOrders: externalOpenOrders,
+  onRefresh,
+}: PositionsCardProps) {
+  const isMobile = useIsMobile();
+  const [positions, setPositions] = useState<HyperliquidPosition[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
+  const [expandedPositionIndex, setExpandedPositionIndex] = useState<
+    number | null
+  >(null);
+  const [positionToClose, setPositionToClose] = useState<HyperliquidPosition | null>(null);
+  const [closePercentage, setClosePercentage] = useState<number>(100);
+  const [isClosing, setIsClosing] = useState(false);
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false);
+  const [universe, setUniverse] = useState<UniverseAsset[]>([]);
+  const [openOrders, setOpenOrders] = useState<HyperliquidOrder[]>([]);
+  const [internalUserState, setInternalUserState] = useState<UserState | null>(null);
+
+  // Unlock Modal State
+  const [showUnlockModal, setShowUnlockModal] = useState(false);
+  const [pendingAction, setPendingAction] = useState<{ type: 'close' | 'cancel', data?: any } | null>(null);
+
+
+  const handlePositionClick = (coin: string) => {
+    // 1. Load asset into chart/trade form via parent
+    if (onPositionClick) {
+      onPositionClick(coin);
+    }
+  };
+
+  const fetchData = useCallback(async () => {
+    if (!masterAddress) return;
+
+    setIsLoading(true);
+    try {
+      // If we have external data, we only need metadata and prices
+      // checks if we need to fetch user data
+      const shouldFetchUser = !userState && !directPositions; // Only fetch if no external userState or directPositions
+
+      const promises: Promise<any>[] = [
+        getMetaAndAssetCtxs(),
+      ];
+
+      if (shouldFetchUser) {
+        promises.push(getUserState(masterAddress));
+        promises.push(getFrontendOpenOrders(masterAddress));
+      }
+
+      const results = await Promise.all(promises);
+      const metaData = results[0];
+      const fetchedUserState = shouldFetchUser ? results[1] : userState;
+      const fetchedOrders = shouldFetchUser ? results[2] : externalOpenOrders;
+
+      if (shouldFetchUser) {
+        setInternalUserState(fetchedUserState);
+      }
+
+      let currentUniverse = universe;
+      const priceMap: Record<string, number> = {};
+      if (
+        metaData &&
+        Array.isArray(metaData) &&
+        metaData[0]?.universe &&
+        Array.isArray(metaData[1])
+      ) {
+        const universeData = metaData[0].universe;
+        setUniverse(universeData);
+        currentUniverse = universeData; // Use fresh data for immediate lookup
+        const assetCtxs = metaData[1];
+
+        universeData.forEach((asset: any, index: number) => {
+          const ctx = assetCtxs[index];
+          if (ctx && ctx.markPx) {
+            priceMap[asset.name] = parseFloat(ctx.markPx);
+          }
+        });
+      }
+
+      const effectiveState = userState || internalUserState;
+      // Prefer direct positions if available, otherwise check state
+      const sourcePositions = directPositions || effectiveState?.assetPositions;
+
+      if (sourcePositions) {
+        const uniqueKeys = new Set();
+
+        // Robust Mapping Logic
+        const openPositions = sourcePositions
+          .map((pos: any) => {
+            try {
+              // Handle potential structure mismatch (wrapped vs flat)
+              const rawPos = pos.position || pos;
+
+              // Ensure uniqueness based on coin
+              if (uniqueKeys.has(rawPos.coin)) {
+                console.warn(`Duplicate position for ${rawPos.coin} found, skipping.`);
+                return null;
+              }
+              uniqueKeys.add(rawPos.coin);
+
+              // Enrich with mark price if missing or zero
+              let markPx = rawPos.markPx;
+              if (
+                (!markPx || parseFloat(markPx) === 0) &&
+                priceMap[rawPos.coin]
+              ) {
+                markPx = priceMap[rawPos.coin].toString();
+              }
+
+              // Robust Universe Lookup
+              let coinInfo = currentUniverse.find((u) => u.name === rawPos.coin);
+
+              if (!coinInfo) {
+                // FALLBACK: If coin not found in universe, use default formatting
+                // This ensures we show the position even if metadata is missing/loading
+                console.warn(`Warning: Universe metadata missing for ${rawPos.coin}, using defaults`);
+                coinInfo = {
+                  name: rawPos.coin,
+                  szDecimals: 4, // Default for most assets
+                  maxLeverage: 50,
+                };
+              }
+
+              return {
+                ...rawPos,
+                markPx,
+                coinInfo,
+              };
+            } catch (e) {
+              console.warn('CRITICAL WARNING: Error processing position item:', e, pos);
+              return null;
+            }
+          })
+          .filter((p: any) => !!p); // Only filter nulls/errors, allow 0 size for debugging
+
+        setPositions(openPositions);
+      } else {
+        setPositions([]); // Clear positions if none found
+      }
+
+      setOpenOrders(fetchedOrders || []);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [masterAddress, userState, directPositions, externalOpenOrders, internalUserState]); // Added internalUserState to dependencies, removed universe
+
+  useEffect(() => {
+    fetchData();
+    // Only poll if we don't have external data (to avoid rate limiting)
+    if (!userState && !directPositions) {
+      const interval = setInterval(fetchData, 10000);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, userState, directPositions]); // Re-run when external data changes
+
+  // Auto-collapse when there are no positions or orders, auto-open when there are
+  useEffect(() => {
+    if (positions.length === 0 && openOrders.length === 0) {
+      setIsOpen(false);
+    } else {
+      setIsOpen(true);
+    }
+  }, [positions.length, openOrders.length]);
+
+  const formatNumber = (
+    value: string | number,
+    decimals: number = 2
+  ): string => {
+    if (!value) return '-';
+    return parseFloat(value.toString()).toFixed(decimals);
+  };
+
+  const formatPrice = (value: string | number): string => {
+    if (!value) return '-';
+    const val = parseFloat(value.toString());
+    if (val === 0) return '0.00';
+    if (Math.abs(val) < 1) return val.toFixed(5);
+    return val.toFixed(2);
+  };
+
+  const formatPnl = (pnl: string) => {
+    const pnlNum = parseFloat(pnl);
+    const formatted = formatNumber(pnlNum, 2);
+    const className = pnlNum >= 0 ? 'text-green-500' : 'text-red-500';
+    return { formatted, className };
+  };
+
+  const calculateLeverage = (position: any): string => {
+    if (position.leverage && typeof position.leverage.value === 'number') {
+      return `${position.leverage.value}x`;
+    }
+    // Fallback to effective leverage calculation if SDK value is missing
+    const positionValue =
+      Math.abs(parseFloat(position.szi)) * parseFloat(position.entryPx);
+    const marginUsed = parseFloat(position.marginUsed);
+    if (marginUsed === 0) return '0x';
+    return `${formatNumber(positionValue / marginUsed, 1)}x`;
+  };
+
+  const handleOpenCloseDialog = (position: any) => {
+    setPositionToClose(position);
+    setClosePercentage(100);
+    setCloseDialogOpen(true);
+  };
+
+  /* Removed getCoinId as we reuse cached universe */
+
+  const handleExecuteClose = async () => {
+    if (!positionToClose) return;
+    setIsClosing(true);
+    try {
+      let privateKey: string | undefined;
+
+      // 1. Check for Imported Account (Priority)
+      const imported = getImportedAccount();
+      if (imported) {
+        privateKey = imported.privateKey;
+      }
+      // 2. Fallback to Agent Wallet linked to connected wallet
+      else {
+        const agent = await getAgentWallet(masterAddress);
+        if (agent?.approved) {
+          privateKey = agent.privateKey;
+        }
+      }
+
+      if (!privateKey) {
+        // CHECK FOR LOCKED STATE
+        if (isImportedAccountEncrypted() || isAgentWalletEncrypted(masterAddress)) {
+          setPendingAction({ type: 'close' });
+          setShowUnlockModal(true);
+          setIsClosing(false); // Reset loading state
+          return;
+        }
+
+        throw new Error(
+          'Agent not found. Please import an account or create an agent.'
+        );
+      }
+
+      // Use cached universe to find coin ID
+      const coinIndex = universe.findIndex(
+        (a: any) => a.name === positionToClose.coin
+      );
+      if (coinIndex === -1) {
+        throw new Error(`Asset ${positionToClose.coin} not found in metadata`);
+      }
+      const coinId = coinIndex;
+
+      const totalSize = Math.abs(parseFloat(positionToClose.szi));
+      const sizeToClose = totalSize * (closePercentage / 100);
+      const sizeStr = sizeToClose.toFixed(6);
+      const size = parseFloat(sizeStr);
+
+      const currentPrice =
+        parseFloat(positionToClose.markPx) ||
+        parseFloat(positionToClose.entryPx);
+      const isLong = parseFloat(positionToClose.szi) > 0;
+
+      await placeMarketOrderAgent(privateKey as `0x${string}`, {
+        coinId,
+        isBuy: !isLong,
+        size,
+        currentPrice,
+        reduceOnly: true,
+      });
+
+      toast.success('Order submitted');
+      setCloseDialogOpen(false);
+      setTimeout(() => {
+        fetchData();
+        onRefresh?.();
+      }, 1000);
+      setExpandedPositionIndex(null);
+    } catch (e: any) {
+      toast.error(e.message);
+    } finally {
+      setIsClosing(false);
+    }
+  };
+
+  const isBuy = (side: string) => side === 'B';
+
+  const handleCancelOrder = async (oid: number) => {
+    let loadingToast: string | number | undefined;
+    try {
+      // Find the order to get the coin/asset info
+      const order = openOrders.find((o) => o.oid === oid);
+      if (!order) {
+        toast.error('Order not found');
+        return;
+      }
+
+      loadingToast = toast.info('Canceling order...', {
+        description: `${order.coin} - Order ID: ${oid}`,
+      });
+
+      let privateKey: string | undefined;
+
+      // 1. Check for Imported Account (Priority)
+      const imported = getImportedAccount();
+      if (imported) {
+        privateKey = imported.privateKey;
+      }
+      // 2. Fallback to Agent Wallet linked to connected wallet
+      else {
+        const agent = await getAgentWallet(masterAddress);
+        if (agent?.approved) {
+          privateKey = agent.privateKey;
+        }
+      }
+
+      if (!privateKey) {
+        // CHECK FOR LOCKED STATE
+        if (isImportedAccountEncrypted() || isAgentWalletEncrypted(masterAddress)) {
+          toast.dismiss(loadingToast);
+          setPendingAction({ type: 'cancel', data: oid });
+          setShowUnlockModal(true);
+          return;
+        }
+
+        toast.dismiss(loadingToast);
+        toast.error('Agent wallet not found');
+        return;
+      }
+
+      // Use cached universe to find coin ID
+      const coinIndex = universe.findIndex((a: any) => a.name === order.coin);
+      let coinId: number | undefined;
+
+      if (coinIndex !== -1) {
+        coinId = coinIndex;
+      }
+
+      if (coinId === undefined) {
+        toast.dismiss(loadingToast);
+        toast.error('Could not find asset ID', {
+          description: `Asset: ${order.coin}`,
+        });
+        return;
+      }
+
+      await cancelOrderAgent(privateKey as `0x${string}`, {
+        coinId: coinId,
+        oid: oid,
+      });
+
+      toast.dismiss(loadingToast);
+      toast.success('Order canceled successfully', {
+        description: `${order.coin}`,
+      });
+
+      // Refresh orders list
+      await fetchData();
+      onRefresh?.();
+    } catch (e: any) {
+      console.error('Error canceling order:', e);
+      if (loadingToast) toast.dismiss(loadingToast);
+      toast.error('Failed to cancel order', {
+        description: e.message || 'Unknown error',
+      });
+    }
+  };
+
+  // Helper to aggregate TP and SL orders for a specific coin
+  const getOpenTP_SL = (coin: string, positionSize: number) => {
+    const positionOrders = openOrders.filter(
+      (o) => o.coin === coin && o.reduceOnly
+    );
+
+    // Determine position direction (Long > 0, Short < 0)
+    const isLong = positionSize > 0;
+
+    const tps: { price: number; size: number }[] = [];
+    const sls: { price: number; size: number }[] = [];
+
+    positionOrders.forEach((order) => {
+      // Determine if it's a closing order (Long needs Sell, Short needs Buy)
+      const isBuy = order.side === 'B';
+      const isClosing = (isLong && !isBuy) || (!isLong && isBuy);
+
+      if (isClosing) {
+        // Get trigger price - API returns it directly on order object
+        const triggerPx = parseFloat(
+          order.triggerPx ||
+          order.trigger?.triggerPx ||
+          order.triggerCondition?.triggerPx ||
+          '0'
+        );
+        const limitPx = parseFloat(order.limitPx || '0');
+        const price = triggerPx > 0 ? triggerPx : limitPx;
+        const size = parseFloat(order.sz);
+
+        // Classify as TP or SL using orderType from API
+        if (
+          order.orderType &&
+          order.orderType.toLowerCase().includes('take profit')
+        ) {
+          tps.push({ price, size });
+        } else if (
+          order.orderType &&
+          order.orderType.toLowerCase().includes('stop')
+        ) {
+          sls.push({ price, size });
+        } else if (order.reduceOnly) {
+          // Fallback: classify based on price comparison for reduceOnly orders
+          const position = positions.find((p) => p.coin === coin);
+          const markPx = parseFloat(
+            position?.markPx || position?.entryPx || '0'
+          );
+
+          if (markPx > 0 && price > 0) {
+            if (isLong) {
+              // Long: TP > Mark, SL < Mark
+              if (price > markPx) tps.push({ price, size });
+              else sls.push({ price, size });
+            } else {
+              // Short: TP < Mark, SL > Mark
+              if (price < markPx) tps.push({ price, size });
+              else sls.push({ price, size });
+            }
+          }
+        }
+      }
+    });
+
+    return {
+      tps: tps.sort((a, b) => a.price - b.price),
+      sls: sls.sort((a, b) => a.price - b.price),
+    };
+  };
+
+
+  const handleUnlock = async (pin: string): Promise<boolean> => {
+    try {
+      // Try unlocking imported account first
+      if (isImportedAccountEncrypted()) {
+        const unlocked = await unlockImportedAccount(pin);
+        if (unlocked) {
+          setShowUnlockModal(false);
+          // Retry pending action
+          if (pendingAction?.type === 'close') {
+            handleExecuteClose();
+          } else if (pendingAction?.type === 'cancel' && pendingAction.data) {
+            handleCancelOrder(pendingAction.data);
+          }
+          setPendingAction(null);
+          return true;
+        }
+      }
+
+      // Try unlocking agent wallet
+      if (isAgentWalletEncrypted(masterAddress)) {
+        const unlocked = await unlockAgentWallet(masterAddress, pin);
+        if (unlocked) {
+          setShowUnlockModal(false);
+          // Retry pending action
+          if (pendingAction?.type === 'close') {
+            handleExecuteClose();
+          } else if (pendingAction?.type === 'cancel' && pendingAction.data) {
+            handleCancelOrder(pendingAction.data);
+          }
+          setPendingAction(null);
+          return true;
+        }
+      }
+    } catch (e) {
+      console.error('Unlock failed', e);
+    }
+    return false;
+  };
+
+  return (
+    <Card className="w-full">
+      <UnlockWalletModal
+        isOpen={showUnlockModal}
+        onUnlock={handleUnlock}
+        onClose={() => setShowUnlockModal(false)}
+      />
+      <Dialog open={closeDialogOpen} onOpenChange={setCloseDialogOpen}>
+        <DialogContent className="sm:max-w-[425px] bg-card text-card-foreground">
+          <DialogHeader>
+            <DialogTitle>Close {positionToClose?.coin}</DialogTitle>
+            <DialogDescription>Select amount to close.</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="flex items-center justify-between">
+              <Label>Amount</Label>
+              <span className="font-mono">{closePercentage}%</span>
+            </div>
+            <Slider
+              defaultValue={[100]}
+              max={100}
+              step={25}
+              value={[closePercentage]}
+              onValueChange={(vals) => setClosePercentage(vals[0])}
+            />
+            <div className="flex justify-between gap-2 mt-2">
+              {[25, 50, 75, 100].map((pct) => (
+                <Button
+                  key={pct}
+                  variant={closePercentage === pct ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setClosePercentage(pct)}
+                  className="flex-1"
+                >
+                  {pct}%
+                </Button>
+              ))}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCloseDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleExecuteClose}
+              disabled={isClosing}
+            >
+              {isClosing ? 'Closing...' : 'Confirm Close'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3">
+          <CollapsibleTrigger className="flex items-center gap-2 hover:opacity-80 transition-opacity focus-visible:outline-none">
+            <CardTitle className="text-lg">
+              Positions & Orders
+            </CardTitle>
+            <ChevronDown
+              className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            />
+          </CollapsibleTrigger>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={fetchData}
+            disabled={isLoading}
+            className="h-8 w-8"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
+            />
+          </Button>
+        </CardHeader>
+        <CollapsibleContent>
+          <CardContent className={isMobile ? 'p-4' : ''}>
+            <div className="mb-6">
+              <h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
+                Open Positions
+                <span className="text-xs font-normal bg-muted px-2 py-0.5 rounded-full">
+                  {positions.length}
+                </span>
+              </h3>
+
+              {positions.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-4 bg-muted/20 rounded-lg border border-dashed">
+                  No open positions
+                </p>
+              ) : isLoading ? (
+                <div className="space-y-3">
+                  {[1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-24 w-full rounded-lg" />
+                  ))}
+                </div>
+              ) : expandedPositionIndex !== null &&
+                positions[expandedPositionIndex] ? (
+                (() => {
+                  const position = positions[expandedPositionIndex];
+                  const pnl = formatPnl(position.unrealizedPnl);
+                  const marginUsedVal = parseFloat(position.marginUsed);
+                  const roe =
+                    marginUsedVal > 0
+                      ? (parseFloat(position.unrealizedPnl) / marginUsedVal) * 100
+                      : 0;
+                  const isLong = parseFloat(position.szi) > 0;
+                  const leverage = calculateLeverage(position);
+
+                  // Get aggregated TPs and SLs
+                  const { tps, sls } = getOpenTP_SL(
+                    position.coin,
+                    parseFloat(position.szi)
+                  );
+
+                  return (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-right-4 duration-200">
+                      <div className="flex items-center justify-between pb-2 border-b border-border/50">
+                        <Button
+                          variant="ghost"
+                          className="pl-0 gap-1 hover:bg-transparent hover:text-primary"
+                          onClick={() => setExpandedPositionIndex(null)}
+                        >
+                          <ChevronLeft className="h-5 w-5" />
+                          <span className="text-base font-semibold">Back</span>
+                        </Button>
+                        <span className="text-sm text-muted-foreground">
+                          Open Position
+                        </span>
+                      </div>
+
+                      <div className="flex justify-between items-center py-2">
+                        <div className="flex items-center gap-3">
+                          <TokenIcon symbol={position.coin} size={32} />
+                          <div>
+                            <div className="font-bold text-lg">
+                              {position.coin}
+                            </div>
+                            <div
+                              className={`text-sm font-medium ${isLong ? 'text-green-500' : 'text-red-500'}`}
+                            >
+                              {isLong ? 'Long' : 'Short'} {leverage}
+                            </div>
+                          </div>
+                        </div>
+                        <div className={`text-right ${pnl.className}`}>
+                          <div className="font-bold text-lg">
+                            ${pnl.formatted}
+                          </div>
+                          <div className="text-sm">{formatNumber(roe, 2)}%</div>
+                        </div>
+                      </div>
+
+                      <div className="bg-muted/30 rounded-lg p-4 space-y-4">
+                        <h4 className="text-sm font-semibold flex items-center gap-2">
+                          Trade Details
+                        </h4>
+                        <div className="grid grid-cols-2 gap-y-4 gap-x-4 text-sm">
+                          <div>
+                            <span className="text-xs text-muted-foreground block mb-1">
+                              Entry Price
+                            </span>
+                            <span className="font-medium text-base">
+                              ${formatPrice(position.entryPx)}
+                            </span>
+                          </div>
+                          <div>
+                            <span className="text-xs text-muted-foreground block mb-1">
+                              Mark Price
+                            </span>
+                            <span className="font-medium text-base">
+                              ${formatPrice(position.markPx || '0')}
+                            </span>
+                          </div>
+                          <div>
+                            <span className="text-xs text-muted-foreground block mb-1">
+                              Size ({position.coin})
+                            </span>
+                            <span className="font-medium text-base">
+                              {formatNumber(
+                                Math.abs(parseFloat(position.szi)),
+                                4
+                              )}
+                            </span>
+                          </div>
+                          <div>
+                            <span className="text-xs text-muted-foreground block mb-1">
+                              Liq. Price
+                            </span>
+                            <span className="font-medium text-base text-orange-500">
+                              {position.liquidationPx
+                                ? `$${formatPrice(position.liquidationPx)}`
+                                : '-'}
+                            </span>
+                          </div>
+                          <div>
+                            <span className="text-xs text-muted-foreground block mb-1">
+                              Margin Mode
+                            </span>
+                            <span className="font-medium text-base">
+                              {position.leverage?.type === 'isolated'
+                                ? 'Isolated'
+                                : 'Cross'}
+                            </span>
+                          </div>
+                          <div className="col-span-2 grid grid-cols-2 gap-4">
+                            <div>
+                              <span className="text-xs text-muted-foreground block mb-1">
+                                Take Profit
+                              </span>
+                              {tps.length > 0 ? (
+                                <span className="font-medium text-base text-green-500">
+                                  {tps
+                                    .map((tp) => `$${formatPrice(tp.price)}`)
+                                    .join(', ')}
+                                </span>
+                              ) : (
+                                <span className="font-medium text-base text-green-500">
+                                  {position.tpPrice
+                                    ? `$${formatPrice(position.tpPrice)}`
+                                    : '-'}
+                                </span>
+                              )}
+                            </div>
+                            <div>
+                              <span className="text-xs text-muted-foreground block mb-1">
+                                Stop Loss
+                              </span>
+                              {sls.length > 0 ? (
+                                <span className="font-medium text-base text-red-500">
+                                  {sls
+                                    .map((sl) => `$${formatPrice(sl.price)}`)
+                                    .join(', ')}
+                                </span>
+                              ) : (
+                                <span className="font-medium text-base text-red-500">
+                                  {position.slPrice
+                                    ? `$${formatPrice(position.slPrice)}`
+                                    : '-'}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="pt-4">
+                        <Button
+                          variant="destructive"
+                          className="w-full py-6 text-base font-semibold shadow-lg shadow-destructive/20"
+                          onClick={() => handleOpenCloseDialog(position)}
+                        >
+                          Close Position
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })()
+              ) : (
+                <div className="space-y-1">
+                  {!isMobile && (
+                    <div className="grid grid-cols-[1.2fr_0.8fr_0.8fr_0.8fr_0.8fr_0.8fr_0.8fr_1fr] gap-2 px-2 pb-2 text-xs text-muted-foreground font-semibold uppercase tracking-wider text-right">
+                      <div className="text-left">Coin</div>
+                      <div>Size</div>
+                      <div>Entry</div>
+                      <div>Mark</div>
+                      <div>Liq. Px</div>
+                      <div>TP / SL</div>
+                      <div>Margin</div>
+                      <div className="text-center">PnL</div>
+                    </div>
+                  )}
+
+                  {positions.map((position, index) => {
+                    const pnl = formatPnl(position.unrealizedPnl);
+                    const marginUsedVal = parseFloat(position.marginUsed);
+                    const roe =
+                      marginUsedVal > 0
+                        ? (parseFloat(position.unrealizedPnl) / marginUsedVal) * 100
+                        : 0;
+                    const isLong = parseFloat(position.szi) > 0;
+                    const positionValue =
+                      Math.abs(parseFloat(position.szi)) *
+                      parseFloat(position.markPx || '0');
+                    const marginUsed = parseFloat(position.marginUsed || '0');
+                    const leverage = position.leverage?.value || 0;
+
+                    const { tps, sls } = getOpenTP_SL(
+                      position.coin,
+                      parseFloat(position.szi)
+                    );
+                    const hasOrders = tps.length > 0 || sls.length > 0;
+
+                    if (isMobile) {
+                      return (
+                        <div
+                          key={index}
+                          onClick={() => {
+                            handlePositionClick(position.coin);
+                            setExpandedPositionIndex(index);
+                          }}
+                          className="flex flex-col gap-3 p-4 bg-card/50 hover:bg-muted/50 rounded-lg border border-border/50 mb-3 cursor-pointer"
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex items-center gap-3">
+                              <TokenIcon
+                                symbol={position.coin}
+                                size={32}
+                                className="shrink-0"
+                              />
+                              <div>
+                                <div className="font-bold text-base flex items-center gap-2">
+                                  {position.coin}
+                                  <span className={`text-xs font-bold px-1.5 py-0.5 rounded ${isLong ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
+                                    {isLong ? 'LONG' : 'SHORT'}
+                                  </span>
+                                </div>
+                                <div
+                                  className={`text-xs font-bold flex items-center gap-1 ${isLong ? 'text-green-500' : 'text-red-500'}`}
+                                >
+                                  {isLong ? 'Long' : 'Short'}
+                                  <span className="text-muted-foreground font-normal">
+                                    • {leverage}x
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className={`text-right ${pnl.className}`}>
+                              <div className="font-bold text-base">
+                                ${pnl.formatted}{' '}
+                                <span className="text-xs font-medium opacity-80">
+                                  ({formatNumber(roe, 1)}%)
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-sm mt-1 pt-3 border-t border-border/30">
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                Size
+                              </span>
+                              <span className="font-medium text-foreground">
+                                {formatNumber(position.szi, 3)}
+                              </span>
+                            </div>
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                Liq. Price
+                              </span>
+                              <span className="font-medium text-orange-500">
+                                {position.liquidationPx
+                                  ? `$${formatPrice(position.liquidationPx)}`
+                                  : '-'}
+                              </span>
+                            </div>
+
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                Entry
+                              </span>
+                              <span className="font-medium text-foreground">
+                                ${formatPrice(position.entryPx)}
+                              </span>
+                            </div>
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                Margin
+                              </span>
+                              <span className="font-medium text-foreground">
+                                ${formatNumber(marginUsed, 2)}
+                              </span>
+                            </div>
+
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                Mark
+                              </span>
+                              <span className="font-medium text-foreground">
+                                ${formatPrice(position.markPx || '0')}
+                              </span>
+                            </div>
+                            <div className="flex justify-between items-center text-xs">
+                              <span className="text-muted-foreground">
+                                TP / SL
+                              </span>
+                              <span className="font-medium text-foreground">
+                                {hasOrders ? (
+                                  <div className="text-right">
+                                    <span className="text-sm">
+                                      {(() => {
+                                        // Show closest orders only
+                                        const closestTp = isLong
+                                          ? tps[0]
+                                          : tps[tps.length - 1];
+                                        const closestSl = isLong
+                                          ? sls[sls.length - 1]
+                                          : sls[0];
+
+                                        return (
+                                          <div className="flex gap-2 justify-end">
+                                            {closestTp && (
+                                              <span className="text-green-500">
+                                                {' '}
+                                                ${formatPrice(closestTp.price)}
+                                              </span>
+                                            )}
+                                            {closestSl && (
+                                              <span className="text-red-500">
+                                                {' '}
+                                                ${formatPrice(closestSl.price)}
+                                              </span>
+                                            )}
+                                          </div>
+                                        );
+                                      })()}
+                                    </span>
+                                  </div>
+                                ) : (
+                                  <span className="flex gap-1 justify-end">
+                                    {tps.length === 0 && sls.length === 0 ? (
+                                      <span>-</span>
+                                    ) : (
+                                      <>
+                                        {tps.length > 0 && (
+                                          <span className="text-green-500">
+                                            ${formatPrice(tps[0].price)}
+                                          </span>
+                                        )}
+                                        {sls.length > 0 && (
+                                          <span className="text-red-500">
+                                            ${formatPrice(sls[0].price)}
+                                          </span>
+                                        )}
+                                      </>
+                                    )}
+                                  </span>
+                                )}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => {
+                          handlePositionClick(position.coin);
+                          setExpandedPositionIndex(index);
+                        }}
+                        className="grid grid-cols-[1.2fr_0.8fr_0.8fr_0.8fr_0.8fr_0.8fr_0.8fr_1fr] gap-2 p-3 bg-card/50 hover:bg-muted/50 active:bg-muted transition-colors rounded-lg items-center text-sm cursor-pointer border border-transparent hover:border-border/50 text-right"
+                      >
+                        <div className="flex items-center gap-2 text-left font-bold text-sm text-foreground">
+                          <TokenIcon
+                            symbol={position.coin}
+                            size={20}
+                            className="shrink-0"
+                          />
+                          <div className="flex items-baseline gap-1.5">
+                            <span>{position.coin}</span>
+                            <span className={`text-xs font-bold px-1.5 py-0.5 rounded ${isLong ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
+                              {isLong ? 'LONG' : 'SHORT'}
+                            </span>
+                            <span className="text-xs font-medium text-emerald-400">
+                              {calculateLeverage(position)}
+                            </span>
+                          </div>
+                        </div>
+                        <div
+                          className={
+                            isLong
+                              ? 'text-green-500 font-medium'
+                              : 'text-red-500 font-medium'
+                          }
+                        >
+                          {formatNumber(position.szi, 3)}
+                        </div>
+                        <div className="font-medium text-foreground">
+                          ${formatPrice(position.entryPx)}
+                        </div>
+                        <div className="font-medium text-foreground">
+                          ${formatPrice(position.markPx || '0')}
+                        </div>
+                        <div className="font-medium text-orange-500">
+                          {position.liquidationPx
+                            ? `$${formatPrice(position.liquidationPx)}`
+                            : '-'}
+                        </div>
+                        <div className="font-medium text-foreground flex justify-end items-center text-xs">
+                          {hasOrders ? (
+                            <div className="flex gap-2">
+                              {(() => {
+                                // Show closest orders only
+                                const closestTp = isLong
+                                  ? tps[0]
+                                  : tps[tps.length - 1];
+                                const closestSl = isLong
+                                  ? sls[sls.length - 1]
+                                  : sls[0];
+
+                                return (
+                                  <>
+                                    {closestTp && (
+                                      <span className="text-green-500">
+                                        ${formatPrice(closestTp.price)}
+                                      </span>
+                                    )}
+                                    {closestSl && (
+                                      <span className="text-red-500">
+                                        ${formatPrice(closestSl.price)}
+                                      </span>
+                                    )}
+                                  </>
+                                );
+                              })()}
+                            </div>
+                          ) : (
+                            <div className="flex flex-col items-end text-xs leading-tight">
+                              {tps.length === 0 && sls.length === 0 ? (
+                                <span className="text-muted-foreground">-</span>
+                              ) : (
+                                <>
+                                  {tps.length > 0 && (
+                                    <span className="text-green-500">
+                                      {formatPrice(tps[0].price)}
+                                    </span>
+                                  )}
+                                  {sls.length > 0 && (
+                                    <span className="text-red-500">
+                                      {formatPrice(sls[0].price)}
+                                    </span>
+                                  )}
+                                </>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                        <div className="font-medium text-foreground">
+                          ${formatNumber(marginUsed, 2)}
+                        </div>
+                        <div className={`text-center ${pnl.className}`}>
+                          <span className="text-sm font-bold">
+                            ${pnl.formatted}
+                          </span>
+                          <span className="text-sm opacity-80 ml-1">
+                            ({formatNumber(roe, 1)}%)
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
+                Open Orders
+                <span className="text-xs font-normal bg-muted px-2 py-0.5 rounded-full">
+                  {openOrders.length}
+                </span>
+              </h3>
+
+              {openOrders.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-4 bg-muted/20 rounded-lg border border-dashed">
+                  No open orders
+                </p>
+              ) : isLoading ? (
+                <div className="space-y-2">
+                  {[1, 2].map((i) => (
+                    <Skeleton key={i} className="h-12 w-full rounded-lg" />
+                  ))}
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {!isMobile && (
+                    <div className="grid grid-cols-[1fr_1fr_1fr_1fr_1fr_0.5fr] gap-2 px-2 pb-2 text-xs text-muted-foreground font-semibold uppercase tracking-wider text-right">
+                      <div className="text-left">Coin</div>
+                      <div className="text-center">Type</div>
+                      <div>Side</div>
+                      <div>Size</div>
+                      <div>Price</div>
+                      <div className="text-center">Action</div>
+                    </div>
+                  )}
+
+                  {openOrders.map((order, orderIndex) => {
+                    const buy = isBuy(order.side);
+                    const position = positions.find(
+                      (p) => p.coin === order.coin
+                    );
+
+                    // Determine order type based on reduceOnly and price comparison
+                    let type = order.orderType || 'Limit';
+
+                    // Normalize trigger price
+                    const triggerPxStr = order.triggerPx || order.trigger?.triggerPx || order.triggerCondition?.triggerPx;
+                    const hasTrigger = !!triggerPxStr && parseFloat(triggerPxStr) > 0;
+
+                    if (order.reduceOnly && position) {
+                      const isLong = parseFloat(position.szi) > 0;
+                      const isClosing = (isLong && !buy) || (!isLong && buy);
+
+                      if (isClosing) {
+                        const limitPrice = parseFloat(order.limitPx);
+                        const triggerPrice = hasTrigger ? parseFloat(triggerPxStr!) : 0;
+                        const executionPrice = hasTrigger ? triggerPrice : limitPrice;
+
+                        const markPrice = parseFloat(position.markPx || position.entryPx || '0');
+
+                        if (markPrice > 0) {
+                          let baseType = 'Limit';
+                          if (isLong) {
+                            // Long position: TP if price > mark, SL if price < mark
+                            baseType = executionPrice > markPrice ? 'Take Profit' : 'Stop Loss';
+                          } else {
+                            // Short position: TP if price < mark, SL if price > mark
+                            baseType = executionPrice < markPrice ? 'Take Profit' : 'Stop Loss';
+                          }
+
+                          type = `${baseType} ${hasTrigger ? 'Trigger' : 'Limit'}`;
+                        }
+                      } else {
+                        type = 'Reduce Only Limit';
+                      }
+                    } else if (hasTrigger) {
+                      // If not reduced only but has trigger, likely a simpler trigger order
+                      type = 'Trigger Order';
+                      if (order.orderType) type = order.orderType;
+                    }
+
+                    let sideLabel = buy ? 'Long' : 'Short';
+                    const isLong = position
+                      ? parseFloat(position.szi) > 0
+                      : false;
+
+                    // Override side label for closing orders
+                    if (order.reduceOnly && position) {
+                      const isClosing = (isLong && !buy) || (!isLong && buy);
+                      if (isClosing) {
+                        sideLabel = isLong ? 'Close Long' : 'Close Short';
+                      }
+                    }
+
+                    if (isMobile) {
+                      return (
+                        <div
+                          key={order.oid}
+                          className="flex flex-col gap-3 p-4 bg-card/50 hover:bg-muted/50 rounded-lg border border-border/50 mb-3"
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              <TokenIcon
+                                symbol={order.coin}
+                                size={32}
+                                className="shrink-0"
+                              />
+                              <div>
+                                <div className="font-bold text-base">
+                                  {order.coin}
+                                </div>
+                                <div
+                                  className={`text-xs font-bold ${buy ? 'text-green-500' : 'text-red-500'}`}
+                                >
+                                  {sideLabel}
+                                  <span className="text-muted-foreground font-normal ml-1 block">
+                                    {type}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 w-8 p-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                              onClick={() => handleCancelOrder(order.oid)}
+                            >
+                              <X className="h-5 w-5" />
+                            </Button>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-xs pt-2 border-t border-border/30">
+                            <div className="flex justify-between items-center">
+                              <span className="text-muted-foreground">
+                                Size
+                              </span>
+                              <span className="font-medium text-foreground">
+                                {formatNumber(order.sz, 4)}
+                              </span>
+                            </div>
+                            <div className="flex justify-between items-center">
+                              <span className="text-muted-foreground">
+                                Price
+                              </span>
+                              <span className="font-medium text-foreground">
+                                $
+                                {formatPrice(
+                                  parseFloat(
+                                    order.triggerPx ||
+                                    order.trigger?.triggerPx ||
+                                    order.triggerCondition?.triggerPx ||
+                                    order.limitPx ||
+                                    '0'
+                                  )
+                                )}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div
+                        key={order.oid}
+                        className="grid grid-cols-[1fr_1fr_1fr_1fr_1fr_0.5fr] gap-2 p-3 bg-card/50 hover:bg-muted/50 rounded-lg items-center text-sm border border-transparent hover:border-border/50 text-right"
+                      >
+                        <div className="flex items-center gap-2 text-left font-bold text-sm text-foreground">
+                          <TokenIcon
+                            symbol={order.coin}
+                            size={20}
+                            className="shrink-0"
+                          />
+                          <span>{order.coin}</span>
+                        </div>
+                        <div className="text-center font-medium text-xs text-muted-foreground">
+                          {type}
+                        </div>
+                        <div
+                          className={`font-bold ${buy ? 'text-green-500' : 'text-red-500'}`}
+                        >
+                          {sideLabel}
+                        </div>
+                        <div className="font-medium">
+                          {formatNumber(order.sz, 4)}
+                        </div>
+                        <div className="font-medium text-foreground">
+                          $
+                          {formatPrice(
+                            parseFloat(
+                              order.triggerPx ||
+                              order.trigger?.triggerPx ||
+                              order.triggerCondition?.triggerPx ||
+                              order.limitPx ||
+                              '0'
+                            )
+                          )}
+                        </div>
+                        <div className="flex justify-center">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive"
+                            onClick={() => handleCancelOrder(order.oid)}
+                          >
+                            <X className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/PriceTicker.tsx b/src/apps/perps/components/PriceTicker.tsx
new file mode 100644
index 00000000..7e731551
--- /dev/null
+++ b/src/apps/perps/components/PriceTicker.tsx
@@ -0,0 +1,229 @@
+import { useEffect, useState } from 'react';
+import type { AssetInfo } from '../lib/hyperliquid/types';
+
+interface PriceTickerProps {
+  selectedAsset: AssetInfo | null;
+}
+
+interface TickerData {
+  markPrice: string;
+  oraclePrice: string;
+  change24h: string;
+  changePercent24h: string;
+  volume24h: string;
+  openInterest: string;
+  fundingRate: string;
+  nextFundingTime: string;
+}
+
+export function PriceTicker({ selectedAsset }: PriceTickerProps) {
+  const [tickerData, setTickerData] = useState<TickerData | null>(null);
+
+  useEffect(() => {
+    if (!selectedAsset) return;
+
+    let ws: WebSocket | null = null;
+
+    const connect = () => {
+      ws = new WebSocket('wss://api.hyperliquid.xyz/ws');
+
+      ws.onopen = () => {
+        console.log('[Ticker] WebSocket connected');
+        // Subscribe to all mids (prices)
+        const midsMsg = {
+          method: 'subscribe',
+          subscription: { type: 'allMids' },
+        };
+        console.log(
+          '[Ticker] Sending allMids subscription:',
+          JSON.stringify(midsMsg)
+        );
+        ws?.send(JSON.stringify(midsMsg));
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          console.log('[Ticker] WebSocket message:', message);
+
+          if (message.channel === 'allMids' && message.data) {
+            const price = message.data.mids?.[selectedAsset.symbol];
+            if (price) {
+              setTickerData((prev) =>
+                prev
+                  ? {
+                    ...prev,
+                    markPrice: price,
+                  }
+                  : null
+              );
+            }
+          }
+        } catch (e) {
+          console.error('[Ticker] WebSocket message error:', e);
+        }
+      };
+
+      ws.onerror = (err) => {
+        console.error('[Ticker] WebSocket error:', err);
+      };
+
+      ws.onclose = () => {
+        console.log('[Ticker] WebSocket disconnected');
+        setTimeout(connect, 3000);
+      };
+    };
+
+    connect();
+
+    return () => {
+      if (ws) {
+        ws.onclose = null;
+        ws.close();
+      }
+    };
+  }, [selectedAsset]);
+
+  // Fetch initial market data from REST API
+  useEffect(() => {
+    if (!selectedAsset) return;
+
+    const fetchMarketData = async () => {
+      try {
+        const response = await fetch('https://api.hyperliquid.xyz/info', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'metaAndAssetCtxs' }),
+        });
+        const data = await response.json();
+
+        if (data && data.length >= 2) {
+          const assetCtx = data[1]?.find(
+            (ctx: any) => ctx.coin === selectedAsset.symbol
+          );
+          if (assetCtx) {
+            const prevDayPx = parseFloat(assetCtx.prevDayPx || '0');
+            const markPx = parseFloat(assetCtx.markPx || '0');
+            const change24h = markPx - prevDayPx;
+            const changePercent24h =
+              prevDayPx > 0
+                ? ((change24h / prevDayPx) * 100).toFixed(2)
+                : '0.00';
+
+            setTickerData({
+              markPrice: assetCtx.markPx || '0',
+              oraclePrice: assetCtx.oraclePx || '0',
+              change24h: change24h.toFixed(2),
+              changePercent24h,
+              volume24h: assetCtx.dayNtlVlm || '0',
+              openInterest: assetCtx.openInterest || '0',
+              fundingRate: assetCtx.funding || '0',
+              nextFundingTime: '00:00:00', // TODO: Calculate from funding time
+            });
+          }
+        }
+      } catch (error) {
+        console.error('[Ticker] Failed to fetch market data:', error);
+      }
+    };
+
+    fetchMarketData();
+  }, [selectedAsset]);
+
+  if (!selectedAsset || !tickerData) {
+    return null;
+  }
+
+  const isPositive = parseFloat(tickerData.changePercent24h) >= 0;
+
+  return (
+    <div className="flex items-center gap-6 px-4 pb-2 bg-card/50 border-b border-border text-sm">
+      {/* Symbol with icon */}
+      <div className="flex items-center gap-2">
+        <div className="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold text-xs">
+          {selectedAsset.symbol.charAt(0)}
+        </div>
+        <span className="font-semibold text-base">
+          {selectedAsset.symbol}-USDC
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {selectedAsset.maxLeverage}x
+        </span>
+      </div>
+
+      {/* Mark Price */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">Mark</span>
+        <span className="font-semibold">
+          {(() => {
+            const price = parseFloat(tickerData.markPrice);
+            if (price < 1 && price > 0) {
+              return '$' + price.toFixed(5);
+            }
+            return '$' + price.toFixed(2);
+          })()}
+        </span>
+      </div>
+
+      {/* Oracle Price */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">Oracle</span>
+        <span className="font-semibold">
+          {(() => {
+            const price = parseFloat(tickerData.oraclePrice);
+            if (price < 1 && price > 0) {
+              return '$' + price.toFixed(5);
+            }
+            return '$' + price.toFixed(2);
+          })()}
+        </span>
+      </div>
+
+      {/* 24h Change */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">24H Change</span>
+        <span
+          className={`font-semibold ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+        >
+          {tickerData.change24h} / {isPositive ? '+' : ''}
+          {tickerData.changePercent24h}%
+        </span>
+      </div>
+
+      {/* 24h Volume */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">24H Volume</span>
+        <span className="font-semibold">
+          $
+          {parseFloat(tickerData.volume24h).toLocaleString('en-US', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          })}
+        </span>
+      </div>
+
+      {/* Open Interest */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">Open Interest</span>
+        <span className="font-semibold">
+          $
+          {parseFloat(tickerData.openInterest).toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </span>
+      </div>
+
+      {/* Funding Rate */}
+      <div className="flex flex-col">
+        <span className="text-xs text-muted-foreground">
+          Funding / Countdown
+        </span>
+        <span className="font-semibold">
+          {(parseFloat(tickerData.fundingRate) * 100).toFixed(4)}%{' '}
+          {tickerData.nextFundingTime}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/PrivateKeyModal.tsx b/src/apps/perps/components/PrivateKeyModal.tsx
new file mode 100644
index 00000000..04ea2486
--- /dev/null
+++ b/src/apps/perps/components/PrivateKeyModal.tsx
@@ -0,0 +1,185 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Copy, Download, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { toast } from 'sonner';
+
+interface PrivateKeyModalProps {
+    isOpen: boolean;
+    address: string;
+    privateKey: string;
+    onClose: () => void;
+    mode?: 'created' | 'revealed';
+    mainAddress?: string; // EOA Address
+}
+
+export function PrivateKeyModal({
+    isOpen,
+    address,
+    privateKey,
+    onClose,
+    mode = 'created',
+    mainAddress,
+}: PrivateKeyModalProps) {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(privateKey);
+            setCopied(true);
+            toast.success('Private key copied to clipboard');
+
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+
+            timerRef.current = setTimeout(() => {
+                setCopied(false);
+                timerRef.current = null;
+            }, 2000);
+        } catch (error) {
+            toast.error('Failed to copy private key');
+        }
+    };
+
+    const handleDownload = () => {
+        let url = '';
+        let a: HTMLAnchorElement | null = null;
+
+        try {
+            // Validation
+            if (!address || !privateKey) {
+                throw new Error('Missing wallet data');
+            }
+
+            const data = JSON.stringify(
+                {
+                    address,
+                    privateKey,
+                    createdAt: new Date().toISOString(),
+                    note: "KEEP THIS SAFE. DO NOT SHARE."
+                },
+                null,
+                2
+            );
+
+            const blob = new Blob([data], { type: 'application/json' });
+            url = URL.createObjectURL(blob);
+            a = document.createElement('a');
+            a.href = url;
+            a.download = `agent-wallet-${address.slice(0, 8)}.json`;
+            document.body.appendChild(a);
+            a.click();
+            toast.success('Key file downloaded');
+        } catch (error) {
+            console.error('Download failed:', error);
+            toast.error(error instanceof Error ? error.message : 'Failed to download key file');
+        } finally {
+            // Cleanup
+            if (a) {
+                document.body.removeChild(a);
+            }
+            if (url) {
+                URL.revokeObjectURL(url);
+            }
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        {mode === 'created' ? (
+                            <>
+                                <CheckCircle2 className="h-5 w-5 text-success" />
+                                Wallet Secured Successfully
+                            </>
+                        ) : (
+                            <>
+                                <AlertTriangle className="h-5 w-5 text-warning" />
+                                Private Key Revealed
+                            </>
+                        )}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {mode === 'created'
+                            ? "Your agent wallet can perform actions on behalf of your account without having withdrawal permissions. You must still use your account's address to withdraw"
+                            : "Be careful! Anyone with this key can access your funds."
+                        }
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4 py-2">
+                    <div className="space-y-2">
+                        <Label>Main Wallet Address</Label>
+                        <div className="flex gap-2">
+                            <div className="text-sm font-mono bg-muted p-2 rounded break-all flex-1">
+                                {mainAddress || address}
+                            </div>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-9 w-9 shrink-0"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(mainAddress || address);
+                                    toast.success('Address copied');
+                                }}
+                            >
+                                <Copy className="h-4 w-4" />
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <Label>Private Key</Label>
+                        <div className="relative">
+                            <Input
+                                value={privateKey}
+                                readOnly
+                                className="font-mono pr-10 text-xs"
+                                type="text"
+                            />
+                        </div>
+                        <p className="text-[10px] text-muted-foreground">
+                            This private key can be used to trade on any device. Simply import it.
+                        </p>
+                    </div>
+
+                    <div className="flex gap-2 pt-2">
+                        <Button onClick={handleCopy} className="flex-1" variant="outline">
+                            {copied ? <CheckCircle2 className="h-4 w-4 mr-2" /> : <Copy className="h-4 w-4 mr-2" />}
+                            {copied ? 'Copied' : 'Copy Key'}
+                        </Button>
+                        <Button onClick={handleDownload} className="flex-1" variant="outline">
+                            <Download className="h-4 w-4 mr-2" />
+                            Download
+                        </Button>
+                    </div>
+
+                    <Button onClick={onClose} className="w-full mt-2">
+                        I have saved my key
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/apps/perps/components/SparklineChart.tsx b/src/apps/perps/components/SparklineChart.tsx
new file mode 100644
index 00000000..fe7210e7
--- /dev/null
+++ b/src/apps/perps/components/SparklineChart.tsx
@@ -0,0 +1,805 @@
+import { useEffect, useState, useCallback } from 'react';
+import type { AssetInfo } from '../lib/hyperliquid/types';
+import { getUserFills } from '../lib/hyperliquid/client';
+import { Card, CardContent } from './ui/card';
+import { useIsMobile } from '../hooks/use-mobile';
+import { TokenIcon } from './TokenIcon';
+
+interface SparklineChartProps {
+  selectedAsset: AssetInfo | null;
+  userState?: any;
+  openOrders?: any[];
+  accountAddress?: string | null;
+}
+
+interface CandleData {
+  time: number;
+  close: number;
+}
+
+interface MarketData {
+  funding: string;
+  openInterest: string;
+  prevDayPx: string;
+  dayNtlVlm: string;
+  premium: string;
+  oraclePx: string;
+  markPx: string;
+  midPx: string;
+  impactPxs: string[];
+  dayBaseVlm: string;
+}
+
+export function SparklineChart({ selectedAsset, userState, openOrders, accountAddress }: SparklineChartProps) {
+  const [candles, setCandles] = useState<CandleData[]>([]);
+  const [currentPrice, setCurrentPrice] = useState<number | null>(null);
+  const [marketData, setMarketData] = useState<MarketData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hoverData, setHoverData] = useState<{
+    x: number;
+    y: number;
+    price: number;
+    time: number;
+  } | null>(null);
+
+  const fetchMarketData = useCallback(async (symbol: string) => {
+    try {
+      const response = await fetch('https://api.hyperliquid.xyz/info', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'metaAndAssetCtxs' }),
+      });
+
+      if (!response.ok) throw new Error('Failed to fetch market data');
+
+      const data = await response.json();
+      if (
+        data &&
+        Array.isArray(data) &&
+        data[0]?.universe &&
+        Array.isArray(data[1])
+      ) {
+        const universe = data[0].universe;
+        const assetCtxs = data[1];
+
+        // Find the index of our asset
+        const assetIndex = universe.findIndex((a: any) => a.name === symbol);
+        if (assetIndex !== -1 && assetCtxs[assetIndex]) {
+          setMarketData(assetCtxs[assetIndex]);
+        }
+      }
+    } catch (err) {
+      console.error('[Sparkline] Error fetching market data:', err);
+    }
+  }, []);
+
+  const fetchCandles = useCallback(
+    async (symbol: string) => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const now = Date.now();
+        const twelveHoursAgo = now - 12 * 60 * 60 * 1000;
+
+        const response = await fetch('https://api.hyperliquid.xyz/info', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            type: 'candleSnapshot',
+            req: {
+              coin: symbol,
+              interval: '1m',
+              startTime: twelveHoursAgo,
+              endTime: now,
+            },
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+
+        const raw = await response.json();
+
+        if (!Array.isArray(raw)) {
+          throw new Error('Invalid response format');
+        }
+
+        const candleData: CandleData[] = raw
+          .filter((c) => c && c.t && c.c)
+          .map((candle) => ({
+            time: Number(candle.t),
+            close: parseFloat(candle.c),
+          }))
+          .sort((a, b) => a.time - b.time);
+
+        setCandles(candleData);
+
+        if (candleData.length > 0) {
+          setCurrentPrice(candleData[candleData.length - 1].close);
+        }
+
+        // Fetch market data
+        await fetchMarketData(symbol);
+      } catch (err) {
+        console.error('[Sparkline] Error fetching candles:', err);
+        setError(err instanceof Error ? err.message : 'Failed to fetch data');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchMarketData]
+  );
+
+  useEffect(() => {
+    if (!selectedAsset) {
+      setCandles([]);
+      setCurrentPrice(null);
+      setMarketData(null);
+      return;
+    }
+
+    fetchCandles(selectedAsset.symbol);
+  }, [selectedAsset, fetchCandles]);
+
+  useEffect(() => {
+    if (!selectedAsset) return;
+
+    const interval = setInterval(() => {
+      fetchCandles(selectedAsset.symbol);
+    }, 15000);
+
+    return () => clearInterval(interval);
+  }, [selectedAsset, fetchCandles]);
+
+  const getSparklinePath = () => {
+    if (candles.length < 2) return '';
+
+    const width = 800;
+    const height = 100;
+    const padding = 5;
+
+    const prices = candles.map((c) => c.close);
+    const minPrice = Math.min(...prices);
+    const maxPrice = Math.max(...prices);
+    const priceRange = maxPrice - minPrice || 1;
+
+    const points = candles.map((candle, index) => {
+      const x =
+        padding + (index / (candles.length - 1)) * (width - 2 * padding);
+      const y =
+        height -
+        padding -
+        ((candle.close - minPrice) / priceRange) * (height - 2 * padding);
+      return `${x},${y}`;
+    });
+
+    return `M ${points.join(' L ')}`;
+  };
+
+  const getPercentageChange = () => {
+    if (candles.length < 2) return 0;
+    const firstPrice = candles[0].close;
+    const lastPrice = candles[candles.length - 1].close;
+    return ((lastPrice - firstPrice) / firstPrice) * 100;
+  };
+
+  const formatVolume = (volume: string): string => {
+    const num = parseFloat(volume);
+    if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
+    if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
+    if (num >= 1e3) return `$${(num / 1e3).toFixed(2)}K`;
+    return `$${num.toFixed(2)}`;
+  };
+
+  const formatPrice = (value: number | string): string => {
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    if (Math.abs(num) < 1 && Math.abs(num) > 0) {
+      return num.toFixed(5);
+    }
+    return num.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  const formatNumber = (value: string, decimals: number = 2): string => {
+    const num = parseFloat(value);
+    return num.toLocaleString('en-US', {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    });
+  };
+
+  const isMobile = useIsMobile();
+  const percentChange = getPercentageChange();
+  const isPositive = percentChange >= 0;
+
+  // ----- Extract Position Data -----
+  let entryPrice: number | null = null;
+  let entryPercent: number | null = null;
+  let tpPrice: number | null = null;
+  let tpPercent: number | null = null;
+  let slPrice: number | null = null;
+  let slPercent: number | null = null;
+  const [entryTime, setEntryTime] = useState<number | null>(null);
+
+  if (selectedAsset && currentPrice && userState?.assetPositions) {
+    // Find active position
+    const position = userState.assetPositions.find(
+      (p: any) => p.position.coin === selectedAsset.symbol
+    );
+    if (position) {
+      const rawEntry = parseFloat(position.position.entryPx);
+      if (!isNaN(rawEntry) && rawEntry > 0) {
+        entryPrice = rawEntry;
+        entryPercent = ((currentPrice - entryPrice) / entryPrice) * 100;
+      }
+    }
+  }
+
+  useEffect(() => {
+    let mounted = true;
+    const fetchEntryTime = async () => {
+      if (!accountAddress || !selectedAsset || !entryPrice) {
+        if (mounted) setEntryTime(null);
+        return;
+      }
+
+      try {
+        const fills = await getUserFills(accountAddress);
+        // Find the most recent fill for this coin that is on the same side as current position
+        // Actually, just finding the last fill for the coin is a good approximation for "entry"
+        // if we assume linear position building.
+        // Fills are usually returned latest first? API returns all fills.
+        const assetFills = fills.filter((f: any) => f.coin === selectedAsset.symbol);
+
+        if (assetFills.length > 0) {
+          // Sort descending by time
+          assetFills.sort((a: any, b: any) => b.time - a.time);
+          const lastFill = assetFills[0];
+          if (mounted) setEntryTime(lastFill.time);
+        }
+      } catch (e) {
+        console.error('Error fetching fills:', e);
+      }
+    };
+
+    fetchEntryTime();
+
+    return () => { mounted = false; };
+  }, [accountAddress, selectedAsset?.symbol, entryPrice]); // Re-run if entryPrice determined (position exists)
+
+  if (!selectedAsset) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex items-center justify-center h-[150px] text-muted-foreground">
+            Select an asset to view the price chart
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  /* Helper to format dates for X-axis */
+  const formatAxisTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  /* Helper to get price levels for Y-axis */
+  const getPriceLevels = () => {
+    if (candles.length < 2) return null;
+    const prices = candles.map((c) => c.close);
+    const min = Math.min(...prices);
+    const max = Math.max(...prices);
+    const mid = (min + max) / 2;
+    return { min, mid, max };
+  };
+
+  const priceLevels = getPriceLevels();
+
+  // ----- Helper to Calculate Y Position for Custom Lines -----
+  const getPriceY = (price: number): number | null => {
+    if (!priceLevels) return null;
+    const { min, max } = priceLevels;
+    if (price < min || price > max) return null; // Out of range
+
+    const height = 100;
+    const padding = 5;
+    const priceRange = max - min || 1;
+
+    // Same formula as Sparkline
+    return height - padding - ((price - min) / priceRange) * (height - 2 * padding);
+  };
+
+
+
+  if (selectedAsset && currentPrice && openOrders) {
+    // Filter orders for this asset
+    const assetOrders = openOrders.filter((o: any) => o.coin === selectedAsset.symbol);
+
+    // Determine TP/SL logic (simplified from PositionsCard)
+    // TP: Order in opposite direction that takes profit
+    // SL: Order in opposite direction that stops loss/liquidation
+    // We need to know if we are Long or Short from the position
+    const position = userState?.assetPositions?.find(
+      (p: any) => p.position.coin === selectedAsset.symbol
+    );
+
+    if (position) {
+      const size = parseFloat(position.position.szi);
+      const isLong = size > 0;
+
+      // TP/SL are typically reduce-only orders
+      // For LONG: TP > Entry (Sell High), SL < Entry (Sell Low)
+      // For SHORT: TP < Entry (Buy Low), SL > Entry (Buy High)
+      // But effectively we just look for orders.
+
+      const tps: any[] = [];
+      const sls: any[] = [];
+
+      assetOrders.forEach((order: any) => {
+        const isReduceOnly = order.reduceOnly;
+        const isClosingOrder = (isLong && order.side === 'A') || // Long -> Sell (Ask)
+          (!isLong && order.side === 'B'); // Short -> Buy (Bid)
+
+        if (isClosingOrder && isReduceOnly) {
+          // Use triggerPx from API (same as PositionsCard fix)
+          const triggerPx = parseFloat(order.triggerPx || order.trigger?.triggerPx || order.triggerCondition?.triggerPx || '0');
+          const limitPx = parseFloat(order.limitPx || '0');
+          const px = triggerPx > 0 ? triggerPx : limitPx;
+
+          // Classify using orderType from API (same as PositionsCard fix)
+          if (order.orderType && order.orderType.toLowerCase().includes('take profit')) {
+            tps.push({ price: px });
+          } else if (order.orderType && order.orderType.toLowerCase().includes('stop')) {
+            sls.push({ price: px });
+          } else {
+            // Fallback to price logic
+            if (isLong) {
+              if (px > (entryPrice || 0)) tps.push({ price: px });
+              else sls.push({ price: px });
+            } else {
+              if (px < (entryPrice || 0)) tps.push({ price: px });
+              else sls.push({ price: px });
+            }
+          }
+        }
+      });
+
+      // Sort to find closest? or display all? user said "the take profits" (plural? or singular logic)
+      // "the take profits (if in range)". Let's pick the closest one for now or loop?
+      // Let's loop and render all if possible, or just the first/closest.
+      // User asked for "the take profits" implying potentially multiple.
+      // Layout-wise, let's just show the closest TP and closest SL to keep chart clean.
+
+      if (tps.length > 0) {
+        const closestTp = isLong ? tps.sort((a, b) => a.price - b.price)[0] : tps.sort((a, b) => b.price - a.price)[0];
+        tpPrice = closestTp.price;
+        tpPercent = ((tpPrice! - currentPrice) / currentPrice) * 100;
+      }
+      if (sls.length > 0) {
+        const closestSl = isLong ? sls.sort((a, b) => b.price - a.price)[0] : sls.sort((a, b) => a.price - b.price)[0];
+        slPrice = closestSl.price;
+        slPercent = ((slPrice! - currentPrice) / currentPrice) * 100;
+      }
+    }
+  }
+
+  const entryY = entryPrice ? getPriceY(entryPrice) : null;
+  const tpY = tpPrice ? getPriceY(tpPrice) : null;
+  const slY = slPrice ? getPriceY(slPrice) : null;
+
+  return (
+    <Card className="h-full">
+      <CardContent className="pt-6 px-6 pb-2 flex flex-col h-full">
+        {/* Header with current price and market data */}
+        <div className="mb-6">
+          {/* --- MOBILE LAYOUT (< 1024px) --- */}
+          {isMobile ? (
+            <div className="flex flex-col gap-6">
+              {/* Top Row: Symbol (Left) vs Price (Right) */}
+              <div className="flex justify-between items-start">
+                {/* Left: Symbol & Badge */}
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <TokenIcon symbol={selectedAsset.symbol} size={32} />
+                    <span className="text-3xl font-bold">
+                      {selectedAsset.symbol}
+                    </span>
+                    <span className="text-xs font-medium text-blue-400 bg-blue-400/10 px-1.5 py-0.5 rounded self-start mt-2">
+                      {selectedAsset.maxLeverage}x
+                    </span>
+                  </div>
+                  <div className="text-xs text-muted-foreground ml-1">
+                    Price (12H)
+                  </div>
+                </div>
+
+                {/* Right: Price & Change */}
+                <div className="text-right">
+                  {currentPrice !== null && (
+                    <>
+                      <div
+                        className={`text-3xl font-bold ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+                      >
+                        ${formatPrice(currentPrice)}
+                      </div>
+                      <div
+                        className={`text-sm font-medium ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+                      >
+                        {isPositive ? '+' : ''}
+                        {percentChange.toFixed(2)}%
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Bottom Row: 3x2 Data Grid (Matching Desktop) */}
+              {marketData && (
+                <div className="grid grid-cols-3 gap-x-2 gap-y-2 text-[10px]">
+                  <div className="text-left">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Mark
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatPrice(marketData.markPx)}
+                    </div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      24H Change
+                    </div>
+                    <div
+                      className={`font-semibold text-[10px] ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {formatPrice(
+                        String(
+                          parseFloat(marketData.markPx) -
+                          parseFloat(marketData.prevDayPx)
+                        )
+                      )}{' '}
+                      / {percentChange.toFixed(2)}%
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      24H Volume
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      {formatVolume(marketData.dayNtlVlm)}
+                    </div>
+                  </div>
+
+                  <div className="text-left">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Oracle
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatPrice(marketData.oraclePx)}
+                    </div>
+                  </div>
+
+                  <div className="text-center">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Open Interest
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatNumber(marketData.openInterest, 2)}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Funding
+                    </div>
+                    <div
+                      className={`font-semibold text-[10px] ${parseFloat(marketData.funding) >= 0 ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {(parseFloat(marketData.funding) * 100).toFixed(4)}%
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            /* --- DESKTOP LAYOUT (>= 1024px) --- */
+            <div className="flex flex-row justify-between items-center gap-4">
+              {/* Left: Logo + Symbol + Price + Change - All on same line */}
+              <div className="flex items-center gap-3">
+                <TokenIcon symbol={selectedAsset.symbol} size={40} />
+                <div className="text-4xl font-bold">{selectedAsset.symbol}</div>
+                {currentPrice !== null && (
+                  <div className="flex items-baseline gap-2 ml-2">
+                    <span className="text-4xl font-bold">
+                      ${formatPrice(currentPrice)}
+                    </span>
+                    <span
+                      className={`text-sm font-semibold ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {isPositive ? '+' : ''}
+                      {percentChange.toFixed(2)}%
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* Right: Compact Market Data - Grid 3x2 */}
+              {marketData && (
+                <div className="grid grid-cols-3 gap-x-6 gap-y-2 text-[10px]">
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Mark
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatPrice(marketData.markPx)}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      24H Change
+                    </div>
+                    <div
+                      className={`font-semibold text-[10px] ${isPositive ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {formatPrice(
+                        String(
+                          parseFloat(marketData.markPx) -
+                          parseFloat(marketData.prevDayPx)
+                        )
+                      )}{' '}
+                      / {percentChange.toFixed(2)}%
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      24H Volume
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      {formatVolume(marketData.dayNtlVlm)}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Oracle
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatPrice(marketData.oraclePx)}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Open Interest
+                    </div>
+                    <div className="font-semibold text-[10px]">
+                      ${formatNumber(marketData.openInterest, 2)}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-muted-foreground mb-0.5 whitespace-nowrap text-[9px]">
+                      Funding
+                    </div>
+                    <div
+                      className={`font-semibold text-[10px] ${parseFloat(marketData.funding) >= 0 ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {(parseFloat(marketData.funding) * 100).toFixed(4)}%
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Sparkline Chart */}
+        {error ? (
+          <div className="flex items-center justify-center h-[100px] text-red-500 text-sm">
+            Error: {error}
+          </div>
+        ) : candles.length < 2 ? (
+          <div className="flex items-center justify-center h-[100px] text-muted-foreground text-sm">
+            {isLoading ? 'Loading chart data...' : 'No data available'}
+          </div>
+        ) : (
+          <div className="flex flex-col flex-1 min-h-[200px]">
+            <div
+              className="relative flex-1 w-full"
+              onMouseMove={(e) => {
+                /* Existing hover logic... */
+                const rect = e.currentTarget.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const svgWidth = rect.width;
+                const dataIndex = Math.round(
+                  (x / svgWidth) * (candles.length - 1)
+                );
+                if (dataIndex >= 0 && dataIndex < candles.length) {
+                  const candle = candles[dataIndex];
+                  const prices = candles.map((c) => c.close);
+                  const minPrice = Math.min(...prices);
+                  const maxPrice = Math.max(...prices);
+                  const normalizedY =
+                    ((candle.close - minPrice) / (maxPrice - minPrice)) * 100;
+                  setHoverData({
+                    x: (dataIndex / (candles.length - 1)) * 100,
+                    y: 100 - normalizedY,
+                    price: candle.close,
+                    time: candle.time,
+                  });
+                }
+              }}
+              onMouseLeave={() => setHoverData(null)}
+            >
+              <svg
+                width="100%"
+                height="100%"
+                viewBox="0 0 800 100"
+                preserveAspectRatio="none"
+                className="absolute inset-0 w-full h-full pointer-events-none"
+              >
+                <path
+                  d={getSparklinePath()}
+                  fill="none"
+                  stroke={isPositive ? '#10B981' : '#EF4444'}
+                  strokeWidth="2"
+                  vectorEffect="non-scaling-stroke"
+                />
+                <path
+                  d={`${getSparklinePath()} L 800,100 L 0,100 Z`}
+                  fill={
+                    isPositive
+                      ? 'rgba(16, 185, 129, 0.1)'
+                      : 'rgba(239, 68, 68, 0.1)'
+                  }
+                />
+
+                {/* Take Profit Line (Green, Solid) */}
+                {tpY !== null && (
+                  <line
+                    x1="0" y1={tpY} x2="800" y2={tpY}
+                    stroke="#22c55e" strokeWidth="1"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                )}
+
+                {/* Stop Loss Line (Orange, Solid) */}
+                {slY !== null && (
+                  <line
+                    x1="0" y1={slY} x2="800" y2={slY}
+                    stroke="#f97316" strokeWidth="1"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                )}
+              </svg>
+
+              {/* Position Labels (Absolute positioned on top of SVG) */}
+
+              {/* Hover Tooltip */}
+              {hoverData && (
+                <div
+                  className="absolute pointer-events-none"
+                  style={{
+                    left: `${hoverData.x}%`,
+                    top: `${hoverData.y}%`,
+                    transform: 'translate(-50%, -100%)',
+                  }}
+                >
+                  <div className="bg-popover border border-border rounded-md px-2 py-1 shadow-lg mb-2 z-10">
+                    <div className="text-xs font-semibold">
+                      ${formatPrice(hoverData.price)}
+                    </div>
+                    <div className="text-[10px] text-muted-foreground">
+                      {new Date(hoverData.time).toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}
+                    </div>
+                  </div>
+                  <div className="w-2 h-2 bg-primary rounded-full mx-auto"></div>
+                </div>
+              )}
+
+              {/* Entry Dot (HTML Overlay for perfect roundness) */}
+              {entryY !== null && entryTime && candles.length > 1 && (() => {
+                const firstTime = candles[0].time;
+                const lastTime = candles[candles.length - 1].time;
+                if (entryTime >= firstTime && entryTime <= lastTime) {
+                  const timeRange = lastTime - firstTime;
+                  const timeRatio = (entryTime - firstTime) / timeRange;
+                  const leftPercent = timeRatio * 100;
+                  const topPercent = (entryY / 100) * 100;
+
+                  return (
+                    <div
+                      className="absolute w-3 h-3 bg-blue-500 rounded-full ring-2 ring-white z-10"
+                      style={{
+                        left: `${leftPercent}%`,
+                        top: `${topPercent}%`,
+                        transform: 'translate(-50%, -50%)',
+                      }}
+                    >
+                      {/* Pulsing effect - White Ring Ripple */}
+                      <div className="absolute inset-0 rounded-full ring-2 ring-white animate-ping opacity-75"></div>
+                    </div>
+                  );
+                }
+                return null;
+              })()}
+
+              {/* TP Label */}
+              {tpY !== null && tpPercent !== null && (
+                <div
+                  className="absolute right-0 flex items-center gap-1 text-[9px] px-2 py-0.5 rounded-l border-y border-l border-green-500/30 bg-card z-10 text-green-500 font-mono shadow-sm"
+                  style={{
+                    top: `${(tpY / 100) * 100}%`,
+                    transform: 'translateY(-50%)',
+                  }}
+                >
+                  <span>TP: ${formatPrice(tpPrice!)}</span>
+                  <span>
+                    ({tpPercent >= 0 ? '+' : ''}{tpPercent.toFixed(2)}%)
+                  </span>
+                </div>
+              )}
+
+              {/* SL Label */}
+              {slY !== null && slPercent !== null && (
+                <div
+                  className="absolute right-0 flex items-center gap-1 text-[9px] px-2 py-0.5 rounded-l border-y border-l border-orange-500/30 bg-card z-10 text-orange-500 font-mono shadow-sm"
+                  style={{
+                    top: `${(slY / 100) * 100}%`,
+                    transform: 'translateY(-50%)',
+                  }}
+                >
+                  <span>SL: ${formatPrice(slPrice!)}</span>
+                  <span>
+                    ({slPercent >= 0 ? '+' : ''}{slPercent.toFixed(2)}%)
+                  </span>
+                </div>
+              )}
+
+
+
+              {/* Y-Axis (Right) */}
+              {priceLevels && (
+                <div className="absolute right-0 top-0 bottom-0 flex flex-col justify-between text-[10px] text-muted-foreground pointer-events-none">
+                  <span className="bg-background/80 px-1 rounded-l">
+                    ${formatPrice(priceLevels.max)}
+                  </span>
+                  <span className="bg-background/80 px-1 rounded-l">
+                    ${formatPrice(priceLevels.mid)}
+                  </span>
+                  <span className="bg-background/80 px-1 rounded-l">
+                    ${formatPrice(priceLevels.min)}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {/* X-Axis (Bottom) */}
+            <div className="flex justify-between mt-2 text-[10px] text-muted-foreground">
+              <span>{formatAxisTime(candles[0].time)}</span>
+              <span>
+                {formatAxisTime(candles[Math.floor(candles.length / 2)].time)}
+              </span>
+              <span>{formatAxisTime(candles[candles.length - 1].time)}</span>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/StatusBanner.tsx b/src/apps/perps/components/StatusBanner.tsx
new file mode 100644
index 00000000..d48abbcc
--- /dev/null
+++ b/src/apps/perps/components/StatusBanner.tsx
@@ -0,0 +1,74 @@
+import { Badge } from './ui/badge';
+import { AlertCircle, CheckCircle2, HelpCircle } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+type Status = 'unknown' | 'not-setup' | 'setup';
+
+interface StatusBannerProps {
+  status: Status;
+  onSetup?: () => void;
+  isSettingUp?: boolean;
+}
+
+export function StatusBanner({
+  status,
+  onSetup,
+  isSettingUp,
+}: StatusBannerProps) {
+  const statusConfig = {
+    unknown: {
+      icon: HelpCircle,
+      label: 'Unknown',
+      color: 'text-muted-foreground',
+      bgColor: 'bg-muted',
+      description: 'Connect your wallet to check status',
+    },
+    'not-setup': {
+      icon: AlertCircle,
+      label: 'Not Set Up',
+      color: 'text-warning',
+      bgColor: 'bg-warning/10 border-warning/30',
+      description: 'Setup required to use Hyperliquid',
+    },
+    setup: {
+      icon: CheckCircle2,
+      label: 'Connected',
+      color: 'text-success',
+      bgColor: 'bg-success/10 border-success/30',
+      description: 'Ready to trade',
+    },
+  };
+
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div className={cn('p-4 rounded-lg border', config.bgColor)}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Icon className={cn('h-5 w-5', config.color)} />
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-semibold">Hyperliquid Status:</span>
+              <Badge variant="outline" className={config.color}>
+                {config.label}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              {config.description}
+            </p>
+          </div>
+        </div>
+        {status === 'not-setup' && onSetup && (
+          <button
+            onClick={onSetup}
+            disabled={isSettingUp}
+            className="px-4 py-2 text-sm font-medium text-primary-foreground gradient-primary rounded-md hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            {isSettingUp ? 'Setting up...' : 'Setup Now'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/TokenIcon.tsx b/src/apps/perps/components/TokenIcon.tsx
new file mode 100644
index 00000000..c70b0673
--- /dev/null
+++ b/src/apps/perps/components/TokenIcon.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface TokenIconProps {
+  symbol: string;
+  size?: number;
+  className?: string;
+}
+
+export function TokenIcon({
+  symbol,
+  size = 24,
+  className = '',
+}: TokenIconProps) {
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // Logic to clean symbol (e.g., kPEPE -> PEPE) for file lookup
+  let fileSymbol = symbol;
+  if (symbol.startsWith('k') && symbol.length > 2 && symbol !== 'kBENJI') {
+    fileSymbol = symbol.slice(1);
+  }
+  // Handle specific edge cases if known, e.g. HYPE -> HYPE.svg (standard)
+
+  const iconUrl = `https://app.hyperliquid.xyz/coins/${fileSymbol}.svg`;
+
+  if (error) {
+    return (
+      <div
+        className={`flex items-center justify-center bg-muted rounded-full ${className}`}
+        style={{ width: size, height: size }}
+      >
+        <span className="font-bold text-[10px] text-muted-foreground select-none">
+          {symbol.slice(0, 1)}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`relative ${className}`}
+      style={{ width: size, height: size }}
+    >
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-muted rounded-full">
+          <Loader2
+            className="animate-spin text-muted-foreground opacity-50"
+            size={size * 0.5}
+          />
+        </div>
+      )}
+      <img
+        src={iconUrl}
+        alt={symbol}
+        className={`rounded-full transition-opacity duration-200 ${loading ? 'opacity-0' : 'opacity-100'}`}
+        width={size}
+        height={size}
+        onLoad={() => setLoading(false)}
+        onError={() => {
+          setError(true);
+          setLoading(false);
+        }}
+        style={{ width: size, height: size, objectFit: 'cover' }}
+      />
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/TradeForm.tsx b/src/apps/perps/components/TradeForm.tsx
new file mode 100644
index 00000000..2f5bf0fe
--- /dev/null
+++ b/src/apps/perps/components/TradeForm.tsx
@@ -0,0 +1,1247 @@
+import { useState, useEffect, useRef } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Switch } from './ui/switch';
+import { Plus, X, Loader2 } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { Slider } from './ui/slider';
+import { toast } from 'sonner';
+import {
+  getAgentWallet,
+  getImportedAccount,
+} from '../lib/hyperliquid/keystore';
+import { getMarkPrice, getUserState } from '../lib/hyperliquid/client';
+import { useWalletClient, useAccount } from 'wagmi';
+import { useHyperliquid } from '../hooks/useHyperliquid';
+import { computeSizeUSD, roundToSzDecimals } from '../lib/hyperliquid/order';
+import { TokenIcon } from './TokenIcon';
+import {
+  placeMarketOrderAgent,
+  placeLimitOrderAgent,
+  placeTriggerOrderAgent,
+  updateLeverageAgent,
+} from '../lib/hyperliquid/sdk';
+import { parsePositionForSymbol } from '../lib/hyperliquid/parsers';
+import { PasteStrategyButton } from './PasteStrategyButton';
+import type { AssetInfo, UserState } from '../lib/hyperliquid/types';
+import { BUILDER_ADDRESS, BUILDER_FEE_ORDER, BUILDER_FEE_APPROVAL } from '../lib/hyperliquid/builder';
+import { approveBuilderFeeSDK } from '../lib/hyperliquid/sdk';
+
+const tradeSchema = z
+  .object({
+    side: z.enum(['long', 'short']),
+    entryPrice: z.number().positive().optional(),
+    amountUSD: z
+      .number()
+      .positive()
+      .min(10, { message: 'Amount must be at least 10 USDC' }),
+    leverage: z.number().min(1).max(50),
+    marginMode: z.enum(['cross', 'isolated']).default('cross'),
+    stopLoss: z
+      .object({
+        price: z.number().nonnegative().optional(),
+        distance: z.number().optional(),
+      })
+      .optional(),
+    takeProfits: z
+      .array(
+        z.object({
+          price: z.number().nonnegative(),
+          ratio: z.number().min(0).max(100),
+          distance: z.number().optional(),
+        })
+      )
+      .optional(),
+  })
+  .refine((data) => {
+    // Basic validation logic
+    return true;
+  });
+
+type TradeFormData = z.infer<typeof tradeSchema>;
+
+interface TradeFormProps {
+  selectedAsset: EnhancedAsset | null;
+  onTradeComplete?: () => void;
+  onTickerChange?: (ticker: string) => void;
+  prefilledData?: {
+    side?: 'long' | 'short';
+    entryPrice?: number;
+    stopLoss?: number;
+    takeProfits?: string;
+  };
+  userState?: UserState | null;
+}
+
+export function TradeForm({
+  selectedAsset,
+  onTradeComplete,
+  onTickerChange,
+  prefilledData,
+  userState,
+}: TradeFormProps) {
+  const { address: masterAddress } = useHyperliquid();
+  const { address: connectedAddress } = useAccount();
+  const [isMarketOrder, setIsMarketOrder] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [marketPrice, setMarketPrice] = useState<number | null>(null);
+  const [minUSD, setMinUSD] = useState<number | null>(null);
+  const isStrategyPasteRef = useRef(false);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+    watch,
+    setValue,
+    getValues, // Added getValues
+  } = useForm<TradeFormData>({
+    resolver: zodResolver(tradeSchema),
+    mode: 'onChange',
+    defaultValues: {
+      side: 'long',
+      amountUSD: 25,
+      leverage: selectedAsset ? Math.floor(selectedAsset.maxLeverage / 2) : 1,
+      marginMode: 'cross',
+      takeProfits: [], // Initialize as empty array
+      stopLoss: undefined,
+    },
+  });
+
+  const {
+    fields: tpFields,
+    append: appendTp,
+    remove: removeTp,
+  } = useFieldArray({
+    control,
+    name: 'takeProfits',
+  });
+
+  const entryPrice = watch('entryPrice');
+  const stopLoss = watch('stopLoss');
+  const takeProfits = watch('takeProfits');
+  const marginMode = watch('marginMode');
+
+  // Helper to calculate distributed ratios
+  const getDistributedRatios = (count: number) => {
+    if (count <= 0) return [];
+    const base = Math.floor(100 / count);
+    const remainder = 100 % count;
+    return Array(count)
+      .fill(base)
+      .map((val, i) => (i < remainder ? val + 1 : val));
+  };
+
+  // Handle adding TP with auto-redistribution
+  const handleAddTp = () => {
+    const newCount = tpFields.length + 1;
+    const ratios = getDistributedRatios(newCount);
+
+    // Convert existing fields to new ratios
+    // We need to flush updates to existing fields first
+    const currentValues = getValues('takeProfits') || [];
+    const updatedValues = currentValues.map((tp, i) => ({
+      ...tp,
+      ratio: ratios[i],
+    }));
+
+    // Add new field with its calculated ratio
+    updatedValues.push({
+      price: 0,
+      ratio: ratios[newCount - 1],
+      distance: 0,
+    });
+
+    // Replace all with new values
+    setValue('takeProfits', updatedValues);
+  };
+
+  // Handle removing TP with auto-redistribution
+  const handleRemoveTp = (index: number) => {
+    const currentValues = getValues('takeProfits') || [];
+    const keptValues = currentValues.filter((_, i) => i !== index);
+
+    if (keptValues.length > 0) {
+      const ratios = getDistributedRatios(keptValues.length);
+      const updatedValues = keptValues.map((tp, i) => ({
+        ...tp,
+        ratio: ratios[i],
+      }));
+      setValue('takeProfits', updatedValues);
+    } else {
+      setValue('takeProfits', []);
+    }
+  };
+
+  // Helper to calculate distance from price (Absolute %)
+  const calculateDistance = (targetPrice: number, currentEntry: number) => {
+    if (!currentEntry) return 0;
+    const dist = Math.abs((targetPrice - currentEntry) / currentEntry) * 100;
+    return parseFloat(dist.toFixed(2));
+  };
+
+  // Helper to calculate price from distance
+  const calculatePriceFromDistance = (
+    distancePercent: number,
+    currentEntry: number,
+    isLong: boolean,
+    isStopLoss: boolean
+  ) => {
+    if (!currentEntry) return 0;
+    const change = (distancePercent / 100) * currentEntry;
+    if (isStopLoss) {
+      return isLong ? currentEntry - change : currentEntry + change;
+    }
+    return isLong ? currentEntry + change : currentEntry - change;
+  };
+
+  // Update leverage when asset changes if not set
+  useEffect(() => {
+    if (selectedAsset) {
+      setValue('leverage', Math.floor(selectedAsset.maxLeverage / 2));
+    }
+  }, [selectedAsset, setValue]);
+
+  const side = watch('side');
+  const amountUSD = watch('amountUSD');
+  const leverage = watch('leverage');
+
+  // Fetch market price for minimum calculation
+  useEffect(() => {
+    if (selectedAsset && isMarketOrder) {
+      getMarkPrice(selectedAsset.symbol).then((price) => {
+        if (price) setMarketPrice(price);
+      });
+    } else if (selectedAsset && !isMarketOrder) {
+      if (isStrategyPasteRef.current) {
+        // Skip overwriting entry price if it came from a strategy paste
+        isStrategyPasteRef.current = false;
+      } else {
+        // Pre-fill entry price with current asset price for Limit orders
+        setValue('entryPrice', selectedAsset.price);
+      }
+    }
+  }, [selectedAsset, isMarketOrder, setValue]);
+
+  // Calculate minimum USD required
+  useEffect(() => {
+    if (!selectedAsset) return;
+
+    const price = marketPrice || 1; // Use 1 as fallback for estimation
+    const minSize = Math.pow(10, -selectedAsset.szDecimals);
+    const minRequired = (minSize * price) / (leverage || 1);
+    setMinUSD(minRequired);
+  }, [selectedAsset, marketPrice, leverage]);
+
+  // Apply prefilled data when it changes
+  useEffect(() => {
+    if (prefilledData) {
+      if (prefilledData.side) {
+        setValue('side', prefilledData.side);
+      }
+      const ep = prefilledData.entryPrice || entryPrice || 0;
+      const isLong = (prefilledData.side || side) === 'long';
+
+      if (prefilledData.entryPrice) {
+        setValue('entryPrice', prefilledData.entryPrice);
+        setIsMarketOrder(false);
+      }
+      if (prefilledData.stopLoss) {
+        setValue('stopLoss', {
+          price: prefilledData.stopLoss,
+          distance: calculateDistance(prefilledData.stopLoss, ep),
+        });
+      }
+      if (prefilledData.takeProfits) {
+        const tps = prefilledData.takeProfits
+          .split(',')
+          .map((s) => parseFloat(s.trim()))
+          .filter((n) => !isNaN(n));
+        const ratio = tps.length > 0 ? Math.floor(100 / tps.length) : 0;
+        setValue(
+          'takeProfits',
+          tps.map((p) => ({
+            price: p,
+            ratio: ratio,
+            distance: calculateDistance(p, ep),
+          }))
+        );
+      }
+    }
+  }, [prefilledData, setValue, entryPrice, side]);
+
+  // Handle pasted strategy
+  const handleStrategyPasted = (strategy: {
+    ticker: string;
+    side: 'long' | 'short';
+    entryPrice: number;
+    stopLoss: number;
+    takeProfits: string;
+  }) => {
+    // Notify parent to switch ticker
+    if (onTickerChange) {
+      onTickerChange(strategy.ticker);
+    }
+
+    // Populate form fields
+    setValue('side', strategy.side);
+    setValue('entryPrice', strategy.entryPrice);
+
+    // Transform SL
+    if (strategy.stopLoss) {
+      setValue('stopLoss', {
+        price: strategy.stopLoss,
+        distance: calculateDistance(
+          strategy.stopLoss,
+          strategy.entryPrice
+        ),
+      });
+    }
+
+    // Transform TP
+    if (strategy.takeProfits) {
+      const tps = strategy.takeProfits
+        .split(',')
+        .map((s) => parseFloat(s.trim()))
+        .filter((n) => !isNaN(n));
+      const baseRatio = tps.length > 0 ? Math.floor(100 / tps.length) : 0;
+      const remainder = tps.length > 0 ? 100 - baseRatio * tps.length : 0;
+
+      setValue(
+        'takeProfits',
+        tps.map((p, index) => ({
+          price: p,
+          ratio: index === 0 ? baseRatio + remainder : baseRatio,
+          distance: calculateDistance(
+            p,
+            strategy.entryPrice
+          ),
+        }))
+      );
+    }
+
+    // If we are currently in market mode, switching to limit mode will trigger the useEffect
+    // that sets entry price. We need to flag this to avoid overwriting the strategy price.
+    if (isMarketOrder || (selectedAsset && selectedAsset.symbol !== strategy.ticker)) {
+      isStrategyPasteRef.current = true;
+    }
+
+    setIsMarketOrder(false); // Always use limit order for pasted strategies
+  };
+
+  // Check if amount is below minimum
+  const isBelowMinimum = minUSD !== null && amountUSD > 0 && amountUSD < minUSD;
+
+  // Verify position was opened after trade (check master wallet, not agent)
+  const verifyPositionOpened = async (
+    symbol: string,
+    masterWalletAddress: string,
+    maxAttempts = 5,
+    delayMs = 1000
+  ): Promise<boolean> => {
+    for (let i = 0; i < maxAttempts; i++) {
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+
+      const state = await getUserState(masterWalletAddress);
+      if (!state) continue;
+
+      const position = parsePositionForSymbol(state, symbol);
+      if (position && position.size > 0) {
+        return true; // Position found!
+      }
+    }
+    return false; // Position not found after all attempts
+  };
+
+  const onSubmit = async (data: TradeFormData) => {
+    console.log('Form submitted with data:', data);
+    const toastId = toast.loading('Placing order...');
+
+    if (!selectedAsset) {
+      toast.error('Please select an asset', { id: toastId });
+      return;
+    }
+
+    if (!masterAddress) {
+      toast.error('Please connect your wallet', { id: toastId });
+      return;
+    }
+
+    let privateKey: string | undefined;
+    let signingAddress: string | undefined = masterAddress;
+
+    // 1. Check for Imported Account (Priority)
+    // Only use imported account if it's unlocked and available
+    const imported = getImportedAccount();
+
+    console.log('[TradeForm] Wallet Selection Debug:', {
+      hasImportedKey: !!imported,
+      masterAddress,
+      connectedAddress
+    });
+
+    if (imported) {
+      // Unlocked and ready
+      privateKey = imported.privateKey;
+      signingAddress = imported.accountAddress;
+      console.log('DEBUG: Using imported account', { signingAddress });
+    }
+    // 2. Fallback to Agent Wallet linked to connected wallet
+    else {
+      console.log('DEBUG: Fallback to agent wallet');
+      const agent = await getAgentWallet(masterAddress);
+      if (agent?.approved) {
+        if (!agent.builderApproved) {
+          toast.error('PillarX Approval Required', {
+            description: 'Please go to Settings > Perps Account and approve PillarX to start trading.',
+            duration: 5000,
+          });
+          setIsSubmitting(false); // Reset loading state
+          return;
+        }
+        privateKey = agent.privateKey;
+        signingAddress = masterAddress; // Agent trades on behalf of master
+      }
+    }
+
+    if (!privateKey) {
+      console.log('DEBUG: No private key found');
+      toast.error(
+        'No active signing wallet found. Please create an agent or import an account.',
+        { id: toastId }
+      );
+      return;
+    }
+
+    // Only apply builder fee if the signing address matches the connected wallet (Master)
+    // If using an imported account that is different from the connected wallet, we cannot approve the builder fee
+    // because the connected wallet (Master) cannot sign for the imported account.
+    const useBuilderFee = signingAddress === masterAddress;
+
+    setIsSubmitting(true);
+    try {
+      // Get entry price
+      let entryPrice = data.entryPrice;
+      if (isMarketOrder || !entryPrice) {
+        // toast.info('Fetching market price...');
+        entryPrice = await getMarkPrice(selectedAsset.symbol);
+        if (!entryPrice) {
+          throw new Error('Failed to fetch market price');
+        }
+      }
+
+      // Calculate size
+      const size = computeSizeUSD(
+        data.amountUSD,
+        data.leverage,
+        entryPrice,
+        selectedAsset.szDecimals
+      );
+
+      if (size <= 0) {
+        const minSize = Math.pow(10, -selectedAsset.szDecimals);
+        const minRequired = (minSize * entryPrice) / data.leverage;
+        toast.error(`Amount too small for ${selectedAsset.symbol}`, {
+          id: toastId,
+          description: `Minimum required: $${minRequired.toFixed(2)} at ${data.leverage}x leverage`,
+        });
+        return;
+      }
+
+      // Update leverage and margin mode before placing orders
+      try {
+        await updateLeverageAgent(privateKey as `0x${string}`, {
+          coinId: selectedAsset.id,
+          leverage: data.leverage,
+          isCross: data.marginMode === 'cross',
+        });
+        console.log(
+          `[TradeForm] Updated leverage: ${data.leverage}x ${data.marginMode}`
+        );
+      } catch (leverageError: any) {
+        console.error('[TradeForm] Failed to update leverage:', leverageError);
+
+        const errorMessage = leverageError.message || '';
+        if (errorMessage.includes('does not exist')) {
+          toast.error('Account not initialized', {
+            id: toastId,
+            description: 'Please deposit funds into your Hyperliquid account first to enable trading features.',
+            duration: 5000,
+          });
+        } else {
+          toast.error('Failed to set leverage/margin mode', {
+            id: toastId,
+            description: errorMessage || 'Please try again',
+          });
+        }
+        return;
+      }
+
+      // Place entry order via SDK
+      // toast.info('Placing entry order...');
+
+      // Determine builder fee parameters
+      // 1. We are NOT using an imported account (i.e. we are using the Agent)
+      // 2. The signing address matches the master address (Agent Flow)
+      // If we are using an imported account, we NEVER apply builder fees for now to avoid the "approve" loop issue.
+      // Even if imported address match master, we treat it as "User Trading" not "Agent Trading".
+      const useBuilderFee = !imported && (signingAddress === masterAddress);
+
+      console.log('[TradeForm] Builder Fee Debug:', {
+        masterAddress,
+        signingAddress,
+        useBuilderFee,
+        isImported: !!imported
+      });
+
+
+      if (isMarketOrder) {
+        await placeMarketOrderAgent(privateKey as `0x${string}`, {
+          coinId: selectedAsset.id,
+          isBuy: data.side === 'long',
+          size,
+          currentPrice: entryPrice,
+          builder: useBuilderFee ? { b: BUILDER_ADDRESS, f: BUILDER_FEE_ORDER } : undefined,
+        });
+      } else {
+        await placeLimitOrderAgent(privateKey as `0x${string}`, {
+          coinId: selectedAsset.id,
+          isBuy: data.side === 'long',
+          size,
+          limitPrice: entryPrice,
+          reduceOnly: false,
+          builder: useBuilderFee ? { b: BUILDER_ADDRESS, f: BUILDER_FEE_ORDER } : undefined,
+        });
+      }
+
+      // Place stop loss if provided
+      if (data.stopLoss && data.stopLoss.price) {
+        // toast.info('Placing stop loss...');
+
+        // Calculate limit price with slippage buffer
+        // For Long: SL triggers below entry, so limit should be even lower (0.99x)
+        // For Short: SL triggers above entry, so limit should be even higher (1.01x)
+        const slLimitPrice =
+          data.side === 'long'
+            ? data.stopLoss.price * 0.99
+            : data.stopLoss.price * 1.01;
+
+        await placeTriggerOrderAgent(privateKey as `0x${string}`, {
+          coinId: selectedAsset.id,
+          isBuy: data.side === 'short', // Opposite side for reduce-only
+          size,
+          triggerPrice: data.stopLoss.price,
+          limitPrice: slLimitPrice,
+          tpsl: 'sl',
+          reduceOnly: true,
+          builder: useBuilderFee ? { b: BUILDER_ADDRESS, f: BUILDER_FEE_ORDER } : undefined,
+        });
+      }
+
+      // Place take profits if provided
+      if (data.takeProfits && data.takeProfits.length > 0) {
+        const tps = data.takeProfits;
+
+        // Validate total ratio
+        const totalRatio = tps.reduce((sum, tp) => sum + (tp.ratio || 0), 0);
+        if (Math.abs(totalRatio - 100) > 0.1) {
+          toast.error(
+            `Total Take Profit ratio must be 100% (Currently: ${totalRatio.toFixed(0)}%)`,
+            { id: toastId }
+          );
+          setIsSubmitting(false);
+          return;
+        }
+
+        for (let i = 0; i < tps.length; i++) {
+          const tp = tps[i];
+          if (!tp.price || !tp.ratio) continue;
+
+          // toast.info(`Placing take profit ${i + 1}/${tps.length}...`);
+
+          const rawTpSize = size * (tp.ratio / 100);
+          const tpSize = roundToSzDecimals(rawTpSize, selectedAsset.szDecimals);
+
+          if (tpSize <= 0) continue;
+
+          // Calculate limit price with slippage buffer
+          // For Long: TP triggers above entry, so limit should be slightly lower (1.01x is generous)
+          // For Short: TP triggers below entry, so limit should be slightly higher (0.99x)
+          const tpLimitPrice =
+            data.side === 'long' ? tp.price * 0.99 : tp.price * 1.01;
+
+          await placeTriggerOrderAgent(privateKey as `0x${string}`, {
+            coinId: selectedAsset.id,
+            isBuy: data.side === 'short', // Opposite side for reduce-only
+            size: tpSize,
+            triggerPrice: tp.price,
+            limitPrice: tpLimitPrice,
+            tpsl: 'tp',
+            reduceOnly: true,
+            builder: useBuilderFee ? { b: BUILDER_ADDRESS, f: BUILDER_FEE_ORDER } : undefined,
+          });
+        }
+      }
+
+      toast.success('Trade placed successfully!', {
+        id: toastId,
+        description: `${data.side.toUpperCase()} ${size} ${selectedAsset.symbol}`,
+      });
+
+      // Verify position was opened (check signing wallet)
+      if (signingAddress) {
+        toast.info('Verifying position...', { id: 'verify-position' });
+
+        const positionOpened = await verifyPositionOpened(
+          selectedAsset.symbol,
+          signingAddress
+        );
+
+        if (positionOpened) {
+          toast.success('Position confirmed on exchange', {
+            id: 'verify-position',
+          });
+          onTradeComplete?.();
+        } else {
+          toast.warning('Position not found on exchange', {
+            id: 'verify-position',
+            description:
+              'The order was submitted but position is not visible yet. Check your orders manually.',
+            duration: 8000,
+          });
+          onTradeComplete?.(); // Still call this to refresh UI
+        }
+      } else {
+        onTradeComplete?.(); // No signing address, still refresh
+      }
+    } catch (error: any) {
+      console.error('Trade error:', error);
+
+      // Handle "Builder fee has not been approved"
+      // We only attempt to auto-approve if we are using an Imported Account AND it matches the signing address.
+      // If we are using Agent (fallback), we cannot auto-approve because we don't have the Master key.
+      if (
+        useBuilderFee &&
+        (error?.message?.includes('Builder fee has not been approved') ||
+          error?.response?.data?.includes('Builder fee has not been approved'))
+      ) {
+        // If useBuilderFee is true, it means signingAddress === masterAddress
+
+        // Check if we are using an imported account that effectively IS the master
+        const imported = getImportedAccount();
+        if (imported && imported.accountAddress.toLowerCase() === masterAddress?.toLowerCase()) {
+          try {
+            toast.info('Approving Builder Fee...', {
+              id: toastId,
+              description: 'One-time approval required for trading.',
+            });
+
+            await approveBuilderFeeSDK(
+              imported.privateKey,
+              BUILDER_ADDRESS,
+              BUILDER_FEE_APPROVAL
+            );
+
+            toast.success('Builder Fee Approved!', {
+              id: toastId,
+              description: 'Please try placing your order again.',
+              duration: 5000,
+            });
+            return; // Exit without showing generic error
+          } catch (approvalError: any) {
+            console.error('Failed to auto-approve builder fee:', approvalError);
+            toast.error('Failed to approve builder fee', {
+              id: toastId,
+              description: approvalError.message,
+            });
+            return;
+          }
+        } else {
+          // We are using Agent (or Master Wallet via some other means) but don't have the private key to approve.
+          toast.error('Builder Fee Not Approved', {
+            id: toastId,
+            description: 'Please go to Settings > Perps Account and approve PillarX.',
+            duration: 5000
+          });
+          return;
+        }
+      }
+
+
+      toast.error(error.message || 'Failed to place trade', { id: toastId });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!selectedAsset) {
+    return (
+      <Card className="p-6">
+        <div className="text-center text-muted-foreground">
+          Select an asset to start trading
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-6">
+      <form
+        onSubmit={handleSubmit(onSubmit, (errors) => {
+          console.error('Form Validation Errors:', errors);
+          toast.error('Form validation failed', {
+            description: Object.values(errors)
+              .map((e) => e?.message)
+              .join(', '),
+          });
+        })}
+        className="space-y-4"
+      >
+        <div className="flex flex-col gap-4 mb-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {selectedAsset && (
+                <TokenIcon symbol={selectedAsset.symbol} size={24} />
+              )}
+              <h3 className="text-lg font-semibold">
+                Trade {selectedAsset ? selectedAsset.symbol : ''}
+              </h3>
+            </div>
+            <PasteStrategyButton onStrategyPasted={handleStrategyPasted} />
+          </div>
+
+          {/* Trade Configuration Dropdowns */}
+          <div className="flex items-center justify-between bg-card/50 -mx-6 px-6 py-1.5 border-y border-border/50">
+            {/* Order Type Dropdown */}
+            <Select
+              value={isMarketOrder ? 'market' : 'limit'}
+              onValueChange={(v) => setIsMarketOrder(v === 'market')}
+            >
+              <SelectTrigger className="w-auto border-0 bg-transparent p-0 h-auto text-sm font-medium focus:ring-0 px-0 hover:bg-transparent data-[state=open]:bg-transparent gap-2">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="limit">Limit</SelectItem>
+                <SelectItem value="market">Market</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {/* Margin Mode Dropdown */}
+            <Select
+              value={marginMode}
+              onValueChange={(v) =>
+                setValue('marginMode', v as 'cross' | 'isolated')
+              }
+            >
+              <SelectTrigger className="w-auto border-0 bg-transparent p-0 h-auto text-sm font-medium focus:ring-0 px-0 hover:bg-transparent data-[state=open]:bg-transparent gap-2">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="cross">Cross</SelectItem>
+                <SelectItem value="isolated">Isolated</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {/* Leverage Dropdown */}
+            <Select
+              value={leverage.toString()}
+              onValueChange={(v) => setValue('leverage', parseInt(v))}
+            >
+              <SelectTrigger className="w-auto border-0 bg-transparent p-0 h-auto text-sm font-medium focus:ring-0 px-0 hover:bg-transparent data-[state=open]:bg-transparent gap-2">
+                <SelectValue>{leverage}x</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {[2, 5, 10, 20, 50, selectedAsset.maxLeverage]
+                  .filter(
+                    (v, i, a) =>
+                      v <= selectedAsset.maxLeverage && a.indexOf(v) === i
+                  )
+                  .sort((a, b) => a - b)
+                  .map((lev) => (
+                    <SelectItem key={lev} value={lev.toString()}>
+                      {lev}x
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex gap-2 mt-1">
+            <Button
+              type="button"
+              variant={side === 'long' ? 'default' : 'outline'}
+              className={`flex-1 ${side === 'long' ? 'bg-green-500 hover:bg-green-600' : ''}`}
+              onClick={() => setValue('side', 'long')}
+            >
+              Long
+            </Button>
+            <Button
+              type="button"
+              variant={side === 'short' ? 'default' : 'outline'}
+              className={`flex-1 ${side === 'short' ? 'bg-red-500 hover:bg-red-600' : ''}`}
+              onClick={() => setValue('side', 'short')}
+            >
+              Short
+            </Button>
+          </div>
+          <input type="hidden" {...register('side')} />
+        </div>
+
+        {/* Removed Market Order Toggle - handled by Dropdown */}
+
+        {/* Available to Trade Label */}
+        {/* Available to Trade Label */}
+        <div className="flex justify-between text-xs mb-1">
+          <span className="text-muted-foreground">Avail. to Trade</span>
+          <span className="text-foreground font-mono-numbers">
+            {userState?.marginSummary
+              ? `$${(
+                parseFloat(userState.marginSummary.accountValue) -
+                parseFloat(userState.marginSummary.totalMarginUsed)
+              ).toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })} USDC`
+              : '0.00 USDC'}
+          </span>
+        </div>
+
+        {!isMarketOrder && (
+          <div className="relative flex items-center w-full rounded-md border border-input bg-background/50">
+            <div className="pl-3 text-sm text-muted-foreground whitespace-nowrap">
+              Price (USDC)
+            </div>
+            <Input
+              id="entryPrice"
+              type="number"
+              step="any"
+              className="border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-right pr-2 [&::-webkit-inner-spin-button]:appearance-none"
+              placeholder="0.00"
+              {...register('entryPrice', {
+                setValueAs: (v) => (v === '' ? undefined : parseFloat(v)),
+              })}
+            />
+            <button
+              type="button"
+              className="pr-3 text-sm text-white font-medium hover:text-white/80 transition-colors"
+              onClick={async () => {
+                if (selectedAsset) {
+                  const price = await getMarkPrice(selectedAsset.symbol);
+                  if (price) {
+                    setValue('entryPrice', price);
+                  } else {
+                    setValue('entryPrice', selectedAsset.price);
+                  }
+                }
+              }}
+            >
+              Mid
+            </button>
+          </div>
+        )}
+        {errors.entryPrice && !isMarketOrder && (
+          <p className="text-xs text-destructive mt-1">
+            {errors.entryPrice.message}
+          </p>
+        )}
+
+        <div className="grid grid-cols-1 gap-3 mt-4">
+          <div className="space-y-3">
+            {/* Size Input Row */}
+            <div
+              className={`relative flex items-center w-full rounded-md border bg-background/50 ${errors.amountUSD ? 'border-destructive' : 'border-input'}`}
+            >
+              <div className="pl-3 text-sm text-muted-foreground whitespace-nowrap">
+                Size
+              </div>
+              <Input
+                id="amountUSD"
+                type="number"
+                step="any"
+                className="border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-right pr-2 [&::-webkit-inner-spin-button]:appearance-none"
+                placeholder="0.00"
+                {...register('amountUSD', { valueAsNumber: true })}
+              />
+              <div className="pr-3 flex items-center gap-1">
+                <span className="text-sm font-medium">USDC</span>
+              </div>
+            </div>
+
+            {/* Slider and Percentage Display */}
+            <div className="flex items-center gap-4 pt-2 px-1">
+              <div className="flex-1">
+                <Slider
+                  min={0}
+                  max={100}
+                  step={1}
+                  value={[
+                    (() => {
+                      if (!userState?.marginSummary) return 0;
+                      const availableMargin =
+                        parseFloat(userState.marginSummary.accountValue) -
+                        parseFloat(userState.marginSummary.totalMarginUsed);
+
+                      const maxBuyingPower = availableMargin * (leverage || 1);
+                      if (maxBuyingPower <= 0) return 0;
+
+                      return Math.min((amountUSD / maxBuyingPower) * 100, 100);
+                    })(),
+                  ]}
+                  onValueChange={(vals) => {
+                    if (!userState?.marginSummary) return;
+                    const percentage = vals[0];
+                    const availableMargin =
+                      parseFloat(userState.marginSummary.accountValue) -
+                      parseFloat(userState.marginSummary.totalMarginUsed);
+
+                    if (availableMargin > 0) {
+                      const maxBuyingPower = availableMargin * (leverage || 1);
+                      const newAmount = (maxBuyingPower * percentage) / 100;
+                      setValue('amountUSD', parseFloat(newAmount.toFixed(2)));
+                    }
+                  }}
+                />
+              </div>
+
+              {/* Percentage Box */}
+              <div className="flex items-center justify-center w-[80px] h-[28px] rounded-lg border border-[#2d3748] bg-[#1a202c]">
+                <span className="text-sm font-medium">
+                  {(() => {
+                    if (!userState?.marginSummary) return 0;
+                    const availableMargin =
+                      parseFloat(userState.marginSummary.accountValue) -
+                      parseFloat(userState.marginSummary.totalMarginUsed);
+
+                    const maxBuyingPower = availableMargin * (leverage || 1);
+                    const currentPercent =
+                      maxBuyingPower > 0
+                        ? (amountUSD / maxBuyingPower) * 100
+                        : 0;
+                    return Math.round(Math.min(currentPercent, 100));
+                  })()}
+                </span>
+                <span className="ml-1 text-sm text-muted-foreground">%</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Leverage Input Section Removed - Handled by Dropdown */}
+          <input type="hidden" {...register('leverage')} />
+        </div>
+
+        {/* Stop Loss Section */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Stop Loss</Label>
+            {!stopLoss?.price && (
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => {
+                  setValue('stopLoss', { price: 0, distance: 0 });
+                }}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+
+          {stopLoss && (
+            <div className="flex gap-3 items-center">
+              <div className="relative flex-1 flex items-center rounded-md border border-input bg-background/50">
+                <span className="pl-3 text-xs text-muted-foreground whitespace-nowrap pointer-events-none">
+                  Price
+                </span>
+                <Input
+                  type="number"
+                  step="any"
+                  className="border-0 bg-transparent text-right pr-3 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  placeholder="0.00"
+                  {...register('stopLoss.price', { valueAsNumber: true })}
+                  onFocus={(e) => {
+                    if (e.target.value === '0') {
+                      e.target.value = '';
+                    }
+                  }}
+                  onChange={(e) => {
+                    const val = parseFloat(e.target.value);
+                    if (!isNaN(val)) {
+                      setValue('stopLoss.price', val);
+                      const refPrice =
+                        entryPrice || marketPrice || selectedAsset?.price || 0;
+                      const dist = calculateDistance(val, refPrice);
+                      setValue(
+                        'stopLoss.distance',
+                        parseFloat(dist.toFixed(2))
+                      );
+                    }
+                  }}
+                />
+              </div>
+              <div className="relative w-[110px] flex items-center rounded-md border border-input bg-background/50">
+                <Input
+                  type="number"
+                  step="0.01"
+                  className="border-0 bg-transparent text-right pr-1 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  placeholder="0"
+                  {...register('stopLoss.distance', { valueAsNumber: true })}
+                  onFocus={(e) => {
+                    if (e.target.value === '0') {
+                      e.target.value = '';
+                    }
+                  }}
+                  onChange={(e) => {
+                    const val = parseFloat(e.target.value);
+                    if (!isNaN(val)) {
+                      setValue('stopLoss.distance', val);
+                      console.log('DEBUG: SL Distance Change', {
+                        val,
+                        entryPrice,
+                        marketPrice,
+                        selectedAssetPrice: selectedAsset?.price,
+                        side,
+                      });
+                      const refPrice =
+                        entryPrice || marketPrice || selectedAsset?.price || 0;
+                      const price = calculatePriceFromDistance(
+                        val,
+                        refPrice,
+                        side === 'long',
+                        true
+                      );
+                      setValue('stopLoss.price', parseFloat(price.toFixed(2)));
+                    }
+                  }}
+                />
+                <span className="pr-3 text-xs text-muted-foreground whitespace-nowrap pointer-events-none">
+                  %
+                </span>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
+                onClick={() => setValue('stopLoss', undefined)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* Take Profits Section */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Take Profit</Label>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-6 w-6"
+              onClick={handleAddTp}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {tpFields.length > 0 && (
+            <div className="grid grid-cols-[1fr_70px_80px_24px] gap-2 px-1 text-xs text-muted-foreground">
+              <div>Target Price</div>
+              <div>Ratio</div>
+              <div>Distance</div>
+              <div></div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            {tpFields.map((field, index) => (
+              <div
+                key={field.id}
+                className="grid grid-cols-[1fr_70px_90px_24px] gap-2 items-center"
+              >
+                {/* Price Input */}
+                <div className="flex items-center rounded-md border border-input bg-background/50">
+                  <Input
+                    type="number"
+                    step="any"
+                    className="border-0 bg-transparent px-3 py-1 text-[16px] md:text-sm focus-visible:ring-0 focus-visible:ring-offset-0 w-full"
+                    placeholder="Price"
+                    {...register(`takeProfits.${index}.price` as const, {
+                      valueAsNumber: true,
+                    })}
+                    onFocus={(e) => {
+                      if (e.target.value === '0') {
+                        e.target.value = '';
+                      }
+                    }}
+                    onChange={(e) => {
+                      const val = parseFloat(e.target.value);
+                      if (!isNaN(val)) {
+                        setValue(`takeProfits.${index}.price`, val);
+                        const refPrice =
+                          entryPrice ||
+                          marketPrice ||
+                          selectedAsset?.price ||
+                          0;
+                        const dist = calculateDistance(val, refPrice);
+                        setValue(
+                          `takeProfits.${index}.distance`,
+                          parseFloat(dist.toFixed(2))
+                        );
+                      }
+                    }}
+                  />
+                </div>
+
+                {/* Ratio Input */}
+                <div className="flex items-center rounded-md border border-input bg-background/50">
+                  <Input
+                    type="number"
+                    className="border-0 bg-transparent text-right pr-1 focus-visible:ring-0 focus-visible:ring-offset-0 px-2 w-full"
+                    placeholder="20"
+                    {...register(`takeProfits.${index}.ratio` as const, {
+                      valueAsNumber: true,
+                    })}
+                  />
+                  <span className="pr-2 text-xs text-muted-foreground whitespace-nowrap pointer-events-none">
+                    %
+                  </span>
+                </div>
+
+                {/* Distance Input */}
+                <div className="flex items-center rounded-md border border-input bg-background/50">
+                  <Input
+                    type="number"
+                    step="0.01"
+                    className="border-0 bg-transparent text-right pr-1 focus-visible:ring-0 focus-visible:ring-offset-0 px-2 w-full"
+                    placeholder="0"
+                    {...register(`takeProfits.${index}.distance` as const, {
+                      valueAsNumber: true,
+                    })}
+                    onFocus={(e) => {
+                      if (e.target.value === '0') {
+                        e.target.value = '';
+                      }
+                    }}
+                    onChange={(e) => {
+                      const val = parseFloat(e.target.value);
+                      if (!isNaN(val)) {
+                        setValue(`takeProfits.${index}.distance`, val);
+                        const refPrice =
+                          entryPrice ||
+                          marketPrice ||
+                          selectedAsset?.price ||
+                          0;
+                        const price = calculatePriceFromDistance(
+                          val,
+                          refPrice,
+                          side === 'long',
+                          false
+                        );
+                        setValue(
+                          `takeProfits.${index}.price`,
+                          parseFloat(price.toFixed(2))
+                        );
+                      }
+                    }}
+                  />
+                  <span className="pr-2 text-xs text-muted-foreground whitespace-nowrap pointer-events-none">
+                    %
+                  </span>
+                </div>
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                  onClick={() => handleRemoveTp(index)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+
+            {/* Total Ratio Warning */}
+            {(() => {
+              const currentTps = watch('takeProfits') || [];
+              if (currentTps.length > 0) {
+                const totalRatio = currentTps.reduce(
+                  (sum, tp) => sum + (tp.ratio || 0),
+                  0
+                );
+                if (Math.abs(totalRatio - 100) > 0.1) {
+                  return (
+                    <div className="text-xs text-destructive px-1">
+                      Total ratio must be 100% (Currently:{' '}
+                      {totalRatio.toFixed(0)}%)
+                    </div>
+                  );
+                }
+              }
+              return null;
+            })()}
+          </div>
+        </div>
+
+        {(errors.amountUSD || (isBelowMinimum && minUSD)) && (
+          <div className="hidden" /> // Keeping logical check but hiding element as we move to button
+        )}
+
+        {/* Debug logging */}
+        {(() => {
+          console.log('[TradeForm] Button state:', {
+            isSubmitting,
+            'errors.amountUSD': errors.amountUSD,
+            isBelowMinimum,
+            minUSD,
+            amountUSD,
+            disabled: isSubmitting || !!errors.amountUSD || isBelowMinimum,
+          });
+          return null;
+        })()}
+
+        <Button
+          type="submit"
+          disabled={isSubmitting || !!errors.amountUSD || isBelowMinimum}
+          onClick={(e) => {
+            console.log('[TradeForm] Submit button clicked event', {
+              disabled: isSubmitting || !!errors.amountUSD || isBelowMinimum,
+              defaultPrevented: e.defaultPrevented,
+            });
+          }}
+          className={`w-full ${errors.amountUSD || isBelowMinimum
+            ? 'bg-muted text-muted-foreground hover:bg-muted'
+            : side === 'long'
+              ? 'bg-green-600 hover:bg-green-700 text-white'
+              : 'bg-red-600 hover:bg-red-700 text-white'
+            }`}
+        >
+          {errors.amountUSD?.message ||
+            (isBelowMinimum && minUSD
+              ? `Minimum size: $${minUSD.toFixed(2)}`
+              : isSubmitting
+                ? 'Placing Trade...'
+                : `Place ${side === 'long' ? 'Long' : 'Short'} Order`)}
+        </Button>
+      </form>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/TradeHistoryCard.tsx b/src/apps/perps/components/TradeHistoryCard.tsx
new file mode 100644
index 00000000..b0f73380
--- /dev/null
+++ b/src/apps/perps/components/TradeHistoryCard.tsx
@@ -0,0 +1,352 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from '../components/ui/card';
+import { Skeleton } from '../components/ui/skeleton';
+import { Button } from '../components/ui/button';
+import { RefreshCw } from 'lucide-react';
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '../components/ui/collapsible';
+import { ChevronDown } from 'lucide-react';
+import { getUserFills } from '../lib/hyperliquid/client';
+import { TokenIcon } from './TokenIcon';
+import { formatDistanceToNow } from 'date-fns';
+
+interface TradeHistoryCardProps {
+    masterAddress: string;
+}
+
+interface Trade {
+    coin: string;
+    side: string;
+    px: string;
+    sz: string;
+    time: number;
+    closedPnl?: string;
+    fee?: string;
+    hash?: string;
+    tid?: number;
+}
+
+export function TradeHistoryCard({ masterAddress }: TradeHistoryCardProps) {
+    const [trades, setTrades] = useState<Trade[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [showAllHistory, setShowAllHistory] = useState(false);
+
+    const fetchTrades = useCallback(async () => {
+        if (!masterAddress) return;
+
+        console.log('[TradeHistory] Fetching trades for address:', masterAddress);
+        setIsLoading(true);
+        try {
+            const fills = await getUserFills(masterAddress);
+            console.log('[TradeHistory] Raw fills from API:', fills);
+            console.log('[TradeHistory] Number of fills:', fills?.length || 0);
+
+            // Process and sort trades by time (most recent first)
+            const processedTrades = fills
+                .map((fill: any) => ({
+                    coin: fill.coin,
+                    side: fill.side,
+                    px: fill.px,
+                    sz: fill.sz,
+                    time: fill.time,
+                    closedPnl: fill.closedPnl,
+                    fee: fill.fee,
+                    hash: fill.hash,
+                    tid: fill.tid,
+                }))
+                .sort((a: Trade, b: Trade) => b.time - a.time);
+
+            console.log('[TradeHistory] Processed trades:', processedTrades);
+            console.log('[TradeHistory] Number of processed trades:', processedTrades.length);
+            setTrades(processedTrades);
+        } catch (error) {
+            console.error('Error fetching trades:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [masterAddress]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        fetchTrades();
+        const interval = setInterval(fetchTrades, 10000);
+        return () => clearInterval(interval);
+    }, [fetchTrades, isOpen]);
+
+    // Removed auto-collapse/expand logic to rely on manual user control
+
+    const formatNumber = (value: string | number, decimals: number = 2): string => {
+        if (!value) return '-';
+        return parseFloat(value.toString()).toFixed(decimals);
+    };
+
+    const formatPrice = (value: string | number): string => {
+        if (!value) return '-';
+        const val = parseFloat(value.toString());
+        if (val >= 1000) return val.toFixed(2);
+        if (val >= 1) return val.toFixed(4);
+        return val.toFixed(6);
+    };
+
+    const formatTime = (timestamp: number): string => {
+        try {
+            return new Date(timestamp).toLocaleString('en-GB', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+            });
+        } catch {
+            return new Date(timestamp).toLocaleString();
+        }
+    };
+
+    const calculateTradeValue = (price: string, size: string): string => {
+        const value = parseFloat(price) * parseFloat(size);
+        return value.toFixed(2);
+    };
+
+    return (
+        <>
+            <style>{`
+                .desktop-table-view {
+                    display: none;
+                }
+                .mobile-card-view {
+                    display: block;
+                }
+                @media (min-width: 768px) {
+                    .desktop-table-view {
+                        display: block;
+                    }
+                    .mobile-card-view {
+                        display: none;
+                    }
+                }
+            `}</style>
+            <Card className="shadow-card border-border/50 overflow-hidden">
+                <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+                    <CardHeader className="py-3">
+                        <div className="flex items-center justify-between">
+                            <CollapsibleTrigger className="flex items-center gap-2 hover:opacity-80 transition-opacity focus-visible:outline-none">
+                                <CardTitle className="text-lg font-semibold">Trade History</CardTitle>
+                                <ChevronDown
+                                    className={`h-4 w-4 transition-transform ${isOpen ? 'transform rotate-180' : ''
+                                        }`}
+                                />
+                            </CollapsibleTrigger>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={fetchTrades}
+                                disabled={isLoading}
+                                className="h-8 w-8"
+                            >
+                                <RefreshCw
+                                    className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
+                                />
+                            </Button>
+                        </div>
+                    </CardHeader>
+
+                    <CollapsibleContent>
+                        <CardContent className="pt-0">
+                            {isLoading ? (
+                                <div className="space-y-2 p-4">
+                                    {[1, 2, 3, 4, 5].map((i) => (
+                                        <Skeleton key={i} className="h-12 w-full rounded-lg" />
+                                    ))}
+                                </div>
+                            ) : trades.length === 0 ? (
+                                <div className="text-center py-8 text-muted-foreground text-sm">
+                                    No trades found
+                                </div>
+                            ) : (
+                                <div className="w-full">
+                                    {/* Desktop Table View */}
+                                    <div className="overflow-x-auto desktop-table-view">
+                                        <table className="w-full text-sm">
+                                            <thead>
+                                                <tr className="border-b border-border">
+                                                    <th className="text-left py-2 px-2 font-medium text-muted-foreground">Coin</th>
+                                                    <th className="text-left py-2 px-2 font-medium text-muted-foreground">Direction</th>
+                                                    <th className="text-right py-2 px-2 font-medium text-muted-foreground">Price</th>
+                                                    <th className="text-left py-2 px-2 font-medium text-muted-foreground">Time</th>
+                                                    <th className="text-right py-2 px-2 font-medium text-muted-foreground">Size</th>
+                                                    <th className="text-right py-2 px-2 font-medium text-muted-foreground">Value (USDC)</th>
+                                                    <th className="text-right py-2 px-2 font-medium text-muted-foreground">Closed PnL</th>
+                                                    <th className="text-right py-2 px-2 font-medium text-muted-foreground">Fee</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {trades
+                                                    .filter(trade => {
+                                                        if (showAllHistory) return true;
+                                                        const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+                                                        return trade.time > thirtyDaysAgo;
+                                                    })
+                                                    .map((trade, index) => {
+                                                        const isBuy = trade.side === 'B';
+                                                        const pnl = parseFloat(trade.closedPnl || '0');
+                                                        const isPnlPositive = pnl >= 0;
+
+                                                        return (
+                                                            <tr
+                                                                key={`${trade.hash}-${trade.tid}-${index}`}
+                                                                className="border-b border-border/50 hover:bg-muted/50 transition-colors"
+                                                            >
+                                                                <td className="py-2 px-2">
+                                                                    <div className="flex items-center gap-2">
+                                                                        <TokenIcon symbol={trade.coin} className="h-5 w-5" />
+                                                                        <span className="font-medium">{trade.coin}</span>
+                                                                    </div>
+                                                                </td>
+                                                                <td className="py-2 px-2">
+                                                                    <span
+                                                                        className={`px-2 py-0.5 rounded text-xs font-semibold ${isBuy
+                                                                            ? 'bg-green-500/10 text-green-500'
+                                                                            : 'bg-red-500/10 text-red-500'
+                                                                            }`}
+                                                                    >
+                                                                        {isBuy ? 'Buy' : 'Sell'}
+                                                                    </span>
+                                                                </td>
+                                                                <td className="py-2 px-2 text-right font-mono">
+                                                                    ${formatPrice(trade.px)}
+                                                                </td>
+                                                                <td className="py-2 px-2 text-muted-foreground text-xs">
+                                                                    {formatTime(trade.time)}
+                                                                </td>
+                                                                <td className="py-2 px-2 text-right font-mono">
+                                                                    {formatNumber(trade.sz, 4)}
+                                                                </td>
+                                                                <td className="py-2 px-2 text-right font-mono">
+                                                                    ${calculateTradeValue(trade.px, trade.sz)}
+                                                                </td>
+                                                                <td className="py-2 px-2 text-right">
+                                                                    {trade.closedPnl ? (
+                                                                        <span
+                                                                            className={`font-mono font-semibold ${isPnlPositive ? 'text-green-500' : 'text-red-500'
+                                                                                }`}
+                                                                        >
+                                                                            {isPnlPositive ? '+' : ''}${formatNumber(trade.closedPnl)}
+                                                                        </span>
+                                                                    ) : (
+                                                                        <span className="text-muted-foreground">-</span>
+                                                                    )}
+                                                                </td>
+                                                                <td className="py-2 px-2 text-right font-mono text-muted-foreground">
+                                                                    ${formatNumber(trade.fee || '0')}
+                                                                </td>
+                                                            </tr>
+                                                        );
+                                                    })}
+                                            </tbody>
+                                        </table>
+                                    </div>
+
+                                    {/* Mobile Card View */}
+                                    <div className="space-y-4 mobile-card-view">
+                                        {trades
+                                            .filter(trade => {
+                                                if (showAllHistory) return true;
+                                                const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+                                                return trade.time > thirtyDaysAgo;
+                                            })
+                                            .map((trade, index) => {
+                                                const isBuy = trade.side === 'B';
+                                                const pnl = parseFloat(trade.closedPnl || '0');
+                                                const isPnlPositive = pnl >= 0;
+
+                                                return (
+                                                    <div
+                                                        key={`${trade.hash}-${trade.tid}-${index}`}
+                                                        className="border-b border-border/50 pb-4 last:border-0 last:pb-0"
+                                                    >
+                                                        <div className="flex flex-wrap items-center justify-between mb-2">
+                                                            <div className="flex items-center gap-2 max-w-[70%]">
+                                                                <TokenIcon symbol={trade.coin} className="h-6 w-6 shrink-0" />
+                                                                <span className="font-semibold truncate">{trade.coin}</span>
+                                                                <span
+                                                                    className={`px-2 py-0.5 rounded text-xs font-semibold shrink-0 ${isBuy
+                                                                        ? 'bg-green-500/10 text-green-500'
+                                                                        : 'bg-red-500/10 text-red-500'
+                                                                        }`}
+                                                                >
+                                                                    {isBuy ? 'Buy' : 'Sell'}
+                                                                </span>
+                                                            </div>
+                                                            <span className="text-xs text-muted-foreground shrink-0 ml-auto text-right max-w-[40%] break-words">
+                                                                {formatTime(trade.time)}
+                                                            </span>
+                                                        </div>
+
+                                                        <div className="grid grid-cols-2 gap-2 text-sm">
+                                                            <div>
+                                                                <div className="text-muted-foreground text-xs">Price</div>
+                                                                <div className="font-mono">${formatPrice(trade.px)}</div>
+                                                            </div>
+                                                            <div className="text-right">
+                                                                <div className="text-muted-foreground text-xs">Value</div>
+                                                                <div className="font-mono">${calculateTradeValue(trade.px, trade.sz)}</div>
+                                                            </div>
+                                                            <div>
+                                                                <div className="text-muted-foreground text-xs">Size</div>
+                                                                <div className="font-mono">{formatNumber(trade.sz, 4)}</div>
+                                                            </div>
+                                                            <div className="text-right">
+                                                                <div className="text-muted-foreground text-xs">PnL</div>
+                                                                {trade.closedPnl ? (
+                                                                    <span
+                                                                        className={`font-mono font-semibold ${isPnlPositive ? 'text-green-500' : 'text-red-500'
+                                                                            }`}
+                                                                    >
+                                                                        {isPnlPositive ? '+' : ''}${formatNumber(trade.closedPnl)}
+                                                                    </span>
+                                                                ) : (
+                                                                    <span className="text-muted-foreground">-</span>
+                                                                )}
+                                                            </div>
+                                                            <div className="col-span-2 text-right border-t border-border/30 pt-2 mt-1">
+                                                                <span className="text-muted-foreground text-xs mr-2">Fee:</span>
+                                                                <span className="font-mono text-muted-foreground">${formatNumber(trade.fee || '0')}</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                    </div>
+                                    {!showAllHistory && trades.some(t => t.time <= Date.now() - 30 * 24 * 60 * 60 * 1000) && (
+                                        <div className="flex justify-center mt-4 pb-2">
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={() => setShowAllHistory(true)}
+                                                className="text-xs"
+                                            >
+                                                Load older trades
+                                            </Button>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </CardContent>
+                    </CollapsibleContent>
+                </Collapsible>
+            </Card>
+        </>
+    );
+}
diff --git a/src/apps/perps/components/TradeSignals.tsx b/src/apps/perps/components/TradeSignals.tsx
new file mode 100644
index 00000000..e01e3149
--- /dev/null
+++ b/src/apps/perps/components/TradeSignals.tsx
@@ -0,0 +1,190 @@
+import { useState, useEffect } from 'react';
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+import { Badge } from './ui/badge';
+import { Copy, RefreshCw, TrendingUp, TrendingDown } from 'lucide-react';
+import { toast } from 'sonner';
+import { Skeleton } from './ui/skeleton';
+
+interface TradeSignal {
+  symbol: string;
+  side: 'long' | 'short';
+  entry: number | [number, number];
+  stopLoss: number;
+  takeProfits: number[];
+  timestamp?: string;
+}
+
+interface TradeSignalsProps {
+  onCopySignal: (signal: TradeSignal) => void;
+}
+
+export function TradeSignals({ onCopySignal }: TradeSignalsProps) {
+  const [signals, setSignals] = useState<TradeSignal[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    loadSignals();
+  }, []);
+
+  const loadSignals = async () => {
+    setIsLoading(true);
+    try {
+      // TODO: Replace with your own trade signals API endpoint
+      // const response = await fetch('YOUR_API_ENDPOINT_HERE');
+
+      // For now, return empty signals
+      console.warn('Trade signals API not configured');
+      setSignals([]);
+    } catch (error: any) {
+      console.error('Failed to load signals:', error);
+      toast.error('Failed to load trade signals');
+      setSignals([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCopySignal = (signal: TradeSignal) => {
+    onCopySignal(signal);
+    toast.success('Signal copied to trade form!', {
+      description: `${signal.side.toUpperCase()} ${signal.symbol}`,
+    });
+  };
+
+  const getEntryDisplay = (entry: number | [number, number]) => {
+    if (Array.isArray(entry)) {
+      return `${entry[0]} - ${entry[1]}`;
+    }
+    return entry.toFixed(2);
+  };
+
+  if (isLoading) {
+    return (
+      <Card className="p-4">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-8 w-20" />
+          </div>
+          <Skeleton className="h-48 w-full" />
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-4">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Trade Signals</h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={loadSignals}
+            disabled={isLoading}
+            className="gap-2"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
+            />
+            Refresh
+          </Button>
+        </div>
+
+        <ScrollArea className="h-96">
+          <div className="space-y-3">
+            {signals.length === 0 ? (
+              <div className="text-center py-12 text-muted-foreground">
+                No trade signals available
+              </div>
+            ) : (
+              signals.map((signal, index) => (
+                <div
+                  key={index}
+                  className="p-4 border rounded-lg bg-card hover:bg-accent/5 transition-colors"
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className={`p-1.5 rounded ${
+                          signal.side === 'long'
+                            ? 'bg-success/10 text-success'
+                            : 'bg-destructive/10 text-destructive'
+                        }`}
+                      >
+                        {signal.side === 'long' ? (
+                          <TrendingUp className="h-4 w-4" />
+                        ) : (
+                          <TrendingDown className="h-4 w-4" />
+                        )}
+                      </div>
+                      <div>
+                        <h4 className="font-semibold">{signal.symbol}</h4>
+                        <Badge
+                          variant={
+                            signal.side === 'long' ? 'default' : 'destructive'
+                          }
+                          className="text-xs"
+                        >
+                          {signal.side.toUpperCase()}
+                        </Badge>
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleCopySignal(signal)}
+                      className="gap-2"
+                    >
+                      <Copy className="h-3 w-3" />
+                      Copy
+                    </Button>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="text-muted-foreground">Entry:</span>
+                      <span className="ml-2 font-mono font-semibold">
+                        {getEntryDisplay(signal.entry)}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-muted-foreground">Stop Loss:</span>
+                      <span className="ml-2 font-mono font-semibold text-destructive">
+                        {signal.stopLoss.toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="col-span-2">
+                      <span className="text-muted-foreground">
+                        Take Profits:
+                      </span>
+                      <div className="flex flex-wrap gap-1 mt-1">
+                        {signal.takeProfits.map((tp, tpIndex) => (
+                          <Badge
+                            key={tpIndex}
+                            variant="secondary"
+                            className="font-mono text-xs"
+                          >
+                            {tp.toFixed(2)}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  {signal.timestamp && (
+                    <div className="text-xs text-muted-foreground mt-2">
+                      {new Date(signal.timestamp).toLocaleString()}
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/TradingChart.tsx b/src/apps/perps/components/TradingChart.tsx
new file mode 100644
index 00000000..ce56bd58
--- /dev/null
+++ b/src/apps/perps/components/TradingChart.tsx
@@ -0,0 +1,306 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import {
+  createChart,
+  type IChartApi,
+  type ISeriesApi,
+  type CandlestickData,
+  type Time,
+} from 'lightweight-charts';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import type { AssetInfo } from '../lib/hyperliquid/types';
+import { PriceTicker } from './PriceTicker';
+
+interface TradingChartProps {
+  selectedAsset: AssetInfo | null;
+}
+
+type Interval = '1m' | '5m' | '15m' | '1h' | '4h' | '1d';
+
+interface CandleResponse {
+  t: number; // timestamp
+  o: string; // open (API returns as string)
+  h: string; // high (API returns as string)
+  l: string; // low (API returns as string)
+  c: string; // close (API returns as string)
+  v: string; // volume (API returns as string)
+}
+
+export function TradingChart({ selectedAsset }: TradingChartProps) {
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<IChartApi | null>(null);
+  const candlestickSeriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
+  const [interval, setInterval] = useState<Interval>('1h');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchCandles = useCallback(
+    async (symbol: string, intervalStr: Interval) => {
+      try {
+        setIsLoading(true);
+        const now = Date.now();
+        const intervalMs: Record<Interval, number> = {
+          '1m': 60 * 1000,
+          '5m': 5 * 60 * 1000,
+          '15m': 15 * 60 * 1000,
+          '1h': 60 * 60 * 1000,
+          '4h': 4 * 60 * 60 * 1000,
+          '1d': 24 * 60 * 60 * 1000,
+        };
+
+        const startTime = now - 300 * intervalMs[intervalStr]; // Last 300 candles in milliseconds
+
+        const response = await fetch('https://api.hyperliquid.xyz/info', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            type: 'candleSnapshot',
+            req: {
+              coin: symbol,
+              interval: intervalStr,
+              startTime,
+              endTime: now,
+            },
+          }),
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error('[Chart] API error:', {
+            status: response.status,
+            error: errorText,
+            symbol,
+            intervalStr,
+          });
+          throw new Error(`Candles API error: ${response.status} ${errorText}`);
+        }
+
+        const raw: CandleResponse[] = await response.json();
+
+        if (!Array.isArray(raw)) {
+          console.error('[Chart] Invalid response format:', raw);
+          return [];
+        }
+
+        const candlestickData: CandlestickData<Time>[] = raw
+          .filter((c) => c && c.t && c.o && c.h && c.l && c.c)
+          .map((candle) => ({
+            time: Math.floor(Number(candle.t) / 1000) as Time,
+            open: parseFloat(candle.o),
+            high: parseFloat(candle.h),
+            low: parseFloat(candle.l),
+            close: parseFloat(candle.c),
+          }))
+          .sort((a, b) => (a.time as number) - (b.time as number));
+
+        console.log(`[Chart] ${symbol} ${intervalStr}:`, {
+          fetched: raw.length,
+          rendered: candlestickData.length,
+          first: candlestickData[0]?.time,
+          last: candlestickData[candlestickData.length - 1]?.time,
+        });
+
+        return candlestickData;
+      } catch (error) {
+        console.error('Error fetching candles:', error);
+        return [];
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!chartContainerRef.current) return;
+
+    const chart = createChart(chartContainerRef.current, {
+      layout: {
+        background: { color: 'transparent' },
+        textColor: '#9CA3AF',
+      },
+      grid: {
+        vertLines: { color: '#1F2937' },
+        horzLines: { color: '#1F2937' },
+      },
+      width: chartContainerRef.current.clientWidth,
+      height: 400,
+      timeScale: {
+        borderColor: '#374151',
+        timeVisible: true,
+        secondsVisible: false,
+      },
+      rightPriceScale: {
+        borderColor: '#374151',
+      },
+      localization: {
+        priceFormatter: (price: number) => {
+          if (price < 1 && price > 0) {
+            return price.toFixed(5);
+          }
+          return price.toFixed(2);
+        },
+      },
+      crosshair: {
+        mode: 1,
+      },
+    });
+
+    const candlestickSeries = chart.addCandlestickSeries({
+      upColor: '#10B981',
+      downColor: '#EF4444',
+      borderUpColor: '#10B981',
+      borderDownColor: '#EF4444',
+      wickUpColor: '#10B981',
+      wickDownColor: '#EF4444',
+      priceFormat: {
+        type: 'custom',
+        formatter: (price: number) => {
+          if (price < 1 && price > 0) {
+            return price.toFixed(5);
+          }
+          return price.toFixed(2);
+        },
+        minMove: 0.00001,
+      },
+    });
+
+    chartRef.current = chart;
+    candlestickSeriesRef.current = candlestickSeries;
+
+    const handleResize = () => {
+      if (chartContainerRef.current && chartRef.current) {
+        chartRef.current.applyOptions({
+          width: chartContainerRef.current.clientWidth,
+        });
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chart.remove();
+    };
+  }, []);
+
+  // Update price formatter when asset changes
+  useEffect(() => {
+    if (!chartRef.current || !candlestickSeriesRef.current || !selectedAsset) return;
+
+    // We'll update the formatter when data loads
+    // For now, just set a flag based on common knowledge of asset prices
+    // This will be refined when candle data loads
+  }, [selectedAsset]);
+
+  // Initial Data Load (Rest API) + 2-second refresh
+  useEffect(() => {
+    if (!selectedAsset || !candlestickSeriesRef.current) return;
+
+    const loadData = async () => {
+      const data = await fetchCandles(selectedAsset.symbol, interval);
+      if (data.length > 0 && candlestickSeriesRef.current && chartRef.current) {
+        candlestickSeriesRef.current.setData(data);
+        chartRef.current.timeScale().fitContent();
+
+        // Determine precision based on actual price data
+        const lastCandle = data[data.length - 1];
+        const currentPrice = lastCandle.close;
+        const useHighPrecision = currentPrice < 1;
+
+        console.log('[Chart] Updating formatter:', {
+          symbol: selectedAsset.symbol,
+          currentPrice,
+          useHighPrecision,
+        });
+
+        // Update formatters based on actual price
+        chartRef.current.applyOptions({
+          localization: {
+            priceFormatter: (price: number) => {
+              if (useHighPrecision && price < 1 && price > 0) {
+                return price.toFixed(5);
+              }
+              return price.toFixed(2);
+            },
+          },
+        });
+
+        candlestickSeriesRef.current.applyOptions({
+          priceFormat: {
+            type: 'custom',
+            formatter: (price: number) => {
+              if (useHighPrecision && price < 1 && price > 0) {
+                return price.toFixed(5);
+              }
+              return price.toFixed(2);
+            },
+            minMove: useHighPrecision ? 0.00001 : 0.01,
+          },
+        });
+      }
+    };
+
+    loadData();
+
+    // Refresh chart data every 2 seconds
+    const refreshInterval = setInterval(loadData, 2000);
+
+    return () => {
+      clearInterval(refreshInterval);
+    };
+  }, [selectedAsset, interval, fetchCandles]);
+
+  const intervals: Interval[] = ['1m', '5m', '15m', '1h', '4h', '1d'];
+
+  return (
+    <Card className="pt-0">
+      {/* Price Ticker */}
+      <PriceTicker selectedAsset={selectedAsset} />
+
+      <CardHeader className="pt-0 pb-3 px-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg">
+            {selectedAsset ? selectedAsset.symbol : 'Select an asset'}
+          </CardTitle>
+          <div className="flex gap-1">
+            {intervals.map((int) => (
+              <Button
+                key={int}
+                variant={interval === int ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setInterval(int)}
+                disabled={isLoading || !selectedAsset}
+                className="h-7 px-2 text-xs"
+              >
+                {int}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        {!selectedAsset ? (
+          <div className="flex items-center justify-center h-[400px] text-muted-foreground">
+            Select an asset to view the chart
+          </div>
+        ) : (
+          <div className="relative">
+            <div ref={chartContainerRef} className="w-full h-[400px]" />
+            {isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+                <div className="text-sm text-muted-foreground">
+                  Loading chart data...
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/UnlockWalletModal.tsx b/src/apps/perps/components/UnlockWalletModal.tsx
new file mode 100644
index 00000000..dcdebc06
--- /dev/null
+++ b/src/apps/perps/components/UnlockWalletModal.tsx
@@ -0,0 +1,133 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Label } from './ui/label';
+import { Lock } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from './ui/input-otp';
+
+interface UnlockWalletModalProps {
+    isOpen: boolean;
+    onUnlock: (pin: string) => Promise<boolean>;
+    onClose: () => void;
+}
+
+export function UnlockWalletModal({ isOpen, onUnlock, onClose }: UnlockWalletModalProps) {
+    const [pin, setPin] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    // Reset PIN when modal opens/closes
+    useEffect(() => {
+        if (!isOpen) {
+            setPin('');
+            setIsLoading(false);
+        } else {
+            // Auto-focus the input when modal opens
+            // Attempt 1: Fast (for desktop/fast devices)
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 50);
+
+            // Attempt 2: Slower (for mobile animations to finish)
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 500);
+        }
+    }, [isOpen]);
+
+    const handleUnlockAttempt = useCallback(async (pinValue: string) => {
+        if (pinValue.length !== 4) return;
+
+        setIsLoading(true);
+        try {
+            const success = await onUnlock(pinValue);
+            if (success) {
+                toast.success('Wallet unlocked!');
+                setPin(''); // Clear PIN on success
+            } else {
+                // Handle explicit failure (false returned)
+                toast.error('Incorrect PIN');
+                setPin('');
+                setTimeout(() => {
+                    inputRef.current?.focus();
+                }, 100);
+            }
+        } catch (error) {
+            console.error('Unlock failed', error);
+            toast.error('Incorrect PIN');
+            setPin(''); // Clear PIN on failure to allow retry
+            // Refocus input on failure
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 100);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [onUnlock]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        handleUnlockAttempt(pin);
+    };
+
+    // Auto-submit when PIN is complete
+    useEffect(() => {
+        if (pin.length === 4 && !isLoading) {
+            handleUnlockAttempt(pin);
+        }
+    }, [pin, handleUnlockAttempt, isLoading]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={() => { }}>
+            <DialogContent className="sm:max-w-md" onPointerDownOutside={(e) => e.preventDefault()} onEscapeKeyDown={(e) => e.preventDefault()}>
+                <DialogHeader>
+                    <DialogTitle className="flex items-center justify-center gap-2 text-center">
+                        <Lock className="h-5 w-5" />
+                        Unlock Agent Wallet
+                    </DialogTitle>
+                    <DialogDescription className="text-center">
+                        Enter your PIN to unlock your trading agent.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit} className="space-y-6 py-4">
+                    <div className="space-y-2 flex flex-col items-center">
+                        <Label htmlFor="pin" className="w-full text-center">PIN Code</Label>
+                        <InputOTP
+                            ref={inputRef}
+                            maxLength={4}
+                            value={pin}
+                            onChange={(value) => setPin(value)}
+                            disabled={isLoading}
+                            autoFocus
+                        >
+                            <InputOTPGroup>
+                                <InputOTPSlot index={0} masked />
+                                <InputOTPSlot index={1} masked />
+                                <InputOTPSlot index={2} masked />
+                                <InputOTPSlot index={3} masked />
+                            </InputOTPGroup>
+                        </InputOTP>
+                    </div>
+
+                    <div className="flex justify-end pt-2">
+                        <Button type="submit" disabled={isLoading || pin.length !== 4} className="w-full">
+                            {isLoading ? 'Unlocking...' : 'Unlock'}
+                        </Button>
+                    </div>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/apps/perps/components/ValidationStatus.tsx b/src/apps/perps/components/ValidationStatus.tsx
new file mode 100644
index 00000000..9171e700
--- /dev/null
+++ b/src/apps/perps/components/ValidationStatus.tsx
@@ -0,0 +1,131 @@
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { CheckCircle2, XCircle, Loader2, AlertCircle } from 'lucide-react';
+
+interface ValidationStatusProps {
+  status: 'validating' | 'success' | 'error' | 'idle';
+  agentAddress?: string;
+  balance?: string;
+  openPositions?: number;
+  errorMessage?: string;
+}
+
+export function ValidationStatus({
+  status,
+  agentAddress,
+  balance,
+  openPositions,
+  errorMessage,
+}: ValidationStatusProps) {
+  if (status === 'idle') return null;
+
+  return (
+    <Card className="border-2">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base flex items-center gap-2">
+          {status === 'validating' && (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
+              <span>Validating Agent...</span>
+            </>
+          )}
+          {status === 'success' && (
+            <>
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+              <span>Agent Validated Successfully</span>
+            </>
+          )}
+          {status === 'error' && (
+            <>
+              <XCircle className="h-4 w-4 text-red-500" />
+              <span>Validation Failed</span>
+            </>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {status === 'validating' && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-sm">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              <span className="text-muted-foreground">
+                Checking Hyperliquid connection...
+              </span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              <span className="text-muted-foreground">
+                Fetching agent data...
+              </span>
+            </div>
+          </div>
+        )}
+
+        {status === 'success' && agentAddress && (
+          <div className="space-y-3">
+            <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
+              <div className="flex items-start gap-2">
+                <CheckCircle2 className="h-4 w-4 text-green-500 mt-0.5" />
+                <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium text-green-700 dark:text-green-400">
+                    Connection Successful
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Successfully connected to Hyperliquid and verified agent
+                    credentials
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-secondary/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground mb-1">
+                  Agent Address
+                </p>
+                <p className="text-sm font-mono font-semibold">
+                  {agentAddress.slice(0, 6)}...{agentAddress.slice(-4)}
+                </p>
+              </div>
+
+              <div className="bg-secondary/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground mb-1">Balance</p>
+                <p className="text-sm font-semibold text-green-600">
+                  ${balance || '0.00'}
+                </p>
+              </div>
+
+              <div className="bg-secondary/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground mb-1">
+                  Open Positions
+                </p>
+                <p className="text-sm font-semibold">{openPositions || 0}</p>
+              </div>
+
+              <div className="bg-secondary/50 rounded-lg p-3">
+                <p className="text-xs text-muted-foreground mb-1">Status</p>
+                <p className="text-sm font-semibold text-green-600">Active</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="h-4 w-4 text-red-500 mt-0.5" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-1">
+                  Validation Error
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {errorMessage ||
+                    'Failed to validate agent. Please check your credentials and try again.'}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/apps/perps/components/WithdrawModal.tsx b/src/apps/perps/components/WithdrawModal.tsx
new file mode 100644
index 00000000..e9c72628
--- /dev/null
+++ b/src/apps/perps/components/WithdrawModal.tsx
@@ -0,0 +1,229 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../components/ui/dialog';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { ArrowUpDown } from 'lucide-react';
+import { useToast } from '../hooks/use-toast';
+import { postExchange } from '../lib/hyperliquid/client';
+import { signWithdraw3Action } from '../lib/hyperliquid/signing';
+import type { WalletClient } from 'viem';
+import type { UserState } from '../lib/hyperliquid/types';
+
+interface WithdrawModalProps {
+  userState: UserState;
+  masterAddress: string;
+  walletClient: WalletClient | null;
+  onSuccess?: () => void;
+  trigger?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export function WithdrawModal({
+  userState,
+  masterAddress,
+  walletClient,
+  onSuccess,
+  trigger,
+  disabled,
+}: WithdrawModalProps) {
+  const [open, setOpen] = useState(false);
+  const [amount, setAmount] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
+
+  const availableBalance = userState?.marginSummary?.accountValue
+    ? parseFloat(userState.marginSummary.accountValue) -
+    parseFloat(userState.marginSummary.totalMarginUsed)
+    : 0;
+
+  const handleMaxClick = () => {
+    // Leave a small buffer for potential fees/margin
+    const maxWithdrawable = Math.max(0, availableBalance - 0.1);
+    setAmount(maxWithdrawable.toFixed(2));
+  };
+
+  const handleWithdraw = async () => {
+    if (!amount || parseFloat(amount) <= 0) {
+      toast({
+        title: 'Invalid Amount',
+        description: 'Please enter a valid amount',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (parseFloat(amount) > availableBalance) {
+      toast({
+        title: 'Insufficient Balance',
+        description: `You can only withdraw up to $${availableBalance.toFixed(2)}`,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (parseFloat(amount) < 1) {
+      toast({
+        title: 'Amount Too Low',
+        description: 'Minimum withdrawal is 1 USDC',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!walletClient) {
+      toast({
+        title: 'Wallet Not Connected',
+        description: 'Please connect your wallet to withdraw',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const nonce = Date.now();
+
+      // Build the withdraw3 action for L1 withdrawal
+      // Note: isTestnet needs to be imported or determined. For now assuming Mainnet/Testnet toggle logic.
+      const isTestnet = window.location.hostname.includes('localhost') || window.location.hostname.includes('testnet');
+
+      const action = {
+        type: 'withdraw3',
+        hyperliquidChain: isTestnet ? 'Testnet' : 'Mainnet',
+        signatureChainId: isTestnet ? '0x66eee' : '0xa4b1',
+        destination: masterAddress,
+        amount: amount,
+        time: nonce,
+      };
+
+      // Sign the action with the master wallet (connected wallet)
+      const signature = await signWithdraw3Action(
+        walletClient,
+        action
+      );
+
+      // Send the signed action to Hyperliquid
+      const response = await postExchange({
+        action,
+        nonce,
+        signature,
+        vaultAddress: null,
+      });
+
+      if (response.status === 'ok') {
+        toast({
+          title: 'Withdrawal Successful!',
+          description: `Successfully withdrew $${amount} USDC to your wallet`,
+        });
+        setAmount('');
+        setOpen(false);
+        onSuccess?.();
+      } else {
+        throw new Error(response.response || 'Withdrawal failed');
+      }
+    } catch (error: any) {
+      console.error('Withdrawal error:', error);
+      toast({
+        title: 'Withdrawal Failed',
+        description: error.message || 'Failed to withdraw USDC',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm" disabled={disabled}>
+            <ArrowUpDown className="h-4 w-4 mr-2" />
+            Withdraw
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Withdraw USDC</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label className="text-sm text-muted-foreground">
+              Available to Withdraw
+            </Label>
+            <p className="text-2xl font-bold">${availableBalance.toFixed(2)}</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-sm text-muted-foreground">Destination</Label>
+            <p className="text-sm font-mono bg-muted rounded p-2 break-all">
+              {masterAddress}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="amount">Amount (USDC)</Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleMaxClick}
+                disabled={availableBalance <= 0}
+                className="h-6 text-xs"
+              >
+                Max
+              </Button>
+            </div>
+            <Input
+              id="amount"
+              type="number"
+              placeholder="0.00"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              disabled={isLoading}
+              step="0.01"
+              min="0"
+            />
+          </div>
+
+          <div className="rounded-lg bg-muted p-3 space-y-1">
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">Network:</span>
+              <span className="text-muted-foreground">Arbitrum One</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">Transfer Time:</span>
+              <span className="text-muted-foreground">~5 mins</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="font-medium">Fee:</span>
+              <span className="text-muted-foreground">1.00 USDC</span>
+            </div>
+          </div>
+
+          <Button
+            onClick={handleWithdraw}
+            disabled={
+              isLoading ||
+              !amount ||
+              parseFloat(amount) <= 0 ||
+              parseFloat(amount) > availableBalance
+            }
+            className="w-full"
+          >
+            {isLoading ? 'Processing...' : 'Withdraw to Master Wallet'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/apps/perps/components/mobile/MobileBalanceCard.tsx b/src/apps/perps/components/mobile/MobileBalanceCard.tsx
new file mode 100644
index 00000000..275e72bc
--- /dev/null
+++ b/src/apps/perps/components/mobile/MobileBalanceCard.tsx
@@ -0,0 +1,52 @@
+import { DollarSign, Minus, Plus } from 'lucide-react';
+import { Button } from '../ui/button';
+
+interface MobileBalanceCardProps {
+  balance: string;
+  onWithdraw?: () => void;
+  onDeposit?: () => void;
+}
+
+export function MobileBalanceCard({
+  balance,
+  onWithdraw,
+  onDeposit,
+}: MobileBalanceCardProps) {
+  return (
+    <div className="bg-white rounded-2xl p-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        {/* Icon and Balance */}
+        <div className="flex items-center gap-3">
+          <div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center">
+            <DollarSign className="h-6 w-6 text-white" />
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 uppercase font-medium tracking-wide">
+              Available Balance
+            </p>
+            <p className="text-2xl font-bold text-foreground">${balance}</p>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-2">
+          <Button
+            onClick={onWithdraw}
+            size="icon"
+            className="h-12 w-12 rounded-full bg-muted hover:bg-muted/80 text-foreground"
+            variant="ghost"
+          >
+            <Minus className="h-5 w-5" />
+          </Button>
+          <Button
+            onClick={onDeposit}
+            size="icon"
+            className="h-12 w-12 rounded-full bg-green-500 hover:bg-green-600 text-white"
+          >
+            <Plus className="h-5 w-5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/mobile/MobileHeader.tsx b/src/apps/perps/components/mobile/MobileHeader.tsx
new file mode 100644
index 00000000..729d2994
--- /dev/null
+++ b/src/apps/perps/components/mobile/MobileHeader.tsx
@@ -0,0 +1,34 @@
+import { User, Clock } from 'lucide-react';
+import { Button } from '../ui/button';
+
+export function MobileHeader() {
+  return (
+    <header className="fixed top-0 left-0 right-0 bg-white z-50 px-4 py-3 flex items-center justify-between border-b border-gray-100">
+      {/* Profile Button */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-10 w-10 rounded-full bg-purple-100 hover:bg-purple-200"
+      >
+        <User className="h-5 w-5 text-purple-600" />
+      </Button>
+
+      {/* Logo */}
+      <div className="flex items-center gap-2">
+        <div className="h-6 w-6 rounded bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center">
+          <span className="text-white text-xs font-bold">∞</span>
+        </div>
+        <span className="text-lg font-bold">Perps</span>
+      </div>
+
+      {/* History Button */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-10 w-10 rounded-full bg-gray-100 hover:bg-gray-200"
+      >
+        <Clock className="h-5 w-5 text-gray-700" />
+      </Button>
+    </header>
+  );
+}
diff --git a/src/apps/perps/components/mobile/MobileMarketsList.tsx b/src/apps/perps/components/mobile/MobileMarketsList.tsx
new file mode 100644
index 00000000..4a1e6b86
--- /dev/null
+++ b/src/apps/perps/components/mobile/MobileMarketsList.tsx
@@ -0,0 +1,115 @@
+import { Search, ChevronDown, ChevronRight } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+interface Market {
+  coin: string;
+  coinIcon?: string;
+  price: string;
+  maxLeverage: number;
+  volume: string;
+  change: string;
+  changePercent: string;
+}
+
+interface MobileMarketsListProps {
+  markets: Market[];
+  onMarketSelect?: (coin: string) => void;
+}
+
+export function MobileMarketsList({
+  markets,
+  onMarketSelect,
+}: MobileMarketsListProps) {
+  return (
+    <div className="bg-white rounded-t-3xl p-4 pb-24">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold flex items-center gap-2">
+          Markets
+          <ChevronRight className="h-5 w-5 text-gray-400" />
+        </h2>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9 rounded-full bg-gray-100"
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            className="h-9 px-3 rounded-full bg-gray-100 text-sm"
+          >
+            By Price
+            <ChevronDown className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Markets List */}
+      <div className="space-y-3">
+        {markets.map((market) => (
+          <button
+            key={market.coin}
+            onClick={() => onMarketSelect?.(market.coin)}
+            className="w-full flex items-center justify-between py-3 border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors"
+          >
+            {/* Left: Icon and Info */}
+            <div className="flex items-center gap-3">
+              {/* Coin Icon */}
+              <div
+                className={`h-12 w-12 rounded-full flex items-center justify-center ${getCoinColor(market.coin)}`}
+              >
+                <span className="text-white font-bold">
+                  {getCoinInitial(market.coin)}
+                </span>
+              </div>
+
+              {/* Coin Info */}
+              <div className="text-left">
+                <p className="font-semibold text-base">{market.coin}</p>
+                <div className="flex items-center gap-2 text-xs text-gray-500">
+                  <span className="uppercase">Up to {market.maxLeverage}x</span>
+                  <span>•</span>
+                  <span className="uppercase">Vol {market.volume}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Right: Price and Change */}
+            <div className="text-right">
+              <p className="font-semibold text-base">${market.price}</p>
+              <p
+                className={`text-sm font-medium ${market.change.startsWith('-')
+                    ? 'text-red-500'
+                    : 'text-green-500'
+                  }`}
+              >
+                {market.changePercent}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function getCoinColor(coin: string): string {
+  const colors: Record<string, string> = {
+    BTC: 'bg-orange-500',
+    ETH: 'bg-gray-800',
+    XYZ100: 'bg-gray-600',
+    PAXG: 'bg-yellow-500',
+    GOLD: 'bg-blue-600',
+    ZEC: 'bg-yellow-600',
+  };
+  return colors[coin] || 'bg-gray-500';
+}
+
+function getCoinInitial(coin: string): string {
+  if (coin === 'XYZ100') return '100';
+  return coin.charAt(0);
+}
diff --git a/src/apps/perps/components/mobile/MobilePositionsCard.tsx b/src/apps/perps/components/mobile/MobilePositionsCard.tsx
new file mode 100644
index 00000000..36338b4c
--- /dev/null
+++ b/src/apps/perps/components/mobile/MobilePositionsCard.tsx
@@ -0,0 +1,273 @@
+import { ChevronRight } from 'lucide-react';
+import { Badge } from '../ui/badge';
+
+interface Position {
+  coin: string;
+  coinIcon?: string;
+  leverage: number;
+  side: 'LONG' | 'SHORT';
+  value: string;
+  pnl: string;
+  pnlPercent: string;
+  entryPrice: string;
+  markPrice: string;
+  liqPrice: string;
+}
+
+interface MobilePositionsCardProps {
+  positions: Position[];
+  totalValue: string;
+  totalPnl: string;
+  totalPnlPercent: string;
+  openOrders?: any[];
+  onPositionClick?: (coin: string) => void;
+}
+
+export function MobilePositionsCard({
+  positions,
+  totalValue,
+  totalPnl,
+  totalPnlPercent,
+  openOrders,
+  onPositionClick,
+}: MobilePositionsCardProps) {
+  const isNegative = totalPnl.startsWith('-');
+
+  // Helper to aggregate TP and SL orders for a specific coin
+  const getOpenTP_SL = (coin: string, side: 'LONG' | 'SHORT', markPrice: string) => {
+    if (!openOrders) return { tps: [], sls: [] };
+
+    const isLong = side === 'LONG';
+    const markPx = parseFloat(markPrice.replace(/,/g, ''));
+    const positionOrders = openOrders.filter(
+      (o) => o.coin === coin && o.reduceOnly
+    );
+
+    const tps: { price: number }[] = [];
+    const sls: { price: number }[] = [];
+
+    positionOrders.forEach((order) => {
+      const isBuy = order.side === 'B';
+      const isClosing = (isLong && !isBuy) || (!isLong && isBuy);
+
+      if (isClosing) {
+        const triggerPx = parseFloat(
+          order.trigger?.triggerPx ||
+          order.triggerCondition?.triggerPx ||
+          '0'
+        );
+        const limitPx = parseFloat(order.limitPx || '0');
+        const price = triggerPx > 0 ? triggerPx : limitPx;
+
+        // Classify as TP or SL based on price relative to mark price
+        if (isLong) {
+          if (price > markPx) tps.push({ price });
+          else sls.push({ price });
+        } else {
+          if (price < markPx) tps.push({ price });
+          else sls.push({ price });
+        }
+      }
+    });
+
+    // Sort and return
+    tps.sort((a, b) => a.price - b.price);
+    sls.sort((a, b) => a.price - b.price);
+
+    return { tps, sls };
+  };
+
+  return (
+    <div className="bg-white rounded-2xl p-4 shadow-sm">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-base font-semibold text-gray-500">
+          Open Positions
+        </h3>
+        <span
+          className={`text-sm font-bold ${isNegative ? 'text-red-500' : 'text-green-500'}`}
+        >
+          {isNegative ? '↓' : '↑'} {totalPnlPercent}
+        </span>
+      </div>
+
+      {/* Total Value */}
+      <div className="flex items-center justify-between mb-4">
+        <span className="text-3xl font-bold">${totalValue}</span>
+        <span
+          className={`text-lg font-bold ${isNegative ? 'text-red-500' : 'text-green-500'}`}
+        >
+          {totalPnl}
+        </span>
+      </div>
+
+      {/* Positions List */}
+      <div className="space-y-3">
+        {positions.map((position, index) => (
+          <div
+            key={index}
+            className="border-t border-gray-100 pt-3 cursor-pointer hover:bg-gray-50 transition-colors"
+            onClick={() => onPositionClick?.(position.coin)}
+          >
+            {/* Position Header */}
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                {/* Coin Icon */}
+                <div className="h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">
+                    {position.coin.charAt(0)}
+                  </span>
+                </div>
+
+                {/* Coin Name and Badges */}
+                <div className="flex items-center gap-2">
+                  <span className="font-semibold">{position.coin}</span>
+
+                  <Badge
+                    className={`text-xs px-2 py-0.5 ${position.side === 'LONG'
+                      ? 'bg-green-100 text-green-700 hover:bg-green-100'
+                      : 'bg-red-100 text-red-700 hover:bg-red-100'
+                      }`}
+                  >
+                    {position.side}
+                  </Badge>
+
+                  <span className={`text-xs font-bold ${position.side === 'LONG' ? 'text-green-500' : 'text-green-500'}`}>
+                    {position.leverage}x
+                  </span>
+
+                  <ChevronRight className="h-4 w-4 text-gray-400" />
+                </div>
+              </div>
+
+              {/* Value and PNL */}
+              <div className="text-right">
+                <div className="font-semibold">${position.value}</div>
+                <div
+                  className={`text-sm ${position.pnl.startsWith('-') ? 'text-red-500' : 'text-green-500'}`}
+                >
+                  {position.pnl}
+                </div>
+              </div>
+            </div>
+
+            {/* Price Grid */}
+            <div className="grid grid-cols-3 gap-2 text-xs">
+              <div>
+                <p className="text-gray-500 uppercase mb-1">Entry</p>
+                <p className="font-medium">${position.entryPrice}</p>
+              </div>
+              <div>
+                <p className="text-gray-500 uppercase mb-1">Mark Price</p>
+                <p className="font-medium">${position.markPrice}</p>
+              </div>
+              <div>
+                <p className="text-gray-500 uppercase mb-1">Liq. Price</p>
+                <p className="font-medium">${position.liqPrice}</p>
+              </div>
+            </div>
+            <div>
+              <p className="text-gray-500 uppercase mb-1">TP / SL</p>
+              <div className="font-medium">
+                {(() => {
+                  const isLong = position.side === 'LONG';
+                  const { tps, sls } = getOpenTP_SL(
+                    position.coin,
+                    position.side,
+                    position.markPrice
+                  );
+
+                  if (tps.length === 0 && sls.length === 0) return '-';
+
+                  // Show closest orders only
+                  const closestTp = isLong
+                    ? tps[0]
+                    : tps[tps.length - 1];
+                  const closestSl = isLong
+                    ? sls[sls.length - 1]
+                    : sls[0];
+
+                  return (
+                    <div className="flex gap-2 justify-end">
+                      {closestTp && (
+                        <span className="text-green-500">
+                          $
+                          {closestTp.price.toLocaleString(
+                            undefined,
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
+                        </span>
+                      )}
+                      {closestSl && (
+                        <span className="text-red-500">
+                          $
+                          {closestSl.price.toLocaleString(
+                            undefined,
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Open Orders Section */}
+      {openOrders && openOrders.length > 0 && (
+        <div className="mt-6 border-t border-gray-100 pt-4">
+          <h3 className="text-base font-semibold text-gray-500 mb-3">
+            Open Orders
+          </h3>
+          <div className="space-y-3">
+            {openOrders.map((order: any, index: number) => {
+              const buy = order.side === 'B';
+              return (
+                <div
+                  key={index}
+                  className="flex items-center justify-between py-2 text-sm border-b border-gray-50 last:border-0"
+                >
+                  <div className="flex flex-col">
+                    <span className="font-bold">{order.coin}</span>
+                    <span
+                      className={`text-xs ${buy ? 'text-green-500' : 'text-red-500'}`}
+                    >
+                      {buy ? 'Long' : 'Short'}{' '}
+                      {order.reduceOnly ? '(Red.)' : ''}
+                    </span>
+                  </div>
+                  <div className="flex flex-col items-end">
+                    <span className="font-medium">
+                      {order.sz} @{' '}
+                      {(() => {
+                        const price = parseFloat(
+                          order.limitPx || order.trigger?.triggerPx || 0
+                        );
+                        return Math.abs(price) < 1
+                          ? price.toFixed(5)
+                          : price.toLocaleString(undefined, {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          });
+                      })()}
+                    </span>
+                    <span className="text-xs text-gray-400">Limit</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/apps/perps/components/ui/accordion.tsx b/src/apps/perps/components/ui/accordion.tsx
new file mode 100644
index 00000000..ebf7b6d5
--- /dev/null
+++ b/src/apps/perps/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/apps/perps/components/ui/alert-dialog.tsx b/src/apps/perps/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..86e0c548
--- /dev/null
+++ b/src/apps/perps/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from '../../components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/src/apps/perps/components/ui/alert.tsx b/src/apps/perps/components/ui/alert.tsx
new file mode 100644
index 00000000..a8ace424
--- /dev/null
+++ b/src/apps/perps/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/apps/perps/components/ui/aspect-ratio.tsx b/src/apps/perps/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..5dfdf1e6
--- /dev/null
+++ b/src/apps/perps/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
diff --git a/src/apps/perps/components/ui/avatar.tsx b/src/apps/perps/components/ui/avatar.tsx
new file mode 100644
index 00000000..2c5fc211
--- /dev/null
+++ b/src/apps/perps/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/apps/perps/components/ui/badge.tsx b/src/apps/perps/components/ui/badge.tsx
new file mode 100644
index 00000000..37542953
--- /dev/null
+++ b/src/apps/perps/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/apps/perps/components/ui/breadcrumb.tsx b/src/apps/perps/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..5e6e3227
--- /dev/null
+++ b/src/apps/perps/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-normal text-foreground', className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/src/apps/perps/components/ui/button.tsx b/src/apps/perps/components/ui/button.tsx
new file mode 100644
index 00000000..349bbe0e
--- /dev/null
+++ b/src/apps/perps/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        gradient:
+          'bg-gradient-primary text-primary-foreground hover:opacity-90 shadow-glow transition-all',
+        glass:
+          'bg-card/50 backdrop-blur-lg border border-border text-foreground hover:bg-card/70 transition-all',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/src/apps/perps/components/ui/calendar.tsx b/src/apps/perps/components/ui/calendar.tsx
new file mode 100644
index 00000000..71481c5e
--- /dev/null
+++ b/src/apps/perps/components/ui/calendar.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from '../../components/ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
diff --git a/src/apps/perps/components/ui/card.tsx b/src/apps/perps/components/ui/card.tsx
new file mode 100644
index 00000000..fcde18dd
--- /dev/null
+++ b/src/apps/perps/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/apps/perps/components/ui/carousel.tsx b/src/apps/perps/components/ui/carousel.tsx
new file mode 100644
index 00000000..1cc56cbd
--- /dev/null
+++ b/src/apps/perps/components/ui/carousel.tsx
@@ -0,0 +1,261 @@
+import * as React from 'react';
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../../components/ui/button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('reInit', onSelect);
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/src/apps/perps/components/ui/chart.tsx b/src/apps/perps/components/ui/chart.tsx
new file mode 100644
index 00000000..92a69318
--- /dev/null
+++ b/src/apps/perps/components/ui/chart.tsx
@@ -0,0 +1,363 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '../../lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >['children'];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<'div'> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: 'line' | 'dot' | 'dashed';
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = 'dot',
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === 'string'
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn('font-medium', labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                  indicator === 'dot' && 'items-center'
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            }
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center'
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex items-center justify-center gap-4',
+          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContent.displayName = 'ChartLegend';
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/src/apps/perps/components/ui/checkbox.tsx b/src/apps/perps/components/ui/checkbox.tsx
new file mode 100644
index 00000000..6eaf7867
--- /dev/null
+++ b/src/apps/perps/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/src/apps/perps/components/ui/collapsible.tsx b/src/apps/perps/components/ui/collapsible.tsx
new file mode 100644
index 00000000..9605c4e4
--- /dev/null
+++ b/src/apps/perps/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/apps/perps/components/ui/command.tsx b/src/apps/perps/components/ui/command.tsx
new file mode 100644
index 00000000..89e5c540
--- /dev/null
+++ b/src/apps/perps/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent } from '../../components/ui/dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/apps/perps/components/ui/context-menu.tsx b/src/apps/perps/components/ui/context-menu.tsx
new file mode 100644
index 00000000..ae85f36d
--- /dev/null
+++ b/src/apps/perps/components/ui/context-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold text-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/src/apps/perps/components/ui/dialog.tsx b/src/apps/perps/components/ui/dialog.tsx
new file mode 100644
index 00000000..cabd0697
--- /dev/null
+++ b/src/apps/perps/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/apps/perps/components/ui/drawer.tsx b/src/apps/perps/components/ui/drawer.tsx
new file mode 100644
index 00000000..80d91e59
--- /dev/null
+++ b/src/apps/perps/components/ui/drawer.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '../../lib/utils';
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/src/apps/perps/components/ui/dropdown-menu.tsx b/src/apps/perps/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..3b8f1787
--- /dev/null
+++ b/src/apps/perps/components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/src/apps/perps/components/ui/form.tsx b/src/apps/perps/components/ui/form.tsx
new file mode 100644
index 00000000..1840b029
--- /dev/null
+++ b/src/apps/perps/components/ui/form.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '../../lib/utils';
+import { Label } from '../../components/ui/label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext.name) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/src/apps/perps/components/ui/hover-card.tsx b/src/apps/perps/components/ui/hover-card.tsx
new file mode 100644
index 00000000..df45dcbb
--- /dev/null
+++ b/src/apps/perps/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '../../lib/utils';
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/apps/perps/components/ui/input-otp.tsx b/src/apps/perps/components/ui/input-otp.tsx
new file mode 100644
index 00000000..b4304ee5
--- /dev/null
+++ b/src/apps/perps/components/ui/input-otp.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Dot } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+));
+InputOTP.displayName = 'InputOTP';
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+));
+InputOTPGroup.displayName = 'InputOTPGroup';
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number; masked?: boolean }
+>(({ index, className, masked, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+
+  // Defensive checks for context and index bounds
+  if (!inputOTPContext || !inputOTPContext.slots || !Array.isArray(inputOTPContext.slots)) {
+    console.warn('[InputOTPSlot] Component used outside OTPInput provider');
+    return null;
+  }
+
+  if (!Number.isFinite(index) || index < 0 || index >= inputOTPContext.slots.length) {
+    console.warn(`[InputOTPSlot] Invalid index: ${index}`);
+    return null;
+  }
+
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+        className
+      )}
+      {...props}
+    >
+      {masked && char ? <div className="h-2.5 w-2.5 bg-current rounded-full" /> : char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = 'InputOTPSlot';
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+));
+InputOTPSeparator.displayName = 'InputOTPSeparator';
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/src/apps/perps/components/ui/input.tsx b/src/apps/perps/components/ui/input.tsx
new file mode 100644
index 00000000..6af0e998
--- /dev/null
+++ b/src/apps/perps/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none moz-appearance-textfield',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/apps/perps/components/ui/label.tsx b/src/apps/perps/components/ui/label.tsx
new file mode 100644
index 00000000..8071fd26
--- /dev/null
+++ b/src/apps/perps/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/src/apps/perps/components/ui/menubar.tsx b/src/apps/perps/components/ui/menubar.tsx
new file mode 100644
index 00000000..6f40dbde
--- /dev/null
+++ b/src/apps/perps/components/ui/menubar.tsx
@@ -0,0 +1,234 @@
+import * as React from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = 'MenubarShortcut';
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
diff --git a/src/apps/perps/components/ui/navigation-menu.tsx b/src/apps/perps/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000..845c4d05
--- /dev/null
+++ b/src/apps/perps/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}{' '}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      className
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
diff --git a/src/apps/perps/components/ui/pagination.tsx b/src/apps/perps/components/ui/pagination.tsx
new file mode 100644
index 00000000..eec3b27a
--- /dev/null
+++ b/src/apps/perps/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { ButtonProps, buttonVariants } from '../../components/ui/button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
diff --git a/src/apps/perps/components/ui/popover.tsx b/src/apps/perps/components/ui/popover.tsx
new file mode 100644
index 00000000..bea5c307
--- /dev/null
+++ b/src/apps/perps/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/src/apps/perps/components/ui/progress.tsx b/src/apps/perps/components/ui/progress.tsx
new file mode 100644
index 00000000..f5757000
--- /dev/null
+++ b/src/apps/perps/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../../lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/src/apps/perps/components/ui/radio-group.tsx b/src/apps/perps/components/ui/radio-group.tsx
new file mode 100644
index 00000000..e3dbcff7
--- /dev/null
+++ b/src/apps/perps/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/apps/perps/components/ui/resizable.tsx b/src/apps/perps/components/ui/resizable.tsx
new file mode 100644
index 00000000..80bc53e9
--- /dev/null
+++ b/src/apps/perps/components/ui/resizable.tsx
@@ -0,0 +1,43 @@
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '../../lib/utils';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      className
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/src/apps/perps/components/ui/scroll-area.tsx b/src/apps/perps/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..b4aeb58a
--- /dev/null
+++ b/src/apps/perps/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../../lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/src/apps/perps/components/ui/select.tsx b/src/apps/perps/components/ui/select.tsx
new file mode 100644
index 00000000..e69f8bac
--- /dev/null
+++ b/src/apps/perps/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+          'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-muted focus:text-foreground hover:bg-muted hover:text-foreground',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/src/apps/perps/components/ui/separator.tsx b/src/apps/perps/components/ui/separator.tsx
new file mode 100644
index 00000000..c4b0a1f0
--- /dev/null
+++ b/src/apps/perps/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/apps/perps/components/ui/sheet.tsx b/src/apps/perps/components/ui/sheet.tsx
new file mode 100644
index 00000000..4ab03e4e
--- /dev/null
+++ b/src/apps/perps/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
diff --git a/src/apps/perps/components/ui/sidebar.tsx b/src/apps/perps/components/ui/sidebar.tsx
new file mode 100644
index 00000000..2a742a66
--- /dev/null
+++ b/src/apps/perps/components/ui/sidebar.tsx
@@ -0,0 +1,763 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { VariantProps, cva } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+
+import { useIsMobile } from '../../hooks/use-mobile';
+import { cn } from '../../lib/utils';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Separator } from '../../components/ui/separator';
+import { Sheet, SheetContent } from '../../components/ui/sheet';
+import { Skeleton } from '../../components/ui/skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../components/ui/tooltip';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContext = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        if (typeof window !== 'undefined') {
+          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        }
+      },
+      [setOpenProp, open]
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  }
+);
+SidebarProvider.displayName = 'SidebarProvider';
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+  }
+>(
+  (
+    {
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === 'none') {
+      return (
+        <div
+          className={cn(
+            'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+            'group-data-[collapsible=offcanvas]:w-0',
+            'group-data-[side=right]:rotate-180',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+          )}
+        />
+        <div
+          className={cn(
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+            side === 'left'
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            // Adjust the padding for floating and inset variants.
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('h-7 w-7', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'>
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = 'SidebarRail';
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'main'>
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = 'SidebarInset';
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn('mx-2 w-auto bg-sidebar-border', className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn('w-full text-sm', className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = 'SidebarMenu';
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn('group/menu-item relative', className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = 'default',
+      size = 'default',
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === 'string') {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== 'collapsed' || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  }
+);
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+        'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      className
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      className
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/src/apps/perps/components/ui/skeleton.tsx b/src/apps/perps/components/ui/skeleton.tsx
new file mode 100644
index 00000000..98005341
--- /dev/null
+++ b/src/apps/perps/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '../../lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/apps/perps/components/ui/slider.tsx b/src/apps/perps/components/ui/slider.tsx
new file mode 100644
index 00000000..6f475810
--- /dev/null
+++ b/src/apps/perps/components/ui/slider.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from '../../lib/utils';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary cursor-pointer">
+      <SliderPrimitive.Range className="absolute h-full bg-cyan-500" />
+      {/* Tick Marks */}
+      {[0, 25, 50, 75, 100].map((val) => (
+        <div
+          key={val}
+          className="absolute h-2 w-2 rounded-full bg-cyan-500 top-1/2 -translate-y-1/2 -translate-x-1/2 data-[active=false]:bg-muted"
+          style={{ left: `${val}%` }}
+        />
+      ))}
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-6 w-6 rounded-full border-[3px] border-cyan-500 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-110 transition-transform" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/src/apps/perps/components/ui/sonner.tsx b/src/apps/perps/components/ui/sonner.tsx
new file mode 100644
index 00000000..079a9fd3
--- /dev/null
+++ b/src/apps/perps/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, toast } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };
diff --git a/src/apps/perps/components/ui/switch.tsx b/src/apps/perps/components/ui/switch.tsx
new file mode 100644
index 00000000..e9a58222
--- /dev/null
+++ b/src/apps/perps/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../../lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/src/apps/perps/components/ui/table.tsx b/src/apps/perps/components/ui/table.tsx
new file mode 100644
index 00000000..eb80e90b
--- /dev/null
+++ b/src/apps/perps/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/src/apps/perps/components/ui/tabs.tsx b/src/apps/perps/components/ui/tabs.tsx
new file mode 100644
index 00000000..61e5ab98
--- /dev/null
+++ b/src/apps/perps/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/apps/perps/components/ui/textarea.tsx b/src/apps/perps/components/ui/textarea.tsx
new file mode 100644
index 00000000..3f3e79b4
--- /dev/null
+++ b/src/apps/perps/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/src/apps/perps/components/ui/toast.tsx b/src/apps/perps/components/ui/toast.tsx
new file mode 100644
index 00000000..4111577d
--- /dev/null
+++ b/src/apps/perps/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/src/apps/perps/components/ui/toaster.tsx b/src/apps/perps/components/ui/toaster.tsx
new file mode 100644
index 00000000..a5552c96
--- /dev/null
+++ b/src/apps/perps/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from '../../hooks/use-toast';
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '../../components/ui/toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/src/apps/perps/components/ui/toggle-group.tsx b/src/apps/perps/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1298002b
--- /dev/null
+++ b/src/apps/perps/components/ui/toggle-group.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { toggleVariants } from '../../components/ui/toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/src/apps/perps/components/ui/toggle.tsx b/src/apps/perps/components/ui/toggle.tsx
new file mode 100644
index 00000000..ef6a23ee
--- /dev/null
+++ b/src/apps/perps/components/ui/toggle.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/src/apps/perps/components/ui/tooltip.tsx b/src/apps/perps/components/ui/tooltip.tsx
new file mode 100644
index 00000000..a0119e4b
--- /dev/null
+++ b/src/apps/perps/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/apps/perps/components/ui/use-toast.ts b/src/apps/perps/components/ui/use-toast.ts
new file mode 100644
index 00000000..23a35fa2
--- /dev/null
+++ b/src/apps/perps/components/ui/use-toast.ts
@@ -0,0 +1,3 @@
+import { useToast, toast } from '../../hooks/use-toast';
+
+export { useToast, toast };
diff --git a/src/apps/perps/hooks/use-mobile.tsx b/src/apps/perps/hooks/use-mobile.tsx
new file mode 100644
index 00000000..bb092ac9
--- /dev/null
+++ b/src/apps/perps/hooks/use-mobile.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 1024;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/src/apps/perps/hooks/use-toast.ts b/src/apps/perps/hooks/use-toast.ts
new file mode 100644
index 00000000..bac105a1
--- /dev/null
+++ b/src/apps/perps/hooks/use-toast.ts
@@ -0,0 +1,188 @@
+import * as React from 'react';
+
+import type { ToastActionElement, ToastProps } from '../components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/src/apps/perps/hooks/useHyperliquid.ts b/src/apps/perps/hooks/useHyperliquid.ts
new file mode 100644
index 00000000..15046cdb
--- /dev/null
+++ b/src/apps/perps/hooks/useHyperliquid.ts
@@ -0,0 +1,418 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useWalletClient } from 'wagmi';
+import useTransactionKit from '../../../hooks/useTransactionKit';
+import {
+  getUserState,
+  postExchange,
+  getAllAssets,
+  getOpenOrders,
+} from '../lib/hyperliquid/client';
+import {
+  signUserAction,
+  buildNoopAction,
+  buildOrderAction,
+} from '../lib/hyperliquid/signing';
+import type {
+  UserState,
+  CopyTile,
+  HyperliquidOrder,
+  EnhancedAsset,
+} from '../lib/hyperliquid/types';
+import {
+  calculatePositionSize,
+  roundToSzDecimals,
+  getEntryPrice,
+  validateCopyTrade,
+} from '../lib/hyperliquid/math';
+import { toast } from 'sonner';
+import { getAgentAddress } from '../lib/hyperliquid/keystore';
+import { createWalletClient, custom } from 'viem';
+import { arbitrum } from 'viem/chains';
+
+type SetupStatus = 'unknown' | 'not-setup' | 'setup';
+
+export function useHyperliquid() {
+  const { kit } = useTransactionKit();
+  const [setupStatus, setSetupStatus] = useState<SetupStatus>('unknown');
+  const [userState, setUserState] = useState<UserState | null>(null);
+  const [openOrders, setOpenOrders] = useState<HyperliquidOrder[]>([]);
+  const [availableAssets, setAvailableAssets] = useState<EnhancedAsset[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeAddress, setActiveAddress] = useState<string | null>(null);
+  const [address, setAddress] = useState<string | null>(null);
+  const [walletClient, setWalletClient] = useState<any>(null);
+
+  const provider = kit.getProvider();
+
+  const checkSetupStatus = useCallback(async () => {
+    // 1. Check for Imported Account (Priority)
+    const { getImportedAccount } = await import('../lib/hyperliquid/keystore');
+    const importedAccount = getImportedAccount();
+
+    let targetAddress: string | null = null;
+    let client: any = null;
+    let isImported = false;
+
+    if (importedAccount) {
+      console.log('DEBUG: Using Imported Account:', importedAccount.accountAddress);
+      targetAddress = importedAccount.accountAddress;
+
+      // Create WalletClient from Private Key
+      const { privateKeyToAccount } = await import('viem/accounts');
+      const account = privateKeyToAccount(importedAccount.privateKey as `0x${string}`);
+
+      client = createWalletClient({
+        account,
+        chain: arbitrum,
+        transport: custom(provider as any),
+      });
+      isImported = true;
+    } else {
+      // 2. Fallback to Connected Wallet
+      const walletProvider = kit.getEtherspotProvider();
+      const eoa = (await walletProvider.getSdk()).getEOAAddress() || null;
+      console.log('DEBUG: Wallet Provider EOA:', eoa);
+
+      if (eoa) {
+        targetAddress = eoa;
+        client = createWalletClient({
+          account: eoa as `0x${string}`,
+          chain: arbitrum,
+          transport: custom(provider as any),
+        });
+      }
+    }
+
+    setAddress(targetAddress);
+    setWalletClient(client);
+    console.log('DEBUG: Active Client Account:', client?.account?.address);
+    // Always fetch assets on load
+    // Always fetch assets on load
+    try {
+      // Use getMetaAndAssetCtxs to get both metadata and prices
+      const { getMetaAndAssetCtxs } = await import('../lib/hyperliquid/client');
+      const data = await getMetaAndAssetCtxs();
+      console.log('DEBUG: getMetaAndAssetCtxs result:', data);
+
+      if (data && data[0] && data[1]) {
+        const universe = data[0];
+        const assetCtxs = data[1];
+
+        const assets: EnhancedAsset[] = universe.map((u: any, index: number) => {
+          const ctx = assetCtxs[index];
+          return {
+            id: index,
+            symbol: u.name,
+            szDecimals: u.szDecimals,
+            maxLeverage: u.maxLeverage,
+            price: ctx ? parseFloat(ctx.markPx) : 0,
+            volume: ctx ? parseFloat(ctx.dayNtlVlm) : 0,
+            priceChange: 0, // Not provided directly
+            priceChangePercent: 0, // Not provided directly
+          };
+        });
+        console.log('DEBUG: Parsed assets with prices:', assets.slice(0, 3));
+        const ethAsset = assets.find(a => a.symbol === 'ETH');
+        console.log('DEBUG: ETH Asset found:', ethAsset);
+        setAvailableAssets(assets);
+      } else {
+        // Fallback if structure is unexpected
+        const assets = await getAllAssets();
+        setAvailableAssets(assets as EnhancedAsset[]);
+      }
+    } catch (e) {
+      console.error('Failed to fetch assets', e);
+    }
+
+    if (!targetAddress) {
+      setSetupStatus('unknown');
+      setActiveAddress(null);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      console.log('DEBUG: Checking setup status for:', targetAddress);
+
+      // 1. Fetch Main Address Data
+      // Note: targetAddress is already set to either imported or eoa
+      let state = await getUserState(targetAddress);
+      console.log('state: ', state);
+      let orders = await getOpenOrders(targetAddress);
+
+      // 2. Check Agent Address
+      // Unconditional switch: If an agent is linked, we use it.
+      // const agentAddress = getAgentAddress(eoa);
+      // if (agentAddress) {
+      //   console.log(
+      //     'DEBUG: Found Agent Address, executing switch:',
+      //     agentAddress
+      //   );
+
+      //   const agentState = await getUserState(agentAddress);
+      //   const agentOrders = await getOpenOrders(agentAddress);
+
+      //   targetAddress = agentAddress as string;
+      //   state = agentState;
+      //   orders = agentOrders;
+      // }
+
+      setActiveAddress(targetAddress);
+      console.log('DEBUG: User State result for', targetAddress, state);
+
+      if (state) {
+        // Ensure assetPositions exists
+        if (!state.assetPositions) {
+          console.warn(
+            'WARNING: assetPositions missing in state, defaulting to []'
+          );
+          state.assetPositions = [];
+        }
+        setSetupStatus('setup');
+        setUserState(state);
+      } else {
+        setSetupStatus('not-setup');
+      }
+      if (orders) {
+        setOpenOrders(orders);
+      }
+    } catch (error) {
+      console.error('Error checking setup status:', error);
+      setSetupStatus('not-setup');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const setupHyperliquid = useCallback(async () => {
+    // Check for Imported Account logic again to ensure valid signer
+    const { getImportedAccount } = await import('../lib/hyperliquid/keystore');
+    const importedAccount = getImportedAccount();
+
+    let client;
+    if (importedAccount && importedAccount.accountAddress === address) {
+      const { privateKeyToAccount } = await import('viem/accounts');
+      const account = privateKeyToAccount(importedAccount.privateKey as `0x${string}`);
+      client = createWalletClient({
+        account,
+        chain: arbitrum,
+        transport: custom(provider as any),
+      });
+    } else {
+      client = createWalletClient({
+        account: address as `0x${string}`,
+        chain: arbitrum,
+        transport: custom(provider as any),
+      });
+    }
+
+    const walletClient = client;
+    if (!walletClient || !address) {
+      toast.error('Please connect your wallet first');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const action = buildNoopAction();
+      const nonce = Date.now();
+      const signature = await signUserAction(walletClient, action, nonce);
+
+      await postExchange({
+        action,
+        nonce,
+        signature,
+      });
+
+      toast.success('Hyperliquid account set up successfully!');
+      setSetupStatus('setup');
+      await checkSetupStatus();
+    } catch (error: any) {
+      console.error('Setup error:', error);
+      toast.error(error.message || 'Failed to setup Hyperliquid account');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [address, checkSetupStatus]);
+
+  const loadBalance = useCallback(async () => {
+    if (!address) return;
+
+    setIsLoading(true);
+    try {
+      // Same logic as checkSetupStatus to determine active address
+      let targetAddress: string = address;
+      let state = await getUserState(address);
+      let orders = await getOpenOrders(address);
+
+      // const agentAddress = getAgentAddress(address);
+      // if (agentAddress) {
+      //   console.log(
+      //     'DEBUG: Found Agent Address in loadBalance, executing switch:',
+      //     agentAddress
+      //   );
+      //   const agentState = await getUserState(agentAddress);
+      //   const agentOrders = await getOpenOrders(agentAddress);
+
+      //   targetAddress = agentAddress as string;
+      //   state = agentState;
+      //   orders = agentOrders;
+      // }
+
+      setActiveAddress(targetAddress);
+
+      console.log(
+        'DEBUG: Final User State to be set:',
+        JSON.stringify(state, null, 2)
+      );
+
+      if (state) {
+        // Ensure assetPositions exists
+        if (!state.assetPositions) {
+          console.warn(
+            'WARNING: assetPositions missing in state, defaulting to []'
+          );
+          state.assetPositions = [];
+        }
+        setUserState(state);
+      }
+      if (orders) {
+        setOpenOrders(orders);
+      }
+    } catch (error) {
+      console.error('Error loading balance:', error);
+      toast.error('Failed to load balance');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [address]);
+
+  const executeCopyTrade = useCallback(
+    async (tile: CopyTile) => {
+      // Check for Imported Account logic again to ensure valid signer
+      const { getImportedAccount } = await import('../lib/hyperliquid/keystore');
+      const importedAccount = getImportedAccount();
+
+      let client;
+      if (importedAccount && importedAccount.accountAddress === address) {
+        const { privateKeyToAccount } = await import('viem/accounts');
+        const account = privateKeyToAccount(importedAccount.privateKey as `0x${string}`);
+        client = createWalletClient({
+          account,
+          chain: arbitrum,
+          transport: custom(provider as any),
+        });
+      } else {
+        client = createWalletClient({
+          account: address as `0x${string}`,
+          chain: arbitrum,
+          transport: custom(provider as any),
+        });
+      }
+      const walletClient = client;
+      if (!walletClient || !address) {
+        toast.error('Please connect your wallet');
+        return;
+      }
+
+      if (setupStatus !== 'setup') {
+        toast.error('Please setup your Hyperliquid account first');
+        return;
+      }
+
+      // Validate the trade
+      const validation = validateCopyTrade(tile);
+      if (!validation.valid) {
+        toast.error(validation.error);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        // Look up asset ID by symbol
+        const assets = await getAllAssets();
+        const asset = assets.find((a) => a.symbol === tile.symbol);
+
+        if (!asset) {
+          toast.error(`Asset ${tile.symbol} not found`);
+          return;
+        }
+
+        const notional = 5; // $5
+        const leverage = 5; // 5x
+        const entryPrice = getEntryPrice(tile.entry);
+        const size = calculatePositionSize(notional, leverage, entryPrice);
+        const roundedSize = roundToSzDecimals(size, 3);
+
+        toast.info('Placing entry order...', { duration: 2000 });
+
+        // Place entry order with numeric asset ID
+        const entryAction = buildOrderAction({
+          coin: asset.id,
+          isBuy: tile.side === 'long',
+          sz: roundedSize,
+          limitPx: entryPrice,
+          orderType: { limit: { tif: 'Gtc' } },
+          reduceOnly: false,
+        });
+
+        const entryNonce = Date.now();
+        const entrySignature = await signUserAction(
+          walletClient,
+          entryAction,
+          entryNonce
+        );
+
+        const entryResult = await postExchange({
+          action: entryAction,
+          nonce: entryNonce,
+          signature: entrySignature,
+        });
+
+        console.log('Entry order result:', entryResult);
+
+        // Note: In production, you would also place SL and TP orders here
+        // This is a simplified version for the MVP
+
+        toast.success('Copy trade executed successfully!');
+        await loadBalance();
+      } catch (error: any) {
+        console.error('Trade execution error:', error);
+        toast.error(error.message || 'Failed to execute trade');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [address, setupStatus, loadBalance]
+  );
+
+  // Call checkSetupStatus on mount to initialize the address
+  useEffect(() => {
+    checkSetupStatus();
+
+    const handleImportChange = () => {
+      console.log('DEBUG: Imported account changed, refreshing setup status...');
+      checkSetupStatus();
+    };
+
+    window.addEventListener('imported-account-changed', handleImportChange);
+    return () => {
+      window.removeEventListener('imported-account-changed', handleImportChange);
+    };
+  }, [checkSetupStatus]);
+
+  return {
+    setupStatus,
+    userState,
+    openOrders,
+    isLoading,
+    checkSetupStatus,
+    setupHyperliquid,
+    loadBalance,
+    executeCopyTrade,
+    availableAssets,
+    activeAddress,
+    address,
+    walletClient,
+  };
+}
diff --git a/src/apps/perps/index.css b/src/apps/perps/index.css
new file mode 100644
index 00000000..617f93cf
--- /dev/null
+++ b/src/apps/perps/index.css
@@ -0,0 +1,119 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    --background: 240 10% 3.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 240 8% 8%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 240 8% 8%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 263 70% 50%;
+    --primary-foreground: 210 40% 98%;
+    --primary-glow: 263 70% 65%;
+
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+
+    --accent: 217 33% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217 33% 17%;
+    --input: 217 33% 17%;
+    --ring: 0 0% 100%;
+
+    --radius: 1rem;
+
+    --gradient-primary: linear-gradient(135deg,
+        hsl(263 70% 50%),
+        hsl(220 80% 55%));
+    --gradient-accent: linear-gradient(135deg,
+        hsl(263 70% 50%),
+        hsl(290 70% 50%));
+    --gradient-bg: linear-gradient(180deg, hsl(240 10% 3.9%), hsl(240 10% 6%));
+
+    --shadow-glow: 0 0 40px hsl(263 70% 50% / 0.3);
+    --shadow-card: 0 8px 32px hsl(240 10% 0% / 0.4);
+
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+@layer base {
+
+  /* Hide spin buttons for number inputs */
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield !important;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Desktop Zoom Factor */
+  @media (min-width: 1051px) {
+    html {
+      zoom: 1.1;
+    }
+  }
+
+  /* Remove blue/cyan highlight on touch/click and focus */
+  button,
+  a,
+  input,
+  select,
+  textarea,
+  div[role="button"],
+  [tabindex] {
+    -webkit-tap-highlight-color: transparent !important;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  /* Allow text selection in inputs */
+  input,
+  textarea {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    user-select: text;
+  }
+
+  /* Remove focus outline globally (components handle their own focus states) */
+  *:focus {
+    outline: none !important;
+  }
+
+  *:active {
+    -webkit-tap-highlight-color: transparent !important;
+  }
+}
\ No newline at end of file
diff --git a/src/apps/perps/index.tsx b/src/apps/perps/index.tsx
new file mode 100644
index 00000000..8e49b1ce
--- /dev/null
+++ b/src/apps/perps/index.tsx
@@ -0,0 +1,340 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { StatusBanner } from './components/StatusBanner';
+import { AgentControls } from './components/AgentControls';
+import { BalanceCard } from './components/BalanceCard';
+import { AssetSelector } from './components/AssetSelector';
+import { TradeForm } from './components/TradeForm';
+import { SparklineChart } from './components/SparklineChart';
+import { PositionsCard } from './components/PositionsCard';
+import { TradeHistoryCard } from './components/TradeHistoryCard';
+import { useHyperliquid } from './hooks/useHyperliquid';
+import { getAgentWallet, getImportedAccount } from './lib/hyperliquid/keystore';
+import { getUserState, getMetaAndAssetCtxs } from './lib/hyperliquid/client';
+import type {
+  AssetInfo,
+  UserState,
+  EnhancedAsset,
+  HyperliquidOrder,
+} from './lib/hyperliquid/types';
+import { toast } from 'sonner';
+
+import { Toaster } from './components/ui/sonner';
+
+import './styles/perps.css';
+
+const Index = () => {
+  // Get symbol from URL params (e.g., /perps/btc)
+  const { symbol: urlSymbol } = useParams<{ symbol?: string }>();
+
+  // ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURNS
+  const {
+    setupStatus,
+    userState,
+    isLoading,
+    checkSetupStatus,
+    setupHyperliquid,
+    loadBalance,
+    openOrders,
+    address,
+    walletClient,
+  } = useHyperliquid();
+
+  const [selectedAsset, setSelectedAsset] = useState<EnhancedAsset | null>({
+    id: 0,
+    symbol: 'BTC',
+    szDecimals: 5,
+    maxLeverage: 50,
+    price: 0,
+    volume: 0,
+    priceChange: 0,
+    priceChangePercent: 0,
+  });
+  const [agentAddress, setAgentAddress] = useState<string | null>(null);
+
+  const handleSetAgentAddress = (addr: string | null) => {
+    console.log('DEBUG: index.tsx setAgentAddress called with:', addr);
+    setAgentAddress(addr);
+  };
+  const [agentUserState, setAgentUserState] = useState<UserState | null>(null);
+  const [agentOpenOrders, setAgentOpenOrders] = useState<HyperliquidOrder[]>(
+    []
+  );
+  const [isLoadingAgent, setIsLoadingAgent] = useState(true);
+  // Centralized asset state
+  const [allAssets, setAllAssets] = useState<EnhancedAsset[]>([]);
+
+  // Load ALL assets on mount - Single Source of Truth
+  useEffect(() => {
+    const loadAssets = async () => {
+      try {
+        const data = await getMetaAndAssetCtxs();
+        if (
+          data &&
+          Array.isArray(data) &&
+          data[0]?.universe &&
+          Array.isArray(data[1])
+        ) {
+          const universe = data[0].universe;
+          const assetCtxs = data[1];
+
+          const enhancedAssets: EnhancedAsset[] = universe.map(
+            (asset: any, index: number) => {
+              const ctx = assetCtxs[index] || {};
+              const markPx = parseFloat(ctx.markPx || '0');
+              const prevDayPx = parseFloat(ctx.prevDayPx || '0');
+
+              return {
+                id: index,
+                symbol: asset.name,
+                szDecimals: asset.szDecimals || 3,
+                maxLeverage: asset.maxLeverage || 50,
+                price: markPx,
+                volume: parseFloat(ctx.dayNtlVlm || '0'),
+                priceChange: prevDayPx > 0 ? markPx - prevDayPx : 0,
+                priceChangePercent:
+                  prevDayPx > 0 ? ((markPx - prevDayPx) / prevDayPx) * 100 : 0,
+              };
+            }
+          );
+
+          setAllAssets(enhancedAssets);
+
+          // Auto-select asset from URL if provided
+          if (urlSymbol && enhancedAssets.length > 0) {
+            const normalizedUrlSymbol = urlSymbol.toUpperCase();
+            const urlAsset = enhancedAssets.find(
+              (a) => a.symbol === normalizedUrlSymbol
+            );
+            if (urlAsset) {
+              setSelectedAsset(urlAsset);
+              console.log(`[URL] Auto-selected ${urlAsset.symbol} from URL`);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load assets:', error);
+      }
+    };
+
+    loadAssets();
+  }, [urlSymbol]); // Only depend on urlSymbol to avoid render loop
+
+  // Separate effect to update selected asset price when assets refresh
+  useEffect(() => {
+    if (selectedAsset && allAssets.length > 0) {
+      const updated = allAssets.find((a) => a.symbol === selectedAsset.symbol);
+      if (updated) {
+        setSelectedAsset(updated);
+      }
+    }
+  }, [allAssets]); // Only watch allAssets, not selectedAsset
+
+  // Load imported account from global storage
+  const fetchImportedAccount = async () => {
+    try {
+      const { getImportedAccount } = await import('./lib/hyperliquid/keystore');
+      const { getFrontendOpenOrders } = await import(
+        './lib/hyperliquid/client'
+      );
+      const imported = getImportedAccount();
+
+      if (imported) {
+        setAgentAddress(imported.accountAddress);
+        const [state, orders] = await Promise.all([
+          getUserState(imported.accountAddress),
+          getFrontendOpenOrders(imported.accountAddress),
+        ]);
+        setAgentUserState(state);
+        setAgentOpenOrders(orders || []);
+      } else {
+        setAgentAddress(null);
+        setAgentUserState(null);
+        setAgentOpenOrders([]);
+      }
+    } catch (error) {
+      console.error('[Index] Error loading imported account:', error);
+    } finally {
+      setIsLoadingAgent(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchImportedAccount();
+  }, []);
+
+  const handleRefresh = async () => {
+    await Promise.all([loadBalance(), fetchImportedAccount()]);
+  };
+
+  useEffect(() => {
+    if (address) {
+      checkSetupStatus();
+    }
+  }, [address, checkSetupStatus]);
+
+  useEffect(() => {
+    if (setupStatus === 'setup') {
+      loadBalance();
+    }
+  }, [setupStatus, loadBalance]);
+
+  const handleAssetSelect = (
+    symbol: string,
+    asset: AssetInfo,
+    shouldScroll = false
+  ) => {
+    // Look up full asset info including price
+    const fullAsset = allAssets.find((a) => a.symbol === asset.symbol);
+    if (fullAsset) {
+      setSelectedAsset(fullAsset);
+    } else {
+      // Fallback if not found (shouldn't happen)
+      setSelectedAsset(asset as EnhancedAsset);
+    }
+
+    if (shouldScroll) {
+      const element = document.getElementById('chart-trade-section');
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      } else {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
+    }
+  };
+
+  const handleTickerChange = (ticker: string) => {
+    const normalizeTicker = ticker.toUpperCase().trim();
+
+    // Instant lookup from cached assets - no API call needed!
+    const asset = allAssets.find((a) => a.symbol === normalizeTicker);
+
+    if (asset) {
+      setSelectedAsset(asset);
+      toast.success(`Switched to ${asset.symbol}`);
+    } else {
+      console.warn(`Asset ${normalizeTicker} not found in cached assets`);
+      toast.error(`Asset ${normalizeTicker} not found. Please try refreshing.`);
+    }
+  };
+
+  const handlePositionClick = (symbol: string) => {
+    // 1. Find asset in our centralized allAssets list
+    const asset = allAssets.find(
+      (a) => a.symbol === symbol || a.symbol === symbol.toUpperCase()
+    );
+
+    if (asset) {
+      // 2. Update selected asset (do not scroll)
+      handleAssetSelect(asset.symbol, asset, false);
+    } else {
+      console.warn(`[Index] Asset ${symbol} not found in allAssets`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-bg">
+      <Toaster />
+      <div className="container mx-auto px-4 py-8 pb-24 md:pb-8 max-w-7xl">
+        {/* Header */}
+
+        {/* Agent Controls + Balance - Side by Side */}
+        {address && setupStatus === 'setup' && userState && (
+          <div className="grid grid-cols-2 md:grid-cols-1 gap-6 mb-6">
+            {/* Left: Agent Controls */}
+            <div>
+              <AgentControls
+                onStatusChange={handleRefresh}
+                onAgentAddressChange={setAgentAddress}
+                userState={userState}
+              />
+            </div>
+
+            {/* Right: Balance */}
+            <div>
+              {userState && (
+                <BalanceCard
+                  userState={userState}
+                  isLoading={isLoading}
+                  masterAddress={address || ''}
+                  walletClient={walletClient}
+                  onRefresh={handleRefresh}
+                  isImported={!!agentAddress}
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Chart + Trade Form - Side by Side on Desktop */}
+        {(agentAddress || (address && setupStatus === 'setup')) && (
+          <div
+            id="chart-trade-section"
+            className="grid grid-cols-3 md:grid-cols-1 gap-6 mb-6"
+          >
+            {/* Left: Sparkline Chart (2/3 width on desktop) */}
+            <div className="col-span-2 md:col-span-1">
+              <SparklineChart
+                selectedAsset={selectedAsset}
+                userState={agentUserState || userState}
+                openOrders={
+                  agentOpenOrders.length > 0 ? agentOpenOrders : openOrders
+                }
+                accountAddress={agentAddress || address}
+              />
+            </div>
+
+            {/* Right: Trade Form (1/3 width on desktop) */}
+            <div className="col-span-1">
+              <TradeForm
+                selectedAsset={selectedAsset}
+                onTradeComplete={handleRefresh}
+                onTickerChange={handleTickerChange}
+                userState={agentUserState || userState}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Open Positions - Full Width */}
+        {(agentAddress || (address && setupStatus === 'setup')) && (
+          <div className="mb-6">
+            <PositionsCard
+              masterAddress={agentAddress || address}
+              onPositionClick={handlePositionClick}
+              onRefresh={handleRefresh}
+              userState={agentUserState || userState}
+              openOrders={
+                agentOpenOrders.length > 0 ? agentOpenOrders : openOrders
+              }
+            />
+          </div>
+        )}
+
+        {/* Trade History - Full Width */}
+        {(agentAddress || (address && setupStatus === 'setup')) && (
+          <div className="mb-6">
+            <TradeHistoryCard masterAddress={agentAddress || address} />
+          </div>
+        )}
+
+        {/* Asset Selector */}
+        {(agentAddress || (address && setupStatus === 'setup')) && (
+          <div className="mb-6">
+            <AssetSelector
+              selectedSymbol={selectedAsset?.symbol || null}
+              onSelect={(symbol, asset) =>
+                handleAssetSelect(symbol, asset, true)
+              }
+              assets={allAssets}
+            />
+          </div>
+        )}
+
+        {!address && !agentAddress && !isLoadingAgent && null}
+      </div>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/src/apps/perps/lib/encryption.ts b/src/apps/perps/lib/encryption.ts
new file mode 100644
index 00000000..c87ee820
--- /dev/null
+++ b/src/apps/perps/lib/encryption.ts
@@ -0,0 +1,97 @@
+
+// Helper: Convert ArrayBuffer to Base64
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+    const binary = String.fromCharCode(...new Uint8Array(buffer));
+    return btoa(binary);
+}
+
+// Helper: Convert Base64 to ArrayBuffer
+function base64ToArrayBuffer(base64: string): ArrayBuffer {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+
+// Derive a key from a PIN using PBKDF2
+async function deriveKey(pin: string, salt: Uint8Array): Promise<CryptoKey> {
+    const enc = new TextEncoder();
+    const keyMaterial = await window.crypto.subtle.importKey(
+        "raw",
+        enc.encode(pin),
+        "PBKDF2",
+        false,
+        ["deriveKey"]
+    );
+
+    return window.crypto.subtle.deriveKey(
+        {
+            name: "PBKDF2",
+            salt: salt,
+            iterations: 100000, // Standard high iteration count
+            hash: "SHA-256",
+        },
+        keyMaterial,
+        { name: "AES-GCM", length: 256 },
+        false, // Non-extractable: prevents key extraction via memory dumps
+        ["encrypt", "decrypt"]
+    );
+}
+
+export interface EncryptedData {
+    cipherText: string;
+    iv: string;
+    salt: string;
+}
+
+// Encrypt data with a PIN
+export async function encryptWithPin(data: string, pin: string): Promise<EncryptedData> {
+    const enc = new TextEncoder();
+    const salt = window.crypto.getRandomValues(new Uint8Array(16));
+    const iv = window.crypto.getRandomValues(new Uint8Array(12));
+
+    const key = await deriveKey(pin, salt);
+
+    const encodedData = enc.encode(data);
+    const cipherBuffer = await window.crypto.subtle.encrypt(
+        {
+            name: "AES-GCM",
+            iv: iv,
+        },
+        key,
+        encodedData
+    );
+
+    return {
+        cipherText: arrayBufferToBase64(cipherBuffer),
+        iv: arrayBufferToBase64(iv),
+        salt: arrayBufferToBase64(salt),
+    };
+}
+
+// Decrypt data with a PIN
+export async function decryptWithPin(data: EncryptedData, pin: string): Promise<string> {
+    const salt = new Uint8Array(base64ToArrayBuffer(data.salt));
+    const iv = new Uint8Array(base64ToArrayBuffer(data.iv));
+    const cipherBuffer = base64ToArrayBuffer(data.cipherText);
+
+    const key = await deriveKey(pin, salt);
+
+    try {
+        const decryptedBuffer = await window.crypto.subtle.decrypt(
+            {
+                name: "AES-GCM",
+                iv: iv,
+            },
+            key,
+            cipherBuffer
+        );
+
+        const dec = new TextDecoder();
+        return dec.decode(decryptedBuffer);
+    } catch (error) {
+        throw new Error('Incorrect PIN or corrupted data');
+    }
+}
diff --git a/src/apps/perps/lib/hyperliquid/bridge.ts b/src/apps/perps/lib/hyperliquid/bridge.ts
new file mode 100644
index 00000000..e6234851
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/bridge.ts
@@ -0,0 +1,145 @@
+import { ethers } from 'ethers';
+
+// Hyperliquid bridge contract on Arbitrum One
+export const BRIDGE_CONTRACT_ADDRESS =
+  '0x2Df1c51E09aECF9cacB7bc98cB1742757f163dF7';
+
+// USDC contract on Arbitrum One
+export const USDC_CONTRACT_ADDRESS =
+  '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
+
+// Minimal ABI for USDC approve
+const USDC_ABI = [
+  'function approve(address spender, uint256 amount) public returns (bool)',
+  'function allowance(address owner, address spender) public view returns (uint256)',
+  'function balanceOf(address account) public view returns (uint256)',
+  'function nonces(address owner) public view returns (uint256)',
+  'function name() public view returns (string)',
+  'function permit(address owner, address spender, uint256 value, uint256 deadline, uint8 v, bytes32 r, bytes32 s) public',
+];
+
+// Minimal ABI for bridge deposit
+const BRIDGE_ABI = [
+  'function batchedDepositWithPermit((address user,uint64 usd,uint64 deadline,(uint8 v,bytes32 r,bytes32 s) signature)[] deposits) external',
+  'function deposit(uint64 usd) external',
+];
+
+export async function checkUSDCBalance(
+  walletAddress: string,
+  provider: ethers.providers.Provider
+): Promise<string> {
+  const usdcContract = new ethers.Contract(
+    USDC_CONTRACT_ADDRESS,
+    USDC_ABI,
+    provider
+  );
+  const balance = await usdcContract.balanceOf(walletAddress);
+  return ethers.utils.formatUnits(balance, 6); // USDC has 6 decimals
+}
+
+export async function checkUSDCAllowance(
+  walletAddress: string,
+  provider: ethers.providers.Provider
+): Promise<string> {
+  const usdcContract = new ethers.Contract(
+    USDC_CONTRACT_ADDRESS,
+    USDC_ABI,
+    provider
+  );
+  const allowance = await usdcContract.allowance(
+    walletAddress,
+    BRIDGE_CONTRACT_ADDRESS
+  );
+  return ethers.utils.formatUnits(allowance, 6);
+}
+
+export async function approveUSDC(
+  amount: string,
+  signer: ethers.Signer
+): Promise<ethers.ContractTransaction> {
+  const usdcContract = new ethers.Contract(
+    USDC_CONTRACT_ADDRESS,
+    USDC_ABI,
+    signer
+  );
+  const amountInWei = ethers.utils.parseUnits(amount, 6);
+  return await usdcContract.approve(BRIDGE_CONTRACT_ADDRESS, amountInWei);
+}
+
+export async function bridgeUSDC(
+  recipient: string,
+  amount: string,
+  signer: ethers.Signer
+): Promise<ethers.ContractTransaction> {
+  const bridgeContract = new ethers.Contract(
+    BRIDGE_CONTRACT_ADDRESS,
+    BRIDGE_ABI,
+    signer
+  );
+  const amountInWei = ethers.utils.parseUnits(amount, 6);
+  // Bridge2 deposits always credit msg.sender; recipient is ignored for compatibility
+  return await bridgeContract.deposit(amountInWei);
+}
+
+export async function depositUSDC(
+  amount: string,
+  signer: ethers.Signer
+): Promise<ethers.ContractTransaction> {
+  const provider = signer.provider;
+  if (!provider) throw new Error('Signer has no provider');
+  const owner = await signer.getAddress();
+  const usdcContract = new ethers.Contract(
+    USDC_CONTRACT_ADDRESS,
+    USDC_ABI,
+    provider
+  );
+
+  const value = ethers.utils.parseUnits(amount, 6);
+  const nonce = await usdcContract.nonces(owner);
+  const deadline = Math.floor(Date.now() / 1000) + 3600; // +1 hour
+
+  const domain = {
+    name: 'USDC',
+    version: '2',
+    chainId: 42161,
+    verifyingContract: USDC_CONTRACT_ADDRESS,
+  };
+
+  const types = {
+    Permit: [
+      { name: 'owner', type: 'address' },
+      { name: 'spender', type: 'address' },
+      { name: 'value', type: 'uint256' },
+      { name: 'nonce', type: 'uint256' },
+      { name: 'deadline', type: 'uint256' },
+    ],
+  };
+
+  const message = {
+    owner,
+    spender: BRIDGE_CONTRACT_ADDRESS,
+    value,
+    nonce,
+    deadline,
+  };
+
+  // Sign EIP-2612 Permit
+  const sigHex = await (signer as any)._signTypedData(domain, types, message);
+  const sig = ethers.utils.splitSignature(sigHex);
+
+  const bridgeContract = new ethers.Contract(
+    BRIDGE_CONTRACT_ADDRESS,
+    BRIDGE_ABI,
+    signer
+  );
+  const deposits = [
+    {
+      user: owner,
+      usd: value,
+      deadline,
+      signature: { v: sig.v, r: sig.r, s: sig.s },
+    },
+  ];
+
+  return await bridgeContract.batchedDepositWithPermit(deposits);
+}
diff --git a/src/apps/perps/lib/hyperliquid/builder.ts b/src/apps/perps/lib/hyperliquid/builder.ts
new file mode 100644
index 00000000..060072d0
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/builder.ts
@@ -0,0 +1,3 @@
+export const BUILDER_ADDRESS = '0x5e1D081488a5e746c1a13Bf92103C1B9eE5962A2';
+export const BUILDER_FEE_ORDER = 100; // 0.1% = 10 bps = 100 units (max allowed per order)
+export const BUILDER_FEE_APPROVAL = '0.1%'; // Max fee rate for approval text
diff --git a/src/apps/perps/lib/hyperliquid/client.ts b/src/apps/perps/lib/hyperliquid/client.ts
new file mode 100644
index 00000000..4d285d40
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/client.ts
@@ -0,0 +1,259 @@
+import axios from 'axios';
+import { isTestnet } from '../../../../utils/blockchain';
+import type { SignedAction, UserState, AssetInfo, HyperliquidOrder, UniverseAsset, AssetContext } from './types';
+
+const BASE_URL = isTestnet
+  ? 'https://api.hyperliquid-testnet.xyz'
+  : 'https://api.hyperliquid.xyz';
+
+const EXCHANGE_URL = `${BASE_URL}/exchange`;
+const INFO_URL = `${BASE_URL}/info`;
+
+export async function postExchange(signedAction: SignedAction): Promise<any> {
+  try {
+    // Explicitly set vaultAddress to undefined if null/empty to exclude from JSON
+    const payload = {
+      ...signedAction,
+      vaultAddress: signedAction.vaultAddress || undefined,
+    };
+
+    const response = await axios.post(EXCHANGE_URL, payload, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const data = response.data;
+
+    // Check if the exchange rejected the action
+    if (data?.status && data.status !== 'ok') {
+      const errorMsg =
+        data.response?.error || data.response || 'Exchange rejected action';
+      throw new Error(errorMsg);
+    }
+
+    return data;
+  } catch (error: any) {
+    console.error('Exchange API error:', error.response?.data || error.message);
+
+    // Enhanced error message for signature mismatches
+    const errorMessage =
+      error.response?.data?.error ||
+      error.message ||
+      'Failed to execute action';
+    if (errorMessage.includes('does not exist')) {
+      console.error(
+        '⚠️ Likely EIP-712 typed data mismatch. Verify domain, types, primaryType, and chainId.'
+      );
+    }
+
+    throw new Error(errorMessage);
+  }
+}
+
+export async function getUserState(address: string): Promise<UserState | null> {
+  try {
+    console.log('[getUserState] Fetching state for address:', address);
+    console.log('[getUserState] Using API URL:', INFO_URL);
+
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'clearinghouseState',
+        user: address,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    console.log('[getUserState] Response received:', {
+      hasData: !!response.data,
+      hasMarginSummary: !!response.data?.marginSummary,
+      accountValue: response.data?.marginSummary?.accountValue
+    });
+
+    return response.data;
+  } catch (error: any) {
+    console.error('[getUserState] API error:', error.response?.data || error.message);
+    return null;
+  }
+}
+
+export async function getMetaInfo(): Promise<any> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'meta',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error('Meta info error:', error.response?.data || error.message);
+    return null;
+  }
+}
+
+export async function getOpenOrders(
+  address: string,
+  symbol?: string
+): Promise<HyperliquidOrder[]> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'openOrders',
+        user: address,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    const orders = response.data || [];
+
+    // Filter by symbol if provided
+    if (symbol) {
+      return orders.filter((order: any) => order.coin === symbol);
+    }
+
+    return orders;
+  } catch (error: any) {
+    console.error('Open orders error:', error.response?.data || error.message);
+    return [];
+  }
+}
+
+export async function getFrontendOpenOrders(
+  address: string
+): Promise<HyperliquidOrder[]> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'frontendOpenOrders',
+        user: address,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+    return response.data || [];
+  } catch (error: any) {
+    console.error('Frontend open orders error:', error.response?.data || error.message);
+    return [];
+  }
+}
+
+export async function getUserFills(address: string): Promise<any[]> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'userFills',
+        user: address,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+    return response.data || [];
+  } catch (error: any) {
+    console.error('User fills error:', error.response?.data || error.message);
+    return [];
+  }
+}
+
+
+
+export async function getMarkPrice(symbol: string): Promise<number | null> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'allMids',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (response.data && typeof response.data === 'object') {
+      const markPrice = response.data[symbol];
+      return markPrice ? parseFloat(markPrice) : null;
+    }
+
+    return null;
+  } catch (error: any) {
+    console.error('Mark price error:', error.response?.data || error.message);
+    return null;
+  }
+}
+
+export async function getAllAssets(): Promise<AssetInfo[]> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'meta',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (response.data && response.data.universe) {
+      return response.data.universe.map((asset: any, index: number) => ({
+        id: index,
+        symbol: asset.name,
+        szDecimals: asset.szDecimals || 3,
+        maxLeverage: asset.maxLeverage || 50,
+      }));
+    }
+
+    return [];
+  } catch (error: any) {
+    console.error('Assets error:', error.response?.data || error.message);
+    return [];
+  }
+}
+
+export async function getMetaAndAssetCtxs(): Promise<any> {
+  try {
+    const response = await axios.post(
+      INFO_URL,
+      {
+        type: 'metaAndAssetCtxs',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error(
+      'MetaAndAssetCtxs error:',
+      error.response?.data || error.message
+    );
+    return null;
+  }
+}
diff --git a/src/apps/perps/lib/hyperliquid/keystore.ts b/src/apps/perps/lib/hyperliquid/keystore.ts
new file mode 100644
index 00000000..558bcdb7
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/keystore.ts
@@ -0,0 +1,447 @@
+import type { Hex } from 'viem';
+import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts';
+import { encryptWithPin, decryptWithPin, type EncryptedData } from '../encryption';
+import { initializeSessionManager, resetInactivityTimer, clearSession } from './session-manager';
+
+// Module-level cache for unlocked private key (cleared on page refresh or session timeout)
+let cachedPrivateKey: Hex | null = null;
+
+// Initialize session manager to auto-clear cache after inactivity
+initializeSessionManager(() => {
+  console.log('[Keystore] Clearing cached private keys due to session timeout');
+  cachedPrivateKey = null;
+  cachedImportedKey = null; // Also clear imported account cache
+});
+
+export function generateAgentWallet(): { address: string; privateKey: Hex } {
+  const privateKey = generatePrivateKey();
+  const account = privateKeyToAccount(privateKey);
+  return {
+    address: account.address,
+    privateKey: privateKey,
+  };
+}
+
+// Storage Keys Helper
+function getStorageKey(masterAddress: string, suffix: string): string {
+  return `hl_agent_${masterAddress.toLowerCase()}_${suffix}`;
+}
+
+// ----- ENCRYPTED STORAGE (Preferred) -----
+
+export async function storeAgentWalletEncrypted(
+  masterAddress: string,
+  address: string,
+  privateKey: Hex,
+  pin: string,
+  approved: boolean = false,
+  builderApproved: boolean = false
+): Promise<void> {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const encrypted = await encryptWithPin(privateKey, pin);
+    const storageData = JSON.stringify(encrypted);
+
+    localStorage.setItem(getStorageKey(masterAddress, 'address'), address);
+    localStorage.setItem(getStorageKey(masterAddress, 'encrypted_key'), storageData);
+
+    // Clear legacy plaintext key if it exists to upgrade security
+    localStorage.removeItem(getStorageKey(masterAddress, 'key'));
+
+    localStorage.setItem(getStorageKey(masterAddress, 'approved'), String(approved));
+    localStorage.setItem(getStorageKey(masterAddress, 'builder_approved'), String(builderApproved));
+
+    // Hot-load the cache so it's immediately available without unlocking again
+    cachedPrivateKey = privateKey;
+    resetInactivityTimer(); // Reset session timeout on wallet storage
+  } catch (error) {
+    console.error('Failed to encrypt wallet:', error);
+    throw new Error('Encryption failed');
+  }
+}
+
+export async function unlockAgentWallet(
+  masterAddress: string,
+  pin: string
+): Promise<{ address: string; privateKey: Hex; approved: boolean; builderApproved: boolean } | null> {
+  if (typeof window === 'undefined') return null;
+
+  const address = localStorage.getItem(getStorageKey(masterAddress, 'address'));
+  const encryptedkeyData = localStorage.getItem(getStorageKey(masterAddress, 'encrypted_key'));
+  const approvedItem = localStorage.getItem(getStorageKey(masterAddress, 'approved'));
+  const approved = approvedItem === 'true';
+  if (approvedItem !== null && approvedItem !== 'true' && approvedItem !== 'false') {
+    console.warn(`[Keystore] Invalid key 'approved' value: ${approvedItem}`);
+    localStorage.removeItem(getStorageKey(masterAddress, 'approved'));
+  }
+
+  const builderApprovedItem = localStorage.getItem(getStorageKey(masterAddress, 'builder_approved'));
+  const builderApproved = builderApprovedItem === 'true';
+  if (builderApprovedItem !== null && builderApprovedItem !== 'true' && builderApprovedItem !== 'false') {
+    console.warn(`[Keystore] Invalid key 'builder_approved' value: ${builderApprovedItem}`);
+    localStorage.removeItem(getStorageKey(masterAddress, 'builder_approved'));
+  }
+
+  if (!address || !encryptedkeyData) {
+    // Fallback using deprecated plaintext for migration/legacy support
+    return getAgentWalletLocal(masterAddress);
+  }
+
+  try {
+    const encryptedData: EncryptedData = JSON.parse(encryptedkeyData);
+    const privateKey = await decryptWithPin(encryptedData, pin);
+
+    cachedPrivateKey = privateKey as Hex;
+    resetInactivityTimer(); // Reset session timeout on wallet unlock
+
+    return {
+      address,
+      privateKey: privateKey as Hex,
+      approved,
+      builderApproved
+    };
+  } catch (error) {
+    console.error('Failed to unlock wallet:', error);
+    throw error; // Let UI handle "Incorrect PIN"
+  }
+}
+
+export function isAgentWalletEncrypted(masterAddress: string): boolean {
+  if (typeof window === 'undefined') return false;
+  return !!localStorage.getItem(getStorageKey(masterAddress, 'encrypted_key'));
+}
+
+export function hasAgentWallet(masterAddress: string): boolean {
+  if (typeof window === 'undefined') return false;
+  return !!localStorage.getItem(getStorageKey(masterAddress, 'address'));
+}
+
+
+// ----- LEGACY PLAINTEXT STORAGE (Deprecated) -----
+// WARNING: These functions store private keys in plaintext localStorage
+// Only use in development. Production usage is blocked by environment check.
+
+function checkInsecureStorageAllowed(): void {
+  const isAllowed = import.meta.env.VITE_ALLOW_INSECURE_STORAGE === 'true' ||
+    import.meta.env.DEV === true;
+
+  if (!isAllowed) {
+    console.error('[Keystore] CRITICAL: Attempted to use insecure localStorage for private keys in production!');
+    throw new Error('Insecure storage not allowed in production. Use encrypted storage instead.');
+  }
+
+  console.warn('[Keystore] WARNING: Using insecure localStorage for private keys. This should only be used in development.');
+}
+
+export function storeAgentWalletLocal(
+  masterAddress: string,
+  address: string,
+  privateKey: Hex,
+  approved?: boolean
+): void {
+  if (typeof window === 'undefined') return;
+  checkInsecureStorageAllowed();
+
+  localStorage.setItem(getStorageKey(masterAddress, 'address'), address);
+  localStorage.setItem(getStorageKey(masterAddress, 'key'), privateKey);
+  if (approved !== undefined) {
+    localStorage.setItem(
+      getStorageKey(masterAddress, 'approved'),
+      String(approved)
+    );
+  }
+  // Clear cache and session on new plaintext storage
+  clearSession();
+}
+
+export function getAgentWalletLocal(
+  masterAddress: string
+): { address: string; privateKey: Hex; approved: boolean; builderApproved: boolean } | null {
+  if (typeof window === 'undefined') return null;
+  checkInsecureStorageAllowed();
+
+  const address = localStorage.getItem(getStorageKey(masterAddress, 'address'));
+  const privateKey = localStorage.getItem(
+    getStorageKey(masterAddress, 'key')
+  ) as Hex;
+  // Defensive check for boolean values to prevent type errors
+  const approvedItem = localStorage.getItem(getStorageKey(masterAddress, 'approved'));
+  const approved = approvedItem === 'true';
+  if (approvedItem !== null && approvedItem !== 'true' && approvedItem !== 'false') {
+    console.warn(`[Keystore] Invalid 'approved' value found: ${approvedItem}. Clearing.`);
+    localStorage.removeItem(getStorageKey(masterAddress, 'approved'));
+  }
+
+  const builderApprovedItem = localStorage.getItem(getStorageKey(masterAddress, 'builder_approved'));
+  const builderApproved = builderApprovedItem === 'true';
+  if (builderApprovedItem !== null && builderApprovedItem !== 'true' && builderApprovedItem !== 'false') {
+    console.warn(`[Keystore] Invalid 'builder_approved' value found: ${builderApprovedItem}. Clearing.`);
+    localStorage.removeItem(getStorageKey(masterAddress, 'builder_approved'));
+  }
+
+  if (!address || !privateKey) return null;
+
+  return { address, privateKey, approved, builderApproved };
+}
+
+export function clearAgentWalletLocal(masterAddress: string): void {
+  if (typeof window === 'undefined') return;
+  checkInsecureStorageAllowed();
+
+  localStorage.removeItem(getStorageKey(masterAddress, 'address'));
+  localStorage.removeItem(getStorageKey(masterAddress, 'key'));
+  localStorage.removeItem(getStorageKey(masterAddress, 'encrypted_key'));
+  localStorage.removeItem(getStorageKey(masterAddress, 'approved'));
+  localStorage.removeItem(getStorageKey(masterAddress, 'builder_approved'));
+  // Clear cache and session when wallet is cleared
+  clearSession();
+}
+
+// Global imported account storage (also plaintext by default in old code, ideally should encrypt too)
+// For now, leaving as is or upgrading if requested. User request focused on agent wallet.
+// Global Imported Account Storage
+const GLOBAL_IMPORTED_ADDRESS_KEY = 'hl_imported_address';
+const GLOBAL_IMPORTED_ENCRYPTED_KEY = 'hl_imported_encrypted_key';
+const GLOBAL_ACCOUNT_KEY = 'hl_imported_account'; // Legacy plaintext
+
+// Imported account cache (also cleared on session timeout)
+let cachedImportedKey: Hex | null = null;
+
+export async function storeImportedAccountEncrypted(
+  address: string,
+  privateKey: Hex,
+  pin: string
+): Promise<void> {
+  if (typeof window === 'undefined') return;
+
+  try {
+    const encrypted = await encryptWithPin(privateKey, pin);
+    const storageData = JSON.stringify(encrypted);
+
+    localStorage.setItem(GLOBAL_IMPORTED_ADDRESS_KEY, address);
+    localStorage.setItem(GLOBAL_IMPORTED_ENCRYPTED_KEY, storageData);
+
+    // Clear legacy plaintext
+    localStorage.removeItem(GLOBAL_ACCOUNT_KEY);
+
+    // Cache it
+    cachedImportedKey = privateKey;
+    resetInactivityTimer(); // Reset session timeout on imported account storage
+    window.dispatchEvent(new Event('imported-account-changed'));
+  } catch (error) {
+    console.error('Failed to encrypt imported account:', error);
+    throw new Error('Encryption failed');
+  }
+}
+
+export async function unlockImportedAccount(
+  pin: string
+): Promise<{ accountAddress: string; privateKey: Hex } | null> {
+  if (typeof window === 'undefined') return null;
+
+  const address = localStorage.getItem(GLOBAL_IMPORTED_ADDRESS_KEY);
+  const encryptedkeyData = localStorage.getItem(GLOBAL_IMPORTED_ENCRYPTED_KEY);
+
+  if (!address || !encryptedkeyData) return null;
+
+  try {
+    const encryptedData: EncryptedData = JSON.parse(encryptedkeyData);
+    const privateKey = await decryptWithPin(encryptedData, pin);
+
+    cachedImportedKey = privateKey as Hex;
+    resetInactivityTimer(); // Reset session timeout on imported account unlock
+    window.dispatchEvent(new Event('imported-account-changed'));
+
+    return {
+      accountAddress: address,
+      privateKey: privateKey as Hex,
+    };
+  } catch (error) {
+    console.error('Failed to unlock imported account:', error);
+    throw error;
+  }
+}
+
+export function isImportedAccountEncrypted(): boolean {
+  if (typeof window === 'undefined') return false;
+  return !!localStorage.getItem(GLOBAL_IMPORTED_ENCRYPTED_KEY);
+}
+
+export function getImportedAccountAddress(): string | null {
+  if (typeof window === 'undefined') return null;
+  // Check new key first, then legacy
+  const newAddress = localStorage.getItem(GLOBAL_IMPORTED_ADDRESS_KEY);
+  if (newAddress) return newAddress;
+
+  // Try legacy GLOBAL_ACCOUNT_KEY with safe JSON parsing
+  const legacyData = localStorage.getItem(GLOBAL_ACCOUNT_KEY);
+  if (legacyData) {
+    try {
+      const parsed = JSON.parse(legacyData);
+      return parsed.accountAddress || null;
+    } catch (error) {
+      console.warn('[Keystore] Failed to parse legacy GLOBAL_ACCOUNT_KEY, clearing corrupt data:', error);
+      localStorage.removeItem(GLOBAL_ACCOUNT_KEY);
+      return null;
+    }
+  }
+
+  return null;
+}
+
+export async function storeImportedAccount(
+  accountAddress: string,
+  privateKey: Hex,
+  pin: string
+): Promise<void> {
+  // Enforce encryption by delegating
+  await storeImportedAccountEncrypted(accountAddress, privateKey, pin);
+}
+
+export function getImportedAccount(): {
+  accountAddress: string;
+  privateKey: Hex;
+} | null {
+  if (typeof window === 'undefined') return null;
+
+  // 1. Check Cache
+  if (cachedImportedKey) {
+    const address = getImportedAccountAddress();
+    if (address) {
+      resetInactivityTimer(); // Reset session timeout on imported account access
+      return { accountAddress: address, privateKey: cachedImportedKey };
+    }
+  }
+
+  // 2. Check Legacy Plaintext
+  const data = localStorage.getItem(GLOBAL_ACCOUNT_KEY);
+  if (data) {
+    try {
+      const parsed = JSON.parse(data);
+      return {
+        accountAddress: parsed.accountAddress,
+        privateKey: parsed.privateKey as Hex,
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  // 3. If Encrypted and not cached force user to unlock (return null here)
+  if (isImportedAccountEncrypted()) {
+    return null;
+  }
+
+  return null;
+}
+
+export function clearImportedAccount(): void {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(GLOBAL_ACCOUNT_KEY);
+  localStorage.removeItem(GLOBAL_IMPORTED_ADDRESS_KEY);
+  localStorage.removeItem(GLOBAL_IMPORTED_ENCRYPTED_KEY);
+  // Note: clearSession() already clears cachedImportedKey, but we call it to also clear agent wallet cache
+  clearSession();
+  window.dispatchEvent(new Event('imported-account-changed'));
+}
+
+// Combined functions facade
+
+export function updateAgentApproval(
+  masterAddress: string,
+  approved: boolean
+): void {
+  if (typeof window === 'undefined') return;
+  localStorage.setItem(getStorageKey(masterAddress, 'approved'), String(approved));
+}
+
+export function updateBuilderApproval(
+  masterAddress: string,
+  builderApproved: unknown
+): void {
+  if (typeof window === 'undefined') return;
+  if (typeof builderApproved !== 'boolean') {
+    console.warn('[Keystore] updateBuilderApproval called with non-boolean:', builderApproved);
+  }
+  const approved = Boolean(builderApproved);
+  localStorage.setItem(getStorageKey(masterAddress, 'builder_approved'), String(approved));
+}
+
+/**
+ * @deprecated Use storeAgentWalletEncrypted instead. This function stores keys in plaintext.
+ */
+export async function storeAgentWallet(
+  masterAddress: string,
+  address: string,
+  privateKey: Hex,
+  pin: string,
+  approved: boolean = false,
+  builderApproved: boolean = false
+): Promise<void> {
+  // Enforce encryption
+  return storeAgentWalletEncrypted(masterAddress, address, privateKey, pin, approved, builderApproved);
+}
+
+export async function getAgentWallet(
+  masterAddress: string
+): Promise<{ address: string; privateKey: Hex; approved: boolean; builderApproved: boolean } | null> {
+  // Browser guard for SSR/test environments
+  if (typeof window === 'undefined' || !window.localStorage) return null;
+
+  // Check memory cache first
+  if (cachedPrivateKey) {
+    const address = localStorage.getItem(getStorageKey(masterAddress, 'address'));
+    if (address) {
+      const approvedItem = localStorage.getItem(getStorageKey(masterAddress, 'approved'));
+      const approved = approvedItem === 'true';
+      const builderApprovedItem = localStorage.getItem(getStorageKey(masterAddress, 'builder_approved'));
+      const builderApproved = builderApprovedItem === 'true';
+      resetInactivityTimer(); // Reset session timeout on wallet access
+      return { address, privateKey: cachedPrivateKey, approved, builderApproved };
+    }
+  }
+
+  if (isAgentWalletEncrypted(masterAddress)) {
+    // Locked and not in memory
+    // We cannot return the key. The caller must handle this.
+    // For backward compatibility, we return null so the app thinks "No active wallet" 
+    // (which implies one needs to be set up OR unlocked).
+    return null;
+  }
+
+  // Legacy plaintext
+  return getAgentWalletLocal(masterAddress);
+}
+
+export async function clearAgentWallet(masterAddress: string): Promise<void> {
+  clearAgentWalletLocal(masterAddress);
+}
+
+export function clearAllAgentWalletsLocal(): void {
+  // Browser guard for SSR safety
+  if (typeof window === 'undefined' || !window.localStorage) return;
+
+  const keysToRemove: string[] = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith('hl_agent_')) {
+      keysToRemove.push(key);
+    }
+  }
+  keysToRemove.forEach((key) => localStorage.removeItem(key));
+
+  // Clear in-memory cache
+  cachedPrivateKey = null;
+}
+
+export function getAgentAddress(masterAddress: string): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem(getStorageKey(masterAddress, 'address'));
+}
+
+export async function checkWalletMatch(importedAddress: string, masterAddress: string): Promise<boolean> {
+  // Normalize addresses for comparison
+  const normalize = (addr: string) => addr.toLowerCase();
+  return normalize(importedAddress) === normalize(getAgentAddress(masterAddress) || '');
+}
diff --git a/src/apps/perps/lib/hyperliquid/math.ts b/src/apps/perps/lib/hyperliquid/math.ts
new file mode 100644
index 00000000..fd16a7d8
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/math.ts
@@ -0,0 +1,79 @@
+export function calculatePositionSize(
+  notional: number,
+  leverage: number,
+  entryPrice: number
+): number {
+  const totalNotional = notional * leverage;
+  return totalNotional / entryPrice;
+}
+
+export function roundToSzDecimals(
+  size: number,
+  szDecimals: number = 3
+): number {
+  const multiplier = Math.pow(10, szDecimals);
+  return Math.round(size * multiplier) / multiplier;
+}
+
+export function getEntryPrice(entry: number | number[]): number {
+  if (Array.isArray(entry)) {
+    return (entry[0] + entry[1]) / 2;
+  }
+  return entry;
+}
+
+export function validateCopyTrade(params: {
+  symbol: string;
+  side: 'long' | 'short';
+  entry: number | number[];
+  stopLoss: number;
+  takeProfits: number | number[];
+}): { valid: boolean; error?: string } {
+  const entryPrice = getEntryPrice(params.entry);
+
+  if (params.side === 'long') {
+    // For long: SL < entry < TP
+    if (params.stopLoss >= entryPrice) {
+      return {
+        valid: false,
+        error: 'Stop loss must be below entry for long positions',
+      };
+    }
+
+    const tps = Array.isArray(params.takeProfits)
+      ? params.takeProfits
+      : [params.takeProfits];
+
+    const minTp = Math.min(...tps);
+
+    if (minTp <= entryPrice) {
+      return {
+        valid: false,
+        error: 'Take profits must be above entry for long positions',
+      };
+    }
+  } else {
+    // For short: TP < entry < SL
+    if (params.stopLoss <= entryPrice) {
+      return {
+        valid: false,
+        error: 'Stop loss must be above entry for short positions',
+      };
+    }
+
+    const tps = Array.isArray(params.takeProfits)
+      ? params.takeProfits
+      : [params.takeProfits];
+
+    const maxTp = Math.max(...tps);
+
+    if (maxTp >= entryPrice) {
+      return {
+        valid: false,
+        error: 'Take profits must be below entry for short positions',
+      };
+    }
+  }
+
+  return { valid: true };
+}
diff --git a/src/apps/perps/lib/hyperliquid/order.ts b/src/apps/perps/lib/hyperliquid/order.ts
new file mode 100644
index 00000000..05430e48
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/order.ts
@@ -0,0 +1,81 @@
+import { buildOrderAction } from './signing';
+export { roundToSzDecimals } from './math';
+
+export function computeSizeUSD(
+  notionalUSD: number,
+  leverage: number,
+  entryPx: number,
+  szDecimals: number
+): number {
+  const totalNotional = notionalUSD * leverage;
+  const rawSize = totalNotional / entryPx;
+
+  // Floor to the asset's minimum increment to avoid rounding up invalid sizes
+  const step = Math.pow(10, -szDecimals);
+  const size = Math.floor(rawSize / step) * step;
+
+  return roundToSzDecimals(size, szDecimals);
+}
+
+export function buildEntryOrder(
+  coinId: number,
+  side: 'long' | 'short',
+  size: number,
+  price: number | undefined
+) {
+  const isBuy = side === 'long';
+
+  if (price === undefined) {
+    // Market order - use a very high/low limit price
+    const marketPrice = isBuy ? 999999999 : 0.00000001;
+    return buildOrderAction({
+      coin: coinId,
+      isBuy,
+      sz: size,
+      limitPx: marketPrice,
+      orderType: { limit: { tif: 'Ioc' } },
+      reduceOnly: false,
+    });
+  }
+
+  return buildOrderAction({
+    coin: coinId,
+    isBuy,
+    sz: size,
+    limitPx: price,
+    orderType: { limit: { tif: 'Gtc' } },
+    reduceOnly: false,
+  });
+}
+
+export function buildReduceOnlyOrder(
+  coinId: number,
+  side: 'long' | 'short',
+  price: number,
+  size: number
+) {
+  // For reduce-only, we use opposite direction
+  const isBuy = side === 'short'; // Close long = sell, close short = buy
+
+  return buildOrderAction({
+    coin: coinId,
+    isBuy,
+    sz: size,
+    limitPx: price,
+    orderType: { limit: { tif: 'Gtc' } },
+    reduceOnly: true,
+  });
+}
+
+export function splitTPs(
+  totalSize: number,
+  tps: number[]
+): Array<{ price: number; size: number }> {
+  if (tps.length === 0) return [];
+
+  const sizePerTP = totalSize / tps.length;
+  return tps.map((price) => ({
+    price,
+    size: sizePerTP,
+  }));
+}
diff --git a/src/apps/perps/lib/hyperliquid/parsers.ts b/src/apps/perps/lib/hyperliquid/parsers.ts
new file mode 100644
index 00000000..4aa63fb1
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/parsers.ts
@@ -0,0 +1,93 @@
+export interface ParsedPosition {
+  side: 'long' | 'short';
+  size: number;
+  entryPx: number;
+}
+
+export interface ParsedOrders {
+  sl: number | undefined;
+  tps: number[];
+}
+
+export function parsePositionForSymbol(
+  userState: any,
+  symbol: string
+): ParsedPosition | null {
+  if (!userState || !userState.assetPositions) {
+    return null;
+  }
+
+  const position = userState.assetPositions.find(
+    (pos: any) => pos.position?.coin === symbol
+  );
+
+  if (!position || !position.position) {
+    return null;
+  }
+
+  const szi = parseFloat(position.position.szi);
+  if (szi === 0) {
+    return null;
+  }
+
+  return {
+    side: szi > 0 ? 'long' : 'short',
+    size: Math.abs(szi),
+    entryPx: parseFloat(position.position.entryPx),
+  };
+}
+
+export function parseReduceOnlyOrders(
+  orders: any[],
+  symbol: string,
+  side: 'long' | 'short',
+  entryPx: number
+): ParsedOrders {
+  if (!orders || !Array.isArray(orders)) {
+    return { sl: undefined, tps: [] };
+  }
+
+  const reduceOnlyOrders = orders.filter(
+    (order: any) => order.coin === symbol && order.reduceOnly === true
+  );
+
+  let sl: number | undefined = undefined;
+  const tps: number[] = [];
+
+  for (const order of reduceOnlyOrders) {
+    const limitPx = parseFloat(order.limitPx);
+
+    if (side === 'long') {
+      // For long: price < entry = SL, price > entry = TP
+      if (limitPx < entryPx) {
+        // Stop loss
+        if (!sl || limitPx > sl) {
+          sl = limitPx;
+        }
+      } else if (limitPx > entryPx) {
+        // Take profit
+        tps.push(limitPx);
+      }
+    } else {
+      // For short: price > entry = SL, price < entry = TP
+      if (limitPx > entryPx) {
+        // Stop loss
+        if (!sl || limitPx < sl) {
+          sl = limitPx;
+        }
+      } else if (limitPx < entryPx) {
+        // Take profit
+        tps.push(limitPx);
+      }
+    }
+  }
+
+  // Sort TPs: ascending for long, descending for short
+  if (side === 'long') {
+    tps.sort((a, b) => a - b);
+  } else {
+    tps.sort((a, b) => b - a);
+  }
+
+  return { sl, tps };
+}
diff --git a/src/apps/perps/lib/hyperliquid/pnl.ts b/src/apps/perps/lib/hyperliquid/pnl.ts
new file mode 100644
index 00000000..73cf5834
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/pnl.ts
@@ -0,0 +1,21 @@
+export function computePnl(
+  side: 'long' | 'short',
+  size: number,
+  entryPx: number,
+  markPx: number
+) {
+  const m = side === 'long' ? 1 : -1;
+  const pnlUsd = (markPx - entryPx) * size * m;
+  const pnlPct = ((markPx - entryPx) / entryPx) * 100 * m;
+  return { pnlUsd, pnlPct };
+}
+
+export function formatPrice(price: number, decimals: number = 2): string {
+  return price.toFixed(decimals);
+}
+
+export function formatPnl(pnl: number, isPercentage: boolean = false): string {
+  const formatted = isPercentage ? pnl.toFixed(2) : pnl.toFixed(2);
+  const sign = pnl > 0 ? '+' : '';
+  return isPercentage ? `${sign}${formatted}%` : `${sign}$${formatted}`;
+}
diff --git a/src/apps/perps/lib/hyperliquid/sdk.ts b/src/apps/perps/lib/hyperliquid/sdk.ts
new file mode 100644
index 00000000..27a755b3
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/sdk.ts
@@ -0,0 +1,236 @@
+import { ExchangeClient, HttpTransport } from '@nktkas/hyperliquid';
+import { privateKeyToAccount } from 'viem/accounts';
+import type { Hex } from 'viem';
+
+/**
+ * Creates an ExchangeClient configured with an agent's private key
+ */
+export function getExchangeClientForAgent(privateKey: Hex): ExchangeClient {
+  const account = privateKeyToAccount(privateKey);
+  const transport = new HttpTransport();
+  return new ExchangeClient({ wallet: account, transport });
+}
+
+/**
+ * Place a market order using the agent wallet
+ */
+export async function placeMarketOrderAgent(
+  privateKey: Hex,
+  params: {
+    coinId: number;
+    isBuy: boolean;
+    size: number;
+    currentPrice: number;
+    reduceOnly?: boolean;
+    builder?: { b: string; f: number };
+  }
+): Promise<any> {
+  const client = getExchangeClientForAgent(privateKey);
+
+  // Use 5% slippage to stay within Hyperliquid's 95% rule
+  // For closing positions (reduce-only), checking price might be less critical if we just want out,
+  // but we still need a limit price for the IOc order.
+  const marketPrice = params.isBuy
+    ? parseFloat((params.currentPrice * 1.05).toPrecision(5)).toString()
+    : parseFloat((params.currentPrice * 0.95).toPrecision(5)).toString();
+
+  const orderRequest = {
+    orders: [
+      {
+        a: params.coinId,
+        b: params.isBuy,
+        p: marketPrice,
+        s: params.size.toString(),
+        r: params.reduceOnly ?? false,
+        t: { limit: { tif: 'Ioc' as const } },
+      },
+    ],
+    grouping: 'na' as const,
+    builder: params.builder,
+  };
+
+  console.log('[SDK] Placing market order:', orderRequest);
+  const response = await client.order(orderRequest);
+  console.log('[SDK] Order response:', response);
+
+  return response;
+}
+
+/**
+ * Place a limit order (for SL/TP) using the agent wallet
+ */
+export async function placeLimitOrderAgent(
+  privateKey: Hex,
+  params: {
+    coinId: number;
+    isBuy: boolean;
+    size: number;
+    limitPrice: number;
+    reduceOnly?: boolean;
+    builder?: { b: string; f: number };
+  }
+): Promise<any> {
+  const client = getExchangeClientForAgent(privateKey);
+
+  const orderRequest = {
+    orders: [
+      {
+        a: params.coinId,
+        b: params.isBuy,
+        p: parseFloat(params.limitPrice.toPrecision(5)).toString(), // Enforce 5 significant figures
+        s: params.size.toString(),
+        r: params.reduceOnly ?? false,
+        t: { limit: { tif: 'Gtc' as const } },
+      },
+    ],
+    grouping: 'na' as const,
+    builder: params.builder,
+  };
+
+  console.log('[SDK] Placing limit order:', orderRequest);
+  const response = await client.order(orderRequest);
+  console.log('[SDK] Order response:', response);
+
+  return response;
+}
+
+/**
+ * Place a trigger order (for TP/SL) using the agent wallet
+ * Trigger orders activate when mark price reaches triggerPx
+ */
+export async function placeTriggerOrderAgent(
+  privateKey: Hex,
+  params: {
+    coinId: number;
+    isBuy: boolean;
+    size: number;
+    triggerPrice: number;
+    limitPrice: number;
+    tpsl: 'tp' | 'sl';
+    reduceOnly?: boolean;
+    builder?: { b: string; f: number };
+  }
+): Promise<any> {
+  const client = getExchangeClientForAgent(privateKey);
+
+  const orderRequest = {
+    orders: [
+      {
+        a: params.coinId,
+        b: params.isBuy,
+        p: parseFloat(params.limitPrice.toPrecision(5)).toString(),
+        s: params.size.toString(),
+        r: params.reduceOnly ?? true, // TP/SL should always be reduce-only
+        t: {
+          trigger: {
+            isMarket: false,
+            triggerPx: parseFloat(
+              params.triggerPrice.toPrecision(5)
+            ).toString(),
+            tpsl: params.tpsl,
+          },
+        },
+      },
+    ],
+    grouping: 'na' as const,
+    builder: params.builder,
+  };
+
+  console.log('[SDK] Placing trigger order:', orderRequest);
+  const response = await client.order(orderRequest);
+  console.log('[SDK] Trigger order response:', response);
+
+  return response;
+}
+
+/**
+ * Cancel an order using the agent wallet
+ */
+export async function cancelOrderAgent(
+  privateKey: Hex,
+  params: {
+    coinId: number;
+    oid: number;
+  }
+): Promise<any> {
+  const client = getExchangeClientForAgent(privateKey);
+
+  const cancelRequest = {
+    cancels: [
+      {
+        a: params.coinId,
+        o: params.oid,
+      },
+    ],
+  };
+
+  console.log('[SDK] Canceling order:', cancelRequest);
+  const response = await client.cancel(cancelRequest);
+  console.log('[SDK] Cancel response:', response);
+
+  return response;
+}
+
+/**
+ * Approve an agent using the SDK
+ */
+export async function approveAgentSDK(
+  masterPrivateKey: Hex,
+  agentAddress: string,
+  agentName?: string
+): Promise<any> {
+  const transport = new HttpTransport();
+  const client = new ExchangeClient({ wallet: masterPrivateKey, transport });
+
+  console.log('[SDK] Approving agent:', agentAddress);
+  const response = await client.approveAgent({ agentAddress, agentName });
+  console.log('[SDK] Approve response:', response);
+
+  return response;
+}
+
+/**
+ * Approve builder fee using the SDK
+ */
+export async function approveBuilderFeeSDK(
+  masterPrivateKey: Hex,
+  builderAddress: string,
+  maxFeeRate: string // e.g. "0.1%" or "30bps" as string
+): Promise<any> {
+  const account = privateKeyToAccount(masterPrivateKey);
+  const transport = new HttpTransport();
+  const client = new ExchangeClient({ wallet: account, transport });
+
+  console.log('[SDK] Approving builder fee:', { builderAddress, maxFeeRate });
+  const response = await client.approveBuilderFee({
+    builder: builderAddress,
+    maxFeeRate,
+  });
+  console.log('[SDK] Approve builder fee response:', response);
+
+  return response;
+}
+
+/**
+ * Update leverage and margin mode for an asset
+ */
+export async function updateLeverageAgent(
+  privateKey: Hex,
+  params: {
+    coinId: number;
+    leverage: number;
+    isCross: boolean; // true = Cross margin, false = Isolated margin
+  }
+): Promise<any> {
+  const client = getExchangeClientForAgent(privateKey);
+
+  console.log('[SDK] Updating leverage:', params);
+  const response = await client.updateLeverage({
+    asset: params.coinId,
+    isCross: params.isCross,
+    leverage: params.leverage,
+  });
+  console.log('[SDK] Update leverage response:', response);
+
+  return response;
+}
diff --git a/src/apps/perps/lib/hyperliquid/session-manager.ts b/src/apps/perps/lib/hyperliquid/session-manager.ts
new file mode 100644
index 00000000..6576ac30
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/session-manager.ts
@@ -0,0 +1,84 @@
+/**
+ * Session Manager for Keystore Security
+ * 
+ * Manages inactivity timeout for cached private keys to enhance security.
+ * Automatically clears sensitive data from memory after configured inactivity period.
+ */
+
+// Configuration
+const INACTIVITY_TIMEOUT_MS = 15 * 60 * 1000; // 15 minutes
+
+// State
+let lastActivityTimestamp: number = Date.now();
+let timeoutId: NodeJS.Timeout | null = null;
+let onSessionExpiredCallback: (() => void) | null = null;
+
+/**
+ * Initialize the session manager with a callback to execute when session expires
+ */
+export function initializeSessionManager(onSessionExpired: () => void): void {
+    onSessionExpiredCallback = onSessionExpired;
+    resetInactivityTimer();
+}
+
+/**
+ * Reset the inactivity timer
+ * Call this on any wallet operation to keep the session alive
+ */
+export function resetInactivityTimer(): void {
+    lastActivityTimestamp = Date.now();
+
+    // Clear existing timeout
+    if (timeoutId) {
+        clearTimeout(timeoutId);
+    }
+
+    // Set new timeout
+    timeoutId = setTimeout(() => {
+        console.log('[SessionManager] Session expired due to inactivity');
+        clearSession();
+    }, INACTIVITY_TIMEOUT_MS);
+}
+
+/**
+ * Manually clear the session
+ * Call this on logout or lock operations
+ */
+export function clearSession(): void {
+    if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+    }
+
+    if (onSessionExpiredCallback) {
+        onSessionExpiredCallback();
+    }
+
+    lastActivityTimestamp = 0;
+}
+
+/**
+ * Get time remaining until session expires (in milliseconds)
+ */
+export function getTimeUntilExpiry(): number {
+    if (!lastActivityTimestamp) return 0;
+
+    const elapsed = Date.now() - lastActivityTimestamp;
+    const remaining = INACTIVITY_TIMEOUT_MS - elapsed;
+
+    return Math.max(0, remaining);
+}
+
+/**
+ * Check if session is still active
+ */
+export function isSessionActive(): boolean {
+    return getTimeUntilExpiry() > 0;
+}
+
+/**
+ * Get the configured timeout duration (in milliseconds)
+ */
+export function getTimeoutDuration(): number {
+    return INACTIVITY_TIMEOUT_MS;
+}
diff --git a/src/apps/perps/lib/hyperliquid/signing.ts b/src/apps/perps/lib/hyperliquid/signing.ts
new file mode 100644
index 00000000..31cdefeb
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/signing.ts
@@ -0,0 +1,483 @@
+import {
+  type Hex,
+  hashTypedData,
+  type WalletClient,
+  keccak256,
+  toHex,
+  type PrivateKeyAccount,
+  recoverTypedDataAddress,
+} from 'viem';
+import { privateKeyToAccount } from 'viem/accounts';
+import type { HyperliquidAction } from './types';
+
+const SIGNATURE_CHAIN_ID = '0xa4b1'; // Arbitrum mainnet
+
+export const HL_DOMAIN = {
+  name: 'HyperliquidSignTransaction',
+  version: '1',
+  chainId: parseInt(SIGNATURE_CHAIN_ID, 16),
+  verifyingContract: '0x0000000000000000000000000000000000000000' as const,
+};
+
+export const HL_TYPES = {
+  HyperliquidTransaction: [
+    { name: 'source', type: 'string' },
+    { name: 'connectionId', type: 'bytes32' },
+  ],
+};
+
+export async function signUserAction(
+  walletClient: WalletClient,
+  action: HyperliquidAction,
+  nonce: number
+): Promise<{ r: string; s: string; v: number }> {
+  if (!walletClient.account) {
+    throw new Error('No account connected');
+  }
+
+  // Construct the action payload
+  const actionPayload = {
+    action,
+    nonce,
+    vaultAddress: null,
+  };
+
+  // Convert to phantom agent format for signing
+  const phantomAgent = {
+    source: 'a',
+    connectionId: hashTypedData({
+      domain: HL_DOMAIN,
+      types: {
+        Agent: [
+          { name: 'source', type: 'string' },
+          { name: 'connectionId', type: 'bytes32' },
+        ],
+      },
+      primaryType: 'Agent',
+      message: {
+        source: 'a',
+        connectionId:
+          '0x0000000000000000000000000000000000000000000000000000000000000000' as Hex,
+      },
+    }),
+  };
+
+  // Sign the action
+  const actionHash = hashTypedData({
+    domain: HL_DOMAIN,
+    types: {
+      HyperliquidTransaction: [
+        { name: 'source', type: 'string' },
+        { name: 'connectionId', type: 'bytes32' },
+      ],
+    },
+    primaryType: 'HyperliquidTransaction',
+    message: phantomAgent,
+  });
+
+  const signature = await walletClient.signTypedData({
+    account: walletClient.account,
+    domain: HL_DOMAIN,
+    types: HL_TYPES,
+    primaryType: 'HyperliquidTransaction',
+    message: phantomAgent,
+  });
+
+  // Parse signature
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+export function buildNoopAction(): HyperliquidAction {
+  return {
+    type: 'noop',
+  };
+}
+
+export function buildOrderAction(params: {
+  coin: number;
+  isBuy: boolean;
+  sz: number;
+  limitPx: number;
+  orderType: { limit?: { tif: string }; trigger?: any };
+  reduceOnly: boolean;
+  builder?: { b: string; f: number };
+}): HyperliquidAction {
+  return {
+    type: 'order',
+    orders: [
+      {
+        a: params.coin,
+        b: params.isBuy,
+        p: params.limitPx.toString(),
+        s: params.sz.toString(),
+        r: params.reduceOnly,
+        t: params.orderType,
+      },
+    ],
+    grouping: 'na',
+    ...(params.builder && { builder: params.builder }),
+  };
+}
+
+export function buildApproveAgentAction(params: {
+  agentAddress: string;
+  agentName?: string;
+  nonce: number;
+}): HyperliquidAction {
+  return {
+    type: 'approveAgent',
+    hyperliquidChain: 'Mainnet',
+    signatureChainId: SIGNATURE_CHAIN_ID,
+    agentAddress: params.agentAddress,
+    agentName: params.agentName || 'PillarX-Agent',
+    nonce: params.nonce,
+  };
+}
+
+export function buildApproveBuilderFeeAction(params: {
+  maxFeeRate: string; // "0.1%" or "30bps" etc, but passed as percentage string e.g. "0.3%"
+  builderAddress: string;
+  nonce: number;
+}): HyperliquidAction {
+  return {
+    type: 'approveBuilderFee',
+    hyperliquidChain: 'Mainnet',
+    signatureChainId: SIGNATURE_CHAIN_ID,
+    maxFeeRate: params.maxFeeRate,
+    builder: params.builderAddress,
+    nonce: params.nonce,
+  };
+}
+
+// Helper to get EIP-712 data for Approve Agent
+export function getApproveAgentTypedData(
+  hyperliquidChain: string,
+  signatureChainId: string,
+  agentAddress: string,
+  agentName: string | undefined,
+  nonce: number
+) {
+  const types = {
+    'HyperliquidTransaction:ApproveAgent': [
+      { name: 'hyperliquidChain', type: 'string' },
+      { name: 'agentAddress', type: 'address' },
+      { name: 'agentName', type: 'string' },
+      { name: 'nonce', type: 'uint64' },
+    ],
+  };
+
+  const domain = {
+    name: 'HyperliquidSignTransaction',
+    version: '1',
+    chainId: parseInt(signatureChainId, 16),
+    verifyingContract: '0x0000000000000000000000000000000000000000' as const,
+  };
+
+  const message = {
+    hyperliquidChain: hyperliquidChain,
+    agentAddress: agentAddress,
+    agentName: agentName,
+    nonce: nonce,
+  };
+
+  return {
+    domain,
+    types,
+    primaryType: 'HyperliquidTransaction:ApproveAgent',
+    message,
+  };
+}
+
+// Helper to get EIP-712 data for Approve Builder Fee
+export function getApproveBuilderFeeTypedData(
+  hyperliquidChain: string,
+  signatureChainId: string,
+  maxFeeRate: string,
+  builder: string,
+  nonce: number
+) {
+  const types = {
+    'HyperliquidTransaction:ApproveBuilderFee': [
+      { name: 'hyperliquidChain', type: 'string' },
+      { name: 'maxFeeRate', type: 'string' },
+      { name: 'builder', type: 'address' },
+      { name: 'nonce', type: 'uint64' },
+    ],
+  };
+
+  const domain = {
+    name: 'HyperliquidSignTransaction',
+    version: '1',
+    chainId: parseInt(signatureChainId, 16),
+    verifyingContract: '0x0000000000000000000000000000000000000000' as const,
+  };
+
+  const message = {
+    hyperliquidChain,
+    maxFeeRate,
+    builder,
+    nonce,
+  };
+
+  return {
+    domain,
+    types,
+    primaryType: 'HyperliquidTransaction:ApproveBuilderFee',
+    message,
+  };
+}
+
+export async function signApproveAgentAction(
+  walletClient: WalletClient,
+  action: any
+): Promise<{ r: string; s: string; v: number }> {
+  if (!walletClient.account) {
+    throw new Error('No account connected');
+  }
+
+  const { domain, types, primaryType, message } = getApproveAgentTypedData(
+    action.hyperliquidChain,
+    action.signatureChainId,
+    action.agentAddress,
+    action.agentName,
+    action.nonce
+  );
+
+  const signature = await walletClient.signTypedData({
+    account: walletClient.account,
+    domain,
+    types,
+    primaryType,
+    message,
+  });
+
+  // Parse signature
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+export async function signApproveBuilderFeeAction(
+  walletClient: WalletClient,
+  action: any
+): Promise<{ r: string; s: string; v: number }> {
+  if (!walletClient.account) {
+    throw new Error('No account connected');
+  }
+
+  const { domain, types, primaryType, message } = getApproveBuilderFeeTypedData(
+    action.hyperliquidChain,
+    action.signatureChainId,
+    action.maxFeeRate,
+    action.builder,
+    action.nonce
+  );
+
+  const signature = await walletClient.signTypedData({
+    account: walletClient.account,
+    domain,
+    types,
+    primaryType,
+    message,
+  });
+
+  // Parse signature
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+// Helper to get EIP-712 data for Withdraw3
+export function getWithdraw3TypedData(
+  hyperliquidChain: string,
+  signatureChainId: string,
+  destination: string,
+  amount: string,
+  time: number
+) {
+  const types = {
+    'HyperliquidTransaction:Withdraw': [
+      { name: 'hyperliquidChain', type: 'string' },
+      { name: 'destination', type: 'string' },
+      { name: 'amount', type: 'string' },
+      { name: 'time', type: 'uint64' },
+    ],
+  };
+
+  const domain = {
+    name: 'HyperliquidSignTransaction',
+    version: '1',
+    chainId: parseInt(signatureChainId, 16),
+    verifyingContract: '0x0000000000000000000000000000000000000000' as const,
+  };
+
+  const message = {
+    hyperliquidChain,
+    destination,
+    amount,
+    time,
+  };
+
+  return {
+    domain,
+    types,
+    primaryType: 'HyperliquidTransaction:Withdraw',
+    message,
+  };
+}
+
+// Sign withdraw3 action with wallet client (for master wallet)
+export async function signWithdraw3Action(
+  walletClient: WalletClient,
+  action: any
+): Promise<{ r: string; s: string; v: number }> {
+  if (!walletClient.account) {
+    throw new Error('No account connected');
+  }
+
+  const { domain, types, primaryType, message } = getWithdraw3TypedData(
+    action.hyperliquidChain,
+    action.signatureChainId,
+    action.destination,
+    action.amount,
+    action.time
+  );
+
+  const signature = await walletClient.signTypedData({
+    account: walletClient.account,
+    domain,
+    types,
+    primaryType: primaryType as any,
+    message,
+  });
+
+  // Parse signature
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+// Sign withdraw3 action with agent private key
+export async function signWithdraw3AgentAction(
+  agentPrivateKey: Hex,
+  action: any
+): Promise<{ r: string; s: string; v: number }> {
+  const account = privateKeyToAccount(agentPrivateKey);
+
+  const { domain, types, primaryType, message } = getWithdraw3TypedData(
+    action.hyperliquidChain,
+    action.signatureChainId,
+    action.destination,
+    action.amount,
+    action.time
+  );
+
+  const signature = await account.signTypedData({
+    domain,
+    types,
+    primaryType: primaryType as any,
+    message,
+  });
+
+  // Parse signature
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+
+export async function signAgentAction(
+  agentPrivateKey: Hex,
+  action: HyperliquidAction,
+  nonce: number
+): Promise<{ r: string; s: string; v: number }> {
+  const account = privateKeyToAccount(agentPrivateKey);
+
+  const phantomAgent = {
+    source: 'a',
+    connectionId: keccak256(
+      toHex(
+        JSON.stringify({
+          source: 'a',
+          connectionId:
+            '0x0000000000000000000000000000000000000000000000000000000000000000',
+        })
+      )
+    ),
+  };
+
+  const signature = await account.signTypedData({
+    domain: HL_DOMAIN,
+    types: HL_TYPES,
+    primaryType: 'HyperliquidTransaction',
+    message: phantomAgent,
+  });
+
+  const r = signature.slice(0, 66);
+  const s = '0x' + signature.slice(66, 130);
+  const v = parseInt(signature.slice(130, 132), 16);
+
+  return { r, s, v };
+}
+
+export async function verifyAgentSignature(
+  agentAddress: string,
+  signature: { r: string; s: string; v: number }
+): Promise<boolean> {
+  try {
+    const phantomAgent = {
+      source: 'a',
+      connectionId: keccak256(
+        toHex(
+          JSON.stringify({
+            source: 'a',
+            connectionId:
+              '0x0000000000000000000000000000000000000000000000000000000000000000',
+          })
+        )
+      ),
+    };
+
+    const recoveredAddress = await recoverTypedDataAddress({
+      domain: HL_DOMAIN,
+      types: HL_TYPES,
+      primaryType: 'HyperliquidTransaction',
+      message: phantomAgent,
+      signature:
+        `${signature.r}${signature.s.slice(2)}${signature.v.toString(16).padStart(2, '0')}` as Hex,
+    });
+
+    return recoveredAddress.toLowerCase() === agentAddress.toLowerCase();
+  } catch (error) {
+    console.error('Signature verification error:', error);
+    return false;
+  }
+}
+
+export function generateAgentWallet(): { address: string; privateKey: Hex } {
+  // Generate random private key
+  const randomBytes = new Uint8Array(32);
+  crypto.getRandomValues(randomBytes);
+  const privateKey = ('0x' +
+    Array.from(randomBytes)
+      .map((b) => b.toString(16).padStart(2, '0'))
+      .join('')) as Hex;
+
+  const account = privateKeyToAccount(privateKey);
+  return {
+    address: account.address,
+    privateKey,
+  };
+}
diff --git a/src/apps/perps/lib/hyperliquid/types.ts b/src/apps/perps/lib/hyperliquid/types.ts
new file mode 100644
index 00000000..34211402
--- /dev/null
+++ b/src/apps/perps/lib/hyperliquid/types.ts
@@ -0,0 +1,156 @@
+import { z } from 'zod';
+
+export const CopyTileSchema = z.object({
+  symbol: z.string().min(1),
+  side: z.enum(['long', 'short']),
+  entry: z.union([
+    z.number().positive(),
+    z.tuple([z.number().positive(), z.number().positive()]),
+  ]),
+  stopLoss: z.number().positive(),
+  takeProfits: z.union([
+    z.array(z.number().positive()).min(1),
+    z.tuple([z.number().positive(), z.number().positive()]),
+  ]),
+});
+
+export type CopyTileEntry = number | [number, number];
+export type CopyTileTakeProfits = number[] | [number, number];
+
+export interface CopyTile {
+  symbol: string;
+  side: 'long' | 'short';
+  entry: CopyTileEntry;
+  stopLoss: number;
+  takeProfits: CopyTileTakeProfits;
+}
+
+export interface UserState {
+  assetPositions: Array<{
+    position: {
+      coin: string;
+      szi: string;
+      leverage: {
+        type: 'isolated' | 'cross';
+        value: number;
+        rawUsd?: string;
+      };
+      entryPx: string;
+      positionValue: string;
+      unrealizedPnl: string;
+    };
+  }>;
+  crossMarginSummary: {
+    accountValue: string;
+    totalMarginUsed: string;
+    totalNtlPos: string;
+    totalRawUsd: string;
+  };
+  marginSummary: {
+    accountValue: string;
+    totalMarginUsed: string;
+    totalNtlPos: string;
+    totalRawUsd: string;
+  };
+}
+
+export interface HyperliquidAction {
+  type: string;
+  [key: string]: any;
+}
+
+export interface SignedAction {
+  action: HyperliquidAction;
+  nonce: number;
+  signature: {
+    r: string;
+    s: string;
+    v: number;
+  };
+  vaultAddress?: string | null;
+}
+
+export interface AssetInfo {
+  id: number;
+  symbol: string;
+  szDecimals: number;
+  maxLeverage: number;
+}
+
+export interface EnhancedAsset extends AssetInfo {
+  price: number;
+  volume: number;
+  priceChange: number;
+  priceChangePercent: number;
+}
+
+// Position from Hyperliquid API
+export interface HyperliquidPosition {
+  coin: string;
+  szi: string; // Size (positive for long, negative for short)
+  leverage: {
+    type: 'isolated' | 'cross';
+    value: number;
+    rawUsd?: string;
+  };
+  entryPx: string;
+  positionValue: string;
+  unrealizedPnl: string;
+  returnOnEquity: string;
+  marginUsed: string;
+  liquidationPx?: string;
+  markPx?: string;
+}
+
+// Open Order from Hyperliquid API
+export interface HyperliquidOrder {
+  oid: number; // Order ID
+  coin: string;
+  side: 'A' | 'B'; // A = Ask (Sell), B = Bid (Buy)
+  limitPx: string;
+  sz: string; // Size
+  timestamp: number;
+  origSz: string;
+  reduceOnly: boolean;
+  orderType?: string; // e.g., "Limit", "Stop Market", "Take Profit"
+  triggerPx?: string;
+  trigger?: {
+    triggerPx: string;
+    isMarket: boolean;
+    tpsl: 'tp' | 'sl';
+  };
+  triggerCondition?: {
+    triggerPx: string;
+  };
+}
+
+// Universe asset metadata from Hyperliquid API
+export interface UniverseAsset {
+  name: string; // Symbol
+  szDecimals: number;
+  maxLeverage: number;
+  onlyIsolated?: boolean;
+}
+
+// Asset context (market data) from Hyperliquid API
+export interface AssetContext {
+  dayNtlVlm: string;
+  funding: string;
+  impactPxs: string[];
+  markPx: string;
+  midPx: string;
+  openInterest: string;
+  oraclePx: string;
+  premium: string;
+  prevDayPx: string;
+}
+
+// Market data for display
+export interface MarketData extends UniverseAsset {
+  markPx: number;
+  dayNtlVlm: number;
+  funding: number;
+  openInterest: number;
+  priceChange24h: number;
+  priceChangePercent24h: number;
+}
diff --git a/src/apps/perps/lib/utils.ts b/src/apps/perps/lib/utils.ts
new file mode 100644
index 00000000..2819a830
--- /dev/null
+++ b/src/apps/perps/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/apps/perps/lib/wagmi.ts b/src/apps/perps/lib/wagmi.ts
new file mode 100644
index 00000000..dc8c724c
--- /dev/null
+++ b/src/apps/perps/lib/wagmi.ts
@@ -0,0 +1,11 @@
+import { http, createConfig } from 'wagmi';
+import { arbitrum } from 'wagmi/chains';
+import { injected } from 'wagmi/connectors';
+
+export const config = createConfig({
+  chains: [arbitrum],
+  connectors: [injected()],
+  transports: {
+    [arbitrum.id]: http(),
+  },
+});
diff --git a/src/apps/perps/manifest.json b/src/apps/perps/manifest.json
new file mode 100644
index 00000000..23c9efc7
--- /dev/null
+++ b/src/apps/perps/manifest.json
@@ -0,0 +1,9 @@
+{
+  "title": "Perps",
+  "description": "Perps",
+  "translations": {
+    "en": {
+      "title": "Perps"
+    }
+  }
+}
diff --git a/src/apps/perps/pages/Index.tsx b/src/apps/perps/pages/Index.tsx
new file mode 100644
index 00000000..d090fbb2
--- /dev/null
+++ b/src/apps/perps/pages/Index.tsx
@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import { ConnectButton } from '@/perps/components/ConnectButton';
+import { StatusBanner } from '@/perps/components/StatusBanner';
+import { AgentControls } from '@/perps/components/AgentControls';
+import { BalanceCard } from '@/perps/components/BalanceCard';
+import { AssetSelector } from '@/perps/components/AssetSelector';
+import { TradeForm } from '@/perps/components/TradeForm';
+import { SparklineChart } from '@/perps/components/SparklineChart';
+import { PositionsCard } from '@/perps/components/PositionsCard';
+import { TradeHistoryCard } from '@/perps/components/TradeHistoryCard';
+import { useHyperliquid } from '@/perps/hooks/useHyperliquid';
+import type { AssetInfo } from '@/perps/lib/hyperliquid/types';
+
+const Index = () => {
+  const { address } = useAccount();
+  const {
+    setupStatus,
+    userState,
+    isLoading,
+    checkSetupStatus,
+    setupHyperliquid,
+    loadBalance,
+    availableAssets, // destructured from hook
+    openOrders,
+    activeAddress,
+  } = useHyperliquid();
+
+  const [selectedAsset, setSelectedAsset] = useState<AssetInfo | null>(null);
+
+  useEffect(() => {
+    if (address) {
+      checkSetupStatus();
+    }
+  }, [address, checkSetupStatus]);
+
+  useEffect(() => {
+    if (setupStatus === 'setup') {
+      loadBalance();
+    }
+  }, [setupStatus, loadBalance]);
+
+  // If we have available assets and nothing selected, select the first one (optional UX improvement)
+  useEffect(() => {
+    if (!selectedAsset && availableAssets.length > 0) {
+      // Default to BTC or first asset if desired, or keep null
+      // setSelectedAsset(availableAssets[0]); 
+    }
+  }, [availableAssets, selectedAsset]);
+
+  const handleAssetSelect = (symbol: string, asset: AssetInfo) => {
+    setSelectedAsset(asset);
+  };
+
+  const handlePositionClick = (symbol: string) => {
+    const asset = availableAssets.find(a => a.symbol === symbol);
+    if (asset) {
+      handleAssetSelect(symbol, asset);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      console.warn(`Asset ${symbol} not found in availableAssets`);
+    }
+  };
+
+  const handleTradeComplete = () => {
+    loadBalance();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-bg">
+      <div className="container mx-auto px-4 pt-4 pb-24 md:pb-8 max-w-7xl">
+        {/* Header */}
+        <div className="flex items-center justify-end mb-4">
+          <ConnectButton />
+        </div>
+
+        {/* Status Banner */}
+        {address && (
+          <div className="mb-6">
+            <StatusBanner
+              status={setupStatus}
+              onSetup={setupHyperliquid}
+              isSettingUp={isLoading}
+            />
+          </div>
+        )}
+
+        {/* Agent Controls */}
+        {address && setupStatus === 'setup' && (
+          <div className="mb-6">
+            <AgentControls
+              onStatusChange={loadBalance}
+              ethPrice={availableAssets.find((a) => a.symbol === 'ETH')?.price}
+            />
+          </div>
+        )}
+
+        {/* Sparkline Chart - Full Width */}
+        {address && setupStatus === 'setup' && (
+          <div className="mb-6">
+            <SparklineChart selectedAsset={selectedAsset} />
+          </div>
+        )}
+
+        {/* Open Positions - Full Width */}
+        {address && setupStatus === 'setup' && userState && (
+          <div className="mb-6">
+            <PositionsCard
+              key={activeAddress || address}
+              masterAddress={activeAddress || address}
+              onPositionClick={handlePositionClick}
+              userState={userState}
+              assetPositions={userState?.assetPositions} // Pass directly
+              openOrders={openOrders}
+              onRefresh={loadBalance}
+            />
+          </div>
+        )}
+
+        {/* Trade History - Full Width */}
+        {address && setupStatus === 'setup' && (
+          <div className="mb-6">
+            <TradeHistoryCard masterAddress={activeAddress || address} />
+          </div>
+        )}
+
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          {/* Left Column - Balance */}
+          <div className="lg:col-span-1">
+            {address && setupStatus === 'setup' && userState && (
+              <BalanceCard
+                userState={userState}
+                isLoading={isLoading}
+                masterAddress={address}
+                onRefresh={loadBalance}
+                ethPrice={availableAssets.find((a) => a.symbol === 'ETH')?.price}
+              />
+            )}
+          </div>
+
+          {/* Middle Column - Asset Selector */}
+          <div className="lg:col-span-1">
+            {address && setupStatus === 'setup' && (
+              <AssetSelector
+                selectedSymbol={selectedAsset?.symbol || null}
+                onSelect={handleAssetSelect}
+                assets={availableAssets}
+              />
+            )}
+          </div>
+
+          {/* Right Columns - Trade Form (spans 2 columns) */}
+          <div className="lg:col-span-2">
+            {address && setupStatus === 'setup' && (
+              <TradeForm
+                selectedAsset={selectedAsset}
+                onTradeComplete={handleTradeComplete}
+                userState={userState}
+              />
+            )}
+          </div>
+        </div>
+
+        {!address && null}
+      </div>
+    </div>
+  );
+};
+
+export default Index;
diff --git a/src/apps/perps/pages/MobileIndex.tsx b/src/apps/perps/pages/MobileIndex.tsx
new file mode 100644
index 00000000..a84b66d1
--- /dev/null
+++ b/src/apps/perps/pages/MobileIndex.tsx
@@ -0,0 +1,210 @@
+import { useState, useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import { MobileHeader } from '../components/mobile/MobileHeader';
+import { MobileBalanceCard } from '../components/mobile/MobileBalanceCard';
+import { MobilePositionsCard } from '../components/mobile/MobilePositionsCard';
+import { TradeHistoryCard } from '../components/TradeHistoryCard';
+import { MobileMarketsList } from '../components/mobile/MobileMarketsList';
+import { useHyperliquid } from '../hooks/useHyperliquid';
+import { getUserState, getMetaAndAssetCtxs, getOpenOrders } from '../lib/hyperliquid/client';
+import { getImportedAccount } from '../lib/hyperliquid/keystore';
+import type { UserState, HyperliquidOrder, MarketData } from '../lib/hyperliquid/types';
+
+export default function MobileIndex() {
+  const { address } = useAccount();
+  const { userState, isLoading, availableAssets } = useHyperliquid();
+
+  const [agentAddress, setAgentAddress] = useState<string | null>(null);
+  const [agentUserState, setAgentUserState] = useState<UserState | null>(null);
+  const [markets, setMarkets] = useState<MarketData[]>([]);
+
+  // Load imported account
+  useEffect(() => {
+    const loadImportedAccount = async () => {
+      try {
+        const imported = getImportedAccount();
+        if (imported) {
+          setAgentAddress(imported.accountAddress);
+          const state = await getUserState(imported.accountAddress);
+          setAgentUserState(state);
+        }
+      } catch (error) {
+        console.error('[MobileIndex] Error loading imported account:', error);
+      }
+    };
+
+    loadImportedAccount();
+  }, []);
+
+  // Load markets data
+  useEffect(() => {
+    const loadMarkets = async () => {
+      try {
+        const data = await getMetaAndAssetCtxs();
+        if (data?.universe) {
+          const formattedMarkets = data.universe
+            .slice(0, 10)
+            .map((asset: any, index: number) => ({
+              coin: asset.name,
+              price: formatPrice(parseFloat(asset.markPx || '0')),
+              maxLeverage: asset.maxLeverage || 20,
+              volume: formatVolume(parseFloat(asset.dayNtlVlm || '0')),
+              change: '+0.80',
+              changePercent: '0.80%',
+            }));
+          setMarkets(formattedMarkets);
+        }
+      } catch (error) {
+        console.error('[MobileIndex] Error loading markets:', error);
+      }
+    };
+
+    loadMarkets();
+  }, []);
+
+  // Open Orders State
+  const [openOrders, setOpenOrders] = useState<HyperliquidOrder[]>([]);
+
+  // Load Open Orders
+  useEffect(() => {
+    const fetchOrders = async () => {
+      const targetAddress = address || agentAddress;
+      if (!targetAddress) return;
+
+      try {
+        const orders = await getOpenOrders(targetAddress);
+        setOpenOrders(orders || []);
+      } catch (error) {
+        console.error('[MobileIndex] Error loading orders:', error);
+      }
+    };
+
+    fetchOrders();
+    const interval = setInterval(fetchOrders, 10000);
+    return () => clearInterval(interval);
+  }, [address, agentAddress]);
+
+  // Get balance from agent or connected wallet
+  const displayState = agentUserState || userState;
+  const rawBalance = displayState?.marginSummary
+    ? parseFloat(displayState.marginSummary.accountValue) - parseFloat(displayState.marginSummary.totalMarginUsed)
+    : 0;
+  const balance = rawBalance.toFixed(2);
+
+  // Format positions
+  const positions =
+    displayState?.assetPositions
+      ?.filter((p: any) => parseFloat(p.position.szi) !== 0)
+      .map((p: any) => {
+        const size = parseFloat(p.position.szi);
+        const isLong = size > 0;
+        const pnl = parseFloat(p.position.unrealizedPnl || '0');
+        const value = Math.abs(parseFloat(p.position.positionValue || '0'));
+
+        return {
+          coin: p.position.coin,
+          leverage: Math.round(parseFloat(p.position.leverage?.value || '1')),
+          side: isLong ? ('LONG' as const) : ('SHORT' as const),
+          value: value.toFixed(2),
+          pnl:
+            pnl >= 0 ? `+$${pnl.toFixed(2)}` : `-$${Math.abs(pnl).toFixed(2)}`,
+          pnlPercent: '0.00%',
+          entryPrice: formatPrice(parseFloat(p.position.entryPx || '0')),
+          markPrice: formatPrice(parseFloat(p.position.markPx || '0')),
+          liqPrice: p.position.liquidationPx || 'N/A',
+        };
+      }) || [];
+
+  // Calculate total PNL
+  const totalPnl = positions.reduce((sum: number, p: any) => {
+    const pnl = parseFloat(p.pnl.replace(/[+$-]/g, ''));
+    return sum + (p.pnl.startsWith('-') ? -pnl : pnl);
+  }, 0);
+
+  const totalValue = positions.reduce((sum: number, p: any) => sum + parseFloat(p.value), 0);
+  const totalPnlPercent =
+    totalValue > 0 ? ((totalPnl / totalValue) * 100).toFixed(2) : '0.00';
+
+  const handlePositionClick = (coin: string) => {
+    // In mobile, we might navigate to a details page or just log for now
+    // But consistent with Desktop, we should probably try to select it if we had a global selection context
+    // For now, let's just log it or maybe we need to navigate?
+    // The user request was about loading the chart.
+    // Ensure we find the asset in availableAssets to validate it exists
+    const asset = availableAssets.find((a) => a.symbol === coin);
+    if (asset) {
+      console.log('Mobile: Selected asset', coin);
+      // TODO: If there is a mobile chart view, we should navigate/update it here.
+      // For now, verifying the click logic works is key.
+      // If the mobile app shares state with desktop via a context, updating it here would be ideal.
+      // Since this is a simple page, we might just be done.
+    } else {
+      console.warn(`Mobile: Asset ${coin} not found`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <MobileHeader />
+
+      {/* Content */}
+      <div className="pt-16 px-4 pb-6 space-y-3">
+        {/* Balance Card */}
+        <MobileBalanceCard
+          balance={parseFloat(balance).toFixed(2)}
+          onWithdraw={() => console.log('Withdraw')}
+          onDeposit={() => console.log('Deposit')}
+        />
+
+        {/* Positions Card */}
+        {(positions.length > 0 || openOrders.length > 0) && (
+          <MobilePositionsCard
+            positions={positions}
+            totalValue={totalValue.toFixed(2)}
+            totalPnl={
+              totalPnl >= 0
+                ? `+$${totalPnl.toFixed(2)}`
+                : `-$${Math.abs(totalPnl).toFixed(2)}`
+            }
+            totalPnlPercent={`${totalPnlPercent}%`}
+            openOrders={openOrders}
+            onPositionClick={handlePositionClick}
+          />
+        )}
+
+        {/* Trade History */}
+        {address && (
+          <TradeHistoryCard masterAddress={address} />
+        )}
+
+        {/* Markets List */}
+        <MobileMarketsList
+          markets={markets}
+          onMarketSelect={(coin) => console.log('Selected:', coin)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function formatPrice(price: number): string {
+  if (price >= 1000) {
+    return price.toLocaleString('en-US', { maximumFractionDigits: 0 });
+  }
+  // If price < 1, use 5 decimals
+  if (Math.abs(price) < 1 && Math.abs(price) > 0) {
+    return price.toFixed(5);
+  }
+  return price.toFixed(2);
+}
+
+function formatVolume(volume: number): string {
+  if (volume >= 1e9) {
+    return `$${(volume / 1e9).toFixed(1)}B`;
+  }
+  if (volume >= 1e6) {
+    return `$${(volume / 1e6).toFixed(1)}M`;
+  }
+  return `$${volume.toFixed(0)}`;
+}
diff --git a/src/apps/perps/pages/NotFound.tsx b/src/apps/perps/pages/NotFound.tsx
new file mode 100644
index 00000000..93583b2a
--- /dev/null
+++ b/src/apps/perps/pages/NotFound.tsx
@@ -0,0 +1,27 @@
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error(
+      '404 Error: User attempted to access non-existent route:',
+      location.pathname
+    );
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 underline hover:text-blue-700">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/apps/perps/styles/perps.css b/src/apps/perps/styles/perps.css
new file mode 100644
index 00000000..f595db53
--- /dev/null
+++ b/src/apps/perps/styles/perps.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    --background: 240 10% 3.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 240 8% 8%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 240 8% 8%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 263 70% 50%;
+    --primary-foreground: 210 40% 98%;
+    --primary-glow: 263 70% 65%;
+
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+
+    --accent: 217 33% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217 33% 17%;
+    --input: 217 33% 17%;
+    --ring: 263 70% 50%;
+
+    --radius: 1rem;
+
+    --gradient-primary: linear-gradient(135deg,
+        hsl(263 70% 50%),
+        hsl(220 80% 55%));
+    --gradient-accent: linear-gradient(135deg,
+        hsl(263 70% 50%),
+        hsl(290 70% 50%));
+    --gradient-bg: linear-gradient(180deg, hsl(240 10% 3.9%), hsl(240 10% 6%));
+
+    --shadow-glow: 0 0 40px hsl(263 70% 50% / 0.3);
+    --shadow-card: 0 8px 32px hsl(240 10% 0% / 0.4);
+
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Prevent zoom on mobile inputs */
+  @media screen and (max-width: 768px) {
+
+    input,
+    select,
+    textarea {
+      font-size: 16px !important;
+    }
+  }
+
+  /* Gradient utility class */
+  .gradient-primary {
+    background: var(--gradient-primary);
+  }
+}
\ No newline at end of file
diff --git a/src/apps/perps/vite-env.d.ts b/src/apps/perps/vite-env.d.ts
new file mode 100644
index 00000000..aa72fb20
--- /dev/null
+++ b/src/apps/perps/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare global {
+  interface Window {
+    ethereum?: any;
+  }
+}
+
+export {};
diff --git a/src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx b/src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx
index 1a459486..7f72ebcd 100644
--- a/src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx
+++ b/src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useMemo } from 'react';
-import { TbTriangleFilled } from 'react-icons/tb';
+import { usePrivy } from '@privy-io/react-auth';
+import { TbTriangleFilled, TbFingerprint, TbCheck } from 'react-icons/tb';
+import { toast } from 'sonner';
 
 // types
 import { PortfolioData, WalletHistory } from '../../../../types/api';
@@ -20,6 +22,7 @@ import Body from '../Typography/Body';
 import BodySmall from '../Typography/BodySmall';
 
 const WalletPortfolioBalance = () => {
+  const { user, linkPasskey } = usePrivy();
   const dispatch = useAppDispatch();
   const walletPortfolio = useAppSelector(
     (state) =>
@@ -86,6 +89,37 @@ const WalletPortfolioBalance = () => {
             className="w-7 h-5"
           />
           <Body>My portfolio</Body>
+          {user?.wallet?.connectorType === 'embedded' && (
+            <div className="flex items-center ml-2">
+              {user?.linkedAccounts?.find((a) => a.type === 'passkey') ? (
+                <div
+                  className="flex items-center justify-center w-6 h-6 rounded-full bg-green-500/20"
+                  title="Account secured with Passkey"
+                >
+                  <TbCheck size={14} className="text-green-500" />
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => {
+                    linkPasskey().catch((err) => {
+                      console.error('Failed to link passkey:', err);
+                      toast.error('Failed to create passkey');
+                    });
+                  }}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-full bg-purple_medium/20 hover:bg-purple_medium/30 transition-colors border border-purple_medium/30 group"
+                >
+                  <TbFingerprint
+                    size={14}
+                    className="text-purple_medium group-hover:text-purple_light"
+                  />
+                  <span className="text-xs text-purple_medium group-hover:text-purple_light font-medium">
+                    Secure
+                  </span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
         {isWalletPortfolioLoading || !walletPortfolio ? (
           <SkeletonLoader $height="45px" $width="150px" $radius="10px" />
diff --git a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx
index 315dc420..0548a732 100644
--- a/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx
+++ b/src/apps/the-exchange/components/CardsSwap/test/CardSwap.test.tsx
@@ -153,6 +153,10 @@ vi.mock('../../../../../hooks/useDeployWallet', () => ({
 describe('<CardsSwap />', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+
+    // Mock environment variable for swap button visibility
+    vi.stubEnv('VITE_SWAP_BUTTON_SWITCH', 'true');
+
     // Reset store state to initial values
     store.dispatch(setAmountSwap(0));
     store.dispatch(setAmountReceive(0));
@@ -359,5 +363,6 @@ describe('<CardsSwap />', () => {
 
   afterEach(() => {
     vi.clearAllMocks();
+    vi.unstubAllEnvs();
   });
 });
diff --git a/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap b/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap
index 85ae4749..5517175c 100644
--- a/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap
+++ b/src/apps/the-exchange/components/CardsSwap/test/__snapshots__/CardSwap.test.tsx.snap
@@ -180,5 +180,17 @@ exports[`<CardsSwap /> > Rendering and Snapshot > renders correctly and matches
       </div>
     </div>
   </div>
+  <button
+    className="absolute self-center w-[34px] h-[34px] p-2 bg-white rounded-[3px] desktop:p-4 desktop:w-14 desktop:h-14"
+    id="switch-cards-button-exchange"
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt="swap-icon"
+      className="w-[18px] h-[18px] desktop:w-6 desktop:h-6"
+      src="/src/apps/the-exchange/images/arrow-swap-horizontal.png"
+    />
+  </button>
 </div>
 `;
diff --git a/src/containers/Main.tsx b/src/containers/Main.tsx
index 4bfc56c3..451d543a 100644
--- a/src/containers/Main.tsx
+++ b/src/containers/Main.tsx
@@ -1011,12 +1011,27 @@ export const config = createConfig({
 const queryClient = new QueryClient();
 
 const Main = () => {
+  const privyAppId = import.meta.env.VITE_PRIVY_APP_ID;
+
+  if (!privyAppId) {
+    console.error(
+      'VITE_PRIVY_APP_ID is not defined. Please check your environment variables.'
+    );
+    return (
+      <div style={{ padding: '20px', color: 'red', fontFamily: 'monospace' }}>
+        <h1>Configuration Error</h1>
+        <p>VITE_PRIVY_APP_ID environment variable is not set.</p>
+        <p>Please configure this in your deployment settings.</p>
+      </div>
+    );
+  }
+
   return (
     <ThemeProvider theme={defaultTheme}>
       <GlobalStyle />
       <LanguageProvider>
         <PrivyProvider
-          appId={import.meta.env.VITE_PRIVY_APP_ID as string}
+          appId={privyAppId}
           config={{
             appearance: { theme: 'dark' },
             defaultChain: isTestnet ? sepolia : mainnet,
diff --git a/src/providers/AllowedAppsProvider.tsx b/src/providers/AllowedAppsProvider.tsx
index 6b1c49be..1987fa2d 100644
--- a/src/providers/AllowedAppsProvider.tsx
+++ b/src/providers/AllowedAppsProvider.tsx
@@ -81,13 +81,39 @@ const AllowedAppsProvider = ({ children }: { children: React.ReactNode }) => {
             paramsSerializer: () => finalQueryString,
           }
         );
-        if (expired || !data?.length) {
+        if (expired) {
           setIsLoading(false);
           return;
         }
-        setAllowed(data?.map((app: ApiAllowedApp) => app));
+
+        const appsWithPerps = [
+          ...(data?.map((app: ApiAllowedApp) => app) || []),
+          // Add perps app locally
+          {
+            id: 'perps-local',
+            appId: 'perps',
+            type: 'app',
+            title: 'Perps',
+            name: 'Perps',
+            shortDescription: 'Perpetual futures trading on Hyperliquid',
+            tags: 'trading,derivatives',
+          } as ApiAllowedApp,
+        ];
+        setAllowed(appsWithPerps);
       } catch (e) {
         console.warn('Error calling PillarX apps API', e);
+        // Set perps app as fallback if API fails
+        setAllowed([
+          {
+            id: 'perps-local',
+            appId: 'perps',
+            type: 'app',
+            title: 'Perps',
+            name: 'Perps',
+            shortDescription: 'Perpetual futures trading on Hyperliquid',
+            tags: 'trading,derivatives',
+          } as ApiAllowedApp,
+        ]);
       }
       setIsLoading(false);
     })();
diff --git a/src/providers/__tests__/AllowedAppsProvider.test.tsx b/src/providers/__tests__/AllowedAppsProvider.test.tsx
index 01cbeea7..9862281d 100644
--- a/src/providers/__tests__/AllowedAppsProvider.test.tsx
+++ b/src/providers/__tests__/AllowedAppsProvider.test.tsx
@@ -19,6 +19,16 @@ describe('AllowedAppsProvider', () => {
     { appId: 'allowed-app-3' },
   ];
 
+  const perpsAppMock = {
+    id: 'perps-local',
+    appId: 'perps',
+    type: 'app',
+    title: 'Perps',
+    name: 'Perps',
+    shortDescription: 'Perpetual futures trading on Hyperliquid',
+    tags: 'trading,derivatives',
+  };
+
   let wrapper: React.FC;
 
   beforeEach(() => {
@@ -46,7 +56,7 @@ describe('AllowedAppsProvider', () => {
       expect(result.current.isLoading).toEqual(false);
     });
 
-    expect(result.current.allowed).toEqual(allowedAppsMock);
+    expect(result.current.allowed).toEqual([...allowedAppsMock, perpsAppMock]);
   });
 
   afterEach(() => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 0bd6cbcd..b4c4c93c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line no-undef
-module.exports = {
+export default {
   mode: 'jit',
   content: [
     './src/**/*.{js,ts,jsx,tsx,html,mdx}',
@@ -20,6 +19,52 @@ module.exports = {
         transparent_medium_grey: '#e2ddff1a',
         dark_grey: '#120f17',
         medium_grey: '#e2ddff4d',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        warning: {
+          DEFAULT: '#F59E0B',
+          foreground: '#FFFFFF',
+        },
+        success: {
+          DEFAULT: '#10B981',
+          foreground: '#FFFFFF',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       boxShadow: { xs: '0px 0px  30px 0px #ffffff0c' },
       fontFamily: {
@@ -29,6 +74,20 @@ module.exports = {
       backgroundImage: {
         gradient: 'linear-gradient(270deg, #ffffff87,#ffffff87,#ffffff87)',
       },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
     },
   },
   plugins: [],
diff --git a/test_fetch_orders.ts b/test_fetch_orders.ts
new file mode 100644
index 00000000..88c6e2b3
--- /dev/null
+++ b/test_fetch_orders.ts
@@ -0,0 +1,59 @@
+
+import axios from 'axios';
+
+const INFO_URL = 'https://api.hyperliquid.xyz/info';
+const ADDRESS = '0x21175628173516104F90d0Aa30C41Ae153EC3019'; // User's address from screenshots/context if available, otherwise strict placeholder 
+// User address from previous logs/context could be inferred or I will ask. 
+// I'll use the one from the "Master Address" in the app if I can find it.
+// Actually, I'll valid address from the code if I can.
+// I will use a known active address or the user's address I saw in logs?
+// I don't see the address in logs.
+// I'll make the script take the address as an argument or just use a dummy one to check schema, 
+// BUT to see the TP, I need the REAL USER address.
+// I will inspect `src/store.ts` to see if there is a specific address hardcoded? No.
+// I will assume I can run it with the address I find in the app (if I could see it).
+// I will use a public address with orders if possible, or just check the schema.
+// Better: I will use the address appearing in the user's previous screenshot or just ask to run it on '0x...'
+// I'll look for "masterAddress" in the code interactions. 
+// Ah, `PositionsCard` uses `masterAddress`.
+// I will just use a hardcoded address 0x... for now, but really I want to verify if the ENDPOINT works.
+// So I will use a random address.
+
+async function testOrders() {
+    // 1. Test frontendOpenOrders
+    try {
+        console.log('Fetching frontendOpenOrders...');
+        const res = await axios.post(INFO_URL, {
+            type: 'frontendOpenOrders',
+            user: '0x21175628173516104f90d0aa30c41ae153ec3019'
+        });
+        console.log('FrontendOpenOrders Status:', res.status);
+        console.log('FrontendOpenOrders Data Type:', typeof res.data);
+        console.log('FrontendOpenOrders Is Array:', Array.isArray(res.data));
+        if (Array.isArray(res.data) && res.data.length > 0) {
+            console.log('Sample Order:', JSON.stringify(res.data[0], null, 2));
+        } else {
+            console.log('Data:', res.data);
+        }
+    } catch (e: any) {
+        console.error('FrontendOpenOrders Failed:', e.message, e.response?.data);
+    }
+
+    // 2. Test openOrders
+    try {
+        console.log('\nFetching openOrders...');
+        const res = await axios.post(INFO_URL, {
+            type: 'openOrders',
+            user: '0x21175628173516104f90d0aa30c41ae153ec3019'
+        });
+        console.log('OpenOrders Status:', res.status);
+        console.log('OpenOrders Is Array:', Array.isArray(res.data));
+        if (Array.isArray(res.data) && res.data.length > 0) {
+            console.log('Sample Order:', JSON.stringify(res.data[0], null, 2));
+        }
+    } catch (e: any) {
+        console.error('OpenOrders Failed:', e.message);
+    }
+}
+
+testOrders();
diff --git a/vite.config.js b/vite.config.js
index 275f816b..3b88a712 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,11 @@ import { defineConfig } from 'vite';
 import dynamicImport from 'vite-plugin-dynamic-import';
 import svgr from 'vite-plugin-svgr';
 import basicSsl from '@vitejs/plugin-basic-ssl';
+import { fileURLToPath } from 'url';
+
+// Emulate __dirname for ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export default defineConfig({
   plugins: [react(), svgr(), dynamicImport(), basicSsl()],