diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 049f9a087b..be97e91269 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -151,17 +151,17 @@ export default {
 	z-index: 1800;
 	height: calc(100vh - #{$header-height});
 	box-sizing: border-box;
-	background-color: var(--color-main-background);
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	border-right: 1px solid var(--color-border);
 	display: flex;
 	flex-direction: column;
 	flex-grow: 0;
 	flex-shrink: 0;
-
+	background-color:  var(--color-main-background-blur, var(--color-main-background));
+	-webkit-backdrop-filter: var(--filter-background-blur, none);
+	backdrop-filter: var(--filter-background-blur, none);
 	&--close {
 		margin-left: - $navigation-width;
 		transform: translateX(-100%);
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
index 9fc3eef471..5866939df5 100644
--- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
+++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -90,7 +90,6 @@ export default {
 
 	&__header {
 		box-sizing: border-box;
-		background-color: var(--color-main-background);
 
 		.settings-button {
 			display: flex;
diff --git a/styleguide/assets/variables.css b/styleguide/assets/variables.css
index 6a8fc5aab8..19f08f8186 100644
--- a/styleguide/assets/variables.css
+++ b/styleguide/assets/variables.css
@@ -37,6 +37,8 @@
 	--color-box-shadow: rgba(77, 77, 77, 0.5);
 	--color-border: #ededed;
 	--color-border-dark: #dbdbdb;
+	--color-main-background-blur: rgba(255,255,255,0.8);
+	--background-blur: blur(25px);
 	--border-radius: 3px;
 	--border-radius-large: 10px;
 	--border-radius-pill: 100px;