--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -464,16 +464,17 @@ this.PanelMultiView = class {
 
         // Set the transition style and listen for its end to clean up and
         // make sure the box sizing becomes dynamic again.
         // Somehow, putting these properties in PanelUI.css doesn't work for
         // newly shown nodes in a XUL parent node.
         nodeToAnimate.style.transition = "transform ease-" + (reverse ? "in" : "out") +
           " var(--panelui-subview-transition-duration)";
         nodeToAnimate.style.willChange = "transform";
+        nodeToAnimate.style.borderInlineStart = "1px solid var(--panel-separator-color)";
 
         // Wait until after the first paint to ensure setting 'current=true'
         // has taken full effect; once both views are visible, we want to
         // correctly measure rects using `dwu.getBoundsWithoutFlushing`.
         window.addEventListener("MozAfterPaint", () => {
           let viewRect = viewNode.__lastKnownBoundingRect;
           if (!viewRect) {
             viewRect = dwu.getBoundsWithoutFlushing(viewNode);
@@ -521,16 +522,17 @@ this.PanelMultiView = class {
               onTransitionEnd();
               this._transitioning = false;
 
               // Take another breather, just like before, to wait for the 'current'
               // attribute removal to take effect. This prevents a flicker.
               // The cleanup we do doesn't affect the display anymore, so we're not
               // too fussed about the timing here.
               window.addEventListener("MozAfterPaint", () => {
+                nodeToAnimate.style.removeProperty("border-inline-start");
                 nodeToAnimate.style.removeProperty("transition");
                 nodeToAnimate.style.removeProperty("transform");
                 nodeToAnimate.style.removeProperty("width");
 
                 if (!reverse)
                   viewNode.style.removeProperty("margin-inline-start");
                 if (aAnchor)
                   aAnchor.removeAttribute("open");

--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -91,8 +91,18 @@ menu.subviewbutton > .menu-right:-moz-lo
   /* These need !important to override menu.css */
   margin-top: 1px !important;
   margin-bottom: 2px !important;
 }
 
 .subviewradio > .radio-label-box {
   -moz-appearance: none;
 }
+
+/* START photon adjustments */
+
+photonpanelmultiview .subviewbutton > .toolbarbutton-text,
+photonpanelmultiview .subviewbutton > .toolbarbutton-icon {
+  padding: 0;
+  margin: 0;
+}
+
+/* END photon adjustments */

--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -17,16 +17,25 @@
 .subviewbutton > .toolbarbutton-text {
   margin: 2px 0 !important; /* !important for overriding toolbarbutton.css */
 }
 
 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .bookmark-item) > .toolbarbutton-text {
   margin: 2px 6px !important; /* !important for overriding toolbarbutton.css */
 }
 
+/* START photon adjustments */
+
+photonpanelmultiview .subviewbutton > .toolbarbutton-text,
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .bookmark-item) > .toolbarbutton-text {
+  margin: 0 !important;  /* !important for overriding the rules above. */
+}
+
+/* END photon adjustments */
+
 .restoreallitem > .toolbarbutton-icon {
   display: none;
 }
 
 .subviewbutton {
   padding-inline-start: 18px;
 }
 

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -320,16 +320,22 @@ panelview:not([mainview]) .toolbarbutton
 }
 
 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 4px 0;
 }
 
 /* START photonpanelview adjustments */
 
+#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+}
+
 photonpanelmultiview panelview {
   background: var(--arrowpanel-background);
 }
 
 photonpanelmultiview .panel-subview-body {
   /*XXXmikedeboer this flex is unnecessary, so I unset it for our case. It might
                   break other panels, though, so I refrain from removing it above. */
   -moz-box-flex: unset;
@@ -1075,17 +1081,17 @@ panelview .toolbarbutton-1,
   -moz-box-flex: 0;
   text-align: center;
 }
 
 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
   margin: 0;
 }
 
-.subviewbutton.panel-subview-footer > .toolbarbutton-text {
+panelview:not([mainView]) .subviewbutton.panel-subview-footer > .toolbarbutton-text {
   text-align: center;
   padding: 0;
 }
 
 .subviewbutton.panel-subview-footer > .menu-accel-container {
   padding-inline-start: 6px;
 }
 
@@ -1101,31 +1107,67 @@ panelview .toolbarbutton-1,
 }
 
 .PanelUI-subView .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
   color: GrayText;
 }
 
-.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
+.PanelUI-subView .subviewbutton-nav::after {
+  -moz-context-properties: fill;
+  content: url(chrome://browser/skin/menu-icons/back-small.svg);
+  fill: GrayText;
+  float: right;
+}
+
+.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(ltr)::after {
+  transform: scaleX(-1);
+}
+
+.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after,
+.PanelUI-subView .subviewbutton-nav::after {
   margin-inline-start: 10px;
 }
 
 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 #PanelUI-characterEncodingView-autodetect-label {
   font: menu;
   color: inherit;
 }
 
 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
   margin-left: 4px;
   margin-right: 4px;
 }
 
