diff --git a/src/client/app.vue b/src/client/app.vue
index 650ebbd2b4..99268e42bf 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -895,24 +895,25 @@ export default Vue.extend({
 					color: var(--navActive);
 				}
 
-				&:first-child {
+				&:first-child, &:last-child {
 					position: sticky;
 					z-index: 1;
-					top: 0;
 					padding-top: 8px;
 					padding-bottom: 8px;
+					background: var(--wboyroyc);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+				}
+
+				&:first-child {
+					top: 0;
 					margin-bottom: 16px;
-					background: var(--navBg);
 					border-bottom: solid 1px var(--divider);
 				}
 
 				&:last-child {
-					position: sticky;
 					bottom: 0;
-					padding-top: 8px;
-					padding-bottom: 8px;
 					margin-top: 16px;
-					background: var(--navBg);
 					border-top: solid 1px var(--divider);
 				}
 
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index bc7c0efc09..b059d53be2 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -65,5 +65,6 @@
 		aupeazdm: 'rgba(0, 0, 0, 0.3)',
 		jvhmlskx: 'rgba(255, 255, 255, 0.1)',
 		yakfpmhl: 'rgba(255, 255, 255, 0.15)',
+		wboyroyc: ':alpha<0.5<@navBg',
 	},
 }
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index adb1280420..dea1b335c1 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -65,5 +65,6 @@
 		aupeazdm: 'rgba(0, 0, 0, 0.1)',
 		jvhmlskx: 'rgba(0, 0, 0, 0.1)',
 		yakfpmhl: 'rgba(0, 0, 0, 0.15)',
+		wboyroyc: ':alpha<0.5<@navBg',
 	},
 }