diff --git a/webApp/src/main/scala/wust/webApp/views/Components.scala b/webApp/src/main/scala/wust/webApp/views/Components.scala
index 2a6d8589f..1a78812df 100644
--- a/webApp/src/main/scala/wust/webApp/views/Components.scala
+++ b/webApp/src/main/scala/wust/webApp/views/Components.scala
@@ -1002,6 +1002,7 @@ object Components {
       text,
       border := s"1px solid $borderColor",
       color := fgColor,
+      backgroundColor := "white",
       borderRadius := "3px",
       padding := "0px 5px",
       fontWeight.bold,
diff --git a/webApp/src/main/scala/wust/webApp/views/LeftSidebar.scala b/webApp/src/main/scala/wust/webApp/views/LeftSidebar.scala
index 731216a45..aea9ba99e 100644
--- a/webApp/src/main/scala/wust/webApp/views/LeftSidebar.scala
+++ b/webApp/src/main/scala/wust/webApp/views/LeftSidebar.scala
@@ -42,10 +42,26 @@ object LeftSidebar {
         GenericSidebar.Config(
           mainModifier = VDomModifier(
             registerDragContainer( DragContainer.Sidebar),
-            drag(target = DragItem.Sidebar),
+            drag(target = DragItem.Sidebar)
           ),
           openModifier = VDomModifier(
-            header.apply(Styles.flexStatic),
+            div(
+              Rx{
+                val page = GlobalState.page()
+                page.parentId.fold(
+                  header.apply(Styles.flexStatic):VDomModifier
+                  )(pageId =>
+                    VDomModifier(
+                      backgroundColor := PageStyle.ofNode(pageId).pageBgColor,
+                      color := "white",
+                      header.apply(Styles.flexStatic),
+                      ViewSwitcher(pageId).foreach { view =>
+                        GlobalState.leftSidebarOpen.onNext(false)
+                      }
+                    )
+                  )
+              }
+            ),
             channels( toplevelChannels),
             invitations( invites).apply(Styles.flexStatic),
             newProjectButton().apply(
@@ -59,7 +75,6 @@ object LeftSidebar {
           ),
           overlayOpenModifier = VDomModifier(
             authStatus,
-            Components.reloadButton(fontSize.small, margin := "15px auto 0px auto"),
             onClick(false) --> GlobalState.leftSidebarOpen
           ),
           expandedOpenModifier = VDomModifier.empty,
@@ -103,7 +118,7 @@ object LeftSidebar {
       WoostLogoComponents.woostIcon,
       fontSize := "28px",
       color := Colors.woost,
-      marginRight := "3px",
+      marginRight := "3px"
     ),
     div("Woost", marginRight := "5px"),
     onClick(UrlConfig.default) --> GlobalState.urlConfig,
@@ -122,8 +137,8 @@ object LeftSidebar {
         hamburger,
         banner,
         Components.betaSign.apply(fontSize := "12px"),
-        syncStatus(ctx)(fontSize := "20px", marginLeft.auto, marginRight := "10px"),
-      ),
+        syncStatus(ctx)(fontSize := "20px", marginLeft.auto, marginRight := "10px")
+      )
     )
   }
 
@@ -269,9 +284,9 @@ object LeftSidebar {
           VDomModifier(
             VDomModifier.ifTrue(selected())(
               color := Colors.sidebarBg,
-              backgroundColor := BaseColors.pageBg.copy(h = NodeColor.hue(nodeId)).toHex,
+              backgroundColor := BaseColors.pageBg.copy(h = NodeColor.hue(nodeId)).toHex
             ),
-          node().map(node => renderProject(node, renderNode = node => renderAsOneLineText(node).apply(cls := "channel-name"), withIcon = true, openFolder = selected())),
+          node().map(node => renderProject(node, renderNode = node => renderAsOneLineText(node).apply(cls := "channel-name"), withIcon = true, openFolder = selected()))
           )
         },
 
@@ -281,7 +296,7 @@ object LeftSidebar {
         DragComponents.drag(DragItem.Channel(nodeId, traverseState.tail.headOption)),
         permissionLevel.map(Permission.permissionIndicatorIfPublic(_, VDomModifier(fontSize := "0.7em", marginLeft.auto, marginRight := "5px"))),
         channelModifier
-      ),
+      )
 
     )
   }
