diff --git a/packages/app/constants/routes.js b/packages/app/constants/routes.js
index 00998513..a556b965 100755
--- a/packages/app/constants/routes.js
+++ b/packages/app/constants/routes.js
@@ -16,8 +16,9 @@ export default [
     },
     {
         path: "/play/*",
-        centeredContent: true,
         public: true,
+        centeredContent: true,
+        mobileTopBarSpacer: true,
     },
     {
         path: "/post/*",
@@ -35,12 +36,13 @@ export default [
         public: true
     },
     {
-        path: "/settings/*",
+        path: "/settings",
         useLayout: "default",
         centeredContent: {
             mobile: true,
             desktop: false,
         },
+        mobileTopBarSpacer: true,
     },
     {
         path: "/security/*",
diff --git a/packages/app/src/components/Layout/topBar/index.less b/packages/app/src/components/Layout/topBar/index.less
index 5e44d3d0..80fac0ed 100644
--- a/packages/app/src/components/Layout/topBar/index.less
+++ b/packages/app/src/components/Layout/topBar/index.less
@@ -32,7 +32,8 @@
     justify-content: center;
     align-items: center;
 
-    background-color: var(--background-color-accent);
+    background-color: rgba(var(--background-color-accent-values), 0.8);
+    backdrop-filter: blur(2px);
 
     border-radius: 12px;
 
diff --git a/packages/app/src/components/PagePanels/index.jsx b/packages/app/src/components/PagePanels/index.jsx
index 953504f8..7783187a 100755
--- a/packages/app/src/components/PagePanels/index.jsx
+++ b/packages/app/src/components/PagePanels/index.jsx
@@ -69,10 +69,10 @@ export class PagePanelWithNavMenu extends React.Component {
     componentWillUnmount() {
         delete app.layout.page_panels
 
-        if (app.isMobile) {
-            app.layout.top_bar.shouldUseTopBarSpacer(false)
-        } else {
+        if (!app.isMobile) {
             app.layout.header.render(null)
+        } else {
+            app.layout.top_bar.renderDefault()
         }
     }
 
diff --git a/packages/app/src/layout.jsx b/packages/app/src/layout.jsx
index 80e7e3a4..ed6a9697 100755
--- a/packages/app/src/layout.jsx
+++ b/packages/app/src/layout.jsx
@@ -157,6 +157,16 @@ export default class Layout extends React.PureComponent {
 				root.classList.remove(classname)
 			}
 		},
+		rootContainerHasClassname: (classname) => {
+			const root = document.documentElement
+
+			if (!root) {
+				console.error("root not found")
+				return false
+			}
+
+			return root.classList.contains(classname)
+		},
 		scrollTo: (to) => {
 			const content_layout = document.getElementById("content_layout")
 
diff --git a/packages/app/src/pages/account/index.mobile.jsx b/packages/app/src/pages/account/index.mobile.jsx
index 8f72044a..8e6fbad1 100644
--- a/packages/app/src/pages/account/index.mobile.jsx
+++ b/packages/app/src/pages/account/index.mobile.jsx
@@ -59,8 +59,6 @@ export default class Account extends React.Component {
     }
 
     componentDidMount = async () => {
-        app.layout.toggleCenteredContent(true)
-
         this.loadUser()
     }
 
diff --git a/packages/app/src/pages/account/index.mobile.less b/packages/app/src/pages/account/index.mobile.less
index ca7c44d7..6de3eba2 100644
--- a/packages/app/src/pages/account/index.mobile.less
+++ b/packages/app/src/pages/account/index.mobile.less
@@ -6,7 +6,5 @@
 
     width: 100%;
 
-    padding-top: calc(@topBar_height + @top_bar_padding);
-
     gap: 20px;
 }
\ No newline at end of file
diff --git a/packages/app/src/router.jsx b/packages/app/src/router.jsx
index 086582bf..1ff281d2 100755
--- a/packages/app/src/router.jsx
+++ b/packages/app/src/router.jsx
@@ -124,6 +124,12 @@ function generatePageElementWrapper(route, element, bindProps) {
             }
         }
 
+        if (typeof routeDeclaration?.mobileTopBarSpacer === "boolean" && app.isMobile) {
+            app.layout.toggleTopBarSpacer(routeDeclaration.mobileTopBarSpacer)
+        } else {
+            app.layout.toggleTopBarSpacer(false)
+        }
+
         return React.createElement(
             loadable(element, {
                 fallback: React.createElement(bindProps.staticRenders?.PageLoad || DefaultLoadingRender),