Editing view to be compatible with new bootstrap-brite.css. Still compatible with bootstrap-lumen.css

Portfolio.Application/Services/PokemonService/IPokemonService.cs

@@ -10,7 +10,12 @@ namespace Portfolio.Application.Services.PokemonService
     public interface IPokemonService
     {
         Task<List<Pokemon>> GetAllPokemonAsync();
+        Task<Pokemon> GetPokemonByPokemonIdAsync(int id);
         Task<Pokemon> GetPokemonByIdAsync(int id);
+        Task<List<int>> GetAllPokemonIdsAsync();
+        Task<int?> GetPreviousPokemonIdAsync(int id);
+        Task<int?> GetNextPokemonIdAsync(int id);
+        Task<int?> GetVariationPokemonIdAsync(int id);
         Task AddPokemonAsync(Pokemon pokemon);
         Task DeletePokemonAsync(int pokemonId);
         Task UpdatePokemonAsync(Pokemon pokemon);

Portfolio.Application/Services/PokemonService/PokemonService.cs

@@ -33,14 +33,40 @@ namespace Portfolio.Application.Services.PokemonService
 
         }
 
+        public async Task<List<int>> GetAllPokemonIdsAsync()
+        {
+            return await _pokemonRepository.GetAllPokemonIdsAsync();
+        }
+
+        public async Task<int?> GetNextPokemonIdAsync(int id)
+        {
+            return await _pokemonRepository.GetNextPokemonIdAsync(id);
+        }
+
+        public async Task<Pokemon> GetPokemonByPokemonIdAsync(int id)
+        {
+            return await _pokemonRepository.GetPokemonByPokemonIdAsync(id);
+        }
+
         public async Task<Pokemon> GetPokemonByIdAsync(int id)
         {
             return await _pokemonRepository.GetPokemonByIdAsync(id);
         }
 
+        public async Task<int?> GetPreviousPokemonIdAsync(int id)
+        {
+            return await _pokemonRepository.GetPreviousPokemonIdAsync(id);
+
+        }
+
         public async Task UpdatePokemonAsync(Pokemon pokemon)
         {
             await _pokemonRepository.UpdatePokemonAsync(pokemon);
         }
+
+        public async Task<int?> GetVariationPokemonIdAsync(int id)
+        {
+            return await _pokemonRepository.GetVariationPokemonIdAsync(id);
+        }
     }
 }

Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs

@@ -10,6 +10,11 @@ namespace Portfolio.Domain.Features.Pokemon
     {
         Task<List<Pokemon>> GetAllPokemonsAsync();
         Task<Pokemon> GetPokemonByIdAsync(int id);
+        Task<Pokemon> GetPokemonByPokemonIdAsync(int id);
+        Task<List<int>> GetAllPokemonIdsAsync();
+        Task<int?> GetPreviousPokemonIdAsync(int currentPokemonId);
+        Task<int?> GetNextPokemonIdAsync(int currentPokemonId);
+        Task<int?> GetVariationPokemonIdAsync(int pokemonId);
         Task AddPokemonAsync(Pokemon pokemon);
         Task DeletePokemonAsync(int pokemonId);
         Task UpdatePokemonAsync(Pokemon pokemon);

Portfolio.Domain/Features/Pokemon/Pokemon.cs

@@ -13,10 +13,12 @@ namespace Portfolio.Domain.Features.Pokemon
         public required string PokemonName { get; set; }
         public bool IsVariation { get; set; } = false;
         public string? VariationName { get; set; }
+        public string? PokemonType { get; set; }
         public required string SleepType { get; set; }
         public required string Speciality { get; set; }
         public string? PokemonImageUrl { get; set; }
         public string? PokemonShinyImageUrl { get; set; }
+        public string? FlavorText { get; set; }
 
     }
 

Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.Designer.cs

@@ -0,0 +1,124 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Portfolio.Infrastructure;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20250404172651_include_pokemon_type")]
+    partial class include_pokemon_type
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.2")
+                .HasAnnotation("Relational:MaxIdentifierLength", 128);
+
+            SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon.Pokemon", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<bool>("IsVariation")
+                        .HasColumnType("bit");
+
+                    b.Property<int>("PokemonId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("PokemonImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonName")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonShinyImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SleepType")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Speciality")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("VariationName")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Pokemons");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Natures.PokemonNature", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRating")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRating")
+                        .HasColumnType("int");
+
+                    b.Property<string>("Nature")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<int>("SkillRating")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonNatures");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Subskills.PokemonSubskill", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("SkillRank")
+                        .HasColumnType("int");
+
+                    b.Property<string>("SubSkill")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonSubskills");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.cs

@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    /// <inheritdoc />
+    public partial class include_pokemon_type : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "PokemonType",
+                table: "Pokemons",
+                type: "nvarchar(max)",
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "PokemonType",
+                table: "Pokemons");
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.Designer.cs

