diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
index 9be4b29aa..a3b39c96c 100644
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@@ -150,7 +150,7 @@ export default class AddressAutoComplete extends Vue {
   }
 
   get queryText(): string {
-    if (this.value) {
+    if (this.value !== undefined) {
       return new Address(this.value).fullName;
     }
     return this.initialQueryText;
diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index 35581015f..4c73150e0 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -46,6 +46,12 @@
           </div>
         </template>
       </b-autocomplete>
+      <b-button
+        :disabled="!queryText"
+        @click="resetAddress"
+        class="reset-area"
+        icon-left="close"
+      />
     </b-field>
     <div class="map" v-if="selected && selected.geom && selected.poiInfos">
       <map-leaflet
@@ -295,6 +301,12 @@ export default class FullAddressAutoComplete extends Vue {
       );
     });
   }
+
+  resetAddress(): void {
+    this.$emit("input", null);
+    this.queryText = "";
+    this.selected = new Address();
+  }
 }
 </script>
 <style lang="scss">
diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts
index 051b31f7f..352b2f2ae 100644
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -13,9 +13,9 @@ export interface ICurrentUser {
 }
 
 export interface IUserPreferredLocation {
-  range?: number;
-  name?: string;
-  geohash?: string;
+  range?: number | null;
+  name?: string | null;
+  geohash?: string | null;
 }
 
 export interface IUserSettings {
diff --git a/js/src/views/Settings/Preferences.vue b/js/src/views/Settings/Preferences.vue
index 29ae92299..b779aec08 100644
--- a/js/src/views/Settings/Preferences.vue
+++ b/js/src/views/Settings/Preferences.vue
@@ -80,6 +80,12 @@
             </option>
           </b-select>
         </b-field>
+        <b-button
+          :disabled="address == undefined"
+          @click="resetArea"
+          class="reset-area"
+          icon-left="close"
+        />
       </b-field>
       <p>
         {{
@@ -239,11 +245,11 @@ export default class Preferences extends Vue {
     }
   }
 
-  get locationRange(): number | undefined {
+  get locationRange(): number | undefined | null {
     return this.loggedUser?.settings?.location?.range;
   }
 
-  set locationRange(locationRange: number | undefined) {
+  set locationRange(locationRange: number | undefined | null) {
     if (locationRange) {
       this.updateUserSettings({
         location: {
@@ -253,6 +259,16 @@ export default class Preferences extends Vue {
     }
   }
 
+  resetArea(): void {
+    this.updateUserSettings({
+      location: {
+        geohash: null,
+        name: null,
+        range: null,
+      },
+    });
+  }
+
   private async updateUserSettings(userSettings: IUserSettings) {
     await this.$apollo.mutate<{ setUserSetting: string }>({
       mutation: SET_USER_SETTINGS,
@@ -262,3 +278,10 @@ export default class Preferences extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+.reset-area {
+  align-self: center;
+  position: relative;
+  top: 10px;
+}
+</style>