diff --git a/package.json b/package.json
index 401579b..a42e24d 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@floating-ui/react-dom-interactions": "^0.6.5",
     "@storybook/api": "^6.5.9",
     "@storybook/design-system": "^7.9.0",
+    "@storybook/icons": "^1.2.8",
     "@storybook/theming": "^6.5.9",
     "formik": "^2.1.5",
     "human-format": "^0.11.0",
diff --git a/src/components/Eyebrow.tsx b/src/components/Eyebrow.tsx
index 06862e8..970c1c9 100644
--- a/src/components/Eyebrow.tsx
+++ b/src/components/Eyebrow.tsx
@@ -33,10 +33,12 @@ const EyebrowCallout = styled(Link)<{ inverse?: boolean }>`
 const EyebrowContainer = styled.div<{
   inverse?: boolean;
 }>`
+  position: relative;
+  z-index: 20;
   display: none;
   align-items: center;
   padding: ${spacing.padding.small}px ${spacing.padding.medium}px;
-  background-color: ${(props) => (props.inverse ? 'rgba(0, 0, 0, 0.3)' : color.blueLight)};
+  background-color: ${(props) => (props.inverse ? 'rgba(0, 0, 0, 0.1)' : color.blueLight)};
   box-shadow: ${(props) => (props.inverse ? 'rgba(255, 255, 255, 0.1)' : color.tr10)} 0 -1px 0px 0px
     inset;
 
@@ -83,7 +85,7 @@ export const Eyebrow = ({ label, link, inverse, githubStarCount }: EyebrowProps)
       Visual test with Chromatic
     </EyebrowCallout>
     <GithubButtonWrapper>
-      <GithubButton starCount={githubStarCount} />
+      <GithubButton starCount={githubStarCount} inverse={inverse} />
     </GithubButtonWrapper>
   </EyebrowContainer>
 );
