diff --git a/docs/recipes/GetCurrentBalanceFromAccount.md b/docs/recipes/GetCurrentBalanceFromAccount.md
new file mode 100644
index 0000000..f375db9
--- /dev/null
+++ b/docs/recipes/GetCurrentBalanceFromAccount.md
@@ -0,0 +1,80 @@
+---
+sidebar_position: 1
+title: Get balance of the connected account
+description: Learn how to retrieve and display the ETH balance of the connected account in your dApp.
+---
+
+# Get the Current Balance of the Connected Account
+
+This recipe shows how to fetch and display the ETH balance of the currently connected account.
+
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/ConnectedAddressBalance.tsx"
+import { useAccount } from "wagmi";
+import { Address, Balance } from "~~/components/scaffold-eth";
+
+export const ConnectedAddressBalance = () => {
+  const { address: connectedAddress } = useAccount();
+
+  return (
+    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
+      <h2 className="text-lg font-bold mb-2">Your Ethereum Balance</h2>
+
+      <div className="text-sm font-semibold mb-2">
+        Address: <Address address={connectedAddress} />
+      </div>
+
+      <div className="text-sm font-semibold">
+        Balance: <Balance address={connectedAddress} />
+      </div>
+    </div>
+  );
+};
+```
+
+</details>
+
+## Implementation guide
+
+### Step 1: Create a new Component
+
+Begin by creating a new component in the "components" folder of your application.
+
+```tsx title="components/ConnectedAddressBalance.tsx"
+export const ConnectedAddressBalance = () => {
+  return (
+    <div>
+      <h2>Your Ethereum Balance</h2>
+    </div>
+  );
+};
+```
+
+### Step 2: Retrieve the Connected Account
+
+Fetch the Ethereum address of the currently connected account using the [useAccount wagmi hook](https://wagmi.sh/react/hooks/useAccount) and easily display them using Scaffold ETH-2 [Address](/components/Address) and [Balance](/components/Balance) components.
+
+```tsx title="components/ConnectedAddressBalance.tsx"
+// highlight-start
+import { useAccount } from "wagmi";
+import { Address, Balance } from "~~/components/scaffold-eth";
+// highlight-end
+
+export const ConnectedAddressBalance = () => {
+  // highlight-start
+  const { address: connectedAddress } = useAccount();
+  // highlight-end
+
+  return (
+    <div>
+      <h2>Your Ethereum Balance</h2>
+      {/* highlight-start */}
+      Address: <Address address={connectedAddress} />
+      Balance: <Balance address={connectedAddress} />
+      {/* highlight-end */}
+    </div>
+  );
+};
+```
diff --git a/docs/recipes/WagmiContractWriteWithFeedback.md b/docs/recipes/WagmiContractWriteWithFeedback.md
new file mode 100644
index 0000000..5155a4d
--- /dev/null
+++ b/docs/recipes/WagmiContractWriteWithFeedback.md
@@ -0,0 +1,162 @@
+---
+sidebar_position: 4
+title: Wagmi useContractWrite with transaction status
+description: Show feedback on transaction status to user by `useContractWrite` along with `useTransactor`
+---
+
+# Wagmi `useContractWrite` with transaction status
+
+This recipe demonstrates how to create a button for contract interaction using the "useTransactor" and "useContractWrite" hooks from the "wagmi" library. The interaction includes the capability provides feedback on the transaction status when using wagmi `useContractWrite`.
+
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/ContractInteraction.tsx"
+import * as React from "react";
+import { parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import { ArrowSmallRightIcon } from "@heroicons/react/24/outline";
+import DeployedContracts from "~~/contracts/deployedContracts";
+import { useTransactor } from "~~/hooks/scaffold-eth";
+
+export const ContractInteraction = () => {
+  const writeTx = useTransactor();
+
+  const { writeAsync } = useContractWrite({
+    address: DeployedContracts[31337].YourContract.address,
+    abi: DeployedContracts[31337].YourContract.abi,
+    functionName: "setGreeting",
+    value: parseEther("0.01"),
+    args: ["Hello world!"],
+  });
+
+  const handleSetGreeting = async () => {
+    try {
+      await writeTx(writeAsync, { blockConfirmations: 1 });
+    } catch (e) {
+      console.log("Unexpected error in writeTx", e);
+    }
+  };
+
+  return (
+    <button className="btn btn-primary" onClick={handleSetGreeting} disabled={isLoading}>
+      {isLoading ? (
+        <span className="loading loading-spinner loading-sm"></span>
+      ) : (
+        <>
+          Send <ArrowSmallRightIcon className="w-3 h-3 mt-0.5" />
+        </>
+      )}
+    </button>
+  );
+};
+```
+
+</details>
+
+## Implementation
+
+### Step 1: Set Up Your Component
+
+Create a new component in the "components" folder. The component will show a button that will allow users to interact with your smart contract.
+
+```tsx title="components/ContractInteraction.tsx"
+import * as React from "react";
+
+export const ContractInteraction = () => {
+  return <button>Send</button>;
+};
+```
+
+### Step 2: Configure wagmi's `useContractWrite` hook
+
+Add wagmi's `useContractWrite` hook and configure it with `abi`, `address`, `functionName` etc. Get the ABI and address of your smart contract from the DeployedContracts or you can grab it from ExternalContracts object, those will be used to set up the contract interaction.
+
+```tsx
+import * as React from "react";
+// highlight-start
+import { parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import DeployedContracts from "~~/contracts/deployedContracts";
+// highlight-end
+
+export const ContractInteraction = () => {
+  // highlight-start
+  const { writeAsync } = useContractWrite({
+    address: DeployedContracts[31337].YourContract.address,
+    abi: DeployedContracts[31337].YourContract.abi,
+    functionName: "setGreeting",
+    value: parseEther("0.01"),
+    args: ["Hello world!"],
+  });
+  // highlight-end
+
+  return <button>Send</button>;
+};
+```
+
+### Step 3: Initialize `useTransactor` hook and send transaction
+
+Initialize the `useTransactor` hook, and use it to wrap `writeAsync` function which we got from `useContractWrite` to show feedback transaction status to user.
+
+```tsx
+import * as React from "react";
+import { parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import DeployedContracts from "~~/contracts/deployedContracts";
+// highlight-start
+import { useTransactor } from "~~/hooks/scaffold-eth";
+// highlight-end
+
+export const ContractInteraction = () => {
+  const { writeAsync } = useContractWrite({
+    address: DeployedContracts[31337].YourContract.address,
+    abi: DeployedContracts[31337].YourContract.abi,
+    functionName: "setGreeting",
+    value: parseEther("0.01"),
+    args: ["Hello world!"],
+  });
+
+  // highlight-start
+  const writeTx = useTransactor();
+  // highlight-end
+
+  // highlight-start
+  return <button onClick={() => writeTx(writeAsync, { blockConfirmations: 1 })}>Send</button>;
+  // highlight-end
+};
+```
+
+### Step 4: Bonus adding loading state
+
+We can use `isLoading` returned from `useContractWrite` while the transaction is being mined and also `disable` the button.
+
+```tsx
+import * as React from "react";
+import { parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import DeployedContracts from "~~/contracts/deployedContracts";
+import { useTransactor } from "~~/hooks/scaffold-eth";
+
+export const ContractInteraction = () => {
+  // highlight-start
+  const { writeAsync, isLoading } = useContractWrite({
+    // highlight-end
+    address: DeployedContracts[31337].YourContract.address,
+    abi: DeployedContracts[31337].YourContract.abi,
+    functionName: "setGreeting",
+    value: parseEther("0.01"),
+    args: ["Hello world!"],
+  });
+
+  const writeTx = useTransactor();
+
+  return (
+    // highlight-start
+    <button onClick={() => writeTx(writeAsync, { blockConfirmations: 1 })} disabled={isLoading}>
+      {isLoading ? <span className="loading loading-spinner loading-sm"></span> : <>Send</>}
+    </button>
+    // highlight-end
+  );
+};
+```
diff --git a/docs/recipes/WriteToContractWriteAsyncButton.md b/docs/recipes/WriteToContractWriteAsyncButton.md
new file mode 100644
index 0000000..2aa13d4
--- /dev/null
+++ b/docs/recipes/WriteToContractWriteAsyncButton.md
@@ -0,0 +1,199 @@
+---
+sidebar_position: 2
+title: Write to contract with writeAsync button
+description: Learn how to create a button that executes the writeAsync function to interact with a smart contract.
+---
+
+# Write to a Contract with `writeAsync` button
+
+This recipe shows how to implement a button that allows users to interact with a smart contract by executing the `writeAsync` function returned by [useScaffoldContractWrite](/hooks/useScaffoldContractWrite). By following this guide, you can create a user interface for writing data to a contract.
+
+<details open>
+<summary>Here is the full code, which we will be implementing in the guide below:</summary>
+
+```tsx title="components/Greetings.tsx"
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+export const Greetings = () => {
+  const [newGreeting, setNewGreeting] = useState("");
+
+  const { writeAsync, isLoading } = useScaffoldContractWrite({
+    contractName: "YourContract",
+    functionName: "setGreeting",
+    args: [newGreeting],
+    value: parseEther("0.01"),
+    onBlockConfirmation: txnReceipt => {
+      console.log("📦 Transaction blockHash", txnReceipt.blockHash);
+    },
+  });
+
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Write your greeting"
+        className="input border border-primary"
+        onChange={e => setNewGreeting(e.target.value)}
+      />
+      <button className="btn btn-primary" onClick={() => writeAsync()} disabled={isLoading}>
+        {isLoading ? <span className="loading loading-spinner loading-sm"></span> : <>Send</>}
+      </button>
+    </>
+  );
+};
+```
+
+</details>
+
+## Implementation
+
+### Step 1: Set Up Your Component
+
+Create a new component in the "components" folder. This component will enable users to write data to a smart contract.
+
+```tsx title="components/Greetings.tsx"
+export const Greetings = () => {
+  return (
+    <>
+      <input type="text" placeholder="Write your greeting" className="input border border-primary" />
+      <button>Send</button>
+    </>
+  );
+};
+```
+
+### Step 2: Initialize `useScaffoldContractWrite` hook
+
+Initialize the `useScaffoldContractWrite` hook to set up the contract interaction. This hook provides the `writeAsync` function for sending transactions.
+
+```tsx
+// highlight-start
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+// highlight-end
+
+export const Greetings = () => {
+  // highlight-start
+  const [newGreeting, setNewGreeting] = useState("");
+
+  const { writeAsync } = useScaffoldContractWrite({
+    contractName: "YourContract",
+    functionName: "setGreeting",
+    args: [newGreeting],
+    value: parseEther("0.01"),
+    onBlockConfirmation: txnReceipt => {
+      console.log("📦 Transaction blockHash", txnReceipt.blockHash);
+    },
+  });
+  // highlight-end
+  return (
+    <>
+      <input type="text" placeholder="Write your greeting" className="input border border-primary" />
+      <button>Send</button>
+    </>
+  );
+};
+```
+
+### Step 3: Add input change logic and send transaction when users click the button
+
+Design the user interface to allow users to input data and trigger the contract interaction. The example below demonstrates a simple form:
+
+```tsx
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+export const Greetings = () => {
+  const [newGreeting, setNewGreeting] = useState("");
+
+  const { writeAsync } = useScaffoldContractWrite({
+    contractName: "YourContract",
+    functionName: "setGreeting",
+    args: [newGreeting],
+    value: parseEther("0.01"),
+    onBlockConfirmation: txnReceipt => {
+      console.log("📦 Transaction blockHash", txnReceipt.blockHash);
+    },
+  });
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Write your greeting"
+        className="input border border-primary"
+        // highlight-start
+        onChange={e => setNewGreeting(e.target.value)}
+        // highlight-end
+      />
+      <button
+        className="btn btn-primary"
+        // highlight-start
+        onClick={() => writeAsync()}
+        // highlight-end
+      >
+        Send
+      </button>
+    </>
+  );
+};
+```
+
+### Step 4: Bonus adding loading state
+
+We can use `isLoading` returned from `useScaffoldContractWrite` while the transaction is being mined and also disable the button.
+
+```tsx
+import { useState } from "react";
+import { parseEther } from "viem";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+export const Greetings = () => {
+  const [newGreeting, setNewGreeting] = useState("");
+  // highlight-start
+  const { writeAsync, isLoading } = useScaffoldContractWrite({
+    // highlight-end
+    contractName: "YourContract",
+    functionName: "setGreeting",
+    args: [newGreeting],
+    value: parseEther("0.01"),
+    onBlockConfirmation: txnReceipt => {
+      console.log("📦 Transaction blockHash", txnReceipt.blockHash);
+    },
+  });
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Write your greeting"
+        className="input border border-primary"
+        onChange={e => setNewGreeting(e.target.value)}
+      />
+
+      <button
+        className="btn btn-primary"
+        onClick={() => writeAsync()}
+        // highlight-start
+        disabled={isLoading}
+      >
+        {isLoading ? <span className="loading loading-spinner loading-sm"></span> : <>Send</>}
+      </button>
+    </>
+    // highlight-end
+  );
+};
+```
+
+:::info Hint
+You can also create a writeAsync button sending args imperatively, here is an example:
+
+```tsx
+<button className="btn btn-primary" onClick={() => writeAsync({ args: ["Hello"], value: parseEther("0.02") })}>
+  Send imperatively
+</button>
+```
+
+:::info Hint
diff --git a/docs/recipes/_category_.json b/docs/recipes/_category_.json
new file mode 100644
index 0000000..8ba59eb
--- /dev/null
+++ b/docs/recipes/_category_.json
@@ -0,0 +1,9 @@
+{
+  "label": "🧪 Recipes",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "slug": "recipes",
+    "description": "Explore a collection of practical recipes to implement common web3 use-cases with Scaffold-ETH 2. Learn how to interact with smart contracts, read and display data, manage account balances, and more. Each recipe offers step-by-step guidance, making it easy to implement different blockchain features into your dApps."
+  }
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 3ca7acc..5e3f15f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -14,3 +14,21 @@
   font-size: 14px;
   padding-left: 1rem;
 }
+
+h1 {
+  font-size: 2.5rem;
+}
+
+:root {
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* If you have a different syntax highlighting theme for dark mode. */
+[data-theme="dark"] {
+  /* Color which works with dark mode syntax highlighting theme */
+  --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100);
+}
+
+details[open] {
+  min-height: 50px;
+}