diff --git a/packages/excalidraw/components/Island.scss b/packages/excalidraw/components/Island.scss
index e9f8ebef56..eb0b0816d0 100644
--- a/packages/excalidraw/components/Island.scss
+++ b/packages/excalidraw/components/Island.scss
@@ -3,6 +3,8 @@
     --padding: 0;
     box-sizing: border-box;
     background-color: var(--island-bg-color);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
     box-shadow: var(--shadow-island);
     border-radius: var(--border-radius-lg);
     padding: calc(var(--padding) * var(--space-factor));
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index f8486083eb..e3bb06a5d8 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -386,6 +386,9 @@ body.excalidraw-cursor-resize * {
     width: 12.5rem;
     box-sizing: border-box;
     position: absolute;
+    background: transparent !important;
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
   }
 
   .dropdown-select {
@@ -648,14 +651,16 @@ body.excalidraw-cursor-resize * {
   .App-mobile-menu,
   .App-menu__left {
     --button-border: transparent;
-    --button-bg: var(--color-surface-mid);
+    // --button-bg: var(--color-surface-mid);
+    --button-bg: rgba(255, 255, 255, 0.3);
   }
 
   @at-root .excalidraw.theme--dark#{&} {
     .App-mobile-menu,
     .App-menu__left {
       --button-hover-bg: #363541;
-      --button-bg: var(--color-surface-high);
+      // --button-bg: var(--color-surface-high);
+      --button-bg: rgba(0, 0, 0, 0.15);
     }
   }
 
diff --git a/packages/excalidraw/css/theme.scss b/packages/excalidraw/css/theme.scss
index 1d6a569665..a0645d998b 100644
--- a/packages/excalidraw/css/theme.scss
+++ b/packages/excalidraw/css/theme.scss
@@ -19,7 +19,7 @@
   --input-border-color: #{$oc-gray-4};
   --input-hover-bg-color: #{$oc-gray-1};
   --input-label-color: #{$oc-gray-7};
-  --island-bg-color: #ffffff;
+  --island-bg-color: transparent !important;
   --keybinding-color: var(--color-gray-40);
   --link-color: #{$oc-blue-7};
   --overlay-bg-color: #{transparentize($oc-white, 0.12)};
@@ -154,11 +154,11 @@
   --color-on-surface: #1b1b1f;
   --color-brand-hover: #5753d0;
   --color-on-primary-container: #030064;
-  --color-surface-primary-container: #e0dfff;
+  --color-surface-primary-container: rgba(224, 223, 255, 0.7);
   --color-brand-active: #4440bf;
   --color-border-outline: #767680;
   --color-border-outline-variant: #c5c5d0;
-  --color-surface-primary-container: #e0dfff;
+  // --color-surface-primary-container: #e0dfff;
 
   --color-badge: #0b6513;
   --background-color-badge: #d3ffd2;
@@ -259,10 +259,9 @@
     --color-on-surface: #e3e3e8;
     --color-brand-hover: #bbb8ff;
     --color-on-primary-container: #e0dfff;
-    --color-surface-primary-container: #403e6a;
+    --color-surface-primary-container: rgba(64, 62, 106, 0.7);
     --color-brand-active: #d0ccff;
     --color-border-outline: #8e8d9c;
     --color-border-outline-variant: #46464f;
-    --color-surface-primary-container: #403e6a;
   }
 }
diff --git a/packages/excalidraw/css/variables.module.scss b/packages/excalidraw/css/variables.module.scss
index c360c0dc6b..a51764e668 100644
--- a/packages/excalidraw/css/variables.module.scss
+++ b/packages/excalidraw/css/variables.module.scss
@@ -79,6 +79,10 @@
   color: var(--button-color, var(--color-on-surface));
   font-family: var(--ui-font);
 
+  // background: transparent !important;
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+
   svg {
     width: var(--button-width, var(--lg-icon-size));
     height: var(--button-height, var(--lg-icon-size));