diff --git a/docs/content/add-plugins/algolia.md b/docs/content/add-plugins/algolia.md
index 9c7e125e2b1ca..c2d9a3515ef69 100644
--- a/docs/content/add-plugins/algolia.md
+++ b/docs/content/add-plugins/algolia.md
@@ -85,7 +85,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_ADMIN_API_KEY>` are respectively the Applicatio
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -170,7 +170,7 @@ The Next.js storefront has the Algolia integration available out of the box. To
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -190,7 +190,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are respectively the Applicati
 
 Finally, change the code in `src/lib/search-client.ts` to the following:
 
-```jsx
+```jsx title=src/lib/search-client.ts
 import algoliasearch from "algoliasearch/lite"
 
 const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "" // You should add this to your environment variables
@@ -247,7 +247,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -310,13 +310,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />
diff --git a/docs/content/add-plugins/contentful/customize-contentful.md b/docs/content/add-plugins/contentful/customize-contentful.md
index ac41bbf78ca18..75989cb0de501 100644
--- a/docs/content/add-plugins/contentful/customize-contentful.md
+++ b/docs/content/add-plugins/contentful/customize-contentful.md
@@ -22,7 +22,7 @@ The Contentful migrations are located in the `contentful-migrations` directory i
 
 Here’s an example of a migration created in a new file `contentful-migrations/rich-text.js`:
 
-```jsx
+```jsx title=contentful-migrations/rich-text.js
 #! /usr/bin/env node
 
 require("dotenv").config();
@@ -152,7 +152,7 @@ After creating a new content model in your Contentful Space, you must add the ne
 
 To render the Rich Text content you created in the previous example, create the file `src/components/rich-text/rich-text.js` with the following content:
 
-```jsx
+```jsx title=src/components/rich-text/rich-text.js
 import React from "react"
 import { renderRichText } from "gatsby-source-contentful/rich-text"
 
@@ -180,13 +180,13 @@ Since the Rich Text model can be added to any page, you must edit `src/pages/{Co
 
 In `src/pages/{ContentfulPage.slug}.js`, import the `RichText` component at the top of the file:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 Then, in the returned JSX add a new case to the switch statement:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 switch (cm.internal.type) {
   //...
   case "ContentfulRichText":
@@ -200,7 +200,7 @@ If the content model of a tile is Rich Text, you’ll display it with the `RichT
 
 Finally, to retrieve all necessary data of the Rich Text content, in the `query` GraphQL variable add the following after the `... on ContentfulTileSection` fragment:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
         # find the following line
         ... on ContentfulTileSection {
@@ -246,7 +246,7 @@ In the example migration, you also edited the product page to include a new Cont
 
 To render them on the Product Page, add the following in the GraphQL query defined in the `query` variable inside `product`:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
   query ($id: String!) {
     product: contentfulProduct(id: { eq: $id }) {
@@ -275,13 +275,13 @@ If you added other accepted Content Models to the `contentModules` field of the
 
 Then, in `src/views/product.js` import the `RichText` component:
 
-```jsx
+```jsx title=src/views/product.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 And in the returned JSX add the following before the last `</div>`:
 
-```jsx
+```jsx title=src/views/product.js
 <div className={styles.contentModules}>
   {product.contentModules?.map((cm) => {
     switch (cm.internal.type) {
diff --git a/docs/content/add-plugins/contentful/index.md b/docs/content/add-plugins/contentful/index.md
index 4a9dee73795be..df584e59a6670 100644
--- a/docs/content/add-plugins/contentful/index.md
+++ b/docs/content/add-plugins/contentful/index.md
@@ -38,7 +38,7 @@ This installs a new Medusa server in the directory `medusa-contentful`.
 
 Change to the `medusa-contentful` directory. In `.env` you’ll find three variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 CONTENTFUL_ENV=
@@ -116,7 +116,7 @@ You can find the format of the PostgreSQL database URL in [PostgreSQL’s docume
 
 Then, in `medusa-config.js` in the exported object, comment out or remove the SQLite database configurations and add the PostgreSQL database configurations:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     //...
@@ -239,7 +239,7 @@ mv .env.template .env
 
 Then, open `.env`. You should find the following environment variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 ```
diff --git a/docs/content/add-plugins/mailchimp.md b/docs/content/add-plugins/mailchimp.md
index 87c64ee60c194..009b4c21ee128 100644
--- a/docs/content/add-plugins/mailchimp.md
+++ b/docs/content/add-plugins/mailchimp.md
@@ -51,7 +51,7 @@ Make sure to replace `<YOUR_API_KEY>` with your API Key and `<YOUR_NEWSLETTER_LI
 
 Open `medusa-config.js` and add the new plugin into the `plugins` array:
 
-```js
+```js title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -72,7 +72,7 @@ This plugin adds a new `POST` endpoint at `/mailchimp/subscribe`. This endpoint
 
 Try sending a `POST` request to `/mailchimp/subscribe` with the following JSON body:
 
-```json noHeader
+```json noReport
 {
   "email": "example@gmail.com"
 }
@@ -90,7 +90,7 @@ If you check your Mailchimp dashboard, you should find the email added to your A
 
 Here’s an example of sending additional data with the subscription:
 
-```json noHeader
+```json noReport
 {
     "email": "example@gmail.com",
     "data": {
@@ -107,7 +107,7 @@ If you want to subscribe to users without using this endpoint or at a specific p
 
 Here’s an example of using the `mailchimpService` inside an endpoint:
 
-```jsx
+```jsx title=src/api/index.ts
 const mailchimpService = req.scope.resolve("mailchimpService")
 
 mailchimpService.subscribeNewsletter(
diff --git a/docs/content/add-plugins/meilisearch.md b/docs/content/add-plugins/meilisearch.md
index 713719b39b947..8748fbd1e710d 100644
--- a/docs/content/add-plugins/meilisearch.md
+++ b/docs/content/add-plugins/meilisearch.md
@@ -51,7 +51,7 @@ Where `<YOUR_MEILISEARCH_HOST>` is the host of your MeiliSearch instance. By def
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -144,7 +144,7 @@ The Next.js storefront has the MeiliSearch integration available out of the box.
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -206,7 +206,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -269,13 +269,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />
diff --git a/docs/content/add-plugins/minio.md b/docs/content/add-plugins/minio.md
index c51c5a31b05f7..e5d14db855162 100644
--- a/docs/content/add-plugins/minio.md
+++ b/docs/content/add-plugins/minio.md
@@ -97,7 +97,7 @@ Where `<ENDPOINT>` is the URL of your MinIO server, `<BUCKET>` is the name of th
 
 Finally, configure your `medusa-config.js` to include the plugin with the required options:
 
-```bash
+```js title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -145,7 +145,7 @@ MINIO_PRIVATE_BUCKET=exports
 
 Then, add a new option to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -170,7 +170,7 @@ Where `<YOUR_PRIVATE_ACCESS_KEY>` and `<YOUR_PRIVATE_SECRET_KEY>` are the access
 
 Then, add two new options to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -189,7 +189,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-c
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...
diff --git a/docs/content/add-plugins/paypal.md b/docs/content/add-plugins/paypal.md
index 221c7a9abea3b..fe2d8a7705cea 100644
--- a/docs/content/add-plugins/paypal.md
+++ b/docs/content/add-plugins/paypal.md
@@ -51,7 +51,7 @@ Notice that during development it’s highly recommended to set `PAYPAL_SANDBOX`
 
 Then, in `medusa-config.js`, add the PayPal plugin to the `plugins` array with the configurations necessary:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //other plugins...
   {
@@ -119,7 +119,7 @@ Medusa has a Next.js storefront that you can easily use with your Medusa server.
 
 In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:
 
-```bash
+```bash title=.env.local
 NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
 ```
 
@@ -137,7 +137,7 @@ Medusa also has a Gatsby storefront that you can use as your ecommerce storefron
 
 In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID:
 
-```bash
+```bash title=.env.development
 GATSBY_PAYPAL_CLIENT_ID=<CLIENT_ID>
 ```
 
@@ -149,7 +149,7 @@ npm install @paypal/react-paypal-js
 
 Next, create a new file `src/components/payment/paypal-payment/index.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/payment/paypal-payment/index.jsx
 import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
 import React, { useMemo, useState } from "react";
 
@@ -253,7 +253,7 @@ The last step is to add this component as the component to render when PayPal is
 
 In `src/components/payment/index.js` you’ll find in the return statement a switch statement that checks the payment provider for each payment session and renders the component based on the ID. Add before the `default` case a case for `paypal`:
 
-```jsx
+```jsx title=src/components/payment/index.js
 switch (ps.provider_id) {
   case "stripe":
     //...
diff --git a/docs/content/add-plugins/s3.md b/docs/content/add-plugins/s3.md
index 5bc30f8a6b057..d12362a6fa5f2 100644
--- a/docs/content/add-plugins/s3.md
+++ b/docs/content/add-plugins/s3.md
@@ -108,7 +108,7 @@ Where:
 
 Finally, in `medusa-config.js`, add to the `plugins` array the following new item:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -156,7 +156,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...
diff --git a/docs/content/add-plugins/segment.md b/docs/content/add-plugins/segment.md
index 40b231c12cfec..54f80f4e39943 100644
--- a/docs/content/add-plugins/segment.md
+++ b/docs/content/add-plugins/segment.md
@@ -102,7 +102,7 @@ Where `<YOUR_SEGMENT_WRITE_KEY>` is the Write Key shown on the page of the Segme
 
 Finally, in `medusa-config.js`, add the following new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -142,7 +142,7 @@ In some cases, you might want to track more events or custom events. You can do
 
 For example, you can add the following subscriber to listen to the `customer.created` event and add tracking for every customer created:
 
-```jsx
+```jsx title=src/subscribers/customer.ts
 class CustomerSubscriber {
   constructor({ segmentService, eventBusService }) {
     this.segmentService = segmentService;
diff --git a/docs/content/add-plugins/sendgrid.mdx b/docs/content/add-plugins/sendgrid.mdx
index ba252dc2ab3d8..7a1873368549b 100644
--- a/docs/content/add-plugins/sendgrid.mdx
+++ b/docs/content/add-plugins/sendgrid.mdx
@@ -79,7 +79,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "beforeInsert": [Function],
     "billing_address": null,
@@ -306,7 +306,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "beforeInsert": [Function],
     "billing_address": null,
@@ -537,7 +537,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -819,7 +819,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -1261,7 +1261,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -1703,7 +1703,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "claim": Object {
       "canceled_at": null,
@@ -2000,7 +2000,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "locale": null,
     "swap": Object {
@@ -2509,7 +2509,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "additional_total": "16.88 USD",
     "date": Any<String>,
@@ -3089,7 +3089,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "locale": null,
     "swap": Object {
@@ -3599,7 +3599,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "code": Any<String>,
     "value": 4,
@@ -3766,7 +3766,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "id": Any<String>,
     "email": "test@testson.com",
@@ -3786,7 +3786,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "email": "test@testson.com",
     "token": Any<String>,
@@ -3803,7 +3803,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "product": Object {
       "collection_id": null,
@@ -3918,7 +3918,7 @@ Where `<ORDER_PLACED_TEMPLATE_ID` is the ID of your template for order placed em
 
 Finally, in your `medusa-config.js` file, add the SendGrid plugin into the array of plugins:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
diff --git a/docs/content/add-plugins/slack.md b/docs/content/add-plugins/slack.md
index e07c41fbf4677..2a000de26b0fa 100644
--- a/docs/content/add-plugins/slack.md
+++ b/docs/content/add-plugins/slack.md
@@ -75,7 +75,7 @@ npm install medusa-plugin-slack-notification
 
 After that, open `medusa-config.js` and add the new plugin with its configurations in the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
diff --git a/docs/content/add-plugins/spaces.md b/docs/content/add-plugins/spaces.md
index 84348f02d6f96..a58e1de867bac 100644
--- a/docs/content/add-plugins/spaces.md
+++ b/docs/content/add-plugins/spaces.md
@@ -95,7 +95,7 @@ Where:
 
 Finally, in `medusa-config.js` add a new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -143,7 +143,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...
diff --git a/docs/content/add-plugins/strapi.md b/docs/content/add-plugins/strapi.md
index 642bc56d51607..082f96ea9aaff 100644
--- a/docs/content/add-plugins/strapi.md
+++ b/docs/content/add-plugins/strapi.md
@@ -82,7 +82,7 @@ The `--seed` flag creates an SQLite database and seeds it with some demo data.
 
 Once the command is done executing, change to the newly created `medusa-server` directory. Then, in `medusa-config.js`, change the exported object at the end of the file to enable Redis:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     redis_url: REDIS_URL,
@@ -128,7 +128,7 @@ Where:
 
 Finally, open `medusa-config.js` and add the following new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
diff --git a/docs/content/add-plugins/stripe.md b/docs/content/add-plugins/stripe.md
index 98bb868ba1cb3..450ddd05bad06 100644
--- a/docs/content/add-plugins/stripe.md
+++ b/docs/content/add-plugins/stripe.md
@@ -42,7 +42,7 @@ Next, you need to add configurations for your stripe plugin.
 
 In `medusa-config.js` add the following at the end of the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -123,7 +123,7 @@ Medusa has a Next.js storefront that you can easily use with your Medusa server.
 
 In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:
 
-```bash
+```bash title=.env.local
 NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
 ```
 
@@ -139,7 +139,7 @@ Medusa also has a Gatsby storefront that you can use as your ecommerce store. If
 
 In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with the value set to the Publishable Key:
 
-```jsx
+```jsx title=.env.development
 GATSBY_STRIPE_KEY=pk_
 ```
 
diff --git a/docs/content/add-plugins/twilio-sms.md b/docs/content/add-plugins/twilio-sms.md
index 0d0f6868908f5..eb2a7f1a7e826 100644
--- a/docs/content/add-plugins/twilio-sms.md
+++ b/docs/content/add-plugins/twilio-sms.md
@@ -44,7 +44,7 @@ Make sure to replace `<YOUR_ACCOUNT_SID>`, `<YOUR_AUTH_TOKEN>`, and `<YOUR_TWILI
 
 Finally, add the plugin and its options in the `medusa-config.js` file to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -72,7 +72,7 @@ For this example to work, you’ll need to install and configure Redis on your s
 
 Create the file `src/services/sms.js` in your Medusa server with the following content:
 
-```jsx
+```jsx title=src/services/sms.js
 class SmsSubscriber {
   constructor({ twilioSmsService, orderService, eventBusService }) {
     this.twilioSmsService_ = twilioSmsService;
diff --git a/docs/content/admin/quickstart.md b/docs/content/admin/quickstart.md
index bd1828d4ac1dc..e6d93297f7ca1 100644
--- a/docs/content/admin/quickstart.md
+++ b/docs/content/admin/quickstart.md
@@ -43,7 +43,7 @@ Before running your Medusa admin, make sure that your Medusa server is running.
 
 To run your Medusa server, go to the directory holding the server and run:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm run start
 ```
 
@@ -65,7 +65,7 @@ Use your Medusa admin’s user credentials to log in.
 
 If you installed the demo data when you installed the Medusa server by using the `--seed` option or running:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm run seed
 ```
 
diff --git a/docs/content/advanced/admin/import-prices.mdx b/docs/content/advanced/admin/import-prices.mdx
index bdfd44b3056fe..66d0d58cf1e62 100644
--- a/docs/content/advanced/admin/import-prices.mdx
+++ b/docs/content/advanced/admin/import-prices.mdx
@@ -95,10 +95,10 @@ fetch(`<YOUR_SERVER>/admin/uploads`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/uploads' \
-	--header 'Authorization: Bearer {api_token}' \
-	--header 'Content-Type: text/csv' \
-	--form 'files=@"<FILE_PATH_1>"'
+curl -L -X POST '<YOUR_SERVER>/admin/uploads' \
+	-H 'Authorization: Bearer {api_token}' \
+	-H 'Content-Type: text/csv' \
+	-F 'files=@"<FILE_PATH_1>"'
 ```
 
 </TabItem>
@@ -158,9 +158,9 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs' \
---header 'Authorization: Bearer {api_token}' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs' \
+-H 'Authorization: Bearer {api_token}' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "type": "price-list-import",
     "context": { 
@@ -225,8 +225,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
---header 'Authorization: Bearer {api_token}'
+curl -L -X GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
+-H 'Authorization: Bearer {api_token}'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
@@ -239,7 +239,7 @@ If the batch job has been pre-processed, the status of the batch job will be `pr
 
 Here’s an example of the `result` property:
 
-```json noHeader
+```json noReport
 "result": {
     "count": 5, // Total number of prices to be added
     "stat_descriptors": [ //details about the prices to be added
@@ -287,8 +287,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
---header 'Authorization: Bearer {api_token}'
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
+-H 'Authorization: Bearer {api_token}'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
diff --git a/docs/content/advanced/admin/import-products.mdx b/docs/content/advanced/admin/import-products.mdx
index 8220258fdefe9..4ffdeab02d9e0 100644
--- a/docs/content/advanced/admin/import-products.mdx
+++ b/docs/content/advanced/admin/import-products.mdx
@@ -89,10 +89,10 @@ fetch(`<YOUR_SERVER>/admin/uploads`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/uploads' \
-  --header 'Authorization: Bearer <API_TOKEN>' \
-  --header 'Content-Type: text/csv' \
-  --form 'files=@"<FILE_PATH_1>"'
+curl -L -X POST '<YOUR_SERVER>/admin/uploads' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Content-Type: text/csv' \
+  -F 'files=@"<FILE_PATH_1>"'
 ```
 
 </TabItem>
@@ -150,9 +150,9 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "type": "product-import",
     "context": { 
@@ -213,8 +213,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
@@ -227,7 +227,7 @@ If the batch job has been pre-processed, the status of the batch job will be `pr
 
 Here’s an example of the `result` property:
 
-```json noHeader
+```json noReport
 "result": {
     "count": 5, // Total number of products to be created or updated
     "stat_descriptors": [ //details about the products to be created/updated
@@ -275,8 +275,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
+-H 'Authorization: Bearer <API_TOKEN>'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
diff --git a/docs/content/advanced/admin/manage-discounts.mdx b/docs/content/advanced/admin/manage-discounts.mdx
index 9409d38144d54..26a2a5f21bb90 100644
--- a/docs/content/advanced/admin/manage-discounts.mdx
+++ b/docs/content/advanced/admin/manage-discounts.mdx
@@ -105,9 +105,9 @@ fetch(`<YOUR_SERVER>/admin/discounts`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/discounts' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/discounts' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "code": "<CODE>",
     "rule": {
@@ -179,9 +179,9 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
   "description": "New description",
   "is_disabled": true
@@ -253,9 +253,9 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
   "operator": "in",
   "products": [
@@ -317,8 +317,8 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}&exp
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>&expand=products' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>&expand=products' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -378,9 +378,9 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "products": [
       "<PRODUCT_ID_1>",
@@ -430,8 +430,8 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>/conditions/<CONDITION_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -473,8 +473,8 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
diff --git a/docs/content/advanced/admin/use-customergroups-api.mdx b/docs/content/advanced/admin/use-customergroups-api.mdx
index 8139c36bf4418..4447de55167ba 100644
--- a/docs/content/advanced/admin/use-customergroups-api.mdx
+++ b/docs/content/advanced/admin/use-customergroups-api.mdx
@@ -75,9 +75,9 @@ fetch(`<SERVER_URL>/admin/customer-groups`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/customer-groups' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/customer-groups' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "name": "VIP"
 }'
@@ -121,8 +121,8 @@ fetch(`<SERVER_URL>/admin/customer-groups`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/customer-groups' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/customer-groups' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -165,8 +165,8 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -220,9 +220,9 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "metadata": {
 			"is_seller": true
@@ -269,8 +269,8 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -330,9 +330,9 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers/batch' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers/batch' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "customer_ids": [
         {
@@ -378,8 +378,8 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -441,9 +441,9 @@ fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers/batch' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X DELETE '<SERVER_URL>/admin/customer-groups/<CUSTOMER_GROUP_ID>/customers/batch' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "customer_ids": [
         {
diff --git a/docs/content/advanced/backend/batch-jobs/create.md b/docs/content/advanced/backend/batch-jobs/create.md
index 2eb536cc46a7e..17f3312b17134 100644
--- a/docs/content/advanced/backend/batch-jobs/create.md
+++ b/docs/content/advanced/backend/batch-jobs/create.md
@@ -43,7 +43,7 @@ Batch job strategies must extend the abstract class `AbstractBatchJobStrategy` a
 
 Add the following content to the file you created:
 
-```tsx
+```tsx title=src/strategies/publish.ts
 import { AbstractBatchJobStrategy, BatchJobService } from '@medusajs/medusa'
 import { EntityManager } from 'typeorm'
 
@@ -294,9 +294,9 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "type": "publish-products",
     "context": { },
@@ -342,8 +342,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
@@ -352,7 +352,7 @@ curl --location --request GET '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>' \
 
 Based on the batch job strategy implemented in this documentation, the `result` property could be something like this:
 
-```json noHeader
+```json noReport
 "result": {
     "count": 1,
     "stat_descriptors": [
@@ -398,8 +398,8 @@ fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X POST '<YOUR_SERVER>/admin/batch-jobs/<BATCH_JOB_ID>/confirm' \
+-H 'Authorization: Bearer <API_TOKEN>'
 # <BATCH_JOB_ID> is the ID of the batch job
 ```
 
diff --git a/docs/content/advanced/backend/batch-jobs/customize-import.md b/docs/content/advanced/backend/batch-jobs/customize-import.md
index b52bec67ecd36..caf919ca62da1 100644
--- a/docs/content/advanced/backend/batch-jobs/customize-import.md
+++ b/docs/content/advanced/backend/batch-jobs/customize-import.md
@@ -40,7 +40,7 @@ The batch job strategy class must extend the `AbstractBatchJobStrategy` class wh
 
 For example, you can define the following class in the file you created:
 
-```typescript
+```typescript title=src/strategies/import.ts
 import { AbstractBatchJobStrategy, BatchJobService } from '@medusajs/medusa'
 import { EntityManager } from 'typeorm'
 
diff --git a/docs/content/advanced/backend/cron-jobs/create.md b/docs/content/advanced/backend/cron-jobs/create.md
index 0934694095a76..79c607d6dd0db 100644
--- a/docs/content/advanced/backend/cron-jobs/create.md
+++ b/docs/content/advanced/backend/cron-jobs/create.md
@@ -30,7 +30,7 @@ For the example in this tutorial, you can create the file `src/loaders/publish.t
 
 To create a cron job, add the following code in the file you created, which is `src/loaders/publish.ts` in this example:
 
-```ts
+```ts title=src/loaders/publish.ts
 const publishJob = async (container, options) => {
   const eventBus = container.resolve("eventBusService");
   eventBus.createCronJob("publish-products", {}, "0 0 * * *", async () => {
@@ -111,7 +111,7 @@ Once it is time to run your cron job based on the cron job expression pattern, t
 
 For example, the above cron job will run at 12 AM and, when it runs, you can see the following logged on your Medusa server:
 
-```bash noHeader
+```bash noReport
 info:    Processing cron job: publish-products
 ```
 
diff --git a/docs/content/advanced/backend/customer-groups/index.md b/docs/content/advanced/backend/customer-groups/index.md
index 21800e141d335..a9349812bcad8 100644
--- a/docs/content/advanced/backend/customer-groups/index.md
+++ b/docs/content/advanced/backend/customer-groups/index.md
@@ -24,7 +24,7 @@ A customer group is stored in the database as a [CustomerGroup](../../../refere
 
 Similar to all entities in Medusa, you can use the `metadata` object attribute to store any custom data you want. For example, you can add some flag or tag to the customer group for a custom use case:
 
-```jsx noHeader
+```jsx noReport
 metadata: {
 	is_seller: true
 }
diff --git a/docs/content/advanced/backend/endpoints/add.md b/docs/content/advanced/backend/endpoints/add.md
index 9e78a59e95e48..39738ee6d24ae 100644
--- a/docs/content/advanced/backend/endpoints/add.md
+++ b/docs/content/advanced/backend/endpoints/add.md
@@ -10,7 +10,7 @@ Custom endpoints reside under the `src/api` directory in your Medusa Backend. T
 
 To create a new endpoint, start by creating a new file in `src/api` called `index.ts`. At its basic format, `index.ts` should look something like this:
 
-```ts
+```ts title=src/api/index.ts
 import { Router } from "express"
 
 export default (rootDirectory, pluginOptions) => {
@@ -86,7 +86,7 @@ router.get("/admin/hello", cors(corsOptions), (req, res) => {
 
 You can add more than one endpoint in `src/api/index.ts`:
 
-```ts
+```ts title=src/api/index.ts
 router.options("/store/hello", cors(storeCorsOptions))
 router.get("/store/hello", cors(storeCorsOptions), (req, res) => {
   res.json({
@@ -108,7 +108,7 @@ Alternatively, you can add multiple files for each endpoint or set of endpoints
 
 To do that with the previous example, first, create the file `src/api/store.ts` with the following content:
 
-```ts
+```ts title=src/api/store.ts
 import cors from "cors"
 import { projectConfig } from "../../medusa-config"
 
@@ -130,7 +130,7 @@ You export a function that receives an Express router as a parameter and adds th
 
 Next, create the file `src/api/admin.ts` with the following content:
 
-```ts
+```ts title=src/api/admin.ts
 import cors from "cors"
 import { projectConfig } from "../../medusa-config"
 
@@ -152,14 +152,15 @@ Again, you export a function that receives an Express router as a parameter and
 
 Finally, in `src/api/index.ts` import the two functions at the beginning of the file:
 
-```ts
+```ts title=src/api/index.ts
+import { Router } from "express"
 import storeRoutes from "./store"
 import adminRoutes from "./admin"
 ```
 
 and in the exported function, call each of the functions passing them the Express router:
 
-```ts
+```ts title=src/api/index.ts
 export default () => {
   const router = Router()
 
diff --git a/docs/content/advanced/backend/entities/index.md b/docs/content/advanced/backend/entities/index.md
index 1ea4774249866..742ce1031d58e 100644
--- a/docs/content/advanced/backend/entities/index.md
+++ b/docs/content/advanced/backend/entities/index.md
@@ -6,7 +6,7 @@ In this document, you’ll learn how you can create an [Entity](overview.md).
 
 To create an entity, create a TypeScript file in `src/models`. For example, here’s a `Post` entity defined in the file `src/models/post.ts`:
 
-```tsx
+```tsx title=src/models/post.ts
 import { BeforeInsert, Column, Entity, PrimaryColumn } from "typeorm";
 import { BaseEntity} from "@medusajs/medusa";
 import { generateEntityId } from "@medusajs/medusa/dist/utils"
@@ -50,9 +50,9 @@ You can learn more about Migrations, how to create them, and how to run them in
 
 ### Create a Repository
 
-Entities data can be easily accessed and modified using Typeorm [Repositories](https://typeorm.io/working-with-repository). To create a repository, create a file in `src/repositories`. For example, here’s a repository `PostRepository` that resides in `src/repositories/post.ts`:
+Entities data can be easily accessed and modified using Typeorm [Repositories](https://typeorm.io/working-with-repository). To create a repository, create a file in `src/repositories`. For example, here’s a repository `PostRepository` created in `src/repositories/post.ts`:
 
-```tsx
+```tsx title=src/repositories/post.ts
 import { EntityRepository, Repository } from "typeorm"
 
 import { Post } from "../models/post"
@@ -75,7 +75,7 @@ Be careful with your file names as it can cause unclear errors in Typeorm. Make
 
 Before trying this step make sure that you’ve created and run your migrations. You also need to re-build your code using:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm run build
 ```
 
diff --git a/docs/content/advanced/backend/feature-flags/toggle.md b/docs/content/advanced/backend/feature-flags/toggle.md
index 6ea442dca15a6..a1f5a6904c286 100644
--- a/docs/content/advanced/backend/feature-flags/toggle.md
+++ b/docs/content/advanced/backend/feature-flags/toggle.md
@@ -44,7 +44,7 @@ You can enable a feature by using the server settings in `medusa-config.js`. You
 
 For example, to enable the Tax-Inclusive Pricing beta feature, add the following to the exported object in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   featureFlags: {
     tax_inclusive_pricing: true
diff --git a/docs/content/advanced/backend/notification/how-to-create-notification-provider.md b/docs/content/advanced/backend/notification/how-to-create-notification-provider.md
index fcbfc6fc1f488..395ea0ac47e5f 100644
--- a/docs/content/advanced/backend/notification/how-to-create-notification-provider.md
+++ b/docs/content/advanced/backend/notification/how-to-create-notification-provider.md
@@ -20,7 +20,7 @@ Creating a Notification Provider is as simple as creating a TypeScript or JavaS
 
 For example, create the file `src/services/email-sender.ts` with the following content:
 
-```ts
+```ts title=src/services/email-sender.ts
 import { AbstractNotificationService } from "@medusajs/medusa";
 import { EntityManager } from "typeorm";
 
@@ -89,7 +89,6 @@ class EmailSenderService extends AbstractNotificationService {
   static identifier = "email-sender";
   protected orderService: OrderService;
 
-  // highlight-start
   constructor(container, options) {
     super(container);
     //you can access options here in case you're
@@ -97,7 +96,6 @@ class EmailSenderService extends AbstractNotificationService {
 
     this.orderService = container.orderService;
   }
-  // highlight-end
 
   //...
 }
@@ -219,7 +217,7 @@ This section will not cover the basics of Subscribers. You can read the [Subscri
 
 Following the previous example, to make sure the `email-sender` Notification Provider handles the `order.placed` event, create the file `src/subscribers/notification.js` with the following content:
 
-```ts
+```ts title=src/subscribers/notification.js
 class NotificationSubscriber {
   constructor({ notificationService }) {
     notificationService.subscribe('order.placed', 'email-sender');
diff --git a/docs/content/advanced/backend/payment/how-to-create-payment-provider.md b/docs/content/advanced/backend/payment/how-to-create-payment-provider.md
index f47c33d58e3b8..efb27405adcf0 100644
--- a/docs/content/advanced/backend/payment/how-to-create-payment-provider.md
+++ b/docs/content/advanced/backend/payment/how-to-create-payment-provider.md
@@ -48,7 +48,7 @@ The first step to create a payment provider is to create a JavaScript or TypeScr
 
 For example, create the file `src/services/my-payment.ts` with the following content:
 
-```ts
+```ts title=src/services/my-payment.ts
 import { AbstractPaymentService, Cart, Data, Payment, PaymentSession, PaymentSessionStatus, TransactionBaseService } from "@medusajs/medusa"
 import { EntityManager } from "typeorm";
 
diff --git a/docs/content/advanced/backend/plugins/create.md b/docs/content/advanced/backend/plugins/create.md
index 2a19999d72a32..c520e4c96aa3b 100644
--- a/docs/content/advanced/backend/plugins/create.md
+++ b/docs/content/advanced/backend/plugins/create.md
@@ -38,7 +38,7 @@ Update the `name` field in the `package.json` file to the name of your plugin. T
 
 A basic Medusa server installed with the `medusa new` command has dependencies similar to this:
 
-```json
+```json title=package.json
 "dependencies": {
   "@medusajs/medusa": "^1.3.1",
   "@medusajs/medusa-cli": "^1.3.0",
@@ -60,7 +60,7 @@ For a plugin, a lot of these dependencies are not necessary or should be labeled
 
 The recommended change is the following:
 
-```json
+```json title=package.json
 "peerDependencies": {
   "@medusajs/medusa": "^1.3.1",
   "medusa-interfaces": "^1.3.0",
@@ -98,7 +98,7 @@ If you don't make changes to the `build` and `watch` commands, please be aware o
 
 A basic Medusa installation comes with the following scripts:
 
-```json
+```json title=package.json
 "scripts": {
   "seed": "medusa seed -f ./data/seed.json",
   "build": "babel src --out-dir . --ignore **/__tests__ --extensions \".ts,.js\"",
@@ -110,7 +110,7 @@ The `seed` and `start` scripts aren't necessary for plugin development so you ca
 
 It’s also recommended to add the `watch` script that automatically compiles your files if they are changed:
 
-```json
+```json title=package.json
 "watch": "babel -w src --out-dir . --ignore **/__tests__ --extensions \".ts,.js\""
 ```
 
@@ -124,7 +124,7 @@ Testing the plugin is covered in a [later section](#test-your-plugin).
 
 Another recommended script is the `prepare` script that builds your files under a “production” environment:
 
-```json
+```json title=package.json
 "prepare": "cross-env NODE_ENV=production npm run build"
 ```
 
@@ -161,7 +161,7 @@ If files and directories aren't placed in the root of your plugin, the Medusa se
 
 An example of a plugin's directory before testing or publishing:
 
-```bash noHeader
+```bash noReport
 medusa-plugin-custom
 |
 |_ _ _ api
@@ -202,7 +202,7 @@ Plugins often allow developers that will later use them to enter their own confi
 
 To pass a plugin its configurations on a Medusa server, you have to add it to the `plugins` array in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -216,7 +216,7 @@ const plugins = [
 
 Then, you can have access to your plugin configuration in the constructor of services in your plugin:
 
-```jsx
+```jsx title=src/service/test.ts
 //In a service in your plugin
 constructor({}, options) {
   //options contains plugin configurations
@@ -226,7 +226,7 @@ constructor({}, options) {
 
 You can also have access to the configurations in endpoints in your plugin:
 
-```jsx
+```jsx title=src/api/index.ts
 //in an endpoint in your plugin
 export default (rootDirectory, options) => {
   //options contain the plugin configurations
@@ -281,7 +281,7 @@ If you’re running the `watch` command, you don’t need to run the `build` com
 
 Then, add your plugin into the array of plugins in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -364,7 +364,7 @@ So, you can ignore files and directories like `src` from the final published NPM
 
 To do that, create the file `.npmignore` with the following content:
 
-```bash
+```bash title=.npmignore
 /lib
 node_modules
 .DS_store
diff --git a/docs/content/advanced/backend/price-lists/use-api.mdx b/docs/content/advanced/backend/price-lists/use-api.mdx
index 653142ec9ada0..48bb7da30f4ba 100644
--- a/docs/content/advanced/backend/price-lists/use-api.mdx
+++ b/docs/content/advanced/backend/price-lists/use-api.mdx
@@ -37,7 +37,7 @@ When you create a price list, you can specify different conditions to control wh
 
 In the body of your request, aside from the required fields, you can send the following fields to apply different conditions:
 
-```js noHeader
+```js noReport
 {
   prices: [
     {
@@ -135,9 +135,9 @@ fetch(`<SERVER_URL>/admin/price-lists`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<YOUR_SERVER_URL>/admin/price-lists' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<YOUR_SERVER_URL>/admin/price-lists' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "name": "New Price List",
     "description": "A new price list",
@@ -200,8 +200,8 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}`, {
 <TabItem value="curl" label="cURL">
 
 ```jsx
-curl --location --request GET '<SERVER_URL>/admin/price-lists/{id}' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/price-lists/{id}' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -251,9 +251,9 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "ends_at": "2022-10-11"
 }'
@@ -326,9 +326,9 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}/prices/batch`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "prices": [
         {
@@ -379,8 +379,8 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}/products/${productId}/price
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>/products/<PRODUCT_ID>/prices' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>/products/<PRODUCT_ID>/prices' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -420,8 +420,8 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}/variants/${variantId}/price
 <TabItem value="curl" label="cURL">
 
 ```jsx
-curl --location --request DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>/variants/<VARIANT_ID>/prices' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>/variants/<VARIANT_ID>/prices' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -463,8 +463,8 @@ fetch(`<SERVER_URL>/admin/price-lists/${priceListId}`, {
 <TabItem value="curl" label="cURL">
 
 ```jsx
-curl --location --request DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<SERVER_URL>/admin/price-lists/<PRICE_LIST_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
diff --git a/docs/content/advanced/backend/price-selection-strategy/override.md b/docs/content/advanced/backend/price-selection-strategy/override.md
index 4f8ee59a313ae..a1274a2785aa7 100644
--- a/docs/content/advanced/backend/price-selection-strategy/override.md
+++ b/docs/content/advanced/backend/price-selection-strategy/override.md
@@ -12,7 +12,7 @@ If you’re interested in learning what a price selection strategy is and how it
 
 Create a TypeScript or JavaScript file in `src/strategies` of your Medusa server project with a class that extends the `AbstractPriceSelectionStrategy` class:
 
-```typescript
+```typescript title=src/strategies/price.ts
 import { AbstractPriceSelectionStrategy, IPriceSelectionStrategy, PriceSelectionContext, PriceSelectionResult } from "@medusajs/medusa";
 
 import { EntityManager } from "typeorm";
@@ -80,7 +80,7 @@ This method accepts the variant ID as a first parameter and the [context](./inde
 
 This method must return an object having the following fields:
 
-```typescript noHeader
+```typescript noReport
 {
   originalPrice, //number | null
   calculatedPrice, //number | null
diff --git a/docs/content/advanced/backend/sales-channels/manage-admin.mdx b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
index 126e07f26b0e6..f907b18d46f49 100644
--- a/docs/content/advanced/backend/sales-channels/manage-admin.mdx
+++ b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
@@ -90,9 +90,9 @@ fetch(`<SERVER_URL>/admin/sales-channels`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/sales-channels' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/sales-channels' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     name: 'App',
 	  description: 'Mobile app'
@@ -139,8 +139,8 @@ fetch(`<SERVER_URL>/admin/sales-channels`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/sales-channels' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/sales-channels' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -181,8 +181,8 @@ fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -232,9 +232,9 @@ fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "is_disabled": false
 }'
@@ -283,8 +283,8 @@ fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request DELETE '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X DELETE '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -344,9 +344,9 @@ fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request POST '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>/products/batch' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X POST '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>/products/batch' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "product_ids": [
       {
@@ -398,8 +398,8 @@ fetch(`<SERVER_URL>/admin/products?sales_channel_id[0]=${salesChannelId}`, {
 <TabItem value="curl" label="cURL">
 
 ```bash
-curl --location --request GET '<SERVER_URL>/admin/products?sales_channel_id[0]=<SALES_CHANNEL_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/products?sales_channel_id[0]=<SALES_CHANNEL_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
@@ -461,9 +461,9 @@ fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`, {
 <TabItem value="curl" label="cURL">
 
 ```jsx
-curl --location --request DELETE '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>/products/batch' \
---header 'Authorization: Bearer <API_TOKEN>' \
---header 'Content-Type: application/json' \
+curl -L -X DELETE '<SERVER_URL>/admin/sales-channels/<SALES_CHANNEL_ID>/products/batch' \
+-H 'Authorization: Bearer <API_TOKEN>' \
+-H 'Content-Type: application/json' \
 --data-raw '{
     "product_ids": [
       {
@@ -519,8 +519,8 @@ fetch(`<SERVER_URL>/admin/orders?sales_channel_id[0]=${salesChannelId}`, {
 <TabItem value="curl" label="cURL">
 
 ```jsx
-curl --location --request GET '<SERVER_URL>/admin/orders?sales_channel_id[0]=<SALES_CHANNEL_ID>' \
---header 'Authorization: Bearer <API_TOKEN>'
+curl -L -X GET '<SERVER_URL>/admin/orders?sales_channel_id[0]=<SALES_CHANNEL_ID>' \
+-H 'Authorization: Bearer <API_TOKEN>'
 ```
 
 </TabItem>
diff --git a/docs/content/advanced/backend/services/create-service.md b/docs/content/advanced/backend/services/create-service.md
index 0be84bd7f7770..ab905bc69f694 100644
--- a/docs/content/advanced/backend/services/create-service.md
+++ b/docs/content/advanced/backend/services/create-service.md
@@ -8,7 +8,7 @@ To create a service, create a TypeScript or JavaScript file in `src/services` to
 
 For example, if you want to create a service `helloService`, create the file `hello.ts` in `src/services` with the following content:
 
-```ts
+```ts title=/src/services/hello.ts
 import { TransactionBaseService } from '@medusajs/medusa';
 import { EntityManager } from 'typeorm';
 
@@ -54,7 +54,7 @@ In this section, you'll learn how to use services throughout your Medusa server.
 
 Before using your service, make sure you run the `build` command:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm run build
 ```
 
diff --git a/docs/content/advanced/backend/shipping/add-fulfillment-provider.md b/docs/content/advanced/backend/shipping/add-fulfillment-provider.md
index 93a297d5cf8c0..7bc75b204ae26 100644
--- a/docs/content/advanced/backend/shipping/add-fulfillment-provider.md
+++ b/docs/content/advanced/backend/shipping/add-fulfillment-provider.md
@@ -23,7 +23,7 @@ Fulfillment providers are loaded and installed on the server startup.
 
 The first step is to create a JavaScript or TypeScript file under `src/services`. For example, create the file `src/services/my-fulfillment.ts` with the following content:
 
-```ts
+```ts title=src/services/my-fulfillment.ts
 import { FulfillmentService } from "medusa-interfaces"
 
 class MyFulfillmentService extends FulfillmentService {
diff --git a/docs/content/advanced/backend/subscribers/create-subscriber.md b/docs/content/advanced/backend/subscribers/create-subscriber.md
index 9f091c11999da..5dcb25fa17026 100644
--- a/docs/content/advanced/backend/subscribers/create-subscriber.md
+++ b/docs/content/advanced/backend/subscribers/create-subscriber.md
@@ -16,9 +16,9 @@ After creating the file under `src/subscribers`, in the constructor of your subs
 
 The `eventBusService.subscribe` method receives the name of the event as a first parameter and as a second parameter a method in your subscriber that will handle this event.
 
-For example, here is the `OrderNotifierSubscriber` class which is created in `src/subscribers/orderNotifier.js`:
+For example, here is the `OrderNotifierSubscriber` class created in `src/subscribers/orderNotifier.js`:
 
-```ts
+```ts title=src/subscribers/orderNotifier.js
 class OrderNotifierSubscriber {
   constructor({ eventBusService }) {
     eventBusService.subscribe("order.placed", this.handleOrder);
diff --git a/docs/content/advanced/backend/taxes/inclusive-pricing.md b/docs/content/advanced/backend/taxes/inclusive-pricing.md
index c16846ffe493b..73e55952cdd17 100644
--- a/docs/content/advanced/backend/taxes/inclusive-pricing.md
+++ b/docs/content/advanced/backend/taxes/inclusive-pricing.md
@@ -58,7 +58,7 @@ The `ShippingMethod` entity also has the `includes_tax` attribute. Its value is
 
 When a price is tax-inclusive, the tax amount is calculated using the following formula:
 
-```jsx noHeader
+```jsx noReport
 const taxAmount = (taxRate * taxInclusivePrice) / (1 + taxRate)
 ```
 
@@ -110,7 +110,7 @@ Price lists include a list of prices that can be used to override the original p
 
 Each variant’s price in the price list is compared to the variant’s original price using the following condition:
 
-```jsx noHeader
+```jsx noReport
 amount < (1 + taxRate) * calculatedPrice
 ```
 
@@ -120,7 +120,7 @@ Where `amount` is the amount of the variant’s price in the price list, `taxRat
 
 Here is an example of these fields when tax inclusivity is enabled for both the currency and the price list:
 
-```jsx noHeader
+```jsx noReport
 {
   original_price: 110,
   calculated_price: 100,
diff --git a/docs/content/contribution-guidelines.md b/docs/content/contribution-guidelines.md
index 114115936d9ea..a4966bb235d2a 100644
--- a/docs/content/contribution-guidelines.md
+++ b/docs/content/contribution-guidelines.md
@@ -93,32 +93,76 @@ If the admonition does not match any of the mentioned criteria, always default t
 
 If you are adding images to a documentation page, you can host the image on [Imgur](https://imgur.com) for free.
 
-## Code Block Types
+## Code Blocks
 
-In the Medusa documentation, there are two code block types: code blocks with headers and code blocks without headers.
+### Use Tabs with Code Blocks
 
-Code blocks without headers should be used when:
+To use Tabs with Code Blocks, you have to use [Docusaurus's `Tabs` and `TabItem` components](https://docusaurus.io/docs/markdown-features/code-blocks#multi-language-support-code-blocks).
 
-- The code block is used inside an Admonition.
-- The content of the code block can't be reported (for example, if the code block contains only a text of the expected output).
+You must also pass to the `Tabs` component the prop `wrapperClassName="code-tabs"` to ensure correct styling.
 
-In all other cases, code blocks with headers should be used.
+For example:
+
+~~~md
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
-### Code Blocks with Headers
 
-By default, all code blocks have headers and no additional actions are required to add the header.
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
+<TabItem value="client" label="Medusa JS Client" default>
 
-### Code Blocks without Headers
+```jsx
+medusa.admin.uploads.create(file) //file is an instance of File
+.then(({ uploads }) => {
+  const key = uploads[0].key;
+});
+```
 
-To add a code block without a header, simply add `noHeader` after the beginning backticks of the code block. For example:
+</TabItem>
+<TabItem value="curl" label="cURL">
+
+```bash
+curl -L -X POST '<YOUR_SERVER>/admin/uploads' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Content-Type: text/csv' \
+  -F 'files=@"<FILE_PATH_1>"'
+```
+
+</TabItem>
+</Tabs>
+~~~
+
+### Add Title to Code Block with Tabs
+
+If you want to add a title to a code block with tabs, add the `codeTitle` prop to the `Tabs` component.
+
+For example:
+
+```md
+<Tabs groupId="request-type" wrapperClassName="code-tabs" codeTitle="/src/services/hello.ts">
+```
+
+### Add Title to Code Block without Tabs
+
+To add a title to a code block without tabs:
 
 ~~~md
-```bash noHeader
-this code block does not have a header
+```js title=src/index.ts
+console.log("hello")
 ```
 ~~~
 
-`noHeader` should be added after the language of the code block (which is `bash` in the above example). If you used `npm2yarn` as well, `noHeader` should be after it.
+### Remove Report Buttons
+
+Some code block don't need a report button. To remove the report button, use the `noReport` metadata.
+
+For example:
+
+~~~md
+```bash noReport
+medusa new my-medusa-store --seed
+```
+~~~
 
 ## NPM and Yarn Code Blocks
 
diff --git a/docs/content/deployments/admin/deploying-on-netlify.md b/docs/content/deployments/admin/deploying-on-netlify.md
index c5c6e90dc9134..a4e6348a61170 100644
--- a/docs/content/deployments/admin/deploying-on-netlify.md
+++ b/docs/content/deployments/admin/deploying-on-netlify.md
@@ -180,7 +180,7 @@ You’ll have to follow five steps for the initialization:
 
 You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site:
 
-```bash noHeader
+```bash noReport
 ? What would you like to do? 
   ⇄  Connect this directory to an existing Netlify site 
 ❯ +  Create & configure a new site
@@ -198,7 +198,7 @@ You’ll be asked to optionally enter a site name.
 
 At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either:
 
-```bash noHeader
+```bash noReport
 ? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl
 oy Keys. What would you like to do? (Use arrow keys)
 ❯ Authorize with GitHub through app.netlify.com 
diff --git a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
index 9485b3cf8613c..d8863caf0468b 100644
--- a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
+++ b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
@@ -138,7 +138,7 @@ If you haven’t added any products to your Medusa server, the build process mig
 
 Alternatively, you can seed the server with demo data by running this command in the root directory of the server:
 
-```bash noHeader
+```bash noReport
 medusa seed -f data/seed.json
 ```
 
@@ -198,7 +198,7 @@ You’ll have to follow five steps for the initialization:
 
 You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site:
 
-```bash noHeader
+```bash noReport
 ? What would you like to do? 
   ⇄  Connect this directory to an existing Netlify site 
 ❯ +  Create & configure a new site
@@ -216,7 +216,7 @@ You’ll be asked to optionally enter a site name.
 
 At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either:
 
-```bash noHeader
+```bash noReport
 ? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl
 oy Keys. What would you like to do? (Use arrow keys)
 ❯ Authorize with GitHub through app.netlify.com 
@@ -271,7 +271,7 @@ If you haven’t added any products to your Medusa server, the build process mig
 
 Alternatively, you can seed the server with demo data by running this command in the root directory of the server:
 
-```bash noHeader
+```bash noReport
 medusa seed -f data/seed.json
 ```
 
diff --git a/docs/content/quickstart/quick-start-docker.md b/docs/content/quickstart/quick-start-docker.md
index 9a59c7545c6a8..37c147a72f584 100644
--- a/docs/content/quickstart/quick-start-docker.md
+++ b/docs/content/quickstart/quick-start-docker.md
@@ -7,7 +7,7 @@ In this document, you will learn how to make a container of Medusa's app on Dock
 ### Node.js
 Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command:
 
-```bash noHeader
+```bash noReport
 node -v
 ```
 
@@ -21,18 +21,18 @@ It is assumed that you have Docker installed on your system. You can install it
 
 ### 1. Clone Medusa's starter project from GitHub
 
-```bash noHeader
+```bash noReport
 git clone https://github.com/medusajs/medusa-starter-default.git my-medusa-starter
 ```
 
 ### 2. Change to the newly created project directory
-```bash noHeader
+```bash noReport
 cd my-medusa-starter
 ```
 
 ### 3.  Rename the environment variables(.env) file
 
-```bash noHeader
+```bash noReport
 mv .env.template .env
 ```
 
@@ -40,7 +40,7 @@ mv .env.template .env
 
 Make sure the Docker Desktop app is running. Then, run the following command:
 
-```bash noHeader
+```bash noReport
 docker-compose up --build
 ```
 
@@ -48,7 +48,7 @@ docker-compose up --build
 
 If you get the error `ERROR: for postgres  Cannot start service postgres: Ports are not available`, change the ports used for PostgreSQL in `docker-compose.yml` to something like this:
 
-```yml noHeader
+```yml noReport
   postgres:
     ports:
       - "5433:5433"
@@ -68,7 +68,7 @@ Once done, your server will be accessible at `http://localhost:9000`.
 
 You can test out your server using tools like Postman or by sending a cURL request:
 
-```bash noHeader
+```bash noReport
 curl -X GET localhost:9000/store/products | python -m json.tool
 ```
 
@@ -76,7 +76,7 @@ curl -X GET localhost:9000/store/products | python -m json.tool
 
 This command uses Python to format the result of the request better in your command line. If you don't want to use Python you can simply send a request without the formatting:
 
-```bash noHeader
+```bash noReport
 curl localhost:9000/store/products
 ```
 
diff --git a/docs/content/quickstart/quick-start.md b/docs/content/quickstart/quick-start.md
index 74dec39388ab6..144a22ed8f921 100644
--- a/docs/content/quickstart/quick-start.md
+++ b/docs/content/quickstart/quick-start.md
@@ -6,7 +6,7 @@ This document will guide you through setting up your Medusa server in a few minu
 
 Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command:
 
-```bash noHeader
+```bash noReport
 node -v
 ```
 
@@ -16,7 +16,7 @@ You can install Node from the [official website](https://nodejs.org/en/).
 
 ### 1. Install Medusa CLI
 
-   ```bash npm2yarn noHeader
+   ```bash npm2yarn noReport
    npm install @medusajs/medusa-cli -g
    ```
 
@@ -28,13 +28,13 @@ If you run into any errors while installing the CLI tool, check out the [trouble
 
 ### 2. Create a new Medusa project
 
-   ```bash noHeader
+   ```bash noReport
    medusa new my-medusa-store --seed
    ```
 
 ### 3. Start your Medusa server
 
-   ```bash noHeader
+   ```bash noReport
    cd my-medusa-store
    medusa develop
    ```
@@ -43,7 +43,7 @@ If you run into any errors while installing the CLI tool, check out the [trouble
 
 After these three steps and in only a couple of minutes, you now have a complete commerce engine running locally. You can test it out by sending a request using a tool like Postman or through the command line:
 
-```bash noHeader
+```bash noReport
 curl localhost:9000/store/products | python -m json.tool
 ```
 
@@ -51,7 +51,7 @@ curl localhost:9000/store/products | python -m json.tool
 
 This command uses Python to format the result of the request better in your command line. If you don't want to use Python you can simply send a request without the formatting:
 
-```bash noHeader
+```bash noReport
 curl localhost:9000/store/products
 ```
 
diff --git a/docs/content/troubleshooting/cli-installation-errors.mdx b/docs/content/troubleshooting/cli-installation-errors.mdx
index 5262646939cc3..63a4d488e4a83 100644
--- a/docs/content/troubleshooting/cli-installation-errors.mdx
+++ b/docs/content/troubleshooting/cli-installation-errors.mdx
@@ -19,7 +19,7 @@ You can check out more information in [NPM’s documentation](https://docs.npmjs
 
 If you install the Medusa CLI tool with Yarn, then try to use the CLI tool but get the error:
 
-```bash noHeader
+```bash noReport
 command not found: medusa
 ```
 
diff --git a/docs/content/troubleshooting/cors-issues.md b/docs/content/troubleshooting/cors-issues.md
index 22f1d84a782ad..5119d8b18db22 100644
--- a/docs/content/troubleshooting/cors-issues.md
+++ b/docs/content/troubleshooting/cors-issues.md
@@ -10,7 +10,7 @@ In your `medusa-config.js` , you should ensure that you've configured your CORS
 
 The default configuration uses the following CORS settings:
 
-```jsx
+```jsx title=medusa-config.js
 // CORS when consuming Medusa from admin
 const ADMIN_CORS = process.env.ADMIN_CORS || "http://localhost:7000,http://localhost:7001"
 
diff --git a/docs/content/troubleshooting/documentation-error.md b/docs/content/troubleshooting/documentation-error.md
index 1b9689bb41643..94fbcd525f019 100644
--- a/docs/content/troubleshooting/documentation-error.md
+++ b/docs/content/troubleshooting/documentation-error.md
@@ -12,7 +12,7 @@ For that reason, when the `start` and `build` scripts in `www/docs` are used, th
 
 If you receive the following error when you run the `build` command in `www/docs`:
 
-```bash noHeader
+```bash noReport
 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 ```
 
diff --git a/docs/content/troubleshooting/missing-payment-providers.md b/docs/content/troubleshooting/missing-payment-providers.md
index c2aebf9f1a02e..9e7feaf6db949 100644
--- a/docs/content/troubleshooting/missing-payment-providers.md
+++ b/docs/content/troubleshooting/missing-payment-providers.md
@@ -2,7 +2,7 @@
 
 You add payment providers to your Medusa instance by adding them as plugins in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...
   // You can create a Stripe account via: https://stripe.com
diff --git a/docs/content/troubleshooting/redis-events.md b/docs/content/troubleshooting/redis-events.md
index c730cf67613b0..c8342b92bfa70 100644
--- a/docs/content/troubleshooting/redis-events.md
+++ b/docs/content/troubleshooting/redis-events.md
@@ -8,7 +8,7 @@ You can learn how to [install Redis in the Set Up your Development Environment d
 
 After installing it, make sure to configure your Medusa server to use Redis:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     //...
diff --git a/docs/content/troubleshooting/s3-acl-error.md b/docs/content/troubleshooting/s3-acl-error.md
index 7cb53031bc542..a4a3de9b9c75b 100644
--- a/docs/content/troubleshooting/s3-acl-error.md
+++ b/docs/content/troubleshooting/s3-acl-error.md
@@ -2,7 +2,7 @@
 
 If you're using the [S3 Plugin](../add-plugins/s3.md) and, when you upload an image, you receive the following error on your Medusa server:
 
-```bash noHeader
+```bash noReport
 AccessControlListNotSupported: The bucket does not allow ACLs
 ```
 
diff --git a/docs/content/troubleshooting/signing-in-to-admin.md b/docs/content/troubleshooting/signing-in-to-admin.md
index fdd28ec6443f8..0089558b3c728 100644
--- a/docs/content/troubleshooting/signing-in-to-admin.md
+++ b/docs/content/troubleshooting/signing-in-to-admin.md
@@ -2,7 +2,7 @@
 
 If you've created a new Medusa server with the `--seed` option or used the `seed` script or command, the default credentials are:
 
-```bash noHeader
+```bash noReport
 email: admin@medusa-test.com
 password: supersecret
 ```
diff --git a/docs/content/troubleshooting/transaction-error-in-checkout.md b/docs/content/troubleshooting/transaction-error-in-checkout.md
index 37526b8a191cb..3aa704a0a57d9 100644
--- a/docs/content/troubleshooting/transaction-error-in-checkout.md
+++ b/docs/content/troubleshooting/transaction-error-in-checkout.md
@@ -6,7 +6,7 @@ However, this comes at the expense of important features that are needed in a pr
 
 Therefore, you might experience the following error when going through a checkout flow in one of Medusa's starters while using SQLite:
 
-```bash noHeader
+```bash noReport
 Error: Transaction already started for the given connection, commit current transaction before starting a new one.
 ```
 
@@ -16,7 +16,7 @@ You can learn how to install PostgreSQL on your machine in the [Set Up your Deve
 
 Then in your `medusa-config.js`, you should change the project configuration to use Postgres as the database type:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     //...
@@ -31,7 +31,7 @@ Where `DATABASE_URL` is the connection string to your PostgreSQL database. You c
 
 Make sure to also remove the following lines that are used to configure an SQLite database:
 
-```jsx
+```jsx title=medusa-config.js
 database_type: "sqlite",
 database_database: "./medusa-db.sql",
 ```
@@ -46,7 +46,7 @@ medusa migrations run
 
 If you want to add demo data into your server, you should also seed the database using the following command:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm run seed
 ```
 
diff --git a/docs/content/tutorial/0-set-up-your-development-environment.mdx b/docs/content/tutorial/0-set-up-your-development-environment.mdx
index f56879ae7d2d7..f98695fa7f8eb 100644
--- a/docs/content/tutorial/0-set-up-your-development-environment.mdx
+++ b/docs/content/tutorial/0-set-up-your-development-environment.mdx
@@ -18,7 +18,7 @@ Node.js is the environment that makes it possible for Medusa to run, so you must
 
 Medusa supports versions 14 and 16 of Node.js. You can check your Node.js version using the following command:
 
-```bash noHeader
+```bash noReport
 node -v
 ```
 
@@ -49,7 +49,7 @@ For other Linux distributions, you can check out [Node.js’s guide](https://nod
 
 You can use the following commands to install Node.js on macOS:
 
-<Tabs>
+<Tabs groupId="homebrew" wrapperClassName='code-tabs'>
 <TabItem value="homebrew" label="Homebrew">
 
 ```bash
@@ -60,7 +60,12 @@ brew install node
 <TabItem value="no-homebrew" label="Without Homebrew">
 
 ```bash
-curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
+curl \
+ "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- \
+  https://nodejs.org/dist/latest/ | sed -nE \ 
+  's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" \
+  > "$HOME/Downloads/node-latest.pkg" && 
+  sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
 ```
 
 </TabItem>
@@ -118,7 +123,7 @@ The final installation required to get started with Medusa is the Medusa CLI. It
 
 You can install Medusa’s CLI with the following command:
 
-```bash npm2yarn noHeader
+```bash npm2yarn noReport
 npm install @medusajs/medusa-cli -g
 ```
 
@@ -153,8 +158,10 @@ You can [download the PostgreSQL Windows installer](https://www.postgresql.org/d
 If you’re using Ubuntu, you can use the following commands to download and install PostgreSQL:
 
 ```bash
-sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
-wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
+sudo sh -c \
+  'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
+wget --quiet -O - \
+  https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
 sudo apt-get update
 sudo apt-get -y install postgresql
 ```
@@ -172,7 +179,9 @@ You can download PostgreSQL on your macOS using [the installer on their website]
 Make sure the Docker Desktop app is running, then run the following command to quickly spin up a PostgreSQL instance:
 
 ```bash
-docker run --name postgres -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=medusa-docker -p 5432:5432 -d postgres
+docker run --name postgres -e POSTGRES_USER=postgres \
+  -e POSTGRES_PASSWORD=postgres -e \
+  POSTGRES_DB=medusa-docker -p 5432:5432 -d postgres
 ```
 
 Where:
@@ -221,9 +230,11 @@ sudo service redis-server start
 If you use Ubuntu you can use the following commands to install Redis:
 
 ```bash
-curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
+curl -fsSL https://packages.redis.io/gpg | \
+  sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
 
-echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
+echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" \
+  | sudo tee /etc/apt/sources.list.d/redis.list
 
 sudo apt-get update
 sudo apt-get install redis
diff --git a/docs/content/usage/create-medusa-app.mdx b/docs/content/usage/create-medusa-app.mdx
index 74dee3c82c761..9367c0d9818a4 100644
--- a/docs/content/usage/create-medusa-app.mdx
+++ b/docs/content/usage/create-medusa-app.mdx
@@ -44,7 +44,7 @@ You’ll then be asked to enter the name of the directory you want the project t
 
 Next, you’ll be asked to choose the Medusa starter used to install the Medusa server. You can either pick the default Medusa starter, the Contentful starter or enter a starter URL by choosing `Other`:
 
-```bash noHeader
+```bash noReport
 ? Which Medusa starter would you like to install? …
 ❯ medusa-starter-default
   medusa-starter-contentful
@@ -63,7 +63,7 @@ You can learn more about the Contentful starter in the [Contentful Integration d
 
 After choosing the Medusa starter, you’ll be asked to choose the storefront starter. You can choose one of the starters in the list included or choose `None` to skip installing a storefront:
 
-```bash noHeader
+```bash noReport
 ? Which storefront starter would you like to install?
 ❯ Gatsby Starter
 Next.js Starter
@@ -85,7 +85,7 @@ Learn more about the [Next.js](../starters/nextjs-medusa-starter.md) and [Gatsby
 
 After choosing the above starters, the installation of each component will begin along with its dependencies. Once the installation is done, you’ll see instructions related to how to start each component.
 
-```bash noHeader
+```bash noReport
 Your project is ready. The available commands are:
 
 Medusa API
@@ -107,7 +107,7 @@ The commands will differ based on your choices in previous prompts.
 
 Inside the root project directory which was specified at the beginning of the installation process you’ll find the following directory structure:
 
-```bash noHeader
+```bash noReport
 /my-medusa-store
   /storefront // Medusa storefront starter
   /backend // Medusa starter as a backend option 
diff --git a/www/docs/src/css/_code.css b/www/docs/src/css/_code.css
index 3a356d55ad87f..04d104721fedf 100644
--- a/www/docs/src/css/_code.css
+++ b/www/docs/src/css/_code.css
@@ -47,37 +47,23 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   position: relative;
 }
 
-.code-tabs .tabs,
 .code-header {
-  padding: 8px 16px;
+  padding: 12px 16px;
 }
 
 .code-header {
   background-color: #161616;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0px 0px;
 }
 
-.code-tabs .tabs {
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  overflow-x: auto;
-
-  backface-visibility: hidden;
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-    scrollbar-width: none;  /* Firefox */
-}
-
 .code-tabs .tabs::-webkit-scrollbar {
   display: none;
 }
 
 .code-tabs .tabs__item {
-  color: #6F6F6F;
+  color: var(--ifm-code-tabs-color);
   font-weight: 600;
   font-size: 13px;
   padding: 0 12px;
@@ -90,6 +76,12 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   margin-left: 4px;
 }
 
+.code-title {
+  font-size: 13px;
+  line-height: var(--ifm-line-height-base);
+  color: var(--ifm-code-title-color);
+}
+
 .code-tabs .tabs__item--active {
   border-color: #393939;
   background-color: var(--ifm-code-tabs-active-bg);
@@ -97,7 +89,8 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   font-size: 13px;
 }
 
-.theme-code-block:not(.no-header-block) {
+.theme-code-block:not(.no-header-block),
+.code-tabs .theme-code-block {
   border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important;
 }
 
@@ -132,11 +125,11 @@ a.code-action {
   width: 20px;
 }
 
-.theme-code-block:not(.no-header-block) [class*=buttonGroup] {
+/* .theme-code-block:not(.no-header-block) [class*=buttonGroup] {
   display: none;
-}
+} */
 
-.theme-code-block.no-header-block [class*=buttonGroup] button {
+.theme-code-block [class*=buttonGroup] button {
   opacity: 1 !important;
   border: none;
 }
@@ -170,9 +163,29 @@ html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
 }
 
 @media screen and (min-width: 568px) {
-  .code-tabs .tabs {
+  .prism-code {
     max-width: 90%;
   }
+
+  .prism-code:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: calc(10% + 24px);
+    height: 100%;
+    background: linear-gradient(90deg, #17171700, #262626 24px);
+  }
+
+  .prism-code:not(:hover)::-webkit-scrollbar-thumb,
+  .prism-code:not(:hover)::-webkit-scrollbar-track {
+    visibility: hidden;
+  }
+
+  .prism-code:hover::-webkit-scrollbar-thumb,
+  .prism-code:hover::-webkit-scrollbar-track {
+    opacity: 1;
+  }
 }
 
 @media screen and (max-width: 567px) {
@@ -180,7 +193,7 @@ html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
     visibility: hidden;
   }
 
-  .code-tabs .tabs {
-    max-width: 100%;
+  .tablist-wrapper.code-header .code-title {
+    display: none;
   }
 }
\ No newline at end of file
diff --git a/www/docs/src/css/_docspage.css b/www/docs/src/css/_docspage.css
index 41b900ed5ca19..4c553ecd8bcd2 100644
--- a/www/docs/src/css/_docspage.css
+++ b/www/docs/src/css/_docspage.css
@@ -129,7 +129,7 @@ html:not([data-theme="dark"]) .doc-footer {
   z-index: var(--ifm-z-index-overlay);
 }
 
-.tabs-wrapper:not(.code-tabs) .tabs-container > div {
+.tabs-wrapper:not(.code-tabs) > .tabs-container > div:not(.tablist-wrapper) {
   padding-top: var(--ifm-base-margin-vertical);
 }
 
diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css
index 5208184cf9ab5..01c1bfe1a4b3f 100644
--- a/www/docs/src/css/_variables.css
+++ b/www/docs/src/css/_variables.css
@@ -83,11 +83,13 @@
   --ifm-code-border-color: #E5E7EB;
   --ifm-code-background: #F9FAFB;
   --ifm-code-color: #4B5563;
+  --ifm-code-tabs-color: #6F6F6F;
   --ifm-code-tabs-active-bg: transparent;
   --ifm-code-tabs-active-color: #F4F4F4;
   --ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
   --ifm-pre-padding: 16px;
   --docusaurus-highlighted-code-line-bg: #393939;
+  --ifm-code-title-color: #737373;
 
   /* Tooltip */
   --ifm-tooltip-background-color: #fff;
diff --git a/www/docs/src/theme/CodeBlock/Content/String.js b/www/docs/src/theme/CodeBlock/Content/String.js
index c06a90e3ed96c..a4a8dc2f5aa46 100644
--- a/www/docs/src/theme/CodeBlock/Content/String.js
+++ b/www/docs/src/theme/CodeBlock/Content/String.js
@@ -1,20 +1,23 @@
-import React from 'react';
-import clsx from 'clsx';
-import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import React, { useEffect } from 'react';
 import {
+  containsLineNumbers,
   parseCodeBlockTitle,
   parseLanguage,
   parseLines,
-  containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps} from 'prism-react-renderer';
-import Line from '@theme/CodeBlock/Line';
+import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
+
 import Container from '@theme/CodeBlock/Container';
-import styles from './styles.module.css';
 import CopyButton from '../../CopyButton';
+import Line from '@theme/CodeBlock/Line';
 import ThemedImage from '@theme/ThemedImage';
+import Tooltip from '../../Tooltip';
+import clsx from 'clsx';
+import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 export default function CodeBlockString({
   children,
@@ -23,14 +26,17 @@ export default function CodeBlockString({
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
+  noReport = false
 }) {
   const {
     prism: {defaultLanguage, magicComments},
+    reportCodeLinkPrefix
   } = useThemeConfig();
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
   const prismTheme = usePrismTheme();
   const wordWrap = useCodeWordWrap();
+  const isBrowser = useIsBrowser();
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
   // "title=\"xyz\"" => title: "\"xyz\""
@@ -63,7 +69,7 @@ export default function CodeBlockString({
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar', tokens.length === 1 ? styles.thinCodeWrapper : '')}>
               <code
                 className={clsx(
                   styles.codeBlockLines,
@@ -85,7 +91,16 @@ export default function CodeBlockString({
           )}
         </Highlight>
         <div className={styles.buttonGroup}>
-          {/* <CopyButton className={styles.codeButton} code={code} /> */}
+          {!noReport && (
+            <Tooltip text="Report Incorrect Code">
+              <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
+                <ThemedImage alt='Report Incorrect Code' sources={{
+                  light: useBaseUrl('/img/alert-code.png'),
+                  dark: useBaseUrl('/img/alert-code-dark.png')
+                }} className="no-zoom-img" />
+              </a>
+            </Tooltip>
+          )}
           <CopyButton buttonClassName='code-action' text={code}>
             <ThemedImage alt='Copy to Clipboard' sources={{
               light: useBaseUrl('/img/clipboard-copy.png'),
diff --git a/www/docs/src/theme/CodeBlock/Content/styles.module.css b/www/docs/src/theme/CodeBlock/Content/styles.module.css
index be631aeb4576e..fb297d41613a0 100644
--- a/www/docs/src/theme/CodeBlock/Content/styles.module.css
+++ b/www/docs/src/theme/CodeBlock/Content/styles.module.css
@@ -58,11 +58,11 @@
   display: flex;
   column-gap: 0.2rem;
   position: absolute;
-  right: calc(var(--ifm-pre-padding) / 4 - 2px);
-  top: calc(var(--ifm-pre-padding) / 4 - 2px);
+  right: var(--ifm-pre-padding);
+  top: var(--ifm-pre-padding);
 }
 
-.buttonGroup button {
+.buttonGroup .code-action {
   display: flex;
   align-items: center;
   background: var(--prism-background-color);
@@ -80,6 +80,10 @@
   opacity: 1 !important;
 }
 
+.thinCodeWrapper + .buttonGroup {
+  top: calc(var(--ifm-pre-padding) / 4 - 2px) !important;
+}
+
 :global(.theme-code-block:hover) .buttonGroup button {
   opacity: 0.4;
 }
diff --git a/www/docs/src/theme/CodeBlock/index.js b/www/docs/src/theme/CodeBlock/index.js
index e53ecc6a5c370..72149f2b70e8a 100644
--- a/www/docs/src/theme/CodeBlock/index.js
+++ b/www/docs/src/theme/CodeBlock/index.js
@@ -1,13 +1,8 @@
 import React, {isValidElement} from 'react';
 
-import CopyButton from '../CopyButton';
 import ElementContent from '@theme/CodeBlock/Content/Element';
 import StringContent from '@theme/CodeBlock/Content/String';
-import ThemedImage from '@theme/ThemedImage';
-import Tooltip from '../Tooltip';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import {useThemeConfig} from '@docusaurus/theme-common';
 
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
@@ -22,7 +17,7 @@ function maybeStringifyChildren(children) {
   // The children is now guaranteed to be one/more plain strings
   return Array.isArray(children) ? children.join('') : children;
 }
-export default function CodeBlock({children: rawChildren, noHeader = false, ...props}) {
+export default function CodeBlock({children: rawChildren, noReport = false, ...props}) {
   // The Prism theme on SSR is always the default theme but the site theme can
   // be in a different mode. React hydration doesn't update DOM styles that come
   // from SSR. Hence force a re-render after mounting to apply the current
@@ -31,29 +26,18 @@ export default function CodeBlock({children: rawChildren, noHeader = false, ...p
   const children = maybeStringifyChildren(rawChildren);
   const CodeBlockComp =
     typeof children === 'string' ? StringContent : ElementContent;
-  const {reportCodeLinkPrefix} = useThemeConfig();
+
+  const title = props.title;
+  delete props.title;
 
   return (
     <div className='code-wrapper'>
-      {!noHeader && (
+      {title && (
         <div className='code-header'>
-          <Tooltip text="Report Incorrect Code">
-            <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
-              <ThemedImage alt='Report Incorrect Code' sources={{
-                light: useBaseUrl('/img/alert-code.png'),
-                dark: useBaseUrl('/img/alert-code-dark.png')
-              }} className="no-zoom-img" />
-            </a>
-          </Tooltip>
-          <CopyButton buttonClassName='code-action' text={children}>
-            <ThemedImage alt='Copy to Clipboard' sources={{
-              light: useBaseUrl('/img/clipboard-copy.png'),
-              dark: useBaseUrl('/img/clipboard-copy-dark.png')
-            }} className="no-zoom-img" />
-          </CopyButton>
+          {title}
         </div>
       )}
-      <CodeBlockComp key={String(isBrowser)} {...props} className={noHeader ? 'no-header-block' : ''}>
+      <CodeBlockComp key={String(isBrowser)} {...props} noReport={noReport} className={title ? '' : 'no-header-block'}>
         {children}
       </CodeBlockComp>
     </div>
diff --git a/www/docs/src/theme/Tabs/index.js b/www/docs/src/theme/Tabs/index.js
index c39fb4afbf9da..4c3edb4df0a14 100644
--- a/www/docs/src/theme/Tabs/index.js
+++ b/www/docs/src/theme/Tabs/index.js
@@ -1,12 +1,14 @@
-import React, {useState, cloneElement, isValidElement, useEffect} from 'react';
-import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {duplicates} from '@docusaurus/theme-common';
+import React, {cloneElement, isValidElement, useEffect, useState} from 'react';
 import {
   useScrollPositionBlocker,
   useTabGroupChoice,
 } from '@docusaurus/theme-common/internal';
+
+import clsx from 'clsx';
+import {duplicates} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
 // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
 function isTabItem(comp) {
@@ -20,6 +22,8 @@ function TabsComponent(props) {
     values: valuesProp,
     groupId,
     className,
+    isCodeTabs = false,
+    codeTitle
   } = props;
   const children = React.Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
@@ -113,39 +117,42 @@ function TabsComponent(props) {
   };
   return (
     <div className={clsx('tabs-container', styles.tabList)}>
-      <ul
-        role="tablist"
-        aria-orientation="horizontal"
-        className={clsx(
-          'tabs',
-          {
-            'tabs--block': block,
-          },
-          className,
-        )}>
-        {values.map(({value, label, attributes}) => (
-          <li
-            role="tab"
-            tabIndex={selectedValue === value ? 0 : -1}
-            aria-selected={selectedValue === value}
-            key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
-            onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
-            onClick={handleTabChange}
-            {...attributes}
-            className={clsx(
-              'tabs__item',
-              styles.tabItem,
-              attributes?.className,
-              {
-                'tabs__item--active': selectedValue === value,
-              },
-            )}>
-            {label ?? value}
-          </li>
-        ))}
-      </ul>
+      <div className={`tablist-wrapper ${isCodeTabs ? 'code-header' : ''}`}>
+        {isCodeTabs && <span className='code-title'>{codeTitle}</span>}
+        <ul
+          role="tablist"
+          aria-orientation="horizontal"
+          className={clsx(
+            'tabs',
+            {
+              'tabs--block': block,
+            },
+            className,
+          )}>
+          {values.map(({value, label, attributes}) => (
+            <li
+              role="tab"
+              tabIndex={selectedValue === value ? 0 : -1}
+              aria-selected={selectedValue === value}
+              key={value}
+              ref={(tabControl) => tabRefs.push(tabControl)}
+              onKeyDown={handleKeydown}
+              onFocus={handleTabChange}
+              onClick={handleTabChange}
+              {...attributes}
+              className={clsx(
+                'tabs__item',
+                styles.tabItem,
+                attributes?.className,
+                {
+                  'tabs__item--active': selectedValue === value,
+                },
+              )}>
+              {label ?? value}
+            </li>
+          ))}
+        </ul>
+      </div>
 
       {lazy ? (
         cloneElement(
@@ -183,6 +190,7 @@ export default function Tabs(props) {
         // Remount tabs after hydration
         // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
         key={String(isBrowser)}
+        isCodeTabs={props.wrapperClassName?.search('code-tabs') !== -1 || props.groupId === 'npm2yarn'}
         {...props}
       />
     </div>
diff --git a/www/docs/static/img/test-alert.png b/www/docs/static/img/test-alert.png
new file mode 100644
index 0000000000000..3019c36bab2d7
Binary files /dev/null and b/www/docs/static/img/test-alert.png differ