diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
index 58b8ef3..c5f73cc 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
@@ -1,72 +1,40 @@
-<div class="position-relative w-100 bg-white card border border-5 rounded border-info-subtle shadow-sm " style="height:300px;">
+@attribute [StreamRendering]
+@rendermode InteractiveServer
 
-    <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 class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
+    <!-- Pokemon Name and Number -->
+    <div class="z-3">
+        @if (_pokemon.IsVariation) 
+        {
+            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
+        }
+        else 
+        { 
+            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> 
+        }
+        <div class="pokemon-number">
+            <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
         </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()">
+    <!-- Pokemon Image -->
+    <div class="flip-container z-1" @onclick="() => ToggleImage()">
         <div class="flipper @(isShiny ? "flipped" : "")">
-            <img class="card-img front" src="@_pokemon.PokemonImageUrl" />
-            <img class="card-img back" src="@_pokemon.PokemonShinyImageUrl" />
+            <img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
+            <img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
         </div>
     </div>
 
+    <div class="bg-info-subtle border rounded border-2 border-info pokemon-flavor-text">
+        <p class="">[ Pokemon Flavor Text Placeholder ]</p>
+    </div>
+
+    <!-- Pokemon Sleep Type and Specialty Badges -->
     <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 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>
-
-@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.cs b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
new file mode 100644
index 0000000..f20140b
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Component
+{
+    public partial class PokemonCard
+    {
+        [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
index 5f40610..3ff2b26 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
@@ -1,9 +1,60 @@
-
+.pokemon-card {
+    position: relative;
+    width: 24rem;
+    height: 32rem;
+    max-width: 24rem;
+    max-height: 32rem;
+    border-radius: 5% / 3.5%;
+}
+
+.pokemon-name {
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    margin-top: 1.5rem !important;
+    margin-left: 0.5rem !important;
+    transform: translateY(-50%) !important;
+    font-size: 2.5rem;
+}
+
+.pokemon-number {
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    margin-top: 3rem !important;
+    margin-left: 1.5rem !important;
+    transform: translateY(-50%) !important;
+    font-size: .75rem;
+}
+
+.pokemon-image {
+    width: 100%; /* Look to flip-container for the width/height of image */
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.pokemon-flavor-text {
+    position: absolute;
+    top: 60% !important;
+    left: 50% !important;
+    width: 90%;
+    height: 20%;
+    padding: 0.5rem;
+    margin-top: 3rem !important;
+    transform: translateX(-50%) !important;
+}
+
 .flip-container {
+    position: absolute !important;
+    top: 40% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
     perspective: 1000px;
     display: inline-block;
-    width: 100%;
-    height: 100%;
+    width: 20rem;
+    height: 20rem;
     cursor: pointer;
 }
 
@@ -19,6 +70,7 @@
     transform: rotateY(180deg);
 }
 
+
 .front, .back {
     width: 100%;
     height: 100%;
@@ -45,7 +97,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 13px;
+    font-size: .8rem;
 }
 
 .dozing {
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
index f59a242..8cb4507 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
@@ -31,7 +31,7 @@ else
                     <div class="col-sm-3 input-group mb-3">
                         <span for="PokemonId" class="input-group-text">#</span>
                         <InputNumber min="0" id="PokemonId" @bind-Value="pokemon.PokemonId" class="form-control" required disabled />
-                        <InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required disabled />
+                        <InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required  />
                     </div>
                 </div>
 
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
index 3c4541e..12cb33c 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
@@ -18,28 +18,31 @@
 }
 else
 {
-    <div class="w-50 mt-5 m-auto rate-container bg-info">
+    <!-- Total Component -->
+    <div class="w-75 mt-3 m-auto rate-container bg-info ">
 
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
+        <!-- Header -->
+        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
             <div class="row">
-                <div class="w-100 text-center">
+                <div class=" text-center">
                     <h2 class="text-info">Pokémon Rater</h2>
                 </div>
             </div>
         </div>
 
-        <div class="card-body p-4 w-100 row">
-            <!-- Section 1: Pokemon Selection -->
-            <div class="d-flex row">
-                <div class="col w-50 h-100">
+        <!-- Body -->
+        <div class="p-3 w-100 flex-column ">
+            <!-- Section 1: Top - Pokemon Selection -->
+            <div class="row flex-row justify-content-end">
+                <div class="pokemon-search col">
                     <div class="position-relative pb-3" >
+                        <!-- Pokemon Selection -->
                         <input type="text"
-                               class="form-control form-control-lg"
+                               class="form-control form-control"
                                @bind="PokemonSearchTerm"
                                placeholder="Search Pokémon..."
                                @oninput="OnSearchTextChanged"
-                               style="max-width:50%; min-width:50%;" />
-
+                               />
                         @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
                         {
                             <ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
@@ -59,21 +62,32 @@ else
                             </ul>
                         }
                     </div>
-                    @if(SelectedPokemon != null)
-                    {
-                        <PokemonCard Pokemon="SelectedPokemon" />
-                    }
                 </div>
-                @if(SelectedPokemon != null)
-                {
-                    <div class="col w-75 h-100">
+                <div class="col-2">
+                    <button class="btn btn-danger">Clear</button>
+                </div>
+            </div>
+
+            <!-- Section 2: Bottom - Pokemon -->
+            @if (SelectedPokemon != null)
+            {
+                <div class="row w-100">
+                    <!-- Section 2A: Left Side - Pokemon Card View -->
+                    <div class="col">
+                        <div class="position-relative d-flex justify-content-center">
+                            <PokemonCard Pokemon="SelectedPokemon" />
+                        </div>
+                    </div>
+
+                    <!-- Section 2B: Right Side - Stat Selection + Form Submission -->
+                    <div class="col">
                         <h4 class="mb-3">Select Nature & Subskills</h4>
 
                         <!-- Nature -->
-                        <div class="row">
-                            <div class="col-12">
+                        <div class="">
+                            <div class="">
                                 <label>Select Nature</label>
-                                <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
+                                <select class="form-control form-control-sm mb-2" @bind="SelectedNatureId">
                                     <option value="" disabled>Choose Nature...</option>
                                     @foreach (var nature in NatureList)
                                     {
@@ -82,81 +96,90 @@ else
                                 </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>
+
+                        <!-- Subskill 1 -->
+                        <div class="">
+                            <div class="">
+                                <label for="subskillSelect1">Select Level 10 Subskill</label>
+                                <select id="subskillSelect1" class="form-control form-control-sm 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>
+                        </div>
+
+                        <!-- Subskill 2 -->
+                        <div class="">
+                            <div class="">
+                                <label for="subskillSelect2">Select Level 25 Subskill</label>
+                                <select id="subskillSelect2" class="form-control form-control-sm 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>
+                        </div>
+
+                        <!-- Subskill 3 -->
+                        <div class="">
+                            <div class="">
+                                <label for="subskillSelect3">Select Level 50 Subskill</label>
+                                <select id="subskillSelect3" class="form-control form-control-sm 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>
+
+                        <!-- Subskill 4 Disabled -->
+                        <div class="">
+                            <div class="">
+                                <label for="subskillSelect4">Select Level 75 Subskill</label>
+                                <select id="subskillSelect4" disabled class="form-control form-control-sm 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>
+                        </div>
+
+                        <!-- Subskill 5 Disabled -->
+                        <div class="">
+                            <div class="">
+                                <label for="subskillSelect5">Select Level 100 Subskill</label>
+                                <select id="subskillSelect5" disabled class="form-control form-control-sm 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>
+
+                        <!-- Calculate Score -->
+                        <div class="">
+                            <div class="d-flex justify-content-between align-items-center mt-3">
+                                <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
+                                <h4 class="bg-white border border-1 rounded p-2 m-2">
+                                    <span class="finalScore rounded" style="background-color: @ScoreBackgroundColor">@FinalScore</span>
+                                </h4>
+                            </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>
             }
-            
         </div>
     </div>
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
index bc759f1..a8abed4 100644
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
@@ -6,6 +6,10 @@
     
 }
 
+.pokemon-search {
+    width: 95%;
+}
+
 .flip-container {
     perspective: 1000px;
     display: inline-block;
@@ -80,8 +84,6 @@
 }
 
 .finalScore {
-    width: 30px;
-    height: 30px;
     color: white;
     padding: 4px 8px;
     text-align: center;