diff --git a/docs/contributing/available-e-components.md b/docs/contributing/available-e-components.md
index 6ab727d..e534117 100644
--- a/docs/contributing/available-e-components.md
+++ b/docs/contributing/available-e-components.md
@@ -42,7 +42,9 @@ import { examples } from './examples'
 import { INFO as exploration } from './info'
 
 const { run, execResultPre, execResultPost } = useStandardPrecompileRun(
-  Hardfork.Prague, Hardfork.Osaka, '0a',
+  Hardfork.Prague,
+  Hardfork.Osaka,
+  '0a',
 )
 
 const config: PrecompileConfig = {
@@ -57,7 +59,10 @@ const config: PrecompileConfig = {
 
 <template>
   <PrecompileInterfaceEC
-    :config="config" :examples="examples" :exploration="exploration" :run="run"
+    :config="config"
+    :examples="examples"
+    :exploration="exploration"
+    :run="run"
   >
     <template #result>
       <div class="e-grid-double">
@@ -71,12 +76,12 @@ const config: PrecompileConfig = {
 
 ### Component Props
 
-| Prop | Required | Description |
-|------|----------|-------------|
-| `config` | Yes | Input configuration (see `PrecompileConfig` below) |
-| `examples` | Yes | Example presets from `examples.ts` |
-| `exploration` | Yes | Exploration metadata from `info.ts` |
-| `run` | Yes | Execution function, called with the assembled hex data (without `0x`) on every valid input change |
+| Prop          | Required | Description                                                                                       |
+| ------------- | -------- | ------------------------------------------------------------------------------------------------- |
+| `config`      | Yes      | Input configuration (see `PrecompileConfig` below)                                                |
+| `examples`    | Yes      | Example presets from `examples.ts`                                                                |
+| `exploration` | Yes      | Exploration metadata from `info.ts`                                                               |
+| `run`         | Yes      | Execution function, called with the assembled hex data (without `0x`) on every valid input change |
 
 ### `PrecompileConfig` Reference
 
@@ -91,14 +96,14 @@ interface PrecompileConfig {
 }
 ```
 
-| Field | Required | Description |
-|-------|----------|-------------|
-| `explorationId` | Yes | Matches the exploration's `id` in `info.ts` |
-| `defaultExample` | Yes | Key from `examples.ts` to load on initialization |
-| `showBigInt` | No | Show BigInt representations for values (default: per-value setting) |
-| `values` | Yes | Array of value definitions (see below) |
-| `assembleData` | No | Custom function to assemble raw hex data from individual values |
-| `parseData` | No | Custom function to parse raw hex data into individual values |
+| Field            | Required | Description                                                         |
+| ---------------- | -------- | ------------------------------------------------------------------- |
+| `explorationId`  | Yes      | Matches the exploration's `id` in `info.ts`                         |
+| `defaultExample` | Yes      | Key from `examples.ts` to load on initialization                    |
+| `showBigInt`     | No       | Show BigInt representations for values (default: per-value setting) |
+| `values`         | Yes      | Array of value definitions (see below)                              |
+| `assembleData`   | No       | Custom function to assemble raw hex data from individual values     |
+| `parseData`      | No       | Custom function to parse raw hex data into individual values        |
 
 ### `PrecompileValueDef` Reference
 
@@ -113,14 +118,14 @@ interface PrecompileValueDef {
 }
 ```
 
-| Field | Required | Description |
-|-------|----------|-------------|
-| `title` | Yes | Display label for this value |
-| `urlParam` | No | URL query parameter name for sharing (omit for computed values) |
-| `expectedLen` | No | Expected byte length for validation |
-| `initialHex` | No | Initial hex value (used for length-prefix fields) |
-| `showBigInt` | No | Show BigInt representation for this value |
-| `showInput` | No | Whether to show the input field (default: `true`, set `false` for computed fields) |
+| Field         | Required | Description                                                                        |
+| ------------- | -------- | ---------------------------------------------------------------------------------- |
+| `title`       | Yes      | Display label for this value                                                       |
+| `urlParam`    | No       | URL query parameter name for sharing (omit for computed values)                    |
+| `expectedLen` | No       | Expected byte length for validation                                                |
+| `initialHex`  | No       | Initial hex value (used for length-prefix fields)                                  |
+| `showBigInt`  | No       | Show BigInt representation for this value                                          |
+| `showInput`   | No       | Whether to show the input field (default: `true`, set `false` for computed fields) |
 
 ### Custom Data Assembly
 
@@ -167,7 +172,9 @@ For the common pre/post hardfork comparison using the EthereumJS EVM, use the pr
 import { useStandardPrecompileRun } from '@/eComponents/precompileInterfaceEC/run'
 
 const { run, execResultPre, execResultPost } = useStandardPrecompileRun(
-  Hardfork.Prague, Hardfork.Osaka, '05',
+  Hardfork.Prague,
+  Hardfork.Osaka,
+  '05',
 )
 ```
 
@@ -195,7 +202,10 @@ async function run(data: string) {
 
 <template>
   <PrecompileInterfaceEC
-    :config="config" :examples="examples" :exploration="exploration" :run="run"
+    :config="config"
+    :examples="examples"
+    :exploration="exploration"
+    :run="run"
   >
     <template #result>
       <div class="e-grid-single">
@@ -210,3 +220,84 @@ async function run(data: string) {
 ```
 
 The `#result` slot template lives in the exploration's scope, so it naturally accesses your own refs and computed properties.
+
+## Bytecode Stepper (`bytecodeStepperEC`)
+
+A stepping debugger for raw EVM bytecode. The exploration injects a configured `EVM` instance (hardfork, chain); the E-Component handles bytecode editing, disassembly, run/step/reset, and stack/memory/gas display.
+
+**Files:**
+
+```
+src/eComponents/bytecodeStepperEC/
+├── BytecodeStepperEC.vue          # Main component
+├── BytecodeStepperResultEC.vue    # ExecResult summary
+├── useBytecodeStepper.ts          # Composable: state machine + run/step/reset
+├── disassemble.ts                 # Hex → instruction rows via getOpcodesForHF
+├── runBytecode.ts                 # runCode orchestration + step event gate
+└── types.ts                       # BytecodeStepperConfig and internal types
+```
+
+**Used by:** [EIP-8024](https://github.com/feelyourprotocol/website/blob/main/src/explorations/eip-8024/MyC.vue) (DUPN/SWAPN/EXCHANGE stack opcodes)
+
+### Basic Usage
+
+The exploration creates an EVM for the target hardfork and passes it to the component:
+
+```vue
+<script setup lang="ts">
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import BytecodeStepperEC from '@/eComponents/bytecodeStepperEC/BytecodeStepperEC.vue'
+
+import { config } from './config'
+import { examples } from './examples'
+import { INFO as exploration } from './info'
+
+const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+const evm = await createEVM({ common })
+</script>
+
+<template>
+  <BytecodeStepperEC :config="config" :examples="examples" :exploration="exploration" :evm="evm" />
+</template>
+```
+
+### Component Props
+
+| Prop          | Required | Description                                                |
+| ------------- | -------- | ---------------------------------------------------------- |
+| `config`      | Yes      | Stepping configuration (see `BytecodeStepperConfig` below) |
+| `examples`    | Yes      | Example presets; `values[0]` is unprefixed hex bytecode    |
+| `exploration` | Yes      | Exploration metadata from `info.ts`                        |
+| `evm`         | Yes      | Pre-configured EVM instance owned by the exploration       |
+
+### `BytecodeStepperConfig` Reference
+
+```typescript
+interface BytecodeStepperConfig {
+  explorationId: string
+  defaultExample: string
+  gasLimit?: bigint // default 1_000_000n
+  maxStackDisplay?: number // default 12
+  maxMemoryBytes?: number // default 64
+}
+```
+
+| Field             | Required | Description                                      |
+| ----------------- | -------- | ------------------------------------------------ |
+| `explorationId`   | Yes      | Matches the exploration's `id` in `info.ts`      |
+| `defaultExample`  | Yes      | Key from `examples.ts` to load on initialization |
+| `gasLimit`        | No       | Gas limit passed to `runCode`                    |
+| `maxStackDisplay` | No       | Max stack slots shown in the UI                  |
+| `maxMemoryBytes`  | No       | Max memory bytes shown in the hex dump           |
+
+### Execution Modes
+
+| Action    | Behavior                                                                       |
+| --------- | ------------------------------------------------------------------------------ |
+| **Run**   | Execute bytecode to completion; record all step snapshots                      |
+| **Step**  | Advance one opcode (step mode is pre-armed when bytecode is valid)             |
+| **Reset** | Clear execution state, re-arm stepping; bytecode input is preserved            |
+
+Valid bytecode automatically enters step mode paused before the first opcode, so the first **Step** click executes that opcode. Changing bytecode triggers a full reset and re-arms stepping.
diff --git a/docs/contributing/e-components.md b/docs/contributing/e-components.md
index be4bf75..2311faa 100644
--- a/docs/contributing/e-components.md
+++ b/docs/contributing/e-components.md
@@ -68,6 +68,5 @@ Some patterns that might become E-Components as the project grows:
 - **Transaction builder** — interactive transaction construction and signing
 - **Gas calculator** — compare gas costs across hardforks for different operations
 - **Storage layout** — visualize contract storage slot changes
-- **Opcode explorer** — step through EVM bytecode execution
 
 If you are interested in building any of these (or have other ideas), feel free to [open an issue](https://github.com/feelyourprotocol/website/issues) to discuss the design.
diff --git a/src/eComponents/bytecodeStepperEC/BytecodeStepperEC.vue b/src/eComponents/bytecodeStepperEC/BytecodeStepperEC.vue
new file mode 100644
index 0000000..1ce201c
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/BytecodeStepperEC.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+import type { EVM } from '@ethereumjs/evm'
+import { bytesToHex } from '@ethereumjs/util'
+
+import ActionButtonUIC from '@/eComponents/ui/ActionButtonUIC.vue'
+import ExamplesUIC from '@/eComponents/ui/ExamplesUIC.vue'
+import HexDataInputUIC from '@/eComponents/ui/HexDataInputUIC.vue'
+import ExplorationC from '@/explorations/ExplorationC.vue'
+import PoweredByC from '@/explorations/PoweredByC.vue'
+import type { Examples } from '@/explorations/REGISTRY'
+import type { Exploration } from '@/explorations/REGISTRY'
+import { TOPICS } from '@/explorations/TOPICS'
+
+import { BYTECODE_STEPPER_CONTEXT } from './bytecodeStepperContext'
+import BytecodeStepperResultEC from './BytecodeStepperResultEC.vue'
+import { explainInstruction } from './opcodeExplain'
+import { depthFromIndex } from './stackDepth'
+import type { BytecodeStepperConfig } from './types'
+import { useBytecodeStepper } from './useBytecodeStepper'
+
+const props = defineProps<{
+  config: BytecodeStepperConfig
+  examples: Examples
+  exploration: Exploration
+  evm: EVM
+}>()
+
+const topic = TOPICS[props.exploration.topic]
+
+const {
+  bytecodeHex,
+  example,
+  instructions,
+  mode,
+  currentSnapshot,
+  execResult,
+  error,
+  validationErrors,
+  gasUsed,
+  gasLimit,
+  maxStackDisplay,
+  maxMemoryBytes,
+  onBytecodeChange,
+  selectExample,
+  init,
+  runAll,
+  stepOnce,
+  reset,
+} = useBytecodeStepper(props.config, props.evm)
+
+await init(props.examples)
+
+const activePc = computed(() => currentSnapshot.value?.pc ?? -1)
+
+const activeInstruction = computed(() =>
+  instructions.value.find((row) => row.pc === activePc.value),
+)
+
+provide(BYTECODE_STEPPER_CONTEXT, {
+  activeInstruction,
+  mode,
+  bytecodeHex,
+  example,
+})
+
+const stepExplanation = computed(() => {
+  if (!activeInstruction.value) return undefined
+  return explainInstruction(activeInstruction.value)
+})
+
+const displayedStack = computed(() => {
+  const stack = currentSnapshot.value?.stack ?? []
+  return stack.slice(0, maxStackDisplay).map((word, index) => ({
+    depth: depthFromIndex(index),
+    word,
+  }))
+})
+
+const stackDepthHint = computed(() => {
+  const total = currentSnapshot.value?.stack.length ?? 0
+  if (total === 0) return ''
+  if (total <= maxStackDisplay) return 'depth 1 = top'
+  return `depth 1 = top · showing 1–${maxStackDisplay} of ${total}`
+})
+
+const memoryLines = computed(() => {
+  const memory = currentSnapshot.value?.memory
+  if (!memory || memory.length === 0) return []
+
+  const limit = Math.min(memory.length, maxMemoryBytes)
+  const lines: { offset: string; hex: string }[] = []
+  for (let offset = 0; offset < limit; offset += 16) {
+    const chunk = memory.subarray(offset, Math.min(offset + 16, limit))
+    lines.push({
+      offset: offset.toString(16).padStart(4, '0'),
+      hex:
+        bytesToHex(chunk)
+          .match(/.{1,2}/g)
+          ?.join(' ') ?? '',
+    })
+  }
+  return lines
+})
+
+const gasLabel = computed(() => {
+  if (gasUsed.value !== undefined) {
+    return `Gas used: ${gasUsed.value}`
+  }
+  if (currentSnapshot.value) {
+    return `Gas left: ${currentSnapshot.value.gasLeft}`
+  }
+  return `Gas limit: ${gasLimit}`
+})
+
+const disassemblyPanel = ref<HTMLElement | null>(null)
+const stackPanel = ref<HTMLElement | null>(null)
+const memoryPanel = ref<HTMLElement | null>(null)
+
+function scrollPanelsToTop() {
+  for (const panel of [disassemblyPanel, stackPanel, memoryPanel]) {
+    if (panel.value) panel.value.scrollTop = 0
+  }
+}
+
+async function onExampleChange() {
+  await selectExample(props.examples)
+  scrollPanelsToTop()
+}
+
+async function onBytecodeChangeWrapped() {
+  await onBytecodeChange()
+  scrollPanelsToTop()
+}
+
+async function onReset() {
+  await reset()
+  scrollPanelsToTop()
+}
+
+function formatStackWord(word: bigint): string {
+  return `0x${word.toString(16)}`
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <ExplorationC :explorationId="config.explorationId" :exploration="exploration" :topic="topic">
+      <template #content>
+        <div>
+          <ExamplesUIC v-model="example" :examples="examples" :change="onExampleChange" />
+
+          <p class="font-mono text-xs font-bold mb-1 text-slate-700">Bytecode</p>
+          <HexDataInputUIC v-model="bytecodeHex" rows="4" :formChange="onBytecodeChangeWrapped" />
+
+          <p v-if="validationErrors.length" class="text-red-500 text-xs font-mono mb-2">
+            {{ validationErrors.join(', ') }}
+          </p>
+
+          <div class="flex flex-wrap gap-2 mb-4 items-center">
+            <ActionButtonUIC
+              text="Run"
+              tooltip="Execute bytecode to completion"
+              :onClick="runAll"
+            />
+            <ActionButtonUIC
+              text="Step"
+              tooltip="Execute one opcode at a time"
+              :onClick="stepOnce"
+            />
+            <ActionButtonUIC
+              text="Reset"
+              tooltip="Clear execution state (keeps bytecode)"
+              :onClick="onReset"
+            />
+            <span class="font-mono text-xs text-slate-600 ml-2">{{ gasLabel }}</span>
+            <span v-if="mode !== 'idle'" class="font-mono text-xs text-slate-500">
+              ({{ mode }})
+            </span>
+          </div>
+
+          <p
+            v-if="stepExplanation"
+            class="font-mono text-xs text-slate-700 mb-4 px-3 py-2.5 bg-purple-50 border border-purple-200 rounded-md leading-relaxed"
+          >
+            {{ stepExplanation }}
+          </p>
+
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
+            <div>
+              <h4 class="font-mono text-xs font-bold mb-2 text-slate-700">Disassembly</h4>
+              <div
+                ref="disassemblyPanel"
+                class="font-mono text-xs bg-slate-50 border border-slate-200 rounded-md p-2 max-h-64 overflow-y-auto"
+              >
+                <div
+                  v-if="instructions.length > 0"
+                  class="grid grid-cols-[2.5rem_1fr_1fr] gap-x-2 gap-y-0 text-slate-400 border-b border-slate-200 pb-1 mb-1"
+                >
+                  <span>PC</span>
+                  <span>Bytes</span>
+                  <span>Opcode</span>
+                </div>
+                <div
+                  v-for="row in instructions"
+                  :key="row.pc"
+                  :class="[
+                    'grid grid-cols-[2.5rem_1fr_1fr] gap-x-2 py-0.5 px-1 rounded items-baseline',
+                    row.pc === activePc ? 'bg-purple-100' : '',
+                  ]"
+                >
+                  <span
+                    :class="row.pc === activePc ? 'text-purple-700 font-bold' : 'text-slate-500'"
+                  >
+                    <span v-if="row.pc === activePc" class="text-purple-600">▶</span>
+                    <span v-else class="text-transparent">▶</span>
+                    {{ row.pc }}
+                  </span>
+                  <span
+                    :class="[
+                      'tracking-wide',
+                      row.pc === activePc ? 'text-purple-900 font-semibold' : 'text-slate-700',
+                    ]"
+                  >
+                    {{ row.rawBytes }}
+                  </span>
+                  <span
+                    :class="row.pc === activePc ? 'text-purple-900 font-bold' : 'text-slate-800'"
+                  >
+                    {{ row.name }}
+                  </span>
+                </div>
+                <p v-if="instructions.length === 0" class="text-slate-400">
+                  Enter valid bytecode to disassemble.
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <h4 class="font-mono text-xs font-bold mb-2 text-slate-700">
+                Stack
+                <span v-if="stackDepthHint" class="font-normal text-slate-500">
+                  ({{ stackDepthHint }})
+                </span>
+              </h4>
+              <div
+                ref="stackPanel"
+                class="font-mono text-xs bg-slate-50 border border-slate-200 rounded-md p-2 min-h-[6rem] max-h-40 overflow-y-auto"
+              >
+                <div
+                  v-if="displayedStack.length > 0"
+                  class="grid grid-cols-[2.5rem_1fr] gap-x-2 text-slate-400 border-b border-slate-200 pb-1 mb-1"
+                >
+                  <span>Depth</span>
+                  <span>Value</span>
+                </div>
+                <div
+                  v-for="item in displayedStack"
+                  :key="item.depth"
+                  class="grid grid-cols-[2.5rem_1fr] gap-x-2 py-0.5 break-all items-baseline"
+                >
+                  <span
+                    :class="item.depth === 1 ? 'text-purple-600 font-semibold' : 'text-slate-500'"
+                  >
+                    {{ item.depth }}
+                  </span>
+                  <span>[{{ formatStackWord(item.word) }}]</span>
+                </div>
+                <p v-if="displayedStack.length === 0" class="text-slate-400">(empty)</p>
+              </div>
+
+              <h4 class="font-mono text-xs font-bold mt-3 mb-2 text-slate-700">
+                Memory
+                <span v-if="memoryLines.length" class="font-normal text-slate-500">
+                  (first {{ maxMemoryBytes }} bytes)
+                </span>
+              </h4>
+              <div
+                ref="memoryPanel"
+                class="font-mono text-xs bg-slate-50 border border-slate-200 rounded-md p-2 max-h-32 overflow-y-auto"
+              >
+                <div v-for="line in memoryLines" :key="line.offset" class="py-0.5">
+                  {{ line.offset }}: {{ line.hex }}
+                </div>
+                <p v-if="memoryLines.length === 0" class="text-slate-400">(empty)</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="e-grid-single">
+            <BytecodeStepperResultEC :execResult="execResult" :error="error" />
+          </div>
+
+          <PoweredByC
+            :poweredBy="exploration.poweredBy"
+            :creatorName="exploration.creatorName"
+            :creatorURL="exploration.creatorURL"
+          />
+        </div>
+      </template>
+    </ExplorationC>
+    <slot name="below" />
+  </div>
+</template>
diff --git a/src/eComponents/bytecodeStepperEC/BytecodeStepperResultEC.vue b/src/eComponents/bytecodeStepperEC/BytecodeStepperResultEC.vue
new file mode 100644
index 0000000..d62462a
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/BytecodeStepperResultEC.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ExecResult } from '@ethereumjs/evm'
+import { bytesToHex } from '@ethereumjs/util'
+
+import ResultBoxUIC from '@/eComponents/ui/resultBox/ResultBoxUIC.vue'
+
+defineProps<{
+  execResult?: ExecResult
+  error?: string
+}>()
+</script>
+
+<template>
+  <ResultBoxUIC title="Result" :left="true" :errorText="error">
+    <template v-if="execResult && !error">
+      <p class="e-result-text-lg">{{ execResult.executionGasUsed }} Gas used</p>
+      <p v-if="execResult.exceptionError" class="e-result-text-sm">
+        Exception: {{ execResult.exceptionError.error }}
+      </p>
+      <p v-else class="e-result-text-sm">
+        Return data: {{ bytesToHex(execResult.returnValue) || '(empty)' }}
+      </p>
+    </template>
+    <p v-else-if="!error" class="e-result-text-md mt-5">
+      Run or step through bytecode to see results.
+    </p>
+  </ResultBoxUIC>
+</template>
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/disassemble.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/disassemble.spec.ts
new file mode 100644
index 0000000..630d8b2
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/disassemble.spec.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import { disassembleBytecode } from '../disassemble'
+
+async function createAmsterdamEvm() {
+  const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+  return createEVM({ common })
+}
+
+describe('disassembleBytecode', () => {
+  it('disassembles PUSH1 ADD STOP sequence', async () => {
+    const evm = await createAmsterdamEvm()
+    const code = new Uint8Array([0x60, 0x01, 0x60, 0x02, 0x01, 0x00])
+
+    const rows = disassembleBytecode(code, evm.common)
+
+    expect(rows).toHaveLength(4)
+    expect(rows[0]).toMatchObject({ pc: 0, name: 'PUSH1 0x01', size: 2, rawBytes: '60 01' })
+    expect(rows[1]).toMatchObject({ pc: 2, name: 'PUSH1 0x02', size: 2 })
+    expect(rows[2]).toMatchObject({ pc: 4, name: 'ADD', size: 1 })
+    expect(rows[3]).toMatchObject({ pc: 5, name: 'STOP', size: 1 })
+  })
+
+  it('disassembles EIP-8024 opcodes with immediates', async () => {
+    const evm = await createAmsterdamEvm()
+    const code = new Uint8Array([0xe6, 0x10, 0xe7, 0x10, 0xe8, 0x8e, 0x00])
+
+    const rows = disassembleBytecode(code, evm.common)
+
+    expect(rows.map((r) => r.name)).toEqual(['DUPN 0x10', 'SWAPN 0x10', 'EXCHANGE 0x8e', 'STOP'])
+    expect(rows.map((r) => r.rawBytes)).toEqual(['e6 10', 'e7 10', 'e8 8e', '00'])
+  })
+})
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/eip8024Immediate.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/eip8024Immediate.spec.ts
new file mode 100644
index 0000000..62f4028
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/eip8024Immediate.spec.ts
@@ -0,0 +1,154 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  decodeDupnSwapnOperand,
+  decodeExchangeOperands,
+  encodeDupnFromStackDepth,
+  encodeDupnSwapnImmediate,
+  encodeExchangeFromStackDepths,
+  encodeExchangeImmediate,
+  encodeSwapnFromSwapDepth,
+  exchangeOperandToStackDepth,
+  explainDupnImmediate,
+  explainExchangeImmediate,
+  explainSwapnImmediate,
+  isValidExchangeImmediateByte,
+} from '../eip8024Immediate'
+
+describe('eip8024Immediate', () => {
+  describe('DUPN / SWAPN decode_single', () => {
+    it('decodes 0x80 to n=17', () => {
+      expect(decodeDupnSwapnOperand(0x80)).toBe(17)
+    })
+
+    it('encodes depth 17 to 0x80 and round-trips', () => {
+      const encoded = encodeDupnFromStackDepth(17)
+      expect(encoded.ok).toBe(true)
+      if (!encoded.ok) return
+      expect(encoded.immediateHex).toBe('0x80')
+      expect(decodeDupnSwapnOperand(encoded.immediate)).toBe(17)
+    })
+
+    it('builds DUPN summary for 0x80', () => {
+      const breakdown = explainDupnImmediate(0x80)
+      expect(breakdown.summary).toBe('0x80 → n=17 → copy depth 17')
+      expect(breakdown.expertSteps).toHaveLength(4)
+    })
+
+    it('encodes SWAPN swap depth 18 via n=17', () => {
+      const encoded = encodeSwapnFromSwapDepth(18)
+      expect(encoded.ok).toBe(true)
+      if (!encoded.ok) return
+      expect(encoded.immediateHex).toBe('0x80')
+      expect(encoded.operandN).toBe(17)
+    })
+
+    it('builds SWAPN summary for 0x80', () => {
+      const breakdown = explainSwapnImmediate(0x80)
+      expect(breakdown.summary).toBe('0x80 → n=17 → swap top with depth 18')
+    })
+
+    it('rejects SWAPN swap depth 17 (needs depth 18+)', () => {
+      expect(encodeSwapnFromSwapDepth(17).ok).toBe(false)
+    })
+
+    it('rejects DUPN depth below 17', () => {
+      expect(encodeDupnFromStackDepth(16).ok).toBe(false)
+    })
+
+    it('round-trips encodeDupnSwapnImmediate with decodeDupnSwapnOperand', () => {
+      for (let n = 17; n <= 235; n++) {
+        const encoded = encodeDupnSwapnImmediate(n)
+        expect(encoded.ok).toBe(true)
+        if (!encoded.ok) return
+        expect(decodeDupnSwapnOperand(encoded.immediate)).toBe(n)
+      }
+    })
+  })
+
+  describe('EXCHANGE decode_pair', () => {
+    it('decodes 0x8e to operands 1, 2 (stack depths 2 & 3)', () => {
+      expect(decodeExchangeOperands(0x8e)).toEqual([1, 2])
+      expect(exchangeOperandToStackDepth(1)).toBe(2)
+      expect(exchangeOperandToStackDepth(2)).toBe(3)
+    })
+
+    it('decodes EIP example 0x9d to operands 2, 3', () => {
+      expect(decodeExchangeOperands(0x9d)).toEqual([2, 3])
+    })
+
+    it('builds summary for 0x8e', () => {
+      const breakdown = explainExchangeImmediate(0x8e)
+      expect(breakdown.summary).toBe('0x8e → n=1, m=2 → depths 2 & 3')
+    })
+
+    it('documents XOR and nibble split for 0x8e in expert steps', () => {
+      const breakdown = explainExchangeImmediate(0x8e)
+      expect(breakdown.k).toBe(1)
+      expect(breakdown.q).toBe(0)
+      expect(breakdown.r).toBe(1)
+      expect(breakdown.usedLessThanBranch).toBe(true)
+      expect(breakdown.expertSteps).toHaveLength(5)
+      expect(breakdown.expertSteps[1]?.detail).toContain('XOR 0x8f = 0x01')
+      expect(breakdown.expertSteps[4]?.detail).toContain('depth 2 ↔ depth 3')
+    })
+
+    describe('encodeExchangeImmediate', () => {
+      it('encodes operands 1, 2 to 0x8e', () => {
+        const result = encodeExchangeImmediate(1, 2)
+        expect(result.ok).toBe(true)
+        if (!result.ok) return
+        expect(result.immediateHex).toBe('0x8e')
+        expect(result.stackDepthA).toBe(2)
+        expect(result.stackDepthB).toBe(3)
+      })
+
+      it('encodes operands 2, 3 to 0x9d (EIP example)', () => {
+        const result = encodeExchangeImmediate(2, 3)
+        expect(result.ok).toBe(true)
+        if (!result.ok) return
+        expect(result.immediateHex).toBe('0x9d')
+      })
+
+      it('round-trips with decodeExchangeOperands', () => {
+        for (const immediate of [0x8e, 0x9d, 0x80, 0xff]) {
+          if (!isValidExchangeImmediateByte(immediate)) continue
+          const [n, m] = decodeExchangeOperands(immediate)
+          const encoded = encodeExchangeImmediate(n, m)
+          expect(encoded.ok).toBe(true)
+          if (!encoded.ok) return
+          expect(encoded.immediate).toBe(immediate)
+        }
+      })
+
+      it('rejects operands with n >= m', () => {
+        expect(encodeExchangeImmediate(2, 2).ok).toBe(false)
+        expect(encodeExchangeImmediate(3, 2).ok).toBe(false)
+      })
+
+      it('rejects operands where n + m > 30', () => {
+        expect(encodeExchangeImmediate(15, 16).ok).toBe(false)
+      })
+    })
+
+    describe('encodeExchangeFromStackDepths', () => {
+      it('encodes stack depths 2 & 3 to 0x8e regardless of input order', () => {
+        expect(encodeExchangeFromStackDepths(2, 3).ok).toBe(true)
+        const forward = encodeExchangeFromStackDepths(2, 3)
+        const reverse = encodeExchangeFromStackDepths(3, 2)
+        expect(forward.ok && reverse.ok).toBe(true)
+        if (!forward.ok || !reverse.ok) return
+        expect(forward.immediateHex).toBe('0x8e')
+        expect(reverse.immediateHex).toBe('0x8e')
+      })
+
+      it('rejects depth 1 (the top item)', () => {
+        expect(encodeExchangeFromStackDepths(1, 3).ok).toBe(false)
+      })
+
+      it('rejects identical depths', () => {
+        expect(encodeExchangeFromStackDepths(4, 4).ok).toBe(false)
+      })
+    })
+  })
+})
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/opcodeExplain.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/opcodeExplain.spec.ts
new file mode 100644
index 0000000..93bca62
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/opcodeExplain.spec.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+
+import { explainInstruction } from '../opcodeExplain'
+import type { InstructionRow } from '../types'
+
+function row(
+  partial: Partial<InstructionRow> &
+    Pick<InstructionRow, 'pc' | 'opcodeByte' | 'name' | 'rawBytes'>,
+): InstructionRow {
+  return { size: 1, ...partial }
+}
+
+describe('explainInstruction', () => {
+  it('explains PUSH with decimal value', () => {
+    expect(
+      explainInstruction(
+        row({
+          pc: 0,
+          opcodeByte: 0x60,
+          name: 'PUSH1 0x02',
+          rawBytes: '60 02',
+          size: 2,
+          immediateHex: '0x02',
+        }),
+      ),
+    ).toBe('Push 2 onto the stack')
+  })
+
+  it('explains ADD', () => {
+    expect(explainInstruction(row({ pc: 4, opcodeByte: 0x01, name: 'ADD', rawBytes: '01' }))).toBe(
+      'Pop two values, add them, and push the result',
+    )
+  })
+
+  it('explains DUP1', () => {
+    expect(explainInstruction(row({ pc: 0, opcodeByte: 0x80, name: 'DUP1', rawBytes: '80' }))).toBe(
+      'Copy the stack item at depth 1 (top) onto the top of the stack',
+    )
+  })
+
+  it('explains DUPN with decoded depth', () => {
+    expect(
+      explainInstruction(
+        row({
+          pc: 36,
+          opcodeByte: 0xe6,
+          name: 'DUPN 0x80',
+          rawBytes: 'e6 80',
+          size: 2,
+        }),
+      ),
+    ).toBe('Copy the stack item at depth 17 onto the top of the stack (some immediate magic!)')
+  })
+
+  it('explains EXCHANGE with decoded depths', () => {
+    expect(
+      explainInstruction(
+        row({
+          pc: 40,
+          opcodeByte: 0xe8,
+          name: 'EXCHANGE 0x8e',
+          rawBytes: 'e8 8e',
+          size: 2,
+        }),
+      ),
+    ).toBe('Swap the stack item at depth 2 with the stack item at depth 3 (some immediate magic!)')
+  })
+
+  it('explains STOP', () => {
+    expect(explainInstruction(row({ pc: 5, opcodeByte: 0x00, name: 'STOP', rawBytes: '00' }))).toBe(
+      'Halt execution',
+    )
+  })
+})
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/runBytecode.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/runBytecode.spec.ts
new file mode 100644
index 0000000..68174aa
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/runBytecode.spec.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest'
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import { dupnBytecode } from '@/explorations/eip-8024/bytecode'
+
+import { createStepGate, runBytecode } from '../runBytecode'
+
+const PUSH1_STOP = new Uint8Array([0x60, 0x01, 0x00])
+
+async function createAmsterdamEvm() {
+  const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+  return createEVM({ common })
+}
+
+describe('runBytecode', () => {
+  it('runs push-add to completion and records step events', async () => {
+    const evm = await createAmsterdamEvm()
+    const code = new Uint8Array([0x60, 0x01, 0x60, 0x02, 0x01, 0x00])
+    const recorded: number[] = []
+
+    const result = await runBytecode({
+      evm,
+      code,
+      gasLimit: 1_000_000n,
+      stepMode: false,
+      onStep: (_snap, index) => {
+        recorded.push(index)
+      },
+      shouldAbort: () => false,
+    })
+
+    expect(recorded).toHaveLength(4)
+    expect(result.executionGasUsed).toBeTypeOf('bigint')
+    expect(result.executionGasUsed).toBeGreaterThan(0n)
+    expect(result.exceptionError).toBeUndefined()
+  })
+
+  it('step gate pauses between opcodes', async () => {
+    const evm = await createAmsterdamEvm()
+    const gate = createStepGate()
+    let stepCount = 0
+
+    const runPromise = runBytecode({
+      evm,
+      code: PUSH1_STOP,
+      gasLimit: 1_000_000n,
+      stepMode: true,
+      stepGate: gate,
+      onStep: () => {
+        stepCount++
+      },
+      shouldAbort: () => false,
+    })
+
+    await viWaitFor(() => stepCount === 1)
+    gate.advance()
+
+    await viWaitFor(() => stepCount === 2)
+    gate.advance()
+
+    const result = await runPromise
+    expect(stepCount).toBe(2)
+    expect(result.exceptionError).toBeUndefined()
+  })
+
+  it('DUPN duplicates stack item at depth 17 onto top', async () => {
+    const evm = await createAmsterdamEvm()
+    const code = dupnBytecode()
+
+    const result = await runBytecode({
+      evm,
+      code,
+      gasLimit: 1_000_000n,
+      stepMode: false,
+      onStep: () => {},
+      shouldAbort: () => false,
+    })
+
+    const stack = result.runState?.stack
+    expect(stack).toBeDefined()
+    const top = stack!
+      .peek(3)
+      .map((w) => Number(w))
+      .reverse()
+    expect(top).toEqual([16, 17, 1])
+  })
+})
+
+async function viWaitFor(predicate: () => boolean, timeoutMs = 2000): Promise<void> {
+  const start = Date.now()
+  while (!predicate()) {
+    if (Date.now() - start > timeoutMs) {
+      throw new Error('viWaitFor timeout')
+    }
+    await new Promise((r) => setTimeout(r, 10))
+  }
+}
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/stackDepth.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/stackDepth.spec.ts
new file mode 100644
index 0000000..9cab4c1
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/stackDepth.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { depthFromIndex, exchangeOperandToDepth } from '../stackDepth'
+
+describe('stackDepth', () => {
+  it('maps stack index to depth from top', () => {
+    expect(depthFromIndex(0)).toBe(1)
+    expect(depthFromIndex(16)).toBe(17)
+  })
+
+  it('maps EXCHANGE below-top operands to stack depth', () => {
+    expect(exchangeOperandToDepth(1)).toBe(2)
+    expect(exchangeOperandToDepth(2)).toBe(3)
+  })
+})
diff --git a/src/eComponents/bytecodeStepperEC/__tests__/useBytecodeStepper.spec.ts b/src/eComponents/bytecodeStepperEC/__tests__/useBytecodeStepper.spec.ts
new file mode 100644
index 0000000..66c8ba3
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/__tests__/useBytecodeStepper.spec.ts
@@ -0,0 +1,181 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ query: {} }),
+  useRouter: () => ({ resolve: vi.fn(() => ({ href: '' })) }),
+}))
+
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import type { Examples } from '@/explorations/REGISTRY'
+
+import type { BytecodeStepperConfig } from '../types'
+import { useBytecodeStepper } from '../useBytecodeStepper'
+
+const config: BytecodeStepperConfig = {
+  explorationId: 'test',
+  defaultExample: 'push-add',
+}
+
+const examples: Examples = {
+  'push-add': { title: 'Push + Add', values: ['600160020100'] },
+  'push-stop': { title: 'Push + Stop', values: ['60016000'] },
+}
+
+async function createEvm() {
+  const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+  return createEVM({ common })
+}
+
+describe('useBytecodeStepper', () => {
+  it('loads default example on init and arms step mode', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+
+    await state.init(examples)
+
+    expect(state.bytecodeHex.value).toBe('600160020100')
+    expect(state.instructions.value.length).toBeGreaterThan(0)
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+    expect(state.steps.value.length).toBeGreaterThan(0)
+  })
+
+  it('bytecode change clears execution state and re-arms at PC 0', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await state.runAll()
+    expect(state.mode.value).toBe('finished')
+
+    state.bytecodeHex.value = '60006000'
+    await state.onBytecodeChange()
+
+    expect(state.execResult.value).toBeUndefined()
+    expect(state.mode.value).toBe('stepping')
+    expect(state.currentSnapshot.value?.pc).toBe(0)
+    expect(state.currentSnapshot.value?.stack).toEqual([])
+    expect(state.steps.value).toHaveLength(1)
+  })
+
+  it('switching example clears execution state and re-arms at PC 0', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await state.runAll()
+    expect(state.execResult.value).toBeDefined()
+
+    state.example.value = 'push-stop'
+    await state.selectExample(examples)
+
+    expect(state.bytecodeHex.value).toBe('60016000')
+    expect(state.execResult.value).toBeUndefined()
+    expect(state.mode.value).toBe('stepping')
+    expect(state.currentSnapshot.value?.pc).toBe(0)
+    expect(state.currentSnapshot.value?.stack).toEqual([])
+    expect(state.steps.value).toHaveLength(1)
+  })
+
+  it('switching example after stepping clears stack progress', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+    await state.stepOnce()
+    await state.stepOnce()
+    await vi.waitFor(() => (state.currentSnapshot.value?.stack.length ?? 0) > 0, {
+      timeout: 2000,
+    })
+
+    state.example.value = 'push-stop'
+    await state.selectExample(examples)
+
+    expect(state.currentSnapshot.value?.pc).toBe(0)
+    expect(state.currentSnapshot.value?.stack).toEqual([])
+    expect(state.mode.value).toBe('stepping')
+  })
+
+  it('reset preserves bytecode and re-arms step mode', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await state.runAll()
+    await state.reset()
+
+    expect(state.bytecodeHex.value).toBe('600160020100')
+    expect(state.execResult.value).toBeUndefined()
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+    expect(state.currentSnapshot.value?.pc).toBe(0)
+    expect(state.currentSnapshot.value?.stack).toEqual([])
+  })
+
+  it('reset during stepping clears stack and returns to first opcode', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+    await state.stepOnce()
+    await state.stepOnce()
+    await vi.waitFor(() => (state.currentSnapshot.value?.stack.length ?? 0) > 0, {
+      timeout: 2000,
+    })
+
+    await state.reset()
+
+    expect(state.execResult.value).toBeUndefined()
+    expect(state.error.value).toBeUndefined()
+    expect(state.mode.value).toBe('stepping')
+    expect(state.currentSnapshot.value?.pc).toBe(0)
+    expect(state.currentSnapshot.value?.stack).toEqual([])
+    expect(state.steps.value).toHaveLength(1)
+  })
+
+  it('reset after finished does not restore stale result from prior run', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await state.runAll()
+    expect(state.execResult.value).toBeDefined()
+
+    await state.reset()
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+
+    expect(state.execResult.value).toBeUndefined()
+    expect(state.mode.value).toBe('stepping')
+  })
+
+  it('transitions to finished after run', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await state.runAll()
+
+    expect(state.mode.value).toBe('finished')
+    expect(state.execResult.value).toBeDefined()
+    expect(state.gasUsed.value).toBeGreaterThan(0n)
+  })
+
+  it('stepOnce advances one opcode when already armed', async () => {
+    const evm = await createEvm()
+    const state = useBytecodeStepper(config, evm)
+    await state.init(examples)
+
+    await vi.waitFor(() => state.mode.value === 'stepping', { timeout: 2000 })
+    const pcBefore = state.currentSnapshot.value!.pc
+
+    await state.stepOnce()
+
+    await vi.waitFor(
+      () => state.currentSnapshot.value!.pc !== pcBefore || state.steps.value.length > 1,
+      { timeout: 2000 },
+    )
+    expect(state.mode.value).toBe('stepping')
+  })
+})
diff --git a/src/eComponents/bytecodeStepperEC/bytecodeStepperContext.ts b/src/eComponents/bytecodeStepperEC/bytecodeStepperContext.ts
new file mode 100644
index 0000000..278f358
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/bytecodeStepperContext.ts
@@ -0,0 +1,13 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+import type { InstructionRow, RunMode } from './types'
+
+export interface BytecodeStepperContext {
+  activeInstruction: ComputedRef<InstructionRow | undefined>
+  mode: Ref<RunMode>
+  bytecodeHex: Ref<string>
+  example: Ref<string>
+}
+
+export const BYTECODE_STEPPER_CONTEXT: InjectionKey<BytecodeStepperContext> =
+  Symbol('bytecodeStepperContext')
diff --git a/src/eComponents/bytecodeStepperEC/disassemble.ts b/src/eComponents/bytecodeStepperEC/disassemble.ts
new file mode 100644
index 0000000..64d95fa
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/disassemble.ts
@@ -0,0 +1,67 @@
+import type { Common } from '@ethereumjs/common'
+import { getOpcodesForHF } from '@ethereumjs/evm'
+import { bytesToHex } from '@ethereumjs/util'
+
+import type { InstructionRow } from './types'
+
+const PUSH1 = 0x60
+const PUSH32 = 0x7f
+const DUPN = 0xe6
+const SWAPN = 0xe7
+const EXCHANGE = 0xe8
+
+function instructionSize(opcodeByte: number): number {
+  if (opcodeByte >= PUSH1 && opcodeByte <= PUSH32) {
+    return 1 + (opcodeByte - PUSH1 + 1)
+  }
+  if (opcodeByte === DUPN || opcodeByte === SWAPN || opcodeByte === EXCHANGE) {
+    return 2
+  }
+  return 1
+}
+
+function formatRawBytes(bytes: Uint8Array): string {
+  return bytesToHex(bytes)
+    .substring(2)
+    .match(/.{1,2}/g)!
+    .join(' ')
+}
+
+function formatName(opcodeByte: number, name: string, immediate?: Uint8Array): string {
+  if (!immediate || immediate.length === 0) {
+    return name
+  }
+  const immHex = bytesToHex(immediate).substring(2)
+  if (opcodeByte >= PUSH1 && opcodeByte <= PUSH32) {
+    return `PUSH${immediate.length} 0x${immHex}`
+  }
+  return `${name} 0x${immHex}`
+}
+
+export function disassembleBytecode(code: Uint8Array, common: Common): InstructionRow[] {
+  const opcodes = getOpcodesForHF(common).opcodes
+  const rows: InstructionRow[] = []
+  let pc = 0
+
+  while (pc < code.length) {
+    const opcodeByte = code[pc]
+    const opcode = opcodes.get(opcodeByte)
+    const name = opcode?.name ?? `UNKNOWN(0x${opcodeByte.toString(16)})`
+    const size = instructionSize(opcodeByte)
+    const immediate = size > 1 ? code.subarray(pc + 1, pc + size) : undefined
+    const instructionBytes = code.subarray(pc, pc + size)
+
+    rows.push({
+      pc,
+      opcodeByte,
+      name: formatName(opcodeByte, name, immediate),
+      immediateHex: immediate ? bytesToHex(immediate) : undefined,
+      size,
+      rawBytes: formatRawBytes(instructionBytes),
+    })
+
+    pc += size
+  }
+
+  return rows
+}
diff --git a/src/eComponents/bytecodeStepperEC/eip8024Immediate.ts b/src/eComponents/bytecodeStepperEC/eip8024Immediate.ts
new file mode 100644
index 0000000..c44180e
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/eip8024Immediate.ts
@@ -0,0 +1,390 @@
+/** EIP-8024 DUPN / SWAPN / EXCHANGE immediate encode & decode (mirrors @ethereumjs/evm). */
+
+export const DUPN_OPCODE = 0xe6
+export const SWAPN_OPCODE = 0xe7
+export const EXCHANGE_OPCODE = 0xe8
+
+export const DUPN_SWAPN_MIN_DEPTH = 17
+export const DUPN_SWAPN_MAX_DEPTH = 235
+
+export const EXCHANGE_XOR_MASK = 0x8f // decimal 143
+
+export type Eip8024ImmediateKind = 'dupn' | 'swapn' | 'exchange'
+
+export interface ExpertStep {
+  label: string
+  detail: string
+}
+
+export interface Eip8024ImmediateBreakdown {
+  kind: Eip8024ImmediateKind
+  opcodeName: string
+  immediateHex: string
+  immediateDec: number
+  summary: string
+  intro: string
+  expertSteps: ExpertStep[]
+}
+
+export interface DupnSwapnBreakdown extends Eip8024ImmediateBreakdown {
+  kind: 'dupn' | 'swapn'
+  operandN: number
+  stackDepth: number
+  swapTargetDepth?: number
+}
+
+export interface ExchangeBreakdown extends Eip8024ImmediateBreakdown {
+  kind: 'exchange'
+  k: number
+  kHex: string
+  q: number
+  r: number
+  operandA: number
+  operandB: number
+  stackDepthA: number
+  stackDepthB: number
+  usedLessThanBranch: boolean
+}
+
+export type AnyImmediateBreakdown = DupnSwapnBreakdown | ExchangeBreakdown
+
+export function isEip8024ImmediateOpcode(opcodeByte: number): opcodeByte is number {
+  return opcodeByte === DUPN_OPCODE || opcodeByte === SWAPN_OPCODE || opcodeByte === EXCHANGE_OPCODE
+}
+
+export function opcodeKindFromByte(opcodeByte: number): Eip8024ImmediateKind | undefined {
+  if (opcodeByte === DUPN_OPCODE) return 'dupn'
+  if (opcodeByte === SWAPN_OPCODE) return 'swapn'
+  if (opcodeByte === EXCHANGE_OPCODE) return 'exchange'
+  return undefined
+}
+
+export function immediateByteFromRow(rawBytes: string): number | undefined {
+  const parts = rawBytes.trim().split(/\s+/)
+  if (parts.length < 2) return undefined
+  return parseInt(parts[1]!, 16)
+}
+
+// --- DUPN / SWAPN (decode_single) ---
+
+export function decodeDupnSwapnOperand(immediate: number): number {
+  return (immediate + 145) & 0xff
+}
+
+export function isValidDupnSwapnImmediateByte(immediate: number): boolean {
+  return (immediate >= 0 && immediate <= 90) || (immediate >= 128 && immediate <= 255)
+}
+
+export function validateDupnSwapnDepth(depth: number): string | undefined {
+  if (!Number.isInteger(depth)) return 'Depth must be a whole number'
+  if (depth < DUPN_SWAPN_MIN_DEPTH || depth > DUPN_SWAPN_MAX_DEPTH) {
+    return `Depth must be between ${DUPN_SWAPN_MIN_DEPTH} and ${DUPN_SWAPN_MAX_DEPTH}`
+  }
+  return undefined
+}
+
+export function encodeDupnSwapnImmediate(operandN: number): EncodeDupnSwapnResult {
+  const err = validateDupnSwapnDepth(operandN)
+  if (err) return { ok: false, error: err }
+
+  const immediate = (operandN + 111) & 0xff
+  if (!isValidDupnSwapnImmediateByte(immediate)) {
+    return {
+      ok: false,
+      error: `Encoded byte 0x${immediate.toString(16).padStart(2, '0')} is reserved/invalid for DUPN/SWAPN`,
+    }
+  }
+  return {
+    ok: true,
+    immediate,
+    immediateHex: `0x${immediate.toString(16).padStart(2, '0')}`,
+    operandN,
+  }
+}
+
+export type EncodeDupnSwapnResult =
+  | { ok: true; immediate: number; immediateHex: string; operandN: number }
+  | { ok: false; error: string }
+
+export function encodeDupnFromStackDepth(depth: number): EncodeDupnSwapnResult {
+  if (!Number.isInteger(depth)) return { ok: false, error: 'Depth must be a whole number' }
+  if (depth < DUPN_SWAPN_MIN_DEPTH) {
+    return { ok: false, error: `DUPN depth must be at least ${DUPN_SWAPN_MIN_DEPTH}` }
+  }
+  return encodeDupnSwapnImmediate(depth)
+}
+
+export function encodeSwapnFromSwapDepth(swapDepth: number): EncodeDupnSwapnResult {
+  if (!Number.isInteger(swapDepth)) return { ok: false, error: 'Depth must be a whole number' }
+  if (swapDepth < DUPN_SWAPN_MIN_DEPTH + 1) {
+    return {
+      ok: false,
+      error: `SWAPN swap target must be depth ${DUPN_SWAPN_MIN_DEPTH + 1} or deeper`,
+    }
+  }
+  return encodeDupnSwapnImmediate(swapDepth - 1)
+}
+
+export function explainDupnImmediate(immediate: number): DupnSwapnBreakdown {
+  const operandN = decodeDupnSwapnOperand(immediate)
+  const immHex = `0x${immediate.toString(16).padStart(2, '0')}`
+
+  return {
+    kind: 'dupn',
+    opcodeName: 'DUPN',
+    immediateHex: immHex,
+    immediateDec: immediate,
+    summary: `${immHex} → n=${operandN} → copy depth ${operandN}`,
+    intro:
+      'DUPN uses the same single-byte encoding as SWAPN: one immediate maps to one stack index n (17–235).',
+    operandN,
+    stackDepth: operandN,
+    expertSteps: [
+      {
+        label: '1. Read the immediate byte',
+        detail: `The byte after DUPN is ${immHex} (decimal ${immediate}). It is not a stack depth directly — it encodes n.`,
+      },
+      {
+        label: '2. Decode with the linear formula',
+        detail: `n = (immediate + 145) mod 256 → (${immediate} + 145) mod 256 = ${operandN}.`,
+      },
+      {
+        label: '3. Check the valid range',
+        detail: `EIP-8024 allows ${DUPN_SWAPN_MIN_DEPTH} ≤ n ≤ ${DUPN_SWAPN_MAX_DEPTH}. Bytes with 90 < immediate < 128 are forbidden (JUMPDEST / PUSH safety).`,
+      },
+      {
+        label: '4. Map to stack action',
+        detail: `DUPN n copies the stack item at depth n onto the top. Here: copy depth ${operandN}.`,
+      },
+    ],
+  }
+}
+
+export function explainSwapnImmediate(immediate: number): DupnSwapnBreakdown {
+  const operandN = decodeDupnSwapnOperand(immediate)
+  const swapDepth = operandN + 1
+  const immHex = `0x${immediate.toString(16).padStart(2, '0')}`
+
+  return {
+    kind: 'swapn',
+    opcodeName: 'SWAPN',
+    immediateHex: immHex,
+    immediateDec: immediate,
+    summary: `${immHex} → n=${operandN} → swap top with depth ${swapDepth}`,
+    intro:
+      'SWAPN shares DUPN’s immediate encoding, but swaps the top item with the stack slot at depth n + 1.',
+    operandN,
+    stackDepth: swapDepth,
+    swapTargetDepth: swapDepth,
+    expertSteps: [
+      {
+        label: '1. Read the immediate byte',
+        detail: `The byte after SWAPN is ${immHex} (decimal ${immediate}). Same encoding family as DUPN.`,
+      },
+      {
+        label: '2. Decode with the linear formula',
+        detail: `n = (immediate + 145) mod 256 → (${immediate} + 145) mod 256 = ${operandN}.`,
+      },
+      {
+        label: '3. Check the valid range',
+        detail: `EIP-8024 allows ${DUPN_SWAPN_MIN_DEPTH} ≤ n ≤ ${DUPN_SWAPN_MAX_DEPTH}. You need at least n + 1 items on the stack.`,
+      },
+      {
+        label: '4. Map to stack action',
+        detail: `SWAPN n swaps the top with depth n + 1 (like SWAP1 targets depth 2). Here: swap top ↔ depth ${swapDepth}.`,
+      },
+    ],
+  }
+}
+
+// --- EXCHANGE (decode_pair) ---
+
+export function decodeExchangeOperands(immediate: number): [number, number] {
+  const k = immediate ^ EXCHANGE_XOR_MASK
+  const q = (k >> 4) & 0xf
+  const r = k & 0xf
+  if (q < r) {
+    return [q + 1, r + 1]
+  }
+  return [r + 1, 29 - q]
+}
+
+export function exchangeOperandToStackDepth(operand: number): number {
+  return operand + 1
+}
+
+export function explainExchangeImmediate(immediate: number): ExchangeBreakdown {
+  const k = immediate ^ EXCHANGE_XOR_MASK
+  const q = (k >> 4) & 0xf
+  const r = k & 0xf
+  const usedLessThanBranch = q < r
+  const [operandA, operandB] = decodeExchangeOperands(immediate)
+  const stackDepthA = exchangeOperandToStackDepth(operandA)
+  const stackDepthB = exchangeOperandToStackDepth(operandB)
+  const immHex = `0x${immediate.toString(16).padStart(2, '0')}`
+
+  const branchNote = usedLessThanBranch
+    ? `q (${q}) < r (${r}), so operands are (q+1, r+1)`
+    : `q (${q}) ≥ r (${r}), so operands are (r+1, 29−q)`
+
+  return {
+    kind: 'exchange',
+    opcodeName: 'EXCHANGE',
+    immediateHex: immHex,
+    immediateDec: immediate,
+    summary: `${immHex} → n=${operandA}, m=${operandB} → depths ${stackDepthA} & ${stackDepthB}`,
+    intro:
+      'EXCHANGE packs two stack positions into one byte using XOR + nibble splitting — different from DUPN/SWAPN.',
+    k,
+    kHex: `0x${k.toString(16).padStart(2, '0')}`,
+    q,
+    r,
+    operandA,
+    operandB,
+    stackDepthA,
+    stackDepthB,
+    usedLessThanBranch,
+    expertSteps: [
+      {
+        label: '1. Read the immediate byte',
+        detail: `The byte after EXCHANGE is ${immHex} (decimal ${immediate}). It encodes two operands, not one depth.`,
+      },
+      {
+        label: '2. XOR with the fixed mask 143 (0x8f)',
+        detail: `${immHex} XOR 0x8f = 0x${k.toString(16).padStart(2, '0')}. This keeps immediates out of the JUMPDEST / PUSH range.`,
+      },
+      {
+        label: '3. Split into two 4-bit fields',
+        detail: `k = ${k}: high nibble q = ${q}, low nibble r = ${r}.`,
+      },
+      {
+        label: '4. Decode the operand pair',
+        detail: `${branchNote} → operands n=${operandA}, m=${operandB}.`,
+      },
+      {
+        label: '5. Map to stack depths',
+        detail: `EXCHANGE n m swaps depths n+1 and m+1. Here: depth ${stackDepthA} ↔ depth ${stackDepthB}.`,
+      },
+    ],
+  }
+}
+
+export function explainEip8024Immediate(
+  kind: Eip8024ImmediateKind,
+  immediate: number,
+): AnyImmediateBreakdown {
+  switch (kind) {
+    case 'dupn':
+      return explainDupnImmediate(immediate)
+    case 'swapn':
+      return explainSwapnImmediate(immediate)
+    case 'exchange':
+      return explainExchangeImmediate(immediate)
+  }
+}
+
+export type EncodeExchangeResult =
+  | {
+      ok: true
+      immediate: number
+      immediateHex: string
+      operandA: number
+      operandB: number
+      stackDepthA: number
+      stackDepthB: number
+    }
+  | { ok: false; error: string }
+
+export function validateExchangeOperands(n: number, m: number): string | undefined {
+  if (!Number.isInteger(n) || !Number.isInteger(m)) {
+    return 'Operands must be whole numbers'
+  }
+  if (n < 1 || m < 1) {
+    return 'Operands must be at least 1 (stack depth 2 or deeper)'
+  }
+  if (n >= m) {
+    return 'First operand n must be less than second operand m'
+  }
+  if (n + m > 30) {
+    return 'n + m must be at most 30 (EIP-8024 limit)'
+  }
+  return undefined
+}
+
+export function isValidExchangeImmediateByte(immediate: number): boolean {
+  return (immediate >= 0 && immediate <= 81) || (immediate >= 128 && immediate <= 255)
+}
+
+export function encodeExchangeImmediate(n: number, m: number): EncodeExchangeResult {
+  const validationError = validateExchangeOperands(n, m)
+  if (validationError) {
+    return { ok: false, error: validationError }
+  }
+
+  let q: number
+  let r: number
+  if (m <= 16) {
+    q = n - 1
+    r = m - 1
+  } else {
+    q = 29 - m
+    r = n - 1
+  }
+
+  const k = 16 * q + r
+  const immediate = k ^ EXCHANGE_XOR_MASK
+
+  if (!isValidExchangeImmediateByte(immediate)) {
+    return {
+      ok: false,
+      error: `Encoded byte 0x${immediate.toString(16).padStart(2, '0')} is reserved/invalid for EXCHANGE`,
+    }
+  }
+
+  return {
+    ok: true,
+    immediate,
+    immediateHex: `0x${immediate.toString(16).padStart(2, '0')}`,
+    operandA: n,
+    operandB: m,
+    stackDepthA: exchangeOperandToStackDepth(n),
+    stackDepthB: exchangeOperandToStackDepth(m),
+  }
+}
+
+export function encodeExchangeFromStackDepths(
+  depthA: number,
+  depthB: number,
+): EncodeExchangeResult {
+  if (!Number.isInteger(depthA) || !Number.isInteger(depthB)) {
+    return { ok: false, error: 'Stack depths must be whole numbers' }
+  }
+  if (depthA < 2 || depthB < 2) {
+    return { ok: false, error: 'Stack depths must be at least 2 (depth 1 is the top)' }
+  }
+  if (depthA === depthB) {
+    return { ok: false, error: 'Choose two different stack depths' }
+  }
+
+  const n = Math.min(depthA, depthB) - 1
+  const m = Math.max(depthA, depthB) - 1
+  return encodeExchangeImmediate(n, m)
+}
+
+export function formatDupnEncodeResult(
+  result: Extract<EncodeDupnSwapnResult, { ok: true }>,
+): string {
+  return `depth ${result.operandN} → n=${result.operandN} → ${result.immediateHex}`
+}
+
+export function formatSwapnEncodeResult(
+  result: Extract<EncodeDupnSwapnResult, { ok: true }>,
+): string {
+  return `depth ${result.operandN + 1} → n=${result.operandN} → ${result.immediateHex}`
+}
+
+export function formatExchangeEncodeResult(
+  result: Extract<EncodeExchangeResult, { ok: true }>,
+): string {
+  return `depths ${result.stackDepthA} & ${result.stackDepthB} → n=${result.operandA}, m=${result.operandB} → ${result.immediateHex}`
+}
diff --git a/src/eComponents/bytecodeStepperEC/opcodeExplain.ts b/src/eComponents/bytecodeStepperEC/opcodeExplain.ts
new file mode 100644
index 0000000..bdca586
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/opcodeExplain.ts
@@ -0,0 +1,189 @@
+import { decodeDupnSwapnOperand, decodeExchangeOperands } from './eip8024Immediate'
+import { depthLabel, exchangeOperandToDepth } from './stackDepth'
+import type { InstructionRow } from './types'
+
+function immediateByte(row: InstructionRow): number | undefined {
+  const parts = row.rawBytes.trim().split(/\s+/)
+  if (parts.length < 2) return undefined
+  return parseInt(parts[1]!, 16)
+}
+
+function immediateMagicSuffix(): string {
+  return ' (some immediate magic!)'
+}
+
+function formatPushValue(row: InstructionRow): string {
+  const hex = row.immediateHex?.replace(/^0x/i, '') ?? row.name.match(/0x[0-9a-f]+/i)?.[0]?.slice(2)
+  if (!hex) return 'a value'
+  const value = BigInt(`0x${hex}`)
+  if (value <= 999_999n) return value.toString()
+  return `0x${hex}`
+}
+
+const STATIC: Record<string, string> = {
+  STOP: 'Halt execution',
+  ADD: 'Pop two values, add them, and push the result',
+  MUL: 'Pop two values, multiply them, and push the product',
+  SUB: 'Pop two values, subtract the top from the second, and push the difference',
+  DIV: 'Pop two values, divide the second by the top (unsigned), and push the quotient',
+  SDIV: 'Pop two values, divide the second by the top (signed), and push the quotient',
+  MOD: 'Pop two values, take the remainder of unsigned division, and push it',
+  SMOD: 'Pop two values, take the remainder of signed division, and push it',
+  ADDMOD: 'Pop three values, compute (a + b) mod N, and push the result',
+  MULMOD: 'Pop three values, compute (a × b) mod N, and push the result',
+  EXP: 'Pop base and exponent, raise base to the exponent, and push the result',
+  SIGNEXTEND: 'Sign-extend a value to a wider byte width and push the result',
+  LT: 'Pop two values, compare (unsigned), and push 1 if the second is less than the top',
+  GT: 'Pop two values, compare (unsigned), and push 1 if the second is greater than the top',
+  SLT: 'Pop two values, compare (signed), and push 1 if the second is less than the top',
+  SGT: 'Pop two values, compare (signed), and push 1 if the second is greater than the top',
+  EQ: 'Pop two values, compare for equality, and push 1 if they match',
+  ISZERO: 'Pop a value and push 1 if it is zero, otherwise 0',
+  AND: 'Pop two values, bitwise AND them, and push the result',
+  OR: 'Pop two values, bitwise OR them, and push the result',
+  XOR: 'Pop two values, bitwise XOR them, and push the result',
+  NOT: 'Pop a value, bitwise NOT it, and push the result',
+  BYTE: 'Pop an index and a word, extract that byte, and push it',
+  SHL: 'Pop shift amount and value, shift left, and push the result',
+  SHR: 'Pop shift amount and value, logical shift right, and push the result',
+  SAR: 'Pop shift amount and value, arithmetic shift right, and push the result',
+  CLZ: 'Pop a value, count leading zero bits, and push the count',
+  KECCAK256: 'Pop offset and length, hash that memory region with Keccak-256, and push the digest',
+  ADDRESS: 'Push the address of the currently executing account',
+  BALANCE: 'Pop an address and push its balance in wei',
+  ORIGIN: 'Push the address that originally started this transaction',
+  CALLER: 'Push the address that called the current code',
+  CALLVALUE: 'Push the wei amount sent with the current call',
+  CALLDATALOAD: 'Pop a byte offset and push the 32-byte calldata word starting there',
+  CALLDATASIZE: 'Push the size of the call input data in bytes',
+  CALLDATACOPY: 'Copy a slice of calldata into memory',
+  CODESIZE: 'Push the size of this contract’s bytecode in bytes',
+  CODECOPY: 'Copy a slice of this contract’s bytecode into memory',
+  GASPRICE: 'Push the gas price of the current transaction',
+  EXTCODESIZE: 'Pop an address and push the size of its runtime bytecode',
+  EXTCODECOPY: 'Copy bytecode from an external account into memory',
+  EXTCODEHASH: 'Pop an address and push the hash of its runtime bytecode',
+  RETURNDATASIZE: 'Push the size of the buffer returned by the last call',
+  RETURNDATACOPY: 'Copy return data from the last call into memory',
+  RETURNDATALOAD: 'Pop an offset and push a word from the last call’s return data',
+  BLOCKHASH: 'Pop a block number and push that block’s hash (if available)',
+  COINBASE: 'Push the current block’s fee recipient address',
+  TIMESTAMP: 'Push the current block’s timestamp',
+  NUMBER: 'Push the current block number',
+  PREVRANDAO: 'Push the current block’s prevrandao value',
+  DIFFICULTY: 'Push the current block’s difficulty (legacy name for prevrandao)',
+  GASLIMIT: 'Push the current block’s gas limit',
+  CHAINID: 'Push the chain ID of the current network',
+  SELFBALANCE: 'Push this contract’s own balance in wei',
+  BASEFEE: 'Push the current block’s base fee per gas',
+  BLOBHASH: 'Pop a blob index and push the versioned hash of that blob',
+  BLOBBASEFEE: 'Push the current block’s blob base fee',
+  SLOTNUM: 'Push the current slot number (consensus layer)',
+  POP: 'Remove the top stack item',
+  MLOAD: 'Pop a memory offset and push the 32-byte word stored there',
+  MSTORE: 'Pop an offset and value, storing the word in memory',
+  MSTORE8: 'Pop an offset and byte value, storing one byte in memory',
+  SLOAD: 'Pop a storage key and push the stored value',
+  SSTORE: 'Pop a key and value, writing to contract storage',
+  TLOAD: 'Pop a transient storage key and push its value',
+  TSTORE: 'Pop a key and value, writing to transient storage',
+  MCOPY: 'Copy a region of memory to another memory region',
+  JUMP: 'Pop a destination PC and jump execution there (must land on JUMPDEST)',
+  JUMPI: 'Pop destination and condition; jump only if the condition is non-zero',
+  PC: 'Push the program counter of this opcode',
+  MSIZE: 'Push the current memory size in bytes',
+  GAS: 'Push the amount of gas still available',
+  JUMPDEST: 'Mark a valid jump destination (no stack effect)',
+  LOG0: 'Emit a log with no indexed topics',
+  LOG1: 'Emit a log with one indexed topic',
+  LOG2: 'Emit a log with two indexed topics',
+  LOG3: 'Emit a log with three indexed topics',
+  LOG4: 'Emit a log with four indexed topics',
+  CREATE: 'Deploy a new contract with value from memory and push its address',
+  CREATE2: 'Deploy a contract with a deterministic address and push it',
+  CALL: 'Message-call another account and push a success flag',
+  CALLCODE: 'Legacy call that runs code in the context of the current account',
+  DELEGATECALL: 'Call another contract’s code without transferring value',
+  STATICCALL: 'Call another contract in read-only (static) mode',
+  RETURN: 'Stop execution and return data from memory',
+  REVERT: 'Revert execution and return revert data from memory',
+  INVALID: 'Consume all remaining gas and fault',
+  SELFDESTRUCT: 'Send remaining balance to an address and destroy this account',
+  DATALOAD: 'Pop an offset and push a word from EOF container data',
+  DATALOADN: 'Push a fixed word from EOF container data (immediate offset)',
+  DATASIZE: 'Push the size of the EOF container data section',
+  DATACOPY: 'Copy a slice of EOF container data into memory',
+  RJUMP: 'Relative jump by a signed immediate offset',
+  RJUMPI: 'Relative jump if the top stack value is non-zero',
+  RJUMPV: 'Relative jump using a jump table indexed by the top stack value',
+  CALLF: 'Call an EOF function by index',
+  RETF: 'Return from the current EOF function',
+  JUMPF: 'Tail-call jump to an EOF function',
+  EOFCREATE: 'Create a contract from EOF initcode and push its address',
+  RETURNCONTRACT: 'Return deployment code for an EOF contract creation',
+  EXTCALL: 'EOF external call and push a status code',
+  EXTDELEGATECALL: 'EOF delegate-style external call',
+  EXTSTATICCALL: 'EOF static external call',
+}
+
+export function explainInstruction(row: InstructionRow): string {
+  const { opcodeByte } = row
+  const base = row.name.split(' ')[0] ?? row.name
+
+  if (opcodeByte === 0x5f) {
+    return 'Push 0 onto the stack'
+  }
+
+  if (opcodeByte >= 0x60 && opcodeByte <= 0x7f) {
+    return `Push ${formatPushValue(row)} onto the stack`
+  }
+
+  if (opcodeByte >= 0x80 && opcodeByte <= 0x8f) {
+    const depth = opcodeByte - 0x80 + 1
+    return `Copy ${depthLabel(depth)} onto the top of the stack`
+  }
+
+  if (opcodeByte >= 0x90 && opcodeByte <= 0x9f) {
+    const depth = opcodeByte - 0x90 + 2
+    return `Swap the top stack item with ${depthLabel(depth)}`
+  }
+
+  if (opcodeByte === 0xe6) {
+    const imm = immediateByte(row)
+    if (imm !== undefined) {
+      const depth = decodeDupnSwapnOperand(imm)
+      return `Copy ${depthLabel(depth)} onto the top of the stack${immediateMagicSuffix()}`
+    }
+    return 'Copy a deep stack item onto the top (DUPN)'
+  }
+
+  if (opcodeByte === 0xe7) {
+    const imm = immediateByte(row)
+    if (imm !== undefined) {
+      const n = decodeDupnSwapnOperand(imm)
+      return `Swap the top stack item with ${depthLabel(n + 1)}${immediateMagicSuffix()}`
+    }
+    return 'Swap the top item with a deep stack item (SWAPN)'
+  }
+
+  if (opcodeByte === 0xe8) {
+    const imm = immediateByte(row)
+    if (imm !== undefined) {
+      const [a, b] = decodeExchangeOperands(imm)
+      return `Swap ${depthLabel(exchangeOperandToDepth(a))} with ${depthLabel(exchangeOperandToDepth(b))}${immediateMagicSuffix()}`
+    }
+    return 'Swap two stack items below the top (EXCHANGE)'
+  }
+
+  if (opcodeByte >= 0xa0 && opcodeByte <= 0xa4) {
+    const topics = opcodeByte - 0xa0
+    return STATIC[`LOG${topics}`] ?? `Emit a log with ${topics} indexed topic(s)`
+  }
+
+  const known = STATIC[base]
+  if (known) {
+    return known
+  }
+
+  return `Execute ${row.name}`
+}
diff --git a/src/eComponents/bytecodeStepperEC/runBytecode.ts b/src/eComponents/bytecodeStepperEC/runBytecode.ts
new file mode 100644
index 0000000..c5570ce
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/runBytecode.ts
@@ -0,0 +1,101 @@
+import type { EVM, ExecResult, InterpreterStep } from '@ethereumjs/evm'
+
+import type { StepSnapshot } from './types'
+
+export function stepToSnapshot(step: InterpreterStep): StepSnapshot {
+  const gasCost = step.opcode.dynamicFee ?? BigInt(step.opcode.fee)
+  const stack = [...step.stack].reverse().map((word) => BigInt(word))
+
+  return {
+    pc: step.pc,
+    opcodeName: step.opcode.name,
+    gasLeft: step.gasLeft,
+    gasCost,
+    stack,
+    memory: step.memory.slice(),
+  }
+}
+
+export interface StepGate {
+  wait(): Promise<void>
+  advance(): void
+  abort(): void
+}
+
+export function createStepGate(): StepGate {
+  let release: (() => void) | undefined
+  let aborted = false
+
+  return {
+    wait(): Promise<void> {
+      if (aborted) {
+        return Promise.reject(new Error('aborted'))
+      }
+      return new Promise<void>((resolve) => {
+        release = resolve
+      })
+    },
+    advance(): void {
+      release?.()
+      release = undefined
+    },
+    abort(): void {
+      aborted = true
+      release?.()
+      release = undefined
+    },
+  }
+}
+
+export interface RunBytecodeOptions {
+  evm: EVM
+  code: Uint8Array
+  gasLimit: bigint
+  stepMode: boolean
+  stepGate?: StepGate
+  onStep: (snapshot: StepSnapshot, index: number) => void
+  shouldAbort: () => boolean
+}
+
+export async function runBytecode(options: RunBytecodeOptions): Promise<ExecResult> {
+  const { evm, code, gasLimit, stepMode, stepGate, onStep, shouldAbort } = options
+
+  evm.events.removeAllListeners('step')
+
+  let stepIndex = 0
+
+  const stepHandler = async (_step: InterpreterStep, resolve?: (result?: unknown) => void) => {
+    if (shouldAbort()) {
+      resolve?.()
+      return
+    }
+
+    const snapshot = stepToSnapshot(_step)
+    onStep(snapshot, stepIndex)
+    stepIndex++
+
+    if (stepMode && stepGate) {
+      try {
+        await stepGate.wait()
+      } catch {
+        resolve?.()
+        return
+      }
+    }
+
+    if (shouldAbort()) {
+      resolve?.()
+      return
+    }
+
+    resolve?.()
+  }
+
+  evm.events.on('step', stepHandler)
+
+  try {
+    return await evm.runCode({ code, gasLimit })
+  } finally {
+    evm.events.off('step', stepHandler)
+  }
+}
diff --git a/src/eComponents/bytecodeStepperEC/stackDepth.ts b/src/eComponents/bytecodeStepperEC/stackDepth.ts
new file mode 100644
index 0000000..e0bd44d
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/stackDepth.ts
@@ -0,0 +1,15 @@
+/** Stack depth counted from the top (1 = top item). Matches DUP/DUPN/SWAPN semantics. */
+
+export function depthFromIndex(index: number): number {
+  return index + 1
+}
+
+/** Depth for EXCHANGE operands: EIP uses 1-based distance below the top. */
+export function exchangeOperandToDepth(belowTop: number): number {
+  return belowTop + 1
+}
+
+export function depthLabel(depth: number): string {
+  if (depth === 1) return 'the stack item at depth 1 (top)'
+  return `the stack item at depth ${depth}`
+}
diff --git a/src/eComponents/bytecodeStepperEC/types.ts b/src/eComponents/bytecodeStepperEC/types.ts
new file mode 100644
index 0000000..5a2ea0b
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/types.ts
@@ -0,0 +1,41 @@
+import type { ExecResult } from '@ethereumjs/evm'
+
+export interface BytecodeStepperConfig {
+  explorationId: string
+  defaultExample: string
+  gasLimit?: bigint
+  maxStackDisplay?: number
+  maxMemoryBytes?: number
+}
+
+export type RunMode = 'idle' | 'stepping' | 'running' | 'finished' | 'error'
+
+export interface InstructionRow {
+  pc: number
+  opcodeByte: number
+  name: string
+  immediateHex?: string
+  size: number
+  /** Spaced hex of this instruction's bytes, e.g. "60 01" — matches the input string at offset pc. */
+  rawBytes: string
+}
+
+export interface StepSnapshot {
+  pc: number
+  opcodeName: string
+  gasLeft: bigint
+  gasCost: bigint
+  stack: bigint[]
+  memory: Uint8Array
+}
+
+export interface BytecodeRunState {
+  bytecodeHex: string
+  instructions: InstructionRow[]
+  mode: RunMode
+  currentStepIndex: number
+  steps: StepSnapshot[]
+  execResult?: ExecResult
+  error?: string
+  gasUsed?: bigint
+}
diff --git a/src/eComponents/bytecodeStepperEC/useBytecodeStepper.ts b/src/eComponents/bytecodeStepperEC/useBytecodeStepper.ts
new file mode 100644
index 0000000..d955548
--- /dev/null
+++ b/src/eComponents/bytecodeStepperEC/useBytecodeStepper.ts
@@ -0,0 +1,239 @@
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import type { EVM, ExecResult } from '@ethereumjs/evm'
+import { hexToBytes } from '@ethereumjs/util'
+
+import type { Examples } from '@/explorations/REGISTRY'
+
+import { isValidByteInputForm } from '../precompileInterfaceEC/utils'
+import { disassembleBytecode } from './disassemble'
+import { createStepGate, runBytecode } from './runBytecode'
+import type { BytecodeStepperConfig, InstructionRow, RunMode, StepSnapshot } from './types'
+
+const DEFAULT_GAS = 1_000_000n
+
+export function useBytecodeStepper(config: BytecodeStepperConfig, evm: EVM) {
+  const bytecodeHex = ref('')
+  const example = ref('')
+  const instructions = ref<InstructionRow[]>([])
+  const mode = ref<RunMode>('idle')
+  const currentStepIndex = ref(-1)
+  const steps = shallowRef<StepSnapshot[]>([])
+  const execResult = shallowRef<ExecResult>()
+  const error = ref<string>()
+
+  const gasLimit = config.gasLimit ?? DEFAULT_GAS
+  const maxStackDisplay = config.maxStackDisplay ?? 12
+  const maxMemoryBytes = config.maxMemoryBytes ?? 64
+
+  let aborted = false
+  let stepGate = createStepGate()
+  let runInFlight: Promise<void> | undefined
+  let runGeneration = 0
+
+  const validationErrors = computed(() => isValidByteInputForm(bytecodeHex.value))
+  const canExecute = computed(
+    () => bytecodeHex.value.length > 0 && validationErrors.value.length === 0,
+  )
+
+  const currentSnapshot = computed(() => {
+    if (currentStepIndex.value < 0) return undefined
+    return steps.value[currentStepIndex.value]
+  })
+
+  const gasUsed = computed(() => {
+    if (execResult.value) {
+      return execResult.value.executionGasUsed
+    }
+    const snap = currentSnapshot.value
+    if (!snap) return undefined
+    return gasLimit - snap.gasLeft
+  })
+
+  const isBusy = computed(() => mode.value === 'running' || mode.value === 'stepping')
+
+  function cleanupExecution() {
+    runGeneration++
+    aborted = true
+    stepGate.abort()
+    evm.events.removeAllListeners('step')
+    runInFlight = undefined
+  }
+
+  function resetExecutionState() {
+    cleanupExecution()
+    aborted = false
+    stepGate = createStepGate()
+    mode.value = 'idle'
+    currentStepIndex.value = -1
+    steps.value = []
+    execResult.value = undefined
+    error.value = undefined
+  }
+
+  function updateDisassembly() {
+    if (!canExecute.value) {
+      instructions.value = []
+      return
+    }
+    const code = hexToBytes(`0x${bytecodeHex.value}`)
+    instructions.value = disassembleBytecode(code, evm.common)
+  }
+
+  /** Reset execution and re-arm stepping for the current bytecode (shared by Reset / edits / examples). */
+  async function rearm() {
+    updateDisassembly()
+    if (!canExecute.value) {
+      resetExecutionState()
+      return
+    }
+    steps.value = []
+    currentStepIndex.value = -1
+    execResult.value = undefined
+    error.value = undefined
+    await executeRun(true)
+    await waitUntilArmed()
+  }
+
+  async function onBytecodeChange() {
+    example.value = ''
+    await rearm()
+  }
+
+  async function selectExample(examples: Examples) {
+    if (example.value === '') return
+    bytecodeHex.value = examples[example.value]!.values[0]
+    await rearm()
+  }
+
+  async function init(examples: Examples) {
+    example.value = config.defaultExample
+    await selectExample(examples)
+  }
+
+  function onStepRecorded(snapshot: StepSnapshot, index: number) {
+    steps.value = [...steps.value, snapshot]
+    currentStepIndex.value = index
+  }
+
+  async function executeRun(stepMode: boolean) {
+    if (!canExecute.value) return
+
+    const previousRun = runInFlight
+    cleanupExecution()
+    aborted = false
+    stepGate = createStepGate()
+    const generation = runGeneration
+    steps.value = []
+    currentStepIndex.value = -1
+    execResult.value = undefined
+    error.value = undefined
+    mode.value = stepMode ? 'stepping' : 'running'
+
+    if (previousRun) {
+      await previousRun.catch(() => {})
+    }
+
+    const code = hexToBytes(`0x${bytecodeHex.value}`)
+
+    const onStep = (snapshot: StepSnapshot, index: number) => {
+      if (generation !== runGeneration) return
+      onStepRecorded(snapshot, index)
+    }
+
+    runInFlight = runBytecode({
+      evm,
+      code,
+      gasLimit,
+      stepMode,
+      stepGate,
+      onStep,
+      shouldAbort: () => aborted || generation !== runGeneration,
+    })
+      .then((result) => {
+        if (generation !== runGeneration) return
+        execResult.value = result
+        if (result.exceptionError) {
+          mode.value = 'error'
+          error.value = result.exceptionError.error
+        } else {
+          mode.value = 'finished'
+        }
+      })
+      .catch((err: unknown) => {
+        if (generation !== runGeneration || aborted) return
+        mode.value = 'error'
+        error.value = err instanceof Error ? err.message : String(err)
+      })
+      .finally(() => {
+        runInFlight = undefined
+      })
+
+    if (!stepMode) {
+      await runInFlight
+    }
+  }
+
+  async function runAll() {
+    if (isBusy.value) {
+      resetExecutionState()
+    }
+    await executeRun(false)
+  }
+
+  async function stepOnce() {
+    if (!canExecute.value) return
+    if (mode.value === 'finished' || mode.value === 'error') return
+
+    if (mode.value === 'idle') {
+      await rearm()
+      return
+    }
+
+    if (mode.value === 'stepping') {
+      stepGate.advance()
+    }
+  }
+
+  async function reset() {
+    await rearm()
+  }
+
+  async function waitUntilArmed(timeoutMs = 2000): Promise<void> {
+    const start = Date.now()
+    while (mode.value !== 'stepping' || steps.value.length !== 1 || steps.value[0]?.pc !== 0) {
+      if (Date.now() - start > timeoutMs) {
+        throw new Error('Timed out waiting for step mode')
+      }
+      await new Promise((r) => setTimeout(r, 10))
+    }
+  }
+
+  onUnmounted(() => {
+    cleanupExecution()
+  })
+
+  return {
+    bytecodeHex,
+    example,
+    instructions,
+    mode,
+    currentStepIndex,
+    steps,
+    execResult,
+    error,
+    validationErrors,
+    canExecute,
+    currentSnapshot,
+    gasUsed,
+    gasLimit,
+    maxStackDisplay,
+    maxMemoryBytes,
+    isBusy,
+    onBytecodeChange,
+    selectExample,
+    init,
+    runAll,
+    stepOnce,
+    reset,
+  }
+}
diff --git a/src/explorations/REGISTRY.ts b/src/explorations/REGISTRY.ts
index df107b5..ade183f 100644
--- a/src/explorations/REGISTRY.ts
+++ b/src/explorations/REGISTRY.ts
@@ -1,12 +1,14 @@
 import { INFO as eip7594 } from './eip-7594/info'
 import { INFO as eip7883 } from './eip-7883/info'
 import { INFO as eip7951 } from './eip-7951/info'
