diff --git a/api1.js b/api1.js
index ca6a979..13ba75e 100644
--- a/api1.js
+++ b/api1.js
@@ -109,6 +109,169 @@ function saveSwapReport(swapId, swapData) {
   }
 }
 
+function toNumber(value, fallback = 0) {
+  const normalized = Number(value);
+  return Number.isFinite(normalized) ? normalized : fallback;
+}
+
+function getAllSwapReportPaths() {
+  const reportsRoot = path.join(api1State.DATA_DIR, 'swap_reports');
+  const reportPaths = [];
+
+  function walk(dirPath) {
+    if (!fs.existsSync(dirPath)) return;
+
+    for (const entry of fs.readdirSync(dirPath, { withFileTypes: true })) {
+      const fullPath = path.join(dirPath, entry.name);
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile() && entry.name.endsWith('.json')) {
+        reportPaths.push(fullPath);
+      }
+    }
+  }
+
+  walk(reportsRoot);
+  return reportPaths;
+}
+
+function getHistoricalSwapOutputMap() {
+  const swapOutputs = new Map();
+
+  for (const reportPath of getAllSwapReportPaths()) {
+    try {
+      const report = JSON.parse(fs.readFileSync(reportPath, 'utf8'));
+      const outputSwapUtxos =
+        report.output_swap_utxos ||
+        report.outputSwapUtxos ||
+        report.report?.output_swap_utxos ||
+        report.report?.outputSwapUtxos ||
+        [];
+
+      outputSwapUtxos.forEach((entry) => {
+        if (!Array.isArray(entry) || entry.length < 2) return;
+        const [amount, address] = entry;
+        if (!address) return;
+        swapOutputs.set(address, toNumber(amount, 0));
+      });
+    } catch (error) {
+      console.warn('⚠️ Failed to parse swap report for balance derivation:', {
+        reportPath,
+        error: error.message,
+      });
+    }
+  }
+
+  return swapOutputs;
+}
+
+function deriveBalancesFromUtxos(rawUtxos = []) {
+  const derived = {
+    spendable: 0,
+    regular: 0,
+    swap: 0,
+    contract: 0,
+    fidelity: 0,
+  };
+
+  rawUtxos.forEach(([utxoEntry, spendInfo]) => {
+    const amount = toNumber(utxoEntry?.amount?.sats, 0);
+    const spendType = String(spendInfo?.spendType || '').toLowerCase();
+    const isSpendable = Boolean(utxoEntry?.spendable);
+
+    if (isSpendable) {
+      derived.spendable += amount;
+    }
+
+    if (spendType.includes('swap')) {
+      derived.swap += amount;
+      return;
+    }
+
+    if (spendType.includes('contract')) {
+      derived.contract += amount;
+      return;
+    }
+
+    if (spendType.includes('fidelity')) {
+      derived.fidelity += amount;
+      return;
+    }
+
+    if (spendType.includes('seed') || spendType.includes('regular')) {
+      derived.regular += amount;
+    }
+  });
+
+  return derived;
+}
+
+function normalizeBalancePayload(rawBalance = {}, rawUtxos = []) {
+  const derivedFromUtxos = deriveBalancesFromUtxos(rawUtxos);
+  const historicalSwapOutputs = getHistoricalSwapOutputMap();
+
+  const matchedHistoricalSwapUtxos = rawUtxos.filter(([utxoEntry]) =>
+    historicalSwapOutputs.has(utxoEntry?.address)
+  );
+  const historicalSwapBalance = matchedHistoricalSwapUtxos.reduce(
+    (sum, [utxoEntry]) => sum + toNumber(utxoEntry?.amount?.sats, 0),
+    0
+  );
+
+  const normalized = {
+    spendable: toNumber(
+      rawBalance.spendable ?? rawBalance.spendable_balance,
+      derivedFromUtxos.spendable
+    ),
+    regular: toNumber(
+      rawBalance.regular ?? rawBalance.regular_balance,
+      derivedFromUtxos.regular
+    ),
+    swap: toNumber(
+      rawBalance.swap ??
+        rawBalance.swap_balance ??
+        rawBalance.swapCoin ??
+        rawBalance.swapcoin,
+      derivedFromUtxos.swap
+    ),
+    contract: toNumber(
+      rawBalance.contract ?? rawBalance.contract_balance,
+      derivedFromUtxos.contract
+    ),
+    fidelity: toNumber(
+      rawBalance.fidelity ?? rawBalance.fidelity_balance,
+      derivedFromUtxos.fidelity
+    ),
+  };
+
+  // Completed swap outputs can show up as SeedCoin/regular in the current UTXO API.
+  // Recover that provenance by matching active UTXOs against saved swap reports.
+  if (historicalSwapBalance > normalized.swap) {
+    normalized.swap = historicalSwapBalance;
+    normalized.regular = Math.max(
+      0,
+      normalized.spendable -
+        normalized.swap -
+        normalized.contract -
+        normalized.fidelity
+    );
+  }
+
+  return {
+    normalized,
+    debug: {
+      rawBalance,
+      derivedFromUtxos,
+      historicalSwapBalance,
+      historicalSwapMatches: matchedHistoricalSwapUtxos.map(([utxoEntry, spendInfo]) => ({
+        address: utxoEntry?.address,
+        amount: toNumber(utxoEntry?.amount?.sats, 0),
+        spendType: spendInfo?.spendType,
+      })),
+    },
+  };
+}
+
 async function initNAPI() {
   try {
     api1State.coinswapNapi = require('coinswap-napi');
@@ -469,16 +632,16 @@ function registerTakerHandlers() {
       // Sync removed to prevent UI blocking on page load - relies on background sync
       // api1State.takerInstance.syncAndSave();
       const balance = api1State.takerInstance.getBalances();
+      const rawUtxos = api1State.takerInstance.listAllUtxoSpendInfo();
+      const { normalized, debug } = normalizeBalancePayload(balance, rawUtxos);
+
+      console.log('💰 Raw taker balance payload:', balance);
+      console.log('💰 Normalized taker balance payload:', normalized);
+      console.log('💰 Balance derivation details:', debug);
 
       return {
         success: true,
-        balance: {
-          spendable: balance.spendable,
-          regular: balance.regular,
-          swap: balance.swap,
-          contract: balance.contract,
-          fidelity: balance.fidelity,
-        },
+        balance: normalized,
       };
     } catch (error) {
       console.error('❌ Failed to get balance:', error);
diff --git a/src/components/swap/Coinswap.js b/src/components/swap/Coinswap.js
index 4d67a57..7568aa7 100644
--- a/src/components/swap/Coinswap.js
+++ b/src/components/swap/Coinswap.js
@@ -939,273 +939,258 @@ export async function CoinswapComponent(container, swapConfig) {
 
   function buildFlowDiagram() {
     const actualMakers = swapData.makers; // Number of actual makers (e.g., 2)
+    const totalNodes = actualMakers + 1;
+
+    // Dynamic node sizing based on maker count
+    const youHalf = actualMakers <= 5 ? 38 : actualMakers <= 10 ? 30 : 22;
+    const makerHalf = actualMakers <= 5 ? 32 : actualMakers <= 10 ? 25 : 18;
+    const youFont = actualMakers <= 5 ? 22 : actualMakers <= 10 ? 16 : 13;
+    const makerFont = actualMakers <= 5 ? 20 : actualMakers <= 10 ? 14 : 10;
+    const youRx = actualMakers <= 5 ? 14 : 10;
+    const makerRx = actualMakers <= 5 ? 10 : 7;
+    const maxNodeHalf = Math.max(youHalf, makerHalf);
+    const labelPad = youHalf + 62;
+
+    function getRectPoint(distance, width, height) {
+      const halfW = width / 2;
+      const halfH = height / 2;
+      const top = width / 2;
+      const right = height;
+      const bottom = width;
+      const left = height;
+      const perimeter = top + right + bottom + left + top;
+      let remaining = ((distance % perimeter) + perimeter) % perimeter;
+
+      const linePoint = (x1, y1, x2, y2, travelled, segmentLength) => {
+        const ratio = segmentLength === 0 ? 0 : travelled / segmentLength;
+        return {
+          x: x1 + (x2 - x1) * ratio,
+          y: y1 + (y2 - y1) * ratio,
+        };
+      };
 
-    function buildFlowDiagram() {
-      const actualMakers = swapData.makers;
-      const radius = 140;
-      const centerX = 200;
-      const centerY = 200;
-
-      // Same circular layout for BOTH V1 and V2
-      const totalNodes = actualMakers + 1;
-      const angleStep = (2 * Math.PI) / totalNodes;
-
-      const positions = [];
-      for (let i = 0; i < totalNodes; i++) {
-        const angle = angleStep * i - Math.PI / 2;
-        const x = centerX + radius * Math.cos(angle);
-        const y = centerY + radius * Math.sin(angle);
-        positions.push({ x, y });
-      }
-
-      return `
-    <div class="flex items-center justify-center" style="min-height: 450px;">
-      <svg width="450" height="450" viewBox="0 0 400 400" class="mx-auto">
-        <defs>
-          ${Array.from({ length: actualMakers + 1 }, (_, i) => {
-            const color =
-              i < actualMakers
-                ? makerColors[i % makerColors.length]
-                : '#10B981';
-            return `
-              <marker id="arrow-${i}" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
-                <polygon points="0 0, 8 3, 0 6" fill="${color}" />
-              </marker>
-            `;
-          }).join('')}
-        </defs>
-        
-        <!-- Arrows -->
-        ${positions
-          .map((pos, i) => {
-            const nextPos = positions[(i + 1) % positions.length];
-            const color =
-              i < actualMakers
-                ? makerColors[i % makerColors.length]
-                : '#10B981';
-
-            const dx = nextPos.x - pos.x;
-            const dy = nextPos.y - pos.y;
-            const length = Math.sqrt(dx * dx + dy * dy);
-            const offsetStart = i === 0 ? 40 : 35;
-            const offsetEnd = (i + 1) % positions.length === 0 ? 40 : 35;
-
-            const startX = pos.x + (dx / length) * offsetStart;
-            const startY = pos.y + (dy / length) * offsetStart;
-            const endX = nextPos.x - (dx / length) * offsetEnd;
-            const endY = nextPos.y - (dy / length) * offsetEnd;
+      const segments = [
+        {
+          length: top,
+          point: (travelled) =>
+            linePoint(0, -halfH, halfW, -halfH, travelled, top),
+        },
+        {
+          length: right,
+          point: (travelled) =>
+            linePoint(halfW, -halfH, halfW, halfH, travelled, right),
+        },
+        {
+          length: bottom,
+          point: (travelled) =>
+            linePoint(halfW, halfH, -halfW, halfH, travelled, bottom),
+        },
+        {
+          length: left,
+          point: (travelled) =>
+            linePoint(-halfW, halfH, -halfW, -halfH, travelled, left),
+        },
+        {
+          length: top,
+          point: (travelled) =>
+            linePoint(-halfW, -halfH, 0, -halfH, travelled, top),
+        },
+      ];
 
-            return `
-            <line x1="${startX}" y1="${startY}" x2="${endX}" y2="${endY}" 
-                  stroke="${color}" stroke-width="2.5" marker-end="url(#arrow-${i})" opacity="0.6"/>
-          `;
-          })
-          .join('')}
-        
-        <!-- You Node -->
-        <g id="you-node" style="transition: all 0.3s;">
-          <rect x="${positions[0].x - 38}" y="${positions[0].y - 38}" width="76" height="76" rx="14" 
-                fill="#FF6B35" id="you-rect" style="transition: fill 0.5s;"/>
-          <text x="${positions[0].x}" y="${positions[0].y}" text-anchor="middle" fill="white" font-size="22" font-weight="bold">You</text>
-          <text id="you-state-text" x="${positions[0].x}" y="${positions[0].y + 50}" text-anchor="middle" fill="#D1D5DB" font-size="10">Send</text>
-        </g>
-        
-        <!-- Makers -->
-        ${Array.from({ length: actualMakers }, (_, i) => {
-          const pos = positions[i + 1];
-          const color = makerColors[i % makerColors.length];
-          return `
-            <g id="maker-${i}" style="opacity: 0.3; filter: blur(3px); transition: all 0.3s;">
-              <rect x="${pos.x - 32}" y="${pos.y - 32}" width="64" height="64" rx="10" fill="${color}"/>
-              <text x="${pos.x}" y="${pos.y + 3}" text-anchor="middle" fill="white" font-size="20" font-weight="bold">M${i + 1}</text>
-              
-              ${
-                !isV2
-                  ? `
-                <g id="hop-${i}">
-                  <rect x="${pos.x - 52}" y="${pos.y - 58}" width="104" height="22" rx="5" 
-                        fill="#0f1419" stroke="#374151" stroke-width="1"/>
-                  <text class="hop-status" x="${pos.x}" y="${pos.y - 42}" text-anchor="middle" 
-                        fill="#9CA3AF" font-size="10" font-weight="bold">Pending</text>
-                </g>
-              `
-                  : `
-                <text class="hop-status" x="${pos.x}" y="${pos.y - 45}" text-anchor="middle" 
-                      fill="#6B7280" font-size="10">Off-chain</text>
-              `
-              }
-            </g>
-          `;
-        }).join('')}
-        
-        ${
-          isV2
-            ? `
-          <!-- V2 Center Label -->
-          <text x="${centerX}" y="${centerY}" text-anchor="middle" fill="#6B7280" font-size="11" font-weight="bold">Taproot V2</text>
-          <text x="${centerX}" y="${centerY + 15}" text-anchor="middle" fill="#4B5563" font-size="9">MuSig2</text>
-        `
-            : ''
+      for (const segment of segments) {
+        if (remaining <= segment.length) {
+          return segment.point(remaining);
         }
-      </svg>
-    </div>
-  `;
+        remaining -= segment.length;
+      }
+
+      return { x: 0, y: -halfH };
     }
-    const radius = 140; // Radius of the circle
-    const centerX = 200;
-    const centerY = 200;
-
-    // Calculate positions for nodes in a circle
-    // Total nodes: You + Makers (no duplicate "You")
-    const totalNodes = actualMakers + 1; // +1 for single "You"
-    const angleStep = (2 * Math.PI) / totalNodes;
-
-    const positions = [];
-    for (let i = 0; i < totalNodes; i++) {
-      const angle = angleStep * i - Math.PI / 2; // Start from top
-      const x = centerX + radius * Math.cos(angle);
-      const y = centerY + radius * Math.sin(angle);
-      positions.push({ x, y });
+
+    function buildAdaptiveLayout() {
+      const gap = 14;
+
+      if (actualMakers <= 4) {
+        const minRadius =
+          (maxNodeHalf + gap) / Math.sin(Math.PI / totalNodes);
+        const radius = Math.max(minRadius, 140);
+        const svgSize = Math.round((radius + labelPad) * 2);
+        const centerX = svgSize / 2;
+        const centerY = svgSize / 2;
+        const angleStep = (2 * Math.PI) / totalNodes;
+        const positions = Array.from({ length: totalNodes }, (_, i) => {
+          const angle = angleStep * i - Math.PI / 2;
+          return {
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle),
+          };
+        });
+
+        return {
+          centerX,
+          centerY,
+          svgWidth: svgSize,
+          svgHeight: svgSize,
+          positions,
+          guideMarkup: `<circle cx="${centerX}" cy="${centerY}" r="${radius}"
+                fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="5 5" opacity="0.6"/>`,
+        };
+      }
+
+      if (actualMakers <= 11) {
+        const safeSin = Math.max(Math.sin(Math.PI / totalNodes), 0.22);
+        const minRadius =
+          (maxNodeHalf + gap + Math.max(0, actualMakers - 5) * 2) / safeSin;
+        const rx = Math.max(minRadius * 1.15, 190 + actualMakers * 10);
+        const ry = Math.max(minRadius * 0.72, 120 + actualMakers * 5);
+        const svgWidth = Math.round(rx * 2 + labelPad * 2 + 30);
+        const svgHeight = Math.round(ry * 2 + labelPad * 2);
+        const centerX = svgWidth / 2;
+        const centerY = svgHeight / 2;
+        const angleStep = (2 * Math.PI) / totalNodes;
+        const positions = Array.from({ length: totalNodes }, (_, i) => {
+          const angle = angleStep * i - Math.PI / 2;
+          return {
+            x: centerX + rx * Math.cos(angle),
+            y: centerY + ry * Math.sin(angle),
+          };
+        });
+
+        return {
+          centerX,
+          centerY,
+          svgWidth,
+          svgHeight,
+          positions,
+          guideMarkup: `<ellipse cx="${centerX}" cy="${centerY}" rx="${rx}" ry="${ry}"
+                fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="6 6" opacity="0.6"/>`,
+        };
+      }
+
+      const isSquareLayout = actualMakers <= 14;
+      const width = isSquareLayout
+        ? Math.max(420, 360 + actualMakers * 16)
+        : Math.max(640, 430 + actualMakers * 24);
+      const height = isSquareLayout
+        ? width
+        : Math.max(320, 250 + Math.min(actualMakers - 14, 8) * 18);
+      const halfW = width / 2;
+      const halfH = height / 2;
+      const perimeter = width * 2 + height * 2;
+      const svgWidth = Math.round(width + labelPad * 2);
+      const svgHeight = Math.round(height + labelPad * 2);
+      const centerX = svgWidth / 2;
+      const centerY = svgHeight / 2;
+      const step = perimeter / totalNodes;
+      const positions = Array.from({ length: totalNodes }, (_, i) => {
+        const point = getRectPoint(step * i, width, height);
+        return {
+          x: centerX + point.x,
+          y: centerY + point.y,
+        };
+      });
+
+      const x = centerX - halfW;
+      const y = centerY - halfH;
+      const guideMarkup = `<rect x="${x}" y="${y}" width="${width}" height="${height}"
+              fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="7 7" opacity="0.6"/>`;
+
+      return {
+        centerX,
+        centerY,
+        svgWidth,
+        svgHeight,
+        positions,
+        guideMarkup,
+      };
     }
 
+    const { centerX, centerY, svgWidth, svgHeight, positions, guideMarkup } =
+      buildAdaptiveLayout();
+
+    const statusW = Math.max(70, makerHalf * 3.5);
+    const statusHalfW = statusW / 2;
+
     return `
-    <div class="flex items-center justify-center" style="min-height: 450px;">
-      <svg width="450" height="450" viewBox="0 0 400 400" class="mx-auto">
+    <div class="flex items-center justify-center overflow-auto">
+      <svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}" class="mx-auto max-w-full">
         <defs>
-          ${Array.from({ length: actualMakers + 1 }, (_, i) => {
-            const color =
-              i < actualMakers
-                ? makerColors[i % makerColors.length]
-                : '#10B981';
-            return `
-              <marker id="arrow-${i}" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
-                <polygon points="0 0, 8 3, 0 6" fill="${color}" />
-              </marker>
-            `;
+          ${Array.from({ length: totalNodes }, (_, i) => {
+            const color = i < actualMakers ? makerColors[i % makerColors.length] : '#10B981';
+            return `<marker id="arrow-${i}" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
+              <polygon points="0 0, 8 3, 0 6" fill="${color}" opacity="0.85"/>
+            </marker>`;
           }).join('')}
+          <filter id="glow-you" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="5" result="blur"/>
+            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
         </defs>
-        
-        <!-- Draw arrows between nodes (including back to You) -->
-        ${positions
-          .map((pos, i) => {
-            const nextPos = positions[(i + 1) % positions.length]; // Wrap around to first node
-            const color =
-              i < actualMakers
-                ? makerColors[i % makerColors.length]
-                : '#10B981';
-
-            // Calculate arrow direction
-            const dx = nextPos.x - pos.x;
-            const dy = nextPos.y - pos.y;
-            const length = Math.sqrt(dx * dx + dy * dy);
-            const offsetStart = i === 0 ? 40 : 35; // Larger offset for "You" node
-            const offsetEnd = (i + 1) % positions.length === 0 ? 40 : 35;
-
-            const startX = pos.x + (dx / length) * offsetStart;
-            const startY = pos.y + (dy / length) * offsetStart;
-            const endX = nextPos.x - (dx / length) * offsetEnd;
-            const endY = nextPos.y - (dy / length) * offsetEnd;
 
-            return `
-            <a id="arrow-link-${i}" href="#" class="cursor-pointer hover:opacity-80" title="View transaction" onclick="event.preventDefault();">
-              <line 
-                x1="${startX}" y1="${startY}" 
-                x2="${endX}" y2="${endY}" 
-                stroke="${color}" 
-                stroke-width="2.5" 
-                marker-end="url(#arrow-${i})" 
-                opacity="0.6"
-                class="transition-opacity"
-              />
-            </a>
-          `;
-          })
-          .join('')}
-        
-        <!-- You (single node - transitions from Send to Receive) -->
+        <!-- Guide path -->
+        ${guideMarkup}
+
+        <!-- Arrows -->
+        ${positions.map((pos, i) => {
+          const nextPos = positions[(i + 1) % positions.length];
+          const color = i < actualMakers ? makerColors[i % makerColors.length] : '#10B981';
+          const fromHalf = i === 0 ? youHalf : makerHalf;
+          const toHalf = (i + 1) % positions.length === 0 ? youHalf : makerHalf;
+          const dx = nextPos.x - pos.x;
+          const dy = nextPos.y - pos.y;
+          const len = Math.sqrt(dx * dx + dy * dy);
+          const sx = pos.x + (dx / len) * (fromHalf + 4);
+          const sy = pos.y + (dy / len) * (fromHalf + 4);
+          const ex = nextPos.x - (dx / len) * (toHalf + 10);
+          const ey = nextPos.y - (dy / len) * (toHalf + 10);
+          return `<a id="arrow-link-${i}" href="#" target="_blank" rel="noopener noreferrer" title="View transaction">
+            <line x1="${sx.toFixed(1)}" y1="${sy.toFixed(1)}" x2="${ex.toFixed(1)}" y2="${ey.toFixed(1)}"
+                  stroke="${color}" stroke-width="2" marker-end="url(#arrow-${i})" opacity="0.6" class="transition-opacity"/>
+          </a>`;
+        }).join('')}
+
+        <!-- You node -->
         <g id="you-node" style="transition: all 0.3s;">
-          <rect 
-            x="${positions[0].x - 38}" y="${positions[0].y - 38}" 
-            width="76" height="76" 
-            rx="14" 
-            fill="#FF6B35" 
-            class="shadow-lg"
-            id="you-rect"
-            style="transition: fill 0.5s;"
-          />
-          <text 
-            x="${positions[0].x}" y="${positions[0].y}" 
-            text-anchor="middle" 
-            fill="white" 
-            font-size="22" 
-            font-weight="bold"
-          >You</text>
-          <text 
-            id="you-state-text"
-            x="${positions[0].x}" y="${positions[0].y + 50}" 
-            text-anchor="middle" 
-            fill="#D1D5DB" 
-            font-size="10"
-          >Send</text>
-          <text 
-            x="${positions[0].x}" y="${positions[0].y + 65}" 
-            text-anchor="middle" 
-            fill="white" 
-            font-size="9" 
-            font-family="monospace"
-          >${(swapData.amount / 100000000).toFixed(4)}</text>
+          <rect x="${(positions[0].x - youHalf).toFixed(1)}" y="${(positions[0].y - youHalf).toFixed(1)}"
+                width="${youHalf * 2}" height="${youHalf * 2}" rx="${youRx}"
+                fill="#FF6B35" id="you-rect" style="transition: fill 0.5s;" filter="url(#glow-you)"/>
+          <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youFont * 0.38).toFixed(1)}"
+                text-anchor="middle" fill="white" font-size="${youFont}" font-weight="bold">You</text>
+          <text id="you-state-text"
+                x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youHalf + 17).toFixed(1)}"
+                text-anchor="middle" fill="#D1D5DB" font-size="${Math.max(8, youFont - 12)}">Send</text>
+          <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youHalf + 30).toFixed(1)}"
+                text-anchor="middle" fill="white" font-size="${Math.max(7, youFont - 14)}"
+                font-family="monospace">${(swapData.amount / 100000000).toFixed(4)}</text>
         </g>
-        
+
         <!-- Makers -->
         ${Array.from({ length: actualMakers }, (_, i) => {
-          const pos = positions[i + 1]; // Offset by 1 because "You" is at position 0
+          const pos = positions[i + 1];
           const color = makerColors[i % makerColors.length];
-          return `
-            <g id="maker-${i}" style="opacity: ${i === 0 ? '1' : '0.3'}; filter: ${i === 0 ? 'blur(0)' : 'blur(3px)'}; transition: all 0.3s;">
-              <!-- Maker node -->
-              <rect 
-                x="${pos.x - 32}" y="${pos.y - 32}" 
-                width="64" height="64" 
-                rx="10" 
-                fill="${color}" 
-                class="shadow-lg"
-              />
-              <text 
-                x="${pos.x}" y="${pos.x === positions[1].x ? pos.y : pos.y + 3}" 
-                text-anchor="middle" 
-                fill="white" 
-                font-size="20" 
-                font-weight="bold"
-              >M${i + 1}</text>
-              <text 
-                x="${pos.x}" y="${pos.y + 48}" 
-                text-anchor="middle" 
-                fill="#D1D5DB" 
-                font-size="9"
-              >Maker ${i + 1}</text>
-              
-              <!-- Status indicator -->
-              <g id="hop-${i}">
-                <rect 
-                  x="${pos.x - 52}" y="${pos.y - 58}" 
-                  width="104" height="22" 
-                  rx="5" 
-                  fill="#0f1419" 
-                  stroke="#374151" 
-                  stroke-width="1"
-                />
-                <text 
-                  class="hop-status" 
-                  x="${pos.x}" y="${pos.y - 42}" 
-                  text-anchor="middle" 
-                  fill="#9CA3AF" 
-                  font-size="10" 
-                  font-weight="bold"
-                >Pending</text>
-              </g>
+          return `<g id="maker-${i}" style="opacity: ${i === 0 ? '1' : '0.3'}; filter: ${i === 0 ? 'none' : 'blur(2px)'}; transition: all 0.4s;">
+            <rect x="${(pos.x - makerHalf).toFixed(1)}" y="${(pos.y - makerHalf).toFixed(1)}"
+                  width="${makerHalf * 2}" height="${makerHalf * 2}" rx="${makerRx}" fill="${color}"/>
+            <text x="${pos.x.toFixed(1)}" y="${(pos.y + makerFont * 0.38).toFixed(1)}"
+                  text-anchor="middle" fill="white" font-size="${makerFont}" font-weight="bold">M${i + 1}</text>
+            ${actualMakers <= 12 ? `
+            <text x="${pos.x.toFixed(1)}" y="${(pos.y + makerHalf + 14).toFixed(1)}"
+                  text-anchor="middle" fill="#9CA3AF" font-size="${Math.max(7, makerFont - 3)}">Maker ${i + 1}</text>
+            ` : ''}
+            <g id="hop-${i}">
+              <rect x="${(pos.x - statusHalfW).toFixed(1)}" y="${(pos.y - makerHalf - 26).toFixed(1)}"
+                    width="${statusW.toFixed(1)}" height="20" rx="4"
+                    fill="#0f1419" stroke="#374151" stroke-width="1"/>
+              <text class="hop-status" x="${pos.x.toFixed(1)}" y="${(pos.y - makerHalf - 13).toFixed(1)}"
+                    text-anchor="middle" fill="#9CA3AF" font-size="${Math.max(8, makerFont - 1)}" font-weight="bold">Pending</text>
             </g>
-          `;
+          </g>`;
         }).join('')}
+
+        ${isV2 ? `
+          <text x="${centerX}" y="${centerY}" text-anchor="middle" fill="#6B7280" font-size="11" font-weight="bold">Taproot V2</text>
+          <text x="${centerX}" y="${centerY + 15}" text-anchor="middle" fill="#4B5563" font-size="9">MuSig2</text>
+        ` : ''}
       </svg>
     </div>
   `;
@@ -1240,76 +1225,67 @@ export async function CoinswapComponent(container, swapConfig) {
   }
 
   content.innerHTML = `
-    <div class="mb-6">
-      <button id="back-to-swap" class="text-gray-400 hover:text-white mb-4">← Back</button>
-      <h2 class="text-3xl font-bold text-[#FF6B35] mb-2">Coinswap in Progress</h2>
-      <p id="swap-status-text" class="text-gray-400">Executing swap through ${swapData.makers} makers...</p>
+    <!-- Header -->
+    <div class="mb-4">
+      <button id="back-to-swap" class="text-gray-500 hover:text-gray-300 text-sm flex items-center gap-1 mb-3 transition-colors">← Back</button>
+      <div class="flex items-center gap-3 mb-1">
+        <h2 class="text-2xl font-bold text-[#FF6B35]">Coinswap in Progress</h2>
+        <span class="flex items-center gap-1.5 px-2.5 py-1 bg-orange-500/10 border border-orange-500/20 rounded-full">
+          <span class="w-2 h-2 rounded-full bg-orange-400 animate-pulse"></span>
+          <span class="text-xs text-orange-400 font-medium">Active</span>
+        </span>
+      </div>
+      <p id="swap-status-text" class="text-gray-500 text-sm">Executing swap through ${swapData.makers} makers...</p>
     </div>
 
-    <div class="bg-[#1a2332] rounded-lg p-6 mb-6">
+    <!-- Flow diagram -->
+    <div class="bg-[#1a2332] rounded-xl mb-4 overflow-hidden">
       ${buildFlowDiagram()}
     </div>
 
-<div class="grid grid-cols-1 ${isV2 ? 'md:grid-cols-2' : 'md:grid-cols-3'} gap-4 mb-6">
-      <div class="bg-[#1a2332] rounded-lg p-4">
-        <h3 class="text-lg font-semibold text-lg text-gray-300 mb-3">Progress</h3>
-        <div class="space-y-2 text-sm">
-          <div class="flex justify-between">
-            <span class="text-gray-400">Amount</span>
-            <span class="font-mono text-white">${(swapData.amount / 100000000).toFixed(8)} BTC</span>
-          </div>
-         ${
-           !isV2
-             ? `
-          <div class="flex justify-between">
-            <span class="text-gray-400">Hops</span>
-            <span class="text-cyan-400">${swapData.hops}</span>
-          </div>
-          `
-             : `
-          <div class="flex justify-between">
-            <span class="text-gray-400">Protocol</span>
-            <span class="text-cyan-400">Taproot V2</span>
-          </div>
-          `
-         }
-          <div class="flex justify-between">
-            <span class="text-gray-400">Time</span>
-            <span id="elapsed-time" class="text-yellow-400">0:00</span>
-          </div>
-        </div>
+    <!-- Stats row -->
+    <div class="grid grid-cols-${isV2 ? '2' : '3'} gap-3 mb-4">
+      <div class="bg-[#1a2332] rounded-xl p-4">
+        <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Amount</p>
+        <p class="font-mono text-white font-semibold">${(swapData.amount / 100000000).toFixed(8)} BTC</p>
+        ${!isV2
+          ? `<p class="text-xs text-gray-500 mt-2">Hops: <span class="text-cyan-400">${swapData.hops}</span></p>`
+          : `<p class="text-xs text-cyan-400 mt-2">Taproot V2 (MuSig2)</p>`
+        }
       </div>
 
-      ${
-        !isV2
-          ? `
-      <div class="bg-[#1a2332] rounded-lg p-4">
-        <h3 class="text-lg font-semibold text-lg text-gray-300 mb-3">Hop Transactions</h3>
-        <div id="transaction-list" class="space-y-2 max-h-48 overflow-y-auto"></div>
+      ${!isV2 ? `
+      <div class="bg-[#1a2332] rounded-xl p-4">
+        <p class="text-xs text-gray-500 uppercase tracking-wide mb-2">Hop Transactions</p>
+        <div id="transaction-list" class="space-y-1.5 max-h-28 overflow-y-auto"></div>
       </div>
-      `
-          : ''
-      }
+      ` : ''}
 
-      <div class="bg-[#1a2332] rounded-lg p-4">
-        <h3 class="text-lg font-semibold text-lg text-gray-300 mb-3">Status</h3>
+      <div class="bg-[#1a2332] rounded-xl p-4">
+        <div class="flex items-center justify-between mb-3">
+          <p class="text-xs text-gray-500 uppercase tracking-wide">Elapsed</p>
+          <span id="elapsed-time" class="font-mono text-yellow-400 font-bold text-xl">0:00</span>
+        </div>
         <div class="space-y-2">
-          <div class="p-2 bg-blue-500/10 border border-blue-500/30 rounded text-xs text-blue-400">
-            ℹ️ Do not close window
+          <div class="flex items-center gap-2 text-xs">
+            <span class="w-2 h-2 rounded-full bg-blue-400 animate-pulse shrink-0"></span>
+            <span class="text-blue-400">Do not close window</span>
           </div>
-          <div class="p-2 bg-purple-500/10 border border-purple-500/30 rounded text-xs text-purple-400">
-            🔒 Funds protected by HTLCs
+          <div class="flex items-center gap-2 text-xs">
+            <span class="w-2 h-2 rounded-full bg-purple-400 shrink-0"></span>
+            <span class="text-purple-400">Funds protected by HTLCs</span>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="bg-[#1a2332] rounded-lg p-4">
-      <h3 class="text-lg font-semibold text-lg text-gray-300 mb-3">Activity Log</h3>
-      <div id="log-container" class="bg-[#0f1419] rounded p-3 h-40 overflow-y-auto font-mono text-xs"></div>
+    <!-- Activity log -->
+    <div class="bg-[#1a2332] rounded-xl p-4">
+      <p class="text-xs text-gray-500 uppercase tracking-wide mb-2">Activity Log</p>
+      <div id="log-container" class="bg-[#0a0f16] rounded-lg p-3 h-36 overflow-y-auto font-mono text-xs"></div>
     </div>
 
-    <button id="complete-button" class="hidden w-full mt-6 bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-lg">
+    <button id="complete-button" class="hidden w-full mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-xl transition-colors">
       View Swap Report →
     </button>
   `;
diff --git a/src/components/swap/SwapHistory.js b/src/components/swap/SwapHistory.js
index d192138..b2cc9de 100644
--- a/src/components/swap/SwapHistory.js
+++ b/src/components/swap/SwapHistory.js
@@ -86,9 +86,25 @@ function normalizeSwapReport(report) {
   return {
     id: report.swapId || nested.swapId || `swap_${Date.now()}`,
     completedAt,
-    amount: report.amount || nested.amount || nested.targetAmount || 0,
-    totalOutputAmount:
-      nested.totalOutputAmount || nested.total_output_amount || 0,
+    amount:
+      toNumber(
+        report.amount ??
+          nested.amount ??
+          nested.targetAmount ??
+          nested.target_amount ??
+          nested.incomingAmount ??
+          nested.incoming_amount,
+        0
+      ),
+    totalOutputAmount: toNumber(
+      nested.totalOutputAmount ??
+        nested.total_output_amount ??
+        nested.outgoingAmount ??
+        nested.outgoing_amount ??
+        report.totalOutputAmount ??
+        report.total_output_amount,
+      0
+    ),
     makersCount,
     hops: makersCount + 1,
     totalFee,
@@ -126,10 +142,117 @@ export async function loadSwapHistory() {
             report: normalized.report,
           };
         });
+    } else {
+      swapHistory = [];
+      throw new Error(result.error || 'Failed to load swap history');
     }
   } catch (error) {
+    swapHistory = [];
     console.error('Failed to load swap history:', error);
+    throw error;
+  }
+  return swapHistory;
+}
+
+export function summarizeSwapHistory(history) {
+  const totalSwaps = history.length;
+  const totalAmount = history.reduce(
+    (sum, s) => sum + (Number(s.amount) || 0),
+    0
+  );
+  const totalFees = history.reduce(
+    (sum, s) => sum + (Number(s.totalFee) || 0),
+    0
+  );
+  const avgFeePaid = totalSwaps > 0 ? Math.round(totalFees / totalSwaps) : 0;
+  return { totalSwaps, totalAmount, totalFees, avgFeePaid };
+}
+
+function satsToBtc(sats) {
+  const normalized = Number(sats);
+  if (!Number.isFinite(normalized)) return '0.00000000';
+  return (normalized / 100000000).toFixed(8);
+}
+
+export function buildSwapHistoryMarkup(history) {
+  if (history.length === 0) {
+    return `
+      <div class="text-center py-16">
+        <div class="text-6xl mb-4">🔄</div>
+        <h3 class="text-xl text-gray-300 mb-2">No Swap History</h3>
+        <p class="text-gray-500 mb-6">You haven't completed any coinswaps yet.</p>
+      </div>
+    `;
   }
+
+  return `
+    <div class="space-y-4">
+      ${history
+        .map((swap) => {
+          const amount = Number(swap.amount) || 0;
+          const totalOutputAmount = Number(swap.totalOutputAmount) || 0;
+          const feePercentage = Number(swap.feePercentage) || 0;
+          const totalFee = Number(swap.totalFee) || 0;
+          const btcAmount = satsToBtc(amount);
+          const outputBtc = satsToBtc(totalOutputAmount);
+          const timeAgo = formatRelativeTime(swap.completedAt);
+          const dateStr = formatDate(swap.completedAt);
+          const duration = formatDuration(swap.durationSeconds);
+
+          return `
+          <div class="swap-history-row bg-[#1a2332] hover:bg-[#242d3d] rounded-lg p-5 cursor-pointer transition-all hover:scale-[1.01] hover:shadow-lg border border-transparent hover:border-[#FF6B35]/30" data-swap-id="${swap.id}">
+            <div class="flex items-center gap-4">
+              <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
+                <span class="text-2xl">✓</span>
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-3 mb-1">
+                  <span class="text-white font-semibold text-lg">Coinswap</span>
+                  <span class="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded-full">Completed</span>
+                  <span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">${swap.hops} hops</span>
+                </div>
+                <div class="flex items-center gap-4 text-sm">
+                  <span class="text-gray-500">${timeAgo}</span>
+                  <span class="text-gray-600">•</span>
+                  <span class="text-gray-500">${dateStr}</span>
+                  <span class="text-gray-600">•</span>
+                  <span class="text-gray-500">${duration}</span>
+                </div>
+              </div>
+              <div class="text-right flex-shrink-0">
+                <div class="text-lg font-mono text-green-400">${btcAmount} BTC</div>
+                <div class="text-xs text-gray-500">${amount.toLocaleString()} sats</div>
+              </div>
+              <div class="text-gray-600 flex-shrink-0">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </div>
+            </div>
+            <div class="mt-4 pt-4 border-t border-gray-800 grid grid-cols-4 gap-4 text-sm">
+              <div>
+                <span class="text-gray-500">Makers</span>
+                <p class="text-white font-mono">${swap.makersCount}</p>
+              </div>
+              <div>
+                <span class="text-gray-500">Fee</span>
+                <p class="text-yellow-400 font-mono">${feePercentage.toFixed(2)}%</p>
+              </div>
+              <div>
+                <span class="text-gray-500">Total Fee</span>
+                <p class="text-yellow-400 font-mono">${totalFee.toLocaleString()} sats</p>
+              </div>
+              <div>
+                <span class="text-gray-500">Output</span>
+                <p class="text-green-400 font-mono">${outputBtc} BTC</p>
+              </div>
+            </div>
+          </div>
+        `;
+        })
+        .join('')}
+    </div>
+  `;
 }
 
 export async function SwapHistoryComponent(container) {
diff --git a/src/components/swap/SwapReport.js b/src/components/swap/SwapReport.js
index caab566..d6dc1ac 100644
--- a/src/components/swap/SwapReport.js
+++ b/src/components/swap/SwapReport.js
@@ -25,21 +25,35 @@ export function SwapReportComponent(container, swapReport) {
     const normalized = Number(value);
     return Number.isFinite(normalized) ? normalized : fallback;
   };
+  const nestedReport = swapReport.report || {};
 
   const rawTotalMakerFees = toNumber(
-    swapReport.totalMakerFees ?? swapReport.total_maker_fees,
+    swapReport.totalMakerFees ??
+      swapReport.total_maker_fees ??
+      nestedReport.totalMakerFees ??
+      nestedReport.total_maker_fees,
     0
   );
   const rawMiningFee = toNumber(
-    swapReport.miningFee ?? swapReport.mining_fee,
+    swapReport.miningFee ??
+      swapReport.mining_fee ??
+      nestedReport.miningFee ??
+      nestedReport.mining_fee,
     0
   );
   const rawFeePaidOrEarned = toNumber(
-    swapReport.fee_paid_or_earned ?? swapReport.feePaidOrEarned,
+    swapReport.fee_paid_or_earned ??
+      swapReport.feePaidOrEarned ??
+      nestedReport.fee_paid_or_earned ??
+      nestedReport.feePaidOrEarned ??
+      nestedReport.feePaidOrEarned,
     NaN
   );
   const providedTotalFee = toNumber(
-    swapReport.totalFee ?? swapReport.total_fee,
+    swapReport.totalFee ??
+      swapReport.total_fee ??
+      nestedReport.totalFee ??
+      nestedReport.total_fee,
     NaN
   );
   const derivedTotalFee = Number.isFinite(rawFeePaidOrEarned)
@@ -52,39 +66,115 @@ export function SwapReportComponent(container, swapReport) {
       : derivedTotalFee;
 
   // Extract values with safe defaults
+  const normalizedFundingTxids =
+    swapReport.fundingTxidsByHop ||
+    swapReport.funding_txids_by_hop ||
+    nestedReport.fundingTxidsByHop ||
+    nestedReport.funding_txids_by_hop ||
+    nestedReport.fundingTxids ||
+    nestedReport.funding_txids ||
+    [];
+  const normalizedTargetAmount = toNumber(
+    swapReport.targetAmount ??
+      swapReport.target_amount ??
+      nestedReport.targetAmount ??
+      nestedReport.target_amount ??
+      swapReport.amount ??
+      nestedReport.incomingAmount ??
+      nestedReport.incoming_amount ??
+      nestedReport.outgoingAmount ??
+      nestedReport.outgoing_amount,
+    0
+  );
+  const normalizedTotalFundingTxs = toNumber(
+    swapReport.totalFundingTxs ??
+      swapReport.total_funding_txs ??
+      nestedReport.totalFundingTxs ??
+      nestedReport.total_funding_txs,
+    Array.isArray(normalizedFundingTxids) ? normalizedFundingTxids.length : 0
+  );
+  const normalizedFeePercentage = toNumber(
+    swapReport.feePercentage ??
+      swapReport.fee_percentage ??
+      nestedReport.feePercentage ??
+      nestedReport.fee_percentage,
+    normalizedTargetAmount > 0 ? (rawTotalFee / normalizedTargetAmount) * 100 : 0
+  );
+
   const report = {
     swapId: swapReport.swapId || swapReport.swap_id || 'unknown',
     swapDurationSeconds:
-      swapReport.swapDurationSeconds || swapReport.swap_duration_seconds || 0,
-    targetAmount: swapReport.targetAmount || swapReport.target_amount || 0,
+      toNumber(
+        swapReport.swapDurationSeconds ??
+          swapReport.swap_duration_seconds ??
+          nestedReport.swapDurationSeconds ??
+          nestedReport.swap_duration_seconds,
+        0
+      ),
+    targetAmount: normalizedTargetAmount,
     totalInputAmount:
-      swapReport.totalInputAmount || swapReport.total_input_amount || 0,
+      toNumber(
+        swapReport.totalInputAmount ??
+          swapReport.total_input_amount ??
+          nestedReport.totalInputAmount ??
+          nestedReport.total_input_amount,
+        normalizedTargetAmount
+      ),
     totalOutputAmount:
-      swapReport.totalOutputAmount || swapReport.total_output_amount || 0,
-    makersCount: swapReport.makersCount || swapReport.makers_count || 0,
+      toNumber(
+        swapReport.totalOutputAmount ??
+          swapReport.total_output_amount ??
+          nestedReport.totalOutputAmount ??
+          nestedReport.total_output_amount ??
+          nestedReport.outgoingAmount ??
+          nestedReport.outgoing_amount,
+        0
+      ),
+    makersCount: toNumber(
+      swapReport.makersCount ??
+        swapReport.makers_count ??
+        nestedReport.makersCount ??
+        nestedReport.makers_count,
+      0
+    ),
     makerAddresses:
-      swapReport.makerAddresses || swapReport.maker_addresses || [],
-    totalFundingTxs:
-      swapReport.totalFundingTxs || swapReport.total_funding_txs || 0,
-    fundingTxidsByHop:
-      swapReport.fundingTxidsByHop || swapReport.funding_txids_by_hop || [],
+      swapReport.makerAddresses ||
+      swapReport.maker_addresses ||
+      nestedReport.makerAddresses ||
+      nestedReport.maker_addresses ||
+      [],
+    totalFundingTxs: normalizedTotalFundingTxs,
+    fundingTxidsByHop: normalizedFundingTxids,
     totalFee: rawTotalFee,
     totalMakerFees: rawTotalMakerFees,
     miningFee: rawMiningFee,
-    feePercentage:
-      swapReport.feePercentage ||
-      swapReport.fee_percentage ||
-      ((swapReport.targetAmount ?? swapReport.target_amount ?? 0) > 0
-        ? (rawTotalFee /
-            (swapReport.targetAmount ?? swapReport.target_amount ?? 0)) *
-          100
-        : 0),
-    makerFeeInfo: swapReport.makerFeeInfo || swapReport.maker_fee_info || [],
-    inputUtxos: swapReport.inputUtxos || swapReport.input_utxos || [],
+    feePercentage: normalizedFeePercentage,
+    makerFeeInfo:
+      swapReport.makerFeeInfo ||
+      swapReport.maker_fee_info ||
+      nestedReport.makerFeeInfo ||
+      nestedReport.maker_fee_info ||
+      [],
+    inputUtxos:
+      swapReport.inputUtxos ||
+      swapReport.input_utxos ||
+      nestedReport.inputUtxos ||
+      nestedReport.input_utxos ||
+      [],
     outputRegularUtxos:
-      swapReport.outputRegularUtxos || swapReport.output_regular_utxos || [],
+      swapReport.outputRegularUtxos ||
+      swapReport.output_regular_utxos ||
+      nestedReport.outputRegularUtxos ||
+      nestedReport.output_regular_utxos ||
+      nestedReport.outputChangeUtxos ||
+      nestedReport.output_change_utxos ||
+      [],
     outputSwapUtxos:
-      swapReport.outputSwapUtxos || swapReport.output_swap_utxos || [],
+      swapReport.outputSwapUtxos ||
+      swapReport.output_swap_utxos ||
+      nestedReport.outputSwapUtxos ||
+      nestedReport.output_swap_utxos ||
+      [],
     sweepTxid:
       swapReport.sweep_txid ||
       swapReport.sweepTxid ||
@@ -473,54 +563,255 @@ export function SwapReportComponent(container, swapReport) {
     `;
   }
 
-  // Build swap circuit visualization
+  // Build swap circuit visualization (circular SVG)
   function buildCircularFlowHtml() {
-    const nodes = [
-      { label: 'You', sublabel: 'Outgoing', color: '#FF6B35' },
-      ...report.makerAddresses.map((addr, index) => ({
-        label: `Maker ${index + 1}`,
-        sublabel: truncateAddress(addr, 10, 6),
-        color: makerColors[index % makerColors.length],
-        makerIndex: index,
-      })),
-      { label: 'You', sublabel: 'Incoming', color: '#10B981' },
-    ];
-    const columns = Math.max(nodes.length * 2 - 1, 1);
-    const flowItems = nodes.flatMap((node, index) => {
-      const nodeHtml = `
-        <div class="min-w-[180px] rounded-xl border p-4 bg-[#0f1419] ${
-          node.makerIndex !== undefined ? 'maker-node cursor-pointer' : ''
-        }" style="border-color: ${node.color}55;" ${
-          node.makerIndex !== undefined
-            ? `data-maker-index="${node.makerIndex}"`
-            : ''
-        }>
-          <p class="text-sm font-bold" style="color: ${node.color};">${node.label}</p>
-          <p class="text-xs text-gray-400 mt-1">${node.sublabel}</p>
-        </div>
-      `;
+    const makersCount = Number(report.makersCount);
+    const actualMakers = Math.max(
+      0,
+      Number.isFinite(makersCount) && makersCount > 0
+        ? makersCount
+        : report.makerAddresses.length
+    );
+    const totalNodes = actualMakers + 1; // +1 for You
+
+    // Dynamic node sizing
+    const youHalf = actualMakers <= 5 ? 38 : actualMakers <= 10 ? 30 : 22;
+    const makerHalf = actualMakers <= 5 ? 32 : actualMakers <= 10 ? 25 : 18;
+    const youFont = actualMakers <= 5 ? 22 : actualMakers <= 10 ? 16 : 13;
+    const makerFont = actualMakers <= 5 ? 20 : actualMakers <= 10 ? 14 : 10;
+    const youRx = actualMakers <= 5 ? 14 : 10;
+    const makerRx = actualMakers <= 5 ? 10 : 7;
+    const maxNodeHalf = Math.max(youHalf, makerHalf);
+    const labelPad = youHalf + 62;
+
+    function getRectPoint(distance, width, height) {
+      const halfW = width / 2;
+      const halfH = height / 2;
+      const top = width / 2;
+      const right = height;
+      const bottom = width;
+      const left = height;
+      const perimeter = top + right + bottom + left + top;
+      let remaining = ((distance % perimeter) + perimeter) % perimeter;
+
+      const linePoint = (x1, y1, x2, y2, travelled, segmentLength) => {
+        const ratio = segmentLength === 0 ? 0 : travelled / segmentLength;
+        return {
+          x: x1 + (x2 - x1) * ratio,
+          y: y1 + (y2 - y1) * ratio,
+        };
+      };
+
+      const segments = [
+        {
+          length: top,
+          point: (travelled) =>
+            linePoint(0, -halfH, halfW, -halfH, travelled, top),
+        },
+        {
+          length: right,
+          point: (travelled) =>
+            linePoint(halfW, -halfH, halfW, halfH, travelled, right),
+        },
+        {
+          length: bottom,
+          point: (travelled) =>
+            linePoint(halfW, halfH, -halfW, halfH, travelled, bottom),
+        },
+        {
+          length: left,
+          point: (travelled) =>
+            linePoint(-halfW, halfH, -halfW, -halfH, travelled, left),
+        },
+        {
+          length: top,
+          point: (travelled) =>
+            linePoint(-halfW, -halfH, 0, -halfH, travelled, top),
+        },
+      ];
 
-      if (index === nodes.length - 1) {
-        return [nodeHtml];
+      for (const segment of segments) {
+        if (remaining <= segment.length) {
+          return segment.point(remaining);
+        }
+        remaining -= segment.length;
       }
 
-      return [
-        nodeHtml,
-        `
-          <div class="flex items-center justify-center text-[#FF6B35]">
-            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 12h12m0 0-4-4m4 4-4 4"></path>
-            </svg>
-          </div>
-        `,
-      ];
-    });
+      return { x: 0, y: -halfH };
+    }
+
+    function buildAdaptiveLayout() {
+      const gap = 14;
+
+      if (actualMakers <= 4) {
+        const minRadius =
+          (maxNodeHalf + gap) / Math.sin(Math.PI / totalNodes);
+        const radius = Math.max(minRadius, 140);
+        const svgSize = Math.round((radius + labelPad) * 2);
+        const centerX = svgSize / 2;
+        const centerY = svgSize / 2;
+        const angleStep = (2 * Math.PI) / totalNodes;
+        const positions = Array.from({ length: totalNodes }, (_, i) => {
+          const angle = angleStep * i - Math.PI / 2;
+          return {
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle),
+          };
+        });
+
+        return {
+          centerX,
+          centerY,
+          svgWidth: svgSize,
+          svgHeight: svgSize,
+          positions,
+          guideMarkup: `<circle cx="${centerX}" cy="${centerY}" r="${radius}"
+                  fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="5 5" opacity="0.6"/>`,
+        };
+      }
+
+      if (actualMakers <= 11) {
+        const safeSin = Math.max(Math.sin(Math.PI / totalNodes), 0.22);
+        const minRadius =
+          (maxNodeHalf + gap + Math.max(0, actualMakers - 5) * 2) / safeSin;
+        const rx = Math.max(minRadius * 1.15, 190 + actualMakers * 10);
+        const ry = Math.max(minRadius * 0.72, 120 + actualMakers * 5);
+        const svgWidth = Math.round(rx * 2 + labelPad * 2 + 30);
+        const svgHeight = Math.round(ry * 2 + labelPad * 2);
+        const centerX = svgWidth / 2;
+        const centerY = svgHeight / 2;
+        const angleStep = (2 * Math.PI) / totalNodes;
+        const positions = Array.from({ length: totalNodes }, (_, i) => {
+          const angle = angleStep * i - Math.PI / 2;
+          return {
+            x: centerX + rx * Math.cos(angle),
+            y: centerY + ry * Math.sin(angle),
+          };
+        });
+
+        return {
+          centerX,
+          centerY,
+          svgWidth,
+          svgHeight,
+          positions,
+          guideMarkup: `<ellipse cx="${centerX}" cy="${centerY}" rx="${rx}" ry="${ry}"
+                  fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="6 6" opacity="0.6"/>`,
+        };
+      }
+
+      const isSquareLayout = actualMakers <= 14;
+      const width = isSquareLayout
+        ? Math.max(420, 360 + actualMakers * 16)
+        : Math.max(640, 430 + actualMakers * 24);
+      const height = isSquareLayout
+        ? width
+        : Math.max(320, 250 + Math.min(actualMakers - 14, 8) * 18);
+      const halfW = width / 2;
+      const halfH = height / 2;
+      const perimeter = width * 2 + height * 2;
+      const svgWidth = Math.round(width + labelPad * 2);
+      const svgHeight = Math.round(height + labelPad * 2);
+      const centerX = svgWidth / 2;
+      const centerY = svgHeight / 2;
+      const step = perimeter / totalNodes;
+      const positions = Array.from({ length: totalNodes }, (_, i) => {
+        const point = getRectPoint(step * i, width, height);
+        return {
+          x: centerX + point.x,
+          y: centerY + point.y,
+        };
+      });
+
+      const x = centerX - halfW;
+      const y = centerY - halfH;
+      const guideMarkup = `<rect x="${x}" y="${y}" width="${width}" height="${height}"
+                fill="none" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="7 7" opacity="0.6"/>`;
+
+      return {
+        centerX,
+        centerY,
+        svgWidth,
+        svgHeight,
+        positions,
+        guideMarkup,
+      };
+    }
+
+    const { centerX, centerY, svgWidth, svgHeight, positions, guideMarkup } =
+      buildAdaptiveLayout();
 
     return `
-      <div class="overflow-x-auto">
-        <div class="grid items-center gap-4 min-w-max" style="grid-template-columns: repeat(${columns}, minmax(0, auto));">
-          ${flowItems.join('')}
-        </div>
+      <div class="flex items-center justify-center overflow-auto">
+        <svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}" class="mx-auto max-w-full">
+          <defs>
+            ${Array.from({ length: totalNodes }, (_, i) => {
+              const color = i < actualMakers ? makerColors[i % makerColors.length] : '#10B981';
+              return `<marker id="r-arrow-${i}" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
+                <polygon points="0 0, 8 3, 0 6" fill="${color}" opacity="0.9"/>
+              </marker>`;
+            }).join('')}
+            <filter id="r-glow-you" x="-50%" y="-50%" width="200%" height="200%">
+              <feGaussianBlur stdDeviation="5" result="blur"/>
+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+          </defs>
+
+          <!-- Guide path -->
+          ${guideMarkup}
+
+          <!-- Arrows -->
+          ${positions.map((pos, i) => {
+            const nextPos = positions[(i + 1) % positions.length];
+            const color = i < actualMakers ? makerColors[i % makerColors.length] : '#10B981';
+            const fromHalf = i === 0 ? youHalf : makerHalf;
+            const toHalf = (i + 1) % positions.length === 0 ? youHalf : makerHalf;
+            const dx = nextPos.x - pos.x;
+            const dy = nextPos.y - pos.y;
+            const len = Math.sqrt(dx * dx + dy * dy);
+            const sx = pos.x + (dx / len) * (fromHalf + 4);
+            const sy = pos.y + (dy / len) * (fromHalf + 4);
+            const ex = nextPos.x - (dx / len) * (toHalf + 10);
+            const ey = nextPos.y - (dy / len) * (toHalf + 10);
+            return `<line x1="${sx.toFixed(1)}" y1="${sy.toFixed(1)}" x2="${ex.toFixed(1)}" y2="${ey.toFixed(1)}"
+                          stroke="${color}" stroke-width="2" marker-end="url(#r-arrow-${i})" opacity="0.75"/>`;
+          }).join('')}
+
+          <!-- You node (completed — green) -->
+          <g>
+            <rect x="${(positions[0].x - youHalf).toFixed(1)}" y="${(positions[0].y - youHalf).toFixed(1)}"
+                  width="${youHalf * 2}" height="${youHalf * 2}" rx="${youRx}"
+                  fill="#10B981" filter="url(#r-glow-you)"/>
+            <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youFont * 0.38).toFixed(1)}"
+                  text-anchor="middle" fill="white" font-size="${youFont}" font-weight="bold">You</text>
+            <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youHalf + 17).toFixed(1)}"
+                  text-anchor="middle" fill="#6EE7B7" font-size="${Math.max(8, youFont - 12)}">Completed ✓</text>
+          </g>
+
+          <!-- Maker nodes (clickable) -->
+          ${Array.from({ length: actualMakers }, (_, i) => {
+            const pos = positions[i + 1];
+            const color = makerColors[i % makerColors.length];
+            const addr = report.makerAddresses[i] || '';
+            const shortAddr = addr ? truncateAddress(addr, 6, 4) : '';
+            return `<g class="maker-node cursor-pointer" data-maker-index="${i}"
+                       style="transition: opacity 0.2s;">
+              <rect x="${(pos.x - makerHalf).toFixed(1)}" y="${(pos.y - makerHalf).toFixed(1)}"
+                    width="${makerHalf * 2}" height="${makerHalf * 2}" rx="${makerRx}" fill="${color}"/>
+              <text x="${pos.x.toFixed(1)}" y="${(pos.y + makerFont * 0.38).toFixed(1)}"
+                    text-anchor="middle" fill="white" font-size="${makerFont}" font-weight="bold">M${i + 1}</text>
+              ${actualMakers <= 10 ? `
+              <text x="${pos.x.toFixed(1)}" y="${(pos.y + makerHalf + 14).toFixed(1)}"
+                    text-anchor="middle" fill="#9CA3AF" font-size="${Math.max(7, makerFont - 3)}">${shortAddr}</text>
+              ` : ''}
+            </g>`;
+          }).join('')}
+
+          ${isV2Swap ? `
+            <text x="${centerX}" y="${centerY}" text-anchor="middle" fill="#6B7280" font-size="11" font-weight="bold">Taproot V2</text>
+            <text x="${centerX}" y="${centerY + 15}" text-anchor="middle" fill="#4B5563" font-size="9">MuSig2</text>
+          ` : ''}
+        </svg>
       </div>
     `;
   }
@@ -543,9 +834,13 @@ export function SwapReportComponent(container, swapReport) {
   50% { opacity: 1; }
 }
 
+.maker-node {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
 .maker-node:hover {
-  z-index: 20 !important;
-  transform: scale(1.15) !important;
+  filter: brightness(1.08);
 }
       
       .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
@@ -559,10 +854,6 @@ export function SwapReportComponent(container, swapReport) {
         transform: scale(1.02);
       }
       
-      .maker-node:hover {
-        z-index: 10;
-      }
-      
       /* Tooltip styles */
       .tooltip-trigger {
         position: relative;
diff --git a/src/components/wallet/Wallet.js b/src/components/wallet/Wallet.js
index ad7fa31..08dd5bc 100644
--- a/src/components/wallet/Wallet.js
+++ b/src/components/wallet/Wallet.js
@@ -53,6 +53,7 @@ export async function WalletComponent(container) {
   async function fetchBalance() {
     try {
       const data = await window.api.taker.getBalance();
+      console.log('💳 Wallet balance API response:', data);
 
       if (data.success) {
         return data.balance;
@@ -169,6 +170,7 @@ export async function WalletComponent(container) {
     try {
       // Use cached data if requested
       if (useCache && cached && cached.balance) {
+        console.log('💳 Wallet balance from cache:', cached.balance);
         content.querySelector('#regular-balance').textContent =
           satsToBtc(cached.balance.regular) + ' BTC';
         content.querySelector('#swap-balance').textContent =
@@ -183,6 +185,7 @@ export async function WalletComponent(container) {
 
       // Fetch fresh data
       const balance = await fetchBalance();
+      console.log('💳 Wallet balance used by UI:', balance);
 
       content.querySelector('#regular-balance').textContent =
         satsToBtc(balance.regular) + ' BTC';
diff --git a/src/js/app.js b/src/js/app.js
index 1052931..c5ef83e 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -322,39 +322,197 @@ async function showPasswordPrompt(config) {
  * Used on launch so the user sees makers as soon as the app opens.
  */
 async function performLaunchSync(onComplete) {
+  const escapeHtml = (value) => {
+    const div = document.createElement('div');
+    div.textContent = value || '';
+    return div.innerHTML;
+  };
+
+  const parseLogLine = (line) => {
+    const match = line.match(
+      /^(\d{4}-\d{2}-\d{2}T[\d:.]+)[^\s]*\s+(INFO|WARN|ERROR|DEBUG|TRACE)\s+(.+)$/
+    );
+    if (!match) {
+      return {
+        timestamp: Date.now(),
+        type: 'info',
+        message: line,
+      };
+    }
+
+    return {
+      timestamp: new Date(match[1]).getTime(),
+      type: match[2].toLowerCase(),
+      message: match[3],
+    };
+  };
+
+  const getTypeColor = (type) => {
+    switch (type) {
+      case 'error':
+        return 'text-red-400';
+      case 'warn':
+        return 'text-yellow-400';
+      case 'debug':
+        return 'text-blue-400';
+      case 'trace':
+        return 'text-purple-400';
+      default:
+        return 'text-green-400';
+    }
+  };
+
+  const formatTime = (timestamp) =>
+    new Date(timestamp).toLocaleTimeString('en-US', { hour12: false });
+
   const overlay = document.createElement('div');
   overlay.id = 'launch-sync-overlay';
   overlay.className = 'fixed inset-0 bg-[#0f1419] flex items-center justify-center z-50';
   overlay.innerHTML = `
