diff --git a/pages/features/data-governance.tsx b/pages/features/data-governance.tsx
index fcca769e0..bbf453880 100644
--- a/pages/features/data-governance.tsx
+++ b/pages/features/data-governance.tsx
@@ -14,7 +14,7 @@ export default function () {
       // This is emptied via onMouseLeave within the parent container.
       setHoverVal(str);
     }
-  }
+  };
 
   return (
     <div>
@@ -47,9 +47,14 @@ export default function () {
           <Tag>Feature highlights</Tag>
         </div>
       </div>
-      <div className="container mx-auto max-w-4xl grid lg:grid-cols-5 pt-16 text-center lg:px-0 sm:px-6 feature-highlights" onMouseOver={hover} onMouseLeave={() => setHoverVal("")}>
-        <div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
-        data-hover="Write custom transforms to adapt data as it's processed"
+      <div
+        className="container mx-auto max-w-4xl grid lg:grid-cols-5 pt-16 text-center lg:px-0 sm:px-6 feature-highlights"
+        onMouseOver={hover}
+        onMouseLeave={() => setHoverVal("")}
+      >
+        <div
+          className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
+          data-hover="Write custom transforms to adapt data as it's processed"
         >
           <svg
             width="24"
@@ -66,8 +71,9 @@ export default function () {
 
           <p className="pt-4">Inline JavaScript (ES6+) transforms</p>
         </div>
-        <div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
-        data-hover="Version each event with its own schema to control your data as it changes over time"
+        <div
+          className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
+          data-hover="Version each event with its own schema to control your data as it changes over time"
         >
           <svg
             width="24"
@@ -83,8 +89,9 @@ export default function () {
 
           <p className="pt-4">Event versioning and&nbsp;management</p>
         </div>
-        <div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
-        data-hover="Enforce schemas for each event, and store invalid events in quarantine for inspection and post-processing"
+        <div
+          className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
+          data-hover="Enforce schemas for each event, and store invalid events in quarantine for inspection and post-processing"
         >
           <svg
             width="24"
@@ -99,8 +106,9 @@ export default function () {
           </svg>
           <p className="pt-4">Event schemas with data quarantine</p>
         </div>
-        <div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
-        data-hover="Enrich data via external APIs using any programming language"
+        <div
+          className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
+          data-hover="Enrich data via external APIs using any programming language"
         >
           <svg
             width="24"
@@ -115,8 +123,9 @@ export default function () {
           </svg>
           <p className="pt-4">Enrichment via external&nbsp;APIs</p>
         </div>
-        <div className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
-        data-hover="Proactively alert when events become anomalous or have invalid data, without any setup"
+        <div
+          className="flex flex-col items-center hover:shadow-xl hover:bg-white rounded-sm p-4"
+          data-hover="Proactively alert when events become anomalous or have invalid data, without any setup"
         >
           <svg
             width="24"
@@ -132,7 +141,9 @@ export default function () {
           <p className="pt-4">Alerting and error reporting&nbsp;built-in</p>
         </div>
       </div>
-      <p className="text-center pt-6 text-xs text-slate-500">{hoverVal || (<>&nbsp;</>)}</p>
+      <p className="text-center pt-6 text-xs text-slate-500">
+        {hoverVal || <>&nbsp;</>}
+      </p>
 
       <div className="container mx-auto grid grid-cols-2 gap-16 pt-44">
         <div>
@@ -153,7 +164,12 @@ export default function () {
         </div>
 
         <div className="flex align-center justify-center">
-          <img src="/assets/overview-simplified.svg" alt="Inngest overview" height="auto" className="self-center" />
+          <img
+            src="/assets/overview-simplified.svg"
+            alt="Inngest overview"
+            height="auto"
+            className="self-center"
+          />
         </div>
       </div>
 
@@ -177,21 +193,25 @@ export default function () {
       <div className="container mx-auto">
         <div className="p-20 mt-24 rounded-xl bg-slate-100">
           <h2 className="mb-2">Develop faster and safer</h2>
-          <p>Use our platform to rapidly build functionality driven by events, with zero infrastructure and full end-to-end safety.</p>
+          <p>
+            Use our platform to rapidly build functionality driven by events,
+            with zero infrastructure and full end-to-end safety.
+          </p>
           <div className="grid lg:grid-cols-3 gap-16 mt-20">
             <div>
               <h3 className="pb-4">Powerful</h3>
               <p>
-                Transform and enrich data on-the-fly, ensuring your data is as clean
-                and powerful as possible. See an entire overview of what each event
-                does in your system — no documenting required.
+                Transform and enrich data on-the-fly, ensuring your data is as
+                clean and powerful as possible. See an entire overview of what
+                each event does in your system — no documenting required.
               </p>
             </div>
             <div>
               <h3 className="pb-4">Flexible</h3>
               <p>
-                Create unlimited event versions with a full changelog, ensuring your
-                event registry can adapt to your business needs as you grow.
+                Create unlimited event versions with a full changelog, ensuring
+                your event registry can adapt to your business needs as you
+                grow.
               </p>
             </div>
             <div>
diff --git a/shared/nav.tsx b/shared/nav.tsx
index 58c2b10cd..1b32d6074 100644
--- a/shared/nav.tsx
+++ b/shared/nav.tsx
@@ -42,25 +42,68 @@ const NavContent: React.FC<Props> = (props: Props) => {
                 <span className="text-slate-400 px-4">Product</span>
                 <a href="/product" className="rounded-lg p-4">
                   <p>Functions</p>
-                  <p className="pt-1 text-slate-400"><small>Event-driven and scheduled serverless step functions</small></p>
+                  <p className="pt-1 text-slate-400">
+                    <small>
+                      Event-driven and scheduled serverless step functions
+                    </small>
+                  </p>
                 </a>
                 <a href="/features/data-governance" className="rounded-lg p-4">
                   <p>Data governance</p>
-                  <p className="pt-1 text-slate-400"><small>The single platform to handle and manage all event data</small></p>
+                  <p className="pt-1 text-slate-400">
+                    <small>
+                      The single platform to handle and manage all event data
+                    </small>
+                  </p>
                 </a>
               </div>
 
               <div className="secondary-links col-span-5 bg-slate-100 pt-6 pb-3 px-2 text-xs">
                 <span className="text-slate-400 px-4">Use cases</span>
-                <a href="/uses/serverless-node-background-jobs" className="rounded-lg px-4 py-3">Background and scheduled jobs</a>
-                <a href="/uses/internal-tools" className="rounded-lg px-4 py-3">Internal tools</a>
-                <a href="/uses/user-journey-automation" className="rounded-lg px-4 py-3">User journey automation</a>
+                <a
+                  href="/uses/serverless-node-background-jobs"
+                  className="rounded-lg px-4 py-3"
+                >
+                  Background and scheduled jobs
+                </a>
+                <a href="/uses/internal-tools" className="rounded-lg px-4 py-3">
+                  Internal tools
+                </a>
+                <a
+                  href="/uses/user-journey-automation"
+                  className="rounded-lg px-4 py-3"
+                >
+                  User journey automation
+                </a>
+              </div>
+            </div>
+          </Hoverable>
+          <Hoverable>
+            <StyledLink key="product" href="/docs?ref=nav">
+              Learn
+            </StyledLink>
+            <div className="rounded-lg w-56 ">
+              <div className="primary-links py-2 px-2">
+                <a href="/product" className="rounded-lg p-4">
+                  <p>Docs</p>
+                  <p className="pt-1 text-slate-400">
+                    <small>
+                      Everything you need to know about our event-driven
+                      platform
+                    </small>
+                  </p>
+                </a>
+                <a href="/features/data-governance" className="rounded-lg p-4">
+                  <p>Quick starts</p>
+                  <p className="pt-1 text-slate-400">
+                    <small>
+                      Example projects to reference when using Inngest
+                    </small>
+                  </p>
+                </a>
               </div>
             </div>
           </Hoverable>
-          <StyledLink key="docs" href="/docs?ref=nav">
-            Docs
-          </StyledLink>
           <StyledLink key="blog" href="/blog?ref=nav">
             Blog
           </StyledLink>
@@ -240,16 +283,19 @@ const Container = styled.div<{ sticky?: boolean }>`
       grid-template-columns: repeat(10, 1fr);
       align-items: stretch;
 
-      > a, > div {
+      > a,
+      > div {
         grid-column: 2 / -2;
       }
-      > div { padding: 0 }
-      a, > a {
+      > div {
+        padding: 0;
+      }
+      a,
+      > a {
         display: block;
         margin: 0;
         padding: 0.5rem 4px;
       }
-
     }
 
     align-items: center;
@@ -277,7 +323,7 @@ const StyledLink = styled.a`
   white-space: nowrap;
 
   color: var(--font-color-primary);
-  transition: all .3s;
+  transition: all 0.3s;
 
   &:hover {
     background: #2f6d9d11;
@@ -290,7 +336,8 @@ const StyledLink = styled.a`
 const Hoverable = styled.div`
   position: relative;
 
-  &.visible > div, &:hover > div {
+  &.visible > div,
+  &:hover > div {
     opacity: 1;
     pointer-events: all;
     transform: translateY(0);
@@ -329,8 +376,7 @@ const Hoverable = styled.div`
     z-index: 3;
     background: #fff;
     box-sizing: border-box;
-    box-shadow: 0 0 100px rgba(0, 0, 0, 0.15),
-      0 10px 20px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.08);
   }
 
   span {
@@ -339,10 +385,11 @@ const Hoverable = styled.div`
     letter-spacing: 1.5px;
     font-size: 12px;
     line-height: 1.25;
-    margin: 0 0 .75rem;
+    margin: 0 0 0.75rem;
   }
 
-  .primary-links, .secondary-links {
+  .primary-links,
+  .secondary-links {
     a {
       display: block;
       margin: 0;
@@ -350,7 +397,10 @@ const Hoverable = styled.div`
         background: #2f6d9d11;
       }
     }
-    p { margin: 0;  line-height: 1.05; };
+    p {
+      margin: 0;
+      line-height: 1.05;
+    }
   }
 
   .secondary-links a {