@@ -0,0 +1,127 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Portfolio.Infrastructure;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20250404173359_include_flavortext")]
+    partial class include_flavortext
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.2")
+                .HasAnnotation("Relational:MaxIdentifierLength", 128);
+
+            SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon.Pokemon", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("FlavorText")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<bool>("IsVariation")
+                        .HasColumnType("bit");
+
+                    b.Property<int>("PokemonId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("PokemonImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonName")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonShinyImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SleepType")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Speciality")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("VariationName")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Pokemons");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Natures.PokemonNature", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRating")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRating")
+                        .HasColumnType("int");
+
+                    b.Property<string>("Nature")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<int>("SkillRating")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonNatures");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Subskills.PokemonSubskill", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("SkillRank")
+                        .HasColumnType("int");
+
+                    b.Property<string>("SubSkill")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonSubskills");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.cs

@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    /// <inheritdoc />
+    public partial class include_flavortext : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "FlavorText",
+                table: "Pokemons",
+                type: "nvarchar(max)",
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "FlavorText",
+                table: "Pokemons");
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/ApplicationDbContextModelSnapshot.cs

@@ -29,6 +29,9 @@ namespace Portfolio.Infrastructure.Migrations
 
                     SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
 
+                    b.Property<string>("FlavorText")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<bool>("IsVariation")
                         .HasColumnType("bit");
 
@@ -45,6 +48,9 @@ namespace Portfolio.Infrastructure.Migrations
                     b.Property<string>("PokemonShinyImageUrl")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SleepType")
                         .IsRequired()
                         .HasColumnType("nvarchar(max)");

Portfolio.Infrastructure/Repositories/PokemonRepository.cs

@@ -21,11 +21,14 @@ namespace Portfolio.Infrastructure.Repositories
         {
             return await _context.Pokemons.ToListAsync();
         }
+        public async Task<Pokemon> GetPokemonByPokemonIdAsync(int id)
+        {
+            return await _context.Pokemons.FirstOrDefaultAsync(p => p.PokemonId == id);
+        }
         public async Task<Pokemon> GetPokemonByIdAsync(int id)
         {
             return await _context.Pokemons.FirstOrDefaultAsync(p => p.Id == id);
         }
-
         public async Task AddPokemonAsync(Pokemon pokemon)
         {
             _context.Pokemons.Add(pokemon);
@@ -46,5 +49,68 @@ namespace Portfolio.Infrastructure.Repositories
             _context.Pokemons.Update(pokemon);
             await _context.SaveChangesAsync();
         }
+
+        public async Task<int?> GetPreviousPokemonIdAsync(int currentPokemonId)
+        {
+            // Get the previous Pokémon's PokemonId
+            var prevPokemonId = await _context.Pokemons
+                .Where(p => p.PokemonId < currentPokemonId)
+                .OrderByDescending(p => p.PokemonId)
+                .Select(p => (int?)p.PokemonId)
+                .FirstOrDefaultAsync();
+
+            // If no previous PokemonId is found, wrap around to the last one
+            if (prevPokemonId == null)
+            {
+                prevPokemonId = await _context.Pokemons
+                    .OrderByDescending(p => p.PokemonId)  // Get the last PokemonId
+                    .Select(p => (int?)p.PokemonId)
+                    .FirstOrDefaultAsync();
+            }
+
+            return prevPokemonId;
+        }
+
+        public async Task<int?> GetNextPokemonIdAsync(int currentPokemonId)
+        {
+            // Get the next Pokémon's PokemonId
+            var nextPokemonId = await _context.Pokemons
+                .Where(p => p.PokemonId > currentPokemonId)
+                .OrderBy(p => p.PokemonId)
+                .Select(p => (int?)p.PokemonId)
+                .FirstOrDefaultAsync();
+
+            // If no next PokemonId is found, wrap around to the first one
+            if (nextPokemonId == null)
+            {
+                nextPokemonId = await _context.Pokemons
+                    .OrderBy(p => p.PokemonId)  // Get the first PokemonId
+                    .Select(p => (int?)p.PokemonId)
+                    .FirstOrDefaultAsync();
+            }
+
+            return nextPokemonId;
+        }
+
+        public async Task<List<int>> GetAllPokemonIdsAsync()
+        {
+            return await _context.Pokemons
+                .OrderBy(p => p.PokemonId)  // Ensure it's ordered by PokemonId
+                .Select(p => p.PokemonId)
+                .ToListAsync();
+        }
+
+        public async Task<int?> GetVariationPokemonIdAsync(int pokemonId)
+        {
+            // Find a variation for the given PokemonId (where IsVariation is true)
+            var variation = await _context.Pokemons
+                .Where(p => p.PokemonId == pokemonId && p.IsVariation)
+                .FirstOrDefaultAsync();
+
+            // Return the Id of the variation, or null if no variation is found
+            return variation?.Id;
+        }
+
+
     }
 }

Portfolio.WebUI.Server/Components/App.razor

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
 
-    <link rel="stylesheet" href="bootstrap/bootstrap-lumen.css" /> <!-- app.css -->
+    <link rel="stylesheet" href="bootstrap/bootstrap-brite.css" /> <!-- app.css -->
     <link rel="stylesheet" href="Portfolio.WebUI.Server.styles.css" />
     
     <link rel="icon" type="image/png" href="favicon.png" />

Portfolio.WebUI.Server/Components/Component/Loading.razor

@@ -0,0 +1,12 @@
+<!--
+        https://codepen.io/dissimulate/pen/nmJyyg
+-->
+<div id="load">
+    <div>G</div>
+    <div>N</div>
+    <div>I</div>
+    <div>D</div>
+    <div>A</div>
+    <div>O</div>
+    <div>L</div>
+</div>