@@ -321,7 +336,7 @@ object LeftSidebar {
         VDomModifier(
           toplevelChannels().map(nodeId => channelList(TraverseState(nodeId), userId, ChannelTreeData.childrenChannels(_, _, userId)))
         )
-      },
+      }
 
     )
   })
@@ -370,7 +385,7 @@ object LeftSidebar {
               )
             ).apply(
               paddingBottom := "1px",
-              paddingTop := "1px",
+              paddingTop := "1px"
             )
           }
         )
@@ -404,7 +419,7 @@ object LeftSidebar {
             // for each indent, steal padding on left and right
             // and reduce the width, so that the icon keeps its size
             width := s"${size - (sanitizedDepth * indentFactor)}px",
-            padding := s"${defaultPadding}px ${defaultPadding - (sanitizedDepth * indentFactor / 2.0)}px",
+            padding := s"${defaultPadding}px ${defaultPadding - (sanitizedDepth * indentFactor / 2.0)}px"
           )
         }
       )
@@ -444,7 +459,7 @@ object LeftSidebar {
         VDomModifier(
           toplevelChannels().map(nodeId => channelList(TraverseState(nodeId), userId, ChannelTreeData.childrenChannels(_, _, userId)))
         )
-      },
+      }
     )
   })
   private def channelIcon(node: Node, isSelected: Rx[Boolean], size: Int)(implicit ctx: Ctx.Owner): VNode = {
diff --git a/webApp/src/main/scala/wust/webApp/views/PageHeader.scala b/webApp/src/main/scala/wust/webApp/views/PageHeader.scala
index c2b448e90..b8c1bc8a0 100644
--- a/webApp/src/main/scala/wust/webApp/views/PageHeader.scala
+++ b/webApp/src/main/scala/wust/webApp/views/PageHeader.scala
@@ -5,7 +5,7 @@ import outwatch.dom._
 import outwatch.dom.dsl._
 import rx._
 import wust.webUtil.outwatchHelpers._
-import wust.webUtil.{Ownable, UI}
+import wust.webUtil.{ Ownable, UI }
 import wust.css.Styles
 import wust.ids._
 import wust.sdk.Colors
@@ -14,7 +14,7 @@ import wust.webApp._
 import wust.webApp.dragdrop.DragItem
 import wust.webApp.state._
 import wust.webApp.views.Components._
-import wust.webApp.views.DragComponents.{drag, registerDragContainer}
+import wust.webApp.views.DragComponents.{ drag, registerDragContainer }
 
 import scala.collection.breakOut
 import scala.scalajs.js
@@ -27,7 +27,7 @@ object PageHeader {
       VDomModifier(
         cls := "pageheader",
 
-        GlobalState.page.map(_.parentId.map(pageRow( _, viewRender))),
+        GlobalState.page.map(_.parentId.map(pageRow(_, viewRender))),
       )
     })
   }
