diff --git a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
index 37b70847ca..cd8d4bdb1f 100644
--- a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
+++ b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue
@@ -77,14 +77,17 @@ watch(rootEl, () => {
 
 <style lang="scss" module>
 .root {
+	position: relative;
+	z-index: 1;
 	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 	grid-gap: 8px;
 	width: 100%;
 	box-sizing: border-box;
-	background: var(--MI_THEME-bg);
-	border-top: solid 0.5px var(--MI_THEME-divider);
+	background: var(--MI_THEME-navBg);
+	color: var(--MI_THEME-navFg);
+	box-shadow: 0px 0px 6px 6px #0000000f;
 }
 
 .item {
@@ -109,19 +112,17 @@ watch(rootEl, () => {
 	padding: 0;
 	aspect-ratio: 1;
 	width: 100%;
-	max-width: 50px;
+	max-width: 45px;
 	margin: auto;
 	align-content: center;
 	border-radius: 100%;
-	background: var(--MI_THEME-panel);
-	color: var(--MI_THEME-fg);
 
 	&:hover {
 		background: var(--MI_THEME-panelHighlight);
 	}
 
 	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+		background: var(--MI_THEME-panelHighlight);
 	}
 }