From aea7c068194cee8feb95373d70c3b8f69de0b027 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Fri, 11 Apr 2025 20:07:06 -0400
Subject: [PATCH] Some responsive-ness is happenin.

---
 .../Pokemon Components/PokemonHeader.razor    |  10 +-
 .../Pokemon Components/PokemonTable.razor     | 281 ++++++++++--------
 .../Pokemon Components/PokemonTable.razor.css |  35 +++
 .../Pages/Pokemon Pages/PokemonRate.razor     |   2 +-
 .../Pokemon Pages/PokemonSleepHome.razor      |  79 +++--
 5 files changed, 263 insertions(+), 144 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor
index da9abad..02cbc43 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor	
@@ -13,7 +13,7 @@
             <!-- Home -->
             <button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
                 <NavLink href="/pokemonsleep">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mb-1" viewBox="0 0 16 16">
                         <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
                         <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
                     </svg>
@@ -23,7 +23,7 @@
             <!-- Pokemon Table-->
             <button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
                 <NavLink href="/pokemon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1" viewBox="0 0 16 16">
                         <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
                     </svg>
                 </NavLink>
@@ -31,8 +31,8 @@
 
             <!-- Rate Pokemon -->
             <button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
-                <NavLink href="/pokemonsleep/rate-pokemon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
+                <NavLink href="/rate-pokemon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" viewBox="0 0 16 16">
                         <path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
                         <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
                     </svg>
@@ -42,7 +42,7 @@
             <!-- Add Pokemon (Wrap in Auth) -->
             <button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
                 <NavLink  href="/pokemonsleep/add-new-pokemon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill mb-1" viewBox="0 0 16 16">
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
                     </svg> 
                 </NavLink>
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 5933cff..6d19d3a 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -5,141 +5,190 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
+<!-- Table A: Desktop View-->
+<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">
+        <!-- Table Header -->
+        <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
+            <div class="flex-row justify-content-between">
+                <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>
 
-<!-- Main UI -->
-<div class="card shadow border-0 mt-4 m-auto w-50">
+        
+        <div class="tableFixHead table-responsive row">
+            <table class="table col 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 d-none d-md-table-cell" 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>
 
+                    </tr>
+                </thead>
+                <!-- If/Else Pokemon Loaded-->
+                @if(pokemons == null)
+                {
+                    <tbody>
+                        <Loading />
+                    </tbody>
+                }
+                else
+                {
+                    <!-- Table Body -->
+                    <tbody>
+                        @foreach (var pokemon in pokemons)
+                        {
+                            <tr class="flex-row">
+                                <!-- Section: Pokemon Image -->
+                                @{
+                                    string baseUrl = pokemon.PokemonImageUrl;
+                                    string shinyUrl = pokemon.PokemonShinyImageUrl;
+                                }
+                                <td class="text-center d-none d-md-table-cell">
+                                    @if (shinyUrl == null)
+                                    {
+                                        <div class="flip-container">
+                                            <div class="flipper">
+                                                <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
+                                            </div>
+                                        </div>
+
+                                    }
+                                    else
+                                    {
+                                        <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
+                                            <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
+                                                <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
+                                                <img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
+                                            </div>
+                                        </div>
+
+                                    }
+                                </td>
+
+                                <!-- Section 2: Pokemon # -->
+                                <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
+
+
+                                <!-- Section 3: Pokemon Name -->
+                                @if (pokemon.IsVariation)   // If a Variant
+                                {
+                                    @if (pokemon.VariationName == "Alolan")
+                                    {
+                                        <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Alolan @pokemon.PokemonName</td>
+                                    }
+                                    @if (pokemon.VariationName == "Paldean")
+                                    {
+                                        <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Paldean @pokemon.PokemonName</td>
+                                    }
+                                }
+                                else // Otherwise, Base Case
+                                {
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> @pokemon.PokemonName</td>
+                                }
+
+
+                                <!-- Section 4: Pokemon Type -->
+                                <td class="">
+                                    <div class="d-flex justify-content-center">
+                                        <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
+                                    </div>
+                                </td>
+
+                                <!-- Section 5: Sleep Type -->
+                                <td class="" 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 class="" 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>
+
+                            </tr>
+                        }
+                    </tbody>
+                }
+               
+
+            </table>
+        </div>
+
+        
+    </div>
+
+</div>
+
+<!-- Desktop B: Mobile View -->
+<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
     <!-- Table Header -->
-    <div class="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
-        <div class="row">
+    <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
+        <div class="flex-row justify-content-between">
             <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>
+                <h2 class="text-white text-decoration-underline">Pokémon</h2>
+                <div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count())</p></div>
             </div>
         </div>
     </div>
+    <!-- Table Body -->
+    <div class="tableFixHead table-responsive row">
+        <table class="table table-striped border-0">
 
-    <!-- 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>
+            @if (pokemons == null)
             {
-                <tbody>
-                    <Loading />
-                </tbody>
+                <Loading />
             }
             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>
