From b8b039f7ec217c3ca91611df1f1dfb5d559bd1e4 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 26 Oct 2022 19:44:19 +0200
Subject: [PATCH] fix: pagination

---
 src/lib/components/emptySearch.svelte         |   4 +-
 src/lib/components/index.ts                   |   1 +
 src/lib/components/pagination.svelte          |  33 +----
 src/lib/components/paginationInline.svelte    | 117 ++++++++++++++++++
 src/lib/components/permissions/team.svelte    |   4 +-
 src/lib/components/permissions/user.svelte    |   4 +-
 .../account/activity/[[page]]/+page.svelte    |   9 +-
 .../organizations/[[page]]/+page.svelte       |   9 +-
 .../account/sessions/[[page]]/+page.svelte    |   2 +-
 .../[[page]]/+page.svelte                     |   8 +-
 .../members/[[page]]/+page.svelte             |  14 +--
 .../members/[[page]]/+page.ts                 |   1 +
 .../authentication/[[page]]/+page.svelte      |   8 +-
 .../authentication/[[page]]/+page.ts          |   1 +
 .../teams/[[page]]/+page.svelte               |   9 +-
 .../authentication/teams/[[page]]/+page.ts    |   1 +
 .../activity/[[page]]/+page.svelte            |  10 +-
 .../team-[team]/activity/[[page]]/+page.ts    |   1 +
 .../teams/team-[team]/header.svelte           |   2 +-
 .../team-[team]/members/[[page]]/+page.svelte |  10 +-
 .../team-[team]/members/[[page]]/+page.ts     |   1 +
 .../authentication/user-[user]/+page.svelte   |   2 +-
 .../activity/[[page]]/+page.svelte            |  10 +-
 .../user-[user]/activity/[[page]]/+page.ts    |   1 +
 .../memberships/[[page]]/+page.svelte         |   2 +-
 .../sessions/[[page]]/+page.svelte            |   2 +-
 .../databases/[[page]]/+page.svelte           |   9 +-
 .../databases/[[page]]/+page.ts               |   1 +
 .../database-[database]/[[page]]/+page.svelte |   9 +-
 .../database-[database]/[[page]]/+page.ts     |   1 +
 .../[[page]]/+page.svelte                     |   9 +-
 .../collection-[collection]/[[page]]/+page.ts |   1 +
 .../attributes/+page.svelte                   |   6 +-
 .../indexes/+page.svelte                      |   1 -
 .../functions/[[page]]/+page.svelte           |   9 +-
 .../functions/[[page]]/+page.ts               |   1 +
 .../function-[function]/[[page]]/+page.svelte |  12 +-
 .../function-[function]/[[page]]/+page.ts     |   1 +
 .../executions/[[page]]/+page.svelte          |  10 +-
 .../executions/[[page]]/+page.ts              |   1 +
 .../storage/[[page]]/+page.svelte             |   8 +-
 .../bucket-[bucket]/[[page]]/+page.svelte     |   9 +-
 42 files changed, 263 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/components/paginationInline.svelte

diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 15f1d52b9..8034da844 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -2,7 +2,7 @@
     import { app } from '$lib/stores/app';
     import Light from '$lib/images/search-light.svg';
     import Dark from '$lib/images/search-dark.svg';
-    import Pagination from './pagination.svelte';
+    import PaginationInline from './paginationInline.svelte';
 </script>
 
 <article class="card u-grid u-cross-center u-width-full-line common-section">
@@ -18,5 +18,5 @@
 
 <div class="u-flex u-margin-block-start-32 u-main-space-between">
     <p class="text">Total results: 0</p>
-    <Pagination limit={1} offset={0} sum={0} />
+    <PaginationInline limit={1} offset={0} sum={0} />
 </div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 56df97ac0..d5f73f658 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,5 +1,6 @@
 export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
