diff --git a/app/components/modal/ActionDialog.vue b/app/components/modal/ActionDialog.vue
index ddcd3262..f4ef9c84 100644
--- a/app/components/modal/ActionDialog.vue
+++ b/app/components/modal/ActionDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <GridLayout
       columns="*"
       :rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
@@ -64,6 +64,7 @@ import * as Toast from "nativescript-toast";
 import { localize } from "@nativescript/localize";
 import { mapState, mapActions } from "vuex";
 import ConfirmDialog from "./ConfirmDialog.vue";
+
 export default {
   props: ["title", "list", "stretch", "action", "helpIcon"],
   data() {
@@ -85,6 +86,16 @@ export default {
   },
   methods: {
     ...mapActions(["removeListItemAction"]),
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     localized(item) {
       if (this.title !== "lang") return localize(item);
       else return item;
diff --git a/app/components/modal/ActionDialogWithSearch.vue b/app/components/modal/ActionDialogWithSearch.vue
index 752b12d5..92dc20bb 100644
--- a/app/components/modal/ActionDialogWithSearch.vue
+++ b/app/components/modal/ActionDialogWithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <GridLayout
       columns="*"
       rows="auto, auto, auto, *, auto"
@@ -118,6 +118,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     tapAction(recipe) {
       this.$modal.close(recipe.id);
     },
diff --git a/app/components/modal/ConfirmDialog.vue b/app/components/modal/ConfirmDialog.vue
index a103d379..c3ea59fa 100644
--- a/app/components/modal/ConfirmDialog.vue
+++ b/app/components/modal/ConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { Application } from "@nativescript/core";
+import { Application, Color } from "@nativescript/core";
 import { mapState } from "vuex";
 export default {
   props: [
@@ -59,5 +59,17 @@ export default {
       return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
     },
   },
+  methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
+  },
 };
 </script>
diff --git a/app/components/modal/ListPicker.vue b/app/components/modal/ListPicker.vue
index 613ad25a..8ac2bcb4 100644
--- a/app/components/modal/ListPicker.vue
+++ b/app/components/modal/ListPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -97,6 +97,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     setHrs(args) {
       let hr = "0" + this.hrs[args.object.selectedIndex];
       this.selectedHrs = hr.slice(-2);
diff --git a/app/components/modal/PromptDialog.vue b/app/components/modal/PromptDialog.vue
index 034b801b..a8119ceb 100644
--- a/app/components/modal/PromptDialog.vue
+++ b/app/components/modal/PromptDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -61,6 +61,16 @@ export default {
     },
   },
   methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
     focusField(args) {
       args.object.focus();
       setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1);
diff --git a/app/components/modal/ShareChooser.vue b/app/components/modal/ShareChooser.vue
index f0ac003b..6a91336a 100644
--- a/app/components/modal/ShareChooser.vue
+++ b/app/components/modal/ShareChooser.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page @loaded="onPageLoad" backgroundColor="transparent">
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label
         class="er dialogIcon"
@@ -76,5 +76,17 @@ export default {
       return this.isLightMode ? "#fff" : "#292929";
     },
   },
+  methods: {
+    onPageLoad(args) {
+      args.object._dialogFragment
+        .getDialog()
+        .getWindow()
+        .setBackgroundDrawable(
+          new android.graphics.drawable.ColorDrawable(
+            android.graphics.Color.TRANSPARENT
+          )
+        );
+    },
+  },
 };
 </script>