diff --git a/e2e/no-step-barrel-imports.test.ts b/e2e/no-step-barrel-imports.test.ts
new file mode 100644
index 00000000..d518b1bb
--- /dev/null
+++ b/e2e/no-step-barrel-imports.test.ts
@@ -0,0 +1,74 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, extname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { expect, test } from '@playwright/test'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const repoRoot = join(__dirname, '..')
+const srcDir = join(repoRoot, 'src')
+const stepsBarrelDir = join(srcDir, 'components', 'guides', 'steps')
+const SOURCE_EXTENSIONS = new Set(['.mdx', '.ts', '.tsx'])
+
+function findSourceFiles(dir: string): string[] {
+  const results: string[] = []
+
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name)
+
+    if (entry.isDirectory() && entry.name !== 'node_modules') {
+      results.push(...findSourceFiles(full))
+      continue
+    }
+
+    if (SOURCE_EXTENSIONS.has(extname(entry.name))) {
+      results.push(full)
+    }
+  }
+
+  return results
+}
+
+function findImports(content: string): string[] {
+  const imports: string[] = []
+
+  for (const match of content.matchAll(/from\s+['"]([^'"]+)['"]/g)) {
+    imports.push(match[1])
+  }
+
+  for (const match of content.matchAll(/import\s+['"]([^'"]+)['"]/g)) {
+    imports.push(match[1])
+  }
+
+  return imports
+}
+
+function resolvesToStepsBarrel(file: string, importPath: string): boolean {
+  if (!importPath.startsWith('.')) return false
+
+  const resolved = resolve(dirname(file), importPath)
+  return resolved === stepsBarrelDir || resolved === join(stepsBarrelDir, 'index')
+}
+
+test('no imports from the guides steps barrel', () => {
+  const files = findSourceFiles(srcDir)
+  const violations: string[] = []
+
+  for (const file of files) {
+    const content = readFileSync(file, 'utf-8')
+    const imports = findImports(content)
+
+    for (const importPath of imports) {
+      if (resolvesToStepsBarrel(file, importPath)) {
+        violations.push(`${relative(repoRoot, file)} -> ${importPath}`)
+      }
+    }
+  }
+
+  expect(
+    violations,
+    [
+      'Found imports from the guides steps barrel. Import the specific step modules instead:',
+      ...violations.map((entry) => `  - ${entry}`),
+    ].join('\n'),
+  ).toHaveLength(0)
+})
diff --git a/src/components/guides/steps/index.ts b/src/components/guides/steps/index.ts
deleted file mode 100644
index 826163f8..00000000
--- a/src/components/guides/steps/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export { BurnFeeAmmLiquidity } from './amm/BurnFeeAmmLiquidity'
-export { CheckFeeAmmPool } from './amm/CheckFeeAmmPool'
-export { MintFeeAmmLiquidity } from './amm/MintFeeAmmLiquidity'
-export { Connect } from './auth/Connect'
-export { ApproveSpend } from './exchange/ApproveSpend'
-export { CancelOrder } from './exchange/CancelOrder'
-export { MakeSwaps } from './exchange/MakeSwaps'
-export { PlaceOrder } from './exchange/PlaceOrder'
-export { QueryOrder } from './exchange/QueryOrder'
-export { BurnToken } from './issuance/BurnToken'
-export { BurnTokenBlocked } from './issuance/BurnTokenBlocked'
-export { CreateOrLoadToken } from './issuance/CreateOrLoadToken'
-export { CreateToken } from './issuance/CreateToken'
-export { CreateTokenPolicy } from './issuance/CreateTokenPolicy'
-export { GrantTokenRoles } from './issuance/GrantTokenRoles'
-export { LinkTokenPolicy } from './issuance/LinkTokenPolicy'
-export { MintToken } from './issuance/MintToken'
-export { PauseUnpauseTransfers } from './issuance/PauseUnpauseTransfers'
-export { RevokeTokenRoles } from './issuance/RevokeTokenRoles'
-export { SetSupplyCap } from './issuance/SetSupplyCap'
-export { AddFunds } from './payments/AddFunds'
-export { AddFundsToOthers } from './payments/AddFundsToOthers'
-export { PayWithFeeToken } from './payments/PayWithFeeToken'
-export { PayWithIssuedToken } from './payments/PayWithIssuedToken'
-export { SendParallelPayments } from './payments/SendParallelPayments'
-export { SendPayment } from './payments/SendPayment'
-export { SendPaymentWithMemo } from './payments/SendPaymentWithMemo'
-export { SendRelayerSponsoredPayment } from './payments/SponsorUserFees'
-export { ClaimReward } from './rewards/ClaimReward'
-export { OptInToRewards } from './rewards/OptInToRewards'
-export { StartReward } from './rewards/StartReward'
-export type { DemoStepProps } from './types'
-export { AddFundsToWallet } from './wallet/AddFundsToWallet'
-export { AddTokensToWallet } from './wallet/AddTokensToWallet'
-export { ConnectWallet } from './wallet/ConnectWallet'
-export { SetFeeToken } from './wallet/SetFeeToken'
diff --git a/src/pages/accounts/index.mdx b/src/pages/accounts/index.mdx
index 7bde7db6..2ce0796c 100644
--- a/src/pages/accounts/index.mdx
+++ b/src/pages/accounts/index.mdx
@@ -6,7 +6,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { AddFunds } from '../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../components/guides/steps/auth/Connect.tsx'
+import { SendPayment } from '../../components/guides/steps/payments/SendPayment.tsx'
 import IconGitHub from '~icons/simple-icons/github'
 import { StaticMermaidDiagram } from '../../components/StaticMermaidDiagram'
 
