diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 345fba54..bb2a0522 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -38,11 +38,15 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   e2e:
-    name: E2E Tests
+    name: E2E Tests (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: ubuntu-latest
     timeout-minutes: 15
     permissions:
       contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3]
 
     steps:
       - name: Clone repository
@@ -54,6 +58,17 @@ jobs:
       - name: Setup pnpm
         run: corepack enable pnpm
 
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.dir }}
+          key: pnpm-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: pnpm-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install
 
@@ -77,12 +92,12 @@ jobs:
         run: pnpm exec playwright install-deps chromium
 
       - name: Run Playwright tests
-        run: pnpm run test:e2e
+        run: pnpm run test:e2e --shard=${{ matrix.shard }}/3
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.shard }}
           path: playwright-report/
           retention-days: 15
diff --git a/biome.json b/biome.json
index 933e82b6..b1b81b1d 100644
--- a/biome.json
+++ b/biome.json
@@ -40,6 +40,14 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": ["**", "!dist", "!node_modules", "!specs/lib", "!src/snippets/unformatted"]
+    "includes": [
+      "**",
+      "!dist",
+      "!node_modules",
+      "!playwright-report",
+      "!specs/lib",
+      "!src/snippets/unformatted",
+      "!test-results"
+    ]
   }
 }