+                @foreach (var pokemon in pokemons)
+                {
+                    <tr class=" mb-3 border-0">
+                        <div class=" d-flex align-items-center">
+                            <div class="me-3">
+                                <div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
+                                    <div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
+                                        <img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
+                                        @if (pokemon.PokemonShinyImageUrl != null)
+                                        {
+                                            <img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
+                                        }
                                     </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" style="cursor: default;">@pokemon.PokemonId</th>
-
-
-                            <!-- Section 3: Pokemon Name -->
-                            @if (pokemon.IsVariation)   // If a Variant
-                            {
-                                @if (pokemon.VariationName == "Alolan")
-                                {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
-                                }
-                                @if (pokemon.VariationName == "Paldean")
-                                {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
-                                }
-                            }
-                            else // Otherwise, Base Case
-                            {
-                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
-                            }
-
-
-                            <!-- Section 4: Pokemon Type -->
-                            <td>
-                                <div class="d-flex justify-content-center">
-                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
                                 </div>
-                            </td>
-
-                            <!-- Section 5: Sleep Type -->
-                            <td style="">
-                                <div class="d-flex justify-content-center ">
+                            </div>
+                            <div>
+                                <h5 class="mb-1">
+                                    @pokemon.PokemonId -
+                                    <span class="pokemon-name-style" @onclick="() => ViewPokemon(pokemon.PokemonId)">
+                                        @(pokemon.IsVariation ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
+                                    </span>
+                                </h5>
+                                    <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>
-                            </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>
+                            </div>
+                        </div>
+                    </tr>
+                }
             }
-               
-
+            </tbody>
         </table>
     </div>
 </div>
-
-
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css
index fe73e88..d4fb504 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css	
@@ -41,6 +41,41 @@
     transform: rotateY(180deg);
 }
 
+
+.flip-container-sm {
+    perspective: 1000px;
+    width: 64px;
+    height: 64px;
+}
+
+.flipper-sm {
+    transition: 0.6s;
+    transform-style: preserve-3d;
+    position: relative;
+}
+
+    .flipper-sm img {
+        backface-visibility: hidden;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+    }
+
+    .flipper-sm .front {
+        z-index: 2;
+    }
+
+    .flipper-sm .back {
+        transform: rotateY(180deg);
+    }
+
+    .flipper-sm.flipped {
+        transform: rotateY(180deg);
+    }
+
+
+
+
 .pokeimage {
     width: 100%;
     height: 100%;
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor
index 12cb33c..18f2b9d 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor	
@@ -1,4 +1,4 @@
-@page "/pokemonsleep/rate-pokemon"
+@page "/rate-pokemon"
 
 @inject IPokemonService PokemonService
 @inject IPokemonNatureService PokemonNatureService
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor
index 1da9ac6..dabf280 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor	
@@ -7,32 +7,67 @@
 
 <PageTitle>Pokémon Sleep</PageTitle>
 
-<div class="w-100">
-    <!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
-    <PokemonHeader />
-    <div class="card shadow border-0 p-3 mt-4 m-auto w-75">
-        <div class="d-flex flex-row justify-content-around">
-            <div class="card border-0 shadow-sm"><img class="card-img shadow-sm w-auto" style="width: 540px; height: 540px;" src="images/Pokemon_Sleep_ID.jpg" /></div>
-            <div class="border border-warning w-50 p-3"> 
-                <p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
-                <p class="fw-normal fs-6 text-start">
-                    Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
-                </p>
-                <p class="fw-bold fst-italic fs-3">But what do you even do?</p>
-                <p class="fw-normal fs-6 text-start">
-                    That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
-                </p>
+<div class="container">
+    <div class="row w-100">
+        <!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
+        <div class="row"><PokemonHeader /></div>
+
+        <!-- Card -->
+        <div class="row card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75">
+            <!-- Top Row-->
+            <div class="row d-flex flex-row">
+                <!-- Image side -->
+                <div class="col w-50 border-0 ">
+                    <div>
+
+                    </div>
+                    <img class="shadow-sm w-100 m-auto img-fluid"  src="images/Pokemon_Sleep_ID.jpg" />
+                </div>
+                <!-- Text side -->
+                <div class="col w-50 p-3"> 
+                    <p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
+                    <p class="fw-normal fs-6 text-start">
+                        Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
+                    </p>
+                    <p class="fw-bold fst-italic fs-3">But what do you even do?</p>
+                    <p class="fw-normal fs-6 text-start">
+                        That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
+                    </p>
+
+                </div>
+            </div>
+            <!-- Second Row -->
+            <div class="row mt-3">
                 <p class="fw-bold fst-italic fs-3">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
                 <p class="fw-normal fs-6 text-start">
                     Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
                 </p>
             </div>
-        </div>
-        <div class="btn-group d-flex flex-row justify-content-around mt-4">
-            <button class="btn btn-info">Available Pokémon</button>
-            <button class="btn btn-success">Rate Pokémon</button>
+            <!-- Button Row-->
+            <div class="row btn-group d-flex flex-row justify-content-around mt-4">
+                <div class="w-auto">
+                    <button class="btn btn-info">
+                        <NavLink href="/pokemon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1" viewBox="0 0 16 16">
+                                <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
+                            </svg>
+                            <span class="ps-1">Available Pokémon</span>
+                        </NavLink>
+                    </button>
+                </div>
+                <div class="w-auto">
+                    <button class="btn btn-success link">
+                        <NavLink href="/rate-pokemon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" viewBox="0 0 16 16">
+                                <path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
+                                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
+                            </svg>
+                            <span class="ps-1">Rate Pokémon</span>
+                        </NavLink>
+                    </button>
+                </div>
+                
+            </div>
         </div>
     </div>
-
-
-</div>
\ No newline at end of file
+</div>