diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
index dc919ed249c56..3b2a37b198fd0 100644
--- a/docs-website/docusaurus.config.js
+++ b/docs-website/docusaurus.config.js
@@ -8,9 +8,7 @@ module.exports = {
   favicon: "img/favicon.ico",
   organizationName: "linkedin", // Usually your GitHub org/user name.
   projectName: "datahub", // Usually your repo name.
-  stylesheets: [
-    "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap",
-  ],
+  stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"],
   themeConfig: {
     colorMode: {
       switchConfig: {
@@ -72,6 +70,11 @@ module.exports = {
           label: "Roadmap",
           position: "right",
         },
+        {
+          href: "http://metadataday.datahubproject.io/",
+          label: "Metadata Day 2022",
+          position: "right",
+        },
         {
           href: "https://slack.datahubproject.io",
           "aria-label": "Slack",
@@ -200,10 +203,7 @@ module.exports = {
     ],
   ],
   plugins: [
-    [
-      "@docusaurus/plugin-ideal-image",
-      { quality: 100, sizes: [320, 640, 1280, 1440, 1600] },
-    ],
+    ["@docusaurus/plugin-ideal-image", { quality: 100, sizes: [320, 640, 1280, 1440, 1600] }],
     "docusaurus-plugin-sass",
     [
       "docusaurus-graphql-plugin",
diff --git a/docs-website/src/components/Hero.js b/docs-website/src/components/Hero.js
index 7559c8b1f3061..2bf463270ab34 100644
--- a/docs-website/src/components/Hero.js
+++ b/docs-website/src/components/Hero.js
@@ -10,39 +10,37 @@ import RoundedImage from "./RoundedImage";
 const Hero = ({}) => (
   <header className={clsx("hero", styles.hero)}>
     <div className="container">
+      <div className="hero__alert alert alert--primary">
+        <span>
+          <strong>🎉&nbsp; May 17th &amp; 18th 2020: Metadata Day, Governance as Code.</strong> Join us for expert panel discussions, lightning talks,
+          and our inaugural Hackathon!
+        </span>
+
+        <Link className="button button--primary button--md" href="http://metadataday.datahubproject.io/" target="_blank">
+          RSVP Here →
+        </Link>
+      </div>
+
       <div className="row row--centered">
         <div className="col col--5">
           <div className="hero__content">
             <div>
-              <h1 className={clsx("hero__title")}>
-                The Metadata Platform for the Modern Data Stack
-              </h1>
+              <h1 className={clsx("hero__title")}>The Metadata Platform for the Modern Data Stack</h1>
               <p className={clsx("hero__subtitle")}>
-                Data ecosystems are diverse &#8212; too diverse. DataHub's
-                extensible metadata platform enables data discovery, data
-                observability and federated governance that helps you tame this
-                complexity.
+                Data ecosystems are diverse &#8212; too diverse. DataHub's extensible metadata platform enables data discovery, data observability and
+                federated governance that helps you tame this complexity.
               </p>
-              <Link
-                className="button button--primary button--lg"
-                to={useBaseUrl("docs/")}
-              >
+              <Link className="button button--primary button--lg" to={useBaseUrl("docs/")}>
                 Get Started →
               </Link>
-              <Link
-                className="button button--secondary button--outline button--lg"
-                to="https://slack.datahubproject.io"
-              >
+              <Link className="button button--secondary button--outline button--lg" to="https://slack.datahubproject.io">
                 Join our Slack
               </Link>
             </div>
           </div>
         </div>
         <div className={clsx("col col--6 col--offset-1")}>
-          <RoundedImage
-            img={require("/img/screenshots/entity.png")}
-            alt="DataHub Entity Screenshot"
-          />
+          <RoundedImage img={require("/img/screenshots/entity.png")} alt="DataHub Entity Screenshot" />
           <div></div>
         </div>
       </div>
diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss
index 20b0a2ed95729..ad86e19b4b62c 100644
--- a/docs-website/src/styles/global.scss
+++ b/docs-website/src/styles/global.scss
@@ -95,7 +95,7 @@ div[class^="announcementBarContent"] {
   }
 }
 
-@media only screen and (max-width: 1050px) {
+@media only screen and (max-width: 1245px) {
   .navbar__toggle {
     display: inherit;
   }
diff --git a/docs-website/src/styles/hero.module.scss b/docs-website/src/styles/hero.module.scss
index 3873af29a3017..19bb893e28455 100644
--- a/docs-website/src/styles/hero.module.scss
+++ b/docs-website/src/styles/hero.module.scss
@@ -12,5 +12,22 @@
     .button {
       margin-right: 1rem;
     }
+    .hero__alert {
+      margin-bottom: 2rem;
+      @media (min-width: 690px) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .button {
+        text-decoration: none;
+        margin: 0.5rem 0 0 0;
+        display: block;
+        white-space: nowrap;
+        @media (min-width: 690px) {
+          margin: 0 0 0 0.5rem;
+        }
+      }
+    }
   }
 }