diff --git a/addons/rose/addon/components/rose/pagination/index.hbs b/addons/rose/addon/components/rose/pagination/index.hbs
index 80f4144dc..c7efbb142 100644
--- a/addons/rose/addon/components/rose/pagination/index.hbs
+++ b/addons/rose/addon/components/rose/pagination/index.hbs
@@ -10,4 +10,5 @@
   @route={{this.router.currentRouteName}}
   @model={{@model}}
   @queryFunction={{this.paginationQueryParams}}
+  @onPageSizeChange={{this.handlePageSizeChange}}
 />
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/pagination/index.js b/addons/rose/addon/components/rose/pagination/index.js
index 7a469458c..96aa1cd71 100644
--- a/addons/rose/addon/components/rose/pagination/index.js
+++ b/addons/rose/addon/components/rose/pagination/index.js
@@ -5,6 +5,7 @@
 
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class RosePaginationComponent extends Component {
   @service router;
@@ -21,4 +22,12 @@ export default class RosePaginationComponent extends Component {
       };
     };
   }
+
+  @action
+  async handlePageSizeChange(pageSize) {
+    // Reset to the first page when changing the page size
+    const queryParams = { page: 1, pageSize };
+
+    await this.router.transitionTo({ queryParams });
+  }
 }