diff --git a/web/src/app/components/all-games/all-games.component.html b/web/src/app/components/all-games/all-games.component.html
index 168618814f9bbc9906de5d888b4460390a986eb2..7c46fffbebbf09db2fa20301545d9a965b55cbf1 100644
--- a/web/src/app/components/all-games/all-games.component.html
+++ b/web/src/app/components/all-games/all-games.component.html
@@ -1,2 +1,2 @@
 <p>All Games</p>
-<app-games [games]=games></app-games>
+<app-games [games]=games (reloadEvent)="handleRefreshEvent()"></app-games>
diff --git a/web/src/app/components/all-games/all-games.component.ts b/web/src/app/components/all-games/all-games.component.ts
index 337275a3fcbe45d68e0c2d89cf7cedf409ce7999..73ec91e4aa8a6599e89f802a70ea425be4bbd5e1 100644
--- a/web/src/app/components/all-games/all-games.component.ts
+++ b/web/src/app/components/all-games/all-games.component.ts
@@ -22,4 +22,7 @@ export class AllGamesComponent implements OnInit {
       .subscribe(games => this.games = games);
   }
 
+  handleRefreshEvent() {
+    this.getGames();
+  }
 }
diff --git a/web/src/app/components/delete-game-button/delete-game-button.component.html b/web/src/app/components/delete-game-button/delete-game-button.component.html
index 33dab100bb0f53d4cb237098ce87a7b45961c7a7..49b29607f1096b2507d6ad9a4f2b50f1ad937984 100644
--- a/web/src/app/components/delete-game-button/delete-game-button.component.html
+++ b/web/src/app/components/delete-game-button/delete-game-button.component.html
@@ -1 +1 @@
-<button type="button" class="button delete-button" (click)="onDeleteClick()"></button>
+<button type="button" class="button delete-button" (click)="onDeleteClick()">Delete [{{id}}]</button>
diff --git a/web/src/app/components/delete-game-button/delete-game-button.component.ts b/web/src/app/components/delete-game-button/delete-game-button.component.ts
index df5231114acba6928ac3e01fb5312ced4500110d..c54715614786b0d5ce906bd47e99b2c6caba96a0 100644
--- a/web/src/app/components/delete-game-button/delete-game-button.component.ts
+++ b/web/src/app/components/delete-game-button/delete-game-button.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GameService } from 'src/app/services/game.service';
 
 @Component({
   selector: 'app-delete-game-button',
@@ -11,12 +12,13 @@ export class DeleteGameButtonComponent implements OnInit {
 
   @Output() onDelete: EventEmitter<number> = new EventEmitter();
 
-  constructor() { }
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
   }
 
   onDeleteClick(): void {
+    this.gameService.deleteGame(this.id);
     this.onDelete.emit(this.id);
   }
 }
diff --git a/web/src/app/components/games/games.component.html b/web/src/app/components/games/games.component.html
index 6197d319631c2b3670d7627653e921bd75da8aa0..2e29ad56c2bbb36561cc6fc82158370c234d0978 100644
--- a/web/src/app/components/games/games.component.html
+++ b/web/src/app/components/games/games.component.html
@@ -6,6 +6,7 @@
     <th>{{game.homeTeam.name}}</th>
     <th>{{game.awayTeam.name}}</th>
     <th>{{game.homeTeamScore}}:{{game.awayTeamScore}}</th> 
+    <th><app-delete-game-button [id]=game.id (onDelete)="triggerRefreshEvent()"></app-delete-game-button></th>
   </tr>
 </table>
 
diff --git a/web/src/app/components/games/games.component.ts b/web/src/app/components/games/games.component.ts
index 027e2faecbac320e1276cd8b0ba4b7ffb423de0b..e1c21ab9d375a0a48dd653d0d33aa0685cea3357 100644
--- a/web/src/app/components/games/games.component.ts
+++ b/web/src/app/components/games/games.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Game } from 'src/app/models/game';
 @Component({
   selector: 'app-games',
@@ -9,8 +9,14 @@ export class GamesComponent implements OnInit {
 
   @Input() games!: Array<Game>;
 
+  @Output() reloadEvent: EventEmitter<any>= new EventEmitter();
+
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  triggerRefreshEvent(): void {
+    this.reloadEvent.emit(null);
+  }
 }
diff --git a/web/src/app/services/game.service.ts b/web/src/app/services/game.service.ts
index 7dd52212f4de216c80a31b8175621c6e80a67862..2a8c909b21ac2b039e0617e823d5c5c5f299b62c 100644
--- a/web/src/app/services/game.service.ts
+++ b/web/src/app/services/game.service.ts
@@ -1,3 +1,4 @@
+import { ValueConverter } from '@angular/compiler/src/render3/view/template';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Game } from '../models/game';
@@ -25,6 +26,6 @@ export class GameService {
   }
 
   deleteGame(id: number) {
-    
+    this.games = this.games.filter((val, i, array) => val.id != id);
   }
 }