diff --git a/themes/metro.yaml b/themes/metro.yaml
index 4038e7b..861da71 100644
--- a/themes/metro.yaml
+++ b/themes/metro.yaml
@@ -61,6 +61,7 @@ ________________________________________Common Base (Do Not Use): &common-colors
   # Borders
   ha-card-border-width: 0px
   ha-card-border-color: transparent
+  popup-border-radius: var(--ha-dialog-border-radius)
 
   # Typography
   font-stack: &font-stack "Segoe UI Variable Static Text, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
@@ -523,6 +524,17 @@ ________________________________________Common Base 3 (Do Not Use): &common-card
       .mdc-dialog__surface {
         box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
       }
+    ha-dialog$: |
+      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+        .mdc-dialog__surface {
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
+        }
+      }
+      .mdc-dialog__surface {
+        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
+      }
     ha-header-bar$: |
       .mdc-top-app-bar {
         background: none !important;
@@ -540,6 +552,9 @@ ________________________________________Common Base 3 (Do Not Use): &common-card
       .content {
         xmargin-top: -8px;
       }
+      ha-dialog {
+        --dialog-box-shadow: inherit !important;
+      }
     ha-more-info-info$state-card-display$: |
       .state {
         margin-left: 46px !important;