diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
index 97616b6..b40c6d1 100644
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@@ -3,11 +3,11 @@
 
   const totalCount = $boredState.search.totalCount; // TODO: Check default value
   console.log('totalCount', totalCount);
-  $: pageSize = $boredState.search.pageSize;
+  const pageSize = $boredState.search.pageSize;
   console.log('pageSize', pageSize);
-  $: currentPage = $boredState.search.currentPage;
+  const currentPage = $boredState.search.currentPage;
   console.log('currentPage', currentPage);
-  $: skip = $boredState.search.skip;
+  let skip = $boredState.search.skip;
   console.log('skip', skip);
 
   const totalPages: number = Math.ceil(totalCount / pageSize);
@@ -19,18 +19,29 @@
   const itemsLeft: number =
     totalCount - currentPage * pageSize >= 0 ? totalCount - currentPage * pageSize : 0;
 
-  const pageArray = Array.from({ length: 10 }, (_, i) => i + 1);
+  const maxPaginationButtons = 10;
+  let addition = maxPaginationButtons;
+  if (addition <= maxPaginationButtons) {
+    addition = skip;
+  }
+  const pageArray = Array.from({ length: maxPaginationButtons }, (_, i) => i + 1 + addition);
   // console.log('pageArray', pageArray);
 </script>
 
 <div class="container">
   <button type="button" class="btn" disabled={!hasPrevPage}>Prev</button>
-  {#each pageArray as page}
+  {#each pageArray as page (page)}
     <button
       type="button"
       class="btn"
-      aria-current={page === currentPage}
-      class:current={page === currentPage}>{page}</button
+      class:current={page === currentPage}
+      value={page}
+      on:click={() => {
+        boredState.update((n) => ({
+          ...n,
+          search: { skip: page * pageSize, currentPage: currentPage + 1, pageSize, totalCount }
+        }));
+      }}>{page}</button
     >
   {/each}
   <button type="button" class="btn" disabled={!hasNextPage}>Next</button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c60749a..dda3d10 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,6 +22,14 @@
     boredState.update((n) => ({ ...n, loading: false }));
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
+    const skip = $boredState?.search?.skip;
+    const pageSize = $boredState?.search?.pageSize;
+    const currentPage = $boredState?.search?.currentPage;
+    const totalCount = responseData?.totalCount;
+    boredState.update((n) => ({
+      ...n,
+      search: { totalCount, skip, pageSize, currentPage }
+    }));
   }
 
   let isOpen: boolean = false;
diff --git a/src/routes/api/game/+server.ts b/src/routes/api/game/+server.ts
index 06baf2f..2a2ca3e 100644
--- a/src/routes/api/game/+server.ts
+++ b/src/routes/api/game/+server.ts
@@ -54,6 +54,7 @@ export const POST: RequestHandler = async ({ request }) => {
     });
 
     return json$1({
+      totalCount,
       games
     });
   }