+export { default as PaginationInline } from './paginationInline.svelte';
 export { default as Card } from './card.svelte';
 export { default as CardGrid } from './cardGrid.svelte';
 export { default as CardContainer } from './cardContainer.svelte';
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 61dc6cf1c..d58e6b7ec 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,38 +1,14 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
     export let sum: number;
     export let limit: number;
     export let offset: number;
-    export let path: string = '';
+    export let path: string;
     export let hidePages = false;
 
-    const dispatch = createEventDispatcher();
-
     $: totalPages = Math.ceil(sum / limit);
     $: currentPage = Math.floor(offset / limit + 1);
     $: pages = pagination(currentPage, totalPages);
 
-    function handleOptionClick(page: number) {
-        if (currentPage !== page) {
-            offset = limit * (page - 1);
-            currentPage = page;
-            dispatch('change');
-        }
-    }
-
-    function handleButtonPage(direction: string) {
-        if (direction === 'next' && currentPage < totalPages) {
-            currentPage += 1;
-            offset = limit * (currentPage - 1);
-            dispatch('change');
-        } else if (direction === 'prev' && currentPage > 1) {
-            currentPage -= 1;
-            offset = limit * (currentPage - 1);
-            dispatch('change');
-        }
-    }
-
     function pagination(page: number, total: number) {
         const pagesShown = 5;
         const start = Math.max(
@@ -66,15 +42,14 @@
                 {#each pages as page}
                     {#if typeof page === 'number'}
                         <li class="pagination-item">
-                            <button
-                                type="button"
+                            <a
+                                href={`${path}/${page}`}
                                 class="button"
-                                on:click={() => handleOptionClick(+page)}
                                 class:is-disabled={currentPage === page}
                                 class:is-text={currentPage !== page}
                                 aria-label="page">
                                 <span class="text">{page}</span>
-                            </button>
+                            </a>
                         </li>
                     {:else}
                         <li class="li is-text">
diff --git a/src/lib/components/paginationInline.svelte b/src/lib/components/paginationInline.svelte
new file mode 100644
index 000000000..12d48afb3
--- /dev/null
+++ b/src/lib/components/paginationInline.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    export let sum: number;
+    export let limit: number;
+    export let offset: number;
+    export let hidePages = false;
+
+    const dispatch = createEventDispatcher();
+
+    $: totalPages = Math.ceil(sum / limit);
+    $: currentPage = Math.floor(offset / limit + 1);
+    $: pages = pagination(currentPage, totalPages);
+
+    function handleOptionClick(page: number) {
+        if (currentPage !== page) {
+            offset = limit * (page - 1);
+            currentPage = page;
+            dispatch('change');
+        }
+    }
+
+    function handleButtonPage(direction: string) {
+        if (direction === 'next' && currentPage < totalPages) {
+            currentPage += 1;
+            offset = limit * (currentPage - 1);
+            dispatch('change');
+        } else if (direction === 'prev' && currentPage > 1) {
+            currentPage -= 1;
+            offset = limit * (currentPage - 1);
+            dispatch('change');
+        }
+    }
+
+    function pagination(page: number, total: number) {
+        const pagesShown = 5;
+        const start = Math.max(
+            1,
+            Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
+        );
+        const end = Math.min(
+            total,
+            Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
+        );
+        return [
+            ...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
+            ...Array.from({ length: end + 1 - start }, (_, i) => i + start),
+            ...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
+        ];
+    }
+</script>
+
+{#if totalPages > 1}
+    <nav class="pagination">
+        <button
+            type="button"
+            on:click={() => handleButtonPage('prev')}
+            class:is-disabled={currentPage <= 1}
+            class="button is-text"
+            aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </button>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                {#each pages as page}
+                    {#if typeof page === 'number'}
+                        <li class="pagination-item">
+                            <button
+                                type="button"
+                                class="button"
+                                on:click={() => handleOptionClick(+page)}
+                                class:is-disabled={currentPage === page}
+                                class:is-text={currentPage !== page}
+                                aria-label="page">
+                                <span class="text">{page}</span>
+                            </button>
+                        </li>
+                    {:else}
+                        <li class="li is-text">
+                            <span class="icon">...</span>
+                        </li>
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
+        <button
+            on:click={() => handleButtonPage('next')}
+            class:is-disabled={currentPage === totalPages}
+            class="button is-text"
+            type="button"
+            aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
+{:else}
+    <nav class="pagination">
+        <button type="button" class="button is-text is-disabled" aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </button>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                    <button type="button" class="button is-disabled" aria-label="page">
+                        <span class="text">1</span>
+                    </button>
+                </li>
+            </ol>
+        {/if}
+        <button type="button" class="button is-text is-disabled" aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
+{/if}
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 8ea527e80..53a4a07e3 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -3,7 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { AvatarInitials, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -101,7 +101,7 @@
             {/if}
             <div class="u-flex u-margin-block-start-32 u-main-space-between">
                 <p class="text">Total results: {results?.total}</p>
-                <Pagination limit={5} bind:offset sum={results?.total} hidePages />
+                <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
             </div>
             <svelte:fragment slot="footer">
                 <Button submit disabled={!hasSelection}>Create</Button>
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 862343d00..3aef10173 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, Form, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { AvatarInitials, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, PaginationInline } from '..';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -97,7 +97,7 @@
         {/if}
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {results?.total}</p>
-            <Pagination limit={5} bind:offset sum={results?.total} hidePages />
+            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
         </div>
         <svelte:fragment slot="footer">
             <Button submit disabled={!hasSelection}>Create</Button>
diff --git a/src/routes/console/account/activity/[[page]]/+page.svelte b/src/routes/console/account/activity/[[page]]/+page.svelte
index 6a547c400..cce632015 100644
--- a/src/routes/console/account/activity/[[page]]/+page.svelte
+++ b/src/routes/console/account/activity/[[page]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
+    import { Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -14,6 +14,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -95,6 +96,10 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.logs.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
+        <Pagination
+            limit={PAGE_LIMIT}
+            path="/console/account/activity"
+            offset={data.offset}
+            sum={data.logs.total} />
     </div>
 </Container>
diff --git a/src/routes/console/account/organizations/[[page]]/+page.svelte b/src/routes/console/account/organizations/[[page]]/+page.svelte
index f0690dcb9..5f422c305 100644
--- a/src/routes/console/account/organizations/[[page]]/+page.svelte
+++ b/src/routes/console/account/organizations/[[page]]/+page.svelte
@@ -12,9 +12,8 @@
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../../createOrganization.svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { cardLimit } from '$lib/stores/layout';
-    import type { PageData } from './$types';
     import { CARD_LIMIT } from '$lib/constants';
+    import type { PageData } from './$types';
 
     export let data: PageData;
 
@@ -73,7 +72,11 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.organizations.total}</p>
-        <Pagination limit={$cardLimit} bind:offset={data.offset} sum={data.organizations.total} />
+        <Pagination
+            limit={CARD_LIMIT}
+            path="console/account/organizations"
+            offset={data.offset}
+            sum={data.organizations.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/account/sessions/[[page]]/+page.svelte b/src/routes/console/account/sessions/[[page]]/+page.svelte
index f09ee165a..032cf2f61 100644
--- a/src/routes/console/account/sessions/[[page]]/+page.svelte
+++ b/src/routes/console/account/sessions/[[page]]/+page.svelte
@@ -117,6 +117,6 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.sessions.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.sessions.total} /> -->
+        <!-- <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.sessions.total} /> -->
     </div>
 </Container>
diff --git a/src/routes/console/organization-[organization]/[[page]]/+page.svelte b/src/routes/console/organization-[organization]/[[page]]/+page.svelte
index c4699b1ae..837ac1319 100644
--- a/src/routes/console/organization-[organization]/[[page]]/+page.svelte
+++ b/src/routes/console/organization-[organization]/[[page]]/+page.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { GridItem1, Heading, Empty, CardContainer } from '$lib/components';
+    import { GridItem1, Heading, Empty, CardContainer, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateProject from '../createProject.svelte';
@@ -102,7 +102,11 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.projects.total}</p>
-        <!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={$projectList?.total} /> -->
+        <Pagination
+            path={`/console/organization-${$page.params.organization}`}
+            limit={CARD_LIMIT}
+            offset={data.offset}
+            sum={data.projects.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
index 182146a11..e70cbc0e8 100644
--- a/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
@@ -8,7 +8,7 @@
         TableCellText,
         TableRow
     } from '$lib/elements/table';
-    import { AvatarInitials, Heading } from '$lib/components';
+    import { AvatarInitials, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -17,7 +17,7 @@
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
     import Delete from '../../deleteMember.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
@@ -110,11 +110,11 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.organizationMembers.total}</p>
-            <!-- <Pagination
-                offset={0}
-                limit={$pageLimit}
-                path={`${$page.url.origin}/console/organization-${$page.params.organization}/members`}
-                sum={$memberList.total} /> -->
+            <Pagination
+                offset={data.offset}
+                limit={PAGE_LIMIT}
+                path={`/console/organization-${$page.params.organization}/members`}
+                sum={data.members.total} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/organization-[organization]/members/[[page]]/+page.ts b/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
index f55e30ab5..0ecf20630 100644
--- a/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
@@ -8,6 +8,7 @@ export const load: PageLoad = async ({ params }) => {
     const offset = page ? page * 5 - 5 : 0;
 
     return {
+        offset,
         organizationMembers: await sdkForConsole.teams.listMemberships(params.organization, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset)
diff --git a/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
index 4bdb7aeaf..c57b832bd 100644
--- a/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
@@ -16,8 +16,8 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { pageLimit } from '$lib/stores/layout';
     import { goto } from '$app/navigation';
+    import { PAGE_LIMIT } from '$lib/constants';
     import Create from '../_createUser.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
@@ -117,10 +117,10 @@
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.users.total}</p>
             <Pagination
-                limit={$pageLimit}
-                offset={0}
+                offset={data.offset}
+                limit={PAGE_LIMIT}
                 sum={data.users.total}
-                path={`${base}/console/project-${projectId}/authentication`} />
+                path={`/console/project-${projectId}/authentication`} />
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/authentication/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/[[page]]/+page.ts
index e5470dbbf..634b3db3a 100644
--- a/src/routes/console/project-[project]/authentication/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/authentication/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         users: await sdkForProject.users.list([
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
index ac463b299..958d93d24 100644
--- a/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
@@ -10,7 +10,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
+    import { Empty, EmptySearch, Search, AvatarInitials, Pagination } from '$lib/components';
     import Create from '../../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
@@ -19,6 +19,7 @@
     import { base } from '$app/paths';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -73,7 +74,11 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.teams.total}</p>
-            <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={$teamsList.total} /> -->
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/authentication/teams`}
+                offset={data.offset}
+                sum={data.teams.total} />
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
index b9bcae190..139ab31dc 100644
--- a/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         teams: sdkForProject.teams.list([
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
index a14533a70..b624f59d9 100644
--- a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
+    import { Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -14,6 +14,8 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
 
     export let data: PageData;
 
@@ -89,6 +91,10 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.logs.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
     </div>
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
index 2254696fc..7a37ebc80 100644
--- a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         logs: sdkForProject.teams.listLogs(params.team, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset)
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
index a9c4e9cc1..502e12894 100644
--- a/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
@@ -28,7 +28,7 @@
     <svelte:fragment slot="header">
         <a
             class="back-button"
-            href={`/console/project-${projectId}/authentication`}
+            href={`/console/project-${projectId}/authentication/teams`}
             aria-label="page back">
             <span class="icon-cheveron-left" aria-hidden="true" />
         </a>
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
index 3a08e5b2c..ad49389d6 100644
--- a/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
+    import { Empty, EmptySearch, Search, AvatarInitials, Pagination } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -18,7 +18,7 @@
     import type { PageData } from './$types';
     import CreateMember from '../../createMembership.svelte';
     import DeleteMembership from '../../deleteMembership.svelte';
-    import { Dependencies } from '$lib/constants';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -82,7 +82,11 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.memberships.total}</p>
-            <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberships.total} /> -->
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/members`}
+                offset={data.offset}
+                sum={data.memberships.total} />
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
index 084ed6582..659010fd4 100644
--- a/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
@@ -12,6 +12,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         memberships: sdkForProject.teams.listMemberships(teamId, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
index acb4a52f9..11a18313d 100644
--- a/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
@@ -174,7 +174,7 @@
             let updatedPrefs = Object.fromEntries(prefs);
 
             await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
-            $user.prefs = updatedPrefs;
+            invalidate(Dependencies.USER);
             arePrefsDisabled = true;
 
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
index 9ea3c7e98..cf8154ed6 100644
--- a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
+    import { Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -14,6 +14,8 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
 
     export let data: PageData;
 
@@ -87,6 +89,10 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.logs.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.logs.total} /> -->
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/user-${$page.params.user}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
     </div>
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
index 162f927e3..278b663d5 100644
--- a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         logs: await sdkForProject.account.listLogs([Query.limit(PAGE_LIMIT), Query.offset(offset)])
     };
 };
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
index f2782947e..fdaee9d8f 100644
--- a/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
@@ -78,7 +78,7 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.memberships.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.total} /> -->
+        <!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.total} /> -->
     </div>
 </Container>
 
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
index 424932573..595e95d7b 100644
--- a/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
@@ -95,7 +95,7 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.sessions.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.sessions.total} /> -->
+        <!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.sessions.total} /> -->
     </div>
 </Container>
 
diff --git a/src/routes/console/project-[project]/databases/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
index 0ac12a671..e2bf04e5d 100644
--- a/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
@@ -2,13 +2,14 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
+    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import Create from '../_create.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -50,7 +51,11 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.databases.total}</p>
-            <!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={data.databases.total} /> -->
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/databases`}
+                offset={data.offset}
+                sum={data.databases.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/[[page]]/+page.ts
index 7afff5971..7bea51ef7 100644
--- a/src/routes/console/project-[project]/databases/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         databases: await sdkForProject.databases.list([
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
index 456ef62ab..41b51c87e 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
+    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -11,6 +11,7 @@
     import type { PageData } from './$types';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from '../create.svelte';
+    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
     let showCreate = false;
@@ -69,7 +70,11 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.collections.total}</p>
-            <!-- <Pagination limit={$cardLimit} bind:offset={$offset} sum={data.collections.total} /> -->
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}`}
+                offset={data.offset}
+                sum={data.collections.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
index 9fbc65d2e..c5d1f8d04 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         collections: await sdkForProject.databases.listCollections(params.database, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index ccada0a8e..1c88f65d1 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -7,7 +7,7 @@
         TableCellHead,
         TableCell
     } from '$lib/elements/table';
-    import { Empty, Copy, Heading } from '$lib/components';
+    import { Empty, Copy, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
@@ -17,6 +17,7 @@
     import type { PageData } from './$types';
     import { collection } from '../store';
     import { page } from '$app/stores';
+    import { PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -75,7 +76,11 @@
 
             <div class="u-flex common-section u-main-space-between">
                 <p class="text">Total results: {data.documents.total}</p>
-                <!-- <Pagination limit={$pageLimit} bind:offset={$offset} sum={data.documents.total} /> -->
+                <Pagination
+                    limit={PAGE_LIMIT}
+                    path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}`}
+                    offset={data.offset}
+                    sum={data.documents.total} />
             </div>
         {:else}
             <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
index b2e9b998c..7c19bb9dc 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         documents: await sdkForProject.databases.listDocuments(params.database, params.collection, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 2cad59f30..6e9a8388a 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -110,11 +110,7 @@
             </TableBody>
         </Table>
         <div class="u-flex common-section u-main-space-between">
-            <!-- <p class="text">Total results: {data.attributes.total}</p>
-            <Pagination
-                limit={$pageLimit}
-                bind:offset={$offset}
-                sum={data.attributes.total} /> -->
+            <p class="text">Total results: {data.attributes.total}</p>
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 2dff212a9..1005db75f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -111,7 +111,6 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.indexes.total}</p>
-            <!-- <Pagination limit={$pageLimit} bind:offset sum={data.indexes.total} /> -->
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/functions/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/[[page]]/+page.svelte
index b16a6bf55..30e19e79e 100644
--- a/src/routes/console/project-[project]/functions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/[[page]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
-    import { Empty, CardContainer, Copy, GridItem1, Heading } from '$lib/components';
+    import { Empty, CardContainer, Copy, GridItem1, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -12,6 +12,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Create from '../createFunction.svelte';
     import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -93,7 +94,11 @@
         </CardContainer>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.functions.total}</p>
-            <!-- <Pagination limit={$cardLimit} bind:offset sum={$functionList.total} /> -->
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/functions`}
+                offset={data.offset}
+                sum={data.functions.total} />
         </div>
     {:else}
         <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/functions/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/[[page]]/+page.ts
index 4e30f8621..371b2988a 100644
--- a/src/routes/console/project-[project]/functions/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/functions/[[page]]/+page.ts
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         functions: await sdkForProject.functions.list([
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
index fb922a02b..ab5327648 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
@@ -8,7 +8,8 @@
         DropListItem,
         Empty,
         Status,
-        Heading
+        Heading,
+        Pagination
     } from '$lib/components';
     import {
         Table,
@@ -27,7 +28,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
     import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
     import Delete from '../delete.svelte';
@@ -35,6 +36,7 @@
     import Activate from '../activate.svelte';
     import { browser } from '$app/environment';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
 
     export let data: PageData;
 
@@ -250,7 +252,11 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.deployments.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset sum={$deploymentList?.total} /> -->
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}`}
+            offset={data.offset}
+            sum={data.deployments.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
index 983a402bb..90964b673 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
@@ -11,6 +11,7 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         deployments: await sdkForProject.functions.listDeployments(params.function, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
index f7d82672c..828ecc389 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
@@ -2,7 +2,7 @@
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Copy, Empty, Status, Heading } from '$lib/components';
+    import { Copy, Empty, Status, Heading, Pagination } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -17,6 +17,8 @@
     import { log } from '$lib/stores/logs';
     import { func } from '../../store';
     import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
 
     export let data: PageData;
 
@@ -80,6 +82,10 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.executions.total}</p>
-        <!-- <Pagination limit={$pageLimit} bind:offset sum={$executionList?.total} /> -->
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}/executions`}
+            offset={data.offset}
+            sum={data.executions.total} />
     </div>
 </Container>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
index 419ec4cb5..23c185827 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
@@ -10,6 +10,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
+        offset,
         executions: await sdkForProject.functions.listExecutions(params.function, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset),
diff --git a/src/routes/console/project-[project]/storage/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
index 2e4929413..9a4563fba 100644
--- a/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
@@ -8,9 +8,9 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { tooltip } from '$lib/actions/tooltip';
-    import { cardLimit } from '$lib/stores/layout';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
     let showCreate = false;
@@ -84,7 +84,11 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.buckets.total}</p>
-            <Pagination limit={$cardLimit} bind:offset={data.offset} sum={data.buckets.total} />
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/storage`}
+                offset={data.offset}
+                sum={data.buckets.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
index ca946ef71..3c4613bbb 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
@@ -32,10 +32,9 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
-    import { pageLimit } from '$lib/stores/layout';
     import type { PageData } from './$types';
     import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -175,7 +174,11 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.files.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={data.offset} sum={data.files.total} />
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`}
+                offset={data.offset}
+                sum={data.files.total} />
         </div>
     {:else if search}
         <EmptySearch>