diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index ec600d8..7eb9086 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -32,6 +32,7 @@
     import {default as Modal} from "./modal/Modal.svelte"
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
     import {onMount} from "svelte";
+    import Pagination from "./Pagination.svelte";
 
 
     let isAniListLoggedIn: boolean
@@ -87,14 +88,6 @@
             }
         })
     })
-
-    function ChangeWatchListPage(newPage: number) {
-        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-            watchListPage.set(newPage)
-            aniListWatchlist.set(result)
-            aniListLoggedIn.set(true)
-        })
-    }
 </script>
 
 <Header/>
@@ -104,50 +97,7 @@
         <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
             <h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
 
-            <div class="mb-8">
-                <nav aria-label="Page navigation example">
-                    <ul class="inline-flex -space-x-px text-base h-10">
-                        {#if page === 1}
-
-                            <li>
-                                <button disabled
-                                   class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
-                            </li>
-                        {:else}
-                            <li>
-                                <button on:click={() => ChangeWatchListPage(page-1)}
-                                   class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
-                            </li>
-                        {/if}
-                        {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
-                            {#if i+1 === page}
-                                <li>
-                                    <button on:click={() => ChangeWatchListPage(i+1)}
-                                            class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
-                                </li>
-                            {:else}
-                                <li>
-                                    <button on:click={() => ChangeWatchListPage(i+1)}
-                                       class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
-                                </li>
-                            {/if}
-                        {/each}
-                        {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-
-                            <li>
-                                <button disabled
-                                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
-                            </li>
-                        {:else}
-                            <li>
-                                <button on:click={() => ChangeWatchListPage(page+1)}
-                                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
-                            </li>
-                        {/if}
-                    </ul>
-                </nav>
-            </div>
-
+            <Pagination />
 
             <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
                 {#each aniListWatchListLoaded.data.Page.mediaList as media}
@@ -181,49 +131,7 @@
                 {/each}
             </div>
 
-            <div class="mt-8">
-                <nav aria-label="Page navigation example">
-                    <ul class="inline-flex -space-x-px text-base h-10">
-                        {#if page === 1}
-
-                            <li>
-                                <button disabled
-                                        class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
-                            </li>
-                        {:else}
-                            <li>
-                                <button on:click={() => ChangeWatchListPage(page-1)}
-                                        class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
-                            </li>
-                        {/if}
-                        {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
-                            {#if i+1 === page}
-                                <li>
-                                    <button on:click={() => ChangeWatchListPage(i+1)}
-                                            class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
-                                </li>
-                            {:else}
-                                <li>
-                                    <button on:click={() => ChangeWatchListPage(i+1)}
-                                            class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
-                                </li>
-                            {/if}
-                        {/each}
-                        {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-
-                            <li>
-                                <button disabled
-                                        class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
-                            </li>
-                        {:else}
-                            <li>
-                                <button on:click={() => ChangeWatchListPage(page+1)}
-                                        class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
-                            </li>
-                        {/if}
-                    </ul>
-                </nav>
-            </div>
+            <Pagination />
         </div>
     {/if}
 
diff --git a/frontend/src/Pagination.svelte b/frontend/src/Pagination.svelte
new file mode 100644
index 0000000..8b4235b
--- /dev/null
+++ b/frontend/src/Pagination.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import {
+        aniListLoggedIn,
+        aniListWatchlist,
+        animePerPage,
+        watchListPage,
+    } from "./GlobalVariablesAndHelperFunctions.svelte";
+
+    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
+    import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
+    import {MediaListSort} from "./anilist/types/AniListTypes";
+
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
+    let page: number
+    let perPage: number
+
+    watchListPage.subscribe(value => page = value)
+    animePerPage.subscribe(value => perPage = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+
+    const perPageOptions = [10, 20, 50]
+
+    function ChangeWatchListPage(newPage: number) {
+        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+            watchListPage.set(newPage)
+            aniListWatchlist.set(result)
+            aniListLoggedIn.set(true)
+        })
+    }
+
+    function changePage(e): void {
+        if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value))
+    }
+
+    function changeCountPerPage(e): void {
+        GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
+            animePerPage.set(Number(e.target.value))
+            watchListPage.set(1)
+            aniListWatchlist.set(result)
+            aniListLoggedIn.set(true)
+        })
+    }
+
+</script>
+
+<div class="mb-8">
+    {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+        <nav aria-label="Page navigation" class="hidden md:block">
+            <ul class="inline-flex -space-x-px text-base h-10">
+                {#if page === 1}
+                    <li>
+                        <button disabled
+                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">
+                            Previous
+                        </button>
+                    </li>
+                {:else}
+                    <li>
+                        <button on:click={() => ChangeWatchListPage(page-1)}
+                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                            Previous
+                        </button>
+                    </li>
+                {/if}
+                {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
+                    {#if i + 1 === page}
+                        <li>
+                            <button on:click={() => ChangeWatchListPage(i+1)}
+                                    class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i + 1}</button>
+                        </li>
+                    {:else}
+                        <li>
+                            <button on:click={() => ChangeWatchListPage(i+1)}
+                                    class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i + 1}</button>
+                        </li>
+                    {/if}
+                {/each}
+                {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+                    <li>
+                        <button disabled
+                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">
+                            Next
+                        </button>
+                    </li>
+                {:else}
+                    <li>
+                        <button on:click={() => ChangeWatchListPage(page+1)}
+                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                            Next
+                        </button>
+                    </li>
+                {/if}
+            </ul>
+        </nav>
+    {/if}
+    <div class="flex mt-5">
+        <div class="w-20 mx-auto">
+            <select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                {#each perPageOptions as option}
+                    <option value={option}>
+                        {option}
+                    </option>
+                {/each}
+            </select>
+        </div>
+
+        <div>
+            <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
+            {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+                <div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+            {:else}
+                <div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+            {/if}
+        </div>
+
+        <div class="max-w-xs mx-auto">
+            <div class="relative flex items-center max-w-[11rem]">
+                <button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
+                        class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
+                    <svg class="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M1 1h16"/>
+                    </svg>
+                </button>
+                <input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}"
+                       on:keydown={changePage} id="page-counter"
+                       class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none bg-gray-50 border-x-0 border-gray-300 h-11 font-medium text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full pb-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       value={page} required/>
+                <div class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse">
+                    <span>Page #</span>
+                </div>
+                <button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)}
+                        class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
+                    <svg class="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true"
+                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M9 1v16M1 9h16"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file