diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 5ffa960..9b5b7c6 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -6,11 +6,11 @@
 @rendermode InteractiveServer
 
 <!-- Table A: Desktop View-->
-<div class="container d-none d-md-block">
+<div class="container d-none d-md-block ">
     <!-- Main UI -->
     <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
         <!-- Table Header -->
-        <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
+        <div class="row card-header bg-secondary bg-gradient py-3 border-0">
             <div class="flex-row justify-content-between">
                 <div class="text-center position-relative">
                     <input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
@@ -22,7 +22,7 @@
         </div>
 
         
-        <div class="tableFixHead table-responsive row">
+        <div class="tableFixHead bg-secondary table-responsive row">
             <table class="table col table-borderless border-0 table-secondary table-striped align-middle">
                 <!-- Table Head -->
                 <thead class="">
@@ -47,6 +47,7 @@
                 {
                     <!-- Table Body -->
                     <tbody>
+                        <tr></tr>
                         @foreach (var pokemon in FilteredPokemon)
                         {
                             <tr class="flex-row">
@@ -176,8 +177,8 @@
                                 <!-- Stats -->
                                 <div class="d-flex flex-wrap align-items-center gap-2">
                                     <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
-                                    <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
-                                    <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
+                                        <PokemonBadge BadgeItem="@pokemon.SleepType" />
+                                        <PokemonBadge BadgeItem="@pokemon.Speciality" />
                                 </div>
                             </div>