From 3f2882855675c31e5c6ef06f95068d4bc900aa33 Mon Sep 17 00:00:00 2001
From: Jacob Potter <web.wizards.software.dev@gmail.com>
Date: Fri, 1 Nov 2024 16:24:39 -0400
Subject: [PATCH] feat: (frontend) update for species and variety models

---
 .../components/pages/PokemonPage.stories.tsx  |   12 +-
 frontend/src/components/pages/PokemonPage.tsx |    9 +-
 .../src/components/pokemon/EvolutionChain.tsx |    4 +-
 .../src/components/pokemon/FilterForm.tsx     |    2 +-
 .../src/components/pokemon/PokemonDetails.tsx |    4 +-
 .../pokemon/PokemonList.stories.tsx           |    5 +-
 .../src/components/pokemon/PokemonList.tsx    |    6 +-
 .../pokemon/PokemonListItem.stories.tsx       |    5 +-
 .../components/pokemon/PokemonListItem.tsx    |   26 +-
 .../src/components/pokemon/PokemonSummary.tsx |   74 +-
 .../src/components/ui/pokedex/Pokedex.tsx     |    2 +-
 .../components/ui/pokedex/PokedexScreens.tsx  |    4 +-
 .../src/components/ui/pokedex/TabButton.tsx   |    2 +-
 frontend/src/fixtures/pokemon-11-20.json      |  563 -------
 frontend/src/fixtures/pokemon1-10.json        |  658 ---------
 frontend/src/fixtures/pokemon_page_1.json     | 1309 +++++++++++++++++
 frontend/src/fixtures/pokemon_page_2.json     | 1096 ++++++++++++++
 frontend/src/models/interfaces.ts             |   14 -
 frontend/src/models/pokemon.ts                |   43 +-
 19 files changed, 2539 insertions(+), 1299 deletions(-)
 delete mode 100644 frontend/src/fixtures/pokemon-11-20.json
 delete mode 100644 frontend/src/fixtures/pokemon1-10.json
 create mode 100644 frontend/src/fixtures/pokemon_page_1.json
 create mode 100644 frontend/src/fixtures/pokemon_page_2.json

diff --git a/frontend/src/components/pages/PokemonPage.stories.tsx b/frontend/src/components/pages/PokemonPage.stories.tsx
index 643d8be..2996ba9 100644
--- a/frontend/src/components/pages/PokemonPage.stories.tsx
+++ b/frontend/src/components/pages/PokemonPage.stories.tsx
@@ -2,8 +2,8 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {PokemonPage} from './PokemonPage.tsx';
 import {delay, http, HttpResponse} from "msw";
-import pokemon1_10 from "../../fixtures/pokemon1-10.json";
-import pokemon11_20 from "../../fixtures/pokemon-11-20.json";
+import pokemon_page_1 from "../../fixtures/pokemon_page_1.json";
+import pokemon_page_2 from "../../fixtures/pokemon_page_2.json";
 import {reactRouterParameters, withRouter} from "storybook-addon-remix-react-router";
 
 
