diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index f703db5eb..4928806aa 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -138,7 +138,8 @@ onUnmounted(() => {
 	position: relative;
 	overflow: clip;
 	contain: content;
-
+	background: color-mix(in srgb, var(--panel) 65%, transparent);
+	backdrop-filter: blur(16px);
 	&.naked {
 		background: transparent !important;
 		box-shadow: none !important;
@@ -168,10 +169,11 @@ onUnmounted(() => {
 	top: var(--stickyTop, 0px);
 	left: 0;
 	color: var(--panelHeaderFg);
-	background: var(--panelHeaderBg);
 	border-bottom: solid 0.5px var(--panelHeaderDivider);
 	z-index: 2;
 	line-height: 1.4em;
+	background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
+	backdrop-filter: blur(16px);
 }
 
 .title {
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index 56d4d3369..2b786ebb7 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -23,14 +23,15 @@ const props = defineProps<{
 .root {
 	padding: 12px 14px;
 	font-size: 90%;
-	background: var(--infoBg);
+	background: color-mix(in srgb, var(--infoBg) 65%, transparent);
+	backdrop-filter: blur(16px);
 	color: var(--infoFg);
 	border-radius: var(--radius);
 	white-space: pre-wrap;
 	z-index: 1;
 
 	&.warn {
-		background: var(--infoWarnBg);
+		background: color-mix(in srgb, var(--infoWarnBg) 65%, transparent);
 		color: var(--infoWarnFg);
 	}
 }
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 89fd504dc..2fc50f4d4 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -56,7 +56,8 @@ defineExpose({
 .root {
 	&.noGap {
 		> .notes {
-			background: var(--panel);
+			background: color-mix(in srgb, var(--panel) 65%, transparent);
+			backdrop-filter: blur(16px);
 		}
 	}
 
@@ -65,7 +66,8 @@ defineExpose({
 			background: var(--bg);
 
 			.note {
-				background: var(--panel);
+				background: color-mix(in srgb, var(--panel) 65%, transparent);
+				backdrop-filter: blur(16px);
 				border-radius: var(--radius);
 			}
 		}
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 8ce15bec6..48a84a913 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -373,6 +373,7 @@ onUnmounted(() => {
 		left: -100%;
 		top: -100%;
 		right: -100%;
+		bottom: -100%;
 		background-attachment: fixed;
 	}
 
@@ -388,6 +389,8 @@ onUnmounted(() => {
 			> .main {
 				position: relative;
 				overflow: clip;
+				background: color-mix(in srgb, var(--panel) 65%, transparent);
+				backdrop-filter: blur(16px);
 
 				> .banner-container {
 					position: relative;
@@ -741,15 +744,17 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .tl {
-	background: var(--bg);
+	background-color: rgba(0, 0, 0, 0);
 	border-radius: var(--radius);
 	overflow: clip;
+	z-index: 0;
 }
 
 .tab {
 	margin: calc(var(--margin) / 2) 0;
 	padding: calc(var(--margin) / 2) 0;
-	background: var(--bg);
+	background: color-mix(in srgb, var(--bg) 65%, transparent);
+	backdrop-filter: blur(16px);
 	border-radius: 5px;
 	> button {
 		border-radius: 5px;