diff --git a/e2e/create-a-stablecoin.test.ts b/e2e/create-a-stablecoin.test.ts
new file mode 100644
index 00000000..de36c52f
--- /dev/null
+++ b/e2e/create-a-stablecoin.test.ts
@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test'
+
+test('create a stablecoin', async ({ page }) => {
+  test.setTimeout(120000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/create-a-stablecoin')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  // Wait for "Add more funds" button (indicates funds were added)
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Fill in token details and deploy
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('TestUSD')
+
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('TEST')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
+  await deployButton.click()
+
+  // Wait for success - View receipt link
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/distribute-rewards.test.ts b/e2e/distribute-rewards.test.ts
new file mode 100644
index 00000000..39ae4275
--- /dev/null
+++ b/e2e/distribute-rewards.test.ts
@@ -0,0 +1,110 @@
+import { expect, test } from '@playwright/test'
+
+test('distribute rewards', async ({ page }) => {
+  test.setTimeout(240000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/distribute-rewards')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('RewardTestUSD')
+
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('REWARD')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens (after grant completes, Enter details button is the first visible one)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await mintButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 6: Opt in to rewards
+  const optInButton = page.getByRole('button', { name: 'Opt In' }).first()
+  await expect(optInButton).toBeVisible()
+  await optInButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(3)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 7: Start reward
+  const startButton = page.getByRole('button', { name: 'Start Reward' }).first()
+  await expect(startButton).toBeVisible()
+  await startButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(4)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 8: Claim reward
+  const claimButton = page.getByRole('button', { name: 'Claim' }).first()
+  await expect(claimButton).toBeVisible()
+  await claimButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(5)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/executing-swaps.test.ts b/e2e/executing-swaps.test.ts
new file mode 100644
index 00000000..264d02d2
--- /dev/null
+++ b/e2e/executing-swaps.test.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test'
+
+test('executing swaps', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/stablecoin-dex/executing-swaps')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Execute a swap (Buy AlphaUSD with BetaUSD)
+  const buyButton = page.getByRole('button', { name: 'Buy' }).first()
+  await expect(buyButton).toBeVisible()
+  await buyButton.click()
+
+  // Wait for swap receipt
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/faucet.spec.ts b/e2e/faucet.test.ts
similarity index 73%
rename from e2e/faucet.spec.ts
rename to e2e/faucet.test.ts
index dceb26c4..b862fc8c 100644
--- a/e2e/faucet.spec.ts
+++ b/e2e/faucet.test.ts
@@ -1,10 +1,14 @@
 import { expect, test } from '@playwright/test'
 
 test('fund an address via faucet', async ({ page }) => {
+  test.setTimeout(120000)
+
   await page.goto('/quickstart/faucet')
 
   // Switch to "Fund an address" tab
-  await page.getByRole('tab', { name: 'Fund an address' }).click()
+  const tab = page.getByRole('tab', { name: 'Fund an address' })
+  await expect(tab).toBeVisible({ timeout: 90000 })
+  await tab.click()
 
   // Enter an address
   const addressInput = page.getByPlaceholder('0x...')
@@ -14,5 +18,5 @@ test('fund an address via faucet', async ({ page }) => {
   await page.getByRole('button', { name: 'Add funds' }).click()
 
   // Confirm "View receipt" link is visible
-  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 30000 })
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
 })
diff --git a/e2e/manage-stablecoin.test.ts b/e2e/manage-stablecoin.test.ts
new file mode 100644
index 00000000..8aa13c4d
--- /dev/null
+++ b/e2e/manage-stablecoin.test.ts
@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test'
+
+test('manage stablecoin - grant and revoke roles', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/manage-stablecoin')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('ManageTestUSD')
+
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('MANAGE')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await expect(grantButton).toBeVisible()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Revoke issuer role (now the first visible Enter details)
+  const revokeEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(revokeEnterDetails).toBeVisible()
+  await revokeEnterDetails.click()
+
+  const revokeButton = page.getByRole('button', { name: 'Revoke' }).first()
+  await expect(revokeButton).toBeVisible()
+  await revokeButton.click()
+
+  // Wait for revoke receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/mint-stablecoins.test.ts b/e2e/mint-stablecoins.test.ts
new file mode 100644
index 00000000..05c2ac98
--- /dev/null
+++ b/e2e/mint-stablecoins.test.ts
@@ -0,0 +1,88 @@
+import { expect, test } from '@playwright/test'
+
+test('mint stablecoins', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/mint-stablecoins')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token (fill form and deploy)
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('MintTestUSD')
+
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('MINT')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
+  await deployButton.click()
+
+  // Wait for token to be created (View receipt appears)
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role - click "Enter details" then "Grant"
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await expect(grantButton).toBeVisible()
+  await grantButton.click()
+
+  // Wait for grant receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens - click "Enter details" then "Mint" (now the first visible Enter details)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await expect(mintButton).toBeVisible()
+  await mintButton.click()
+
+  // Wait for mint receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/passkey-accounts.test.ts b/e2e/passkey-accounts.test.ts
new file mode 100644
index 00000000..0503f280
--- /dev/null
+++ b/e2e/passkey-accounts.test.ts
@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test'
+
+test('sign up, sign out, then sign in with passkey', async ({ page }) => {
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/use-accounts/embed-passkeys')
+
+  // Wait for the demo to load
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+
+  // Sign up with passkey
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  const signOutButton = page.getByRole('button', { name: 'Sign out' }).first()
+  await expect(signOutButton).toBeVisible({ timeout: 30000 })
+
+  // Sign out
+  await signOutButton.click()
+
+  // Wait for sign in button to reappear
+  const signInButton = page.getByRole('button', { name: 'Sign in' }).first()
+  await expect(signInButton).toBeVisible({ timeout: 10000 })
+
+  // Sign in with the same passkey
+  await signInButton.click()
+
+  // Confirm signed in again (sign out button visible)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/providing-liquidity.test.ts b/e2e/providing-liquidity.test.ts
new file mode 100644
index 00000000..3967c2eb
--- /dev/null
+++ b/e2e/providing-liquidity.test.ts
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+
+test('providing liquidity - place and query order', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/stablecoin-dex/providing-liquidity')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Place order
+  const placeOrderButton = page.getByRole('button', { name: 'Place order' }).first()
+  await expect(placeOrderButton).toBeVisible()
+  await placeOrderButton.click()
+
+  // Wait for order to be placed - should see View receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Query order - button should become enabled after placing
+  const queryButton = page.getByRole('button', { name: 'Query' }).first()
+  await expect(queryButton).toBeEnabled({ timeout: 30000 })
+  await queryButton.click()
+
+  // Wait for order details to show (order type indicator)
+  await expect(page.getByText('Buy').first()).toBeVisible({ timeout: 30000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/send-a-payment.test.ts b/e2e/send-a-payment.test.ts
new file mode 100644
index 00000000..8049bfdd
--- /dev/null
+++ b/e2e/send-a-payment.test.ts
@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test'
+
+test('send a payment', async ({ page }) => {
+  test.setTimeout(120000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/payments/send-a-payment')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  // Wait for "Add more funds" button (indicates funds were added)
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Send payment
+  const enterDetailsButton = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(enterDetailsButton).toBeVisible()
+  await enterDetailsButton.click()
+
+  // Fill in optional memo
+  const memoInput = page.getByLabel('Memo (optional)').first()
+  await expect(memoInput).toBeVisible()
+  await memoInput.fill('test-memo')
+
+  // Click send
+  const sendButton = page.getByRole('button', { name: 'Send' }).first()
+  await sendButton.click()
+
+  // Wait for transaction receipt link
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/use-for-fees.test.ts b/e2e/use-for-fees.test.ts
new file mode 100644
index 00000000..5a6df28d
--- /dev/null
+++ b/e2e/use-for-fees.test.ts
@@ -0,0 +1,105 @@
+import { expect, test } from '@playwright/test'
+
+test('use stablecoin for fees', async ({ page }) => {
+  test.setTimeout(240000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/use-for-fees')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('FeeTestUSD')
+
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('FEE')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens (after grant completes, Enter details button is the first visible one)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await mintButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 6: Add fee AMM liquidity
+  const addLiquidityButton = page.getByRole('button', { name: 'Add Liquidity' }).first()
+  await expect(addLiquidityButton).toBeVisible()
+  await addLiquidityButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(3)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 7: Send payment using token as fee (now the only Enter details button visible)
+  const payEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(payEnterDetails).toBeVisible()
+  await payEnterDetails.click()
+
+  const sendButton = page.getByRole('button', { name: 'Send' }).first()
+  await expect(sendButton).toBeVisible()
+  await sendButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(4)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/playwright.config.ts b/playwright.config.ts
index 3b060a86..8c52ede9 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -4,8 +4,9 @@ export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  retries: process.env.CI ? 1 : 1, // Retry once due to testnet flakiness
+  workers: process.env.CI ? 4 : undefined,
+  timeout: 180000, // 3 min default timeout for testnet transactions
   reporter: 'html',
   use: {
     baseURL: 'http://localhost:5173',
@@ -18,8 +19,10 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'pnpm run dev',
+    command: 'pnpm run dev 2>/dev/null',
     url: 'http://localhost:5173',
     reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'ignore',
   },
 })
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 93ace37d..3b121866 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -17,7 +17,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
   const isSupported = chains.some((c) => c.id === chain?.id)
   if (!injectedConnectors.length)
     return (
-      <div className="-tracking-[2%] flex items-center text-[14px]">No browser wallets found.</div>
+      <div className="flex items-center text-[14px] -tracking-[2%]">No browser wallets found.</div>
     )
   if (!address || connector?.id === 'webAuthn')
     return (
@@ -64,7 +64,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
         </Button>
       )}
       {switchChain.isSuccess && (
-        <div className="-tracking-[2%] flex items-center font-normal text-[14px]">
+        <div className="flex items-center font-normal text-[14px] -tracking-[2%]">
           Added Tempo to {connector?.name ?? 'Wallet'}!
         </div>
       )}
diff --git a/src/components/IndexSupplyQuery.tsx b/src/components/IndexSupplyQuery.tsx
index ac18c85c..ceac85cb 100644
--- a/src/components/IndexSupplyQuery.tsx
+++ b/src/components/IndexSupplyQuery.tsx
@@ -246,7 +246,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
   return (
     <Container
       headerLeft={
-        <h4 className="-tracking-[1%] font-normal text-[14px] text-gray12 leading-none">
+        <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
           {props.title || 'IndexSupply SQL Query'}
         </h4>
       }
@@ -325,7 +325,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
         </div>
 
         {error && (
-          <div className="-tracking-[2%] rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal">
+          <div className="rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal -tracking-[2%]">
             {error}
           </div>
         )}
diff --git a/src/components/TokenSelector.tsx b/src/components/TokenSelector.tsx
index df4fff2b..eca9ac78 100644
--- a/src/components/TokenSelector.tsx
+++ b/src/components/TokenSelector.tsx
@@ -29,7 +29,7 @@ export function TokenSelector(props: TokenSelectorProps) {
       name={name}
       value={value}
       onChange={(e) => onChange(e.target.value as Address)}
-      className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black dark:text-white"
+      className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] dark:text-white"
     >
       {tokens.map((token) => (
         <TokenOption key={token} token={token} />
diff --git a/src/components/guides/Demo.tsx b/src/components/guides/Demo.tsx
index fc26a485..a0f7c33b 100644
--- a/src/components/guides/Demo.tsx
+++ b/src/components/guides/Demo.tsx
@@ -51,7 +51,7 @@ export function ExplorerLink({ hash }: { hash: string }) {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="-tracking-[1%] flex items-center gap-1 text-[13px] text-accent hover:underline"
+        className="flex items-center gap-1 text-[13px] text-accent -tracking-[1%] hover:underline"
         onClick={() => trackExternalLinkClick(url, 'View receipt')}
       >
         View receipt
@@ -71,7 +71,7 @@ export function ExplorerAccountLink({ address }: { address: string }) {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="-tracking-[1%] flex items-center gap-1 text-[13px] text-accent hover:underline"
+        className="flex items-center gap-1 text-[13px] text-accent -tracking-[1%] hover:underline"
         onClick={() => trackExternalLinkClick(url, 'View account')}
       >
         View account
@@ -142,7 +142,7 @@ export function Container(
     <ParentContainer
       headerLeft={
         <div className="flex items-center gap-1.5">
-          <h4 className="-tracking-[1%] font-normal text-[14px] text-gray12 leading-none">
+          <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
             {name}
           </h4>
           {showBadge && (
@@ -322,7 +322,7 @@ export function Step(
           >
             {completed ? <LucideCheck className="text-green9" /> : number}
           </div>
-          <div className="-tracking-[1%] text-[14px] text-black group-data-[active=false]:opacity-40 dark:text-white">
+          <div className="text-[14px] text-black -tracking-[1%] group-data-[active=false]:opacity-40 dark:text-white">
             {title}
           </div>
         </div>
@@ -334,7 +334,7 @@ export function Step(
       {error && (
         <>
           <div className="h-2" />
-          <div className="-tracking-[2%] rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal">
+          <div className="rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal -tracking-[2%]">
             {'shortMessage' in error ? error.shortMessage : error.message}
           </div>
         </>
@@ -376,7 +376,7 @@ export function Login() {
         <div className="flex gap-1">
           <Button
             variant="accent"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() => connect.connect({ connector })}
             type="button"
           >
@@ -384,7 +384,7 @@ export function Login() {
           </Button>
           <Button
             variant="default"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() =>
               connect.connect({
                 connector,
@@ -432,7 +432,7 @@ export function Logout() {
       </Button>
       <Button
         variant="destructive"
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         onClick={() => {
           disconnect.disconnect({ connector })
           trackButtonClick('Sign out', 'destructive')
@@ -478,7 +478,7 @@ const buttonClassName = cva({
       true: 'pointer-events-none opacity-50',
     },
     size: {
-      default: '-tracking-[2%] h-[32px] px-[14px] text-[14px]',
+      default: 'h-[32px] px-[14px] text-[14px] -tracking-[2%]',
     },
     static: {
       true: 'pointer-events-none',
diff --git a/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx b/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
index 0ec22002..0ab6ac15 100644
--- a/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
+++ b/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
@@ -72,7 +72,7 @@ export function BurnFeeAmmLiquidity(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           Burn Liquidity
         </Button>
diff --git a/src/components/guides/steps/amm/CheckFeeAmmPool.tsx b/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
index f644cd69..050307ff 100644
--- a/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
+++ b/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
@@ -49,7 +49,7 @@ export function CheckFeeAmmPool(props: DemoStepProps) {
       {active && pool && lpBalance && (
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Your LP Balance</span>
diff --git a/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx b/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
index 724e3c21..e8cf3b95 100644
--- a/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
+++ b/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
@@ -115,7 +115,7 @@ export function MintFeeAmmLiquidity(props: DemoStepProps & { waitForBalance?: bo
           disabled={!active || mintFeeLiquidity.isPending}
           onClick={handleMintAll}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {mintFeeLiquidity.isPending
             ? 'Adding...'
diff --git a/src/components/guides/steps/exchange/ApproveSpend.tsx b/src/components/guides/steps/exchange/ApproveSpend.tsx
index a8e60173..3205d9e7 100644
--- a/src/components/guides/steps/exchange/ApproveSpend.tsx
+++ b/src/components/guides/steps/exchange/ApproveSpend.tsx
@@ -43,7 +43,7 @@ export function ApproveSpend(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {approve.isPending ? 'Approving...' : 'Approve Spend'}
         </Button>
diff --git a/src/components/guides/steps/exchange/BuySwap.tsx b/src/components/guides/steps/exchange/BuySwap.tsx
index f02019c3..0648c0b5 100644
--- a/src/components/guides/steps/exchange/BuySwap.tsx
+++ b/src/components/guides/steps/exchange/BuySwap.tsx
@@ -76,7 +76,7 @@ export function BuySwap({ onSuccess }: { onSuccess?: () => void }) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Buying...' : 'Buy'}
         </Button>
diff --git a/src/components/guides/steps/exchange/CancelOrder.tsx b/src/components/guides/steps/exchange/CancelOrder.tsx
index 37159f2c..19923ad8 100644
--- a/src/components/guides/steps/exchange/CancelOrder.tsx
+++ b/src/components/guides/steps/exchange/CancelOrder.tsx
@@ -45,7 +45,7 @@ export function CancelOrder(props: DemoStepProps) {
             }
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {cancelOrder.isPending ? 'Canceling...' : 'Cancel Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/PlaceOrder.tsx b/src/components/guides/steps/exchange/PlaceOrder.tsx
index f8ff7378..c372fdda 100644
--- a/src/components/guides/steps/exchange/PlaceOrder.tsx
+++ b/src/components/guides/steps/exchange/PlaceOrder.tsx
@@ -78,7 +78,7 @@ export function PlaceOrder(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Placing Order...' : 'Place Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/QueryOrder.tsx b/src/components/guides/steps/exchange/QueryOrder.tsx
index 6e0255a0..75ae4db9 100644
--- a/src/components/guides/steps/exchange/QueryOrder.tsx
+++ b/src/components/guides/steps/exchange/QueryOrder.tsx
@@ -52,7 +52,7 @@ export function QueryOrder(props: DemoStepProps) {
           disabled={!active || isQuerying}
           onClick={handleQuery}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {isQuerying ? 'Querying...' : hasQueried ? 'Query Again' : 'Query Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/SellSwap.tsx b/src/components/guides/steps/exchange/SellSwap.tsx
index e705013f..8b52cd6a 100644
--- a/src/components/guides/steps/exchange/SellSwap.tsx
+++ b/src/components/guides/steps/exchange/SellSwap.tsx
@@ -76,7 +76,7 @@ export function SellSwap({ onSuccess }: { onSuccess?: () => void }) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Selling...' : 'Sell'}
         </Button>
diff --git a/src/components/guides/steps/issuance/BurnToken.tsx b/src/components/guides/steps/issuance/BurnToken.tsx
index 8f3b0ccc..0f3de823 100644
--- a/src/components/guides/steps/issuance/BurnToken.tsx
+++ b/src/components/guides/steps/issuance/BurnToken.tsx
@@ -73,7 +73,7 @@ export function BurnToken(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -84,7 +84,7 @@ export function BurnToken(props: DemoStepProps) {
             disabled={!canBurn}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -98,13 +98,14 @@ export function BurnToken(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
@@ -116,7 +117,7 @@ export function BurnToken(props: DemoStepProps) {
                 disabled={!address}
                 onClick={handleBurn}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {burn.isPending ? 'Burning...' : 'Burn'}
               </Button>
diff --git a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
index d09d5085..69eb8dc7 100644
--- a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
+++ b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
@@ -80,7 +80,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -91,7 +91,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -105,13 +105,14 @@ export function BurnTokenBlocked(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="blockedAddress">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="blockedAddress">
                   Blocked address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="blockedAddress"
                   name="blockedAddress"
                   value={FAKE_RECIPIENT}
                   disabled={true}
@@ -124,7 +125,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
                 disabled={!address}
                 onClick={handleBurnBlocked}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {burnBlocked.isPending ? 'Burning...' : 'Burn'}
               </Button>
diff --git a/src/components/guides/steps/issuance/CreateOrLoadToken.tsx b/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
index 054ef791..310c2d9a 100644
--- a/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
+++ b/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
@@ -41,7 +41,7 @@ export function CreateOrLoadToken(props: DemoStepProps) {
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div
             className={cx(
-              '-tracking-[2%] flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug',
+              'flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug -tracking-[2%]',
             )}
           >
             <div>
diff --git a/src/components/guides/steps/issuance/CreateToken.tsx b/src/components/guides/steps/issuance/CreateToken.tsx
index a0165287..e3e7d030 100644
--- a/src/components/guides/steps/issuance/CreateToken.tsx
+++ b/src/components/guides/steps/issuance/CreateToken.tsx
@@ -74,13 +74,14 @@ export function CreateToken(props: DemoStepProps) {
               className="-mt-2.5 flex flex-col gap-2 md:flex-row md:items-end"
             >
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="name">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="name">
                   Token name
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="name"
                   name="name"
                   required
                   spellCheck={false}
@@ -88,13 +89,14 @@ export function CreateToken(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="symbol">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="symbol">
                   Token symbol
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="symbol"
                   name="symbol"
                   required
                   spellCheck={false}
@@ -111,7 +113,7 @@ export function CreateToken(props: DemoStepProps) {
             <div className="relative">
               <div
                 className={cx(
-                  '-tracking-[2%] flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug',
+                  'flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug -tracking-[2%]',
                 )}
               >
                 <div>
diff --git a/src/components/guides/steps/issuance/CreateTokenPolicy.tsx b/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
index 48685d68..c3c81397 100644
--- a/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
+++ b/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
@@ -54,7 +54,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -65,7 +65,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -79,7 +79,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <div className="-tracking-[1%] mb-2 text-[13px] text-gray9">
+                <div className="mb-2 text-[13px] text-gray9 -tracking-[1%]">
                   This will create a blacklist policy that blocks {FAKE_RECIPIENT} from sending or
                   receiving tokens.
                 </div>
@@ -92,7 +92,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
                 onClick={handleCreatePolicy}
                 disabled={isCreating}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {isCreating ? 'Creating...' : 'Create Policy'}
               </Button>
diff --git a/src/components/guides/steps/issuance/GrantTokenRoles.tsx b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
index d2d53e48..20f71b1b 100644
--- a/src/components/guides/steps/issuance/GrantTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
@@ -76,7 +76,7 @@ export function GrantTokenRoles(
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -89,7 +89,7 @@ export function GrantTokenRoles(
             disabled={!tokenAddress || hasAllRoles}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -103,13 +103,14 @@ export function GrantTokenRoles(
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Grant role to yourself
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={address}
                   disabled={true}
@@ -122,7 +123,7 @@ export function GrantTokenRoles(
                 disabled={!address}
                 onClick={handleGrant}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {grant.isPending ? 'Granting...' : 'Grant'}
               </Button>
diff --git a/src/components/guides/steps/issuance/LinkTokenPolicy.tsx b/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
index bec1218b..c36b56c4 100644
--- a/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
+++ b/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
@@ -56,7 +56,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -67,7 +67,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
             disabled={!tokenAddress || !policyId || isComplete}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -81,7 +81,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <div className="-tracking-[1%] mb-2 text-[13px] text-gray9">
+                <div className="mb-2 text-[13px] text-gray9 -tracking-[1%]">
                   This will link the transfer policy to {metadata ? metadata.name : 'your token'},
                   enforcing the blacklist.
                 </div>
@@ -94,7 +94,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
                 onClick={handleLinkPolicy}
                 disabled={isLinking}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {isLinking ? 'Linking...' : 'Link Policy'}
               </Button>
diff --git a/src/components/guides/steps/issuance/MintToken.tsx b/src/components/guides/steps/issuance/MintToken.tsx
index 670816f1..73aaa0bf 100644
--- a/src/components/guides/steps/issuance/MintToken.tsx
+++ b/src/components/guides/steps/issuance/MintToken.tsx
@@ -74,7 +74,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -91,7 +91,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
             disabled={Boolean(!tokenAddress || !hasRole || hasSufficientBalance)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -105,13 +105,14 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient || address}
                   disabled={true}
@@ -120,13 +121,14 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
@@ -138,7 +140,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                 disabled={!address}
                 onClick={handleMint}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {mint.isPending ? 'Minting...' : 'Mint'}
               </Button>
diff --git a/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx b/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
index 7cca5510..8ae07bfe 100644
--- a/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
+++ b/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
@@ -80,7 +80,7 @@ export function PauseUnpauseTransfers(props: DemoStepProps) {
           disabled={!active || isProcessing}
           onClick={handleToggle}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {isProcessing ? 'Processing...' : paused ? 'Unpause' : 'Pause'}
         </Button>
diff --git a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
index 0b790973..4de80272 100644
--- a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
@@ -76,7 +76,7 @@ export function RevokeTokenRoles(
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -89,7 +89,7 @@ export function RevokeTokenRoles(
             disabled={!tokenAddress || !hasAnyRole}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -103,13 +103,14 @@ export function RevokeTokenRoles(
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Revoke role from yourself
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={address}
                   disabled={true}
@@ -122,7 +123,7 @@ export function RevokeTokenRoles(
                 disabled={!address}
                 onClick={handleRevoke}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {revoke.isPending ? 'Revoking...' : 'Revoke'}
               </Button>
diff --git a/src/components/guides/steps/issuance/SetSupplyCap.tsx b/src/components/guides/steps/issuance/SetSupplyCap.tsx
index ca394561..3a9e7de6 100644
--- a/src/components/guides/steps/issuance/SetSupplyCap.tsx
+++ b/src/components/guides/steps/issuance/SetSupplyCap.tsx
@@ -60,7 +60,7 @@ export function SetSupplyCap(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -71,7 +71,7 @@ export function SetSupplyCap(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -85,13 +85,14 @@ export function SetSupplyCap(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="supplyCap">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="supplyCap">
                   Supply cap amount
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="supplyCap"
                   name="supplyCap"
                   value="1,000"
                   disabled={true}
@@ -103,7 +104,7 @@ export function SetSupplyCap(props: DemoStepProps) {
                 disabled={!active}
                 onClick={handleSetSupplyCap}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {setSupplyCap.isPending ? 'Setting...' : 'Set Cap'}
               </Button>
diff --git a/src/components/guides/steps/payments/AddFunds.tsx b/src/components/guides/steps/payments/AddFunds.tsx
index ba4d0355..60a8129c 100644
--- a/src/components/guides/steps/payments/AddFunds.tsx
+++ b/src/components/guides/steps/payments/AddFunds.tsx
@@ -72,7 +72,7 @@ export function AddFunds(props: DemoStepProps) {
         <Button
           disabled={fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -83,7 +83,7 @@ export function AddFunds(props: DemoStepProps) {
       <Button
         disabled={!address || fundAccount.isPending}
         variant={address ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
diff --git a/src/components/guides/steps/payments/AddFundsToOthers.tsx b/src/components/guides/steps/payments/AddFundsToOthers.tsx
index 90400b0a..a210add3 100644
--- a/src/components/guides/steps/payments/AddFundsToOthers.tsx
+++ b/src/components/guides/steps/payments/AddFundsToOthers.tsx
@@ -86,7 +86,7 @@ export function AddFundsToOthers(props: DemoStepProps) {
         <Button
           disabled={!isValidTarget || fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -97,7 +97,7 @@ export function AddFundsToOthers(props: DemoStepProps) {
       <Button
         disabled={!isValidTarget || fundAccount.isPending}
         variant={isValidTarget ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
@@ -118,15 +118,16 @@ export function AddFundsToOthers(props: DemoStepProps) {
       <div className="mx-6 flex flex-col gap-3 pb-4">
         <div className="border-gray4 border-s-2 ps-5">
           <div className="mt-2 flex flex-col">
-            <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="fundAddress">
+            <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="fundAddress">
               Address to fund
             </label>
             <input
-              className="-tracking-[2%] h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+              className="h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
               autoCapitalize="none"
               autoComplete="off"
               autoCorrect="off"
               spellCheck={false}
+              id="fundAddress"
               name="fundAddress"
               placeholder="0x..."
               value={fundAddress ?? ''}
diff --git a/src/components/guides/steps/payments/PayWithFeeToken.tsx b/src/components/guides/steps/payments/PayWithFeeToken.tsx
index 6e497858..f4b5a896 100644
--- a/src/components/guides/steps/payments/PayWithFeeToken.tsx
+++ b/src/components/guides/steps/payments/PayWithFeeToken.tsx
@@ -95,7 +95,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -106,7 +106,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -119,7 +119,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
             {/* Token info display */}
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -147,13 +147,14 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -161,13 +162,14 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
@@ -179,7 +181,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                 disabled={!active}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/PayWithIssuedToken.tsx b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
index 60d1309c..da0020b2 100644
--- a/src/components/guides/steps/payments/PayWithIssuedToken.tsx
+++ b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
@@ -93,7 +93,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -104,7 +104,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -117,7 +117,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
             {/* Token info display */}
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -136,13 +136,14 @@ export function PayWithIssuedToken(props: DemoStepProps) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -150,13 +151,14 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
@@ -168,7 +170,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                 disabled={!active}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/SendParallelPayments.tsx b/src/components/guides/steps/payments/SendParallelPayments.tsx
index b631487a..d111fd84 100644
--- a/src/components/guides/steps/payments/SendParallelPayments.tsx
+++ b/src/components/guides/steps/payments/SendParallelPayments.tsx
@@ -145,7 +145,7 @@ export function SendParallelPayments(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -162,7 +162,7 @@ export function SendParallelPayments(props: DemoStepProps) {
             disabled={!(address && balance && balance >= parseUnits('100', 6))}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -177,13 +177,14 @@ export function SendParallelPayments(props: DemoStepProps) {
             <div className="mt-2 flex gap-3">
               <div className="flex flex-1 flex-col gap-2">
                 <div className="flex flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient1">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient1">
                     Recipient 1
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient1"
                     name="recipient1"
                     value={FAKE_RECIPIENT}
                     disabled
@@ -191,13 +192,14 @@ export function SendParallelPayments(props: DemoStepProps) {
                   />
                 </div>
                 <div className="flex flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient2">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient2">
                     Recipient 2
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient2"
                     name="recipient2"
                     value={FAKE_RECIPIENT_2}
                     disabled
@@ -213,7 +215,7 @@ export function SendParallelPayments(props: DemoStepProps) {
                   disabled={!(address && balance && balance >= parseUnits('100', 6)) || isSending}
                   onClick={handleSendParallel}
                   type="button"
-                  className="-tracking-[2%] font-normal text-[14px]"
+                  className="font-normal text-[14px] -tracking-[2%]"
                 >
                   {isSending ? 'Sending both...' : 'Send both payments'}
                 </Button>
diff --git a/src/components/guides/steps/payments/SendPayment.tsx b/src/components/guides/steps/payments/SendPayment.tsx
index 997ecb81..3f64a50e 100644
--- a/src/components/guides/steps/payments/SendPayment.tsx
+++ b/src/components/guides/steps/payments/SendPayment.tsx
@@ -68,7 +68,7 @@ export function SendPayment(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -85,7 +85,7 @@ export function SendPayment(props: DemoStepProps) {
             disabled={!(address && balance && balance > 0n)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -99,12 +99,13 @@ export function SendPayment(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
+                  id="recipient"
                   type="text"
                   name="recipient"
                   value={recipient}
@@ -113,17 +114,18 @@ export function SendPayment(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className={`-tracking-[2%] h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
+                  className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
+                  id="memo"
                   type="text"
                   name="memo"
                   value={memo}
                   onChange={handleMemoChange}
-                  placeholder="INV-12345"
+                  placeholder="Optional"
                 />
               </div>
               <Button
@@ -135,7 +137,7 @@ export function SendPayment(props: DemoStepProps) {
                 disabled={!(address && balance && balance > 0n && isValidRecipient) || !!memoError}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
index 252400ff..e9bf0e82 100644
--- a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
+++ b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
@@ -109,7 +109,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -126,7 +126,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
             disabled={!(address && balance && balance > 0n)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -140,13 +140,14 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8">
               <div className="flex flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (e.g., customer ID, invoice number)
                 </label>
                 <input
-                  className={`-tracking-[2%] h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
+                  className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={handleMemoChange}
@@ -156,13 +157,14 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
               </div>
               <div className="flex flex-col gap-2 md:flex-row md:items-end">
                 <div className="flex flex-1 flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                     Recipient address
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient"
                     name="recipient"
                     value={recipient}
                     onChange={(e) => setRecipient(e.target.value)}
@@ -186,7 +188,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
                   }
                   onClick={handleTransfer}
                   type="button"
-                  className="-tracking-[2%] font-normal text-[14px]"
+                  className="font-normal text-[14px] -tracking-[2%]"
                 >
                   {sendPayment.isPending ? 'Sending...' : 'Send with Memo'}
                 </Button>
diff --git a/src/components/guides/steps/payments/SponsorUserFees.tsx b/src/components/guides/steps/payments/SponsorUserFees.tsx
index 40f8ca4a..db8e4ec4 100644
--- a/src/components/guides/steps/payments/SponsorUserFees.tsx
+++ b/src/components/guides/steps/payments/SponsorUserFees.tsx
@@ -61,7 +61,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -72,7 +72,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -84,7 +84,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
       {expanded && (
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -99,13 +99,14 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -113,13 +114,14 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
@@ -131,7 +133,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                 disabled={!(active && isValidRecipient)}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/rewards/ClaimReward.tsx b/src/components/guides/steps/rewards/ClaimReward.tsx
index b224c7c8..028c8727 100644
--- a/src/components/guides/steps/rewards/ClaimReward.tsx
+++ b/src/components/guides/steps/rewards/ClaimReward.tsx
@@ -64,7 +64,7 @@ export function ClaimReward(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -89,7 +89,7 @@ export function ClaimReward(props: DemoStepProps) {
       {claim.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully claimed {REWARD_AMOUNT} {metadata?.name ?? 'token'}.
             </div>
             <ExplorerLink hash={claim.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/rewards/OptInToRewards.tsx b/src/components/guides/steps/rewards/OptInToRewards.tsx
index 7cff0ce3..3104349d 100644
--- a/src/components/guides/steps/rewards/OptInToRewards.tsx
+++ b/src/components/guides/steps/rewards/OptInToRewards.tsx
@@ -59,7 +59,7 @@ export function OptInToRewards(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -85,7 +85,7 @@ export function OptInToRewards(props: DemoStepProps) {
       {setRecipient.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully opted in to rewards.
             </div>
             <ExplorerLink hash={setRecipient.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/rewards/StartReward.tsx b/src/components/guides/steps/rewards/StartReward.tsx
index 4c64fb7f..cc596e44 100644
--- a/src/components/guides/steps/rewards/StartReward.tsx
+++ b/src/components/guides/steps/rewards/StartReward.tsx
@@ -13,7 +13,7 @@ import { REWARD_AMOUNT, REWARD_RECIPIENT_UNSET } from './Constants'
 export function StartReward(props: DemoStepProps) {
   const { stepNumber, last = false } = props
   const { address } = useConnection()
-  const { getData } = useDemoContext()
+  const { getData, setData } = useDemoContext()
   const queryClient = useQueryClient()
   const tokenAddress = getData('tokenAddress')
 
@@ -35,6 +35,9 @@ export function StartReward(props: DemoStepProps) {
 
   const start = Hooks.reward.useDistributeSync({
     mutation: {
+      onSuccess() {
+        setData('rewardId', 1n)
+      },
       onSettled() {
         queryClient.refetchQueries({ queryKey: ['getUserRewardInfo'] })
         queryClient.refetchQueries({ queryKey: ['getBalance'] })
@@ -75,7 +78,7 @@ export function StartReward(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -101,7 +104,7 @@ export function StartReward(props: DemoStepProps) {
       {start.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully started reward distribution.
             </div>
             <ExplorerLink hash={start.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/wallet/AddFundsToWallet.tsx b/src/components/guides/steps/wallet/AddFundsToWallet.tsx
index b6867192..00d0b9fa 100644
--- a/src/components/guides/steps/wallet/AddFundsToWallet.tsx
+++ b/src/components/guides/steps/wallet/AddFundsToWallet.tsx
@@ -71,7 +71,7 @@ export function AddFundsToWallet(props: DemoStepProps) {
         <Button
           disabled={!hasNonWebAuthnWallet || fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -82,7 +82,7 @@ export function AddFundsToWallet(props: DemoStepProps) {
       <Button
         disabled={!hasNonWebAuthnWallet || fundAccount.isPending}
         variant={hasNonWebAuthnWallet ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
diff --git a/src/components/guides/steps/wallet/ConnectWallet.tsx b/src/components/guides/steps/wallet/ConnectWallet.tsx
index a13b57e0..4567db6c 100644
--- a/src/components/guides/steps/wallet/ConnectWallet.tsx
+++ b/src/components/guides/steps/wallet/ConnectWallet.tsx
@@ -41,7 +41,7 @@ export function ConnectWallet(props: DemoStepProps) {
   const actions = React.useMemo(() => {
     if (!injectedConnectors.length) {
       return (
-        <div className="-tracking-[2%] flex items-center text-[14px]">
+        <div className="flex items-center text-[14px] -tracking-[2%]">
           No browser wallets found.
         </div>
       )
@@ -83,7 +83,7 @@ export function ConnectWallet(props: DemoStepProps) {
           </Button>
           <Button
             variant="destructive"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() => disconnect.disconnect({ connector: walletConnector })}
             type="button"
           >
@@ -112,7 +112,7 @@ export function ConnectWallet(props: DemoStepProps) {
           </Button>
         )}
         {switchChain.isSuccess && (
-          <div className="-tracking-[2%] flex items-center font-normal text-[14px]">
+          <div className="flex items-center font-normal text-[14px] -tracking-[2%]">
             Added Tempo to {connector?.name ?? 'Wallet'}!
           </div>
         )}
diff --git a/src/components/guides/steps/wallet/SetFeeToken.tsx b/src/components/guides/steps/wallet/SetFeeToken.tsx
index 8cf99b53..20d57419 100644
--- a/src/components/guides/steps/wallet/SetFeeToken.tsx
+++ b/src/components/guides/steps/wallet/SetFeeToken.tsx
@@ -131,7 +131,7 @@ export function SetFeeToken(props: DemoStepProps) {
     return (
       <div className="flex flex-wrap items-center gap-2">
         <select
-          className="-tracking-[2%] h-[32px] rounded-full border border-gray4 bg-white px-3 font-medium text-[14px] text-black dark:bg-transparent dark:text-white"
+          className="h-[32px] rounded-full border border-gray4 bg-white px-3 font-medium text-[14px] text-black -tracking-[2%] dark:bg-transparent dark:text-white"
           value={selectedFeeToken}
           onChange={(event) => {
             const value = event.target.value as FeeTokenOption['value']
@@ -172,15 +172,16 @@ export function SetFeeToken(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             {selectedOption.value === 'other' && (
               <div className="mt-2 flex flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="customFeeToken">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="customFeeToken">
                   Custom fee token address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   autoCapitalize="none"
                   autoComplete="off"
                   autoCorrect="off"
                   spellCheck={false}
+                  id="customFeeToken"
                   name="customFeeToken"
                   placeholder="0x..."
                   value={customFeeToken}