@@ -30,10 +30,10 @@ export const Default: Story = {
         msw: {
             handlers: [
                 http.get('/api/v1/pokemon?page=1&pageSize=12', async () => {
-                    return HttpResponse.json(pokemon1_10);
+                    return HttpResponse.json(pokemon_page_1);
                 }),
                 http.get('/api/v1/pokemon?page=2&pageSize=12', async () => {
-                    return HttpResponse.json(pokemon11_20);
+                    return HttpResponse.json(pokemon_page_2);
                 }),
             ],
         },
@@ -45,8 +45,8 @@ export const WithLoading: Story = {
         msw: {
             handlers: [
                 http.get('/api/v1/pokemon', async () => {
-                    await delay(800)
-                    return HttpResponse.json(pokemon1_10);
+                    await delay(2800)
+                    return HttpResponse.json(pokemon_page_1);
                 }),
             ],
         },
diff --git a/frontend/src/components/pages/PokemonPage.tsx b/frontend/src/components/pages/PokemonPage.tsx
index 7883f14..c5f49e3 100644
--- a/frontend/src/components/pages/PokemonPage.tsx
+++ b/frontend/src/components/pages/PokemonPage.tsx
@@ -7,10 +7,9 @@ import {EvolutionChain} from "../pokemon/EvolutionChain.tsx";
 import {UnknownTab} from "../ui/UnknownTab.tsx";
 import {ArrowLeftIcon, ArrowRightIcon, ArrowUturnLeftIcon, FunnelIcon} from "@heroicons/react/24/outline";
 import useAxios from "axios-hooks";
-import {Pokemon} from "../../models/pokemon.ts";
+import {ListPokemonParams, ListPokemonResponse, PokemonSpecies} from "../../models/pokemon.ts";
 import {useNavigate, useParams} from "react-router-dom";
 import {useDebounce} from "use-debounce";
-import {ListPokemonParams, PokemonResponse} from "../../models/interfaces.ts";
 import {FilterForm} from "../pokemon/FilterForm.tsx";
 
 
@@ -33,7 +32,7 @@ export function PokemonPage() {
 
     const [tabIndex, setTabIndex] = useState(0);
 
-    const [{data, loading}, refetch] = useAxios<PokemonResponse>(
+    const [{data, loading}, refetch] = useAxios<ListPokemonResponse>(
         {
             url: '/api/v1/pokemon',
             params: {
@@ -44,7 +43,7 @@ export function PokemonPage() {
         }
     )
 
-    const [currentPokemon, setCurrentPokemon] = useState<Pokemon | null>(null);
+    const [currentPokemon, setCurrentPokemon] = useState<PokemonSpecies | null>(null);
 
     const handlePrev = useCallback(() => {
 
@@ -145,7 +144,7 @@ export function PokemonPage() {
 
     return <Pokedex>
         <Pokedex.LeftScreen loading={loading}>
-            {tabIndex === 0 ? <PokemonSummary pokemon={currentPokemon}/> : tabIndex === 1 ?
+            {tabIndex === 0 ? <PokemonSummary pokemonSpecies={currentPokemon}/> : tabIndex === 1 ?
                 <PokemonDetails pokemon={currentPokemon}/> : tabIndex === 2 ?
                     <EvolutionChain pokemon={currentPokemon}/> : <UnknownTab/>}
         </Pokedex.LeftScreen>
diff --git a/frontend/src/components/pokemon/EvolutionChain.tsx b/frontend/src/components/pokemon/EvolutionChain.tsx
index 924d35d..69398cf 100644
--- a/frontend/src/components/pokemon/EvolutionChain.tsx
+++ b/frontend/src/components/pokemon/EvolutionChain.tsx
@@ -1,4 +1,4 @@
-import {Pokemon} from "../../models/pokemon.ts";
+import {PokemonSpecies} from "../../models/pokemon.ts";
 import {ComingSoon} from "../ui/ComingSoon.tsx";
 
-export const EvolutionChain = ({}: { pokemon: Pokemon | null }) => <ComingSoon/>;
\ No newline at end of file
+export const EvolutionChain = ({}: { pokemon: PokemonSpecies | null }) => <ComingSoon/>;
\ No newline at end of file
diff --git a/frontend/src/components/pokemon/FilterForm.tsx b/frontend/src/components/pokemon/FilterForm.tsx
index 4935bf2..34ee47e 100644
--- a/frontend/src/components/pokemon/FilterForm.tsx
+++ b/frontend/src/components/pokemon/FilterForm.tsx
@@ -1,7 +1,7 @@
-import {ListPokemonParams} from "../../models/interfaces.ts";
 import {FormEventHandler, useContext} from "react";
 import {MoveTypeContext} from "../../context/MoveTypeContext.tsx";
 import {capitalize} from "lodash";
+import {ListPokemonParams} from "../../models/pokemon.ts";
 
 export const FilterForm = ({onSubmit}: { onSubmit: (params: ListPokemonParams) => void }) => {
 
diff --git a/frontend/src/components/pokemon/PokemonDetails.tsx b/frontend/src/components/pokemon/PokemonDetails.tsx
index b395ac2..e0fc00d 100644
--- a/frontend/src/components/pokemon/PokemonDetails.tsx
+++ b/frontend/src/components/pokemon/PokemonDetails.tsx
@@ -1,5 +1,5 @@
-import {Pokemon} from "../../models/pokemon.ts";
+import {PokemonSpecies} from "../../models/pokemon.ts";
 import {ComingSoon} from "../ui/ComingSoon.tsx";
 
-export const PokemonDetails = ({}: { pokemon: Pokemon | null }) => (
+export const PokemonDetails = ({}: { pokemon: PokemonSpecies | null }) => (
     <ComingSoon/>);
\ No newline at end of file
diff --git a/frontend/src/components/pokemon/PokemonList.stories.tsx b/frontend/src/components/pokemon/PokemonList.stories.tsx
index 125d479..e95d52d 100644
--- a/frontend/src/components/pokemon/PokemonList.stories.tsx
+++ b/frontend/src/components/pokemon/PokemonList.stories.tsx
@@ -1,9 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {PokemonList} from './PokemonList.tsx';
-import mockPokemon from '../../fixtures/pokemon.json'
+import mockPokemon from '../../fixtures/pokemon_page_1.json'
 import Pokedex from "../ui/pokedex/Pokedex.tsx";
-import {Pokemon} from "../../models/pokemon.ts";
 
 const meta = {
     component: PokemonList,
@@ -21,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        pokemon: mockPokemon.pokemon as unknown as Pokemon[],
+        pokemon: mockPokemon.pokemon,
         pokemonId: '4',
         onPokemonSelect: () => {
         }
diff --git a/frontend/src/components/pokemon/PokemonList.tsx b/frontend/src/components/pokemon/PokemonList.tsx
index 9ede415..595c66d 100644
--- a/frontend/src/components/pokemon/PokemonList.tsx
+++ b/frontend/src/components/pokemon/PokemonList.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import {Pokemon} from "../../models/pokemon.ts";
+import {PokemonSpecies} from "../../models/pokemon.ts";
 import {PokemonListItem} from "./PokemonListItem.tsx";
 
 interface PokemonListProps {
-    pokemon: Pokemon[];
+    pokemon: PokemonSpecies[];
     pokemonId: string | undefined;
     onPokemonSelect: (pokemonId: number) => void;
 }
@@ -15,7 +15,7 @@ export const PokemonList: React.FC<PokemonListProps> = ({pokemon, pokemonId, onP
         {pokemon.map((pokemon, index) => {
             return <PokemonListItem onPokemonSelect={onPokemonSelect} key={`${pokemon.name}_list_item`}
                                     active={pokemonId ? pokemon.id === parseInt(pokemonId) : index === 0}
-                                    pokemon={pokemon}/>
+                                    pokemonSpecies={pokemon}/>
         })}
     </div>)
 }
\ No newline at end of file
diff --git a/frontend/src/components/pokemon/PokemonListItem.stories.tsx b/frontend/src/components/pokemon/PokemonListItem.stories.tsx
index b89e887..b252496 100644
--- a/frontend/src/components/pokemon/PokemonListItem.stories.tsx
+++ b/frontend/src/components/pokemon/PokemonListItem.stories.tsx
@@ -1,8 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react';
-import pokemon from '../../fixtures/pokemon.json'
+import pokemon_page_1 from '../../fixtures/pokemon_page_1.json'
 
 import {PokemonListItem} from './PokemonListItem.tsx';
-import {Pokemon} from "../../models/pokemon.ts";
 
 const meta = {
     component: PokemonListItem,
@@ -19,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        pokemon: pokemon.pokemon[0] as unknown as Pokemon,
+        pokemonSpecies: pokemon_page_1.pokemon[0],
         active: true,
         onPokemonSelect: () => {
         }
diff --git a/frontend/src/components/pokemon/PokemonListItem.tsx b/frontend/src/components/pokemon/PokemonListItem.tsx
index fa36fa8..d51a374 100644
--- a/frontend/src/components/pokemon/PokemonListItem.tsx
+++ b/frontend/src/components/pokemon/PokemonListItem.tsx
@@ -1,36 +1,34 @@
-import {Pokemon} from "../../models/pokemon.ts";
+import {PokemonSpecies} from "../../models/pokemon.ts";
 import {capitalize} from "lodash";
 import {MouseEventHandler} from "react";
 
 interface PokemonListItemProps {
-    pokemon: Pokemon,
+    pokemonSpecies: PokemonSpecies,
     active?: boolean,
     onPokemonSelect: (pokemonId: number) => void
 }
 
 export const PokemonListItem = ({
-                                    pokemon,
+                                    pokemonSpecies,
                                     onPokemonSelect,
                                     active,
 
                                 }: PokemonListItemProps) => {
 
+
+    const pokemon = pokemonSpecies.varieties[0];
+
+
     const handleSelect: MouseEventHandler<HTMLButtonElement> = (e) => {
         e.preventDefault();
-        onPokemonSelect(pokemon.id)
+        pokemon ? onPokemonSelect(pokemon.id) : console.error("No default variety found")
+
     }
 
     return (<button
         onClick={handleSelect}
-        className={`flex items-center justify-between lg:space-x-3 bg-sky-500 sm:px-2 sm:py-1 md:px-4 md:py-2.5 rounded-lg shadow-lg ${!active ? "opacity-70" : ''}`}>
-        <div className={'flex flex-col items-start justify-center space-y-1'}>
-            <h2 className={'hidden md:block text-xs lg:text-md font-bold'}>{capitalize(pokemon.name)}</h2>
-            <img className={'hidden md:block w-16 lg:w-20 h-auto'} src={pokemon.primary_type.img_url}
-                 alt={pokemon.primary_type.name}/>
-            {pokemon.secondary_type &&
-                <img className={'hidden md:block w-16 lg:w-20 h-auto'} src={pokemon.secondary_type.img_url}
-                     alt={pokemon.secondary_type.name}/>}
-        </div>
-        <img src={pokemon.sprite_url} alt={pokemon.name} className={'h-auto w-12 sm:w-16 mx-auto'}/>
+        className={`flex items-center justify-between lg:space-x-3 bg-sky-500 sm:px-2 sm:py-1 md:px-3 rounded-lg shadow-lg ${!active ? "opacity-70" : ''}`}>
+        <h2 className={'hidden md:block text-xs lg:text-md font-bold'}>{capitalize(pokemon?.name)}</h2>
+        <img src={pokemon?.sprite_url} alt={pokemon?.name} className={'h-auto w-12 sm:w-16 md:w-[4.75rem] mx-auto'}/>
     </button>)
 }
\ No newline at end of file
diff --git a/frontend/src/components/pokemon/PokemonSummary.tsx b/frontend/src/components/pokemon/PokemonSummary.tsx
index e46f9fa..cfe9b1d 100644
--- a/frontend/src/components/pokemon/PokemonSummary.tsx
+++ b/frontend/src/components/pokemon/PokemonSummary.tsx
@@ -1,11 +1,20 @@
-import {Pokemon} from "../../models/pokemon.ts";
+import {PokemonSpecies, PokemonVariety} from "../../models/pokemon.ts";
 import {SummaryItem} from "../ui/SummaryItem.tsx";
 import {capitalize} from "lodash";
-import {useEffect, useRef, useState} from "react";
+import {useCallback, useEffect, useRef, useState} from "react";
 import {PlayIcon} from "@heroicons/react/24/solid";
 import {isSafari} from 'react-device-detect';
+import {ChevronLeftIcon, ChevronRightIcon} from "@heroicons/react/24/outline";
+
+interface PokemonSummaryProps {
+    pokemonSpecies: PokemonSpecies | null
+}
+
+export const PokemonSummary = ({pokemonSpecies}: PokemonSummaryProps) => {
+
+    const [selectedPokemonVariety, setSelectedPokemonVariety] = useState<PokemonVariety>();
+    const [varietyIndex, setVarietyIndex] = useState(0);
 
-export const PokemonSummary = ({pokemon}: { pokemon: Pokemon | null }) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [progress, setProgress] = useState(0);
 
@@ -14,9 +23,13 @@ export const PokemonSummary = ({pokemon}: { pokemon: Pokemon | null }) => {
         audioRef.current && audioRef?.current.play();
     };
 
+    useEffect(() => {
+        setVarietyIndex(0)
+    }, [pokemonSpecies]);
+
 
     useEffect(() => {
-        if (!pokemon) {
+        if (!selectedPokemonVariety) {
             return
         }
 
@@ -38,7 +51,14 @@ export const PokemonSummary = ({pokemon}: { pokemon: Pokemon | null }) => {
             clearTimeout(to)
         }
 
-    }, [pokemon?.cry]);
+    }, [selectedPokemonVariety?.cry]);
+
+
+    useEffect(() => {
+        if (!pokemonSpecies) return;
+        setSelectedPokemonVariety(pokemonSpecies?.varieties[varietyIndex]);
+    }, [pokemonSpecies, varietyIndex]);
+
 
     useEffect(() => {
         let timeout: NodeJS.Timeout;
@@ -52,12 +72,17 @@ export const PokemonSummary = ({pokemon}: { pokemon: Pokemon | null }) => {
 
     }, [progress]);
 
+
+    const showVariety = useCallback(() => {
+        return pokemonSpecies && pokemonSpecies?.varieties.length > 1 && selectedPokemonVariety && selectedPokemonVariety?.name?.split("-").length > 2;
+    }, [pokemonSpecies, selectedPokemonVariety]);
+
     return (
-        <section className={'flex flex-col items-center justify-center font-mono h-full'}>
+        <section className={'relative flex flex-col items-center justify-center font-mono h-full'}>
             <div className={'max-w-md flex flex-col flex-grow w-full justify-between'}>
-                <h1 className="sm:text-lg md:text-3xl lg:text-4xl">{capitalize(pokemon?.name)} #{pokemon?.id}</h1>
+                <h1 className="sm:text-lg md:text-3xl lg:text-4xl z-10">{pokemonSpecies && pokemonSpecies.name?.split("-").length > 1 ? `${capitalize(pokemonSpecies?.varieties[0]?.name.split("-")[0])} ${capitalize(pokemonSpecies?.varieties[0]?.name.split("-")[1])}` : capitalize(pokemonSpecies?.varieties[0]?.name)} #{pokemonSpecies?.varieties[0]?.id} {varietyIndex > 0 ? showVariety() ? capitalize(`${selectedPokemonVariety?.name.split("-")[1]}-${capitalize(selectedPokemonVariety?.name.split("-")[2])}`) : capitalize(selectedPokemonVariety?.name.split("-")[1]) : <></>}</h1>
                 <div className="translate-y-[10%] flex items-center justify-end sm:justify-center">
-                    <img src={pokemon?.sprite_url} alt={pokemon?.name}
+                    <img src={selectedPokemonVariety?.sprite_url} alt={selectedPokemonVariety?.name}
                          className={'h-auto w-2/5 md:w-3/4 animate-bounce'}/>
                 </div>
             </div>
@@ -76,16 +101,33 @@ export const PokemonSummary = ({pokemon}: { pokemon: Pokemon | null }) => {
                             </div>
                         </div>
                     </div>
-                    <audio ref={audioRef} src={pokemon?.cry}/>
+                    <audio ref={audioRef} src={selectedPokemonVariety?.cry}/>
                 </div>}
-                <SummaryItem><img className={'w-16 xs:w-20 sm:w-auto mx-auto'} src={pokemon?.primary_type.img_url}
-                                  alt={pokemon?.primary_type.name}/></SummaryItem>
-                <SummaryItem>{pokemon?.secondary_type?.name ?
-                    <img className={'w-16 xs:w-20 sm:w-auto mx-auto'} src={pokemon.secondary_type.img_url}
-                         alt={pokemon.secondary_type.img_url}/> : 'None'}</SummaryItem>
-                <SummaryItem>Weight: {(pokemon?.weight ?? 0) / 10}kg</SummaryItem>
-                <SummaryItem>Height: {(pokemon?.height ?? 0) / 10}m</SummaryItem>
+                <SummaryItem><img className={'w-16 xs:w-20 sm:w-auto mx-auto'}
+                                  src={selectedPokemonVariety?.primary_type.img_url}
+                                  alt={selectedPokemonVariety?.primary_type.name}/></SummaryItem>
+                <SummaryItem>{selectedPokemonVariety?.secondary_type?.name ?
+                    <img className={'w-16 xs:w-20 sm:w-auto mx-auto'}
+                         src={selectedPokemonVariety.secondary_type.img_url}
+                         alt={selectedPokemonVariety.secondary_type.img_url}/> : 'None'}</SummaryItem>
+                <SummaryItem>Weight: {(selectedPokemonVariety?.weight ?? 0) / 10}kg</SummaryItem>
+                <SummaryItem>Height: {(selectedPokemonVariety?.height ?? 0) / 10}m</SummaryItem>
             </div>
+
+            {pokemonSpecies && pokemonSpecies?.varieties.length > 1 && <>
+                <button disabled={!pokemonSpecies?.varieties[varietyIndex - 1]}
+                        className={`absolute top-1/4 -left-3 md:top-1/3`}
+                        onClick={() => setVarietyIndex(varietyIndex - 1)}>
+                    <ChevronLeftIcon
+                        className={'w-5 h-5'}/></button>
+                <button disabled={!pokemonSpecies?.varieties[varietyIndex + 1]}
+                        className={'absolute top-1/4 -right-3 md:top-1/3'}
+                        onClick={() => setVarietyIndex(varietyIndex + 1)}>
+                    <ChevronRightIcon
+                        className={'w-5 h-5'}/></button>
+            </>}
+
+
         </section>
     )
 };
\ No newline at end of file
diff --git a/frontend/src/components/ui/pokedex/Pokedex.tsx b/frontend/src/components/ui/pokedex/Pokedex.tsx
index d11d44f..275e927 100644
--- a/frontend/src/components/ui/pokedex/Pokedex.tsx
+++ b/frontend/src/components/ui/pokedex/Pokedex.tsx
@@ -6,7 +6,7 @@ import {KeyboardButton, KeyboardButtonContainer} from "./KeyboardButton.tsx";
 
 export const PokedexRoot: React.FC<PropsWithChildren> = ({children}) => (
     <div
-        className={"relative grid grid-cols-1 gap-0.5 sm:gap-2 md:grid-cols-2 md:grid-rows-7 md:gap-x-3 bg-red-700 px-3 sm:px-12 md:px-6 rounded-xl max-w-md md:max-w-4xl lg:max-w-5xl xl:max-w-6xl mx-0.5 xs:mx-1 md:mx-3 lg:mx-4 xl:mx-auto pt-12 sm:pt-8 pb-6 sm:min-h-[726px] max-h-screen shadow-2xl dark:shadow-gray-800"}>
+        className={"relative grid grid-cols-1 gap-0.5 sm:gap-2 md:grid-cols-2 md:grid-rows-7 md:gap-x-3 bg-red-700 px-3 sm:px-12 md:px-6 rounded-xl max-w-md md:max-w-4xl lg:max-w-5xl xl:max-w-6xl mx-1 xs:mx-auto pt-12 sm:pt-8 pb-6 sm:min-h-[726px] max-h-screen shadow-2xl dark:shadow-gray-800"}>
         {children}
         <div
             className="h-0.5 sm:h-1 rounded-full bg-slate-700 w-full md:col-span-2 mx-auto self-end mt-1 sm:mt-1.5"></div>
diff --git a/frontend/src/components/ui/pokedex/PokedexScreens.tsx b/frontend/src/components/ui/pokedex/PokedexScreens.tsx
index 8373a57..ea78208 100644
--- a/frontend/src/components/ui/pokedex/PokedexScreens.tsx
+++ b/frontend/src/components/ui/pokedex/PokedexScreens.tsx
@@ -33,7 +33,7 @@ const RightScreenLoading: React.FC = () => {
     </div>
 }
 export const LeftScreenContainer: React.FC<PropsWithChildren<Loadable>> = ({children, loading}) => <div
-    className={`max-h-72 min-h-64  xs:max-h-96 xs:min-h-80 md:max-h-full md:min-h-[590px] border-slate-400 border-2 md:border-4 bg-sky-700 text-sky-50 rounded-lg rounded-b-none md:rounded-b-lg p-4 md:row-span-6`}>
+    className={`max-h-72 min-h-64  xs:max-h-96 xs:min-h-80 md:max-h-full md:min-h-[575px] border-slate-400 border-2 md:border-4 bg-sky-700 text-sky-50 rounded-lg rounded-b-none md:rounded-b-lg p-4 md:row-span-6`}>
     {loading ? <LeftScreenLoading/> : children}
 </div>;
 export const RightScreenContainer: React.FC<PropsWithChildren<Sizeable & Loadable>> = ({
@@ -41,6 +41,6 @@ export const RightScreenContainer: React.FC<PropsWithChildren<Sizeable & Loadabl
                                                                                            loading = false,
                                                                                            size = 'small'
                                                                                        }) => <div
-    className={`min-h-40 max-h-44 sm:max-h-60 md:max-h-full md:min-h-[590px] border-slate-400 border-2 md:border-4 bg-sky-700 text-sky-50 rounded-lg rounded-t-none md:rounded-t-lg px-1 py-1 xs:px-3 xs:py-2 overflow-scroll ${size === 'small' ? "md:row-span-5" : 'md:row-span-6'}`}>
+    className={`min-h-40 max-h-44 sm:max-h-60 md:max-h-full md::min-h-[575px] border-slate-400 border-2 md:border-4 bg-sky-700 text-sky-50 rounded-lg rounded-t-none md:rounded-t-lg px-1 py-1 xs:px-3 xs:py-2 overflow-scroll ${size === 'small' ? "md:row-span-5" : 'md:row-span-6'}`}>
     {loading ? <RightScreenLoading/> : children}
 </div>;
\ No newline at end of file
diff --git a/frontend/src/components/ui/pokedex/TabButton.tsx b/frontend/src/components/ui/pokedex/TabButton.tsx
index 4689ebe..67e7aba 100644
--- a/frontend/src/components/ui/pokedex/TabButton.tsx
+++ b/frontend/src/components/ui/pokedex/TabButton.tsx
@@ -67,7 +67,7 @@ export const TabButton: FC<TabButtonProps> = ({onClick, type, pulse}) => {
 export const TabButtonContainer: FC<PropsWithChildren> = ({children}) => {
 
     return <div
-        className="absolute top-1.5 left-3 sm:top-8 sm:left-1 sm:h-1/3 md:h-auto px-1 py-1 md:px-3 md:py-2 md:static flex flex-row sm:flex-col md:flex-row gap-6 lg:gap-12 xl:gap-16 bg-red-600 rounded-full items-center justify-center">
+        className="absolute top-1.5 left-3 sm:top-8 sm:left-1 sm:h-1/3 md:h-auto px-1 py-1 xl:px-3 xl:py-2 md:static flex flex-row sm:flex-col md:flex-row gap-6 lg:gap-12 xl:gap-16 bg-red-600 rounded-full items-center justify-center">
         {children}
     </div>;
 };
\ No newline at end of file
diff --git a/frontend/src/fixtures/pokemon-11-20.json b/frontend/src/fixtures/pokemon-11-20.json
deleted file mode 100644
index 6505409..0000000
--- a/frontend/src/fixtures/pokemon-11-20.json
+++ /dev/null
@@ -1,563 +0,0 @@
-{
-  "page": 2,
-  "pageSize": 10,
-  "pokemon": [
-    {
-      "id": 11,
-      "name": "metapod",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/11.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/11.ogg",
-      "weight": 99,
-      "height": 7
-    },
-    {
-      "id": 12,
-      "name": "butterfree",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/12.ogg",
-      "weight": 320,
-      "height": 11
-    },
-    {
-      "id": 13,
-      "name": "weedle",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/13.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/13.ogg",
-      "weight": 32,
-      "height": 3
-    },
-    {
-      "id": 14,
-      "name": "kakuna",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/14.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/14.ogg",
-      "weight": 100,
-      "height": 6
-    },
-    {
-      "id": 15,
-      "name": "beedrill",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/15.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/15.ogg",
-      "weight": 295,
-      "height": 10
-    },
-    {
-      "id": 16,
-      "name": "pidgey",
-      "primary_type": {
-        "id": 1,
-        "name": "normal",
-        "half_damage_to": [
-          6,
-          9
-        ],
-        "no_damage_to": [
-          8
-        ],
-        "double_damage_from": [
-          2
-        ],
-        "no_damage_from": [
-          8
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
-      },
-      "primary_type_id": 1,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/16.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/16.ogg",
-      "weight": 18,
-      "height": 3
-    },
-    {
-      "id": 17,
-      "name": "pidgeotto",
-      "primary_type": {
-        "id": 1,
-        "name": "normal",
-        "half_damage_to": [
-          6,
-          9
-        ],
-        "no_damage_to": [
-          8
-        ],
-        "double_damage_from": [
-          2
-        ],
-        "no_damage_from": [
-          8
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
-      },
-      "primary_type_id": 1,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/17.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/17.ogg",
-      "weight": 300,
-      "height": 11
-    },
-    {
-      "id": 18,
-      "name": "pidgeot",
-      "primary_type": {
-        "id": 1,
-        "name": "normal",
-        "half_damage_to": [
-          6,
-          9
-        ],
-        "no_damage_to": [
-          8
-        ],
-        "double_damage_from": [
-          2
-        ],
-        "no_damage_from": [
-          8
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
-      },
-      "primary_type_id": 1,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/18.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/18.ogg",
-      "weight": 395,
-      "height": 15
-    },
-    {
-      "id": 19,
-      "name": "rattata",
-      "primary_type": {
-        "id": 1,
-        "name": "normal",
-        "half_damage_to": [
-          6,
-          9
-        ],
-        "no_damage_to": [
-          8
-        ],
-        "double_damage_from": [
-          2
-        ],
-        "no_damage_from": [
-          8
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
-      },
-      "primary_type_id": 1,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/19.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/19.ogg",
-      "weight": 35,
-      "height": 3
-    },
-    {
-      "id": 20,
-      "name": "raticate",
-      "primary_type": {
-        "id": 1,
-        "name": "normal",
-        "half_damage_to": [
-          6,
-          9
-        ],
-        "no_damage_to": [
-          8
-        ],
-        "double_damage_from": [
-          2
-        ],
-        "no_damage_from": [
-          8
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
-      },
-      "primary_type_id": 1,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/20.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/20.ogg",
-      "weight": 185,
-      "height": 7
-    }
-  ],
-  "total": 991
-}
\ No newline at end of file
diff --git a/frontend/src/fixtures/pokemon1-10.json b/frontend/src/fixtures/pokemon1-10.json
deleted file mode 100644
index 8f634d8..0000000
--- a/frontend/src/fixtures/pokemon1-10.json
+++ /dev/null
@@ -1,658 +0,0 @@
-{
-  "page": 1,
-  "pageSize": 10,
-  "pokemon": [
-    {
-      "id": 1,
-      "name": "bulbasaur",
-      "primary_type": {
-        "id": 12,
-        "name": "grass",
-        "double_damage_to": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_to": [
-          3,
-          4,
-          7,
-          9,
-          10,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          3,
-          4,
-          7,
-          10,
-          15
-        ],
-        "half_damage_from": [
-          5,
-          11,
-          12,
-          13
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
-      },
-      "primary_type_id": 12,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/1.ogg",
-      "weight": 69,
-      "height": 7
-    },
-    {
-      "id": 2,
-      "name": "ivysaur",
-      "primary_type": {
-        "id": 12,
-        "name": "grass",
-        "double_damage_to": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_to": [
-          3,
-          4,
-          7,
-          9,
-          10,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          3,
-          4,
-          7,
-          10,
-          15
-        ],
-        "half_damage_from": [
-          5,
-          11,
-          12,
-          13
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
-      },
-      "primary_type_id": 12,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/2.ogg",
-      "weight": 130,
-      "height": 10
-    },
-    {
-      "id": 3,
-      "name": "venusaur",
-      "primary_type": {
-        "id": 12,
-        "name": "grass",
-        "double_damage_to": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_to": [
-          3,
-          4,
-          7,
-          9,
-          10,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          3,
-          4,
-          7,
-          10,
-          15
-        ],
-        "half_damage_from": [
-          5,
-          11,
-          12,
-          13
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
-      },
-      "primary_type_id": 12,
-      "secondary_type": {
-        "id": 4,
-        "name": "poison",
-        "double_damage_to": [
-          12,
-          18
-        ],
-        "half_damage_to": [
-          4,
-          5,
-          6,
-          8
-        ],
-        "no_damage_to": [
-          9
-        ],
-        "double_damage_from": [
-          5,
-          14
-        ],
-        "half_damage_from": [
-          2,
-          4,
-          7,
-          12,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
-      },
-      "secondary_type_id": 4,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/3.ogg",
-      "weight": 1000,
-      "height": 20
-    },
-    {
-      "id": 4,
-      "name": "charmander",
-      "primary_type": {
-        "id": 10,
-        "name": "fire",
-        "double_damage_to": [
-          7,
-          9,
-          12,
-          15
-        ],
-        "half_damage_to": [
-          6,
-          10,
-          11,
-          16
-        ],
-        "double_damage_from": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_from": [
-          7,
-          9,
-          10,
-          12,
-          15,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
-      },
-      "primary_type_id": 10,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/4.ogg",
-      "weight": 85,
-      "height": 6
-    },
-    {
-      "id": 5,
-      "name": "charmeleon",
-      "primary_type": {
-        "id": 10,
-        "name": "fire",
-        "double_damage_to": [
-          7,
-          9,
-          12,
-          15
-        ],
-        "half_damage_to": [
-          6,
-          10,
-          11,
-          16
-        ],
-        "double_damage_from": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_from": [
-          7,
-          9,
-          10,
-          12,
-          15,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
-      },
-      "primary_type_id": 10,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/5.ogg",
-      "weight": 190,
-      "height": 11
-    },
-    {
-      "id": 6,
-      "name": "charizard",
-      "primary_type": {
-        "id": 10,
-        "name": "fire",
-        "double_damage_to": [
-          7,
-          9,
-          12,
-          15
-        ],
-        "half_damage_to": [
-          6,
-          10,
-          11,
-          16
-        ],
-        "double_damage_from": [
-          5,
-          6,
-          11
-        ],
-        "half_damage_from": [
-          7,
-          9,
-          10,
-          12,
-          15,
-          18
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
-      },
-      "primary_type_id": 10,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/6.ogg",
-      "weight": 905,
-      "height": 17
-    },
-    {
-      "id": 7,
-      "name": "squirtle",
-      "primary_type": {
-        "id": 11,
-        "name": "water",
-        "double_damage_to": [
-          5,
-          6,
-          10
-        ],
-        "half_damage_to": [
-          11,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          12,
-          13
-        ],
-        "half_damage_from": [
-          9,
-          10,
-          11,
-          15
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
-      },
-      "primary_type_id": 11,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/7.ogg",
-      "weight": 90,
-      "height": 5
-    },
-    {
-      "id": 8,
-      "name": "wartortle",
-      "primary_type": {
-        "id": 11,
-        "name": "water",
-        "double_damage_to": [
-          5,
-          6,
-          10
-        ],
-        "half_damage_to": [
-          11,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          12,
-          13
-        ],
-        "half_damage_from": [
-          9,
-          10,
-          11,
-          15
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
-      },
-      "primary_type_id": 11,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/8.ogg",
-      "weight": 225,
-      "height": 10
-    },
-    {
-      "id": 9,
-      "name": "blastoise",
-      "primary_type": {
-        "id": 11,
-        "name": "water",
-        "double_damage_to": [
-          5,
-          6,
-          10
-        ],
-        "half_damage_to": [
-          11,
-          12,
-          16
-        ],
-        "double_damage_from": [
-          12,
-          13
-        ],
-        "half_damage_from": [
-          9,
-          10,
-          11,
-          15
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
-      },
-      "primary_type_id": 11,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/9.ogg",
-      "weight": 855,
-      "height": 16
-    },
-    {
-      "id": 10,
-      "name": "caterpie",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10.ogg",
-      "weight": 29,
-      "height": 3
-    },
-    {
-      "id": 11,
-      "name": "metapod",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 0,
-        "name": ""
-      },
-      "secondary_type_id": null,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/11.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/11.ogg",
-      "weight": 99,
-      "height": 7
-    },
-    {
-      "id": 12,
-      "name": "butterfree",
-      "primary_type": {
-        "id": 7,
-        "name": "bug",
-        "double_damage_to": [
-          12,
-          14,
-          17
-        ],
-        "half_damage_to": [
-          2,
-          3,
-          4,
-          8,
-          9,
-          10,
-          18
-        ],
-        "double_damage_from": [
-          3,
-          6,
-          10
-        ],
-        "half_damage_from": [
-          2,
-          5,
-          12
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
-      },
-      "primary_type_id": 7,
-      "secondary_type": {
-        "id": 3,
-        "name": "flying",
-        "double_damage_to": [
-          2,
-          7,
-          12
-        ],
-        "half_damage_to": [
-          6,
-          9,
-          13
-        ],
-        "double_damage_from": [
-          6,
-          13,
-          15
-        ],
-        "half_damage_from": [
-          2,
-          7,
-          12
-        ],
-        "no_damage_from": [
-          5
-        ],
-        "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
-      },
-      "secondary_type_id": 3,
-      "move_set": null,
-      "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png",
-      "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/12.ogg",
-      "weight": 320,
-      "height": 11
-    }
-  ],
-  "total": 991
-}
\ No newline at end of file
diff --git a/frontend/src/fixtures/pokemon_page_1.json b/frontend/src/fixtures/pokemon_page_1.json
new file mode 100644
index 0000000..3747208
--- /dev/null
+++ b/frontend/src/fixtures/pokemon_page_1.json
@@ -0,0 +1,1309 @@
+{
+  "nextPage": "https://localhost:8080/api/v1/pokemon?page=2&pageSize=12",
+  "page": 1,
+  "pageSize": 12,
+  "params": {},
+  "pokemon": [
+    {
+      "id": 1,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "bulbasaur",
+      "varieties": [
+        {
+          "id": 1,
+          "name": "bulbasaur",
+          "primary_type": {
+            "id": 12,
+            "name": "grass",
+            "double_damage_to": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_to": [
+              3,
+              4,
+              7,
+              9,
+              10,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              3,
+              4,
+              7,
+              10,
+              15
+            ],
+            "half_damage_from": [
+              5,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
+          },
+          "primary_type_id": 12,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 1,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/1.ogg",
+          "weight": 69,
+          "height": 7,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "ivysaur",
+      "varieties": [
+        {
+          "id": 2,
+          "name": "ivysaur",
+          "primary_type": {
+            "id": 12,
+            "name": "grass",
+            "double_damage_to": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_to": [
+              3,
+              4,
+              7,
+              9,
+              10,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              3,
+              4,
+              7,
+              10,
+              15
+            ],
+            "half_damage_from": [
+              5,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
+          },
+          "primary_type_id": 12,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 2,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/2.ogg",
+          "weight": 130,
+          "height": 10,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "has_gender_differences": true,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "venusaur",
+      "varieties": [
+        {
+          "id": 3,
+          "name": "venusaur",
+          "primary_type": {
+            "id": 12,
+            "name": "grass",
+            "double_damage_to": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_to": [
+              3,
+              4,
+              7,
+              9,
+              10,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              3,
+              4,
+              7,
+              10,
+              15
+            ],
+            "half_damage_from": [
+              5,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
+          },
+          "primary_type_id": 12,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 3,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/3.ogg",
+          "weight": 1000,
+          "height": 20,
+          "is_default": false
+        },
+        {
+          "id": 10033,
+          "name": "venusaur-mega",
+          "primary_type": {
+            "id": 12,
+            "name": "grass",
+            "double_damage_to": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_to": [
+              3,
+              4,
+              7,
+              9,
+              10,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              3,
+              4,
+              7,
+              10,
+              15
+            ],
+            "half_damage_from": [
+              5,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
+          },
+          "primary_type_id": 12,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 3,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10033.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10033.ogg",
+          "weight": 1555,
+          "height": 24,
+          "is_default": false
+        },
+        {
+          "id": 10195,
+          "name": "venusaur-gmax",
+          "primary_type": {
+            "id": 12,
+            "name": "grass",
+            "double_damage_to": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_to": [
+              3,
+              4,
+              7,
+              9,
+              10,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              3,
+              4,
+              7,
+              10,
+              15
+            ],
+            "half_damage_from": [
+              5,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/12.png"
+          },
+          "primary_type_id": 12,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 3,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10195.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10195.ogg",
+          "weight": 10000,
+          "height": 240,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "charmander",
+      "varieties": [
+        {
+          "id": 4,
+          "name": "charmander",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 4,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/4.ogg",
+          "weight": 85,
+          "height": 6,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 5,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "charmeleon",
+      "varieties": [
+        {
+          "id": 5,
+          "name": "charmeleon",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 5,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/5.ogg",
+          "weight": 190,
+          "height": 11,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 6,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "charizard",
+      "varieties": [
+        {
+          "id": 6,
+          "name": "charizard",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 6,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/6.ogg",
+          "weight": 905,
+          "height": 17,
+          "is_default": false
+        },
+        {
+          "id": 10034,
+          "name": "charizard-mega-x",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 16,
+            "name": "dragon",
+            "double_damage_to": [
+              16
+            ],
+            "half_damage_to": [
+              9
+            ],
+            "no_damage_to": [
+              18
+            ],
+            "double_damage_from": [
+              15,
+              16,
+              18
+            ],
+            "half_damage_from": [
+              10,
+              11,
+              12,
+              13
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/16.png"
+          },
+          "secondary_type_id": 16,
+          "pokemon_species_id": 6,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10034.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10034.ogg",
+          "weight": 1105,
+          "height": 17,
+          "is_default": false
+        },
+        {
+          "id": 10035,
+          "name": "charizard-mega-y",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 6,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10035.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10035.ogg",
+          "weight": 1005,
+          "height": 17,
+          "is_default": false
+        },
+        {
+          "id": 10196,
+          "name": "charizard-gmax",
+          "primary_type": {
+            "id": 10,
+            "name": "fire",
+            "double_damage_to": [
+              7,
+              9,
+              12,
+              15
+            ],
+            "half_damage_to": [
+              6,
+              10,
+              11,
+              16
+            ],
+            "double_damage_from": [
+              5,
+              6,
+              11
+            ],
+            "half_damage_from": [
+              7,
+              9,
+              10,
+              12,
+              15,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/10.png"
+          },
+          "primary_type_id": 10,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 6,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10196.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10196.ogg",
+          "weight": 10000,
+          "height": 280,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 7,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "squirtle",
+      "varieties": [
+        {
+          "id": 7,
+          "name": "squirtle",
+          "primary_type": {
+            "id": 11,
+            "name": "water",
+            "double_damage_to": [
+              5,
+              6,
+              10
+            ],
+            "half_damage_to": [
+              11,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              12,
+              13
+            ],
+            "half_damage_from": [
+              9,
+              10,
+              11,
+              15
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
+          },
+          "primary_type_id": 11,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 7,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/7.ogg",
+          "weight": 90,
+          "height": 5,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 8,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "wartortle",
+      "varieties": [
+        {
+          "id": 8,
+          "name": "wartortle",
+          "primary_type": {
+            "id": 11,
+            "name": "water",
+            "double_damage_to": [
+              5,
+              6,
+              10
+            ],
+            "half_damage_to": [
+              11,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              12,
+              13
+            ],
+            "half_damage_from": [
+              9,
+              10,
+              11,
+              15
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
+          },
+          "primary_type_id": 11,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 8,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/8.ogg",
+          "weight": 225,
+          "height": 10,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 9,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "blastoise",
+      "varieties": [
+        {
+          "id": 9,
+          "name": "blastoise",
+          "primary_type": {
+            "id": 11,
+            "name": "water",
+            "double_damage_to": [
+              5,
+              6,
+              10
+            ],
+            "half_damage_to": [
+              11,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              12,
+              13
+            ],
+            "half_damage_from": [
+              9,
+              10,
+              11,
+              15
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
+          },
+          "primary_type_id": 11,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 9,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/9.ogg",
+          "weight": 855,
+          "height": 16,
+          "is_default": false
+        },
+        {
+          "id": 10036,
+          "name": "blastoise-mega",
+          "primary_type": {
+            "id": 11,
+            "name": "water",
+            "double_damage_to": [
+              5,
+              6,
+              10
+            ],
+            "half_damage_to": [
+              11,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              12,
+              13
+            ],
+            "half_damage_from": [
+              9,
+              10,
+              11,
+              15
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
+          },
+          "primary_type_id": 11,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 9,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10036.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10036.ogg",
+          "weight": 1011,
+          "height": 16,
+          "is_default": false
+        },
+        {
+          "id": 10197,
+          "name": "blastoise-gmax",
+          "primary_type": {
+            "id": 11,
+            "name": "water",
+            "double_damage_to": [
+              5,
+              6,
+              10
+            ],
+            "half_damage_to": [
+              11,
+              12,
+              16
+            ],
+            "double_damage_from": [
+              12,
+              13
+            ],
+            "half_damage_from": [
+              9,
+              10,
+              11,
+              15
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/11.png"
+          },
+          "primary_type_id": 11,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 9,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10197.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10197.ogg",
+          "weight": 10000,
+          "height": 250,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 10,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "caterpie",
+      "varieties": [
+        {
+          "id": 10,
+          "name": "caterpie",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 10,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10.ogg",
+          "weight": 29,
+          "height": 3,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 11,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "metapod",
+      "varieties": [
+        {
+          "id": 11,
+          "name": "metapod",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 11,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/11.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/11.ogg",
+          "weight": 99,
+          "height": 7,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 12,
+      "has_gender_differences": true,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "butterfree",
+      "varieties": [
+        {
+          "id": 12,
+          "name": "butterfree",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 12,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/12.ogg",
+          "weight": 320,
+          "height": 11,
+          "is_default": false
+        },
+        {
+          "id": 10198,
+          "name": "butterfree-gmax",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 12,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10198.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10198.ogg",
+          "weight": 10000,
+          "height": 170,
+          "is_default": false
+        }
+      ]
+    }
+  ],
+  "prevPage": "",
+  "total": 1025
+}
\ No newline at end of file
diff --git a/frontend/src/fixtures/pokemon_page_2.json b/frontend/src/fixtures/pokemon_page_2.json
new file mode 100644
index 0000000..bb6a2b1
--- /dev/null
+++ b/frontend/src/fixtures/pokemon_page_2.json
@@ -0,0 +1,1096 @@
+{
+  "nextPage": "https://localhost:8080/api/v1/pokemon?page=3&pageSize=12",
+  "page": 2,
+  "pageSize": 12,
+  "params": {},
+  "pokemon": [
+    {
+      "id": 13,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "weedle",
+      "varieties": [
+        {
+          "id": 13,
+          "name": "weedle",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 13,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/13.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/13.ogg",
+          "weight": 32,
+          "height": 3,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 14,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "kakuna",
+      "varieties": [
+        {
+          "id": 14,
+          "name": "kakuna",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 14,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/14.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/14.ogg",
+          "weight": 100,
+          "height": 6,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 15,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "beedrill",
+      "varieties": [
+        {
+          "id": 15,
+          "name": "beedrill",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 15,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/15.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/15.ogg",
+          "weight": 295,
+          "height": 10,
+          "is_default": false
+        },
+        {
+          "id": 10090,
+          "name": "beedrill-mega",
+          "primary_type": {
+            "id": 7,
+            "name": "bug",
+            "double_damage_to": [
+              12,
+              14,
+              17
+            ],
+            "half_damage_to": [
+              2,
+              3,
+              4,
+              8,
+              9,
+              10,
+              18
+            ],
+            "double_damage_from": [
+              3,
+              6,
+              10
+            ],
+            "half_damage_from": [
+              2,
+              5,
+              12
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/7.png"
+          },
+          "primary_type_id": 7,
+          "secondary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "secondary_type_id": 4,
+          "pokemon_species_id": 15,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10090.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10090.ogg",
+          "weight": 405,
+          "height": 14,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 16,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "pidgey",
+      "varieties": [
+        {
+          "id": 16,
+          "name": "pidgey",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 16,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/16.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/16.ogg",
+          "weight": 18,
+          "height": 3,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 17,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "pidgeotto",
+      "varieties": [
+        {
+          "id": 17,
+          "name": "pidgeotto",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 17,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/17.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/17.ogg",
+          "weight": 300,
+          "height": 11,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 18,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "pidgeot",
+      "varieties": [
+        {
+          "id": 18,
+          "name": "pidgeot",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 18,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/18.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/18.ogg",
+          "weight": 395,
+          "height": 15,
+          "is_default": false
+        },
+        {
+          "id": 10073,
+          "name": "pidgeot-mega",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 18,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10073.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10073.ogg",
+          "weight": 505,
+          "height": 22,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 19,
+      "has_gender_differences": true,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "rattata",
+      "varieties": [
+        {
+          "id": 19,
+          "name": "rattata",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 19,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/19.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/19.ogg",
+          "weight": 35,
+          "height": 3,
+          "is_default": false
+        },
+        {
+          "id": 10091,
+          "name": "rattata-alola",
+          "primary_type": {
+            "id": 17,
+            "name": "dark",
+            "double_damage_to": [
+              8,
+              14
+            ],
+            "half_damage_to": [
+              2,
+              17,
+              18
+            ],
+            "double_damage_from": [
+              2,
+              7,
+              18
+            ],
+            "half_damage_from": [
+              8,
+              17
+            ],
+            "no_damage_from": [
+              14
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/17.png"
+          },
+          "primary_type_id": 17,
+          "secondary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "secondary_type_id": 1,
+          "pokemon_species_id": 19,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10091.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10091.ogg",
+          "weight": 38,
+          "height": 3,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 20,
+      "has_gender_differences": true,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "raticate",
+      "varieties": [
+        {
+          "id": 20,
+          "name": "raticate",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 20,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/20.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/20.ogg",
+          "weight": 185,
+          "height": 7,
+          "is_default": false
+        },
+        {
+          "id": 10092,
+          "name": "raticate-alola",
+          "primary_type": {
+            "id": 17,
+            "name": "dark",
+            "double_damage_to": [
+              8,
+              14
+            ],
+            "half_damage_to": [
+              2,
+              17,
+              18
+            ],
+            "double_damage_from": [
+              2,
+              7,
+              18
+            ],
+            "half_damage_from": [
+              8,
+              17
+            ],
+            "no_damage_from": [
+              14
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/17.png"
+          },
+          "primary_type_id": 17,
+          "secondary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "secondary_type_id": 1,
+          "pokemon_species_id": 20,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10092.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10092.ogg",
+          "weight": 255,
+          "height": 7,
+          "is_default": false
+        },
+        {
+          "id": 10093,
+          "name": "raticate-totem-alola",
+          "primary_type": {
+            "id": 17,
+            "name": "dark",
+            "double_damage_to": [
+              8,
+              14
+            ],
+            "half_damage_to": [
+              2,
+              17,
+              18
+            ],
+            "double_damage_from": [
+              2,
+              7,
+              18
+            ],
+            "half_damage_from": [
+              8,
+              17
+            ],
+            "no_damage_from": [
+              14
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/17.png"
+          },
+          "primary_type_id": 17,
+          "secondary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "secondary_type_id": 1,
+          "pokemon_species_id": 20,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10093.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/10093.ogg",
+          "weight": 1050,
+          "height": 14,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 21,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "spearow",
+      "varieties": [
+        {
+          "id": 21,
+          "name": "spearow",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 21,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/21.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/21.ogg",
+          "weight": 20,
+          "height": 3,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 22,
+      "has_gender_differences": false,
+      "hatch_counter": 15,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "fearow",
+      "varieties": [
+        {
+          "id": 22,
+          "name": "fearow",
+          "primary_type": {
+            "id": 1,
+            "name": "normal",
+            "half_damage_to": [
+              6,
+              9
+            ],
+            "no_damage_to": [
+              8
+            ],
+            "double_damage_from": [
+              2
+            ],
+            "no_damage_from": [
+              8
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/1.png"
+          },
+          "primary_type_id": 1,
+          "secondary_type": {
+            "id": 3,
+            "name": "flying",
+            "double_damage_to": [
+              2,
+              7,
+              12
+            ],
+            "half_damage_to": [
+              6,
+              9,
+              13
+            ],
+            "double_damage_from": [
+              6,
+              13,
+              15
+            ],
+            "half_damage_from": [
+              2,
+              7,
+              12
+            ],
+            "no_damage_from": [
+              5
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/3.png"
+          },
+          "secondary_type_id": 3,
+          "pokemon_species_id": 22,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/22.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/22.ogg",
+          "weight": 380,
+          "height": 12,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 23,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "ekans",
+      "varieties": [
+        {
+          "id": 23,
+          "name": "ekans",
+          "primary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "primary_type_id": 4,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 23,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/23.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/23.ogg",
+          "weight": 69,
+          "height": 20,
+          "is_default": false
+        }
+      ]
+    },
+    {
+      "id": 24,
+      "has_gender_differences": false,
+      "hatch_counter": 20,
+      "is_baby": false,
+      "is_legendary": false,
+      "is_mythical": false,
+      "name": "arbok",
+      "varieties": [
+        {
+          "id": 24,
+          "name": "arbok",
+          "primary_type": {
+            "id": 4,
+            "name": "poison",
+            "double_damage_to": [
+              12,
+              18
+            ],
+            "half_damage_to": [
+              4,
+              5,
+              6,
+              8
+            ],
+            "no_damage_to": [
+              9
+            ],
+            "double_damage_from": [
+              5,
+              14
+            ],
+            "half_damage_from": [
+              2,
+              4,
+              7,
+              12,
+              18
+            ],
+            "img_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/types/generation-viii/legends-arceus/4.png"
+          },
+          "primary_type_id": 4,
+          "secondary_type": {
+            "id": 0,
+            "name": ""
+          },
+          "secondary_type_id": null,
+          "pokemon_species_id": 24,
+          "sprite_url": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/24.png",
+          "cry": "https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/24.ogg",
+          "weight": 650,
+          "height": 35,
+          "is_default": false
+        }
+      ]
+    }
+  ],
+  "prevPage": "https://localhost:8080/api/v1/pokemon?page=1&pageSize=12",
+  "total": 1025
+}
\ No newline at end of file
diff --git a/frontend/src/models/interfaces.ts b/frontend/src/models/interfaces.ts
index 6484bb2..025e4cc 100644
--- a/frontend/src/models/interfaces.ts
+++ b/frontend/src/models/interfaces.ts
@@ -1,17 +1,3 @@
-import {Pokemon} from "./pokemon.ts";
-
-export interface PokemonResponse {
-    pokemon: Pokemon[]
-    page: number
-    pageSize: number
-    total: number
-}
-
-export interface ListPokemonParams {
-    pokemonName: string | null
-    pokemonType: string | null
-}
-
 export interface Loadable {
     loading?: boolean
 }
\ No newline at end of file
diff --git a/frontend/src/models/pokemon.ts b/frontend/src/models/pokemon.ts
index 70cebd2..5ecaf39 100644
--- a/frontend/src/models/pokemon.ts
+++ b/frontend/src/models/pokemon.ts
@@ -1,12 +1,40 @@
-export interface Pokemon {
+export interface ListPokemonResponse {
+    nextPage: string;
+    page: number;
+    pageSize: number;
+    params: Params;
+    pokemon: PokemonSpecies[];
+    prevPage: string;
+    total: number;
+}
+
+export interface Params {
+}
+
+export interface PokemonSpecies {
+    id: number;
+    has_gender_differences: boolean;
+    hatch_counter: number;
+    is_baby: boolean;
+    is_legendary: boolean;
+    is_mythical: boolean;
     name: string;
+    varieties: PokemonVariety[];
+}
+
+export interface PokemonVariety {
     id: number;
-    primary_type: MoveType
-    secondary_type: MoveType | null
+    name: string;
+    primary_type: MoveType;
+    primary_type_id: number;
+    secondary_type: MoveType | null;
+    secondary_type_id: number | null;
+    pokemon_species_id: number;
     sprite_url: string;
-    cry: string
+    cry: string;
     weight: number;
-    height: number
+    height: number;
+    is_default: boolean;
 }
 
 
@@ -28,3 +56,8 @@ export interface MoveType {
     img_url?: string
     no_damage_from?: number[]
 }
+
+export interface ListPokemonParams {
+    pokemonName: string | null
+    pokemonType: string | null
+}
\ No newline at end of file