+/* START photon adjustments */
+
+photonpanelmultiview .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
+  border-radius: 0;
+  border-width: 0;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 4px 12px;
+}
+
+photonpanelmultiview .subviewbutton-iconic:not(.subviewbutton-back) > .toolbarbutton-text {
+  padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
+}
+
+photonpanelmultiview .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+  padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined above. */
+}
+
+photonpanelmultiview .cui-widget-panelview .panel-subview-footer {
+  font-size: 1.2rem;
+}
+
+/* END photon adjustments */
+
 panelview .toolbarbutton-1,
 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
 .widget-overflow-list > toolbaritem:not(:first-child) {
   margin-top: 6px;
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
 toolbarbutton.subviewbutton@buttonStateHover@,
@@ -1809,8 +1851,50 @@ menuitem[checked="true"].subviewbutton >
   #PanelUI-panic-actionlist-newwindow {
     background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96);
   }
 }
 
 .subviewbutton-iconic > .toolbarbutton-text {
   padding-inline-start: 5px;
 }
+
+/* START photon adjustments */
+
+.panel-header {
+  align-items: center;
+  display: flex;
+  flex: 1 auto;
+  height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
+  padding: 4px;
+}
+
+.panel-header > label {
+  flex: auto;
+  font-size: 13px;
+  font-weight: 500;
+  margin: 0;
+  /* Add the size of the back button to center properly. */
+  margin-inline-end: 32px;
+  text-align: center;
+}
+
+photonpanelmultiview .cui-widget-panelview .panel-header > .subviewbutton-back {
+  -moz-context-properties: fill;
+  fill: var(--arrowpanel-color);
+  list-style-image: url(chrome://browser/skin/menu-icons/back.svg);
+  padding: 8px;
+}
+
+.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.panel-header > .subviewbutton-back > .toolbarbutton-text {
+  display: none;
+}
+
+photonpanelmultiview .PanelUI-subView toolbarseparator {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* END photon adjustments */

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -183,15 +183,17 @@
   skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
   skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
   skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
   skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
   skin/classic/browser/compacttheme/urlbar-history-dropmarker.svg (../shared/compacttheme/urlbar-history-dropmarker.svg)
   skin/classic/browser/urlbar-star.svg                         (../shared/urlbar-star.svg)
   skin/classic/browser/urlbar-tab.svg                          (../shared/urlbar-tab.svg)
   skin/classic/browser/page-action.svg                         (../shared/page-action.svg)
+  skin/classic/browser/menu-icons/back.svg                     (../shared/menu-icons/back.svg)
+  skin/classic/browser/menu-icons/back-small.svg               (../shared/menu-icons/back-small.svg)
   skin/classic/browser/menu-icons/addons.svg                   (../shared/menu-icons/addons.svg)
   skin/classic/browser/menu-icons/customize.svg                (../shared/menu-icons/customize.svg)
   skin/classic/browser/menu-icons/library.svg                  (../shared/menu-icons/library.svg)
   skin/classic/browser/menu-icons/new-window.svg               (../shared/menu-icons/new-window.svg)
   skin/classic/browser/menu-icons/print.svg                    (../shared/menu-icons/print.svg)
   skin/classic/browser/menu-icons/private-window.svg           (../shared/menu-icons/private-window.svg)
   skin/classic/browser/menu-icons/settings.svg                 (../shared/menu-icons/settings.svg)

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/menu-icons/back-small.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+  <path fill="context-fill" d="M 4.748 6 L 7.966 2.781 C 8.367 2.365 8.169 1.672 7.609 1.532 C 7.358 1.47 7.092 1.54 6.906 1.72 L 3.158 5.47 C 2.865 5.762 2.865 6.237 3.158 6.53 L 6.906 10.279 C 7.321 10.68 8.015 10.481 8.155 9.921 C 8.217 9.67 8.146 9.405 7.966 9.219 Z"/>
+</svg>

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/menu-icons/back.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"/>
+</svg>

--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -140,8 +140,17 @@ menu.subviewbutton > .menu-right:-moz-lo
   #edit-controls@inAnyPanel@,
   #zoom-controls@inAnyPanel@,
   #edit-controls@inAnyPanel@ > toolbarbutton,
   #zoom-controls@inAnyPanel@ > toolbarbutton {
     border-radius: 0;
   }
 }
 
+/* START photon adjustments */
+
+photonpanelmultiview .subviewbutton > .toolbarbutton-text,
+photonpanelmultiview .subviewbutton > .toolbarbutton-icon {
+  padding: 0;
+  margin: 0;
+}
+
+/* END photon adjustments */