diff --git a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
index 58f6556cd3..87e8a09fd2 100644
--- a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
+++ b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
@@ -15,7 +15,7 @@ In this document, you’ll learn how to deploy the Gatsby Storefront on [Netlify
 
 Alternatively, you can use this button to deploy the Gatsby Storefront to Netlify directly:
 
-<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url">
+<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url no-zoom-img">
   <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
 </a>
 
diff --git a/docs/content/deployments/storefront/deploying-next-on-vercel.md b/docs/content/deployments/storefront/deploying-next-on-vercel.md
new file mode 100644
index 0000000000..4f359cdcd4
--- /dev/null
+++ b/docs/content/deployments/storefront/deploying-next-on-vercel.md
@@ -0,0 +1,148 @@
+---
+description: 'Learn step-by-step.'
+addHowToData: true
+---
+
+# Deploy Next.js Storefront on Vercel
+
+In this document, you’ll learn how to deploy the Next.js Storefront on Vercel.
+
+Alternatively, you can directly deploy the Next.js storefront to Vercel with this button.
+
+<a 
+  href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmedusajs%2Fnextjs-starter-medusa.git&env=NEXT_PUBLIC_MEDUSA_BACKEND_URL&envDescription=URL%20of%20your%20Medusa%20Backend" class="img-url no-zoom-img">
+  <img src="https://vercel.com/button" alt="Deploy with Vercel" class="no-zoom-img"/>
+</a>
+
+## Prerequisites
+
+### Medusa Components
+
+It is assumed you already have installed the Next.js storefront locally. If not, please follow along with [this guide](../../starters/nextjs-medusa-starter.mdx) instead.
+
+It’s also assumed you already have the Medusa backend deployed, which the Next.js storefront interacts with. If not, you can check out one of the [deployment documentation related to the Medusa backend](../server/index.mdx).
+
+### Required Accounts
+
+- [Vercel Account](https://vercel.com)
+- [GitHub Account](https://github.com/)
+
+:::note
+
+If you want to use another Git Provider, it’s possible to follow along with this guide, but you’ll have to perform the equivalent steps in your Git Provider.
+
+:::
+
+### Required Tools
+
+- [Git CLI](../../development/backend/prepare-environment.mdx)
+
+---
+
+## Step 1: Create GitHub Repository
+
+Before you can deploy your Next.js storefront, you need to create a GitHub repository and push the code base to it. To do that:
+
+1. On GitHub, click the plus icon at the top right, then click New Repository.
+2. You’ll then be redirected to a new page with a form. In the form, enter the Repository Name.
+3. Scroll down and click Create repository.
+
+### Push Code to GitHub Repository
+
+The next step is to push the code to the GitHub repository you just created.
+
+After creating the repository, you’ll be redirected to the repository’s page. On that page, you should see a URL that you can copy to connect your repository to a local directory.
+
+Copy the link. Then, open your terminal in the directory that holds your Gatsby storefront codebase and run the following commands:
+
+```bash
+git init
+git remote add origin <GITHUB_URL>
+```
+
+Where `<GITHUB_URL>` is the URL you just copied.
+
+Then, add, commit, and push the changes into the repository:
+
+```bash
+git add .
+git commit -m "initial commit"
+git push origin master
+```
+
+After pushing the changes, you can find the files in your GitHub repository.
+
+---
+
+## Step 2: Deploy to Vercel
+
+This section covers how to deploy the storefront, either using the Vercel website or using Vercel’s CLI tool.
+
+### Option 1: Using the Vercel Website
+
+This section explains how to deploy the storefront using the Vercel website:
+
+1. Open the [Vercel dashboard](https://vercel.com/dashboard) after logging in.
+2. Click on the “Add New…” button next to the search bar.
+3. Choose Project from the dropdown.
+4. In the new page that opens, find the Git repository that holds your Next.js storefront and click on the Import button. If you haven’t connected your Vercel account to any Git provider, you must do that first.
+5. In the Configure Project form:
+    1. Open the Environment Variables collapsible, and add an environment variable with the name `NEXT_PUBLIC_MEDUSA_BACKEND_URL` and the value being the URL to your deployed Medusa Backend.
+    2. You can optionally edit the Project Name.
+6. Once you’re done, click on the “Deploy” button.
+
+This will start the deployment of the storefront. Once it’s done, you’ll be redirected to the main dashboard of your new project.
+
+:::note
+
+At this point, when you visit the storefront, you will face errors related to Cross-Origin Resource Sharing (CORS) while using the storefront. Before you start using the storefront, follow along the [Configure CORS on the Medusa Backend](#step-3-configure-cors-on-the-medusa-backend) section.
+
+:::
+
+### Option 2: Using Vercel’s CLI Tool
+
+This section explains how to deploy the storefront using the Vercel CLI tool. You should have the CLI tool installed first, as explained in [Vercel’s documentation](https://vercel.com/docs/cli).
+
+In the directory holding your storefront, run the following command to deploy your storefront:
+
+```bash
+vercel --build-env NEXT_PUBLIC_MEDUSA_BACKEND_URL=<YOUR_BACKEND_URL>
+```
+
+Where `<YOUR_BACKEND_URL>` is the URL of your deployed Medusa backend.
+
+You’ll then be asked to log in if you haven’t already, and to choose the scope to deploy your project to. You can also decide to link the storefront to an existing project, or change the project’s name.
+
+When asked `In which directory is your code located?`, keep the default `./` and just press Enter.
+
+The project setup will then start. When asked if you want to modify the settings, answer `N` to keep the default settings.
+
+It will take a couple of minutes for the deployment to finish. The link to the storefront will be shown in the final output of the command.
+
+:::note
+
+At this point, when you visit the storefront, you will face errors related to Cross-Origin Resource Sharing (CORS) while using the storefront. Before you start using the storefront, follow along the [Configure CORS on the Medusa Backend](#step-3-configure-cors-on-the-medusa-backend) section.
+
+:::
+
+---
+
+## Step 3: Configure CORS on the Medusa Backend
+
+To send requests to the Medusa backend from the Next.js storefront, you must set the `STORE_CORS` environment variable on your backend to the Next.js storefront’s URL.
+
+:::tip
+
+If you want to set a custom domain to your Next.js storefront website on Vercel, make sure to do it before this step. You can refer to this guide on [Vercel’s documentation](https://vercel.com/docs/concepts/projects/domains/add-a-domain).
+
+:::
+
+On your Medusa backend, add the following environment variable:
+
+```bash
+STORE_CORS=<STOREFRONT_URL>
+```
+
+Where `<STOREFRONT_URL>` is the URL of your Next.js storefront that you just deployed.
+
+Then, restart your Medusa backend. Once the backend is running again, you can use your Next.js storefront.
diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js
index 8002c6990f..7bf2e16b06 100644
--- a/www/docs/sidebars.js
+++ b/www/docs/sidebars.js
@@ -222,7 +222,7 @@ module.exports = {
               id: 'deployments/admin/deploying-on-netlify',
               label: 'Deploy on Netlify',
               customProps: {
-                image: 'https://i.imgur.com/gCbsCvX.png'
+                image: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574027/Medusa%20Docs/Other/gCbsCvX_h7nijn.png'
               }
             },
           ]
@@ -235,12 +235,27 @@ module.exports = {
             id: 'deployments/storefront/index'
           },
           items: [
+            {
+              type: 'doc',
+              id: 'deployments/storefront/deploying-next-on-vercel',
+              label: 'Deploy Next.js on Vercel',
+              customProps: {
+                themedImage: {
+                  light: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574115/Medusa%20Docs/Other/vercel-icon-dark_llkb7l.png',
+                  dark: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574132/Medusa%20Docs/Other/vercel-icon-light_obvtno.png'
+                }
+              }
+            },
             {
               type: 'doc',
               id: 'deployments/storefront/deploying-gatsby-on-netlify',
               label: 'Deploy Gatsby on Netlify',
               customProps: {
-                image: 'https://i.imgur.com/gCbsCvX.png'
+                image: 'https://res.cloudinary.com/dza7lstvk/image/upload/v1679574027/Medusa%20Docs/Other/gCbsCvX_h7nijn.png',
+                badge: {
+                  variant: 'orange',
+                  children: 'Deprecated'
+                }
               }
             },
           ]
diff --git a/www/docs/src/components/Badge/index.js b/www/docs/src/components/Badge/index.js
index 5da573256f..e5a27701fc 100644
--- a/www/docs/src/components/Badge/index.js
+++ b/www/docs/src/components/Badge/index.js
@@ -7,7 +7,8 @@ export default function Badge ({ className, variant, children }) {
     <span className={clsx(
       styles.badge,
       className,
-      variant === 'purple' && styles.purpleBadge
+      variant === 'purple' && styles.purpleBadge,
+      variant === 'orange' && styles.orangeBadge
     )}>
       {children}
     </span>
diff --git a/www/docs/src/components/Badge/styles.module.css b/www/docs/src/components/Badge/styles.module.css
index 4a23c7cbfd..5c7e6f3f96 100644
--- a/www/docs/src/components/Badge/styles.module.css
+++ b/www/docs/src/components/Badge/styles.module.css
@@ -12,4 +12,10 @@
   background-color: var(--medusa-tag-purple-bg);
   border-color: var(--medusa-tag-purple-border);
   color: var(--medusa-tag-purple-text);
+}
+
+.orangeBadge {
+  background-color: var(--medusa-tag-orange-bg);
+  border-color: var(--medusa-tag-orange-border);
+  color: var(--medusa-tag-orange-text);
 }
\ No newline at end of file
diff --git a/www/docs/src/css/_medusa.css b/www/docs/src/css/_medusa.css
index 4cf96d2961..25512d5c3b 100644
--- a/www/docs/src/css/_medusa.css
+++ b/www/docs/src/css/_medusa.css
@@ -127,8 +127,13 @@
   --medusa-tag-purple-bg: #EDE9FE;
   --medusa-tag-purple-bg-hover: #E4DEFC;
   --medusa-tag-purple-text: #5746AF;
-  --medusa-tag-purple-dot: #6E56CF;
+  --medusa-tag-purple-icon: #6E56CF;
   --medusa-tag-purple-border: #D7CFF9;
+  --medusa-tag-orange-bg: #FFECBC;
+  --medusa-tag-orange-bg-hover: #FFE3A2;
+  --medusa-tag-orange-text: #AD5700;
+  --medusa-tag-orange-icon: #FFB224;
+  --medusa-tag-orange-border: #FFD386;
 }
 
 /** Dark theme **/
@@ -192,6 +197,11 @@ html[data-theme="dark"] {
   --medusa-tag-purple-bg: #2C2250;
   --medusa-tag-purple-bg-hover: #32275F;
   --medusa-tag-purple-text: #9E8CFC;
-  --medusa-tag-purple-dot: #6E56CF;
+  --medusa-tag-purple-icon: #6E56CF;
   --medusa-tag-purple-border: #392C72;
+  --medusa-tag-orange-bg: #3F2200;
+  --medusa-tag-orange-bg-hover: #4A2900;
+  --medusa-tag-orange-text: #F1A10D;
+  --medusa-tag-orange-icon: #FFB224;
+  --medusa-tag-orange-border: #573300;
 }
\ No newline at end of file
diff --git a/www/docs/src/theme/DocCard/index.js b/www/docs/src/theme/DocCard/index.js
index bb517bd915..bd6fe59d60 100644
--- a/www/docs/src/theme/DocCard/index.js
+++ b/www/docs/src/theme/DocCard/index.js
@@ -25,12 +25,13 @@ function CardContainer({href, children, className}) {
   );
 }
 
-function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false}) {
+function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false, badge}) {
   return (
     <CardContainer href={href} className={clsx(containerClassName, isSoon && styles.cardSoon)}>
       <div className={clsx(styles.cardIconContainer)}>
         {icon}
         {isSoon && <Badge variant={'purple'}>Guide coming soon</Badge>}
+        {badge && <Badge {...badge} />}
       </div>
       <div className={clsx(styles.contentContainer)}>
         <span className={clsx(styles.cardTitle)} title={title}>
@@ -110,6 +111,7 @@ function CardCategory({item}) {
       )}
       containerClassName={item.customProps?.className}
       isSoon={item.customProps?.isSoon}
+      badge={item.customProps?.badge}
     />
   );
 }
@@ -127,6 +129,7 @@ function CardLink({item}) {
       html={item.customProps?.html}
       containerClassName={item.customProps?.className}
       isSoon={item.customProps?.isSoon}
+      badge={item.customProps?.badge}
     />
   );
 }