--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -951,16 +951,27 @@
     </panelview>
 
     <!-- This is a placeholder app menu which should be replaced with the "real"
          Proton app menu before the Proton pref starts getting enabled. -->
     <panelview id="appMenu-protonMainView" class="PanelUI-subView"
                descriptionheightworkaround="true"
                lockpanelvertical="true">
       <vbox class="panel-subview-body">
+        <vbox id="appMenu-proton-addon-banners"/>
+        <toolbarbutton id="appMenu-proton-update-banner" class="panel-banner-item"
+                       data-l10n-id="appmenuitem-update-banner"
+                       data-l10n-attrs="label-update-downloading"
+                       label-update-available="&updateAvailable.panelUI.label;"
+                       label-update-manual="&updateManual.panelUI.label;"
+                       label-update-unsupported="&updateUnsupported.panelUI.label;"
+                       label-update-restart="&updateRestart.panelUI.label2;"
+                       oncommand="PanelUI._onBannerItemSelected(event)"
+                       wrap="true"
+                       hidden="true"/>
         <toolbarbutton id="appMenu-new-tab-button2"
                        class="subviewbutton subviewbutton-iconic"
                        label="&tabCmd.label;"
                        key="key_newNavigatorTab"
                        command="cmd_newNavigatorTab"/>
         <toolbarbutton id="appMenu-new-window-button2"
                        class="subviewbutton subviewbutton-iconic"
                        data-l10n-id="appmenuitem-new-window"