@@ -42,12 +42,12 @@ object PageHeader {
     val channelTitle = Rx {
       val node = pageNode()
       div(
-        Components.renderNodeCardMod(node, Components.renderAsOneLineText( _), projectWithIcon = false),
+        Components.renderNodeCardMod(node, Components.renderAsOneLineText(_), projectWithIcon = false),
         backgroundColor := pageStyle.pageBgColor,
 
         cls := "pageheader-channeltitle",
         Components.sidebarNodeFocusMod(GlobalState.rightSidebarNode, node.id),
-        Components.showHoveredNode( node.id),
+        Components.showHoveredNode(node.id),
         registerDragContainer,
         DragItem.fromNodeRole(node.id, node.role).map(DragComponents.drag(_)),
 
@@ -64,7 +64,7 @@ object PageHeader {
     }
 
     val channelNotification = UnreadComponents
-      .notificationsButton( pageNodeId, modifiers = VDomModifier(marginLeft := "5px"))
+      .notificationsButton(pageNodeId, modifiers = VDomModifier(marginLeft := "5px"))
       .foreach(view => GlobalState.urlConfig.update(_.focus(view)))
 
     val hasBigScreen = Rx {
@@ -86,8 +86,8 @@ object PageHeader {
       ViewFilter.filterBySearchInputWithIcon.apply(marginLeft.auto),
       MovableElement.withToggleSwitch(
         Seq(
-          FilterWindow.movableWindow( MovableElement.RightPosition(100, 200)),
-          TagList.movableWindow( viewRender, MovableElement.RightPosition(100, 400)),
+          FilterWindow.movableWindow(MovableElement.RightPosition(100, 200)),
+          TagList.movableWindow(viewRender, MovableElement.RightPosition(100, 400)),
         ),
         enabled = GlobalState.urlConfig.map(c => c.pageChange.page.parentId.isDefined && c.view.forall(_.isContent)),
         resizeEvent = GlobalState.rightSidebarNode.toTailObservable.map(_ => ()),
@@ -108,12 +108,12 @@ object PageHeader {
         Styles.flex,
         alignItems.center,
 
-        breadCrumbs,
         Rx {
           VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
+            breadCrumbs,
             AnnouncekitWidget.widget.apply(marginLeft.auto, Styles.flexStatic),
             FeedbackForm(ctx)(Styles.flexStatic),
-            AuthControls.authStatus( buttonStyleLoggedOut = "inverted", buttonStyleLoggedIn = "inverted").map(_(Styles.flexStatic))
+            AuthControls.authStatus(buttonStyleLoggedOut = "inverted", buttonStyleLoggedIn = "inverted").map(_(Styles.flexStatic))
           )
         },
       ),
@@ -124,8 +124,13 @@ object PageHeader {
         alignItems.center,
         flexWrap := "wrap-reverse",
 
-        ViewSwitcher( pageNodeId).mapResult(_.apply(Styles.flexStatic, alignSelf.flexStart, marginRight := "5px")) --> Observer.empty,
+        Rx {
+          VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
+            ViewSwitcher(pageNodeId).mapResult(_.apply(Styles.flexStatic, alignSelf.flexStart)) --> Observer.empty
+          )
+        },
         div(
+          marginLeft := "5px",
           Styles.flex,
           justifyContent.spaceBetween,
           flexGrow := 1,
@@ -140,15 +145,17 @@ object PageHeader {
             channelNotification,
             marginBottom := "2px", // else nodecards in title overlap
           ),
-          Rx{ VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
-            filterControls
-          )},
+          Rx{
+            VDomModifier.ifTrue(GlobalState.screenSize() != ScreenSize.Small)(
+              filterControls
+            )
+          },
           div(
             Styles.flex,
             alignItems.center,
             channelMembersList,
 
-            menuItems( pageNodeId)
+            menuItems(pageNodeId)
           )
         ),
       )
@@ -160,13 +167,13 @@ object PageHeader {
       //TODO we should use the permission system here and/or share code with the settings menu function
       channelId == GlobalState.userId()
     }
-    val isBookmarked = PageSettingsMenu.nodeIsBookmarked( channelId)
+    val isBookmarked = PageSettingsMenu.nodeIsBookmarked(channelId)
 
     val buttonStyle = VDomModifier(Styles.flexStatic, cursor.pointer)
 
     val pinButton = Rx {
       val hideBookmarkButton = isSpecialNode() || isBookmarked()
-      hideBookmarkButton.ifFalse[VDomModifier](PageSettingsMenu.addToChannelsButton( channelId).apply(
+      hideBookmarkButton.ifFalse[VDomModifier](PageSettingsMenu.addToChannelsButton(channelId).apply(
         cls := "mini",
         buttonStyle,
         marginRight := "5px"
@@ -175,7 +182,7 @@ object PageHeader {
 
     VDomModifier(
       pinButton,
-      PageSettingsMenu( channelId).apply(buttonStyle, fontSize := "20px"),
+      PageSettingsMenu(channelId).apply(buttonStyle, fontSize := "20px"),
     )
   }