diff --git a/packages/components/data-source/src/fetch-data-source.ts b/packages/components/data-source/src/fetch-data-source.ts
index 469252b46..dfc05f79c 100644
--- a/packages/components/data-source/src/fetch-data-source.ts
+++ b/packages/components/data-source/src/fetch-data-source.ts
@@ -1,9 +1,4 @@
-import {
-  DATA_SOURCE_DEFAULT_PAGE_SIZE,
-  DataSource,
-  type DataSourceOptions,
-  type DataSourceSort
-} from './data-source.js';
+import { DataSource, type DataSourceOptions, type DataSourceSort } from './data-source.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface FetchDataSourceCallbackOptions<T = any> {
@@ -56,9 +51,6 @@ export class FetchDataSource<T = any> extends DataSource<T> {
   /** Object for keeping track of outstanding fetch calls. */
   #pages: Record<number, Promise<void> | undefined> = {};
 
-  /** The page size when retrieving data. */
-  #pageSize = DATA_SOURCE_DEFAULT_PAGE_SIZE;
-
   /** Proxy of the items array. */
   #proxy: T[] = [];
 
@@ -75,10 +67,6 @@ export class FetchDataSource<T = any> extends DataSource<T> {
     return this.#proxy;
   }
 
-  override get pageSize(): number {
-    return this.#pageSize;
-  }
-
   get size(): number {
     return this.#size;
   }
@@ -86,10 +74,13 @@ export class FetchDataSource<T = any> extends DataSource<T> {
   constructor(options: FetchDataSourceOptions<T>) {
     super(options);
 
-    this.#pageSize = options.pageSize ?? DATA_SOURCE_DEFAULT_PAGE_SIZE;
     this.#size = options.size ?? FetchDataSource.defaultSize;
     this.fetchPage = options.fetchPage;
 
+    if (typeof options.pageSize === 'number') {
+      this.setPageSize(options.pageSize);
+    }
+
     if (options.placeholder) {
       this.placeholder = options.placeholder;
     }
diff --git a/packages/components/grid/src/stories/pagination.stories.ts b/packages/components/grid/src/stories/pagination.stories.ts
index 4e962da18..3beaba7de 100644
--- a/packages/components/grid/src/stories/pagination.stories.ts
+++ b/packages/components/grid/src/stories/pagination.stories.ts
@@ -173,7 +173,7 @@ export const DataSource2: Story = {
       <div class="pagination">
         <sl-paginator-status .dataSource=${ds}></sl-paginator-status>
         <sl-paginator .dataSource=${ds}></sl-paginator>
-        <sl-paginator-page-size .dataSource=${ds} .pageSizes=${[10, 15, 20]}></sl-paginator-page-size>
+        <sl-paginator-page-size .dataSource=${ds} page-sizes="[5,10,15,20]"></sl-paginator-page-size>
       </div>
     `;
   }
diff --git a/packages/components/paginator/src/examples.stories.ts b/packages/components/paginator/src/examples.stories.ts
index e4942e97d..0f73ece34 100644
--- a/packages/components/paginator/src/examples.stories.ts
+++ b/packages/components/paginator/src/examples.stories.ts
@@ -19,6 +19,7 @@ export const Connected: Story = {
     };
 
     const onPageSizeChange = ({ detail: pageSize }: SlChangeEvent<number>): void => {
+      document.querySelector('sl-paginator')!.page = 0;
       document.querySelector('sl-paginator')!.pageSize = pageSize;
       document.querySelector('sl-paginator-status')!.pageSize = pageSize;
     };