diff --git a/client/src/playground/forms.tsx b/client/src/playground/forms.tsx
index 8a54d41d9319..c10c3c4a8670 100644
--- a/client/src/playground/forms.tsx
+++ b/client/src/playground/forms.tsx
@@ -3,10 +3,9 @@ import { Button } from "../ui/atoms/button";
 import { EditorContent, codeToMarkdown } from "./utils";
 import { Loading } from "../ui/atoms/loading";
 import { useUserData } from "../user-context";
-import { usePlusUrl } from "../plus/utils";
 import { useGleanClick } from "../telemetry/glean-context";
-import { AuthContainer } from "../ui/molecules/auth-container";
 import { PLAYGROUND } from "../telemetry/constants";
+import { PlusLoginBanner } from "../plus/common/login-banner";
 
 export function FlagForm({ gistId }: { gistId: string | null }) {
   return (
@@ -64,7 +63,6 @@ export function ShareForm({
   extraClasses?: string;
 }) {
   let userData = useUserData();
-  const href = usePlusUrl();
   const gleanClick = useGleanClick();
   let [loading, setLoading] = useState(false);
   return (
@@ -126,25 +124,10 @@ export function ShareForm({
             )}
           </>
         ) : (
-          <div className="share-get-plus">
-            <span>Want to share this playground via link?</span>
+          <PlusLoginBanner className="share-get-plus" gleanPrefix={PLAYGROUND}>
+            Want to share this playground via link?
             <br />
-            <strong>
-              Upgrade to{" "}
-              <a
-                className="plus-link"
-                href={href}
-                onClick={() => gleanClick(`${PLAYGROUND}: banner-link`)}
-              >
-                MDN Plus
-              </a>{" "}
-              for free.
-            </strong>
-            <AuthContainer
-              signInGleanContext={`${PLAYGROUND}: banner-login`}
-              subscribeGleanContext={`${PLAYGROUND}: banner-button`}
-            />
-          </div>
+          </PlusLoginBanner>
         )}
       </section>
     </form>
diff --git a/client/src/plus/ai-help/banners.tsx b/client/src/plus/ai-help/banners.tsx
new file mode 100644
index 000000000000..2aab2d47fea0
--- /dev/null
+++ b/client/src/plus/ai-help/banners.tsx
@@ -0,0 +1,34 @@
+import { AI_HELP } from "../../telemetry/constants";
+import { SignUpLink } from "../../ui/atoms/signup-link";
+import { PlusLoginBanner } from "../common/login-banner";
+
+export function AiLoginBanner() {
+  return (
+    <PlusLoginBanner gleanPrefix={AI_HELP}>
+      Want to use AI Help?
+    </PlusLoginBanner>
+  );
+}
+
+export function AiUpsellBanner({ limit }: { limit: number }) {
+  return (
+    <div className="login-banner">
+      <span>
+        <span>You have reached the limit of {limit} questions per day.</span>
+        <br />
+        <span>
+          <strong>Want to ask more?</strong> Upgrade to MDN Plus 5 or MDN
+          Supporter 10.
+        </span>
+      </span>
+      <ul className="auth-container">
+        <li>
+          <SignUpLink
+            gleanContext={`${AI_HELP}: upsell-button`}
+            toPlans={true}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
index e5147fbfb880..cd6ae3b15f26 100644
--- a/client/src/plus/ai-help/index.tsx
+++ b/client/src/plus/ai-help/index.tsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { Message, MessageRole, Quota, useAiChat } from "./use-ai";
-import { AiLoginBanner, AiUpsellBanner } from "./login-banner";
+import { AiLoginBanner, AiUpsellBanner } from "./banners";
 import { useUserData } from "../../user-context";
 import Container from "../../ui/atoms/container";
 import { FeatureId, MDN_PLUS_TITLE } from "../../constants";
diff --git a/client/src/plus/ai-help/login-banner.tsx b/client/src/plus/ai-help/login-banner.tsx
deleted file mode 100644
index 0ab123a2fa82..000000000000
--- a/client/src/plus/ai-help/login-banner.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { AI_HELP } from "../../telemetry/constants";
-import { useGleanClick } from "../../telemetry/glean-context";
-import { SubscribeLink } from "../../ui/atoms/subscribe-link";
-import { AuthContainer } from "../../ui/molecules/auth-container";
-import { usePlusUrl } from "../utils";
-import "./login-banner.scss";
-
-export function AiLoginBanner() {
-  const href = usePlusUrl();
-  const gleanClick = useGleanClick();
-
-  return (
-    <div className="login-banner">
-      <span>
-        <span>Want to use AI Help?</span>{" "}
-        <strong>
-          Upgrade to{" "}
-          <a
-            className="plus-link"
-            href={href}
-            onClick={() => gleanClick(`${AI_HELP}: banner-link`)}
-          >
-            MDN Plus
-          </a>
-          .
-        </strong>
-      </span>
-      <AuthContainer
-        signInGleanContext={`${AI_HELP}: banner-login`}
-        subscribeGleanContext={`${AI_HELP}: banner-button`}
-      />
-    </div>
-  );
-}
-
-export function AiUpsellBanner({ limit }: { limit: number }) {
-  return (
-    <div className="login-banner">
-      <span>
-        <span>You have reached the limit of {limit} questions per day.</span>
-        <br />
-        <span>
-          <strong>Want to ask more?</strong> Upgrade to MDN Plus 5 or MDN
-          Supporter 10.
-        </span>
-      </span>
-      <ul className="auth-container">
-        <li>
-          <SubscribeLink
-            gleanContext={`${AI_HELP}: upsell-button`}
-            toPlans={true}
-          />
-        </li>
-      </ul>
-    </div>
-  );
-}
diff --git a/client/src/plus/app.tsx b/client/src/plus/app.tsx
index bd9e860687e6..93d66c8f4886 100644
--- a/client/src/plus/app.tsx
+++ b/client/src/plus/app.tsx
@@ -1,6 +1,6 @@
 import { useSearchParams } from "react-router-dom";
 import Notification from "../ui/atoms/notification";
-import { SubscribeLink } from "../ui/atoms/subscribe-link";
+import { SignUpLink } from "../ui/atoms/signup-link";
 
 import "./index.scss";
 
@@ -16,7 +16,7 @@ export default function App() {
       )}
 
       <p>
-        <SubscribeLink />
+        <SignUpLink />
       </p>
     </div>
   );
diff --git a/client/src/plus/collections/new-edit-collection-modal.tsx b/client/src/plus/collections/new-edit-collection-modal.tsx
index 0ceb35abd5e9..b581776b0fdd 100644
--- a/client/src/plus/collections/new-edit-collection-modal.tsx
+++ b/client/src/plus/collections/new-edit-collection-modal.tsx
@@ -4,7 +4,7 @@ import { Button } from "../../ui/atoms/button";
 import MDNModal from "../../ui/atoms/modal";
 import NoteCard from "../../ui/molecules/notecards";
 import { SubscriptionType, useUserData } from "../../user-context";
-import { SubscribeLink } from "../../ui/atoms/subscribe-link";
+import { SignUpLink } from "../../ui/atoms/signup-link";
 import {
   Collection,
   NewCollection,
@@ -103,7 +103,7 @@ export default function NewEditCollectionModal({
               Upgrade now to receive unlimited access to collections, and more:
             </p>
             <div className="mdn-form-item is-button-row">
-              <SubscribeLink
+              <SignUpLink
                 toPlans={true}
                 gleanContext={NEW_COLLECTION_MODAL_UPGRADE_LINK}
               />
diff --git a/client/src/plus/common/index.tsx b/client/src/plus/common/index.tsx
index 21dc82585ed9..364a8852a7e7 100644
--- a/client/src/plus/common/index.tsx
+++ b/client/src/plus/common/index.tsx
@@ -1,4 +1,4 @@
-import SignInLink from "../../ui/atoms/signin-link";
+import LogInLink from "../../ui/atoms/login-link";
 import NoteCard from "../../ui/molecules/notecards";
 import { getCategoryByPathname } from "../../utils";
 
@@ -6,7 +6,7 @@ export function NotSignedIn() {
   return (
     <div className="container">
       <h3>You have not signed in</h3>
-      <SignInLink />
+      <LogInLink />
     </div>
   );
 }
@@ -15,7 +15,7 @@ export function NotSubscriber() {
   return (
     <>
       <h2>You are signed in but not an active subscriber</h2>
-      <SignInLink />
+      <LogInLink />
     </>
   );
 }
diff --git a/client/src/plus/ai-help/login-banner.scss b/client/src/plus/common/login-banner.scss
similarity index 60%
rename from client/src/plus/ai-help/login-banner.scss
rename to client/src/plus/common/login-banner.scss
index 26ce2d911f96..cef4df848211 100644
--- a/client/src/plus/ai-help/login-banner.scss
+++ b/client/src/plus/common/login-banner.scss
@@ -1,8 +1,12 @@
+@use "../../ui/vars" as *;
+
 .login-banner {
+  align-items: center;
   background-color: var(--background-success);
   border: 2px solid var(--background-success);
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
   padding: 1rem;
 
   .plus-link {
@@ -12,4 +16,12 @@
     text-decoration-thickness: 0.15rem;
     text-underline-offset: 0.1em;
   }
+
+  .auth-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0;
+    margin-left: auto;
+  }
 }
diff --git a/client/src/plus/updates/login-banner.tsx b/client/src/plus/common/login-banner.tsx
similarity index 52%
rename from client/src/plus/updates/login-banner.tsx
rename to client/src/plus/common/login-banner.tsx
index a26dcf9bed62..9ae2fe4816ab 100644
--- a/client/src/plus/updates/login-banner.tsx
+++ b/client/src/plus/common/login-banner.tsx
@@ -1,32 +1,39 @@
+import { useGleanClick } from "../../telemetry/glean-context";
 import { AuthContainer } from "../../ui/molecules/auth-container";
-import "./login-banner.scss";
 import { usePlusUrl } from "../utils";
-import { PLUS_UPDATES } from "../../telemetry/constants";
-import { useGleanClick } from "../../telemetry/glean-context";
+import "./login-banner.scss";
 
-export function LoginBanner() {
+export function PlusLoginBanner({
+  children,
+  className = "login-banner",
+  gleanPrefix,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  gleanPrefix: string;
+}) {
   const href = usePlusUrl();
   const gleanClick = useGleanClick();
 
   return (
-    <div className="login-banner">
+    <div className={className}>
       <span>
-        <span>Want to use filters?</span>{" "}
+        <span>{children}</span>{" "}
         <strong>
           Upgrade to{" "}
           <a
             className="plus-link"
             href={href}
-            onClick={() => gleanClick(`${PLUS_UPDATES.MDN_PLUS}: banner-link`)}
+            onClick={() => gleanClick(`${gleanPrefix}: banner-link`)}
           >
             MDN Plus
-          </a>
-          .
+          </a>{" "}
+          for free.
         </strong>
       </span>
       <AuthContainer
-        signInGleanContext={`${PLUS_UPDATES.MDN_PLUS}: banner-login`}
-        subscribeGleanContext={`${PLUS_UPDATES.MDN_PLUS}: banner-button`}
+        logInGleanContext={`${gleanPrefix}: banner-login`}
+        signUpGleanContext={`${gleanPrefix}: banner-signup`}
       />
     </div>
   );
diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx b/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx
index e92697ed4bef..3253f5d2b7d1 100644
--- a/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx
+++ b/client/src/plus/offer-overview/offer-overview-subscribe/index.tsx
@@ -14,7 +14,7 @@ import { getStripePlans } from "../../common/api";
 import { useOnlineStatus } from "../../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { OFFER_OVERVIEW_CLICK } from "../../../telemetry/constants";
-import SignInLink from "../../../ui/atoms/signin-link";
+import LogInLink from "../../../ui/atoms/login-link";
 
 export enum Period {
   Month,
@@ -347,7 +347,7 @@ function OfferOverviewSubscribe() {
                 {!activeSubscription && (
                   <>
                     {" "}
-                    or <SignInLink cta="log in" />
+                    or <LogInLink cta="log in" />
                   </>
                 )}
               </h2>
diff --git a/client/src/plus/updates/index.tsx b/client/src/plus/updates/index.tsx
index 863800bfdf8a..0768b0b6993b 100644
--- a/client/src/plus/updates/index.tsx
+++ b/client/src/plus/updates/index.tsx
@@ -19,11 +19,11 @@ import "./index.scss";
 import { useGleanClick } from "../../telemetry/glean-context";
 import { PLUS_UPDATES } from "../../telemetry/constants";
 import SearchFilter, { AnyFilter, AnySort } from "../search-filter";
-import { LoginBanner } from "./login-banner";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { DataError } from "../common";
 import { useCollections } from "../collections/api";
+import { PlusLoginBanner } from "../common/login-banner";
 
 type EventWithStatus = Event & { status: Status };
 type Status = "added" | "removed";
@@ -201,7 +201,11 @@ function UpdatesLayout() {
           }
         />
 
-        {user && !user.isAuthenticated && <LoginBanner />}
+        {user && !user.isAuthenticated && (
+          <PlusLoginBanner gleanPrefix={PLUS_UPDATES.MDN_PLUS}>
+            Want to use filters?
+          </PlusLoginBanner>
+        )}
 
         {user && user.isAuthenticated && hasFilters && (
           <Button
diff --git a/client/src/plus/updates/login-banner.scss b/client/src/plus/updates/login-banner.scss
deleted file mode 100644
index 26ce2d911f96..000000000000
--- a/client/src/plus/updates/login-banner.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.login-banner {
-  background-color: var(--background-success);
-  border: 2px solid var(--background-success);
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem;
-
-  .plus-link {
-    color: var(--text-primary);
-    font-style: normal;
-    text-decoration: underline;
-    text-decoration-thickness: 0.15rem;
-    text-underline-offset: 0.1em;
-  }
-}
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 30fdf26a7754..f80cd300516a 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -27,8 +27,10 @@ export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
 export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
 export const SIDEBAR_FILTER_FOCUS = "sidebar_filter_focus";
-export const TOP_NAV_ALREADY_SUBSCRIBER = "top_nav_already_subscriber";
-export const TOP_NAV_GET_MDN_PLUS = "top_nav_get_mdn_plus";
+/** Replaced "top_nav_already_subscriber" in July 2023. */
+export const TOP_NAV_LOGIN = "top_nav: login";
+/** Replaced "top_nav_get_mdn_plus" in July 2023. */
+export const TOP_NAV_SIGNUP = "top_nav: signup";
 export const TOGGLE_PLUS_OFFLINE_DISABLED = "toggle_plus_offline_disabled";
 export const TOGGLE_PLUS_OFFLINE_ENABLED = "toggle_plus_offline_enabled";
 export const TOGGLE_PLUS_ADS_FREE_DISABLED = "toggle_plus_ads_free_disabled";
diff --git a/client/src/ui/atoms/signin-link/index.scss b/client/src/ui/atoms/login-link/index.scss
similarity index 93%
rename from client/src/ui/atoms/signin-link/index.scss
rename to client/src/ui/atoms/login-link/index.scss
index b439b209d920..4342e23117a3 100644
--- a/client/src/ui/atoms/signin-link/index.scss
+++ b/client/src/ui/atoms/login-link/index.scss
@@ -1,7 +1,7 @@
 @use "../../vars" as *;
 
 .auth-container {
-  .signin-link {
+  .login-link {
     align-items: center;
     display: inline-flex;
     font-weight: var(--font-body-strong-weight);
diff --git a/client/src/ui/atoms/signin-link/index.tsx b/client/src/ui/atoms/login-link/index.tsx
similarity index 84%
rename from client/src/ui/atoms/signin-link/index.tsx
rename to client/src/ui/atoms/login-link/index.tsx
index 99254674f53f..dfa65197e389 100644
--- a/client/src/ui/atoms/signin-link/index.tsx
+++ b/client/src/ui/atoms/login-link/index.tsx
@@ -6,15 +6,31 @@ import { FXA_SIGNIN_URL, KUMA_HOST } from "../../../env";
 import "./index.scss";
 import { useGleanClick } from "../../../telemetry/glean-context";
 
-export default function SignInLink({
+export default function LogInLink({
   gleanContext,
   cta = "Log in",
 }: {
   gleanContext?: string;
   cta?: string;
 }) {
-  const locale = useLocale();
   const gleanClick = useGleanClick();
+
+  const href = useLoginUrl();
+
+  return (
+    <a
+      href={href}
+      className="login-link"
+      rel="nofollow"
+      onClick={() => gleanContext && gleanClick(gleanContext)}
+    >
+      {cta}
+    </a>
+  );
+}
+
+export function useLoginUrl() {
+  const locale = useLocale();
   const { pathname, search } = useLocation();
   const sp = new URLSearchParams();
 
@@ -32,14 +48,5 @@ export default function SignInLink({
     prefix = `http://${KUMA_HOST}`;
   }
 
-  return (
-    <a
-      href={`${prefix}${FXA_SIGNIN_URL}?${sp.toString()}`}
-      className="signin-link"
-      rel="nofollow"
-      onClick={() => gleanContext && gleanClick(gleanContext)}
-    >
-      {cta}
-    </a>
-  );
+  return `${prefix}${FXA_SIGNIN_URL}?${sp.toString()}`;
 }
diff --git a/client/src/ui/atoms/subscribe-link/index.scss b/client/src/ui/atoms/signup-link/index.scss
similarity index 100%
rename from client/src/ui/atoms/subscribe-link/index.scss
rename to client/src/ui/atoms/signup-link/index.scss
diff --git a/client/src/ui/atoms/subscribe-link/index.tsx b/client/src/ui/atoms/signup-link/index.tsx
similarity index 52%
rename from client/src/ui/atoms/subscribe-link/index.tsx
rename to client/src/ui/atoms/signup-link/index.tsx
index a51249710446..c02374dbbe4c 100644
--- a/client/src/ui/atoms/subscribe-link/index.tsx
+++ b/client/src/ui/atoms/signup-link/index.tsx
@@ -2,17 +2,23 @@ import "./index.scss";
 import { Button } from "../button";
 import { usePlusUrl } from "../../../plus/utils";
 import { useGleanClick } from "../../../telemetry/glean-context";
+import { useLoginUrl } from "../login-link";
 
-export const SubscribeLink = ({ toPlans = false, gleanContext = "" }) => {
-  const href = usePlusUrl();
+export const SignUpLink = ({ toPlans = false, gleanContext = "" }) => {
   const gleanClick = useGleanClick();
+  const plansUrl = usePlusUrl() + "#subscribe";
+  const loginUrl = useLoginUrl();
+
+  const href = toPlans ? plansUrl : loginUrl;
+  const label = toPlans ? "Upgrade Now" : "Sign up for free";
+
   return (
     <Button
-      href={href + (toPlans ? "#subscribe" : "")}
+      href={href}
       extraClasses="mdn-plus-subscribe-link"
       onClickHandler={() => gleanContext && gleanClick(gleanContext)}
     >
-      {toPlans ? "Upgrade Now" : "Get MDN Plus"}
+      {label}
     </Button>
   );
 };
diff --git a/client/src/ui/molecules/auth-container/index.scss b/client/src/ui/molecules/auth-container/index.scss
index 0fd61cd6549a..9b91bdb0aeb5 100644
--- a/client/src/ui/molecules/auth-container/index.scss
+++ b/client/src/ui/molecules/auth-container/index.scss
@@ -3,6 +3,7 @@
 .auth-container {
   display: flex;
   flex-flow: column-reverse;
+  flex-shrink: 0;
   font-family: var(--font-body);
   font-size: var(--type-smaller-font-size);
   font-weight: var(--font-body-strong-weight);
@@ -12,6 +13,10 @@
   padding: 0;
   text-align: center;
 
+  li {
+    flex-shrink: 0;
+  }
+
   @media screen and (min-width: $screen-lg) {
     align-items: center;
     flex-flow: row;
diff --git a/client/src/ui/molecules/auth-container/index.tsx b/client/src/ui/molecules/auth-container/index.tsx
index d575f6a41265..79643733a9e8 100644
--- a/client/src/ui/molecules/auth-container/index.tsx
+++ b/client/src/ui/molecules/auth-container/index.tsx
@@ -1,19 +1,16 @@
-import SignInLink from "../../atoms/signin-link";
-import { SubscribeLink } from "../../atoms/subscribe-link";
+import LogInLink from "../../atoms/login-link";
+import { SignUpLink } from "../../atoms/signup-link";
 
 import "./index.scss";
 
-export const AuthContainer = ({
-  signInGleanContext,
-  subscribeGleanContext,
-}) => {
+export const AuthContainer = ({ logInGleanContext, signUpGleanContext }) => {
   return (
     <ul className="auth-container">
       <li>
-        <SignInLink gleanContext={signInGleanContext} />
+        <LogInLink gleanContext={logInGleanContext} />
       </li>
       <li>
-        <SubscribeLink gleanContext={subscribeGleanContext} />
+        <SignUpLink gleanContext={signUpGleanContext} />
       </li>
     </ul>
   );
diff --git a/client/src/ui/molecules/main-menu/index.scss b/client/src/ui/molecules/main-menu/index.scss
index ec048b4103e6..8bf8b737b8b0 100644
--- a/client/src/ui/molecules/main-menu/index.scss
+++ b/client/src/ui/molecules/main-menu/index.scss
@@ -4,7 +4,6 @@
 
 ul.main-menu {
   box-sizing: border-box;
-  grid-gap: 1rem;
   list-style: none;
   margin-top: 1rem;
   padding: 0;
@@ -35,6 +34,14 @@ ul.main-menu {
     .menu-toggle {
       display: none;
     }
+
+    .top-level-entry-container {
+      flex-shrink: 0;
+    }
+  }
+
+  @media screen and (min-width: ($screen-xl)) {
+    gap: 1rem;
   }
 }
 
diff --git a/client/src/ui/organisms/top-navigation-main/index.tsx b/client/src/ui/organisms/top-navigation-main/index.tsx
index 9cfdb4bc906e..381968077553 100644
--- a/client/src/ui/organisms/top-navigation-main/index.tsx
+++ b/client/src/ui/organisms/top-navigation-main/index.tsx
@@ -10,10 +10,7 @@ import "./index.scss";
 import { PLUS_IS_ENABLED } from "../../../env";
 import { ThemeSwitcher } from "../../molecules/theme-switcher";
 import Maintenance from "../../molecules/maintenance";
-import {
-  TOP_NAV_ALREADY_SUBSCRIBER,
-  TOP_NAV_GET_MDN_PLUS,
-} from "../../../telemetry/constants";
+import { TOP_NAV_LOGIN, TOP_NAV_SIGNUP } from "../../../telemetry/constants";
 
 export const TopNavigationMain = ({ isOpenOnMobile }) => {
   const userData = useUserData();
@@ -32,8 +29,8 @@ export const TopNavigationMain = ({ isOpenOnMobile }) => {
         userData.isAuthenticated && <UserMenu />) ||
         (userData?.maintenance && <Maintenance />) || (
           <AuthContainer
-            signInGleanContext={TOP_NAV_ALREADY_SUBSCRIBER}
-            subscribeGleanContext={TOP_NAV_GET_MDN_PLUS}
+            logInGleanContext={TOP_NAV_LOGIN}
+            signUpGleanContext={TOP_NAV_SIGNUP}
           />
         )}
     </div>