diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
new file mode 100644
index 0000000..58b8ef3
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
@@ -0,0 +1,72 @@
+<div class="position-relative w-100 bg-white card border border-5 rounded border-info-subtle shadow-sm " style="height:300px;">
+
+    <div class=" z-3">
+        <div class="">
+            @if (_pokemon.IsVariation)
+            {
+                <div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
+                    <p class="fs-2 fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p>
+                </div>
+                <div class="position-absolute top-0 start-0 pt-1 ms-3 mt-4">
+                    <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
+                </div>
+            }
+            else
+            {
+                <div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
+                    <p class="fs-1 fw-bold card-title">@_pokemon.PokemonName</p>
+                </div>
+                <div class="position-absolute top-0 start-0 pt-2 ms-3 mt-4">
+                    <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
+                </div>
+            }
+        </div>
+    </div>
+
+    <!-- Image and other Pokemon info -->
+    <div class="position-absolute top-50 start-50 translate-middle flip-container z-1 card-body" @onclick="() => ToggleImage()">
+        <div class="flipper @(isShiny ? "flipped" : "")">
+            <img class="card-img front" src="@_pokemon.PokemonImageUrl" />
+            <img class="card-img back" src="@_pokemon.PokemonShinyImageUrl" />
+        </div>
+    </div>
+
+    <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
+        <div class="">
+            <div class="d-flex justify-content-between">
+                <div class="m-1 badge @_pokemon.SleepType.ToLower()"><p class="statText">@_pokemon.SleepType</p></div>
+                <div class="m-1 badge @_pokemon.Speciality.ToLower()"><p class="statText">@_pokemon.Speciality</p></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+@code {
+
+    [Parameter]
+    public Pokemon Pokemon { get; set; }
+
+    private Pokemon _pokemon { get; set; }
+
+    private bool isShiny = false;
+
+    protected override void OnParametersSet()
+    {
+        if(Pokemon != null)
+        {
+            _pokemon = Pokemon;
+
+        }
+    }
+
+    private void ToggleImage()
+    {
+        isShiny = !isShiny;
+        StateHasChanged();
+    }
+
+
+
+
+}
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
new file mode 100644
index 0000000..5f40610
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
@@ -0,0 +1,73 @@
+
+.flip-container {
+    perspective: 1000px;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.flipper {
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.flipped {
+    transform: rotateY(180deg);
+}
+
+.front, .back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    backface-visibility: hidden;
+}
+
+.back {
+    transform: rotateY(180deg);
+}
+
+.badge {
+    width: 90px;
+    height: 30px;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 30px;
+}
+
+.statText {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+}
+
+.dozing {
+    background-color: #fcdc5e;
+}
+
+.snoozing {
+    background-color: #4ce8ed;
+}
+
+.slumbering {
+    background-color: #4588fb;
+}
+
+.berries {
+    background-color: #24d86b;
+}
+
+.ingredients {
+    background-color: #fdbe4d;
+}
+
+.skills {
+    background-color: #47a0fc;
+}
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
index e34315e..3c4541e 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
@@ -18,26 +18,27 @@
 }
 else
 {
-    <div class="w-75 mt-5 m-auto rate-container bg-info">
+    <div class="w-50 mt-5 m-auto rate-container bg-info">
 
         <div class="card-header bg-secondary bg-gradient ml-0 py-3">
             <div class="row">
-                <div class="col-12 text-center">
+                <div class="w-100 text-center">
                     <h2 class="text-info">Pokémon Rater</h2>
                 </div>
             </div>
         </div>
 
-        <div class="card-body p-4 col-12">
+        <div class="card-body p-4 w-100 row">
             <!-- Section 1: Pokemon Selection -->
-            <div class="row pb-3">
-                <div class="col-3">
-                    <div class="position-relative">
+            <div class="d-flex row">
+                <div class="col w-50 h-100">
+                    <div class="position-relative pb-3" >
                         <input type="text"
                                class="form-control form-control-lg"
                                @bind="PokemonSearchTerm"
                                placeholder="Search Pokémon..."
-                               @oninput="OnSearchTextChanged" />
+                               @oninput="OnSearchTextChanged"
+                               style="max-width:50%; min-width:50%;" />
 
                         @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
                         {
@@ -58,141 +59,104 @@ else
                             </ul>
                         }
                     </div>
+                    @if(SelectedPokemon != null)
+                    {
+                        <PokemonCard Pokemon="SelectedPokemon" />
+                    }
+                </div>
+                @if(SelectedPokemon != null)
+                {
+                    <div class="col w-75 h-100">
+                        <h4 class="mb-3">Select Nature & Subskills</h4>
+
+                        <!-- Nature -->
+                        <div class="row">
+                            <div class="col-12">
+                                <label>Select Nature</label>
+                                <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
+                                    <option value="" disabled>Choose Nature...</option>
+                                    @foreach (var nature in NatureList)
+                                    {
+                                        <option value="@nature.Id">@nature.Nature</option>
+                                    }
+                                </select>
+                            </div>
+                        </div>
+                        <!-- Subskills -->
+                             <div class="row">
+                                 <!-- Subskill 1 -->
+                                 <div class="col-4">
+                                     <label for="subskillSelect1">Select Level 10 Subskill</label>
+                                     <select id="subskillSelect1" class="form-control form-control mb-2" @bind="subskillSelect1">
+                                         <option value="" disabled selected>Choose Subskill...</option>
+                                         @foreach (var subskill in SubskillList)
+                                         {
+                                             <option value="@subskill.Id">@subskill.SubSkill</option>
+                                         }
+                                     </select>
+                                 </div>
+                                 <!-- Subskill 2 -->
+                                 <div class="col-4">
+                                     <label for="subskillSelect2">Select Level 25 Subskill</label>
+                                     <select id="subskillSelect2" class="form-control form-control mb-2" @bind="subskillSelect2">
+                                         <option value="" disabled selected>Choose Subskill...</option>
+                                         @foreach (var subskill in SubskillList)
+                                         {
+                                             <option value="@subskill.Id">@subskill.SubSkill</option>
+                                         }
+                                     </select>
+                                 </div>
+                                 <!-- Subskill 3 -->
+                                 <div class="col-4">
+                                     <label for="subskillSelect3">Select Level 50 Subskill</label>
+                                     <select id="subskillSelect3" class="form-control form-control mb-2" @bind="subskillSelect3">
+                                         <option value="" disabled selected>Choose Subskill...</option>
+                                         @foreach (var subskill in SubskillList)
+                                         {
+                                             <option value="@subskill.Id">@subskill.SubSkill</option>
+                                         }
+                                     </select>
+                                 </div>
+                             </div>
+                             <div class="row">
+                                 <!-- Subskill 4 -->
+                                 <div class="col-4">
+                                     <label for="subskillSelect4">Select Level 75 Subskill</label>
+                                     <select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4">
+                                         <option value="" disabled selected>Choose Subskill...</option>
+                                         @foreach (var subskill in SubskillList)
+                                         {
+                                             <option value="@subskill.Id">@subskill.SubSkill</option>
+                                         }
+                                     </select>
+                                 </div>
+                                 <!-- Subskill 5 -->
+                                 <div class="col-4">
+                                     <label for="subskillSelect5">Select Level 100 Subskill</label>
+                                     <select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5">
+                                         <option value="" disabled selected>Choose Subskill...</option>
+                                         @foreach (var subskill in SubskillList)
+                                         {
+                                             <option value="@subskill.Id">@subskill.SubSkill</option>
+                                         }
+                                     </select>
+                                 </div>
+                             </div>
+
+                    </div>
+                }
+             
+            </div>
+            @if(SelectedPokemon != null)
+            {
+            <div class="row">
+                <div class="d-flex justify-content-between align-items-center mt-3 ">
+                    <button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
+                    <h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
                 </div>
             </div>
-
-            <!-- Section 2: Pokemon Rating -->
-            @if (SelectedPokemon != null)
-            {
-                <div class="row">
-                    <div class="d-flex align-top col mb-3">
-
-                        <!-- Pokemon Interface -->
-                        <div class=" px-4 col-5 bg-white border rounded">
-                            <!-- Image and other Pokemon info -->
-                            <div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
-                                <div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
-                                    <img class="front" src="@SelectedPokemon.PokemonImageUrl" />
-                                    <img class="back" src="@SelectedPokemon.PokemonShinyImageUrl" />
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-7">
-                                    <div class="row mb-0">
-                                        @if (SelectedPokemon.IsVariation)
-                                        {
-                                            <h2>@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
-                                        }
-                                        else
-                                        {
-                                            <h3>@SelectedPokemon.PokemonName</h3>
-                                        }
-                                    </div>
-                                    <div class="mt-0">
-                                        <p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
-                                    </div>
-                                </div>
-
-                                <div class="col-5 p-1">
-                                    <div class="row d-flex justify-content-between">
-                                        <div class="m-1 col badge @SelectedPokemon.SleepType.ToLower()"><p class="statText">@SelectedPokemon.SleepType</p></div>
-                                        <div class="m-1 col badge @SelectedPokemon.Speciality.ToLower()"><p class="statText">@SelectedPokemon.Speciality</p></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </div>
-
-                        <!-- Nature / Subskill Selection Dropdowns-->
-                        <div class="m-3 p-1 col">
-                            <h4 class="mb-3">Select Nature & Subskills</h4>
-
-                            <!-- Nature -->
-                            <div class="row">
-                                <div class="col-12">
-                                    <label>Select Nature</label>
-                                    <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
-                                        <option value="" disabled>Choose Nature...</option>
-                                        @foreach (var nature in NatureList)
-                                        {
-                                            <option value="@nature.Id">@nature.Nature</option>
-                                        }
-                                    </select>
-                                </div>
-                            </div>
-
-                            <!-- Subskills -->
-                            <div class="row">
-                                <!-- Subskill 1 -->
-                                <div class="col-4">
-                                    <label for="subskillSelect1">Select Level 10 Subskill</label>
-                                    <select id="subskillSelect1" class="form-control form-control mb-2" @bind="subskillSelect1">
-                                        <option value="" disabled selected>Choose Subskill...</option>
-                                        @foreach (var subskill in SubskillList)
-                                        {
-                                            <option value="@subskill.Id">@subskill.SubSkill</option>
-                                        }
-                                    </select>
-                                </div>
-                                <!-- Subskill 2 -->
-                                <div class="col-4">
-                                    <label for="subskillSelect2">Select Level 25 Subskill</label>
-                                    <select id="subskillSelect2" class="form-control form-control mb-2" @bind="subskillSelect2">
-                                        <option value="" disabled selected>Choose Subskill...</option>
-                                        @foreach (var subskill in SubskillList)
-                                        {
-                                            <option value="@subskill.Id">@subskill.SubSkill</option>
-                                        }
-                                    </select>
-                                </div>
-                                <!-- Subskill 3 -->
-                                <div class="col-4">
-                                    <label for="subskillSelect3">Select Level 50 Subskill</label>
-                                    <select id="subskillSelect3" class="form-control form-control mb-2" @bind="subskillSelect3">
-                                        <option value="" disabled selected>Choose Subskill...</option>
-                                        @foreach (var subskill in SubskillList)
-                                        {
-                                            <option value="@subskill.Id">@subskill.SubSkill</option>
-                                        }
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <!-- Subskill 4 -->
-                                <div class="col-4">
-                                    <label for="subskillSelect4">Select Level 75 Subskill</label>
-                                    <select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4">
-                                        <option value="" disabled selected>Choose Subskill...</option>
-                                        @foreach (var subskill in SubskillList)
-                                        {
-                                            <option value="@subskill.Id">@subskill.SubSkill</option>
-                                        }
-                                    </select>
-                                </div>
-                                <!-- Subskill 5 -->
-                                <div class="col-4">
-                                    <label for="subskillSelect5">Select Level 100 Subskill</label>
-                                    <select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5">
-                                        <option value="" disabled selected>Choose Subskill...</option>
-                                        @foreach (var subskill in SubskillList)
-                                        {
-                                            <option value="@subskill.Id">@subskill.SubSkill</option>
-                                        }
-                                    </select>
-                                </div>
-                            </div>
-
-                        </div>
-
-                    </div>
-
-                    <!-- Calculate -->
-                    <div class="d-flex justify-content-between align-items-center mt-3 ">
-                        <button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
-                        <h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
-                    </div>
-                </div>
             }
+            
         </div>
     </div>
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.cs b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.cs
index 77dcc14..cc7c22b 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.cs
@@ -39,9 +39,6 @@ namespace Portfolio.WebUI.Server.Components.Pages
         private string ScoreBackgroundColor;
         private string ScoreColor;
 
-        private string PokemonImageUrl => SelectedPokemon != null
-            ? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
-            : string.Empty;
 
         private string PokemonSearchTerm = string.Empty;
 
@@ -54,6 +51,7 @@ namespace Portfolio.WebUI.Server.Components.Pages
         {
             // Trigger filtering as the user types
             PokemonSearchTerm = e.Value.ToString();
+            
         }
 
         private async Task SelectPokemon(Pokemon pokemon)
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
index 174cbb9..bc759f1 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
@@ -3,6 +3,7 @@
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                 0 6px 20px 0 rgba(255,255, 255, 0.19);
     border-radius: 15px;
+    
 }
 
 .flip-container {