diff --git a/src/App.vue b/src/App.vue
index dc8890d6..548d485e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
       <router-view />
     </frappe-desk>
     <router-view v-else name="setup" />
-    <frappe-modal ref="modal" :show="showModal" v-bind="modalOptions" />
+    <frappe-modal ref="modal" :show="showModal" v-bind="modalOptions" @close-modal="showModal = false"/>
   </div>
 </template>
 
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 46c9a5cd..8304d5fd 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -16,12 +16,12 @@
           </div>
           <div class="modal-footer">
             <component :is="footer" />
-            <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
+            <f-button secondary @click="closeModal">Close</f-button>
           </div>
         </div>
       </div>
     </div>
-    <div class="modal-backdrop show" v-show="show"></div>
+    <div class="modal-backdrop show" v-show="show" @click="closeModal"></div>
   </div>
 </template>
 <script>
@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     closeModal() {
-      this.$emit('closeModal');
+      this.$emit('close-modal');
     }
   }
 }