diff --git a/app/styles/app.css b/app/styles/app.css
index 5540146..286d285 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -197,6 +197,10 @@ body {
   flex-direction: column;
 }
 
+.settings-pane.sidebar {
+  z-index: 3200; /* Higher than Places Sidebar (3100) */
+}
+
 /* Settings Pane Mobile Overrides */
 @media (width <= 768px) {
   .settings-pane.sidebar {
diff --git a/app/templates/application.gjs b/app/templates/application.gjs
index c8d2cbb..17713c9 100644
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -8,7 +8,7 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { eq } from 'ember-truth-helpers';
-import { and } from 'ember-truth-helpers';
+import { and, or } from 'ember-truth-helpers';
 import { on } from '@ember/modifier';
 
 export default class ApplicationComponent extends Component {
@@ -74,6 +74,15 @@ export default class ApplicationComponent extends Component {
     }
   }
 
+  @action
+  handleOutsideClick() {
+    if (this.isSettingsOpen) {
+      this.closeSettings();
+    } else {
+      this.closeSidebar();
+    }
+  }
+
   @action
   closeSidebar() {
     this.nearbyPlaces = null;
@@ -105,8 +114,8 @@ export default class ApplicationComponent extends Component {
 
     <Map
       @onPlacesFound={{this.showPlaces}}
-      @isSidebarOpen={{this.isSidebarOpen}}
-      @onOutsideClick={{this.closeSidebar}}
+      @isSidebarOpen={{or this.isSidebarOpen this.isSettingsOpen}}
+      @onOutsideClick={{this.handleOutsideClick}}
     />
 
     {{#if (and (eq this.router.currentRouteName "index") this.nearbyPlaces)}}