--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -857,19 +857,22 @@ const PanelUI = {
           : "appMenu-mainView"
       );
     }
     return this._mainView;
   },
 
   get addonNotificationContainer() {
     if (!this._addonNotificationContainer) {
+      let bannerID = this.protonAppMenuEnabled
+        ? "appMenu-proton-addon-banners"
+        : "appMenu-addon-banners";
       this._addonNotificationContainer = PanelMultiView.getViewNode(
         document,
-        "appMenu-addon-banners"
+        bannerID
       );
     }
 
     return this._addonNotificationContainer;
   },
 
   _formatDescriptionMessage(n) {
     let text = {};

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -30,35 +30,72 @@
   --arrowpanel-menuitem-margin: 0;
   --arrowpanel-menuitem-padding: 4px 12px;
   --arrowpanel-menuitem-border-radius: unset;
 
   --panelview-toolbarbutton-hover-bgcolor: var(--arrowpanel-dimmed);
   --panelview-toolbarbutton-hover-color: inherit;
   --panelview-toolbarbutton-active-bgcolor: var(--arrowpanel-dimmed-further);
   --panelview-toolbarbutton-active-color: inherit;
+  --panel-banner-item-color: black;
+  --panel-banner-item-background-color: hsla(96,65%,75%,.5);
+  --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
+  --panel-banner-item-active-bgcolor: hsl(96,65%,75%);
+  --panel-banner-item-update-supported-bgcolor: #74BF43;
+  --panel-banner-item-update-unsupported-bgcolor: #FFE900;
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-banner-item-color: @appmenuWarningColorBrightText@;
+  --panel-banner-item-background-color: rgba(48,230,11,.1);
+  --panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
+  --panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
 }
 
 @supports -moz-bool-pref("browser.proton.appmenu.enabled") {
 :root {
   --panelview-toolbarbutton-hover-bgcolor: #0250BB;
   --panelview-toolbarbutton-hover-color: #FFFFFF;
   --panelview-toolbarbutton-active-bgcolor: #053E94;
   --panelview-toolbarbutton-active-color: #FFFFFF;
-
+  --panel-banner-item-color: rgba(8,64,63,1);
+  --panel-banner-item-background-color: rgba(209,255,238,1);
+
+  /**
+   * --panel-banner-item-hover-bgcolor, --panel-banner-item-active-bgcolor
+   * and --panel-banner-item-update-unsupported-bgcolor are temporary
+   * colours until the right ones are determined, which is tracked by
+   * bug 1692040.
+   */
+  --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
+  --panel-banner-item-active-bgcolor: hsl(96,65%,75%);
+  --panel-banner-item-update-unsupported-bgcolor: #FFE900;
+
+  --panel-banner-item-update-supported-bgcolor: rgba(0,135,135,1);
   --arrowpanel-menuitem-margin: 0 8px;
   --arrowpanel-menuitem-padding: 8px 12px;
   --arrowpanel-menuitem-border-radius: 4px;
 }
 
 :root[lwt-popup-brighttext] {
   --panelview-toolbarbutton-hover-bgcolor: #00B4F5;
   --panelview-toolbarbutton-hover-color: #FFFFFF;
   --panelview-toolbarbutton-active-bgcolor: #008DEB;
   --panelview-toolbarbutton-active-color: #FFFFFF;
+
+  /**
+   * --panel-banner-item-color, --panel-banner-item-background-color,
+   * --panel-banner-item-hover-bgcolor and --panel-banner-item-active-bgcolor
+   * are temporary colours until the right ones are determined, which is
+   * tracked by bug 1692040.
+   */
+  --panel-banner-item-color: @appmenuWarningColorBrightText@;
+  --panel-banner-item-background-color: rgba(48,230,11,.1);
+  --panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
+  --panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
 }
 
 } /*** END proton ***/
 
 :root:not([uidensity=compact], [chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
   border-image: linear-gradient(
@@ -114,33 +151,50 @@
 #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
 }
 
 #PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: #FFE900 url(chrome://browser/skin/update-badge.svg) no-repeat center;
 }
 
+@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
+.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon {
+  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  border-radius: 50%;
+}
+
+.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon {
+  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  border-radius: 50%;
+}
+}
+
+@supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
 .panel-banner-item[notificationid="update-available"]::after,
 .panel-banner-item[notificationid="update-downloading"]::after,
 .panel-banner-item[notificationid="update-manual"]::after,
 .panel-banner-item[notificationid="update-other-instance"]::after,
 .panel-banner-item[notificationid="update-restart"]::after {
-  background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
 
 .panel-banner-item[notificationid="update-unsupported"]::after {
-  background: #FFE900 url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
-
 .panel-banner-item[notificationid^=update] {
   list-style-image: url(chrome://branding/content/icon16.png);
 }
+} /** END not Proton **/
 
 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
   background: url(chrome://browser/skin/warning.svg) center / contain no-repeat transparent;
   box-shadow: none;
   border-radius: 0;
   /* Use the included fallbacks defined in the SVG file instead of inheriting from .toolbarbutton-1. */
@@ -557,16 +611,17 @@ toolbarbutton[constrain-size="true"][cui
 .addon-banner-item:hover {
   background-color: @appmenuWarningBackgroundColorHover@;
 }
 
 .addon-banner-item:hover:active {
   background-color: @appmenuWarningBackgroundColorActive@;
 }
 
+.panel-banner-item > .toolbarbutton-icon,
 .addon-banner-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 .addon-banner-item::after {
   background: url(chrome://browser/skin/warning.svg) no-repeat center;
 }
@@ -586,16 +641,29 @@ toolbarbutton[constrain-size="true"][cui
   appearance: none;
   box-shadow: none;
   border: none;
   border-radius: 0;
   transition: background-color;
   -moz-box-orient: horizontal;
 }
 
+@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
+.addon-banner-item,
+.panel-banner-item {
+  margin: 8px;
+  padding: 8px;
+  min-height: unset;
+  border-radius: 4px;
+  -moz-box-align: start;
+}
+
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
 .panel-banner-item {
   border-block: 1px solid var(--panel-separator-color);
   padding-inline-start: 12px;
 }
 
 #appMenu-addon-banners:not(:empty) + .panel-banner-item {
   /* Overlap the .addon-banner-item border so there's one border. */
   margin-top: -1px;
@@ -604,24 +672,21 @@ toolbarbutton[constrain-size="true"][cui
 #appMenu-addon-banners > .addon-banner-item {
   padding-inline-start: 12px;
 }
 
 .panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
-.panel-banner-item > .toolbarbutton-icon {
-  width: 16px;
-}
-
 #appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status,
 .panel-banner-item:not([hidden]) + #appMenu-fxa-status {
   margin-top: 6px;
 }
+} /** END not Proton **/
 
 /* FxAccount indicator bits. */
 
 #appMenu-fxa-label {
   -moz-context-properties: fill;
   fill: currentColor;
   list-style-image: var(--avatar-image-url);
 }
@@ -1034,41 +1099,27 @@ panelmultiview[mainViewId="PanelUI-fxa"]
   visibility: collapse;
 }
 
 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
   display: none;
 }
 
 .panel-banner-item {
-  color: black !important /* !important overrides the toolbarbutton:hover default style on Linux */;
-  background-color: hsla(96,65%,75%,.5);
+  color: var(--panel-banner-item-color) !important /* !important overrides the toolbarbutton:hover default style on Linux */;
+  background-color: var(--panel-banner-item-background-color);
 }
 
 .panel-banner-item:not([disabled]):focus,
 .panel-banner-item:not([disabled]):hover {
-  background-color: hsla(96,65%,75%,.8);
+  background-color: var(--panel-banner-item-hover-bgcolor);
 }
 
 .panel-banner-item:not([disabled]):hover:active {
-  background-color: hsl(96,65%,75%);
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]) {
-  background-color: rgba(48,230,11,.1);
-  color: @appmenuWarningColorBrightText@ !important;
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):focus,
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):hover {
-  background-color: rgba(48,230,11,.15);
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):active {
-  background-color: rgba(48,230,11,.2);
+  background-color: var(--panel-banner-item-active-bgcolor);
 }
 
 .panel-banner-item[notificationid="update-unsupported"] {
   background-color: @appmenuWarningBackgroundColor@;
 }
 
 .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):focus,
 .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):hover {
@@ -1764,19 +1815,21 @@ toolbarpaletteitem[place="menu-panel"] >
 }
 
 #panic-button-success-closebutton:hover:active {
   background-color: #d0d0d0;
   border-color: #aaa;
 }
 
 @media (min-resolution: 1.1dppx) {
-  .panel-banner-item[notificationid^=update] {
-    list-style-image: url(chrome://branding/content/icon32.png);
-  }
+  @supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
+    .panel-banner-item[notificationid^=update] {
+      list-style-image: url(chrome://branding/content/icon32.png);
+    }
+  } /** END not Proton **/
 
   #panic-button-success-icon,
   #PanelUI-panic-timeframe-icon {
     list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png);
   }
 
   #PanelUI-panic-actionlist-cookies {
     background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0);