diff --git a/src/components/City.vue b/src/components/City.vue
index 6ce8468..bb4a1f7 100644
--- a/src/components/City.vue
+++ b/src/components/City.vue
@@ -54,7 +54,14 @@
       </v-row>
       <v-divider></v-divider>
       <v-card-actions>
-        <v-btn block class="primary" @click="details = true">Pokaż szczegóły</v-btn>
+        <v-row>
+          <v-col cols="6">
+            <v-btn block class="primary" @click="details = true">Szczegóły</v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn block class="error" @click="deleteCity()">Usuń</v-btn>
+          </v-col>
+        </v-row>
       </v-card-actions>
     </v-card>
     <v-skeleton-loader type="card" v-else></v-skeleton-loader>
@@ -104,6 +111,10 @@ export default class City extends Vue {
     return moment.unix(dt).format("HH:mm");
   }
 
+  private deleteCity() {
+    this.$emit('delete');
+  }
+
   private data() {
     return {
       data: undefined,
diff --git a/src/views/Forecast.vue b/src/views/Forecast.vue
index 5f3d60b..14c4ca5 100644
--- a/src/views/Forecast.vue
+++ b/src/views/Forecast.vue
@@ -4,7 +4,7 @@
       <v-card-title>Prognoza pogody</v-card-title>
       <v-row justify="space-around">
         <v-col v-for="(city, i) in cities" :key="i">
-          <City :city="city" />
+          <City :city="city" @delete="deleteCity(city)" />
         </v-col>
         <v-col>
           <v-hover v-slot="{ hover }">
@@ -70,6 +70,11 @@ export default class Forecast extends Vue {
     this.saveUser();
   }
 
+  deleteCity(city: object) {
+    this.$data.cities.splice(this.$data.cities.indexOf(city));
+    this.saveUser();
+  }
+
   private async getFirebaseUserData() {
     const q = query(this.users, where("uid", "==", this.user.uid));