@@ -21,9 +23,9 @@ The Tempo Accounts SDK is a TypeScript library for applications and wallets to c
 Try sign in and make a payment on Tempo using the Accounts SDK.
 
 <Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPayment stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendPayment stepNumber={3} last />
 </Demo.Container>
 
 ### Quick Prompt
diff --git a/src/pages/guide/_template.mdx b/src/pages/guide/_template.mdx
index d7b01451..6527ccb1 100644
--- a/src/pages/guide/_template.mdx
+++ b/src/pages/guide/_template.mdx
@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { AddFunds } from '../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../components/guides/steps/auth/Connect.tsx'
+import { CreateToken } from '../../components/guides/steps/issuance/CreateToken.tsx'
 
 # !Replace Me!
 
@@ -14,9 +16,9 @@ import * as Step from '../../components/guides/steps'
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum odio ante, sit amet tincidunt leo scelerisque vitae.
 
 <Demo.Container name="!Replace Me!" footerVariant="source" src="tempoxyz/examples/tree/main/examples/replace-me">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateToken stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateToken stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/issuance/create-a-stablecoin.mdx b/src/pages/guide/issuance/create-a-stablecoin.mdx
index 8cca78c4..a81bdfb1 100644
--- a/src/pages/guide/issuance/create-a-stablecoin.mdx
+++ b/src/pages/guide/issuance/create-a-stablecoin.mdx
@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateToken } from '../../../components/guides/steps/issuance/CreateToken.tsx'
 
 # Create a Stablecoin
 
@@ -18,9 +20,9 @@ and integration with Tempo's payment infrastructure.
 By the end of this guide, you will be able to create a stablecoin on Tempo.
 
 <Demo.Container name="Create a Stablecoin" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateToken stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateToken stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