diff --git a/src/components/Footer/Footer.styles.ts b/src/components/Footer/Footer.styles.ts
index 767390c..499f66b 100644
--- a/src/components/Footer/Footer.styles.ts
+++ b/src/components/Footer/Footer.styles.ts
@@ -12,7 +12,9 @@ import {
 const inverseBorder = 'rgba(255, 255, 255, 0.1)';
 
 export const FooterWrapper = styled.footer<{ inverse?: boolean }>`
-  background-color: ${(props) => (props.inverse ? color.midnight : background.app)};
+  position: relative;
+  z-index: 10;
+  background-color: ${(props) => (props.inverse ? '#0E0C2A' : background.app)};
   border-top: 1px solid ${(props) => (props.inverse ? inverseBorder : color.border)};
   padding-top: 3rem;
   padding-bottom: 3rem;
diff --git a/src/components/GithubButton.tsx b/src/components/GithubButton.tsx
index e9c659c..580be3d 100644
--- a/src/components/GithubButton.tsx
+++ b/src/components/GithubButton.tsx
@@ -1,7 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
+import { styles } from '@storybook/design-system';
 
-const Svg = styled.svg`
+const Wrapper = styled.div<{ inverse?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: ${(props) =>
+    `1px solid ${props.inverse ? 'rgba(255, 255, 255, 0.2)' : styles.color.border}`};
+  height: 32px;
+  border-radius: 64px;
+  cursor: pointer;
+  gap: 10px;
+  padding: 0 12px;
+`;
+
+const Svg = styled.svg<{ inverse?: boolean }>`
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   font-size: 11px;
@@ -9,14 +23,13 @@ const Svg = styled.svg`
   line-height: 14px;
   cursor: pointer;
   user-select: none;
-  color: #24292f;
+  color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
   width: 14;
   height: 14;
   display: inline-block;
   vertical-align: text-top;
   fill: currentColor;
   overflow: visible;
-  margin-right: 4px;
 `;
 
 const Star = styled.a`
@@ -27,78 +40,38 @@ const Star = styled.a`
   position: relative;
   display: inline-flex;
   height: 14px;
-  padding: 2px 5px;
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
   vertical-align: bottom;
-  cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27, 31, 36, 0.15);
-  color: #24292f;
-  background-color: #ebf0f4;
-  background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
-  border-radius: 0.25em 0 0 0.25em;
-
-  &:focus,
-  &:hover {
-    background-color: #e9ebef;
-    background-position: 0 -0.5em;
-    background-image: url(
-      data:image/svg + xml,
-      %3csvgxmlns='http://www.w3.org/2000/svg'%3e%3clinearGradientid='o'x2='0'y2='1'%3e%3cstopstop-color='%23f3f4f6'/%3e%3cstopoffset='90%25'stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crectwidth='100%25'height='100%25'fill='url(%23o)'/%3e%3c/svg%3e
-    );
-    background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
-  }
-
-  &:active {
-    background-color: #e5e9ed;
-    box-shadow: inset 0 0.15em 0.3em rgb(27 31 36 / 15%);
-    background-image: none;
-  }
 `;
 
-const Count = styled.a`
+const Count = styled.a<{ inverse?: boolean }>`
   box-sizing: content-box;
   text-align: left;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
   text-decoration: none;
-  position: relative;
-  display: inline-flex;
   height: 14px;
-  padding: 2px 5px;
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
   vertical-align: bottom;
   cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27, 31, 36, 0.15);
-  border-left: 0;
-  border-radius: 0 0.25em 0.25em 0;
-  color: #24292f;
-  background-color: #fff;
+  color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
+  transition: color 0.2s ease;
 
   &:focus,
   &:hover {
-    color: #0969da;
+    color: ${(props) => (props.inverse ? styles.color.lightest : '#0969da')};
   }
 `;
 
-const Wrapper = styled.div`
-  display: flex;
-`;
-
-export const GithubButton = ({ starCount }: { starCount: number }) => (
-  <Wrapper className="chromatic-ignore">
+export const GithubButton = ({ starCount, inverse }: { starCount: number; inverse: boolean }) => (
+  <Wrapper className="chromatic-ignore" inverse={inverse}>
     <Star
       href="https://github.com/storybookjs/storybook"
       rel="noopener"
@@ -111,19 +84,20 @@ export const GithubButton = ({ starCount }: { starCount: number }) => (
         height="14"
         className="octicon octicon-mark-github"
         aria-hidden="true"
+        inverse={inverse}
       >
         <path
           fillRule="evenodd"
           d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
         />
       </Svg>
-      <span>Star</span>
     </Star>
     <Count
       href="https://github.com/storybookjs/storybook/stargazers"
       rel="noopener"
       target="_blank"
       aria-label={`${starCount} stargazers on GitHub`}
+      inverse={inverse}
     >
       {starCount.toLocaleString()}
     </Count>
diff --git a/src/components/IllustratedFeatureList.tsx b/src/components/IllustratedFeatureList.tsx
index d204013..0a24eaa 100644
--- a/src/components/IllustratedFeatureList.tsx
+++ b/src/components/IllustratedFeatureList.tsx
@@ -61,7 +61,7 @@ const IconWrapper = styled.div`
 
 const Feature = styled.button<{ inverse?: boolean }>`
   border: 1px solid ${(props) => (props.inverse ? 'rgba(255 255 255 / 10%)' : color.border)};
-  background-color: ${(props) => (props.inverse ? color.midnight : color.lightest)};
+  background-color: ${(props) => (props.inverse ? '#0E0C2A' : color.lightest)};
   border-radius: ${spacing.borderRadius.small}px;
   text-align: left;
   display: flex;
diff --git a/src/components/Nav/Nav.stories.tsx b/src/components/Nav/Nav.stories.tsx
index aac5f8c..bfaa2b8 100644
--- a/src/components/Nav/Nav.stories.tsx
+++ b/src/components/Nav/Nav.stories.tsx
@@ -82,7 +82,7 @@ export const FullStack = () => (
       link="https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/"
       githubStarCount={73724}
     />
-    <Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" />
+    <Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" githubStarCount={82000} />
     <SubNav>
       <SubNavBreadcrumb tertiary href="/back">
         <Icon icon="arrowleft" />
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
index 8eec0f5..094ec47 100644
--- a/src/components/Nav/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -1,13 +1,14 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { styled } from '@storybook/theming';
 import { Logos } from '@storybook/design-system';
+import { ArrowTopRightIcon } from '@storybook/icons';
 import { pageMargins, spacing, color, breakpoints } from '../shared/styles';
 import { NavItem } from './NavItem';
 import { Search } from '../Search';
-import { Community } from './menus';
 import { TabletMenu } from './TabletMenu';
 import { MobileMenu } from './MobileMenu';
 import { LinksContext } from '../links-context';
+import { GithubButton } from '../GithubButton';
 
 const navBreakpoints = {
   desktop: 978,
@@ -66,6 +67,8 @@ const StorybookLogoInverse = styled(Logos.StorybookInverted)`
 `;
 
 const Wrapper = styled.div<{ inverse?: boolean }>`
+  position: relative;
+  z-index: 20;
   box-shadow: ${(props) => (props.inverse ? 'rgba(255, 255, 255, 0.1)' : color.tr10)} 0 -1px 0px 0px
     inset;
   padding-top: ${spacing.padding.medium}px;
@@ -74,13 +77,10 @@ const Wrapper = styled.div<{ inverse?: boolean }>`
 
 const NavContainer = styled.nav`
   ${pageMargins}
+
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  @media (min-width: ${navBreakpoints.desktop}px) {
-    justify-content: flex-start;
-  }
 `;
 
 // Tablet nav 600 - desktop
@@ -105,12 +105,18 @@ const MobileNav = styled(MobileMenu)`
   }
 `;
 
+const Arrow = styled(ArrowTopRightIcon)`
+  margin-bottom: 8px;
+  margin-left: 6px;
+`;
+
 interface NavProps {
   inverse?: boolean;
   monochrome?: boolean;
   version: string;
   apiKey: string;
-  activeSection?: 'home' | 'why' | 'docs' | 'integrations' | 'showcase' | 'community';
+  activeSection?: 'home' | 'docs' | 'showcase' | 'blog';
+  githubStarCount: number;
 }
 
 const NavLinks = styled.div`
@@ -126,82 +132,115 @@ const NavLinks = styled.div`
   }
 `;
 
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`;
+
+const Right = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 12px;
+`;
+
+const GithubButtonWrapper = styled.div`
+  margin-left: ${spacing.padding.medium}px;
+  flex: none;
+
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: block;
+  }
+`;
+
 export const Nav: FunctionComponent<NavProps> = ({
   inverse,
   monochrome,
   version = '6.5',
   apiKey,
   activeSection = 'home',
+  githubStarCount = 8000,
 }) => {
   const navLinks = useContext(LinksContext);
 
   return (
     <Wrapper inverse={inverse}>
       <NavContainer>
-        <LogoNavItem
-          aria-label="home"
-          href={navLinks.home.url}
-          LinkWrapper={navLinks.home.linkWrapper}
-        >
-          {inverse ? (
-            <StorybookLogoInverse role="presentation" />
-          ) : (
-            <StorybookLogo role="presentation" />
-          )}
-        </LogoNavItem>
-        <NavLinks>
-          <NavItem
-            active={activeSection === 'why'}
-            monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.whyStorybook.url}
-            LinkWrapper={navLinks.whyStorybook.linkWrapper}
+        <Left>
+          <LogoNavItem
+            aria-label="home"
+            href={navLinks.home.url}
+            LinkWrapper={navLinks.home.linkWrapper}
           >
-            Why
-          </NavItem>
-          <NavItem
-            active={activeSection === 'showcase'}
+            {inverse ? (
+              <StorybookLogoInverse role="presentation" />
+            ) : (
+              <StorybookLogo role="presentation" />
+            )}
+          </LogoNavItem>
+          <NavLinks>
+            <NavItem
+              active={activeSection === 'docs'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.guides.url}
+              LinkWrapper={navLinks.showcase.linkWrapper}
+            >
+              Docs
+            </NavItem>
+            <NavItem
+              active={activeSection === 'showcase'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.showcase.url}
+              LinkWrapper={navLinks.showcase.linkWrapper}
+            >
+              Showcase
+            </NavItem>
+            <NavItem
+              active={activeSection === 'blog'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.blog.url}
+              LinkWrapper={navLinks.blog.linkWrapper}
+            >
+              Blog
+            </NavItem>
+            <NavItem
+              active={activeSection === 'blog'}
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.chromatic.url}
+              LinkWrapper={navLinks.chromatic.linkWrapper}
+            >
+              Visual Test
+              <Arrow size={8} />
+            </NavItem>
+            <NavItem
+              monochrome={monochrome}
+              variant={inverse ? 'inverse' : 'default'}
+              href={navLinks.enterprise.url}
+              LinkWrapper={navLinks.enterprise.linkWrapper}
+            >
+              Enterprise
+              <Arrow size={8} />
+            </NavItem>
+          </NavLinks>
+        </Left>
+        <Right>
+          <GithubButtonWrapper>
+            <GithubButton starCount={githubStarCount} inverse={inverse} />
+          </GithubButtonWrapper>
+          <GlobalSearch
             monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.showcase.url}
-            LinkWrapper={navLinks.showcase.linkWrapper}
-          >
-            Showcase
-          </NavItem>
-          <NavItem
-            active={activeSection === 'docs'}
-            monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.guides.url}
-            LinkWrapper={navLinks.showcase.linkWrapper}
-          >
-            Docs
-          </NavItem>
-          <NavItem
-            active={activeSection === 'integrations'}
-            monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.integrations.url}
-            LinkWrapper={navLinks.integrations.linkWrapper}
-          >
-            Integrations
-          </NavItem>
-          <Community
+            apiKey={apiKey}
+            version={version}
             inverse={inverse}
-            monochrome={monochrome}
-            navLinks={navLinks}
-            active={activeSection === 'community'}
           />
-          <NavItem
-            monochrome={monochrome}
-            variant={inverse ? 'inverse' : 'default'}
-            href={navLinks.enterprise.url}
-            LinkWrapper={navLinks.enterprise.linkWrapper}
-          >
-            Enterprise
-          </NavItem>
-        </NavLinks>
-        <GlobalSearch monochrome={monochrome} apiKey={apiKey} version={version} inverse={inverse} />
+        </Right>
         {/* Collapsed navs for tablet and mobile */}
         <TabletNav navLinks={navLinks} inverse={inverse} monochrome={monochrome} />
         <MobileNav
diff --git a/yarn.lock b/yarn.lock
index ae7f741..43b0f14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3133,6 +3133,11 @@
   dependencies:
     "@types/jest" ">=26.0.0"
 
+"@storybook/icons@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.8.tgz#f530688ee000b487783f2d9cf7bced92e2c32915"
+  integrity sha512-YMF5DiBvMiAVH6qd6Cf6WCwZq3D1OZNxsKtZVFBlzJXqlZb1CLEuCHy5MwL4WI5mzb6q8MJsLYpVMoH84OzUpQ==
+
 "@storybook/instrumenter@6.5.9", "@storybook/instrumenter@^6.4.0":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-6.5.9.tgz#885d9dec31b7b7fa6ea29b446105480450e527b8"