-    <div class="bg-[#1a2332] rounded-lg max-w-md w-full mx-4 p-8 text-center">
-      <div class="w-16 h-16 bg-[#FF6B35]/20 rounded-full flex items-center justify-center mx-auto mb-4">
+    <div class="bg-[#1a2332] rounded-lg max-w-3xl w-full mx-4 p-8 border border-[#FF6B35]/10 shadow-2xl">
+      <div class="text-center mb-6">
+        <div class="w-16 h-16 bg-[#FF6B35]/20 rounded-full flex items-center justify-center mx-auto mb-4">
         <span class="text-3xl animate-spin inline-block">⏳</span>
+        </div>
+        <h2 class="text-xl font-bold text-white mb-2">Syncing Market Data</h2>
+        <p class="text-gray-400 text-sm mb-4">Discovering available makers via Tor. This may take a minute...</p>
+        <p id="launch-sync-status" class="text-xs uppercase tracking-[0.2em] text-[#FF6B35]">Starting offerbook sync...</p>
+      </div>
+
+      <div class="bg-gray-700 rounded-full h-2 overflow-hidden">
+        <div id="launch-sync-progress" class="bg-[#FF6B35] h-2 rounded-full transition-all duration-500" style="width: 18%"></div>
       </div>
-      <h2 class="text-xl font-bold text-white mb-2">Syncing Market Data</h2>
-      <p class="text-gray-400 text-sm mb-4">Discovering available makers via Tor. This may take a minute...</p>
-      <div class="bg-gray-700 rounded-full h-2">
-        <div class="bg-[#FF6B35] h-2 rounded-full animate-pulse" style="width: 60%"></div>
+
+      <div class="mt-6 bg-[#0f1419] rounded-xl border border-white/5 overflow-hidden">
+        <div class="flex items-center justify-between px-4 py-3 border-b border-white/5">
+          <div>
+            <p class="text-sm font-semibold text-white">Live sync logs</p>
+            <p class="text-xs text-gray-500">Latest coinswap and backend activity during startup</p>
+          </div>
+          <span id="launch-sync-log-count" class="text-xs text-gray-500">0 lines</span>
+        </div>
+        <div id="launch-sync-log-output" class="h-64 overflow-y-auto px-4 py-3 font-mono text-xs text-left"></div>
       </div>
     </div>
   `;
   document.body.appendChild(overlay);
 
+  const logOutput = overlay.querySelector('#launch-sync-log-output');
+  const logCount = overlay.querySelector('#launch-sync-log-count');
+  const statusLabel = overlay.querySelector('#launch-sync-status');
+  const progressBar = overlay.querySelector('#launch-sync-progress');
+  const syncStartedAt = Date.now();
+  let logPoll = null;
+
+  function renderLogs(logs) {
+    if (!logOutput) return;
+
+    if (logCount) {
+      logCount.textContent = `${logs.length} ${logs.length === 1 ? 'line' : 'lines'}`;
+    }
+
+    if (logs.length === 0) {
+      logOutput.innerHTML =
+        '<div class="text-gray-500 text-center py-12">Waiting for startup logs...</div>';
+      return;
+    }
+
+    logOutput.innerHTML = logs
+      .map((log) => {
+        return `
+          <div class="mb-1 rounded px-2 py-1 hover:bg-white/5">
+            <span class="text-gray-500">[${formatTime(log.timestamp)}]</span>
+            <span class="${getTypeColor(log.type)}">[${log.type.toUpperCase()}]</span>
+            <span class="text-gray-300">${escapeHtml(log.message)}</span>
+          </div>
+        `;
+      })
+      .join('');
+    logOutput.scrollTop = logOutput.scrollHeight;
+  }
+
+  async function refreshLaunchLogs() {
+    try {
+      const data = await window.api.logs.get(120);
+      if (!data.success || !Array.isArray(data.logs)) return;
+
+      const recentLogs = data.logs
+        .map(parseLogLine)
+        .filter((log) => log.timestamp >= syncStartedAt - 5000)
+        .slice(-50);
+
+      renderLogs(recentLogs);
+    } catch (error) {
+      console.error('Failed to refresh launch sync logs:', error);
+    }
+  }
+
   try {
+    await refreshLaunchLogs();
+    logPoll = setInterval(refreshLaunchLogs, 1500);
+
     const syncResult = await window.api.taker.syncOfferbookAndWait();
     if (syncResult.success) {
+      if (statusLabel) statusLabel.textContent = 'Offerbook sync in progress...';
+      if (progressBar) progressBar.style.width = '52%';
+
       const syncId = syncResult.syncId;
       await new Promise((resolve) => {
         const poll = setInterval(async () => {
           try {
             const status = await window.api.taker.getSyncStatus(syncId);
-            const done = !status.success || status.sync.status === 'completed' || status.sync.status === 'failed';
-            if (done) { clearInterval(poll); resolve(); }
-          } catch { clearInterval(poll); resolve(); }
+            const sync = status.sync || {};
+            const syncStatus = sync.status || 'syncing';
+            const syncMessage =
+              sync.message ||
+              (syncStatus === 'completed'
+                ? 'Offerbook ready'
+                : syncStatus === 'failed'
+                  ? 'Sync failed'
+                  : 'Syncing offerbook...');
+
+            if (statusLabel) statusLabel.textContent = syncMessage;
+            if (progressBar) {
+              const nextWidth =
+                typeof sync.progress === 'number'
+                  ? Math.max(18, Math.min(100, sync.progress))
+                  : syncStatus === 'completed'
+                    ? 100
+                    : syncStatus === 'failed'
+                      ? 100
+                      : 76;
+              progressBar.style.width = `${nextWidth}%`;
+            }
+
+            const done =
+              !status.success ||
+              syncStatus === 'completed' ||
+              syncStatus === 'failed';
+            if (done) {
+              clearInterval(poll);
+              resolve();
+            }
+          } catch (err) {
+            console.error('Sync polling error:', err);
+            clearInterval(poll);
+            resolve();
+          }
         }, 1000);
       });
+    } else {
+      if (statusLabel) {
+        statusLabel.textContent =
+          syncResult.error || 'Unable to start offerbook sync';
+      }
+      if (progressBar) progressBar.style.width = '100%';
     }
   } catch (err) {
     console.warn('⚠️ Launch offerbook sync error:', err.message);
+    if (statusLabel) statusLabel.textContent = 'Offerbook sync hit an issue';
+    if (progressBar) progressBar.style.width = '100%';
+  } finally {
+    if (logPoll) clearInterval(logPoll);
+    await refreshLaunchLogs();
   }
 
   overlay.remove();
diff --git a/src/styles/output.css b/src/styles/output.css
index 612b70f..850dc38 100644
--- a/src/styles/output.css
+++ b/src/styles/output.css
@@ -28,7 +28,6 @@
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-purple-300: oklch(82.7% 0.119 306.383);
     --color-purple-400: oklch(71.4% 0.203 305.504);
     --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -44,8 +43,8 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --container-5xl: 64rem;
-    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -67,13 +66,10 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
-    --font-weight-black: 900;
     --tracking-wide: 0.025em;
-    --tracking-wider: 0.05em;
     --leading-relaxed: 1.625;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
-    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -437,8 +433,8 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-40 {
-    height: calc(var(--spacing) * 40);
+  .h-36 {
+    height: calc(var(--spacing) * 36);
   }
   .h-64 {
     height: calc(var(--spacing) * 64);
@@ -452,6 +448,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-28 {
+    max-height: calc(var(--spacing) * 28);
+  }
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
@@ -515,12 +514,12 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
-  .max-w-6xl {
-    max-width: var(--container-6xl);
-  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
@@ -530,18 +529,15 @@
   .max-w-\[200px\] {
     max-width: 200px;
   }
+  .max-w-full {
+    max-width: 100%;
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-\[180px\] {
-    min-width: 180px;
-  }
-  .min-w-max {
-    min-width: max-content;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -588,9 +584,6 @@
   .grid-cols-8 {
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
-  .grid-cols-\[1\.7fr_0\.9fr_1fr_1fr_1fr_1\.25fr\] {
-    grid-template-columns: 1.7fr 0.9fr 1fr 1fr 1fr 1.25fr;
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -615,6 +608,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -717,11 +713,6 @@
       border-color: var(--color-gray-700);
     }
   }
-  .divide-gray-800 {
-    :where(& > :not(:last-child)) {
-      border-color: var(--color-gray-800);
-    }
-  }
   .self-center {
     align-self: center;
   }
@@ -796,6 +787,9 @@
   .border-\[\#FF6B35\] {
     border-color: #FF6B35;
   }
+  .border-\[\#FF6B35\]\/10 {
+    border-color: color-mix(in oklab, #FF6B35 10%, transparent);
+  }
   .border-\[\#FF6B35\]\/20 {
     border-color: color-mix(in oklab, #FF6B35 20%, transparent);
   }
@@ -844,6 +838,12 @@
   .border-orange-400 {
     border-color: var(--color-orange-400);
   }
+  .border-orange-500\/20 {
+    border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
+    }
+  }
   .border-orange-500\/30 {
     border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -865,12 +865,21 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-white\/5 {
+    border-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
   .border-yellow-500\/30 {
     border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
     }
   }
+  .bg-\[\#0a0f16\] {
+    background-color: #0a0f16;
+  }
   .bg-\[\#0f1419\] {
     background-color: #0f1419;
   }
@@ -988,12 +997,21 @@
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
+  .bg-orange-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
   .bg-orange-500\/20 {
     background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
     }
   }
+  .bg-purple-400 {
+    background-color: var(--color-purple-400);
+  }
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
@@ -1105,6 +1123,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1243,6 +1264,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.2em\] {
+    --tw-tracking: 0.2em;
+    letter-spacing: 0.2em;
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -1381,6 +1406,10 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1586,6 +1615,16 @@
       }
     }
   }
+  .hover\:bg-white\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-\[\#10B981\] {
     &:hover {
       @media (hover: hover) {
@@ -1621,6 +1660,13 @@
       }
     }
   }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:text-purple-300 {
     &:hover {
       @media (hover: hover) {
@@ -1649,13 +1695,6 @@
       }
     }
   }
-  .hover\:opacity-80 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 80%;
-      }
-    }
-  }
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
@@ -1748,12 +1787,6 @@
       grid-template-columns: 1.5fr 1fr;
     }
   }
-  .xl\:text-2xl {
-    @media (width >= 80rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
 }
 @font-face {
   font-family: 'JetBrains Mono';