diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor
index fd0ed3f..094664d 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor
@@ -1,46 +1,8 @@
-@inject IPokemonService PokemonService
-
-<div class="pokemon-background">
-    @foreach (var image in BackgroundImages)
+<div class="pokemon-background">
+    @foreach (var image in _pokemonImages)
     {
         <img src="@image.Url"
              class="pokemon-bg-img"
              style="left:@image.Left%; top:@image.Top%; width:@image.Size}px; transform:rotate(@(image.Rotation)deg);" />
     }
 </div>
-
-@code {
-    private List<PokemonImage> BackgroundImages = new();
-    private Random random = new();
-
-    protected override async Task OnInitializedAsync()
-    {
-        await LoadPokemonBackgrounds();
-    }
-
-    private async Task LoadPokemonBackgrounds()
-    {
-        var pokemonList = await PokemonService.GetAllPokemonAsync(); // Retrieves Pokémon with background URLs
-
-        foreach (var pokemon in pokemonList)
-        {
-            BackgroundImages.Add(new PokemonImage
-                {
-                    Url = pokemon.PokemonImageUrl, // URL retrieved from the database
-                    Left = random.Next(0, 100),
-                    Top = random.Next(0, 100),
-                    Size = random.Next(50, 130),
-                    Rotation = random.Next(0, 360)
-                });
-        }
-    }
-
-    private class PokemonImage
-    {
-        public string Url { get; set; } = "";
-        public int Left { get; set; }
-        public int Top { get; set; }
-        public int Size { get; set; }
-        public int Rotation { get; set; }
-    }
-}
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.cs b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.cs
index 1529c8a..04b381e 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.cs
@@ -1,6 +1,63 @@
-namespace Portfolio.WebUI.Server.Components.Component
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Component
 {
     public partial class PokemonBackground
     {
+
+        private class PokemonImage
+        {
+            public string Url { get; set; } = "";
+            public int Left { get; set; }
+            public int Top { get; set; }
+            public int Size { get; set; }
+            public int Rotation { get; set; }
+        }
+
+
+        [Parameter]
+        public List<string> PokemonImages { get; set; }
+        [Parameter]
+        public List<string> ShinyPokemonImages { get; set; }
+
+        private List<PokemonImage> _pokemonImages = new List<PokemonImage>();
+        private List<PokemonImage> _shinyPokemonImages = new List<PokemonImage>();
+        private Random random = new Random();
+
+        protected override async Task OnInitializedAsync()
+        {
+            await LoadPokemonBackgrounds();
+        }
+
+        private async Task LoadPokemonBackgrounds()
+        {
+
+            foreach (var pokemonimgurl in PokemonImages)
+            {
+                Console.WriteLine(pokemonimgurl);
+                _pokemonImages.Add(new PokemonImage
+                {
+                    Url = pokemonimgurl, // URL retrieved from the database
+                    Left = random.Next(0, 100),
+                    Top = random.Next(0, 100),
+                    Size = random.Next(50, 130),
+                    Rotation = random.Next(0, 360)
+                });
+            }
+            foreach (var pokemonimgurl in ShinyPokemonImages)
+            {
+                _shinyPokemonImages.Add(new PokemonImage
+                {
+                    Url = pokemonimgurl, // URL retrieved from the database
+                    Left = random.Next(0, 100),
+                    Top = random.Next(0, 100),
+                    Size = random.Next(50, 130),
+                    Rotation = random.Next(0, 360)
+                });
+            }
+        }
+
+
     }
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
index 3720db8..763e404 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
@@ -72,8 +72,8 @@ else
                             <!-- Image and other Pokemon info -->
                             <div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
                                 <div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
-                                    <img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
-                                    <img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
+                                    <img class="front" src="@SelectedPokemon.PokemonImageUrl" />
+                                    <img class="back" src="@SelectedPokemon.PokemonShinyImageUrl" />
                                 </div>
                             </div>
                             <div class="row">
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
index fcfd6db..33f537c 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
@@ -9,7 +9,7 @@
 <PageTitle>Pokémon Sleep</PageTitle>
 
 <div class="w-100">
-    <!-- <PokemonBackground /> -->
+    <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" />
 
     <PokemonHeader />
 
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.cs b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.cs
index be7a06c..09f37b2 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.cs
@@ -6,8 +6,9 @@ namespace Portfolio.WebUI.Server.Components.Pages
     public partial class PokemonSleep
     {
         public List<Pokemon> pokemons = new List<Pokemon>();
+        public List<string> pokemonImageUrls = new List<string>();
+        public List<string> pokemonShinyImageUrls = new List<string>();
 
-        
 
         protected override async Task OnInitializedAsync()
         {
@@ -17,6 +18,12 @@ namespace Portfolio.WebUI.Server.Components.Pages
                 pokemons = result;
                 pokemons.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
 
+                foreach (var pokemon in pokemons)
+                {
+                    pokemonImageUrls.Add(pokemon.PokemonImageUrl);
+                    pokemonShinyImageUrls.Add(pokemon.PokemonShinyImageUrl);
+                }
+
             }
         }
     }