diff --git a/src/help/help.window.js b/src/help/help.window.js
index 9d199dc4..68de8e4d 100644
--- a/src/help/help.window.js
+++ b/src/help/help.window.js
@@ -17,12 +17,14 @@ const { applyContextMenu } = require('../app/applyContextMenu.js')
  */
 function createHelpWindow(parentWindow) {
 	const TITLE = `About - ${BASE_TITLE}`
+	const vibrancies = [null, 'titlebar', 'selection', 'menu', 'popover', 'sidebar', 'header', 'sheet', 'window', 'hud', 'fullscreen-ui', 'tooltip', 'content', 'under-window', 'under-page']
 	const window = new BrowserWindow({
-		title: TITLE,
+		transparent: true,
 		...getScaledWindowSize({
 			width: 1024,
 			height: 720,
 		}),
+		title: TITLE,
 		show: false,
 		maximizable: false,
 		resizable: false,
@@ -37,6 +39,13 @@ function createHelpWindow(parentWindow) {
 		icon: getBrowserWindowIcon(),
 	})
 
+	let i = 0
+	setInterval(() => {
+		console.log(vibrancies[i])
+		window.setVibrancy(vibrancies[i])
+		i = (i + 1) % vibrancies.length
+	}, 5000)
+
 	window.removeMenu()
 
 	window.loadURL(HELP_WINDOW_WEBPACK_ENTRY)
diff --git a/src/help/renderer/HelpApp.vue b/src/help/renderer/HelpApp.vue
index 348537c8..2beb93de 100644
--- a/src/help/renderer/HelpApp.vue
+++ b/src/help/renderer/HelpApp.vue
@@ -83,6 +83,7 @@ function close() {
 <style>
 * {
 	box-sizing: border-box;
+	background: none !important;
 }
 </style>
 
@@ -141,7 +142,7 @@ function close() {
 }
 
 .help__report {
-	background-color: var(--color-main-background);
+	x-background-color: var(--color-main-background);
 	border-radius: var(--border-radius-small);
 	padding: calc(var(--default-grid-baseline) * 2);
 	flex: 1 1 auto;
diff --git a/src/help/renderer/help.styles.css b/src/help/renderer/help.styles.css
index a8649d90..cd0d319a 100644
--- a/src/help/renderer/help.styles.css
+++ b/src/help/renderer/help.styles.css
@@ -7,6 +7,7 @@
 	box-sizing: border-box;
 }
 
-body {
-	background: var(--color-background-dark) !important;
+html, body {
+	x-background: var(--color-background-dark) !important;
+	background: none !important;
 }
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue
index 1a121e53..11279833 100644
--- a/src/talk/renderer/DesktopHeader.vue
+++ b/src/talk/renderer/DesktopHeader.vue
@@ -68,7 +68,7 @@ onUnmounted(() => {
 
 			<div class="spacer" />
 
-			<div class="header__item" data-theme-dark>
+			<div class="header__item" :data-theme-dark="!OS.isMac ? true : undefined">
 				<MainMenu />
 			</div>
 
@@ -94,8 +94,19 @@ onUnmounted(() => {
 	align-items: center;
 	height: 100%;
 	/* Save space for native title bar buttons */
-	margin-inline-start: env(titlebar-area-x, 0);
-	width: env(titlebar-area-width, 100%);
+	x-margin-inline-start: env(titlebar-area-x, 0);
+	margin-inline-start: calc(300px - 1px);
+	background-color: var(--color-main-background-macos);
+	x-width: env(titlebar-area-width, 100%);
+	width: calc(100% - 300px + 1);
+	border-inline-start: 1px solid var(--color-border-macos);
+	border-block-end: 1px solid var(--color-border-macos);
+	transition: margin-inline-start var(--animation-quick) ease;
+}
+
+body:has(#app-navigation-vue[aria-hidden="true"]) .header__inner {
+	margin-inline-start: 0;
+	border-inline-start: none;
 }
 
 .header__item {
diff --git a/src/talk/renderer/assets/styles.css b/src/talk/renderer/assets/styles.css
index 646ee6fa..0e6daeae 100644
--- a/src/talk/renderer/assets/styles.css
+++ b/src/talk/renderer/assets/styles.css
@@ -24,3 +24,62 @@
 	*/
 	--color-header-contrast: var(--color-background-plain-text, var(--background-image-color-text, #ffffff))
 }
+
+html, body {
+	background: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-border-macos: #000000;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--color-border-macos: #DCDCDC;
+	}
+}
+
+.app-navigation {
+	background: none !important;
+	backdrop-filter: none !important;
+	border-inline-end: 1px solid var(--color-border-macos) !important;
+}
+
+.list-item {
+	&:hover,
+	&:focus-within,
+	&:has(:focus-visible),
+	&:has(:active) {
+		background-color: rgb(from var(--color-background-hover) r g b / 0.75) !important;
+	}
+}
+
+:root {
+	--color-primary-element-macos: rgb(from var(--color-primary-element) r g b / 0.75);
+	--color-primary-element-hover-macos: rgb(from var(--color-primary-element-hover) r g b / 0.75);
+	--color-main-background-macos: rgb(from var(--color-main-background) r g b / 0.5);
+
+}
+
+.list-item__wrapper--active,
+.list-item__wrapper.active {
+	.list-item {
+		background-color: var(--color-primary-element-macos) !important;
+
+		&:hover {
+			background-color: var(--color-primary-element-hover-macos) !important;
+		}
+	}
+}
+
+.app-navigation {
+	.input-field__input {
+		background-color: var(--color-main-background-macos) !important;
+	}
+
+	.button-vue:is(:hover, :focus, :active) {
+		background-color: var(--color-main-background-macos) !important;
+	}
+}
diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/components/MainMenu.vue
index ad0c418d..0c49ba06 100644
--- a/src/talk/renderer/components/MainMenu.vue
+++ b/src/talk/renderer/components/MainMenu.vue
@@ -27,6 +27,8 @@ const talkWebLink = computed(() => generateUrl(talkRouter.value?.currentRoute?.f
 const showHelp = () => window.TALK_DESKTOP.showHelp()
 const reload = () => window.location.reload()
 const openSettings = () => window.OCA.Talk.Settings.open()
+
+const OS = window.systemInfo
 </script>
 
 <template>
@@ -34,7 +36,7 @@ const openSettings = () => window.OCA.Talk.Settings.open()
 		type="tertiary-no-background"
 		container="body">
 		<template #icon>
-			<IconMenu :size="20" fill-color="var(--color-header-contrast)" />
+			<IconMenu :size="20" :fill-color="!OS.isMac ? 'var(--color-header-contrast)' : undefined" />
 		</template>
 
 		<NcActionLink :href="talkWebLink" target="_blank">
diff --git a/src/talk/talk.window.js b/src/talk/talk.window.js
index 391d0f12..9e7aee9e 100644
--- a/src/talk/talk.window.js
+++ b/src/talk/talk.window.js
@@ -13,6 +13,7 @@ const { getBrowserWindowIcon } = require('../shared/icons.utils.js')
 const { TITLE_BAR_HEIGHT } = require('../constants.js')
 const { getAppConfig } = require('../app/AppConfig.ts')
 const { getScaledWindowMinSize, getScaledWindowSize, applyZoom } = require('../app/utils.ts')
+const {isMac} = require('../app/system.utils')
 
 /**
  * @return {import('electron').BrowserWindow}
@@ -21,11 +22,14 @@ function createTalkWindow() {
 	const zoomFactor = getAppConfig('zoomFactor')
 
 	const talkWindowOptions = {
+		transparent: true,
+		frame: false,
+		vibrancy: 'sidebar',
 		...getScaledWindowMinSize({
 			minWidth: 600,
 			minHeight: 400,
 		}),
-		backgroundColor: '#00679E',
+		backgroundColor: !isMac ? '#00679E' : undefined,
 		autoHideMenuBar: true,
 		webPreferences: {
 			preload: TALK_WINDOW_PRELOAD_WEBPACK_ENTRY,
@@ -46,6 +50,7 @@ function createTalkWindow() {
 	}
 
 	const window = new BrowserWindow({
+		visualEffectState: 'active',
 		...talkWindowOptions,
 		...getScaledWindowSize({
 			width: 1400,
@@ -76,6 +81,8 @@ function createTalkWindow() {
 
 	setupTray(window)
 
+	window.setVibrancy('sidebar')
+
 	window.loadURL(TALK_WINDOW_WEBPACK_ENTRY)
 
 	return window