diff --git a/README.md b/README.md
new file mode 100644
index 00000000..445347d2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,243 @@
+# 🚩 Challenge 1: 🔏 Decentralized Staking App
+
+![readme-1](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/a620999a-a1ff-462d-9ae3-5b49ab0e023a)
+
+🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an adversarial group of players can use to work together. In this challenge, you create a decentralized application where users can coordinate a group funding effort. If the users cooperate, the money is collected in a second smart contract. If they defect, the worst that can happen is everyone gets their money back. The users only have to trust the code.
+
+🏦 Build a `Staker.sol` contract that collects **ETH** from numerous addresses using a payable `stake()` function and keeps track of `balances`. After some `deadline` if it has at least some `threshold` of ETH, it sends it to an `ExampleExternalContract` and triggers the `complete()` action sending the full balance. If not enough **ETH** is collected, allow users to `withdraw()`.
+
+🎛 Building the frontend to display the information and UI is just as important as writing the contract. The goal is to deploy the contract and the app to allow anyone to stake using your app. Use a `Stake(address,uint256)` event to list all stakes.
+
+🌟 The final deliverable is deploying a Dapp that lets users send ether to a contract and stake if the conditions are met, then `yarn vercel` your app to a public webserver. Submit the url on [SpeedRunEthereum.com](https://speedrunethereum.com)!
+
+> 💬 Meet other builders working on this challenge and get help in the [Challenge 1 Telegram](https://t.me/joinchat/E6r91UFt4oMJlt01)!
+
+---
+
+## Checkpoint 0: 📦 Environment 📚
+
+Before you begin, you need to install the following tools:
+
+- [Node (v18 LTS)](https://nodejs.org/en/download/)
+- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
+- [Git](https://git-scm.com/downloads)
+
+Then download the challenge to your computer and install dependencies by running:
+
+```sh
+npx create-eth@latest -e sre-challenge-1 challenge-1-decentralized-staking
+cd challenge-1-decentralized-staking
+```
+
+> in the same terminal, start your local network (a blockchain emulator in your computer):
+
+```sh
+yarn chain
+```
+
+> in a second terminal window, 🛰 deploy your contract (locally):
+
+```sh
+cd challenge-1-decentralized-staking
+yarn deploy
+```
+
+> in a third terminal window, start your 📱 frontend:
+
+```sh
+cd challenge-1-decentralized-staking
+yarn start
+```
+
+📱 Open http://localhost:3000 to see the app.
+
+> 👩‍💻 Rerun `yarn deploy` whenever you want to deploy new contracts to the frontend. If you haven't made any contract changes, you can run `yarn deploy --reset` for a completely fresh deploy.
+
+🔏 Now you are ready to edit your smart contract `Staker.sol` in `packages/hardhat/contracts`
+
+---
+
+⚗️ At this point you will need to know basic Solidity syntax. If not, you can pick it up quickly by tinkering with concepts from [📑 Solidity By Example](https://solidity-by-example.org/) using [🏗️ Scaffold-ETH-2](https://scaffoldeth.io). (In particular: global units, primitive data types, mappings, sending ether, and payable functions.)
+
+---
+
+## Checkpoint 1: 🔏 Staking 💵
+
+You'll need to track individual `balances` using a mapping:
+
+```solidity
+mapping ( address => uint256 ) public balances;
+```
+
+And also track a constant `threshold` at `1 ether`
+
+```solidity
+uint256 public constant threshold = 1 ether;
+```
+
+> 👩‍💻 Write your `stake()` function and test it with the `Debug Contracts` tab in the frontend.
+
+![debugContracts](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/1a888e31-a79b-49ef-9848-357c5cee445a)
+
+> 💸 Need more funds from the faucet? Click on _"Grab funds from faucet"_, or use the Faucet feature at the bottom left of the page to get as much as you need!
+
+![Faucet](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/e82e3100-20fb-4886-a6bf-4113c3729f53)
+
+> ✏ Need to troubleshoot your code? If you import `hardhat/console.sol` to your contract, you can call `console.log()` right in your Solidity code. The output will appear in your `yarn chain` terminal.
+
+### 🥅 Goals
+
+- [ ] Do you see the balance of the `Staker` contract go up when you `stake()`?
+- [ ] Is your `balance` correctly tracked?
+- [ ] Do you see the events in the `Stake Events` tab?
+
+  ![allStakings](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/80bcc843-034c-4547-8535-129ed494a204)
+
+---
+
+## Checkpoint 2: 🔬 State Machine / Timing ⏱
+
+### State Machine
+
+> ⚙️ Think of your smart contract like a _state machine_. First, there is a **stake** period. Then, if you have gathered the `threshold` worth of ETH, there is a **success** state. Or, we go into a **withdraw** state to let users withdraw their funds.
+
+Set a `deadline` of `block.timestamp + 30 seconds`
+
+```solidity
+uint256 public deadline = block.timestamp + 30 seconds;
+```
+
+👨‍🏫 Smart contracts can't execute automatically, you always need to have a transaction execute to change state. Because of this, you will need to have an `execute()` function that _anyone_ can call, just once, after the `deadline` has expired.
+
+> 👩‍💻 Write your `execute()` function and test it with the `Debug Contracts` tab
+
+> Check the `ExampleExternalContract.sol` for the bool you can use to test if it has been completed or not. But do not edit the `ExampleExternalContract.sol` as it can slow the auto grading.
+
+If the `address(this).balance` of the contract is over the `threshold` by the `deadline`, you will want to call: `exampleExternalContract.complete{value: address(this).balance}()`
+
+If the balance is less than the `threshold`, you want to set a `openForWithdraw` bool to `true` which will allow users to `withdraw()` their funds.
+
+### Timing
+
+You'll have 30 seconds after deploying until the deadline is reached, you can adjust this in the contract.
+
+> 👩‍💻 Create a `timeLeft()` function including `public view returns (uint256)` that returns how much time is left.
+
+⚠️ Be careful! If `block.timestamp >= deadline` you want to `return 0;`
+
+⏳ _"Time Left"_ will only update if a transaction occurs. You can see the time update by getting funds from the faucet button in navbar just to trigger a new block.
+
+![stakerUI](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/7d85badb-3ea3-4f3c-b5f8-43d5b64f6714)
+
+> 👩‍💻 You can call `yarn deploy --reset` any time you want a fresh contract, it will get re-deployed even if there are no changes on it.
+> You may need it when you want to reload the _"Time Left"_ of your tests.
+
+Your `Staker UI` tab should be almost done and working at this point.
+
+---
+
+### 🥅 Goals
+
+- [ ] Can you see `timeLeft` counting down in the `Staker UI` tab when you trigger a transaction with the faucet button?
+- [ ] If enough ETH is staked by the deadline, does your `execute()` function correctly call `complete()` and stake the ETH?
+- [ ] If the threshold isn't met by the deadline, are you able to `withdraw()` your funds?
+
+---
+
+## Checkpoint 3: 💵 Receive Function / UX 🙎
+
+🎀 To improve the user experience, set your contract up so it accepts ETH sent to it and calls `stake()`. You will use what is called the `receive()` function.
+
+> Use the [receive()](https://docs.soliditylang.org/en/v0.8.9/contracts.html?highlight=receive#receive-ether-function) function in solidity to "catch" ETH sent to the contract and call `stake()` to update `balances`.
+
+---
+
+### 🥅 Goals
+
+- [ ] If you send ETH directly to the contract address does it update your `balance` and the `balance` of the contract?
+
+---
+
+### ⚔️ Side Quests
+
+- [ ] Can `execute()` get called more than once, and is that okay?
+- [ ] Can you stake and withdraw freely after the `deadline`, and is that okay?
+- [ ] What are other implications of _anyone_ being able to withdraw for someone?
+
+---
+
+### 🐸 It's a trap!
+
+- [ ] Make sure funds can't get trapped in the contract! **Try sending funds after you have executed! What happens?**
+- [ ] Try to create a [modifier](https://solidity-by-example.org/function-modifier/) called `notCompleted`. It will check that `ExampleExternalContract` is not completed yet. Use it to protect your `execute` and `withdraw` functions.
+
+### ⚠️ Test it!
+
+- Now is a good time to run `yarn test` to run the automated testing function. It will test that you hit the core checkpoints. You are looking for all green checkmarks and passing tests!
+
+---
+
+## Checkpoint 4: 💾 Deploy your contract! 🛰
+
+📡 Edit the `defaultNetwork` to [your choice of public EVM networks](https://ethereum.org/en/developers/docs/networks/) in `packages/hardhat/hardhat.config.ts`
+
+🔐 You will need to generate a **deployer address** using `yarn generate` This creates a mnemonic and saves it locally.
+
+👩‍🚀 Use `yarn account` to view your deployer account balances.
+
+⛽️ You will need to send ETH to your deployer address with your wallet, or get it from a public faucet of your chosen network.
+
+> 📝 If you plan on submitting this challenge, be sure to set your `deadline` to at least `block.timestamp + 72 hours`
+
+🚀 Run `yarn deploy` to deploy your smart contract to a public network (selected in `hardhat.config.ts`)
+
+> 💬 Hint: You can set the `defaultNetwork` in `hardhat.config.ts` to `sepolia` or `optimismSepolia` **OR** you can `yarn deploy --network sepolia` or `yarn deploy --network optimismSepolia`.
+
+![allStakings-blockFrom](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/04725dc8-4a8d-4089-ba82-90f9b94bfbda)
+
+> 💬 Hint: For faster loading of your _"Stake Events"_ page, consider updating the `fromBlock` passed to `useScaffoldEventHistory` in [`packages/nextjs/app/stakings/page.tsx`](https://github.com/scaffold-eth/se-2-challenges/blob/challenge-1-decentralized-staking/packages/nextjs/app/stakings/page.tsx) to `blocknumber - 10` at which your contract was deployed. Example: `fromBlock: 3750241n` (where `n` represents its a [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)). To find this blocknumber, search your contract's address on Etherscan and find the `Contract Creation` transaction line.
+
+---
+
+## Checkpoint 5: 🚢 Ship your frontend! 🚁
+
+✏️ Edit your frontend config in `packages/nextjs/scaffold.config.ts` to change the `targetNetwork` to `chains.sepolia` (or `chains.optimismSepolia` if you deployed to OP Sepolia)
+
+💻 View your frontend at http://localhost:3000/staker-ui and verify you see the correct network.
+
+📡 When you are ready to ship the frontend app...
+
+📦 Run `yarn vercel` to package up your frontend and deploy.
+
+> Follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.
+
+> If you want to redeploy to the same production URL you can run `yarn vercel --prod`. If you omit the `--prod` flag it will deploy it to a preview/test URL.
+
+> 🦊 Since we have deployed to a public testnet, you will now need to connect using a wallet you own or use a burner wallet. By default 🔥 `burner wallets` are only available on `hardhat` . You can enable them on every chain by setting `onlyLocalBurnerWallet: false` in your frontend config (`scaffold.config.ts` in `packages/nextjs/`)
+
+#### Configuration of Third-Party Services for Production-Grade Apps.
+
+By default, 🏗 Scaffold-ETH 2 provides predefined API keys for popular services such as Alchemy and Etherscan. This allows you to begin developing and testing your applications more easily, avoiding the need to register for these services.
+This is great to complete your **SpeedRunEthereum**.
+
+For production-grade applications, it's recommended to obtain your own API keys (to prevent rate limiting issues). You can configure these at:
+
+- 🔷`ALCHEMY_API_KEY` variable in `packages/hardhat/.env` and `packages/nextjs/.env.local`. You can create API keys from the [Alchemy dashboard](https://dashboard.alchemy.com/).
+
+- 📃`ETHERSCAN_API_KEY` variable in `packages/hardhat/.env` with your generated API key. You can get your key [here](https://etherscan.io/myapikey).
+
+> 💬 Hint: It's recommended to store env's for nextjs in Vercel/system env config for live apps and use .env.local for local testing.
+
+---
+
+## Checkpoint 6: 📜 Contract Verification
+
+Run the `yarn verify --network your_network` command to verify your contracts on etherscan 🛰
+
+👉 Search this address on [Sepolia Etherscan](https://sepolia.etherscan.io/) (or [Optimism Sepolia Etherscan](https://sepolia-optimism.etherscan.io/) if you deployed to OP Sepolia) to get the URL you submit to 🏃‍♀️[SpeedRunEthereum.com](https://speedrunethereum.com).
+
+---
+
+> 🏃 Head to your next challenge [here](https://speedrunethereum.com).
+
+> 💬 Problems, questions, comments on the stack? Post them to the [🏗 scaffold-eth developers chat](https://t.me/joinchat/F7nCRK3kI93PoCOk)
diff --git a/extension/README.md.args.mjs b/extension/README.md.args.mjs
new file mode 100644
index 00000000..c29447b0
--- /dev/null
+++ b/extension/README.md.args.mjs
@@ -0,0 +1,231 @@
+export const skipQuickStart = true;
+
+export const extraContents = `# 🚩 Challenge 1: 🔏 Decentralized Staking App
+
+![readme-1](https://github.com/scaffold-eth/se-2-challenges/assets/80153681/a620999a-a1ff-462d-9ae3-5b49ab0e023a)
+
+🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an adversarial group of players can use to work together. In this challenge, you create a decentralized application where users can coordinate a group funding effort. If the users cooperate, the money is collected in a second smart contract. If they defect, the worst that can happen is everyone gets their money back. The users only have to trust the code.
+
+🏦 Build a \`Staker.sol\` contract that collects **ETH** from numerous addresses using a payable \`stake()\` function and keeps track of \`balances\`. After some \`deadline\` if it has at least some \`threshold\` of ETH, it sends it to an \`ExampleExternalContract\` and triggers the \`complete()\` action sending the full balance. If not enough **ETH** is collected, allow users to \`withdraw()\`.
+
+🎛 Building the frontend to display the information and UI is just as important as writing the contract. The goal is to deploy the contract and the app to allow anyone to stake using your app. Use a \`Stake(address,uint256)\` event to list all stakes.
+
+🌟 The final deliverable is deploying a Dapp that lets users send ether to a contract and stake if the conditions are met, then \`yarn vercel\` your app to a public webserver. Submit the url on [SpeedRunEthereum.com](https://speedrunethereum.com)!
+
+> 💬 Meet other builders working on this challenge and get help in the [Challenge 1 Telegram](https://t.me/joinchat/E6r91UFt4oMJlt01)!
+
+---
+
+## Checkpoint 0: 📦 Environment 📚
+
+> Start your local network (a local instance of a blockchain):
+
+\`\`\`sh
+yarn chain
+\`\`\`
+
+> in a second terminal window, 🛰 deploy your contract (locally):
+
+\`\`\`sh
+yarn deploy
+\`\`\`
+
+> in a third terminal window, start your 📱 frontend:
+
+\`\`\`sh
+yarn start
+\`\`\`
+
+📱 Open http://localhost:3000 to see the app.
+
+> 👩‍💻 Rerun \`yarn deploy\` whenever you want to deploy new contracts to the frontend. If you haven't made any contract changes, you can run \`yarn deploy --reset\` for a completely fresh deploy.
+
+🔏 Now you are ready to edit your smart contract \`Staker.sol\` in \`packages/hardhat/contracts\`
+
+---
+
+⚗️ At this point you will need to know basic Solidity syntax. If not, you can pick it up quickly by tinkering with concepts from [📑 Solidity By Example](https://solidity-by-example.org/) using [🏗️ Scaffold-ETH-2](https://scaffoldeth.io). (In particular: global units, primitive data types, mappings, sending ether, and payable functions.)
+
+---
+
+## Checkpoint 1: 🔏 Staking 💵
+
+You'll need to track individual \`balances\` using a mapping:
+
+\`\`\`solidity
+mapping ( address => uint256 ) public balances;
+\`\`\`
+
+And also track a constant \`threshold\` at \`1 ether\`
+
+\`\`\`solidity
+uint256 public constant threshold = 1 ether;
+\`\`\`
+
+> 👩‍💻 Write your \`stake()\` function and test it with the \`Debug Contracts\` tab in the frontend.
+
+![debugContracts](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/1a888e31-a79b-49ef-9848-357c5cee445a)
+
+> 💸 Need more funds from the faucet? Click on _"Grab funds from faucet"_, or use the Faucet feature at the bottom left of the page to get as much as you need!
+
+![Faucet](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/e82e3100-20fb-4886-a6bf-4113c3729f53)
+
+> ✏ Need to troubleshoot your code? If you import \`hardhat/console.sol\` to your contract, you can call \`console.log()\` right in your Solidity code. The output will appear in your \`yarn chain\` terminal.
+
+### 🥅 Goals
+
+- [ ] Do you see the balance of the \`Staker\` contract go up when you \`stake()\`?
+- [ ] Is your \`balance\` correctly tracked?
+- [ ] Do you see the events in the \`Stake Events\` tab?
+
+  ![allStakings](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/80bcc843-034c-4547-8535-129ed494a204)
+
+---
+
+## Checkpoint 2: 🔬 State Machine / Timing ⏱
+
+### State Machine
+
+> ⚙️ Think of your smart contract like a _state machine_. First, there is a **stake** period. Then, if you have gathered the \`threshold\` worth of ETH, there is a **success** state. Or, we go into a **withdraw** state to let users withdraw their funds.
+
+Set a \`deadline\` of \`block.timestamp + 30 seconds\`
+
+\`\`\`solidity
+uint256 public deadline = block.timestamp + 30 seconds;
+\`\`\`
+
+👨‍🏫 Smart contracts can't execute automatically, you always need to have a transaction execute to change state. Because of this, you will need to have an \`execute()\` function that _anyone_ can call, just once, after the \`deadline\` has expired.
+
+> 👩‍💻 Write your \`execute()\` function and test it with the \`Debug Contracts\` tab
+
+> Check the \`ExampleExternalContract.sol\` for the bool you can use to test if it has been completed or not. But do not edit the \`ExampleExternalContract.sol\` as it can slow the auto grading.
+
+If the \`address(this).balance\` of the contract is over the \`threshold\` by the \`deadline\`, you will want to call: \`exampleExternalContract.complete{value: address(this).balance}()\`
+
+If the balance is less than the \`threshold\`, you want to set a \`openForWithdraw\` bool to \`true\` which will allow users to \`withdraw()\` their funds.
+
+### Timing
+
+You'll have 30 seconds after deploying until the deadline is reached, you can adjust this in the contract.
+
+> 👩‍💻 Create a \`timeLeft()\` function including \`public view returns (uint256)\` that returns how much time is left.
+
+⚠️ Be careful! If \`block.timestamp >= deadline\` you want to \`return 0;\`
+
+⏳ _"Time Left"_ will only update if a transaction occurs. You can see the time update by getting funds from the faucet button in navbar just to trigger a new block.
+
+![stakerUI](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/7d85badb-3ea3-4f3c-b5f8-43d5b64f6714)
+
+> 👩‍💻 You can call \`yarn deploy --reset\` any time you want a fresh contract, it will get re-deployed even if there are no changes on it.
+> You may need it when you want to reload the _"Time Left"_ of your tests.
+
+Your \`Staker UI\` tab should be almost done and working at this point.
+
+---
+
+### 🥅 Goals
+
+- [ ] Can you see \`timeLeft\` counting down in the \`Staker UI\` tab when you trigger a transaction with the faucet button?
+- [ ] If enough ETH is staked by the deadline, does your \`execute()\` function correctly call \`complete()\` and stake the ETH?
+- [ ] If the threshold isn't met by the deadline, are you able to \`withdraw()\` your funds?
+
+---
+
+## Checkpoint 3: 💵 Receive Function / UX 🙎
+
+🎀 To improve the user experience, set your contract up so it accepts ETH sent to it and calls \`stake()\`. You will use what is called the \`receive()\` function.
+
+> Use the [receive()](https://docs.soliditylang.org/en/v0.8.9/contracts.html?highlight=receive#receive-ether-function) function in solidity to "catch" ETH sent to the contract and call \`stake()\` to update \`balances\`.
+
+---
+
+### 🥅 Goals
+
+- [ ] If you send ETH directly to the contract address does it update your \`balance\` and the \`balance\` of the contract?
+
+---
+
+### ⚔️ Side Quests
+
+- [ ] Can \`execute()\` get called more than once, and is that okay?
+- [ ] Can you stake and withdraw freely after the \`deadline\`, and is that okay?
+- [ ] What are other implications of _anyone_ being able to withdraw for someone?
+
+---
+
+### 🐸 It's a trap!
+
+- [ ] Make sure funds can't get trapped in the contract! **Try sending funds after you have executed! What happens?**
+- [ ] Try to create a [modifier](https://solidity-by-example.org/function-modifier/) called \`notCompleted\`. It will check that \`ExampleExternalContract\` is not completed yet. Use it to protect your \`execute\` and \`withdraw\` functions.
+
+### ⚠️ Test it!
+
+- Now is a good time to run \`yarn test\` to run the automated testing function. It will test that you hit the core checkpoints. You are looking for all green checkmarks and passing tests!
+
+---
+
+## Checkpoint 4: 💾 Deploy your contract! 🛰
+
+📡 Edit the \`defaultNetwork\` to [your choice of public EVM networks](https://ethereum.org/en/developers/docs/networks/) in \`packages/hardhat/hardhat.config.ts\`
+
+🔐 You will need to generate a **deployer address** using \`yarn generate\` This creates a mnemonic and saves it locally.
+
+👩‍🚀 Use \`yarn account\` to view your deployer account balances.
+
+⛽️ You will need to send ETH to your deployer address with your wallet, or get it from a public faucet of your chosen network.
+
+> 📝 If you plan on submitting this challenge, be sure to set your \`deadline\` to at least \`block.timestamp + 72 hours\`
+
+🚀 Run \`yarn deploy\` to deploy your smart contract to a public network (selected in \`hardhat.config.ts\`)
+
+> 💬 Hint: You can set the \`defaultNetwork\` in \`hardhat.config.ts\` to \`sepolia\` or \`optimismSepolia\` **OR** you can \`yarn deploy --network sepolia\` or \`yarn deploy --network optimismSepolia\`.
+
+![allStakings-blockFrom](https://github.com/scaffold-eth/se-2-challenges/assets/55535804/04725dc8-4a8d-4089-ba82-90f9b94bfbda)
+
+> 💬 Hint: For faster loading of your _"Stake Events"_ page, consider updating the \`fromBlock\` passed to \`useScaffoldEventHistory\` in [\`packages/nextjs/app/stakings/page.tsx\`](https://github.com/scaffold-eth/se-2-challenges/blob/challenge-1-decentralized-staking/packages/nextjs/app/stakings/page.tsx) to \`blocknumber - 10\` at which your contract was deployed. Example: \`fromBlock: 3750241n\` (where \`n\` represents its a [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)). To find this blocknumber, search your contract's address on Etherscan and find the \`Contract Creation\` transaction line.
+
+---
+
+## Checkpoint 5: 🚢 Ship your frontend! 🚁
+
+✏️ Edit your frontend config in \`packages/nextjs/scaffold.config.ts\` to change the \`targetNetwork\` to \`chains.sepolia\` (or \`chains.optimismSepolia\` if you deployed to OP Sepolia)
+
+💻 View your frontend at http://localhost:3000/staker-ui and verify you see the correct network.
+
+📡 When you are ready to ship the frontend app...
+
+📦 Run \`yarn vercel\` to package up your frontend and deploy.
+
+> Follow the steps to deploy to Vercel. Once you log in (email, github, etc), the default options should work. It'll give you a public URL.
+
+> If you want to redeploy to the same production URL you can run \`yarn vercel --prod\`. If you omit the \`--prod\` flag it will deploy it to a preview/test URL.
+
+> 🦊 Since we have deployed to a public testnet, you will now need to connect using a wallet you own or use a burner wallet. By default 🔥 \`burner wallets\` are only available on \`hardhat\` . You can enable them on every chain by setting \`onlyLocalBurnerWallet: false\` in your frontend config (\`scaffold.config.ts\` in \`packages/nextjs/\`)
+
+#### Configuration of Third-Party Services for Production-Grade Apps.
+
+By default, 🏗 Scaffold-ETH 2 provides predefined API keys for popular services such as Alchemy and Etherscan. This allows you to begin developing and testing your applications more easily, avoiding the need to register for these services.
+This is great to complete your **SpeedRunEthereum**.
+
+For production-grade applications, it's recommended to obtain your own API keys (to prevent rate limiting issues). You can configure these at:
+
+- 🔷\`ALCHEMY_API_KEY\` variable in \`packages/hardhat/.env\` and \`packages/nextjs/.env.local\`. You can create API keys from the [Alchemy dashboard](https://dashboard.alchemy.com/).
+
+- 📃\`ETHERSCAN_API_KEY\` variable in \`packages/hardhat/.env\` with your generated API key. You can get your key [here](https://etherscan.io/myapikey).
+
+> 💬 Hint: It's recommended to store env's for nextjs in Vercel/system env config for live apps and use .env.local for local testing.
+
+---
+
+## Checkpoint 6: 📜 Contract Verification
+
+Run the \`yarn verify --network your_network\` command to verify your contracts on etherscan 🛰
+
+👉 Search this address on [Sepolia Etherscan](https://sepolia.etherscan.io/) (or [Optimism Sepolia Etherscan](https://sepolia-optimism.etherscan.io/) if you deployed to OP Sepolia) to get the URL you submit to 🏃‍♀️[SpeedRunEthereum.com](https://speedrunethereum.com).
+
+---
+
+> 🏃 Head to your next challenge [here](https://speedrunethereum.com).
+
+> 💬 Problems, questions, comments on the stack? Post them to the [🏗 scaffold-eth developers chat](https://t.me/joinchat/F7nCRK3kI93PoCOk)
+`;
diff --git a/extension/packages/hardhat/contracts/ExampleExternalContract.sol b/extension/packages/hardhat/contracts/ExampleExternalContract.sol
new file mode 100644
index 00000000..e37b3f15
--- /dev/null
+++ b/extension/packages/hardhat/contracts/ExampleExternalContract.sol
@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: MIT
+pragma solidity 0.8.20; //Do not change the solidity version as it negativly impacts submission grading
+
+contract ExampleExternalContract {
+    bool public completed;
+
+    function complete() public payable {
+        completed = true;
+    }
+}
diff --git a/extension/packages/hardhat/contracts/Staker.sol b/extension/packages/hardhat/contracts/Staker.sol
new file mode 100644
index 00000000..932145d6
--- /dev/null
+++ b/extension/packages/hardhat/contracts/Staker.sol
@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: MIT
+pragma solidity 0.8.20; //Do not change the solidity version as it negativly impacts submission grading
+
+import "hardhat/console.sol";
+import "./ExampleExternalContract.sol";
+
+contract Staker {
+    ExampleExternalContract public exampleExternalContract;
+
+    constructor(address exampleExternalContractAddress) {
+        exampleExternalContract = ExampleExternalContract(
+            exampleExternalContractAddress
+        );
+    }
+
+    // Collect funds in a payable `stake()` function and track individual `balances` with a mapping:
+    // (Make sure to add a `Stake(address,uint256)` event and emit it for the frontend `All Stakings` tab to display)
+
+    // After some `deadline` allow anyone to call an `execute()` function
+    // If the deadline has passed and the threshold is met, it should call `exampleExternalContract.complete{value: address(this).balance}()`
+
+    // If the `threshold` was not met, allow everyone to call a `withdraw()` function to withdraw their balance
+
+    // Add a `timeLeft()` view function that returns the time left before the deadline for the frontend
+
+    // Add the `receive()` special function that receives eth and calls stake()
+}
diff --git a/extension/packages/hardhat/deploy/00_deploy_example_external_contract.ts b/extension/packages/hardhat/deploy/00_deploy_example_external_contract.ts
new file mode 100644
index 00000000..e6ecec90
--- /dev/null
+++ b/extension/packages/hardhat/deploy/00_deploy_example_external_contract.ts
@@ -0,0 +1,35 @@
+import { HardhatRuntimeEnvironment } from "hardhat/types";
+import { DeployFunction } from "hardhat-deploy/types";
+
+/**
+ * Deploys a contract named "YourContract" using the deployer account and
+ * constructor arguments set to the deployer address
+ *
+ * @param hre HardhatRuntimeEnvironment object.
+ */
+const deployExampleExternalContract: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
+  /*
+    On localhost, the deployer account is the one that comes with Hardhat, which is already funded.
+
+    When deploying to live networks (e.g `yarn deploy --network sepolia`), the deployer account
+    should have sufficient balance to pay for the gas fees for contract creation.
+
+    You can generate a random account with `yarn generate` which will fill DEPLOYER_PRIVATE_KEY
+    with a random private key in the .env file (then used on hardhat.config.ts)
+    You can run the `yarn account` command to check your balance in every network.
+  */
+  const { deployer } = await hre.getNamedAccounts();
+  const { deploy } = hre.deployments;
+
+  await deploy("ExampleExternalContract", {
+    from: deployer,
+    log: true,
+    // autoMine: can be passed to the deploy function to make the deployment process faster on local networks by
+    // automatically mining the contract deployment transaction. There is no effect on live networks.
+    autoMine: true,
+  });
+};
+
+export default deployExampleExternalContract;
+
+deployExampleExternalContract.tags = ["ExampleExternalContract"];
diff --git a/extension/packages/hardhat/deploy/01_deploy_staker.ts b/extension/packages/hardhat/deploy/01_deploy_staker.ts
new file mode 100644
index 00000000..8ff607b5
--- /dev/null
+++ b/extension/packages/hardhat/deploy/01_deploy_staker.ts
@@ -0,0 +1,38 @@
+import { HardhatRuntimeEnvironment } from "hardhat/types";
+import { DeployFunction } from "hardhat-deploy/types";
+
+/**
+ * Deploys a contract named "Staker" using the deployer account and
+ * constructor arguments set to the deployer address
+ *
+ * @param hre HardhatRuntimeEnvironment object.
+ */
+const deployStaker: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
+  /*
+    On localhost, the deployer account is the one that comes with Hardhat, which is already funded.
+
+    When deploying to live networks (e.g `yarn deploy --network goerli`), the deployer account
+    should have sufficient balance to pay for the gas fees for contract creation.
+
+    You can generate a random account with `yarn generate` which will fill DEPLOYER_PRIVATE_KEY
+    with a random private key in the .env file (then used on hardhat.config.ts)
+    You can run the `yarn account` command to check your balance in every network.
+  */
+  const { deployer } = await hre.getNamedAccounts();
+  const { deploy, get } = hre.deployments;
+  const exampleExternalContract = await get("ExampleExternalContract");
+
+  await deploy("Staker", {
+    from: deployer,
+    // Contract constructor arguments
+    args: [exampleExternalContract.address],
+    log: true,
+    // autoMine: can be passed to the deploy function to make the deployment process faster on local networks by
+    // automatically mining the contract deployment transaction. There is no effect on live networks.
+    autoMine: true,
+  });
+};
+
+export default deployStaker;
+
+deployStaker.tags = ["Staker"];
diff --git a/extension/packages/hardhat/test/Challenge1.ts b/extension/packages/hardhat/test/Challenge1.ts
new file mode 100644
index 00000000..0569a41d
--- /dev/null
+++ b/extension/packages/hardhat/test/Challenge1.ts
@@ -0,0 +1,149 @@
+//
+// This script executes when you run 'yarn test'
+//
+import { ethers, network } from "hardhat";
+import { expect } from "chai";
+import { ExampleExternalContract, Staker } from "../typechain-types";
+
+describe("🚩 Challenge 1: 🔏 Decentralized Staking App", function () {
+  let exampleExternalContract: ExampleExternalContract;
+  let stakerContract: Staker;
+
+  describe("Staker", function () {
+    const contractAddress = process.env.CONTRACT_ADDRESS;
+
+    let contractArtifact: string;
+    if (contractAddress) {
+      // For the autograder.
+      contractArtifact = `contracts/download-${contractAddress}.sol:Staker`;
+    } else {
+      contractArtifact = "contracts/Staker.sol:Staker";
+    }
+
+    it("Should deploy ExampleExternalContract", async function () {
+      const ExampleExternalContract = await ethers.getContractFactory("ExampleExternalContract");
+      exampleExternalContract = await ExampleExternalContract.deploy();
+    });
+    it("Should deploy Staker", async function () {
+      const Staker = await ethers.getContractFactory(contractArtifact);
+      stakerContract = (await Staker.deploy(await exampleExternalContract.getAddress())) as Staker;
+      console.log("\t", "🛰  Staker contract deployed on", await stakerContract.getAddress());
+    });
+    describe("stake()", function () {
+      it("Balance should go up when you stake()", async function () {
+        const [owner] = await ethers.getSigners();
+
+        console.log("\t", " 🧑‍🏫 Tester Address: ", owner.address);
+
+        const startingBalance = await stakerContract.balances(owner.address);
+        console.log("\t", " ⚖️ Starting balance: ", Number(startingBalance));
+
+        console.log("\t", " 🔨 Staking...");
+        const stakeResult = await stakerContract.stake({ value: ethers.parseEther("0.001") });
+        console.log("\t", " 🏷  stakeResult: ", stakeResult.hash);
+
+        console.log("\t", " ⏳ Waiting for confirmation...");
+        const txResult = await stakeResult.wait();
+        expect(txResult?.status).to.equal(1);
+
+        const newBalance = await stakerContract.balances(owner.address);
+        console.log("\t", " 🔎 New balance: ", ethers.formatEther(newBalance));
+        expect(newBalance).to.equal(startingBalance + ethers.parseEther("0.001"));
+      });
+
+      if (process.env.CONTRACT_ADDRESS) {
+        console.log(
+          " 🤷 since we will run this test on a live contract this is as far as the automated tests will go...",
+        );
+      } else {
+        it("If enough is staked and time has passed, you should be able to complete", async function () {
+          const timeLeft1 = await stakerContract.timeLeft();
+          console.log("\t", "⏱ There should be some time left: ", Number(timeLeft1));
+          expect(Number(timeLeft1)).to.greaterThan(0);
+
+          console.log("\t", " 🚀 Staking a full eth!");
+          const stakeResult = await stakerContract.stake({ value: ethers.parseEther("1") });
+          console.log("\t", " 🏷  stakeResult: ", stakeResult.hash);
+
+          console.log("\t", " ⌛️ fast forward time...");
+          await network.provider.send("evm_increaseTime", [72 * 3600]);
+          await network.provider.send("evm_mine");
+
+          const timeLeft2 = await stakerContract.timeLeft();
+          console.log("\t", "⏱ Time should be up now: ", Number(timeLeft2));
+          expect(Number(timeLeft2)).to.equal(0);
+
+          console.log("\t", " 🎉 calling execute");
+          const execResult = await stakerContract.execute();
+          console.log("\t", " 🏷  execResult: ", execResult.hash);
+
+          const result = await exampleExternalContract.completed();
+          console.log("\t", " 🥁 complete: ", result);
+          expect(result).to.equal(true);
+        });
+
+        it("Should redeploy Staker, stake, not get enough, and withdraw", async function () {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const [owner, secondAccount] = await ethers.getSigners();
+
+          const ExampleExternalContract = await ethers.getContractFactory("ExampleExternalContract");
+          exampleExternalContract = await ExampleExternalContract.deploy();
+          const exampleExternalContractAddress = await exampleExternalContract.getAddress();
+
+          const Staker = await ethers.getContractFactory("Staker");
+
+          stakerContract = await Staker.deploy(exampleExternalContractAddress);
+
+          console.log("\t", " 🔨 Staking...");
+          const stakeResult = await stakerContract.connect(secondAccount).stake({
+            value: ethers.parseEther("0.001"),
+          });
+          console.log("\t", " 🏷  stakeResult: ", stakeResult.hash);
+
+          console.log("\t", " ⏳ Waiting for confirmation...");
+          const txResult = await stakeResult.wait();
+          expect(txResult?.status).to.equal(1);
+
+          console.log("\t", " ⌛️ fast forward time...");
+          await network.provider.send("evm_increaseTime", [72 * 3600]);
+          await network.provider.send("evm_mine");
+
+          console.log("\t", " 🎉 calling execute");
+          const execResult = await stakerContract.execute();
+          console.log("\t", " 🏷  execResult: ", execResult.hash);
+
+          const result = await exampleExternalContract.completed();
+          console.log("\t", " 🥁 complete should be false: ", result);
+          expect(result).to.equal(false);
+
+          const startingBalance = await ethers.provider.getBalance(secondAccount.address);
+          //console.log("startingBalance before withdraw", ethers.formatEther(startingBalance))
+
+          console.log("\t", " 💵 calling withdraw");
+          const withdrawResult = await stakerContract.connect(secondAccount).withdraw();
+          console.log("\t", " 🏷  withdrawResult: ", withdrawResult.hash);
+
+          // need to account for the gas cost from calling withdraw
+          const tx = await ethers.provider.getTransaction(withdrawResult.hash);
+
+          if (!tx) {
+            throw new Error("Cannot resolve transaction");
+          }
+
+          const receipt = await ethers.provider.getTransactionReceipt(withdrawResult.hash);
+
+          if (!receipt) {
+            throw new Error("Cannot resolve receipt");
+          }
+
+          const gasCost = tx.gasPrice * receipt.gasUsed;
+
+          const endingBalance = await ethers.provider.getBalance(secondAccount.address);
+          //console.log("endingBalance after withdraw", ethers.formatEther(endingBalance))
+
+          expect(endingBalance).to.equal(startingBalance + ethers.parseEther("0.001") - gasCost);
+        });
+      }
+    });
+  });
+});
diff --git a/extension/packages/nextjs/app/layout.tsx.args.mjs b/extension/packages/nextjs/app/layout.tsx.args.mjs
new file mode 100644
index 00000000..d66c0094
--- /dev/null
+++ b/extension/packages/nextjs/app/layout.tsx.args.mjs
@@ -0,0 +1,4 @@
+export const metadata = {
+    title: "Challenge #1 | SpeedRunEthereum",
+    description: "Built with 🏗 Scaffold-ETH 2",
+};
diff --git a/extension/packages/nextjs/app/page.tsx.args.mjs b/extension/packages/nextjs/app/page.tsx.args.mjs
new file mode 100644
index 00000000..92b66c26
--- /dev/null
+++ b/extension/packages/nextjs/app/page.tsx.args.mjs
@@ -0,0 +1,40 @@
+export const imports = `import Image from "next/image";`;
+
+export const description = `
+  <div className="flex items-center flex-col flex-grow pt-10">
+      <div className="px-5">
+        <h1 className="text-center mb-6">
+          <span className="block text-2xl mb-2">SpeedRunEthereum</span>
+          <span className="block text-4xl font-bold">Challenge #1: 🔏 Decentralized Staking App</span>
+        </h1>
+        <div className="flex flex-col items-center justify-center">
+          <Image
+            src="/hero.png"
+            width="727"
+            height="231"
+            alt="challenge banner"
+            className="rounded-xl border-4 border-primary"
+          />
+          <div className="max-w-3xl">
+            <p className="text-center text-lg mt-8">
+              🦸 A superpower of Ethereum is allowing you, the builder, to create a simple set of rules that an
+              adversarial group of players can use to work together. In this challenge, you create a decentralized
+              application where users can coordinate a group funding effort. If the users cooperate, the money is
+              collected in a second smart contract. If they defect, the worst that can happen is everyone gets their
+              money back. The users only have to trust the code.
+            </p>
+            <p className="text-center text-lg">
+              🌟 The final deliverable is deploying a Dapp that lets users send ether to a contract and stake if the
+              conditions are met, then deploy your app to a public webserver. Submit the url on{" "}
+              <a href="https://speedrunethereum.com/" target="_blank" rel="noreferrer" className="underline">
+                SpeedRunEthereum.com
+              </a>{" "}
+              !
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+`;
+
+export const externalExtensionName = "SpeedRunEthereum Challenge #1";
diff --git a/extension/packages/nextjs/app/staker-ui/_components/EthToPrice.tsx b/extension/packages/nextjs/app/staker-ui/_components/EthToPrice.tsx
new file mode 100644
index 00000000..768b6660
--- /dev/null
+++ b/extension/packages/nextjs/app/staker-ui/_components/EthToPrice.tsx
@@ -0,0 +1,53 @@
+import { useCallback, useState } from "react";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
+
+type TBalanceProps = {
+  value?: string;
+  className?: string;
+};
+
+/**
+ * Display (ETH & USD) value for the input value provided.
+ */
+export const ETHToPrice = ({ value, className = "" }: TBalanceProps) => {
+  const [isEthBalance, setIsEthBalance] = useState(true);
+  const { targetNetwork } = useTargetNetwork();
+  const price = useGlobalState(state => state.nativeCurrency.price);
+
+  const onToggleBalance = useCallback(() => {
+    if (price > 0) {
+      setIsEthBalance(!isEthBalance);
+    }
+  }, [isEthBalance, price]);
+
+  if (!value) {
+    return (
+      <div className="animate-pulse flex space-x-4">
+        <div className="flex items-center space-y-6">
+          <div className="h-5 w-12 bg-slate-300 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <button
+      className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
+      onClick={onToggleBalance}
+    >
+      <div className="w-full flex items-center justify-center">
+        {isEthBalance ? (
+          <>
+            <span>{parseFloat(value).toFixed(4)}</span>
+            <span className="text-xs font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
+          </>
+        ) : (
+          <>
+            <span className="text-xs font-bold mr-1">$</span>
+            <span>{(parseFloat(value) * price).toFixed(2)}</span>
+          </>
+        )}
+      </div>
+    </button>
+  );
+};
diff --git a/extension/packages/nextjs/app/staker-ui/_components/StakeContractInteraction.tsx b/extension/packages/nextjs/app/staker-ui/_components/StakeContractInteraction.tsx
new file mode 100644
index 00000000..217b6452
--- /dev/null
+++ b/extension/packages/nextjs/app/staker-ui/_components/StakeContractInteraction.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { ETHToPrice } from "./EthToPrice";
+import humanizeDuration from "humanize-duration";
+import { formatEther, parseEther } from "viem";
+import { useAccount } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
+import { useDeployedContractInfo, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useWatchBalance } from "~~/hooks/scaffold-eth/useWatchBalance";
+
+export const StakeContractInteraction = ({ address }: { address?: string }) => {
+  const { address: connectedAddress } = useAccount();
+  const { data: StakerContract } = useDeployedContractInfo("Staker");
+  const { data: ExampleExternalContact } = useDeployedContractInfo("ExampleExternalContract");
+  const { data: stakerContractBalance } = useWatchBalance({
+    address: StakerContract?.address,
+  });
+  const { data: exampleExternalContractBalance } = useWatchBalance({
+    address: ExampleExternalContact?.address,
+  });
+
+  const { targetNetwork } = useTargetNetwork();
+
+  // Contract Read Actions
+  const { data: threshold } = useScaffoldReadContract({
+    contractName: "Staker",
+    functionName: "threshold",
+    watch: true,
+  });
+  const { data: timeLeft } = useScaffoldReadContract({
+    contractName: "Staker",
+    functionName: "timeLeft",
+    watch: true,
+  });
+  const { data: myStake } = useScaffoldReadContract({
+    contractName: "Staker",
+    functionName: "balances",
+    args: [connectedAddress],
+    watch: true,
+  });
+  const { data: isStakingCompleted } = useScaffoldReadContract({
+    contractName: "ExampleExternalContract",
+    functionName: "completed",
+    watch: true,
+  });
+
+  const { writeContractAsync } = useScaffoldWriteContract("Staker");
+
+  return (
+    <div className="flex items-center flex-col flex-grow w-full px-4 gap-12">
+      {isStakingCompleted && (
+        <div className="flex flex-col items-center gap-2 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-12 w-full max-w-lg">
+          <p className="block m-0 font-semibold">
+            {" "}
+            🎉 &nbsp; Staking App triggered `ExampleExternalContract` &nbsp; 🎉{" "}
+          </p>
+          <div className="flex items-center">
+            <ETHToPrice
+              value={exampleExternalContractBalance ? formatEther(exampleExternalContractBalance.value) : undefined}
+              className="text-[1rem]"
+            />
+            <p className="block m-0 text-lg -ml-1">staked !!</p>
+          </div>
+        </div>
+      )}
+      <div
+        className={`flex flex-col items-center space-y-8 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 w-full max-w-lg ${
+          !isStakingCompleted ? "mt-24" : ""
+        }`}
+      >
+        <div className="flex flex-col w-full items-center">
+          <p className="block text-2xl mt-0 mb-2 font-semibold">Staker Contract</p>
+          <Address address={address} size="xl" />
+        </div>
+        <div className="flex items-start justify-around w-full">
+          <div className="flex flex-col items-center justify-center w-1/2">
+            <p className="block text-xl mt-0 mb-1 font-semibold">Time Left</p>
+            <p className="m-0 p-0">{timeLeft ? `${humanizeDuration(Number(timeLeft) * 1000)}` : 0}</p>
+          </div>
+          <div className="flex flex-col items-center w-1/2">
+            <p className="block text-xl mt-0 mb-1 font-semibold">You Staked</p>
+            <span>
+              {myStake ? formatEther(myStake) : 0} {targetNetwork.nativeCurrency.symbol}
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-col items-center shrink-0 w-full">
+          <p className="block text-xl mt-0 mb-1 font-semibold">Total Staked</p>
+          <div className="flex space-x-2">
+            {<ETHToPrice value={stakerContractBalance ? formatEther(stakerContractBalance.value) : undefined} />}
+            <span>/</span>
+            {<ETHToPrice value={threshold ? formatEther(threshold) : undefined} />}
+          </div>
+        </div>
+        <div className="flex flex-col space-y-5">
+          <div className="flex space-x-7">
+            <button
+              className="btn btn-primary uppercase"
+              onClick={async () => {
+                try {
+                  await writeContractAsync({ functionName: "execute" });
+                } catch (err) {
+                  console.error("Error calling execute function");
+                }
+              }}
+            >
+              Execute!
+            </button>
+            <button
+              className="btn btn-primary uppercase"
+              onClick={async () => {
+                try {
+                  await writeContractAsync({ functionName: "withdraw" });
+                } catch (err) {
+                  console.error("Error calling withdraw function");
+                }
+              }}
+            >
+              Withdraw
+            </button>
+          </div>
+          <button
+            className="btn btn-primary uppercase"
+            onClick={async () => {
+              try {
+                await writeContractAsync({ functionName: "stake", value: parseEther("0.5") });
+              } catch (err) {
+                console.error("Error calling stake function");
+              }
+            }}
+          >
+            🔏 Stake 0.5 ether!
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/extension/packages/nextjs/app/staker-ui/_components/index.tsx b/extension/packages/nextjs/app/staker-ui/_components/index.tsx
new file mode 100644
index 00000000..98585a37
--- /dev/null
+++ b/extension/packages/nextjs/app/staker-ui/_components/index.tsx
@@ -0,0 +1,2 @@
+export * from "./EthToPrice";
+export * from "./StakeContractInteraction";
diff --git a/extension/packages/nextjs/app/staker-ui/page.tsx b/extension/packages/nextjs/app/staker-ui/page.tsx
new file mode 100644
index 00000000..44c4c87f
--- /dev/null
+++ b/extension/packages/nextjs/app/staker-ui/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { StakeContractInteraction } from "./_components";
+import type { NextPage } from "next";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
+
+const StakerUI: NextPage = () => {
+  const { data: StakerContract } = useDeployedContractInfo("Staker");
+  return <StakeContractInteraction key={StakerContract?.address} address={StakerContract?.address} />;
+};
+
+export default StakerUI;
diff --git a/extension/packages/nextjs/app/stakings/page.tsx b/extension/packages/nextjs/app/stakings/page.tsx
new file mode 100644
index 00000000..3c2c3f10
--- /dev/null
+++ b/extension/packages/nextjs/app/stakings/page.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import type { NextPage } from "next";
+import { formatEther } from "viem";
+import { Address } from "~~/components/scaffold-eth";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+
+const Stakings: NextPage = () => {
+  const { data: stakeEvents, isLoading } = useScaffoldEventHistory({
+    contractName: "Staker",
+    eventName: "Stake",
+    fromBlock: 0n,
+  });
+
+  if (isLoading)
+    return (
+      <div className="flex justify-center items-center mt-10">
+        <span className="loading loading-spinner loading-lg"></span>
+      </div>
+    );
+  return (
+    <div className="flex items-center flex-col flex-grow pt-10">
+      <div className="px-5">
+        <h1 className="text-center mb-3">
+          <span className="block text-2xl font-bold">All Staking Events</span>
+        </h1>
+      </div>
+      <div className="overflow-x-auto shadow-lg">
+        <table className="table table-zebra w-full">
+          <thead>
+            <tr>
+              <th className="bg-primary">From</th>
+              <th className="bg-primary">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {!stakeEvents || stakeEvents.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="text-center">
+                  No events found
+                </td>
+              </tr>
+            ) : (
+              stakeEvents?.map((event, index) => {
+                return (
+                  <tr key={index}>
+                    <td>
+                      <Address address={event.args?.[0]} />
+                    </td>
+                    <td>{formatEther(event.args?.[1] || 0n)} ETH</td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Stakings;
diff --git a/extension/packages/nextjs/components/Header.tsx.args.mjs b/extension/packages/nextjs/components/Header.tsx.args.mjs
new file mode 100644
index 00000000..eb68be7e
--- /dev/null
+++ b/extension/packages/nextjs/components/Header.tsx.args.mjs
@@ -0,0 +1,15 @@
+export const menuIconImports = `import { CircleStackIcon, InboxStackIcon} from "@heroicons/react/24/outline";`;
+
+export const menuObjects = `{
+    label: "Staker UI",
+    href: "/staker-ui",
+    icon: <CircleStackIcon className="h-4 w-4" />,
+  },
+  {
+    label: "Stake Events",
+    href: "/stakings",
+    icon: <InboxStackIcon className="h-4 w-4" />,
+  }`;
+
+export const logoTitle = "SRE Challenges";
+export const logoSubtitle = "#1 Decentralized Staking App";
diff --git a/extension/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.args.mjs b/extension/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.args.mjs
new file mode 100644
index 00000000..fca30389
--- /dev/null
+++ b/extension/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx.args.mjs
@@ -0,0 +1 @@
+export const globalClassNames = "font-space-grotesk";
diff --git a/extension/packages/nextjs/package.json b/extension/packages/nextjs/package.json
new file mode 100644
index 00000000..5102b066
--- /dev/null
+++ b/extension/packages/nextjs/package.json
@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "humanize-duration": "^3.28.0"
+  },
+  "devDependencies": {
+    "@types/humanize-duration": "^3"
+  }
+}
diff --git a/extension/packages/nextjs/public/hero.png b/extension/packages/nextjs/public/hero.png
new file mode 100644
index 00000000..80b0ea45
Binary files /dev/null and b/extension/packages/nextjs/public/hero.png differ
diff --git a/extension/packages/nextjs/public/thumbnail-challenge-1.png b/extension/packages/nextjs/public/thumbnail-challenge-1.png
new file mode 100644
index 00000000..39994016
Binary files /dev/null and b/extension/packages/nextjs/public/thumbnail-challenge-1.png differ
diff --git a/extension/packages/nextjs/styles/globals.css.args.mjs b/extension/packages/nextjs/styles/globals.css.args.mjs
new file mode 100644
index 00000000..340ea399
--- /dev/null
+++ b/extension/packages/nextjs/styles/globals.css.args.mjs
@@ -0,0 +1 @@
+export const globalImports = '@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");';
diff --git a/extension/packages/nextjs/tailwind.config.js.args.mjs b/extension/packages/nextjs/tailwind.config.js.args.mjs
new file mode 100644
index 00000000..912bcc9d
--- /dev/null
+++ b/extension/packages/nextjs/tailwind.config.js.args.mjs
@@ -0,0 +1,68 @@
+export const lightTheme = {
+  primary: "#C8F5FF",
+  "primary-content": "#026262",
+  secondary: "#89d7e9",
+  "secondary-content": "#088484",
+  accent: "#026262",
+  "accent-content": "#E9FBFF",
+  neutral: "#088484",
+  "neutral-content": "#F0FCFF",
+  "base-100": "#F0FCFF",
+  "base-200": "#E1FAFF",
+  "base-300": "#C8F5FF",
+  "base-content": "#088484",
+  info: "#026262",
+  success: "#34EEB6",
+  warning: "#FFCF72",
+  error: "#FF8863",
+
+  "--rounded-btn": "9999rem",
+
+  ".tooltip": {
+    "--tooltip-tail": "6px"
+  },
+  ".link": {
+    textUnderlineOffset: "2px"
+  },
+  ".link:hover": {
+    opacity: "80%"
+  }
+};
+
+export const darkTheme = {
+  primary: "#026262",
+  "primary-content": "#C8F5FF",
+  secondary: "#107575",
+  "secondary-content": "#E9FBFF",
+  accent: "#C8F5FF",
+  "accent-content": "#088484",
+  neutral: "#E9FBFF",
+  "neutral-content": "#11ACAC",
+  "base-100": "#11ACAC",
+  "base-200": "#088484",
+  "base-300": "#026262",
+  "base-content": "#E9FBFF",
+  info: "#C8F5FF",
+  success: "#34EEB6",
+  warning: "#FFCF72",
+  error: "#FF8863",
+
+  "--rounded-btn": "9999rem",
+
+  ".tooltip": {
+    "--tooltip-tail": "6px",
+    "--tooltip-color": "oklch(var(--p))"
+  },
+  ".link": {
+    textUnderlineOffset: "2px"
+  },
+  ".link:hover": {
+    opacity: "80%"
+  }
+};
+
+export const extendTheme = {
+  fontFamily: {
+    "space-grotesk": ["Space Grotesk", "sans-serif"]
+  }
+};
diff --git a/extension/packages/nextjs/utils/scaffold-eth/getMetadata.ts.args.mjs b/extension/packages/nextjs/utils/scaffold-eth/getMetadata.ts.args.mjs
new file mode 100644
index 00000000..73699206
--- /dev/null
+++ b/extension/packages/nextjs/utils/scaffold-eth/getMetadata.ts.args.mjs
@@ -0,0 +1,2 @@
+export const titleTemplate = "%s | SpeedRunEthereum";
+export const thumbnailPath = "/thumbnail-challenge-1.png";