diff --git a/website/next.config.js b/website/next.config.js
index fce88a12c..aa9c7c255 100644
--- a/website/next.config.js
+++ b/website/next.config.js
@@ -3,9 +3,10 @@ const path = require('path')
 
 module.exports = withHashicorp({
   defaultLayout: true,
-  transpileModules: ['is-absolute-url', '@hashicorp/react-mega-nav'],
+  transpileModules: ['is-absolute-url', '@hashicorp/react-.*'],
   mdx: { resolveIncludes: path.join(__dirname, 'pages/partials') },
 })({
+  svgo: { plugins: [{ removeViewBox: false }] },
   experimental: {
     modern: true,
     rewrites: () => [
diff --git a/website/package-lock.json b/website/package-lock.json
index 9fb53e60e..188d7da56 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -1666,6 +1666,27 @@
       "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.0.tgz",
       "integrity": "sha512-lv6XR2plm2m3+qO6VE+RYquTzOODIt3mQ/1fBT1bn7wsR0qxFiuryW4JfsF94oCGk++LkDkRt/8V742HiT+fHw=="
     },
+    "@hashicorp/react-hashi-stack-menu": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-hashi-stack-menu/-/react-hashi-stack-menu-1.0.2.tgz",
+      "integrity": "sha512-ur52VUvHeQ3XERN4Ga7h6dXPNSiM3fU805D7PdCPwzOY8GxQfEN/6AWJm9HtVZ0BZupzK+kph1p3p48qXh7Wlw==",
+      "requires": {
+        "@hashicorp/react-inline-svg": "^1.0.2",
+        "slugify": "1.3.4"
+      },
+      "dependencies": {
+        "@hashicorp/react-inline-svg": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
+          "integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
+        },
+        "slugify": {
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+          "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+        }
+      }
+    },
     "@hashicorp/react-head": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-head/-/react-head-1.1.1.tgz",
diff --git a/website/package.json b/website/package.json
index 010ee2cdb..536f29000 100644
--- a/website/package.json
+++ b/website/package.json
@@ -10,6 +10,7 @@
     "@hashicorp/react-docs-page": "4.0.0",
     "@hashicorp/react-docs-sidenav": "3.2.5",
     "@hashicorp/react-global-styles": "4.4.0",
+    "@hashicorp/react-hashi-stack-menu": "^1.0.2",
     "@hashicorp/react-head": "1.1.1",
     "@hashicorp/react-mega-nav": "4.0.1-2",
     "@hashicorp/react-product-downloader": "4.0.2",
diff --git a/website/pages/_app.js b/website/pages/_app.js
index 7d1339a44..9880acf00 100644
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@@ -2,7 +2,7 @@ import './style.css'
 import '@hashicorp/nextjs-scripts/lib/nprogress/style.css'
 
 import ProductSubnav from 'components/subnav'
-import MegaNav from '@hashicorp/react-mega-nav'
+import HashiStackMenu from '@hashicorp/react-hashi-stack-menu'
 import Footer from 'components/footer'
 import Error from './_error'
 import Head from 'next/head'
@@ -44,7 +44,7 @@ export default function App({ Component, pageProps }) {
           { href: '/fonts/dejavu/mono.woff2', as: 'font' },
         ]}
       />
-      <MegaNav product="Packer" />
+      <HashiStackMenu />
       <ProductSubnav />
       <div className="content">
         <Component {...pageProps} />