diff --git a/snaps/learn/tutorials/gas-estimation.md b/snaps/learn/tutorials/gas-estimation.md
index 424736f7d18..77d1ef2dc83 100644
--- a/snaps/learn/tutorials/gas-estimation.md
+++ b/snaps/learn/tutorials/gas-estimation.md
@@ -3,6 +3,9 @@ description: Create a Snap that estimates gas fees.
sidebar_position: 1
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
# Create a Snap to estimate gas fees
This tutorial walks you through creating a Snap that estimates gas fees.
@@ -24,21 +27,28 @@ Create a new Snap project using the
[`@metamask/create-snap`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap)
starter kit by running:
+
+
+
```bash
yarn create @metamask/snap gas-estimation-snap
```
-
-or
+
+
```bash
npx @metamask/create-snap gas-estimation-snap
```
-or
+
+
```bash
npm create @metamask/snap gas-estimation-snap
```
+
+
+
Next, `cd` into the `gas-estimation-snap` project directory and run:
@@ -47,18 +57,25 @@ yarn install
```
This initializes your development environment with the required dependencies.
-You may get a warning similar to the following:
+
+
+ Did you get a warning?
+
+You may get a warning such as:
```bash
@lavamoat/allow-scripts has detected dependencies without configuration. explicit configuration required.
run "allow-scripts auto" to automatically populate the configuration.
```
-You can resolve this error by running the following command:
+You can resolve this error by running:
```bash
yarn run allow-scripts auto
```
+
+
+
### 2. Add a custom icon
diff --git a/snaps/learn/tutorials/transaction-insights.md b/snaps/learn/tutorials/transaction-insights.md
index 10fa1b75d6e..3c94642a4eb 100644
--- a/snaps/learn/tutorials/transaction-insights.md
+++ b/snaps/learn/tutorials/transaction-insights.md
@@ -3,6 +3,9 @@ description: Create a Snap that provides transaction insights.
sidebar_position: 2
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
# Create a Snap to calculate gas fee percentages
This tutorial walks you through creating a Snap that calculates the percentage of gas fees that
@@ -28,41 +31,54 @@ Create a new Snap project using the
[`@metamask/create-snap`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap)
starter kit by running:
+
+
+
```bash
yarn create @metamask/snap transaction-insights-snap
```
-
-or
+
+
```bash
npx @metamask/create-snap transaction-insights-snap
```
-or
+
+
```bash
npm create @metamask/snap transaction-insights-snap
```
+
+
Next, `cd` into the `transaction-insights-snap` project directory and run:
```bash
yarn install
```
-
This initializes your development environment with the required dependencies.
-You may get a warning similar to the following:
+
+
+ Did you get a warning?
+
+You may get a warning such as:
```bash
@lavamoat/allow-scripts has detected dependencies without configuration. explicit configuration required.
run "allow-scripts auto" to automatically populate the configuration.
```
-You can resolve the issue by running the following command:
+You can resolve the issue by running:
```bash
yarn run allow-scripts auto
-```
+```
+
+
+
+
### 2. Enable transaction insights and the Ethereum provider