diff --git a/Portfolio.Application/Services/PokemonService/IPokemonService.cs b/Portfolio.Application/Services/PokemonService/IPokemonService.cs
index a53b3e2..bd59cc2 100644
--- a/Portfolio.Application/Services/PokemonService/IPokemonService.cs
+++ b/Portfolio.Application/Services/PokemonService/IPokemonService.cs
@@ -11,5 +11,6 @@ namespace Portfolio.Application.Services.PokemonService
     {
         Task<List<Pokemon>> GetAllPokemonAsync();
         Task AddPokemonAsync(Pokemon pokemon);
+        Task DeletePokemonAsync(int pokemonId);
     }
 }
diff --git a/Portfolio.Application/Services/PokemonService/PokemonService.cs b/Portfolio.Application/Services/PokemonService/PokemonService.cs
index 6f9e8e9..00443e7 100644
--- a/Portfolio.Application/Services/PokemonService/PokemonService.cs
+++ b/Portfolio.Application/Services/PokemonService/PokemonService.cs
@@ -22,6 +22,10 @@ namespace Portfolio.Application.Services.PokemonService
         {
             await _pokemonRepository.AddPokemonAsync(pokemon);
         }
+        public async Task DeletePokemonAsync(int pokemonId)
+        {
+            await _pokemonRepository.DeletePokemonAsync(pokemonId);
+        }
 
         public async Task<List<Pokemon>> GetAllPokemonAsync()
         {
diff --git a/Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs b/Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs
index bea253d..0539bc4 100644
--- a/Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs
+++ b/Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs
@@ -10,5 +10,7 @@ namespace Portfolio.Domain.Features.Pokemon
     {
         Task<List<Pokemon>> GetAllPokemonsAsync();
         Task AddPokemonAsync(Pokemon pokemon);
+        Task DeletePokemonAsync(int pokemonId);
+
     }
 }
diff --git a/Portfolio.Infrastructure/Repositories/PokemonRepository.cs b/Portfolio.Infrastructure/Repositories/PokemonRepository.cs
index 52149de..3d34313 100644
--- a/Portfolio.Infrastructure/Repositories/PokemonRepository.cs
+++ b/Portfolio.Infrastructure/Repositories/PokemonRepository.cs
@@ -26,5 +26,14 @@ namespace Portfolio.Infrastructure.Repositories
             _context.Pokemons.Add(pokemon);
             await _context.SaveChangesAsync();
         }
+        public async Task DeletePokemonAsync(int pokemonId)
+        {
+            var pokemon = await _context.Pokemons.FindAsync(pokemonId);
+            if (pokemon != null)
+            {
+                _context.Pokemons.Remove(pokemon);
+                await _context.SaveChangesAsync();
+            }
+        }
     }
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
index 00b4c9a..0d0dce4 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
@@ -1,6 +1,7 @@
 @page "/pokemonsleep"
 
 @inject IPokemonService PokemonService
+@inject IJSRuntime JS
 
 @attribute [StreamRendering]
 @rendermode InteractiveServer
@@ -121,9 +122,13 @@ else
                                 string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
                                 string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
                                 <td style="text-align: center;">
-                                    <img style="width: 90px; height: 90px; cursor: pointer;"
-                                         src="@(isShiny[pokemon.PokemonId] ? ShinyURL : BaseURL)"
-                                         @onclick="() => ToggleImage(pokemon.PokemonId)" />
+                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
+                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
+                                            <img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
+
+                                            <img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
+                                        </div>
+                                    </div>
                                 </td>
                             }
                             else // Base Case
@@ -131,8 +136,8 @@ else
                                 string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
                                 string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
                                 <td style="text-align: center;">
-                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.PokemonId)">
-                                        <div class="flipper @(isShiny[pokemon.PokemonId] ? "flipped" : "")">
+                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
+                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                             <img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
 
                                             <img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
@@ -167,14 +172,15 @@ else
                             <!-- Section 5: Speciality -->
                             <td style="padding-right: 30px; vertical-align: auto;">@pokemon.Speciality</td>
 
-                            <!-- Section 6: Delete Button -->
-                            <td style="vertical-align: auto;">
-                                <a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger" style="border-radius: 15px 50px 30px 5px;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
-                                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
+                            <!-- Section 6: Delete Button  -->
+                            <td>
+                                <button class="btn btn-danger"  @onclick="() => ConfirmDelete(pokemon.Id)">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                         class="bi bi-trash" viewBox="0 0 16 16">
+                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
+                                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                     </svg>
-                                </a>
+                                </button>
                             </td>
 
                         </tr>
@@ -203,18 +209,34 @@ else
             // Initialize dictionary with false (show base image first)
             foreach (var pokemon in pokemons)
             {
-                isShiny[pokemon.PokemonId] = false;
+                isShiny[pokemon.Id] = false;
             }
 
         }
     }
 
-        private void ToggleImage(int pokemonId)
+    private void ToggleImage(int Id)
     {
-        if (isShiny.ContainsKey(pokemonId))
+        if (isShiny.ContainsKey(Id))
         {
-            isShiny[pokemonId] = !isShiny[pokemonId];
+            isShiny[Id] = !isShiny[Id];
+        }
+    }
+    private async Task ConfirmDelete(int Id)
+    {
+        bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
+        if (confirm)
+        {
+            await DeletePokemon(Id);
         }
     }
 
+    private async Task DeletePokemon(int Id)
+    {
+        await PokemonService.DeletePokemonAsync(Id);
+        pokemons.RemoveAll(p => p.Id == Id);  // Remove from the list locally
+        StateHasChanged(); // Refresh the UI
+    }
+
+
 }