diff --git a/src/components/IconButton.svelte b/src/components/IconButton.svelte
index d13b6cf..a71f6da 100644
--- a/src/components/IconButton.svelte
+++ b/src/components/IconButton.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+    import { Layer } from "m3-svelte";
+
     let { icon, ...rest } = $props();
 </script>
 
-<button class="cbox size-48px" {...rest}>
-    <span class="size-24px {icon}"></span>
+<button class="cbox size-48px relative rounded-8px" {...rest}>
+  <Layer/>
+  <span class="size-24px {icon}"></span>
 </button>
\ No newline at end of file
diff --git a/src/components/appbar/AppBar.svelte b/src/components/appbar/AppBar.svelte
index cd36be3..fe5f1d2 100644
--- a/src/components/appbar/AppBar.svelte
+++ b/src/components/appbar/AppBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly, slide } from "svelte/transition";
+  import { fly, slide, fade } from "svelte/transition";
   import { Menu } from "m3-svelte";
   import IconButton from "../IconButton.svelte";
 
@@ -42,9 +42,11 @@
 </div>
 
 {#if children && showMenu}
-  <div class="absolute right-0 p-16px mt-[-16px]" transition:fly={{ duration: 200, y: -10 }}>
-    <Menu>
-      {@render children()}
-    </Menu>
-  </div>  
+  <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-sm z-10" onclick={() => showMenu = false} transition:fade={{ duration: 200 }} aria-hidden="true">
+    <div class="absolute right-0 top-48px p-16px mt-[-16px] z-11" transition:fly={{ duration: 200, y: -10 }}>
+      <Menu>
+        {@render children()}
+      </Menu>
+    </div>
+  </div>
 {/if}
\ No newline at end of file