@@ -44,7 +46,7 @@ as the [default fee token](/quickstart/integrate-tempo#default-fee-token), we wi
 Luckily, the built-in Tempo testnet faucet supports funding accounts with `AlphaUSD`.
 
 <Demo.Container name="Add Funds" footerVariant="balances" showBadge={false}>
-  <Step.AddFunds stepNumber={1} last />
+  <AddFunds stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
@@ -95,8 +97,8 @@ Now that we have some funds to cover the transaction fee in our account, we can
 Let's create a new component and add some input fields for the **name** and **symbol** of our stablecoin, as shown in the demo.
 
 <Demo.Container name="Create Form">
-  <Step.AddFunds stepNumber={1} />
-  <Step.CreateToken stepNumber={2} last />
+  <AddFunds stepNumber={1} />
+  <CreateToken stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
@@ -153,7 +155,7 @@ We **strongly** recommend that for stablecoins, the `currency` field be set to t
 :::
 
 <Demo.Container name="Create Form">
-  <Step.CreateToken stepNumber={1} last />
+  <CreateToken stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
diff --git a/src/pages/guide/issuance/distribute-rewards.mdx b/src/pages/guide/issuance/distribute-rewards.mdx
index 470773a5..9f8dc359 100644
--- a/src/pages/guide/issuance/distribute-rewards.mdx
+++ b/src/pages/guide/issuance/distribute-rewards.mdx
@@ -4,7 +4,14 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { ClaimReward } from '../../../components/guides/steps/rewards/ClaimReward.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
+import { OptInToRewards } from '../../../components/guides/steps/rewards/OptInToRewards.tsx'
+import { StartReward } from '../../../components/guides/steps/rewards/StartReward.tsx'
 import { Cards, Card } from 'vocs'
 
 # Distribute Rewards
@@ -18,14 +25,14 @@ Rewards can be distributed by anyone on any TIP-20 token, and claimed by any hol
 Try out the complete rewards flow: create a token, opt in to receive rewards on it, create a reward for yourself, and claim it.
 
 <Demo.Container name="Distribute Rewards" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.MintToken stepNumber={5} />
-  <Step.OptInToRewards stepNumber={6} />
-  <Step.StartReward stepNumber={7} />
-  <Step.ClaimReward stepNumber={8} flowDependencies={['rewardId']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <MintToken stepNumber={5} />
+  <OptInToRewards stepNumber={6} />
+  <StartReward stepNumber={7} />
+  <ClaimReward stepNumber={8} flowDependencies={['rewardId']} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/issuance/manage-stablecoin.mdx b/src/pages/guide/issuance/manage-stablecoin.mdx
index 83b096ce..ea7a228a 100644
--- a/src/pages/guide/issuance/manage-stablecoin.mdx
+++ b/src/pages/guide/issuance/manage-stablecoin.mdx
@@ -4,7 +4,17 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { BurnTokenBlocked } from '../../../components/guides/steps/issuance/BurnTokenBlocked.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { CreateTokenPolicy } from '../../../components/guides/steps/issuance/CreateTokenPolicy.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { LinkTokenPolicy } from '../../../components/guides/steps/issuance/LinkTokenPolicy.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
+import { PauseUnpauseTransfers } from '../../../components/guides/steps/issuance/PauseUnpauseTransfers.tsx'
+import { RevokeTokenRoles } from '../../../components/guides/steps/issuance/RevokeTokenRoles.tsx'
+import { SetSupplyCap } from '../../../components/guides/steps/issuance/SetSupplyCap.tsx'
 import { Cards, Card } from 'vocs'
 
 # Manage Your Stablecoin
@@ -30,10 +40,10 @@ Once you've created your token, you can proceed to grant roles to specific addre
 Assign roles to specific addresses to delegate token management capabilities.
 
 <Demo.Container name="Grant Roles to an Address" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} last />
 </Demo.Container>
 
 :::code-group
@@ -170,11 +180,11 @@ export const config = createConfig({
 Revoke roles from addresses when you need to remove their permissions.
 
 <Demo.Container name="Revoke Issuer Role" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.RevokeTokenRoles stepNumber={5} roles={['issuer']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <RevokeTokenRoles stepNumber={5} roles={['issuer']} last />
 </Demo.Container>
 
 :::code-group
@@ -285,10 +295,10 @@ export const config = createConfig({
 Limit the maximum total supply of your token. Setting supply caps requires the **`DEFAULT_ADMIN_ROLE`**. The new cap cannot be less than the current total supply.
 
 <Demo.Container name="Set Supply Cap" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.SetSupplyCap stepNumber={4} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <SetSupplyCap stepNumber={4} last />
 </Demo.Container>
 
 :::code-group
@@ -358,11 +368,11 @@ Transfer policies can be:
 Learn more about configuring transfer policies in the [TIP-403 specification](/protocol/tip403/spec).
 
 <Demo.Container name="Create and Link Transfer Policy" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.CreateTokenPolicy stepNumber={4} />
-  <Step.LinkTokenPolicy stepNumber={5} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <CreateTokenPolicy stepNumber={4} />
+  <LinkTokenPolicy stepNumber={5} last />
 </Demo.Container>
 
 :::code-group
@@ -457,11 +467,11 @@ export const config = createConfig({
 Temporarily halt all token transfers during emergency situations or maintenance windows. Pausing transfers requires the **`PAUSE_ROLE`**. Unpausing transfers requires the **`UNPAUSE_ROLE`**.
 
 <Demo.Container name="Pause and Unpause Your Token" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['pause', 'unpause']} />
-  <Step.PauseUnpauseTransfers stepNumber={5} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['pause', 'unpause']} />
+  <PauseUnpauseTransfers stepNumber={5} last />
 </Demo.Container>
 
 :::code-group
@@ -535,14 +545,14 @@ export const config = createConfig({
 The Burn Blocked role allows your team to burn tokens from blocked or frozen addresses. This is useful for regulatory compliance when you need to remove tokens from addresses that violate terms of service or legal requirements.
 
 <Demo.Container name="Create and Link Transfer Policy" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer', 'burnBlocked']} />
-  <Step.MintToken stepNumber={5} recipient={Demo.FAKE_RECIPIENT} />
-  <Step.CreateTokenPolicy stepNumber={6} flowDependencies={['transferId']} />
-  <Step.LinkTokenPolicy stepNumber={7} />
-  <Step.BurnTokenBlocked stepNumber={8} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer', 'burnBlocked']} />
+  <MintToken stepNumber={5} recipient={Demo.FAKE_RECIPIENT} />
+  <CreateTokenPolicy stepNumber={6} flowDependencies={['transferId']} />
+  <LinkTokenPolicy stepNumber={7} />
+  <BurnTokenBlocked stepNumber={8} last />
 </Demo.Container>
 
 :::code-group
diff --git a/src/pages/guide/issuance/mint-stablecoins.mdx b/src/pages/guide/issuance/mint-stablecoins.mdx
index f93a704f..032de2d1 100644
--- a/src/pages/guide/issuance/mint-stablecoins.mdx
+++ b/src/pages/guide/issuance/mint-stablecoins.mdx
@@ -4,7 +4,12 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { BurnToken } from '../../../components/guides/steps/issuance/BurnToken.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
 import { Cards, Card } from 'vocs'
 
 # Mint Stablecoins
@@ -26,10 +31,10 @@ Once you've created your token, you can proceed to grant the issuer role and min
 Assign the issuer role to the address that will mint tokens. Minting requires the **`ISSUER_ROLE`**.
 
 <Demo.Container name="Grant Issuer Role" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} last />
 </Demo.Container>
 
 :::code-group
@@ -96,11 +101,11 @@ export const config = createConfig({
 Now that the issuer role is granted, you can mint tokens to any address.
 
 <Demo.Container name="Mint Tokens" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.MintToken stepNumber={5} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <MintToken stepNumber={5} last />
 </Demo.Container>
 
 :::code-group
@@ -262,12 +267,12 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
 To decrease supply, you can burn tokens from your own balance. Burning requires the **`ISSUER_ROLE`** and sufficient balance in the caller's account.
 
 <Demo.Container name="Burn Your Token" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.MintToken stepNumber={5} />
-  <Step.BurnToken stepNumber={6} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <MintToken stepNumber={5} />
+  <BurnToken stepNumber={6} last />
 </Demo.Container>
 
 
diff --git a/src/pages/guide/issuance/use-for-fees.mdx b/src/pages/guide/issuance/use-for-fees.mdx
index 5ba49217..439aca2e 100644
--- a/src/pages/guide/issuance/use-for-fees.mdx
+++ b/src/pages/guide/issuance/use-for-fees.mdx
@@ -5,7 +5,13 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { MintFeeAmmLiquidity } from '../../../components/guides/steps/amm/MintFeeAmmLiquidity.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
+import { PayWithIssuedToken } from '../../../components/guides/steps/payments/PayWithIssuedToken.tsx'
 
 # Use Your Stablecoin for Fees
 
@@ -14,13 +20,13 @@ Enable users to pay transaction fees using your stablecoin. Tempo supports flexi
 ## Demo
 
 <Demo.Container name="Use Your Stablecoin for Fees" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.MintToken stepNumber={5} />
-  <Step.MintFeeAmmLiquidity stepNumber={6} />
-  <Step.PayWithIssuedToken stepNumber={7} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <MintToken stepNumber={5} />
+  <MintFeeAmmLiquidity stepNumber={6} />
+  <PayWithIssuedToken stepNumber={7} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/payments/accept-a-payment.mdx b/src/pages/guide/payments/accept-a-payment.mdx
index 245908d3..c01f4dca 100644
--- a/src/pages/guide/payments/accept-a-payment.mdx
+++ b/src/pages/guide/payments/accept-a-payment.mdx
@@ -4,7 +4,8 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
 import * as Token from '../../../components/guides/tokens'
 import { Tabs, Tab } from 'vocs'
 
@@ -19,8 +20,8 @@ Payments are automatically credited to the recipient's address when a transfer i
 In this basic receiving demo you can see the balances update after you add funds to your account, using the `getBalance` and `watchEvent` calls documented below.
 
 <Demo.Container name="Receive a Payment" footerVariant="balances" tokens={[Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} last />
 </Demo.Container>
 
 ## Verifying Payments
diff --git a/src/pages/guide/payments/pay-fees-in-any-stablecoin.mdx b/src/pages/guide/payments/pay-fees-in-any-stablecoin.mdx
index 95e78504..d71a35fb 100644
--- a/src/pages/guide/payments/pay-fees-in-any-stablecoin.mdx
+++ b/src/pages/guide/payments/pay-fees-in-any-stablecoin.mdx
@@ -5,7 +5,9 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { PayWithFeeToken } from '../../../components/guides/steps/payments/PayWithFeeToken.tsx'
 import { betaUsd, thetaUsd, pathUsd } from '../../../components/guides/tokens.ts'
 import { Cards, Card, Tabs, Tab } from 'vocs'
 
@@ -18,9 +20,9 @@ Configure users to pay transaction fees in any supported stablecoin. Tempo's fle
 By the end of this guide you will be able to pay fees in any stablecoin on Tempo.
 
 <Demo.Container name="Pay Fees in Any Stablecoin" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.PayWithFeeToken stepNumber={3} feeToken={betaUsd} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <PayWithFeeToken stepNumber={3} feeToken={betaUsd} last />
 </Demo.Container>
 
 ## Quick Snippet
@@ -222,7 +224,7 @@ Before you can pay fees in a token of your choice, you need to fund your account
 The built-in Tempo testnet faucet includes `AlphaUSD` and `BetaUSD` when funding.
 
 <Demo.Container name="Add Funds" footerVariant="balances" showBadge={false} tokens={[Demo.alphaUsd, Demo.betaUsd, Demo.thetaUsd, Demo.pathUsd]}>
-  <Step.AddFunds stepNumber={1} last />
+  <AddFunds stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
@@ -263,8 +265,8 @@ Now that you have `AlphaUSD` to send and `BetaUSD` to pay fees with, you can add
 After this step, your users can send payments with a specified fee token by clicking the "Send Payment" button!
 
 <Demo.Container name="Pay Fees in Any Stablecoin" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.AddFunds stepNumber={1} />
-  <Step.PayWithFeeToken stepNumber={2} last />
+  <AddFunds stepNumber={1} />
+  <PayWithFeeToken stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
@@ -406,7 +408,7 @@ Before you can pay fees in a token of your choice, you need to fund your account
 The built-in Tempo testnet faucet includes `AlphaUSD` and `BetaUSD` when funding.
 
 <Demo.Container name="Add Funds" footerVariant="balances" showBadge={false} tokens={[Demo.alphaUsd, Demo.betaUsd, Demo.thetaUsd, Demo.pathUsd]}>
-  <Step.AddFunds stepNumber={1} last />
+  <AddFunds stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
@@ -432,8 +434,8 @@ await client.faucet.fundSync({
 Now that you have `AlphaUSD` to send and `BetaUSD` to pay fees with, you can now add logic to send a payment with a specified fee token.
 
 <Demo.Container name="Pay Fees in Any Stablecoin" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.AddFunds stepNumber={1} />
-  <Step.PayWithFeeToken stepNumber={2} last />
+  <AddFunds stepNumber={1} />
+  <PayWithFeeToken stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
diff --git a/src/pages/guide/payments/send-a-payment.mdx b/src/pages/guide/payments/send-a-payment.mdx
index d92b7f20..b12c9b0f 100644
--- a/src/pages/guide/payments/send-a-payment.mdx
+++ b/src/pages/guide/payments/send-a-payment.mdx
@@ -4,7 +4,9 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { SendPayment } from '../../../components/guides/steps/payments/SendPayment.tsx'
 import { Cards, Card } from 'vocs'
 import { Tabs, Tab } from 'vocs'
 
@@ -17,9 +19,9 @@ Send stablecoin payments between accounts on Tempo. Payments can include optiona
 By the end of this guide you will be able to send payments on Tempo with an optional memo.
 
 <Demo.Container name="Send a Payment" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPayment stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendPayment stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
@@ -40,7 +42,7 @@ Before you can send a payment, you need to fund your account. In this guide you
 The built-in Tempo testnet faucet funds accounts with `AlphaUSD`.
 
 <Demo.Container name="Add Funds" footerVariant="balances" showBadge={false} tokens={[Demo.alphaUsd]}>
-  <Step.AddFunds stepNumber={1} last />
+  <AddFunds stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
@@ -79,8 +81,8 @@ started quickly. For production, you will need to onramp & fund your account man
 Now that you have `AlphaUSD` you are ready to add logic to send a payment with an optional memo.
 
 <Demo.Container name="Send Payment" footerVariant="balances" showBadge={false} tokens={[Demo.alphaUsd]}>
-  <Step.AddFunds stepNumber={1} />
-  <Step.SendPayment stepNumber={2} last />
+  <AddFunds stepNumber={1} />
+  <SendPayment stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
diff --git a/src/pages/guide/payments/send-parallel-transactions.mdx b/src/pages/guide/payments/send-parallel-transactions.mdx
index 2bd3cf47..f40eb12a 100644
--- a/src/pages/guide/payments/send-parallel-transactions.mdx
+++ b/src/pages/guide/payments/send-parallel-transactions.mdx
@@ -4,7 +4,9 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { SendParallelPayments } from '../../../components/guides/steps/payments/SendParallelPayments.tsx'
 import * as Token from '../../../components/guides/tokens'
 import { Cards, Card } from 'vocs'
 
@@ -17,9 +19,9 @@ Tempo enables concurrent transaction execution through its [expiring nonce](/gui
 By the end of this guide you will understand how to send parallel payments using expiring nonces under-the-hood.
 
 <Demo.Container name="Send Parallel Payments" footerVariant="balances" tokens={[Token.alphaUsd]}>
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendParallelPayments stepNumber={3} />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendParallelPayments stepNumber={3} />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/payments/sponsor-user-fees.mdx b/src/pages/guide/payments/sponsor-user-fees.mdx
index ea27b310..7eeacdb5 100644
--- a/src/pages/guide/payments/sponsor-user-fees.mdx
+++ b/src/pages/guide/payments/sponsor-user-fees.mdx
@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card, Tabs, Tab } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { SendRelayerSponsoredPayment } from '../../../components/guides/steps/payments/SponsorUserFees.tsx'
 import PublicTestnetSponsorTip from '../../../snippets/public-testnet-sponsor-tip.mdx'
 
 # Sponsor User Fees
@@ -15,9 +17,9 @@ Enable gasless transactions by sponsoring transaction fees for your users. Tempo
 ## Demo
 
 <Demo.Container name="Sponsor User Fees" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/with-fee-payer">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendRelayerSponsoredPayment stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendRelayerSponsoredPayment stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/payments/transfer-memos.mdx b/src/pages/guide/payments/transfer-memos.mdx
index 33ace07a..312723d9 100644
--- a/src/pages/guide/payments/transfer-memos.mdx
+++ b/src/pages/guide/payments/transfer-memos.mdx
@@ -4,7 +4,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { SendPaymentWithMemo } from '../../../components/guides/steps/payments/SendPaymentWithMemo.tsx'
 
 # Attach a Transfer Memo
 
@@ -13,9 +15,9 @@ Attach 32-byte references to [TIP-20](/protocol/tip20/overview) transfers for pa
 ## Demo
 
 <Demo.Container name="Transfer with Memo" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPaymentWithMemo stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendPaymentWithMemo stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/stablecoin-dex/executing-swaps.mdx b/src/pages/guide/stablecoin-dex/executing-swaps.mdx
index af2e324d..500c3911 100644
--- a/src/pages/guide/stablecoin-dex/executing-swaps.mdx
+++ b/src/pages/guide/stablecoin-dex/executing-swaps.mdx
@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { MakeSwaps } from '../../../components/guides/steps/exchange/MakeSwaps.tsx'
 
 # Executing Swaps
 
@@ -14,9 +16,9 @@ Execute swaps between stablecoins on the exchange. Swaps execute immediately aga
 By the end of this guide you will be able to execute swaps, get price quotes, and manage slippage protection.
 
 <Demo.Container name="Execute a Swap" footerVariant="source" src="tempoxyz/examples/tree/main/examples/exchange">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.MakeSwaps stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <MakeSwaps stepNumber={3} last />
 </Demo.Container>
 
 
diff --git a/src/pages/guide/stablecoin-dex/managing-fee-liquidity.mdx b/src/pages/guide/stablecoin-dex/managing-fee-liquidity.mdx
index a208bfe5..f66b78b5 100644
--- a/src/pages/guide/stablecoin-dex/managing-fee-liquidity.mdx
+++ b/src/pages/guide/stablecoin-dex/managing-fee-liquidity.mdx
@@ -5,19 +5,24 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { BurnFeeAmmLiquidity } from '../../../components/guides/steps/amm/BurnFeeAmmLiquidity.tsx'
+import { CheckFeeAmmPool } from '../../../components/guides/steps/amm/CheckFeeAmmPool.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { MintFeeAmmLiquidity } from '../../../components/guides/steps/amm/MintFeeAmmLiquidity.tsx'
 
 # Managing Fee Liquidity
 
 The Fee AMM converts transaction fees between stablecoins when users pay in a different token than the validator prefers. This guide shows you how to add and remove liquidity to enable fee conversions.
 
 <Demo.Container name="Manage Fee Liquidity" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.MintFeeAmmLiquidity stepNumber={4} waitForBalance={false} />
-  <Step.CheckFeeAmmPool stepNumber={5} />
-  <Step.BurnFeeAmmLiquidity stepNumber={6} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <MintFeeAmmLiquidity stepNumber={4} waitForBalance={false} />
+  <CheckFeeAmmPool stepNumber={5} />
+  <BurnFeeAmmLiquidity stepNumber={6} last />
 </Demo.Container>
 
 ## Steps
diff --git a/src/pages/guide/stablecoin-dex/providing-liquidity.mdx b/src/pages/guide/stablecoin-dex/providing-liquidity.mdx
index a7cbd2f8..98b5f5ea 100644
--- a/src/pages/guide/stablecoin-dex/providing-liquidity.mdx
+++ b/src/pages/guide/stablecoin-dex/providing-liquidity.mdx
@@ -5,7 +5,12 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { ApproveSpend } from '../../../components/guides/steps/exchange/ApproveSpend.tsx'
+import { CancelOrder } from '../../../components/guides/steps/exchange/CancelOrder.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { PlaceOrder } from '../../../components/guides/steps/exchange/PlaceOrder.tsx'
+import { QueryOrder } from '../../../components/guides/steps/exchange/QueryOrder.tsx'
 
 # Providing Liquidity
 
@@ -16,10 +21,10 @@ In this guide you will learn how to place buy and sell orders to provide liquidi
 ## Demo
 
 <Demo.Container name="Place an Order" footerVariant="source" src="tempoxyz/examples/tree/main/examples/exchange">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.PlaceOrder stepNumber={3} />
-  <Step.QueryOrder stepNumber={4} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <PlaceOrder stepNumber={3} />
+  <QueryOrder stepNumber={4} last />
 </Demo.Container>
 
 ## Steps
@@ -43,8 +48,8 @@ The "spend" token is the token that will be spent to place the order.
 :::
 
 <Demo.Container name="Approve Spend">
-  <Step.Connect stepNumber={1} />
-  <Step.ApproveSpend stepNumber={2} last />
+  <Connect stepNumber={1} />
+  <ApproveSpend stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
@@ -95,8 +100,8 @@ In the code sample below, we use the `useSendCallsSync` hook to batch the approv
 :::
 
 <Demo.Container name="Place Order">
-  <Step.Connect stepNumber={1} />
-  <Step.PlaceOrder stepNumber={2} last />
+  <Connect stepNumber={1} />
+  <PlaceOrder stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
@@ -151,10 +156,10 @@ function PlaceOrder(props: { orderType: 'buy' | 'sell' }) {
 After placing an order, you can query its details to see the current state, including the amount filled and remaining using [`Hooks.dex.useOrder`](https://wagmi.sh/tempo/hooks/dex.useOrder).
 
 <Demo.Container name="View Order">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.PlaceOrder stepNumber={3} />
-  <Step.QueryOrder stepNumber={4} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <PlaceOrder stepNumber={3} />
+  <QueryOrder stepNumber={4} last />
 </Demo.Container>
 
 :::code-group
@@ -195,10 +200,10 @@ Cancel an order using its order ID.
 When you cancel an order, any remaining funds are credited to your exchange balance (not directly to your wallet). To move funds back to your wallet, you can [withdraw them to your wallet](/protocol/exchange/exchange-balance#withdrawing-funds).
 
 <Demo.Container name="Place and Cancel an Order" footerVariant="source" src="tempoxyz/examples/tree/main/examples/exchange">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.PlaceOrder stepNumber={3} />
-  <Step.CancelOrder stepNumber={4} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <PlaceOrder stepNumber={3} />
+  <CancelOrder stepNumber={4} last />
 </Demo.Container>
 
 :::code-group
diff --git a/src/pages/guide/use-accounts/add-funds.mdx b/src/pages/guide/use-accounts/add-funds.mdx
index a38369d1..9988379d 100644
--- a/src/pages/guide/use-accounts/add-funds.mdx
+++ b/src/pages/guide/use-accounts/add-funds.mdx
@@ -5,7 +5,11 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFundsToOthers } from '../../../components/guides/steps/payments/AddFundsToOthers.tsx'
+import { AddFundsToWallet } from '../../../components/guides/steps/wallet/AddFundsToWallet.tsx'
+import { AddTokensToWallet } from '../../../components/guides/steps/wallet/AddTokensToWallet.tsx'
+import { ConnectWallet } from '../../../components/guides/steps/wallet/ConnectWallet.tsx'
+import { SetFeeToken } from '../../../components/guides/steps/wallet/SetFeeToken.tsx'
 import * as Token from '../../../components/guides/tokens'
 import { Tabs, Tab } from 'vocs'
 
@@ -22,10 +26,10 @@ Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
 <Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
+  <ConnectWallet stepNumber={1} />
+  <AddFundsToWallet stepNumber={2} />
+  <AddTokensToWallet stepNumber={3} />
+  <SetFeeToken stepNumber={4} last />
 </Demo.Container>
 
   </Tab>
@@ -36,7 +40,7 @@ Send test stablecoins to any address.
 
 <div className="h-6"/>
 <Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
+  <AddFundsToOthers stepNumber={1} last />
 </Demo.Container>
 
   </Tab>
diff --git a/src/pages/guide/use-accounts/connect-to-wallets.mdx b/src/pages/guide/use-accounts/connect-to-wallets.mdx
index de191c89..496bfb78 100644
--- a/src/pages/guide/use-accounts/connect-to-wallets.mdx
+++ b/src/pages/guide/use-accounts/connect-to-wallets.mdx
@@ -5,7 +5,7 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { ConnectWallet as ConnectWalletStep } from '../../../components/guides/steps/wallet/ConnectWallet.tsx'
 import { ConnectWallet } from '../../../components/ConnectWallet.tsx'
 
 # Connect to Wallets
@@ -22,7 +22,7 @@ This guide will walk you through how to set up your application to connect to wa
   footerVariant="source" 
   src="tempoxyz/examples/tree/main/examples/accounts"
 >
-  <Step.ConnectWallet stepNumber={1} last />
+  <ConnectWalletStep stepNumber={1} last />
 </Demo.Container>
 
 ## Wagmi Setup
diff --git a/src/pages/quickstart/faucet.mdx b/src/pages/quickstart/faucet.mdx
index cc1691cc..90218d94 100644
--- a/src/pages/quickstart/faucet.mdx
+++ b/src/pages/quickstart/faucet.mdx
@@ -5,7 +5,11 @@ interactive: true
 ---
 
 import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { AddFundsToOthers } from '../../components/guides/steps/payments/AddFundsToOthers.tsx'
+import { AddFundsToWallet } from '../../components/guides/steps/wallet/AddFundsToWallet.tsx'
+import { AddTokensToWallet } from '../../components/guides/steps/wallet/AddTokensToWallet.tsx'
+import { ConnectWallet } from '../../components/guides/steps/wallet/ConnectWallet.tsx'
+import { SetFeeToken } from '../../components/guides/steps/wallet/SetFeeToken.tsx'
 import * as Token from '../../components/guides/tokens'
 import { Tabs, Tab } from 'vocs'
 
@@ -23,10 +27,10 @@ Connect your wallet to receive test stablecoins directly.
 
 <div className="h-6"/>
 <Demo.Container name="Connect and fund your wallet" footerVariant="balances" tokens={[Token.pathUsd, Token.alphaUsd, Token.betaUsd, Token.thetaUsd]} balanceSource="wallet">
-  <Step.ConnectWallet stepNumber={1} />
-  <Step.AddFundsToWallet stepNumber={2} />
-  <Step.AddTokensToWallet stepNumber={3} />
-  <Step.SetFeeToken stepNumber={4} last />
+  <ConnectWallet stepNumber={1} />
+  <AddFundsToWallet stepNumber={2} />
+  <AddTokensToWallet stepNumber={3} />
+  <SetFeeToken stepNumber={4} last />
 </Demo.Container>
 
   </Tab>
@@ -37,7 +41,7 @@ Send test stablecoins to any address.
 
 <div className="h-6"/>
 <Demo.Container name="Fund an address">
-  <Step.AddFundsToOthers stepNumber={1} last />
+  <AddFundsToOthers stepNumber={1} last />
 </Demo.Container>
 
   </Tab>