diff --git a/Portfolio.WebUI.Server/Components/Component/Loading.razor.cs b/Portfolio.WebUI.Server/Components/Component/Loading.razor.cs
new file mode 100644
index 0000000..d406473
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Loading.razor.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Portfolio.WebUI.Server.Components.Component
+{
+    public partial class Loading
+    {
+        [Parameter]
+        public string LoadingString { get; set; }
+
+
+    }
+}
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor
deleted file mode 100644
index b4cbef9..0000000
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor	
+++ /dev/null
@@ -1,152 +0,0 @@
-@inject IPokemonService PokemonService
-
-
-<div class="create-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
-    <EditForm class="col" Model="NewPokemon">
-        <DataAnnotationsValidator />
-
-        <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
-        
-        <!-- Pokemon Number and Name -->
-        <div class="row mt-1">
-            <div class="col input-group mb-2">
-                <span class="input-group-text text-sm-center rounded-start">#</span>
-                <InputNumber min="1"
-                             placeholder="Pokedex #"
-                             id="PokemonId"
-                             @bind-Value="NewPokemon.PokemonId"
-                             class="form-control "
-                             type="number" />
-                <InputText placeholder="Pokemon Name"
-                           id="PokemonName"
-                           @bind-Value="NewPokemon.PokemonName"
-                           class="form-control w-50 rounded-end" />
-            </div>
-        </div>
-
-        <!-- Variation Check -->
-        <div class="d-flex flex-row justify-content-start input-group ">
-                <InputCheckbox id="IsVariation"
-                               @bind-Value="NewPokemon.IsVariation"
-                               @onclick="@Toggle"
-                               class="form-check-input p-3 rounded" />
-                <span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
-                <InputText placeholder="How So?"
-                           id="VariationName"
-                           @bind-Value="NewPokemon.VariationName"
-                           class="form-control rounded-end"
-                           hidden="@HideLabel" />
-        </div>
-
-        <!-- <br> -->
-        <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
-
-        <!-- Pokemon Type -->
-        <div class="row mb-2">
-            <div class="input-group m-auto">
-                <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
-                <InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
-                    <option disabled value="" selected>Select...</option>
-                    @foreach (var pt in PokemonTypes)
-                    {
-                        <option value="@pt">@pt</option>
-                    }
-                </InputSelect>
-            </div>
-
-        </div>
-
-        <!-- Pokemon Sleep Type, Specialty -->
-        <div class="row mb-3 mx-0">
-            <!-- Sleep Type -->
-            <div class="col ps-0 pe-1">
-                <div class="row input-group m-auto">
-                    <span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
-                </div>
-                <div class="row input-group m-auto">
-                    <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
-                        <option disabled value="" selected>Select...</option>
-                        @foreach (var st in SleepTypes)
-                        {
-                            <option value="@st">@st</option>
-                        }
-                    </InputSelect>
-                </div>
-            </div>
-            <!-- Speciality -->
-            <div class="col ps-1 pe-0">
-                <div class="row input-group m-auto">
-                    <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
-                </div>
-                <div class="row input-group m-auto">
-                    <InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
-                        <option disabled value="" selected>Select...</option>
-                        @foreach (var sp in Specialities)
-                        {
-                            <option value="@sp">@sp</option>
-                        }
-                    </InputSelect>
-                </div>
-            </div>
-        </div>
-
-        <!-- <br> -->
-        <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
-
-        <!-- Images -->
-        <div class="row mb-2">
-            <div class="input-group m-auto">
-                <span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
-                <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
-            </div>
-        </div>
-        <div class="row mb-2">
-            <div class="input-group m-auto">
-                <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
-                <InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
-            </div>
-        </div>
-
-        <!-- Flavor -->
-        <div class="row mb-2">
-            <div class="input-group m-auto">
-                <span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
-                <InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
-            </div>
-        </div>
-
-        <!-- <br> -->
-        <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
-
-        @if (showErrors && !IsComplete)
-        {
-            <div class="alert alert-warning mt-2">
-                Please complete: @string.Join(", ", MissingFields())
-            </div>
-        }
-
-        <div class="d-flex mt-3 justify-content-center gap-3">
-            <button type="button"
-                    class="btn btn-primary rounded p-1 px-0"
-                    @onclick="@SendPokemon"
-                    disabled="@( !IsComplete )">
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
-                    <path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
-                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
-                </svg>
-            </button>
-            @if(mostRecentForm)
-            {
-                <button type="button"
-                        class="btn btn-danger rounded p-1 px-0"
-                        @onclick="@HandleRemove">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
-                        <path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
-                        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
-                    </svg>
-                </button>
-            }
-        </div>
-    </EditForm>
-</div>
-
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs
deleted file mode 100644
index 2e24639..0000000
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs	
+++ /dev/null
@@ -1,101 +0,0 @@
-using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.EntityFrameworkCore.Metadata.Internal;
-using Portfolio.Application.Services.PokemonService;
-using Portfolio.Domain.Features.Pokemon;
-
-namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
-{
-    public partial class PokemonAddForm
-    {
-        [Parameter] 
-        public EventCallback<Pokemon> OnPokemonReady { get; set; }
-        [Parameter]
-        public EventCallback RemoveForm { get; set; }
-        [Parameter]
-        public bool mostRecentForm { get; set; }
-
-        protected static readonly string[] PokemonTypes = new[]
-        {
-        "Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice",
-        "Steel","Fighting","Psychic","Dark","Fairy","Ghost","Dragon"
-        };
-        protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" };
-        protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" };
-
-
-        private bool HideLabel { get; set; } = true;
-        private bool showErrors { get; set; } = false;
-
-        private Pokemon NewPokemon = new Pokemon
-        {
-            PokemonId = 0, // Or any default ID logic
-            PokemonName = string.Empty, // Required fields cannot be null
-            SleepType = string.Empty,
-            Speciality = string.Empty,
-            IsVariation = false
-        };
-
-        private void Toggle() => HideLabel = !HideLabel;
-
-
-        private string GetRoundingClass()
-        {
-            if (!HideLabel) {
-                return "rounded-start";
-            }
-            return "rounded-start rounded-end";
-        }
-
-        // Minimal "complete" check (no data annotations needed)
-        private bool IsComplete =>
-            NewPokemon.PokemonId > 0 &&
-            !string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
-            !string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
-            !string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
-            !string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
-            (!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
-
-        private IEnumerable<string> MissingFields()
-        {
-            if (NewPokemon.PokemonId <= 0) yield return "Pokédex #";
-            if (string.IsNullOrWhiteSpace(NewPokemon.PokemonName)) yield return "Name";
-            if (string.IsNullOrWhiteSpace(NewPokemon.PokemonType)) yield return "Type";
-            if (string.IsNullOrWhiteSpace(NewPokemon.SleepType)) yield return "Sleep Type";
-            if (string.IsNullOrWhiteSpace(NewPokemon.Speciality)) yield return "Specialty";
-            if (NewPokemon.IsVariation && string.IsNullOrWhiteSpace(NewPokemon.VariationName)) yield return "Variation Name";
-        }
-
-        private async Task HandleRemove()
-        {
-            await RemoveForm.InvokeAsync();
-        }
-
-        private async Task SendPokemon()
-        {
-            if (!IsComplete)
-            {
-                showErrors = true;
-                StateHasChanged();
-                return;
-            }
-
-            // Optionally send a copy to avoid later mutation by the child
-            var copy = new Pokemon
-            {
-                PokemonId = NewPokemon.PokemonId,
-                PokemonName = NewPokemon.PokemonName,
-                PokemonType = NewPokemon.PokemonType,
-                SleepType = NewPokemon.SleepType,
-                Speciality = NewPokemon.Speciality,
-                IsVariation = NewPokemon.IsVariation,
-                VariationName = NewPokemon.VariationName,
-                PokemonImageUrl = NewPokemon.PokemonImageUrl,
-                PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl,
-                FlavorText = NewPokemon.FlavorText
-            };
-
-            await OnPokemonReady.InvokeAsync(copy);
-        }
-    }
-}
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownloadButton.razor
similarity index 100%
rename from Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor
rename to Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownloadButton.razor
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownloadButton.razor.cs
similarity index 95%
rename from Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs
rename to Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownloadButton.razor.cs
index 3a67e1d..607cc33 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownloadButton.razor.cs	
@@ -5,7 +5,7 @@ using System.Text.Json;
 
 namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 {
-    partial class PokemonDownload
+    partial class PokemonDownloadButton
     {
         [Parameter]
         public List<Pokemon> _Pokemon { get; set; }
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor
new file mode 100644
index 0000000..7537f3a
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor	
@@ -0,0 +1,306 @@
+@inject IPokemonService PokemonService
+
+@if(formUse == "ADD")
+{
+    <div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
+        <EditForm class="col" Model="NewPokemon">
+            <DataAnnotationsValidator />
+
+            <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
+
+            <!-- Pokemon Number and Name -->
+            <div class="row mt-1">
+                <div class="col input-group mb-2">
+                    <span class="input-group-text text-sm-center rounded-start">#</span>
+                    <InputNumber min="1"
+                                 placeholder="Pokedex #"
+                                 id="PokemonId"
+                                 @bind-Value="NewPokemon.PokemonId"
+                                 class="form-control "
+                                 type="number" />
+                    <InputText placeholder="Pokemon Name"
+                               id="PokemonName"
+                               @bind-Value="NewPokemon.PokemonName"
+                               class="form-control w-50 rounded-end" />
+                </div>
+            </div>
+
+            <!-- Variation Check -->
+            <div class="d-flex flex-row justify-content-start input-group ">
+                <InputCheckbox id="IsVariation"
+                               @bind-Value="NewPokemon.IsVariation"
+                               @onclick="@Toggle"
+                               class="form-check-input p-3 rounded" />
+                <span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
+                <InputText placeholder="How So?"
+                           id="VariationName"
+                           @bind-Value="NewPokemon.VariationName"
+                           class="form-control rounded-end"
+                           hidden="@HideLabel" />
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            <!-- Pokemon Type -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
+                    <InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
+                        <option disabled value="" selected>Select...</option>
+                        @foreach (var pt in PokemonTypes)
+                        {
+                            <option value="@pt">@pt</option>
+                        }
+                    </InputSelect>
+                </div>
+
+            </div>
+
+            <!-- Pokemon Sleep Type, Specialty -->
+            <div class="row mb-3 mx-0">
+                <!-- Sleep Type -->
+                <div class="col ps-0 pe-1">
+                    <div class="row input-group m-auto">
+                        <span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
+                    </div>
+                    <div class="row input-group m-auto">
+                        <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
+                            <option disabled value="" selected>Select...</option>
+                            @foreach (var st in SleepTypes)
+                            {
+                                <option value="@st">@st</option>
+                            }
+                        </InputSelect>
+                    </div>
+                </div>
+                <!-- Speciality -->
+                <div class="col ps-1 pe-0">
+                    <div class="row input-group m-auto">
+                        <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
+                    </div>
+                    <div class="row input-group m-auto">
+                        <InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
+                            <option disabled value="" selected>Select...</option>
+                            @foreach (var sp in Specialities)
+                            {
+                                <option value="@sp">@sp</option>
+                            }
+                        </InputSelect>
+                    </div>
+                </div>
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            <!-- Images -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
+                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
+                    <InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
+                </div>
+            </div>
+
+            <!-- Flavor -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
+                    <InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
+                </div>
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            @if (showErrors && !IsComplete)
+            {
+                <div class="alert alert-warning mt-2">
+                    Please complete: @string.Join(", ", MissingFields())
+                </div>
+            }
+
+            <div class="d-flex mt-3 justify-content-center gap-3">
+                <button type="button"
+                        class="btn btn-primary rounded p-1 px-0"
+                        @onclick="@SendPokemon"
+                        disabled="@( !IsComplete )">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
+                        <path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
+                        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
+                    </svg>
+                </button>
+                @if (mostRecentForm)
+                {
+                    <button type="button"
+                            class="btn btn-danger rounded p-1 px-0"
+                            @onclick="@HandleRemove">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
+                            <path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
+                            <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
+                        </svg>
+                    </button>
+                }
+            </div>
+        </EditForm>
+    </div>
+
+}
+else if (formUse == "EDIT")
+{
+    <div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
+        <EditForm class="col" Model="PokemonToEdit">
+            <DataAnnotationsValidator />
+
+            <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">Edit Pokemon</p></div>
+
+            <!-- Pokemon Number and Name -->
+            <div class="row mt-1">
+                <div class="col input-group mb-2">
+                    <span class="input-group-text text-sm-center rounded-start">#</span>
+                    <InputNumber min="1"
+                                 placeholder="Pokedex #"
+                                 id="PokemonId"
+                                 @bind-Value="PokemonToEdit.PokemonId"
+                                 class="form-control "
+                                 type="number" />
+                    <InputText placeholder="Pokemon Name"
+                               id="PokemonName"
+                               @bind-Value="PokemonToEdit.PokemonName"
+                               class="form-control w-50 rounded-end" />
+                </div>
+            </div>
+
+            <!-- Variation Check -->
+            <div class="d-flex flex-row justify-content-start input-group ">
+                <InputCheckbox id="IsVariation"
+                               @bind-Value="PokemonToEdit.IsVariation"
+                               @onclick="@Toggle"
+                               class="form-check-input p-3 rounded" />
+                <span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
+                <InputText placeholder="How So?"
+                           id="VariationName"
+                           @bind-Value="PokemonToEdit.VariationName"
+                           class="form-control rounded-end"
+                           hidden="@HideLabel" />
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            <!-- Pokemon Type -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
+                    <InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end">
+                        <option disabled value="" selected>Select...</option>
+                        @foreach (var pt in PokemonTypes)
+                        {
+                            <option value="@pt">@pt</option>
+                        }
+                    </InputSelect>
+                </div>
+
+            </div>
+
+            <!-- Pokemon Sleep Type, Specialty -->
+            <div class="row mb-3 mx-0">
+                <!-- Sleep Type -->
+                <div class="col ps-0 pe-1">
+                    <div class="row input-group m-auto">
+                        <span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
+                    </div>
+                    <div class="row input-group m-auto">
+                        <InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom">
+                            <option disabled value="" selected>Select...</option>
+                            @foreach (var st in SleepTypes)
+                            {
+                                <option value="@st">@st</option>
+                            }
+                        </InputSelect>
+                    </div>
+                </div>
+                <!-- Speciality -->
+                <div class="col ps-1 pe-0">
+                    <div class="row input-group m-auto">
+                        <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
+                    </div>
+                    <div class="row input-group m-auto">
+                        <InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom">
+                            <option disabled value="" selected>Select...</option>
+                            @foreach (var sp in Specialities)
+                            {
+                                <option value="@sp">@sp</option>
+                            }
+                        </InputSelect>
+                    </div>
+                </div>
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            <!-- Images -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
+                    <InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" />
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
+                    <InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" />
+                </div>
+            </div>
+
+            <!-- Flavor -->
+            <div class="row mb-2">
+                <div class="input-group m-auto">
+                    <span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
+                    <InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" />
+                </div>
+            </div>
+
+            <!-- <br> -->
+            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
+
+            @if (showErrors && !IsComplete)
+            {
+                <div class="alert alert-warning mt-2">
+                    Please complete: @string.Join(", ", MissingFields())
+                </div>
+            }
+
+            <div class="d-flex mt-3 justify-content-center gap-3">
+                <button type="button"
+                        class="btn btn-success rounded p-1 px-0"
+                        @onclick="@SendPokemon"
+                        >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
+                        <path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
+                        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
+                    </svg>
+                </button>
+                @if (mostRecentForm)
+                {
+                    <button type="button"
+                            class="btn btn-warning rounded p-1 px-0"
+                            @onclick="@HandleRemove">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-earmark-easel" viewBox="0 0 16 16">
+                            <path d="M8.5 6a.5.5 0 1 0-1 0h-2A1.5 1.5 0 0 0 4 7.5v2A1.5 1.5 0 0 0 5.5 11h.473l-.447 1.342a.5.5 0 1 0 .948.316L7.027 11H7.5v1a.5.5 0 0 0 1 0v-1h.473l.553 1.658a.5.5 0 1 0 .948-.316L10.027 11h.473A1.5 1.5 0 0 0 12 9.5v-2A1.5 1.5 0 0 0 10.5 6zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z" />
+                            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z" />
+                        </svg>
+                    </button>
+                }
+            </div>
+        </EditForm>
+    </div>
+}
+
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs
new file mode 100644
index 0000000..66194fd
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.cs	
@@ -0,0 +1,161 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.EntityFrameworkCore.Metadata.Internal;
+using Portfolio.Application.Services.PokemonService;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
+{
+    public partial class PokemonForm
+    {
+        // To Add or Edit Pokemon
+        [Parameter]
+        public string formUse { get; set; }
+
+        
+        [Parameter]
+        public EventCallback<Pokemon> OnPokemonReady { get; set; }
+        [Parameter]
+        public EventCallback RemoveForm { get; set; }
+
+        // When Adding
+        [Parameter]
+        public bool mostRecentForm { get; set; }
+        private Pokemon NewPokemon = new Pokemon
+        {
+            PokemonId = 0, // Or any default ID logic
+            PokemonName = string.Empty, // Required fields cannot be null
+            SleepType = string.Empty,
+            Speciality = string.Empty,
+            IsVariation = false
+        };
+
+        // When Editing
+        [Parameter]
+        public Pokemon? PokemonToEdit { get; set; }
+        private int PokemonToEditId { get; set; }
+
+
+        // General Form
+        protected static readonly string[] PokemonTypes = new[]
+        {
+        "Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice",
+        "Steel","Fighting","Psychic","Dark","Fairy","Ghost","Dragon"
+        };
+        protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" };
+        protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" };
+
+
+        private bool HideLabel { get; set; }
+        private bool showErrors { get; set; } = false;
+
+
+        protected override async Task OnInitializedAsync()
+        {
+            if (formUse == "EDIT")
+            {
+                if (PokemonToEdit.IsVariation == true)
+                {
+                    HideLabel = false;
+                }
+                PokemonToEditId = PokemonToEdit.Id;
+            }
+            else
+            {
+                HideLabel = true;
+            }
+        }
+
+
+        private void Toggle()
+        {
+            HideLabel = !HideLabel;
+        } 
+
+
+        // CSS-function to get proper styling for form elements
+        private string GetRoundingClass()
+        {
+            if (!HideLabel)
+            {
+                return "rounded-start";
+            }
+            return "rounded-start rounded-end";
+        }
+
+        // Minimal "complete" check (no data annotations needed)
+        private bool IsComplete =>
+            NewPokemon.PokemonId > 0 &&
+            !string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
+            !string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
+            !string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
+            !string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
+            (!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
+
+        private IEnumerable<string> MissingFields()
+        {
+            if (NewPokemon.PokemonId <= 0) yield return "Pokédex #";
+            if (string.IsNullOrWhiteSpace(NewPokemon.PokemonName)) yield return "Name";
+            if (string.IsNullOrWhiteSpace(NewPokemon.PokemonType)) yield return "Type";
+            if (string.IsNullOrWhiteSpace(NewPokemon.SleepType)) yield return "Sleep Type";
+            if (string.IsNullOrWhiteSpace(NewPokemon.Speciality)) yield return "Specialty";
+            if (NewPokemon.IsVariation && string.IsNullOrWhiteSpace(NewPokemon.VariationName)) yield return "Variation Name";
+        }
+
+        private async Task HandleRemove()
+        {
+            await RemoveForm.InvokeAsync();
+        }
+
+        private async Task SendPokemon()
+        {
+            if(formUse == "ADD")
+            {
+                if (!IsComplete)
+                {
+                    showErrors = true;
+                    StateHasChanged();
+                    return;
+                }
+
+                // Optionally send a copy to avoid later mutation by the child
+                var copy = new Pokemon
+                {
+                    PokemonId = NewPokemon.PokemonId,
+                    PokemonName = NewPokemon.PokemonName,
+                    PokemonType = NewPokemon.PokemonType,
+                    SleepType = NewPokemon.SleepType,
+                    Speciality = NewPokemon.Speciality,
+                    IsVariation = NewPokemon.IsVariation,
+                    VariationName = NewPokemon.VariationName,
+                    PokemonImageUrl = NewPokemon.PokemonImageUrl,
+                    PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl,
+                    FlavorText = NewPokemon.FlavorText
+                };
+
+                await OnPokemonReady.InvokeAsync(copy);
+            }
+            else
+            {
+                // Optionally send a copy to avoid later mutation by the child
+                var edit = new Pokemon
+                {
+                    Id = PokemonToEditId,
+                    PokemonId = PokemonToEdit.PokemonId,
+                    PokemonName = PokemonToEdit.PokemonName,
+                    PokemonType = PokemonToEdit.PokemonType,
+                    SleepType = PokemonToEdit.SleepType,
+                    Speciality = PokemonToEdit.Speciality,
+                    IsVariation = PokemonToEdit.IsVariation,
+                    VariationName = PokemonToEdit.VariationName,
+                    PokemonImageUrl = PokemonToEdit.PokemonImageUrl,
+                    PokemonShinyImageUrl = PokemonToEdit.PokemonShinyImageUrl,
+                    FlavorText = PokemonToEdit.FlavorText
+                };
+
+                await OnPokemonReady.InvokeAsync(edit);
+            }
+
+        }
+    }
+}
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css
similarity index 95%
rename from Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css
rename to Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css
index 8a32a45..8cca838 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonForm.razor.css	
@@ -8,7 +8,7 @@ $display-font-sizes: (
   6: 2.5rem
 );
 
-.create-container {
+.pokemon-form-container {
     position: relative;
     width: 100%;
     max-width: 390px; /* Prevent it from getting too huge */
@@ -24,5 +24,4 @@ $display-font-sizes: (
 .checkbox-styling {
     width: 100px;
     height: 100px;
-
-}
\ No newline at end of file
+}
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor
index e4e6721..f39567f 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor	
@@ -21,7 +21,3 @@
         }
     </div>
 </div>
-
-<style>
-    
-</style>
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 7779a51..8237713 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -33,7 +33,7 @@
                     <div class="badge bg-info">
                         <p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
                     </div>
-                    <PokemonDownload _Pokemon="pokemons" />
+                    <PokemonDownloadButton _Pokemon="pokemons" />
                 </div>
 
             </div>
@@ -104,7 +104,7 @@
                                     </td>
 
                                     <!-- Section 2: Pokemon # -->
-                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
+                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId ++ @pokemon.Id</th>
 
 
                                     <!-- Section 3: Pokemon Name -->
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor
index 305bb05..62403e8 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor	
@@ -25,7 +25,8 @@ else
 
                 <div class="mx-1 align-content-center">
                     <div class="addcard">
-                        <PokemonAddForm 
+                        <PokemonForm 
+                            formUse="ADD"
                             OnPokemonReady="ReceivePokemon1" 
                             mostRecentForm=false
                         />
@@ -44,9 +45,10 @@ else
                 {
                     <div class="mx-1 align-content-center">
                         <div class="addcard">
-                            <PokemonAddForm OnPokemonReady="ReceivePokemon2"
-                                            RemoveForm="TogglePokemon2FormView"
-                                            mostRecentForm="@pokemon2FormView" />
+                            <PokemonForm OnPokemonReady="ReceivePokemon2"
+                                formUse="ADD"
+                                RemoveForm="TogglePokemon2FormView"
+                                mostRecentForm="@pokemon2FormView" />
                         </div>
                     </div>
                     <div class="mx-1 align-content-center">
@@ -58,16 +60,18 @@ else
                 {
                     <div class="mx-1 align-content-center">
                         <div class="addcard">
-                            <PokemonAddForm OnPokemonReady="ReceivePokemon2"
-                                            RemoveForm="TogglePokemon2FormView"
-                                            mostRecentForm="@pokemon2FormView" />
+                            <PokemonForm OnPokemonReady="ReceivePokemon2"
+                                formUse="ADD"
+                                RemoveForm="TogglePokemon2FormView"
+                                mostRecentForm="@pokemon2FormView" />
                         </div>
                     </div>
                     <div class="mx-1 align-content-center">
                         <div class="addcard">
-                            <PokemonAddForm OnPokemonReady="ReceivePokemon3"
-                                            RemoveForm="TogglePokemon3FormView"
-                                            mostRecentForm="@pokemon3FormView" />
+                            <PokemonForm OnPokemonReady="ReceivePokemon3"
+                                formUse="ADD"
+                                RemoveForm="TogglePokemon3FormView"
+                                mostRecentForm="@pokemon3FormView" />
                         </div>
                     </div>
                 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor
index d271796..c04951e 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor	
@@ -1,7 +1,7 @@
 @page "/pokemonsleep/edit/{id:int}"
 @inject IPokemonService PokemonService
 @inject NavigationManager Navigation
-@inject IJSRuntime JSRuntime
+@inject IJSRuntime JS
 
 @attribute [StreamRendering]
 @rendermode InteractiveServer
@@ -12,122 +12,33 @@
 
 @if (pokemon == null)
 {
-    <p><em>Loading...</em></p>
+    <Loading />
 }
 else
 {
-    <!-- Total Componenet-->
-    <div class="w-50 mt-3 m-auto bg-info edit-container">
 
-        <!-- Header -->
-        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
-            <div class="row">
-                <div class="col-12 text-center">
-                    <h2 class="text-info">Edit Pokémon</h2>
+    <div class="container mx-0 px-0">
+        <div class="row mt-5">
+            <div class="d-flex justify-content-evenly h-100 p-0">
+
+                <div class="mx-1 align-content-center">
+                    <div class="addcard">
+                        <PokemonForm 
+                            formUse="EDIT"
+                            OnPokemonReady="ReceivePokemon"
+                            RemoveForm="Cancel"
+                            mostRecentForm=true
+                            PokemonToEdit="pokemon"
+                        />
+                    </div>
                 </div>
             </div>
         </div>
-
-        <!-- Body -->
-        <div class="p-3 w-100 flex-column ">
-            <EditForm class="col mb-3" Model="pokemon" OnValidSubmit="HandleSubmit">
-                <DataAnnotationsValidator />
-
-                <!-- Dex Number and Name -->
-                <div class="row ">
-                    <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  />
-                    </div>
-                </div>
-
-                <!-- Pokemon Type, Sleep Type, and Speciality -->
-                <div class="row">
-                    <!-- Pokemon Type -->
-                    <div class="col mb-3 m-auto">
-                        <label for="PokemonType" class="form-label">Pokemon Type</label>
-                        <InputSelect id="PokemonType" @bind-Value="pokemon.PokemonType" class="form-select">
-                            <option dsabled value="">Select Type</option>
-                            <option value="Grass">Grass</option>
-                            <option value="Fire">Fire</option>
-                            <option value="Water">Water</option>
-                            <option value="Normal">Normal</option>
-                            <option value="Flying">Flying</option>
-                            <option value="Bug">Bug</option>
-                            <option value="Poison">Poison</option>
-                            <option value="Electric">Electric</option>
-                            <option value="Ground">Ground</option>
-                            <option value="Rock">Rock</option>
-                            <option value="Ice">Ice</option>
-                            <option value="Steel">Steel</option>
-                            <option value="Fighting">Fighting</option>
-                            <option value="Psychic">Psychic</option>
-                            <option value="Dark">Dark</option>
-                            <option value="Fairy">Fairy</option>
-                            <option value="Ghost">Ghost</option>
-                            <option value="Dragon">Dragon</option>
-                        </InputSelect>
-                    </div>
-                    <!-- Sleep Type -->
-                    <div class="col mb-3 m-auto">
-                        <label for="SleepType" class="form-label">Sleep Type</label>
-                        <InputSelect id="SleepType" @bind-Value="pokemon.SleepType" class="form-select">
-                            <option value="Dozing">Dozing</option>
-                            <option value="Snoozing">Snoozing</option>
-                            <option value="Slumbering">Slumbering</option>
-                        </InputSelect>
-                    </div>
-                    <!-- Speciality-->
-                    <div class="col mb-3 m-auto">
-                        <label for="Speciality" class="form-label">Specialty</label>
-                        <InputSelect id="Speciality" @bind-Value="pokemon.Speciality" class="form-select">
-                            <option value="Berries">Berries</option>
-                            <option value="Ingredients">Ingredients</option>
-                            <option value="Skills">Skills</option>
-                        </InputSelect>
-                    </div>
-                </div>
-                <!-- Variation Check -->
-                <div class="row">
-                    <div class="input-group mb-3">
-                        <!-- Variation Check -->
-                        <div class=" d-inline-flex">
-                            <InputCheckbox id="IsVariation" @bind-Value="pokemon.IsVariation" @onclick="@Toggle" class="form-check-input checkbox-styling p-3 mt-1" />
-                            <span for="IsVariation" class="input-group-text m-1">Variation?</span>
-                        </div>
-
-                        <!-- Variation Region Input -->
-                        <div class="w-75 mx-2 mt-1">
-
-                            <InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="pokemon.VariationName" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-                
-
-                <!-- Image URL Input -->
-                <div class="row mb-3 m-auto">
-                    <label for="ImageUrl" class="form-label">Base Image URL</label>
-                    <InputText id="ImageUrl" @bind-Value="pokemon.PokemonImageUrl" class="form-control" />
-                </div>
-                <!-- Shiny Image URL Input -->
-                <div class="row mb-3 m-auto">
-                    <label for="ImageUrl" class="form-label">Shiny Image URL</label>
-                    <InputText id="ImageUrl" @bind-Value="pokemon.PokemonShinyImageUrl" class="form-control" />
-                </div>
-                <!-- Flavor Text Input -->
-                <div class="row mb-3 m-auto">
-                    <label for="FlavorText" class="form-label">Flavor Text</label>
-                    <InputText id="FlavorText" @bind-Value="pokemon.FlavorText" class="form-control" />
-                </div>
-
-                <!-- Form Buttons -->
-                <div class="d-flex justify-content-between">
-                    <button type="button" class="btn btn-secondary mb-3" @onclick="Cancel">Cancel</button>
-                    <button type="submit" class="btn btn-primary mb-3">Save Changes</button>
-                </div>
-            </EditForm>
+    </div>
+    <div class="d-flex justify-content-center">
+        <div class="btn-group">
+            <button @onclick="@HandleSubmit" class="btn btn-primary rounded">Edit Pokemon</button>
         </div>
     </div>
+
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.cs
index d5a8088..5548456 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.cs	
@@ -14,16 +14,28 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
             pokemon = await PokemonService.GetPokemonByIdAsync(Id);
         }
 
+        private async Task ReceivePokemon(Pokemon p)
+        {
+            // Save received pokemon as Pokemon 1
+            pokemon = p;
+
+            // Server console (Blazor Server)
+            Console.WriteLine($"[Pokemon 1] #{pokemon.PokemonId} {pokemon.PokemonName} | {pokemon.PokemonType} | {pokemon.SleepType} | {pokemon.Speciality} | Var:{pokemon.IsVariation} {pokemon.VariationName}");
+
+            // Browser console
+            await JS.InvokeVoidAsync("console.log", "Pokemon 1:", pokemon);
+        }
+
         private async Task HandleSubmit()
         {
             await PokemonService.UpdatePokemonAsync(pokemon);
             //Navigation.NavigateTo("/pokemonsleep");
-            await JSRuntime.InvokeVoidAsync("history.back");
+            await JS.InvokeVoidAsync("history.back");
         }
 
         private async void Cancel()
         {
-            await JSRuntime.InvokeVoidAsync("history.back");
+            await JS.InvokeVoidAsync("history.back");
 
         }
 
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css
index c83bb0d..c2d1fb6 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css	
@@ -5,3 +5,13 @@
     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;
 }
+
+.addcard {
+    width: 100%;
+    max-width: 30rem;
+    flex: 0 0 auto; /* prevent flex shrink/grow */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+}
\ No newline at end of file