+import { INFO as eip8024 } from './eip-8024/info'
 import type { Tag } from './TAGS'
 
 export const EXPLORATIONS: Explorations = {
   [eip7594.id]: eip7594,
   [eip7883.id]: eip7883,
   [eip7951.id]: eip7951,
+  [eip8024.id]: eip8024,
 }
 
 export interface Examples {
diff --git a/src/explorations/eip-8024/ImmediateQuoVadis.spec.ts b/src/explorations/eip-8024/ImmediateQuoVadis.spec.ts
new file mode 100644
index 0000000..137f397
--- /dev/null
+++ b/src/explorations/eip-8024/ImmediateQuoVadis.spec.ts
@@ -0,0 +1,189 @@
+import { describe, expect, it } from 'vitest'
+import { computed, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+
+import { BYTECODE_STEPPER_CONTEXT } from '@/eComponents/bytecodeStepperEC/bytecodeStepperContext'
+import type { InstructionRow, RunMode } from '@/eComponents/bytecodeStepperEC/types'
+import ImmediateQuoVadis from '@/explorations/eip-8024/ImmediateQuoVadis.vue'
+
+function dupnRow(): InstructionRow {
+  return {
+    pc: 34,
+    opcodeByte: 0xe6,
+    name: 'DUPN 0x80',
+    rawBytes: 'e6 80',
+    size: 2,
+  }
+}
+
+function swapnRow(): InstructionRow {
+  return {
+    pc: 36,
+    opcodeByte: 0xe7,
+    name: 'SWAPN 0x80',
+    rawBytes: 'e7 80',
+    size: 2,
+  }
+}
+
+function exchangeRow(): InstructionRow {
+  return {
+    pc: 8,
+    opcodeByte: 0xe8,
+    name: 'EXCHANGE 0x8e',
+    rawBytes: 'e8 8e',
+    size: 2,
+  }
+}
+
+function mountPanel(
+  overrides: {
+    mode?: RunMode
+    activeInstruction?: InstructionRow
+    bytecodeHex?: string
+    example?: string
+  } = {},
+) {
+  return mount(ImmediateQuoVadis, {
+    props: {
+      mode: overrides.mode ?? 'stepping',
+      activeInstruction: overrides.activeInstruction,
+      bytecodeHex: overrides.bytecodeHex ?? 'abc',
+      example: overrides.example ?? 'exchange',
+    },
+  })
+}
+
+function clickTab(wrapper: ReturnType<typeof mountPanel>, label: string) {
+  const tab = wrapper.findAll('button').find((b) => b.text().includes(label))
+  expect(tab).toBeDefined()
+  return tab!.trigger('click')
+}
+
+describe('ImmediateQuoVadis', () => {
+  it('reserves height while waiting for an EIP-8024 opcode in step mode', () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    expect(wrapper.text()).toContain('DUPN / SWAPN / EXCHANGE — immediate, quo vadis?')
+    expect(wrapper.text()).toContain('Waiting for step mode at a DUPN, SWAPN, or EXCHANGE opcode')
+    expect(wrapper.text()).toContain('🧮 DUPN')
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('DUPN calculator encodes default depth 17 to 0x80 without stepping', async () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    await clickTab(wrapper, 'DUPN')
+    await nextTick()
+    expect(wrapper.text()).toContain('depth 17 → n=17 → 0x80')
+  })
+
+  it('SWAPN calculator encodes default swap depth 18 to 0x80 without stepping', async () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    await clickTab(wrapper, 'SWAPN')
+    await nextTick()
+    expect(wrapper.text()).toContain('depth 18 → n=17 → 0x80')
+  })
+
+  it('EXCHANGE calculator encodes default stack depths 2 & 3 to 0x8e without stepping', async () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    await clickTab(wrapper, 'EXCHANGE')
+    await nextTick()
+    expect(wrapper.text()).toContain('depths 2 & 3 → n=1, m=2 → 0x8e')
+  })
+
+  it('EXCHANGE calculator updates when stack depths change', async () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    await clickTab(wrapper, 'EXCHANGE')
+    await wrapper.find('#calc-exchange-depth-a').setValue('3')
+    await wrapper.find('#calc-exchange-depth-b').setValue('4')
+    await nextTick()
+    expect(wrapper.text()).toContain('0x9d')
+  })
+
+  it('EXCHANGE calculator shows validation errors for invalid depths', async () => {
+    const wrapper = mountPanel({ activeInstruction: undefined })
+    await clickTab(wrapper, 'EXCHANGE')
+    await wrapper.find('#calc-exchange-depth-a').setValue('4')
+    await wrapper.find('#calc-exchange-depth-b').setValue('4')
+    await nextTick()
+    expect(wrapper.text()).toContain('Choose two different stack depths')
+  })
+
+  it('latches DUPN decode when the pointer rests on DUPN in step mode', async () => {
+    const wrapper = mountPanel({ activeInstruction: dupnRow() })
+    await nextTick()
+    expect(wrapper.text()).toContain('DUPN:')
+    expect(wrapper.text()).toContain('0x80 → n=17 → copy depth 17')
+    expect(wrapper.text()).toContain('🪄 Magic')
+    expect(wrapper.text()).toContain('🔬 Expert')
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+
+  it('latches SWAPN decode when the pointer rests on SWAPN in step mode', async () => {
+    const wrapper = mountPanel({ activeInstruction: swapnRow() })
+    await nextTick()
+    expect(wrapper.text()).toContain('SWAPN:')
+    expect(wrapper.text()).toContain('0x80 → n=17 → swap top with depth 18')
+  })
+
+  it('latches EXCHANGE decode when the pointer rests on EXCHANGE in step mode', async () => {
+    const wrapper = mountPanel({ activeInstruction: exchangeRow() })
+    await nextTick()
+    expect(wrapper.text()).toContain('EXCHANGE:')
+    expect(wrapper.text()).toContain('0x8e → n=1, m=2 → depths 2 & 3')
+  })
+
+  it('does not update while running through with Run', async () => {
+    const wrapper = mountPanel({
+      mode: 'running',
+      activeInstruction: exchangeRow(),
+    })
+    await nextTick()
+    expect(wrapper.text()).toContain('Waiting for step mode at a DUPN, SWAPN, or EXCHANGE opcode')
+  })
+
+  it('keeps the last decode after stepping past the opcode', async () => {
+    const wrapper = mountPanel({ activeInstruction: exchangeRow() })
+    await nextTick()
+    await wrapper.setProps({
+      activeInstruction: {
+        pc: 10,
+        opcodeByte: 0x00,
+        name: 'STOP',
+        rawBytes: '00',
+        size: 1,
+      },
+    })
+    await nextTick()
+    expect(wrapper.text()).toContain('0x8e → n=1, m=2 → depths 2 & 3')
+  })
+
+  it('latches decode when fed by provide/inject from the stepper', async () => {
+    const activeInstruction = computed(() => exchangeRow())
+    const mode = ref<RunMode>('stepping')
+    const bytecodeHex = ref('6001600260036004e88e00')
+    const example = ref('exchange')
+
+    const wrapper = mount(ImmediateQuoVadis, {
+      global: {
+        provide: {
+          [BYTECODE_STEPPER_CONTEXT]: {
+            activeInstruction,
+            mode,
+            bytecodeHex,
+            example,
+          },
+        },
+      },
+    })
+    await nextTick()
+    expect(wrapper.text()).toContain('0x8e → n=1, m=2 → depths 2 & 3')
+  })
+
+  it('clears latched decode when bytecode changes', async () => {
+    const wrapper = mountPanel({ activeInstruction: exchangeRow() })
+    await nextTick()
+    await wrapper.setProps({ bytecodeHex: 'deadbeef' })
+    await nextTick()
+    expect(wrapper.text()).toContain('Waiting for step mode at a DUPN, SWAPN, or EXCHANGE opcode')
+  })
+})
diff --git a/src/explorations/eip-8024/ImmediateQuoVadis.vue b/src/explorations/eip-8024/ImmediateQuoVadis.vue
new file mode 100644
index 0000000..051de5a
--- /dev/null
+++ b/src/explorations/eip-8024/ImmediateQuoVadis.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+
+import { BYTECODE_STEPPER_CONTEXT } from '@/eComponents/bytecodeStepperEC/bytecodeStepperContext'
+import {
+  type AnyImmediateBreakdown,
+  encodeDupnFromStackDepth,
+  encodeExchangeFromStackDepths,
+  encodeSwapnFromSwapDepth,
+  explainEip8024Immediate,
+  formatDupnEncodeResult,
+  formatExchangeEncodeResult,
+  formatSwapnEncodeResult,
+  immediateByteFromRow,
+  isEip8024ImmediateOpcode,
+  opcodeKindFromByte,
+} from '@/eComponents/bytecodeStepperEC/eip8024Immediate'
+import type { InstructionRow, RunMode } from '@/eComponents/bytecodeStepperEC/types'
+import { TOPIC_COLORS, topicCSSVars, TOPICS } from '@/explorations/TOPICS'
+
+import wizardImage from './wizard_cows.png'
+
+/** Optional props for unit tests; production uses inject from BytecodeStepperEC. */
+const props = defineProps<{
+  activeInstruction?: InstructionRow
+  mode?: RunMode
+  bytecodeHex?: string
+  example?: string
+}>()
+
+const stepperContext = inject(BYTECODE_STEPPER_CONTEXT, null)
+const topic = TOPICS.robustness
+const cssVars = topicCSSVars(topic.color)
+
+const activeInstruction = computed(
+  () => props.activeInstruction ?? stepperContext?.activeInstruction.value,
+)
+const mode = computed(() => props.mode ?? stepperContext?.mode.value ?? 'idle')
+const bytecodeHex = computed(() => props.bytecodeHex ?? stepperContext?.bytecodeHex.value ?? '')
+const example = computed(() => props.example ?? stepperContext?.example.value ?? '')
+
+const latched = ref<AnyImmediateBreakdown | null>(null)
+const selectedTab = ref(0)
+
+const calcDupnDepth = ref('17')
+const calcSwapnDepth = ref('18')
+const calcExchangeDepthA = ref('2')
+const calcExchangeDepthB = ref('3')
+
+const dupnCalculatorResult = computed(() => {
+  const raw = String(calcDupnDepth.value).trim()
+  if (raw === '') return { ok: false as const, error: 'Enter a stack depth' }
+  const depth = Number(raw)
+  if (Number.isNaN(depth)) return { ok: false as const, error: 'Depth must be a number' }
+  return encodeDupnFromStackDepth(depth)
+})
+
+const swapnCalculatorResult = computed(() => {
+  const raw = String(calcSwapnDepth.value).trim()
+  if (raw === '') return { ok: false as const, error: 'Enter a swap target depth' }
+  const depth = Number(raw)
+  if (Number.isNaN(depth)) return { ok: false as const, error: 'Depth must be a number' }
+  return encodeSwapnFromSwapDepth(depth)
+})
+
+const exchangeCalculatorResult = computed(() => {
+  const rawA = String(calcExchangeDepthA.value).trim()
+  const rawB = String(calcExchangeDepthB.value).trim()
+  if (rawA === '' || rawB === '') {
+    return { ok: false as const, error: 'Enter two stack depths' }
+  }
+  const depthA = Number(rawA)
+  const depthB = Number(rawB)
+  if (Number.isNaN(depthA) || Number.isNaN(depthB)) {
+    return { ok: false as const, error: 'Stack depths must be numbers' }
+  }
+  return encodeExchangeFromStackDepths(depthA, depthB)
+})
+
+watch(
+  () => [bytecodeHex.value, example.value] as const,
+  () => {
+    latched.value = null
+    selectedTab.value = 0
+  },
+)
+
+watch(
+  () => [mode.value, activeInstruction.value] as const,
+  ([currentMode, instruction]) => {
+    if (currentMode !== 'stepping' || !instruction) return
+    if (!isEip8024ImmediateOpcode(instruction.opcodeByte)) return
+
+    const kind = opcodeKindFromByte(instruction.opcodeByte)
+    const immediate = immediateByteFromRow(instruction.rawBytes)
+    if (!kind || immediate === undefined) return
+
+    latched.value = explainEip8024Immediate(kind, immediate)
+  },
+  { immediate: true },
+)
+
+function tabButtonClass(selected: boolean): string[] {
+  return [
+    'rounded-md px-2.5 py-1 font-mono text-xs transition',
+    selected
+      ? 'bg-white font-bold e-text shadow-sm ring-1 ring-slate-200'
+      : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700',
+  ]
+}
+</script>
+
+<template>
+  <div
+    :style="cssVars"
+    :class="[
+      'topic-intro-card bg-white rounded-lg p-5 shadow-sm min-h-[22rem] flex flex-col',
+      TOPIC_COLORS[topic.color].classes.borderCard,
+    ]"
+    aria-label="EIP-8024 immediate decoder"
+  >
+    <h2 class="text-lg md:text-xl font-bold tracking-tight mb-2 e-text">
+      DUPN / SWAPN / EXCHANGE — immediate, quo vadis?
+    </h2>
+    <p class="font-mono text-xs leading-relaxed text-slate-600 mb-4">
+      Where does that mysterious second byte go? Step to a DUPN, SWAPN, or EXCHANGE opcode to decode
+      it — or use the calculators below.
+    </p>
+
+    <div class="flex flex-1 flex-col min-h-[18rem]">
+      <div
+        class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-2.5 mb-3 min-h-[3.25rem] flex items-center"
+      >
+        <p v-if="latched" class="font-mono text-sm font-semibold e-text tracking-wide break-all">
+          <span class="text-slate-500 font-normal">{{ latched.opcodeName }}:</span>
+          {{ latched.summary }}
+        </p>
+        <p v-else class="font-mono text-xs text-slate-400 italic">
+          Waiting for step mode at a DUPN, SWAPN, or EXCHANGE opcode…
+        </p>
+      </div>
+
+      <TabGroup
+        :selected-index="selectedTab"
+        as="div"
+        class="flex min-h-0 flex-1 flex-col"
+        @change="selectedTab = $event"
+      >
+        <TabList class="flex flex-wrap gap-1 mb-2">
+          <Tab v-slot="{ selected }" as="template">
+            <button type="button" :class="tabButtonClass(selected)">🪄 Magic</button>
+          </Tab>
+          <Tab v-slot="{ selected }" as="template">
+            <button type="button" :class="tabButtonClass(selected)">🔬 Expert</button>
+          </Tab>
+          <Tab v-slot="{ selected }" as="template">
+            <button type="button" :class="tabButtonClass(selected)">🧮 DUPN</button>
+          </Tab>
+          <Tab v-slot="{ selected }" as="template">
+            <button type="button" :class="tabButtonClass(selected)">🧮 SWAPN</button>
+          </Tab>
+          <Tab v-slot="{ selected }" as="template">
+            <button type="button" :class="tabButtonClass(selected)">🧮 EXCHANGE</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="flex-1 min-h-[12rem]">
+          <TabPanel class="h-full w-full">
+            <img
+              v-if="latched"
+              :src="wizardImage"
+              alt="A wizard magically connecting numbered cows — because immediate bytes are a bit magical"
+              class="w-full h-auto rounded-md border border-slate-200 shadow-sm"
+            />
+            <p v-else class="font-mono text-xs text-slate-400 italic py-8 text-center">
+              Step to a DUPN, SWAPN, or EXCHANGE opcode for the magic reveal…
+            </p>
+          </TabPanel>
+
+          <TabPanel class="font-mono text-xs text-slate-700 leading-relaxed space-y-2">
+            <template v-if="latched">
+              <p class="text-[11px] text-slate-600 mb-2">{{ latched.intro }}</p>
+              <div
+                v-for="step in latched.expertSteps"
+                :key="step.label"
+                class="rounded-md bg-slate-50 border border-slate-200 px-2.5 py-2"
+              >
+                <p class="font-bold e-text text-[11px]">{{ step.label }}</p>
+                <p class="text-[11px] text-slate-700 mt-0.5">{{ step.detail }}</p>
+              </div>
+            </template>
+            <p v-else class="font-mono text-xs text-slate-400 italic py-8 text-center">
+              Step to a DUPN, SWAPN, or EXCHANGE opcode for the expert walkthrough…
+            </p>
+          </TabPanel>
+
+          <TabPanel class="font-mono text-xs text-slate-700 leading-relaxed">
+            <p class="text-[11px] text-slate-600 mb-3">
+              Stack depth to copy (17–235, depth 1 = top). Computes the DUPN immediate byte.
+            </p>
+            <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 items-center mb-3">
+              <label for="calc-dupn-depth" class="text-slate-600">Depth</label>
+              <input
+                id="calc-dupn-depth"
+                v-model="calcDupnDepth"
+                type="number"
+                min="17"
+                class="rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-sm"
+              />
+            </div>
+            <div
+              class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-2.5 min-h-[3.25rem] flex items-center"
+            >
+              <p
+                v-if="dupnCalculatorResult.ok"
+                class="font-mono text-sm font-semibold e-text tracking-wide break-all"
+              >
+                {{ formatDupnEncodeResult(dupnCalculatorResult) }}
+              </p>
+              <p v-else class="font-mono text-xs text-red-600">{{ dupnCalculatorResult.error }}</p>
+            </div>
+          </TabPanel>
+
+          <TabPanel class="font-mono text-xs text-slate-700 leading-relaxed">
+            <p class="text-[11px] text-slate-600 mb-3">
+              Stack depth to swap with the top (18+, depth 1 = top). Computes the SWAPN immediate
+              byte.
+            </p>
+            <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 items-center mb-3">
+              <label for="calc-swapn-depth" class="text-slate-600">Swap depth</label>
+              <input
+                id="calc-swapn-depth"
+                v-model="calcSwapnDepth"
+                type="number"
+                min="18"
+                class="rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-sm"
+              />
+            </div>
+            <div
+              class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-2.5 min-h-[3.25rem] flex items-center"
+            >
+              <p
+                v-if="swapnCalculatorResult.ok"
+                class="font-mono text-sm font-semibold e-text tracking-wide break-all"
+              >
+                {{ formatSwapnEncodeResult(swapnCalculatorResult) }}
+              </p>
+              <p v-else class="font-mono text-xs text-red-600">{{ swapnCalculatorResult.error }}</p>
+            </div>
+          </TabPanel>
+
+          <TabPanel class="font-mono text-xs text-slate-700 leading-relaxed">
+            <p class="text-[11px] text-slate-600 mb-3">
+              Two stack depths (1 = top) to swap with each other. Computes the EXCHANGE immediate
+              byte.
+            </p>
+            <div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 items-center mb-3">
+              <label for="calc-exchange-depth-a" class="text-slate-600">Depth A</label>
+              <input
+                id="calc-exchange-depth-a"
+                v-model="calcExchangeDepthA"
+                type="number"
+                min="2"
+                class="rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-sm"
+              />
+              <label for="calc-exchange-depth-b" class="text-slate-600">Depth B</label>
+              <input
+                id="calc-exchange-depth-b"
+                v-model="calcExchangeDepthB"
+                type="number"
+                min="2"
+                class="rounded-md border border-slate-200 bg-white px-2 py-1.5 font-mono text-sm"
+              />
+            </div>
+            <div
+              class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-2.5 min-h-[3.25rem] flex items-center"
+            >
+              <p
+                v-if="exchangeCalculatorResult.ok"
+                class="font-mono text-sm font-semibold e-text tracking-wide break-all"
+              >
+                {{ formatExchangeEncodeResult(exchangeCalculatorResult) }}
+              </p>
+              <p v-else class="font-mono text-xs text-red-600">
+                {{ exchangeCalculatorResult.error }}
+              </p>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  </div>
+</template>
diff --git a/src/explorations/eip-8024/MyC.vue b/src/explorations/eip-8024/MyC.vue
new file mode 100644
index 0000000..14b6cdf
--- /dev/null
+++ b/src/explorations/eip-8024/MyC.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import BytecodeStepperEC from '@/eComponents/bytecodeStepperEC/BytecodeStepperEC.vue'
+
+import { config } from './config'
+import { examples } from './examples'
+import ImmediateQuoVadis from './ImmediateQuoVadis.vue'
+import { INFO as exploration } from './info'
+
+const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+const evm = await createEVM({ common })
+</script>
+
+<template>
+  <BytecodeStepperEC :config="config" :examples="examples" :exploration="exploration" :evm="evm">
+    <template #below>
+      <ImmediateQuoVadis />
+    </template>
+  </BytecodeStepperEC>
+</template>
diff --git a/src/explorations/eip-8024/bytecode.ts b/src/explorations/eip-8024/bytecode.ts
new file mode 100644
index 0000000..6086281
--- /dev/null
+++ b/src/explorations/eip-8024/bytecode.ts
@@ -0,0 +1,92 @@
+import { bytesToHex } from '@ethereumjs/util'
+
+import {
+  DUPN_SWAPN_MIN_DEPTH,
+  encodeDupnSwapnImmediate,
+} from '@/eComponents/bytecodeStepperEC/eip8024Immediate'
+
+export const DUPN = 0xe6
+export const SWAPN = 0xe7
+export const EXCHANGE = 0xe8
+export const STOP = 0x00
+export const PUSH1 = 0x60
+
+/** Minimum stack depth for DUPN / SWAPN immediates (EIP-8024). */
+export const DUPN_MIN_DEPTH = DUPN_SWAPN_MIN_DEPTH
+
+/** Encode DUPN / SWAPN immediate for one-based depth n (17..235). Spec: n = (x + 145) mod 256 */
+export function encodeSingleImmediate(n: number): number {
+  const result = encodeDupnSwapnImmediate(n)
+  if (!result.ok) {
+    throw new Error(result.error)
+  }
+  return result.immediate
+}
+
+/** Push consecutive values 1..count (bottom = 1, top = count) */
+export function buildPushSequence(count: number): Uint8Array {
+  const bytes = new Uint8Array(count * 2)
+  for (let i = 0; i < count; i++) {
+    bytes[i * 2] = PUSH1
+    bytes[i * 2 + 1] = i + 1
+  }
+  return bytes
+}
+
+export function concatBytes(...parts: Uint8Array[]): Uint8Array {
+  const total = parts.reduce((sum, part) => sum + part.length, 0)
+  const out = new Uint8Array(total)
+  let offset = 0
+  for (const part of parts) {
+    out.set(part, offset)
+    offset += part.length
+  }
+  return out
+}
+
+export function bytecodeToHex(code: Uint8Array): string {
+  return bytesToHex(code).substring(2)
+}
+
+/** Smallest valid DUPN demo: stack [1..17], copy item at depth 17 (value 1). */
+export function dupnBytecode(): Uint8Array {
+  return concatBytes(
+    buildPushSequence(DUPN_MIN_DEPTH),
+    Uint8Array.from([DUPN, encodeSingleImmediate(DUPN_MIN_DEPTH), STOP]),
+  )
+}
+
+/** Smallest valid SWAPN demo: stack [1..18], swap top with item at depth 17. */
+export function swapnBytecode(): Uint8Array {
+  const stackSize = DUPN_MIN_DEPTH + 1
+  return concatBytes(
+    buildPushSequence(stackSize),
+    Uint8Array.from([SWAPN, encodeSingleImmediate(DUPN_MIN_DEPTH), STOP]),
+  )
+}
+
+/** Compact EXCHANGE demo: stack [1..4], swap depths 2 and 3 below the top. */
+export function exchangeBytecode(): Uint8Array {
+  return concatBytes(buildPushSequence(4), Uint8Array.from([EXCHANGE, 0x8e, STOP]))
+}
+
+/** Stack too shallow for DUPN depth 17 — triggers an exception. */
+export function invalidDupnBytecode(): Uint8Array {
+  return concatBytes(
+    buildPushSequence(3),
+    Uint8Array.from([DUPN, encodeSingleImmediate(DUPN_MIN_DEPTH), STOP]),
+  )
+}
+
+export function stackTopNumbers(
+  stack: { peek: (n: number) => bigint[] } | undefined,
+  n: number,
+): number[] {
+  if (!stack) {
+    throw new Error('Missing stack in result')
+  }
+  return stack
+    .peek(n)
+    .map((word) => Number(word))
+    .reverse()
+}
diff --git a/src/explorations/eip-8024/config.ts b/src/explorations/eip-8024/config.ts
new file mode 100644
index 0000000..0820f7f
--- /dev/null
+++ b/src/explorations/eip-8024/config.ts
@@ -0,0 +1,8 @@
+import type { BytecodeStepperConfig } from '@/eComponents/bytecodeStepperEC/types'
+
+export const config: BytecodeStepperConfig = {
+  explorationId: 'eip-8024',
+  defaultExample: 'dupn',
+  gasLimit: 1_000_000n,
+  maxStackDisplay: 20,
+}
diff --git a/src/explorations/eip-8024/examples.ts b/src/explorations/eip-8024/examples.ts
new file mode 100644
index 0000000..0b177c6
--- /dev/null
+++ b/src/explorations/eip-8024/examples.ts
@@ -0,0 +1,28 @@
+import type { Examples } from '@/explorations/REGISTRY'
+
+import {
+  bytecodeToHex,
+  dupnBytecode,
+  exchangeBytecode,
+  invalidDupnBytecode,
+  swapnBytecode,
+} from './bytecode'
+
+export const examples: Examples = {
+  dupn: {
+    title: 'DUPN — copy stack item at depth 17',
+    values: [bytecodeToHex(dupnBytecode())],
+  },
+  swapn: {
+    title: 'SWAPN — swap top with item at depth 17',
+    values: [bytecodeToHex(swapnBytecode())],
+  },
+  exchange: {
+    title: 'EXCHANGE — swap stack items at depths 2 & 3',
+    values: [bytecodeToHex(exchangeBytecode())],
+  },
+  'invalid-dupn': {
+    title: 'Invalid — stack too shallow for DUPN',
+    values: [bytecodeToHex(invalidDupnBytecode())],
+  },
+}
diff --git a/src/explorations/eip-8024/image.jpg b/src/explorations/eip-8024/image.jpg
new file mode 100644
index 0000000..8e0349d
Binary files /dev/null and b/src/explorations/eip-8024/image.jpg differ
diff --git a/src/explorations/eip-8024/info.ts b/src/explorations/eip-8024/info.ts
new file mode 100644
index 0000000..ba21608
--- /dev/null
+++ b/src/explorations/eip-8024/info.ts
@@ -0,0 +1,30 @@
+import type { Exploration } from '@/explorations/REGISTRY'
+import { Tag } from '@/explorations/TAGS'
+
+import image from './image.jpg'
+
+export const INFO: Exploration = {
+  id: 'eip-8024',
+  path: '/eip-8024-stack-opcodes-dupn-swapn-exchange',
+  title: 'EIP-8024 DUPN, SWAPN & EXCHANGE Stack Opcodes',
+  infoURL: 'https://eips.ethereum.org/EIPS/eip-8024',
+  topic: 'robustness',
+  timeline: 'glamsterdam',
+  tags: [Tag.EVM],
+  image,
+  introText:
+    '<b>How do you manipulate deep stack items without blowing the 1024 limit?</b> ' +
+    'Smart contracts often hit the classic "stack too deep" compiler error when juggling ' +
+    'many local variables. EIP-8024 adds three backward-compatible opcodes — ' +
+    '<code>DUPN</code> (0xe6), <code>SWAPN</code> (0xe7), and <code>EXCHANGE</code> (0xe8) — ' +
+    'that extend <code>DUP</code>/<code>SWAP</code> to depths 17–235 using a single-byte immediate. ' +
+    'The DUPN demo uses the smallest legal stack (17 items); SWAPN needs one more slot at the same depth. ' +
+    'EXCHANGE fits in four pushes.',
+  usageText:
+    'Pick an example below, then use <b>Step</b> to walk through each opcode and watch the stack ' +
+    'change. Use <b>Run</b> to execute the full sequence at once. The widget runs bytecode on an ' +
+    'Amsterdam-hardfork EVM via EthereumJS — the same stack semantics the EIP specifies.',
+  creatorName: 'HolgerD77',
+  creatorURL: 'https://x.com/HolgerD77',
+  poweredBy: [{ name: 'EthereumJS', href: 'https://github.com/ethereumjs/ethereumjs-monorepo' }],
+}
diff --git a/src/explorations/eip-8024/tests.spec.ts b/src/explorations/eip-8024/tests.spec.ts
new file mode 100644
index 0000000..8119ad2
--- /dev/null
+++ b/src/explorations/eip-8024/tests.spec.ts
@@ -0,0 +1,140 @@
+import { describe, expect, it } from 'vitest'
+import { Common, Hardfork, Mainnet } from '@ethereumjs/common'
+import { createEVM } from '@ethereumjs/evm'
+
+import { runBytecode } from '@/eComponents/bytecodeStepperEC/runBytecode'
+
+import {
+  dupnBytecode,
+  exchangeBytecode,
+  invalidDupnBytecode,
+  stackTopNumbers,
+  swapnBytecode,
+} from './bytecode'
+import { config } from './config'
+import { examples } from './examples'
+import { INFO } from './info'
+
+async function createAmsterdamEvm() {
+  const common = new Common({ chain: Mainnet, hardfork: Hardfork.Amsterdam })
+  return createEVM({ common })
+}
+
+describe('EIP-8024 Exploration', () => {
+  describe('info', () => {
+    it('has correct metadata', () => {
+      expect(INFO.id).toBe('eip-8024')
+      expect(INFO.path).toContain('eip-8024')
+      expect(INFO.topic).toBe('robustness')
+      expect(INFO.timeline).toBe('glamsterdam')
+      expect(INFO.poweredBy.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('config', () => {
+    it('defaults to the DUPN example', () => {
+      expect(config.defaultExample).toBe('dupn')
+      expect(examples.dupn).toBeDefined()
+    })
+
+    it('shows enough stack slots for the minimal DUPN demo', () => {
+      expect(config.maxStackDisplay).toBeGreaterThanOrEqual(17)
+    })
+  })
+
+  describe('examples', () => {
+    it('has at least one example per new opcode', () => {
+      expect(examples.dupn).toBeDefined()
+      expect(examples.swapn).toBeDefined()
+      expect(examples.exchange).toBeDefined()
+    })
+
+    it('each example has unprefixed hex bytecode', () => {
+      for (const [key, ex] of Object.entries(examples)) {
+        expect(ex.values, `Example "${key}" should have one bytecode value`).toHaveLength(1)
+        expect(ex.values[0]).toMatch(/^[0-9a-f]+$/i)
+        expect(ex.values[0].length % 2).toBe(0)
+      }
+    })
+
+    it('uses compact bytecode for EXCHANGE and invalid DUPN', () => {
+      expect(examples.exchange.values[0].length).toBeLessThan(examples.dupn.values[0].length)
+      expect(examples['invalid-dupn'].values[0].length).toBeLessThan(examples.dupn.values[0].length)
+    })
+  })
+
+  describe('bytecode execution', () => {
+    it('DUPN copies stack item at depth 17 onto the top', async () => {
+      const evm = await createAmsterdamEvm()
+      const result = await runBytecode({
+        evm,
+        code: dupnBytecode(),
+        gasLimit: 1_000_000n,
+        stepMode: false,
+        onStep: () => {},
+        shouldAbort: () => false,
+      })
+      expect(result.exceptionError).toBeUndefined()
+      expect(stackTopNumbers(result.runState?.stack, 3)).toEqual([16, 17, 1])
+    })
+
+    it('SWAPN swaps top with stack item at depth 17', async () => {
+      const evm = await createAmsterdamEvm()
+      const result = await runBytecode({
+        evm,
+        code: swapnBytecode(),
+        gasLimit: 1_000_000n,
+        stepMode: false,
+        onStep: () => {},
+        shouldAbort: () => false,
+      })
+      expect(result.exceptionError).toBeUndefined()
+      expect(stackTopNumbers(result.runState?.stack, 3)).toEqual([16, 17, 1])
+    })
+
+    it('EXCHANGE swaps stack items at depths 2 and 3 on a 4-item stack', async () => {
+      const evm = await createAmsterdamEvm()
+      const result = await runBytecode({
+        evm,
+        code: exchangeBytecode(),
+        gasLimit: 1_000_000n,
+        stepMode: false,
+        onStep: () => {},
+        shouldAbort: () => false,
+      })
+      expect(result.exceptionError).toBeUndefined()
+      expect(stackTopNumbers(result.runState?.stack, 4)).toEqual([1, 3, 2, 4])
+    })
+
+    it('invalid DUPN example throws an exception', async () => {
+      const evm = await createAmsterdamEvm()
+      const result = await runBytecode({
+        evm,
+        code: invalidDupnBytecode(),
+        gasLimit: 1_000_000n,
+        stepMode: false,
+        onStep: () => {},
+        shouldAbort: () => false,
+      })
+      expect(result.exceptionError).toBeDefined()
+    })
+
+    it('example hex strings round-trip to working bytecode', async () => {
+      const evm = await createAmsterdamEvm()
+      for (const [key, ex] of Object.entries(examples)) {
+        if (key === 'invalid-dupn') continue
+        const hex = ex.values[0]
+        const code = new Uint8Array(hex.match(/.{1,2}/g)!.map((b) => parseInt(b, 16)))
+        const result = await runBytecode({
+          evm,
+          code,
+          gasLimit: 1_000_000n,
+          stepMode: false,
+          onStep: () => {},
+          shouldAbort: () => false,
+        })
+        expect(result.exceptionError, `Example "${key}" should run cleanly`).toBeUndefined()
+      }
+    })
+  })
+})
diff --git a/src/explorations/eip-8024/wizard_cows.png b/src/explorations/eip-8024/wizard_cows.png
new file mode 100644
index 0000000..de3fd1f
Binary files /dev/null and b/src/explorations/eip-8024/wizard_cows.png differ
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1579499..434847a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -9,7 +9,7 @@ import TopicIntroView from './TopicIntroView.vue'
 
 const allExplorationIds = Object.keys(EXPLORATIONS)
 
-const featured = ['eip-7883', 'eip-7594', 'eip-7951']
+const featured = ['eip-8024', 'eip-7883', 'eip-7594', 'eip-7951']
 
 const activeTopicIds = Object.keys(TOPICS).filter((id) => TOPICS[id].explorations.length > 0)
 
diff --git a/src/views/__tests__/HomeView.spec.ts b/src/views/__tests__/HomeView.spec.ts
index c470e09..a1c7819 100644
--- a/src/views/__tests__/HomeView.spec.ts
+++ b/src/views/__tests__/HomeView.spec.ts
@@ -91,14 +91,14 @@ describe('HomeView', () => {
   })
 
   describe('Featured explorations', () => {
-    const featured = ['eip-7883', 'eip-7594', 'eip-7951']
+    const featured = ['eip-8024', 'eip-7883', 'eip-7594', 'eip-7951']
 
     it('shows "Latest" label', () => {
       expect(wrapper.text()).toContain('Latest')
     })
 
-    it('renders three featured exploration cards', () => {
-      expect(wrapper.findAll('.exploration-c')).toHaveLength(3)
+    it('renders featured exploration cards', () => {
+      expect(wrapper.findAll('.exploration-c')).toHaveLength(featured.length)
     })
 
     it('cards display exploration titles', () => {