diff --git a/src/api/mock-data/meshes/default/circuit-breakers.json b/src/api/mock-data/meshes/default/circuit-breakers.json
index cee3ab768..a76cc424b 100644
--- a/src/api/mock-data/meshes/default/circuit-breakers.json
+++ b/src/api/mock-data/meshes/default/circuit-breakers.json
@@ -98,5 +98,5 @@
       }
     }
   ],
-  "next": null
+  "next": "http://localhost:5681/meshes/default/circuit-breakers?offset=1"
 }
diff --git a/src/app/data-planes/views/DataPlaneListView.vue b/src/app/data-planes/views/DataPlaneListView.vue
index a1f02794b..0255ce318 100644
--- a/src/app/data-planes/views/DataPlaneListView.vue
+++ b/src/app/data-planes/views/DataPlaneListView.vue
@@ -400,11 +400,12 @@ async function parseData(dataPlaneOverview: DataPlaneOverview) {
 }
 
 async function loadData(offset: number): Promise<void> {
-  isLoading.value = true
   pageOffset.value = offset
-
   // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
   patchQueryParam('offset', offset > 0 ? offset : null)
+
+  isLoading.value = true
+
   const mesh = route.params.mesh as string
   const size = PAGE_SIZE
 
diff --git a/src/app/policies/views/PolicyView.vue b/src/app/policies/views/PolicyView.vue
index 05b421abb..717d116fa 100644
--- a/src/app/policies/views/PolicyView.vue
+++ b/src/app/policies/views/PolicyView.vue
@@ -35,6 +35,7 @@
         :table-data="tableData"
         :table-data-is-empty="tableDataIsEmpty"
         :next="nextUrl"
+        :page-offset="pageOffset"
         @table-action="getEntity"
         @load-data="loadData"
       >
@@ -137,6 +138,7 @@ import PolicyConnections from '../components/PolicyConnections.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
 import YamlView from '@/app/common/YamlView.vue'
 import { PolicyEntity, TableHeader } from '@/types/index.d'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 const tabs = [
   {
@@ -157,6 +159,12 @@ const props = defineProps({
     type: String,
     required: true,
   },
+
+  offset: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
 })
 
 const isLoading = ref(true)
@@ -169,6 +177,7 @@ const tableDataIsEmpty = ref(false)
 const entity = ref<any>({})
 const rawEntity = ref<Omit<PolicyEntity, 'creationTime' | 'modificationTime'> | null>(null)
 const nextUrl = ref<string | null>(null)
+const pageOffset = ref(props.offset)
 
 const tableData = ref<{ headers: TableHeader[], data: any[] }>({
   headers: [
@@ -202,12 +211,16 @@ watch(() => route.params.mesh, function () {
   tableDataIsEmpty.value = false
   error.value = null
 
-  loadData()
+  loadData(0)
 })
 
-loadData()
+loadData(props.offset)
+
+async function loadData(offset: number): Promise<void> {
+  pageOffset.value = offset
+  // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+  patchQueryParam('offset', offset > 0 ? offset : null)
 
-async function loadData(offset: number = 0): Promise<void> {
   isLoading.value = true
   error.value = null
 
diff --git a/src/app/services/views/ServiceListView.vue b/src/app/services/views/ServiceListView.vue
index eba9dba8c..f2958d49a 100644
--- a/src/app/services/views/ServiceListView.vue
+++ b/src/app/services/views/ServiceListView.vue
@@ -10,6 +10,7 @@
         :table-data="tableData"
         :table-data-is-empty="tableData.data.length === 0"
         :next="nextUrl"
+        :page-offset="pageOffset"
         @table-action="setActiveServiceInsight"
         @load-data="loadData"
       />
@@ -36,6 +37,7 @@ import ServiceDetails from '../components/ServiceDetails.vue'
 import { kumaApi } from '@/api/kumaApi'
 import { STATUS } from '@/constants'
 import { ServiceInsight, TableHeader } from '@/types/index.d'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 const headers: TableHeader[] = [
   { label: 'Service', key: 'name' },
@@ -54,9 +56,18 @@ const EMPTY_STATE = {
 
 const route = useRoute()
 
+const props = defineProps({
+  offset: {
+    type: Number,
+    required: false,
+    default: 0,
+  },
+})
+
 const isLoading = ref(true)
 const error = ref<Error | null>(null)
 const nextUrl = ref<string | null>(null)
+const pageOffset = ref(props.offset)
 const serviceInsight = ref<{ name: string, mesh: string, serviceType?: 'internal' | 'external' | 'gateway_builtin' | 'gateway_delegated' } | null>(null)
 const tableData = ref<{ headers: TableHeader[], data: any[] }>({
   headers,
@@ -72,9 +83,13 @@ watch(() => route.params.mesh, function () {
   loadData(0)
 })
 
-loadData(0)
+loadData(props.offset)
 
 async function loadData(offset: number): Promise<void> {
+  pageOffset.value = offset
+  // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+  patchQueryParam('offset', offset > 0 ? offset : null)
+
   isLoading.value = true
   error.value = null
 
diff --git a/src/app/zones/views/ZoneEgresses.vue b/src/app/zones/views/ZoneEgresses.vue
index 7072d8c26..98e8eb7af 100644
--- a/src/app/zones/views/ZoneEgresses.vue
+++ b/src/app/zones/views/ZoneEgresses.vue
@@ -10,6 +10,7 @@
         :table-data="tableData"
         :table-data-is-empty="isEmpty"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
         @load-data="loadData($event)"
       >
@@ -129,6 +130,7 @@ import LabelList from '@/app/common/LabelList.vue'
 import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.vue'
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZoneEgresses',
@@ -147,6 +149,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -192,8 +202,10 @@ export default {
       pageSize: PAGE_SIZE_DEFAULT,
       next: null,
       subscriptionsReversed: [],
+      pageOffset: this.offset,
     }
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
@@ -201,16 +213,15 @@ export default {
       this.isEmpty = false
       this.error = null
 
-      this.init()
+      this.loadData(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.loadData(this.offset)
   },
+
   methods: {
-    init() {
-      this.loadData()
-    },
     tableAction(ev) {
       const data = ev
 
@@ -218,7 +229,11 @@ export default {
       this.getEntity(data)
     },
 
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 
diff --git a/src/app/zones/views/ZoneIngresses.vue b/src/app/zones/views/ZoneIngresses.vue
index 2a1618736..d05c00e98 100644
--- a/src/app/zones/views/ZoneIngresses.vue
+++ b/src/app/zones/views/ZoneIngresses.vue
@@ -13,8 +13,9 @@
         :table-data="tableData"
         :table-data-is-empty="isEmpty"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
-        @load-data="loadData($event)"
+        @load-data="loadData"
       >
         <template #additionalControls>
           <KButton
@@ -134,6 +135,7 @@ import MultizoneInfo from '../components/MultizoneInfo.vue'
 import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.vue'
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZoneIngresses',
@@ -153,6 +155,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -198,13 +208,16 @@ export default {
       pageSize: PAGE_SIZE_DEFAULT,
       next: null,
       subscriptionsReversed: [],
+      pageOffset: this.offset,
     }
   },
+
   computed: {
     ...mapGetters({
       multicluster: 'config/getMulticlusterStatus',
     }),
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
@@ -212,16 +225,18 @@ export default {
       this.isEmpty = false
       this.error = null
 
-      this.init()
+      this.init(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.init(this.offset)
   },
+
   methods: {
-    init() {
+    init(offset) {
       if (this.multicluster) {
-        this.loadData()
+        this.loadData(offset)
       }
     },
     tableAction(ev) {
@@ -231,7 +246,11 @@ export default {
       this.getEntity(data)
     },
 
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 
diff --git a/src/app/zones/views/ZonesView.vue b/src/app/zones/views/ZonesView.vue
index e918648c0..a20bc1410 100644
--- a/src/app/zones/views/ZonesView.vue
+++ b/src/app/zones/views/ZonesView.vue
@@ -14,6 +14,7 @@
         :table-data-is-empty="tableDataIsEmpty"
         :show-warnings="tableData.data.some((item) => item.withWarnings)"
         :next="next"
+        :page-offset="pageOffset"
         @table-action="tableAction"
         @load-data="loadData($event)"
       >
@@ -138,6 +139,7 @@ import SubscriptionDetails from '@/app/common/subscriptions/SubscriptionDetails.
 import SubscriptionHeader from '@/app/common/subscriptions/SubscriptionHeader.vue'
 import TabsWidget from '@/app/common/TabsWidget.vue'
 import WarningsWidget from '@/app/common/warnings/WarningsWidget.vue'
+import { patchQueryParam } from '@/utilities/patchQueryParam'
 
 export default {
   name: 'ZonesView',
@@ -159,6 +161,14 @@ export default {
     KCard,
   },
 
+  props: {
+    offset: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+
   data() {
     return {
       isLoading: true,
@@ -210,14 +220,17 @@ export default {
       subscriptionsReversed: [],
       codeOutput: null,
       zonesWithIngress: new Set(),
+      pageOffset: this.offset,
     }
   },
+
   computed: {
     ...mapGetters({
       multicluster: 'config/getMulticlusterStatus',
       globalCpVersion: 'config/getVersion',
     }),
   },
+
   watch: {
     $route() {
       // Ensures basic state is reset when switching meshes using the mesh selector.
@@ -229,18 +242,21 @@ export default {
       this.entityHasError = false
       this.tableDataIsEmpty = false
 
-      this.init()
+      this.init(0)
     },
   },
+
   beforeMount() {
-    this.init()
+    this.init(this.offset)
   },
+
   methods: {
-    init() {
+    init(offset) {
       if (this.multicluster) {
-        this.loadData()
+        this.loadData(offset)
       }
     },
+
     filterTabs() {
       if (!this.warnings.length) {
         return this.tabs.filter((tab) => tab.hash !== '#warnings')
@@ -303,7 +319,11 @@ export default {
 
       this.zonesWithEgress = zones
     },
-    async loadData(offset = '0') {
+    async loadData(offset) {
+      this.pageOffset = offset
+      // Puts the offset parameter in the URL so it can be retrieved when the user reloads the page.
+      patchQueryParam('offset', offset > 0 ? offset : null)
+
       this.isLoading = true
       this.isEmpty = false
 
diff --git a/src/router/getLastParameter.ts b/src/router/getLastParameter.ts
new file mode 100644
index 000000000..761fa1b7f
--- /dev/null
+++ b/src/router/getLastParameter.ts
@@ -0,0 +1,11 @@
+import { LocationQueryValue } from 'vue-router'
+
+export function getLastNumberParameter(param: LocationQueryValue | LocationQueryValue[], defaultValue: number = 0): number {
+  const lastParam = getLastParameter(param)
+  return lastParam !== undefined ? parseInt(lastParam) : defaultValue
+}
+
+export function getLastParameter(param: LocationQueryValue | LocationQueryValue[]): string | undefined {
+  const paramList = Array.isArray(param) ? param : [param]
+  return paramList[paramList.length - 1] ?? undefined
+}
diff --git a/src/router/router.ts b/src/router/router.ts
index 98059093e..51233eee5 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -1,5 +1,6 @@
 import { createRouter as createVueRouter, createWebHistory, NavigationGuard, Router, RouteRecordRaw } from 'vue-router'
 
+import { getLastNumberParameter } from './getLastParameter'
 import { store } from '@/store/store'
 import { PolicyDefinition } from '@/types/index.d'
 import { ClientStorage } from '@/utilities/ClientStorage'
@@ -13,9 +14,10 @@ function getPolicyRoutes(policies: PolicyDefinition[]): RouteRecordRaw[] {
       shouldReRender: true,
       title: policy.pluralDisplayName,
     },
-    props: {
+    props: (route) => ({
       policyPath: policy.path,
-    },
+      offset: getLastNumberParameter(route.query.offset),
+    }),
     component: () => import('@/app/policies/views/PolicyView.vue'),
   }))
 }
@@ -55,6 +57,9 @@ export function createRouter(policyDefinitions: PolicyDefinition[] = []): Router
       meta: {
         title: 'Zones',
       },
+      props: (route) => ({
+        offset: getLastNumberParameter(route.query.offset),
+      }),
       component: () => import('@/app/zones/views/ZonesView.vue'),
     },
     {
@@ -63,6 +68,9 @@ export function createRouter(policyDefinitions: PolicyDefinition[] = []): Router
       meta: {
         title: 'Zone ingresses',
       },
+      props: (route) => ({
+        offset: getLastNumberParameter(route.query.offset),
+      }),
       component: () => import('@/app/zones/views/ZoneIngresses.vue'),
     },
     {
@@ -71,6 +79,9 @@ export function createRouter(policyDefinitions: PolicyDefinition[] = []): Router
       meta: {
         title: 'Zone egresses',
       },
+      props: (route) => ({
+        offset: getLastNumberParameter(route.query.offset),
+      }),
       component: () => import('@/app/zones/views/ZoneEgresses.vue'),
     },
     {
@@ -93,15 +104,10 @@ export function createRouter(policyDefinitions: PolicyDefinition[] = []): Router
               meta: {
                 title: 'Data plane proxies',
               },
-              props(route) {
-                const offsets = Array.isArray(route.query.offset) ? route.query.offset : [route.query.offset]
-                const offset = parseInt(offsets[offsets.length - 1] ?? '0') || 0
-
-                return {
-                  name: route.query.name,
-                  offset,
-                }
-              },
+              props: (route) => ({
+                name: route.query.name,
+                offset: getLastNumberParameter(route.query.offset),
+              }),
               component: () => import('@/app/data-planes/views/DataPlaneListView.vue'),
             },
             {
@@ -125,6 +131,9 @@ export function createRouter(policyDefinitions: PolicyDefinition[] = []): Router
               meta: {
                 title: 'Services',
               },
+              props: (route) => ({
+                offset: getLastNumberParameter(route.query.offset),
+              }),
               component: () => import('@/app/services/views/ServiceListView.vue'),
             },
             {