Portfolio.WebUI.Server/Components/Component/Loading.razor.css

@@ -0,0 +1,195 @@
+body {
+    background: #000;
+}
+
+#load {
+    position: absolute;
+    width: 600px;
+    height: 36px;
+    left: 50%;
+    top: 40%;
+    margin-left: -300px;
+    overflow: visible;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+    #load div {
+        position: absolute;
+        width: 20px;
+        height: 36px;
+        opacity: 0;
+        font-family: Helvetica, Arial, sans-serif;
+        animation: move 3s linear infinite;
+        -o-animation: move 3s linear infinite;
+        -moz-animation: move 3s linear infinite;
+        -webkit-animation: move 3s linear infinite;
+        transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -webkit-transform: rotate(180deg);
+        color: #35C4F0;
+    }
+
+        #load div:nth-child(2) {
+            animation-delay: 0.2s;
+            -o-animation-delay: 0.2s;
+            -moz-animation-delay: 0.2s;
+            -webkit-animation-delay: 0.2s;
+        }
+
+        #load div:nth-child(3) {
+            animation-delay: 0.4s;
+            -o-animation-delay: 0.4s;
+            -webkit-animation-delay: 0.4s;
+            -webkit-animation-delay: 0.4s;
+        }
+
+        #load div:nth-child(4) {
+            animation-delay: 0.6s;
+            -o-animation-delay: 0.6s;
+            -moz-animation-delay: 0.6s;
+            -webkit-animation-delay: 0.6s;
+        }
+
+        #load div:nth-child(5) {
+            animation-delay: 0.8s;
+            -o-animation-delay: 0.8s;
+            -moz-animation-delay: 0.8s;
+            -webkit-animation-delay: 0.8s;
+        }
+
+        #load div:nth-child(6) {
+            animation-delay: 1s;
+            -o-animation-delay: 1s;
+            -moz-animation-delay: 1s;
+            -webkit-animation-delay: 1s;
+        }
+
+        #load div:nth-child(7) {
+            animation-delay: 1.2s;
+            -o-animation-delay: 1.2s;
+            -moz-animation-delay: 1.2s;
+            -webkit-animation-delay: 1.2s;
+        }
+
+@keyframes move {
+    0% {
+        left: 0;
+        opacity: 0;
+    }
+
+    35% {
+        left: 41%;
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    65% {
+        left: 59%;
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        -moz-transform: rotate(-180deg);
+        -webkit-transform: rotate(-180deg);
+        -o-transform: rotate(-180deg);
+        transform: rotate(-180deg);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes move {
+    0% {
+        left: 0;
+        opacity: 0;
+    }
+
+    35% {
+        left: 41%;
+        -moz-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    65% {
+        left: 59%;
+        -moz-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        -moz-transform: rotate(-180deg);
+        transform: rotate(-180deg);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes move {
+    0% {
+        left: 0;
+        opacity: 0;
+    }
+
+    35% {
+        left: 41%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    65% {
+        left: 59%;
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        -webkit-transform: rotate(-180deg);
+        transform: rotate(-180deg);
+        opacity: 0;
+    }
+}
+
+@-o-keyframes move {
+    0% {
+        left: 0;
+        opacity: 0;
+    }
+
+    35% {
+        left: 41%;
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    65% {
+        left: 59%;
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        -o-transform: rotate(-180deg);
+        transform: rotate(-180deg);
+        opacity: 0;
+    }
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs

@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Portfolio.Domain.Features.Pokemon;
 
-namespace Portfolio.WebUI.Server.Components.Component
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 {
     public partial class PokemonBackground
     {

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor

@@ -2,7 +2,7 @@
 @rendermode InteractiveServer
 
 <div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
-    <!-- Pokemon Name and Number -->
+    <!-- Pokemon Name, Number, and Type -->
     <div class="z-3">
         @if (_pokemon.IsVariation) 
         {
@@ -15,6 +15,9 @@
         <div class="pokemon-number">
             <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
         </div>
+        <div >
+            <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
+        </div>
     </div>
 
     <!-- Pokemon Image -->
@@ -25,15 +28,24 @@
         </div>
     </div>
 
-    <div class="bg-info-subtle border rounded border-2 border-info pokemon-flavor-text">
-        <p class="">[ Pokemon Flavor Text Placeholder ]</p>
+    <div class="bg-info-subtle border rounded border-2 border-info z-3 pokemon-flavor-text">
+        @if (string.IsNullOrEmpty(_pokemon.FlavorText))
+        {
+            <p class="">[ Pokemon Flavor Text Placeholder ]</p>
+
+        }
+        else
+        {
+            <p class="fw-light ">@_pokemon.FlavorText</p>
+
+        }
     </div>
 
     <!-- Pokemon Sleep Type and Specialty Badges -->
     <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
         <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 class="m-1 badge @_pokemon.SleepType.ToLower() border-0"><p class="statText">@_pokemon.SleepType</p></div>
+            <div class="m-1 badge @_pokemon.Speciality.ToLower() border-0"><p class="statText">@_pokemon.Speciality</p></div>
         </div>
     </div>
 

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs

@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Portfolio.Domain.Features.Pokemon;
 
-namespace Portfolio.WebUI.Server.Components.Component
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 {
     public partial class PokemonCard
     {
@@ -26,5 +26,15 @@ namespace Portfolio.WebUI.Server.Components.Component
             isShiny = !isShiny;
             StateHasChanged();
         }
+
+        private string GetTypeImageUrl(string pokemonType)
+        {
+            if (string.IsNullOrEmpty(pokemonType))
+            {
+                return "https://www.serebii.net/pokemonsleep/pokemon/type/normal.png"; // Fallback image
+            }
+
+            return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
+        }
     }
 }

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css

@@ -21,12 +21,22 @@
     position: absolute;
     top: 0 !important;
     left: 0 !important;
-    margin-top: 3rem !important;
+    margin-top: 3.3rem !important;
     margin-left: 1.5rem !important;
     transform: translateY(-50%) !important;
     font-size: .75rem;
 }
 
+.pokemon-type {
+    position: absolute;
+    top: 0 !important;
+    right: 0 !important;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: .5rem !important;
+    margin-right: .5rem !important;
+}
+
 .pokemon-image {
     width: 100%; /* Look to flip-container for the width/height of image */
     height: 100%;
@@ -41,11 +51,28 @@
     left: 50% !important;
     width: 90%;
     height: 20%;
-    padding: 0.5rem;
+    padding: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     margin-top: 3rem !important;
     transform: translateX(-50%) !important;
+    display: flex; /* Centers text inside */
+    align-items: start;
+    justify-content: center; /* Horizontally centers text */
+    overflow: hidden; /* Ensures no scrollbar */
 }
 
+    .pokemon-flavor-text p {
+        margin: 0;
+        width: 100%;
+        text-align: start;
+        font-size: min(14px, 1.5vw); /* Scales font but won't exceed 14px */
+        line-height: 1.2; /* Adjust spacing for readability */
+        white-space: normal; /* Ensures wrapping */
+        word-wrap: break-word;
+        hyphens: auto;
+    }
+
 .flip-container {
     position: absolute !important;
     top: 40% !important;
@@ -123,3 +150,4 @@
 .skills {
     background-color: #47a0fc;
 }
+

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor

@@ -0,0 +1,6 @@
+@inject NavigationManager Navigation
+<button class="btn btn-warning rounded rounded-5 text-white " @onclick="() => EditPokemon(PokemonId)">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
+    </svg>
+</button>

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.EntityFrameworkCore.Metadata.Internal;
+
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
+{
+    public partial class PokemonEditButton
+    {
+        [Parameter] public int PokemonId { get; set; }
+
+        private void EditPokemon(int PokemonId)
+        {
+            Navigation.NavigateTo($"/pokemonsleep/edit/{PokemonId}");
+        }
+    }
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor

@@ -1,6 +1,6 @@
 
 <!-- Heading + Buttons -->
-<div class="top-row row w-100 mx-0 bg-secondary py-3">
+<div class="top-row row rounded-bottom-5 w-100 bg-secondary py-3">
 
     <div class="col-4"></div>
 

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor

@@ -0,0 +1,145 @@
+@inject IPokemonService PokemonService
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+
+<!-- Main UI -->
+<div class="card shadow border-0 mt-4 m-auto w-50">
+
+    <!-- Table Header -->
+    <div class="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
+        <div class="row">
+            <div class="text-center position-relative">
+                <h2 class="text-info text-decoration-underline">Available Pokémon</h2>
+                <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Table -->
+    <div class="tableFixHead">
+        <table class="table table-borderless border-0 table-secondary table-striped align-middle">
+
+            <!-- Table Head -->
+            <thead class="">
+                <tr class="">
+                    <th class="text-white text-bg-info col-2" scope="col"></th>
+                    <th class="text-white text-bg-info col-1" scope="col">#</th>
+                    <th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
+                    <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
+                    <th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
+                    <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
+                    <!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
+                </tr>
+            </thead>
+            @if(pokemons == null)
+            {
+                <tbody>
+                    <Loading />
+                </tbody>
+            }
+            else
+            {
+                <!-- Table Body -->
+                <tbody >
+                    @foreach (var pokemon in pokemons)
+                    {
+                        <tr class="">
+
+                            <!-- Section: Pokemon Image -->
+                            @{
+                                string baseUrl = pokemon.PokemonImageUrl;
+                                string shinyUrl = pokemon.PokemonShinyImageUrl;
+                            }
+                            <td style="text-align: center;">
+                                @if (shinyUrl == null)
+                                {
+                                    <div class="flip-container">
+                                        <div class="flipper">
+                                            <img class="front" src="@baseUrl" />
+                                        </div>
+                                    </div>
+
+                                }
+                                else
+                                {
+                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
+                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
+                                            <img class="front" src="@baseUrl" />
+                                            <img class="back" src="@shinyUrl" />
+                                        </div>
+                                    </div>
+
+                                }
+                            </td>
+
+                            <!-- Section 2: Pokemon # -->
+                            <th scope="row">@pokemon.PokemonId</th>
+
+
+                            <!-- Section 3: Pokemon Name -->
+                            @if (pokemon.IsVariation)   // If a Variant
+                            {
+                                @if (pokemon.VariationName == "Alolan")
+                                {
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Alolan @pokemon.PokemonName</td>
+                                }
+                                @if (pokemon.VariationName == "Paldean")
+                                {
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Paldean @pokemon.PokemonName</td>
+                                }
+                            }
+                            else // Otherwise, Base Case
+                            {
+                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> @pokemon.PokemonName</td>
+                            }
+
+
+                            <!-- Section 4: Pokemon Type -->
+                            <td>
+                                <div class="d-flex justify-content-center">
+                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:36px; height:36px;" />
+                                </div>
+                            </td>
+
+                            <!-- Section 5: Sleep Type -->
+                            <td style="">
+                                <div class="d-flex justify-content-center ">
+                                    <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
+                                </div>
+                            </td>
+
+                            <!-- Section 6: Speciality -->
+                            <td style="">
+                                <div class="d-flex justify-content-center">
+                                    <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
+                                </div>
+                            </td>
+
+                            <!-- Section 7: Functional Buttons  -->
+                            <!-- 
+                            <td>
+                                <div class="d-flex justify-content-end">
+                                    <PokemonEditButton PokemonId="pokemon.Id" />
+                                    <button class="btn btn-danger rounded rounded-5 mx-1" @onclick="() => ConfirmDelete(pokemon.Id)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+                                            <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
+                                        </svg>
+                                        </button>
+                                </div>
+                            </td>
+                            -->
+                        </tr>
+                    }
+                </tbody>
+            }
+               
+
+        </table>
+    </div>
+</div>
+
+

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs

@@ -3,7 +3,7 @@ using Microsoft.EntityFrameworkCore.Metadata.Internal;
 using Microsoft.JSInterop;
 using Portfolio.Domain.Features.Pokemon;
 
-namespace Portfolio.WebUI.Server.Components.Component
+namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 {
     public partial class PokemonTable
     {
@@ -54,5 +54,21 @@ namespace Portfolio.WebUI.Server.Components.Component
         {
             Navigation.NavigateTo($"/pokemonsleep/edit/{id}");
         }
+
+        private void ViewPokemon(int id)
+        {
+            Navigation.NavigateTo($"/pokemonsleep/pokemon/{id}");
+        }
+
+        private string GetTypeImageUrl(string pokemonType)
+        {
+            if (string.IsNullOrEmpty(pokemonType))
+            {
+                return "https://www.serebii.net/pokemonsleep/pokemon/type/normal.png"; // Fallback image
+            }
+
+            return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
+        }
+
     }
 }

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css

@@ -1,4 +1,10 @@
-
+.five-percent {
+    width: 5%;
+}
+.ten-percent {
+    width: 10%;
+}
+
 .tableFixHead {
     overflow: auto;
     height: 600px;
@@ -10,6 +16,8 @@
         z-index: 10;
     }
 
+
+
 .flip-container {
     perspective: 1000px;
     display: inline-block;
@@ -51,6 +59,8 @@
     transform: rotateY(180deg);
 }
 
+
+
 .badge {
     width: 100px;
     height: 30px;

Portfolio.WebUI.Server/Components/Component/PokemonTable.razor

@@ -1,131 +0,0 @@
-@inject IPokemonService PokemonService
-@inject IJSRuntime JS
-@inject NavigationManager Navigation
-
-@attribute [StreamRendering]
-@rendermode InteractiveServer
-
-
-<!-- Main Body -->
-@if (pokemons == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <!-- Main UI -->
-    <div class="card shadow border-0 mt-4 m-auto w-50">
-
-        <!-- Table Header -->
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
-            <div class="row">
-                <div class="col-12 text-center position-relative">
-                    <h2 class="text-info">Available Pokémon</h2>
-                    <div class="m-1 col-1 badge bg-info position-absolute top-0 end-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Table -->
-        <div class="tableFixHead">
-            <table class="table table-striped">
-
-                <!-- Table Head -->
-                <thead>
-                    <tr>
-                        <th class="text-bg-info" scope="col"></th>
-                        <th class="text-bg-info" scope="col">#</th>
-                        <th class="text-bg-info" scope="col">Pokemon</th>
-                        <th class="text-bg-info" scope="col">Sleep Type</th>
-                        <th class="text-bg-info" scope="col">Speciality</th>
-                        <th class="text-bg-info" scope="col"></th>
-                    </tr>
-                </thead>
-
-                <!-- Table Body -->
-                <tbody>
-                    @foreach (var pokemon in pokemons)
-                    {
-                        <tr>
-
-                             <!-- Section: Pokemon Image -->
-                            @{
-                                string baseUrl = pokemon.PokemonImageUrl;
-                                string shinyUrl = pokemon.PokemonShinyImageUrl;
-                            }
-                            <td style="text-align: center;">
-                                @if(shinyUrl == null){
-                                    <div class="flip-container">
-                                        <div class="flipper">
-                                            <img class="front" src="@baseUrl" />
-                                        </div>
-                                    </div>
-                                    
-                                }
-                                else
-                                {
-                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
-                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
-                                            <img class="front" src="@baseUrl" />
-                                            <img class="back" src="@shinyUrl" />
-                                        </div>
-                                    </div>
-                                    
-                                }
-                            </td>
-
-                            <!-- Section 2: Pokemon # -->
-                            <th scope="row">@pokemon.PokemonId</th>
-
-                            <!-- Section 3: Pokemon Name -->
-                            @if (pokemon.IsVariation)   // If a Variant
-                            {
-                                @if (pokemon.VariationName == "Alolan")
-                                {
-                                    <td style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
-                                }
-                                @if (pokemon.VariationName == "Paldean")
-                                {
-                                    <td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
-                                }
-                            }
-                            else // Otherwise, Base Case
-                            {
-                                <td style="vertical-align: auto;"> @pokemon.PokemonName</td>
-                            }
-
-                            <!-- Section 4: Sleep Type -->
-                            <td style="vertical-align: auto;">
-                                <div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
-                            </td>
-
-                            <!-- Section 5: Speciality -->
-                            <td style="padding-right: 30px; vertical-align: auto;">
-                                <div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
-                            </td>
-
-                            <!-- Section 6: Functional Buttons  -->
-                            <td>
-                                <button class="btn btn-warning" @onclick="() => EditPokemon(pokemon.Id)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
-                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
-                                    </svg>
-                                </button>
-                                <button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                                         class="bi bi-trash" viewBox="0 0 16 16">
-                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
-                                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
-                                    </svg>
-                                </button>
-                            </td>
-
-                        </tr>
-                    }
-                </tbody>
-
-            </table>
-        </div>
-    </div>
-
-}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor

@@ -0,0 +1,128 @@
+@page "/pokemonsleep/add-new-pokemon"
+
+@inject IPokemonService PokemonService
+@inject NavigationManager Navigation
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+
+<PageTitle>Add New Pokémon</PageTitle>
+<PokemonHeader />
+
+
+@if (isSubmitting)
+{
+    <p><em>Submitting...</em></p>
+}
+else
+{
+    <div class="w-50 mt-5 m-auto create-container">
+
+        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
+            <div class="row">
+                <div class="col-12 text-center">
+                    <h2 class="text-info">Add New Pokémon</h2>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="container m-lg-1" >
+            <EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
+                <DataAnnotationsValidator />
+
+                <!-- Section 1 -->
+                <div class="row mt-3">
+                    <div class="col-sm-3 input-group mb-3 ">
+                        <!-- Pokemon #-->
+                        <span for="PokemonId" class="input-group-text">#</span>
+                        <InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control " required />
+                        <!-- Pokemon Name-->
+                        <InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.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="NewPokemon.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="NewPokemon.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="NewPokemon.Speciality" class="form-select">
+                            <option value="Berries">Berries</option>
+                            <option value="Ingredients">Ingredients</option>
+                            <option value="Skills">Skills</option>
+                        </InputSelect>
+                    </div>
+                </div>
+
+                <!-- Section 2 -->
+                <div class="row">
+                    <div class="input-group mb-3">
+                        <!-- Variation Check -->
+                        <div class=" d-inline-flex">
+                            <InputCheckbox id="IsVariation" @bind-Value="NewPokemon.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="NewPokemon.VariationName" class="form-control" />
+                        </div>
+                    </div>
+                </div>
+                <!-- New Image URL Field -->
+                <div class="row mb-3 m-auto">
+                    <label for="ImageUrl" class="form-label">Base Image URL</label>
+                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control" />
+                </div>
+                <div class="row mb-3 m-auto">
+                    <label for="ImageUrl" class="form-label">Shiny Image URL</label>
+                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" 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">Add Pokemon</button>
+                </div>
+            </EditForm>
+        </div>
+    </div>
+}
+

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs

@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Portfolio.Domain.Features.Pokemon;
 
-namespace Portfolio.WebUI.Server.Components.Pages
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
 {
     public partial class PokemonCreate
     {

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor

@@ -0,0 +1,132 @@
+@page "/pokemonsleep/edit/{id:int}"
+@inject IPokemonService PokemonService
+@inject NavigationManager Navigation
+@inject IJSRuntime JSRuntime
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+<PageTitle>Edit Pokémon</PageTitle>
+<PokemonHeader />
+
+@if (pokemon == null)
+{
+    <p><em>Loading...</em></p>
+}
+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>
+            </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" required />
+                </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>
+}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.cs

@@ -0,0 +1,37 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
+{
+    public partial class PokemonEdit
+    {
+        [Parameter] public int Id { get; set; }
+        private Pokemon? pokemon;
+
+        protected override async Task OnInitializedAsync()
+        {
+            pokemon = await PokemonService.GetPokemonByIdAsync(Id);
+        }
+
+        private async Task HandleSubmit()
+        {
+            await PokemonService.UpdatePokemonAsync(pokemon);
+            //Navigation.NavigateTo("/pokemonsleep");
+            await JSRuntime.InvokeVoidAsync("history.back");
+        }
+
+        private async void Cancel()
+        {
+            await JSRuntime.InvokeVoidAsync("history.back");
+
+        }
+
+        private bool HideLabel { get; set; } = true;
+        private void Toggle()
+        {
+            HideLabel = !HideLabel;
+        }
+
+    }
+}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css

@@ -0,0 +1,7 @@
+body {
+}
+
+.edit-container {
+    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;
+}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs

@@ -3,7 +3,7 @@ using Portfolio.Domain.Features.Pokemon;
 using Portfolio.Domain.Features.Pokemon_Natures;
 using Portfolio.Domain.Features.Pokemon_Subskills;
 
-namespace Portfolio.WebUI.Server.Components.Pages
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
 {
     public partial class PokemonRate
     {

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor

@@ -1,5 +1,6 @@
 @page "/pokemonsleep"
 
+
 @inject IPokemonService PokemonService
 
 @attribute [StreamRendering]
@@ -9,7 +10,7 @@
 <PageTitle>Pokémon Sleep</PageTitle>
 
 <div class="w-100">
-    <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" />
+    <!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
 
     <PokemonHeader />
 

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.cs

@@ -1,7 +1,7 @@
 using Portfolio.Application.Services.PokemonService;
 using Portfolio.Domain.Features.Pokemon;
 
-namespace Portfolio.WebUI.Server.Components.Pages
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
 {
     public partial class PokemonSleep
     {

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor

@@ -0,0 +1,81 @@
+@page "/pokemonsleep/pokemon/{id:int}"
+@inject IPokemonService PokemonService
+@inject NavigationManager Navigation
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+
+<PokemonHeader />
+
+@if (_pokemon == null)
+{
+   <Loading />
+}
+else
+{
+    <PageTitle>@_pokemon.PokemonName</PageTitle>
+    <!-- Total Componenet-->
+
+    <div class="w-100">
+        <div class="d-flex justify-content-center mt-4">
+            <button class="mt-1 p-2 btn btn-danger rounded-5 align-self-start text-white" disabled="@(!_previousPokemonId.HasValue)" @onclick="NavigateToPrevious">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
+                </svg>
+            </button>
+            <div class="mt-5 mx-5 d-flex justify-content-center">
+                @if (_variationPokemonId != null)
+                {
+                    @if (_variationPokemonId != null && _pokemonVariant == null){
+                        <Loading />
+                    }
+                    else
+                    {
+                        @if(_pokemon.Id != _pokemonVariant.Id)
+                        {
+                            <div class="d-flex justify-content-center">
+                                <div class="position-relative">
+                                    <PokemonCard Pokemon="_pokemon" />
+                                    <div class="position-absolute top-100 start-50 translate-middle mt-5">
+                                        <PokemonEditButton PokemonId="_pokemon.Id" />
+                                    </div>
+                                </div>
+                                <div class="position-relative">
+                                    <PokemonCard Pokemon="_pokemonVariant" />
+                                    <div class="position-absolute top-100 start-50 translate-middle mt-5">
+                                        <PokemonEditButton PokemonId="_pokemonVariant.Id" />
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        }
+                        else
+                        {
+                            <div class="position-relative">
+                                <PokemonCard Pokemon="_pokemonVariant" />
+                                <div class="position-absolute top-100 start-50 translate-middle mt-5">
+                                    <PokemonEditButton PokemonId="_pokemonVariant.Id" />
+                                </div>
+                            </div>
+                            
+                        }
+                    }
+                }
+                else{
+                    <div class="position-relative">
+                        <PokemonCard Pokemon="_pokemon" />
+                        <div class="position-absolute top-100 start-50 translate-middle mt-5">
+                            <PokemonEditButton PokemonId="_pokemon.Id" />
+                        </div>
+                    </div>
+                }
+            </div>
+            <button class="mt-1 p-2 btn btn-danger rounded rounded-5 align-self-start text-white" disabled="@(!_nextPokemonId.HasValue)" @onclick="NavigateToNext">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs

@@ -0,0 +1,52 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
+{
+    public partial class PokemonView
+    {
+        [Parameter] public int Id { get; set; }
+        private Pokemon? _pokemon;
+        private Pokemon? _pokemonVariant;
+        private List<int> _pokemonIds;
+        private int? _nextPokemonId;
+        private int? _previousPokemonId;
+        private int? _variationPokemonId;
+        private int _currentIndex;
+
+
+        protected override async Task OnParametersSetAsync()
+        {
+            _pokemon = await PokemonService.GetPokemonByPokemonIdAsync(Id);
+
+            // These can be smart queries if your data is sorted by ID or by another property
+            _pokemonIds = await PokemonService.GetAllPokemonIdsAsync();
+            _currentIndex = _pokemonIds.IndexOf(_pokemon.PokemonId);
+            //Console.WriteLine(_currentIndex);
+
+            _nextPokemonId = await PokemonService.GetNextPokemonIdAsync(Id);
+            _previousPokemonId = await PokemonService.GetPreviousPokemonIdAsync(Id);
+
+            _variationPokemonId = await PokemonService.GetVariationPokemonIdAsync(Id);
+            if (_variationPokemonId != null) 
+            {
+                Console.WriteLine(_variationPokemonId);
+                _pokemonVariant = await PokemonService.GetPokemonByIdAsync((int)_variationPokemonId);
+                Console.WriteLine(_pokemonVariant.VariationName);
+            }
+        }
+
+        private void NavigateToNext()
+        {
+            if (_nextPokemonId.HasValue)
+                Navigation.NavigateTo($"/pokemonsleep/pokemon/{_nextPokemonId.Value}");
+        }
+
+        private void NavigateToPrevious()
+        {
+            if (_previousPokemonId.HasValue)
+                Navigation.NavigateTo($"/pokemonsleep/pokemon/{_previousPokemonId.Value}");
+        }
+
+    }
+}

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css

@@ -0,0 +1,2 @@
+body {
+}

Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor

@@ -1,102 +0,0 @@
-@page "/pokemonsleep/add-new-pokemon"
-
-@inject IPokemonService PokemonService
-@inject NavigationManager Navigation
-
-@attribute [StreamRendering]
-@rendermode InteractiveServer
-
-
-<PageTitle>Add New Pokémon</PageTitle>
-<PokemonHeader />
-
-
-@if (isSubmitting)
-{
-    <p><em>Submitting...</em></p>
-}
-else
-{
-    <div class="w-50 mt-5 m-auto create-container">
-
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
-            <div class="row">
-                <div class="col-12 text-center">
-                    <h2 class="text-info">Add New Pokémon</h2>
-                </div>
-            </div>
-        </div>
-
-
-        <div class="container m-lg-1" >
-            <EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
-                <DataAnnotationsValidator />
-
-                <!-- Section 1 -->
-                <div class="row ">
-                    <div class="col-sm-3 input-group mb-3 ">
-                        <!-- Pokemon #-->
-                        <span for="PokemonId" class="input-group-text">#</span>
-                        <InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control " required />
-                        <!-- Pokemon Name-->
-                        <InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control w-75" required />
-                    </div>
-                </div>
-
-                <!-- Section 2 -->
-                <div class="row">
-                    <div class="input-group mb-3">
-                        <!-- Variation Check -->
-                        <div class=" d-inline-flex">
-                            <InputCheckbox id="IsVariation" @bind-Value="NewPokemon.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="NewPokemon.VariationName" class="form-control" />
-                        </div>
-                    </div>
-                </div>
-
-
-                <!-- Section 3 -->
-                <div class="row mb-3 m-auto" >
-                    <label for="SleepType" class="form-label">Sleep Type</label>
-                    <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select">
-                        <option hidden value="">Dozing / Snoozing / Slumbering</option>
-                        <option value="Dozing">Dozing</option>
-                        <option value="Snoozing">Snoozing</option>
-                        <option value="Slumbering">Slumbering</option>
-                    </InputSelect>
-                </div>
-
-                <!-- Section 4 -->
-                <div class="row mb-3 m-auto">
-                    <label for="Speciality" class="form-label">Specialty</label>
-                    <InputSelect id="SleepType" @bind-Value="NewPokemon.Speciality" class="form-select">
-                        <option hidden value="">Berries / Ingredients / Skills</option>
-                        <option value="Berries">Berries</option>
-                        <option value="Ingredients">Ingredients</option>
-                        <option value="Skills">Skills</option>
-                        <option value="Other">Other</option>
-                    </InputSelect>
-                </div>
-
-                <!-- New Image URL Field -->
-                <div class="row mb-3 m-auto">
-                    <label for="ImageUrl" class="form-label">Base Image URL</label>
-                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control" />
-                </div>
-                <div class="row mb-3 m-auto">
-                    <label for="ImageUrl" class="form-label">Shiny Image URL</label>
-                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control" />
-                </div>
-                <button type="submit" class="btn btn-primary mb-3">Add Pokémon</button>
-                <button type="button" class="btn btn-secondary mb-3" @onclick="@Cancel">Cancel</button>
-            </EditForm>
-        </div>
-    </div>
-}
-

Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor

@@ -1,92 +0,0 @@
-@page "/pokemonsleep/edit/{id:int}"
-@inject IPokemonService PokemonService
-@inject NavigationManager Navigation
-
-@attribute [StreamRendering]
-@rendermode InteractiveServer
-
-<PageTitle>Edit Pokémon</PageTitle>
-<PokemonHeader />
-
-@if (pokemon == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <div class="w-50 mt-5 m-auto create-container">
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
-            <div class="row">
-                <div class="col-12 text-center">
-                    <h2 class="text-info">Edit Pokémon</h2>
-                </div>
-            </div>
-        </div>
-
-        <div class="container m-lg-1">
-            <EditForm class="col mb-3" Model="pokemon" OnValidSubmit="HandleSubmit">
-                <DataAnnotationsValidator />
-
-                <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>
-
-                <div class="row 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>
-
-                <div class="row 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>
-
-                <!-- New Image URL Field -->
-                <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>
-                <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>
-
-                <button type="submit" class="btn btn-primary mb-3">Save Changes</button>
-                <button type="button" class="btn btn-secondary mb-3" @onclick="Cancel">Cancel</button>
-            </EditForm>
-        </div>
-    </div>
-}
-
-@code {
-    [Parameter] public int Id { get; set; }
-    private Pokemon? pokemon;
-
-    protected override async Task OnInitializedAsync()
-    {
-        pokemon = await PokemonService.GetPokemonByIdAsync(Id);
-    }
-
-    private async Task HandleSubmit()
-    {
-        await PokemonService.UpdatePokemonAsync(pokemon);
-        Navigation.NavigateTo("/pokemonsleep");
-    }
-
-    private void Cancel()
-    {
-        Navigation.NavigateTo("/pokemonsleep");
-    }
-}

Portfolio.WebUI.Server/Components/_Imports.razor

@@ -9,6 +9,7 @@
 @using Portfolio.WebUI.Server
 @using Portfolio.WebUI.Server.Components
 @using Portfolio.WebUI.Server.Components.Component
+@using Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 @using Portfolio.Domain.Features.Articles
 @using Portfolio.Domain.Features.Pokemon
 @using Portfolio.Domain.Features.Pokemon_Natures