diff --git a/e2e-tests/tests/headlamp.spec.ts b/e2e-tests/tests/headlamp.spec.ts
index 21364c434e1..65a3fcafc6e 100644
--- a/e2e-tests/tests/headlamp.spec.ts
+++ b/e2e-tests/tests/headlamp.spec.ts
@@ -1,35 +1,35 @@
-import { test, expect } from '@playwright/test';
-import { HeadlampPage } from './headlampPage';
-import { ServicesPage } from './servicesPage';
-import { SecurityPage } from './securityPage';
+import { test, expect } from "@playwright/test";
+import { HeadlampPage } from "./headlampPage";
+import { ServicesPage } from "./servicesPage";
+import { SecurityPage } from "./securityPage";
 
 // --- Plugins tests start --- //
-test('GET /plugins/list returns plugins list', async ({ page }) => {
-  const response: any = await page.goto('/plugins');
+test("GET /plugins/list returns plugins list", async ({ page }) => {
+  const response: any = await page.goto("/plugins");
   expect(response).toBeTruthy();
 
   const json = await response.json();
   expect(json.length).toBeGreaterThan(0);
-  expect(json.some(str => str.includes('plugins/'))).toBeTruthy();
+  expect(json.some((str) => str.includes("plugins/"))).toBeTruthy();
 });
 // --- Plugin tests end --- //
 
 // --- Headlamp tests start --- //
-test('headlamp is there and so is minikube', async ({ page }) => {
+test("headlamp is there and so is minikube", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
 
   await headlampPage.authenticate();
   await headlampPage.hasURLContaining(/.*main/);
 });
 
-test('main page should have Network tab', async ({ page }) => {
+test("main page should have Network tab", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
 
   await headlampPage.authenticate();
   await headlampPage.hasNetworkTab();
 });
 
-test('service page should have headlamp service', async ({ page }) => {
+test("service page should have headlamp service", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
   const servicesPage = new ServicesPage(page);
 
@@ -38,10 +38,10 @@ test('service page should have headlamp service', async ({ page }) => {
   await servicesPage.clickOnServicesSection();
 
   // Check if there is text "headlamp" on the page
-  await headlampPage.checkPageContent('headlamp');
+  await headlampPage.checkPageContent("headlamp");
 });
 
-test('headlamp service page should contain port', async ({ page }) => {
+test("headlamp service page should contain port", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
   const servicesPage = new ServicesPage(page);
 
@@ -51,17 +51,17 @@ test('headlamp service page should contain port', async ({ page }) => {
   await servicesPage.goToParticularService("headlamp");
 
   // Check if there is text "TCP" on the page
-  await headlampPage.checkPageContent('TCP');
+  await headlampPage.checkPageContent("TCP");
 });
 
-test('main page should have Security tab', async ({ page }) => {
+test("main page should have Security tab", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
 
   await headlampPage.authenticate();
   await headlampPage.hasSecurityTab();
 });
 
-test('Service account tab should have headlamp-admin', async ({ page }) => {
+test("Service account tab should have headlamp-admin", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
   const securityPage = new SecurityPage(page);
 
@@ -70,20 +70,42 @@ test('Service account tab should have headlamp-admin', async ({ page }) => {
   await securityPage.clickOnServiceAccountsSection();
 
   // Check if there is text "headlamp-admin" on the page
-  await headlampPage.checkPageContent('headlamp-admin');
+  await headlampPage.checkPageContent("headlamp-admin");
 });
 
-test('Logout the user', async ({ page }) => {
+test("Logout the user", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
 
   await headlampPage.authenticate();
   await headlampPage.logout();
 });
 
-test('404 page is present', async ({ page }) => {
+test("404 page is present", async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
 
   await headlampPage.authenticate();
-  await headlampPage.navigateTopage('/404test', /Whoops! This page doesn't exist/);
+  await headlampPage.navigateTopage(
+    "/404test",
+    /Whoops! This page doesn't exist/
+  );
 });
+
+test("pagination goes to next page", async ({ page }) => {
+  const headlampPage = new HeadlampPage(page);
+  await headlampPage.authenticate();
+
+  const securityPage = new SecurityPage(page);
+  await securityPage.navigateToSecurity();
+  await securityPage.clickOnServiceAccountsSection();
+
+  headlampPage.clickOnRolesSection();
+  const rowsDisplayed1 = headlampPage.getRowsDisplayed();
+
+  headlampPage.clickNextPageRows();
+
+  const rowsDisplayed2 = headlampPage.getRowsDisplayed();
+
+  expect(rowsDisplayed1).not.toBe(rowsDisplayed2);
+});
+
 // --- Headlamp tests end --- //
diff --git a/e2e-tests/tests/headlampPage.ts b/e2e-tests/tests/headlampPage.ts
index 7dd092544bd..1377d4de255 100644
--- a/e2e-tests/tests/headlampPage.ts
+++ b/e2e-tests/tests/headlampPage.ts
@@ -1,17 +1,17 @@
-import { Page, expect } from '@playwright/test';
+import { Page, expect } from "@playwright/test";
 
 export class HeadlampPage {
-  constructor(private page: Page) { }
+  constructor(private page: Page) {}
 
   async authenticate() {
-    await this.page.goto('/');
+    await this.page.goto("/");
 
     await this.page.waitForSelector('h1:has-text("Authentication")');
 
     // Expects the URL to contain c/main/token
     this.hasURLContaining(/.*token/);
 
-    const token = process.env.HEADLAMP_TOKEN || '';
+    const token = process.env.HEADLAMP_TOKEN || "";
     this.hasToken(token);
 
     // Fill in the token
@@ -33,17 +33,17 @@ export class HeadlampPage {
   }
 
   async hasToken(token: string) {
-    expect(token).not.toBe('');
+    expect(token).not.toBe("");
   }
 
   async hasNetworkTab() {
     const networkTab = this.page.locator('span:has-text("Network")').first();
-    expect(await networkTab.textContent()).toBe('Network');
+    expect(await networkTab.textContent()).toBe("Network");
   }
 
   async hasSecurityTab() {
     const networkTab = this.page.locator('span:has-text("Security")').first();
-    expect(await networkTab.textContent()).toBe('Security');
+    expect(await networkTab.textContent()).toBe("Security");
   }
 
   async checkPageContent(text: string) {
@@ -58,7 +58,7 @@ export class HeadlampPage {
 
   async navigateTopage(page: string, title: RegExp) {
     await this.page.goto(page);
-    await this.page.waitForLoadState('load');
+    await this.page.waitForLoadState("load");
     await this.hasTitleContaining(title);
   }
 
@@ -69,7 +69,7 @@ export class HeadlampPage {
     // Wait for the logout option to be visible and click on it
     await this.page.waitForSelector('a.MuiMenuItem-root:has-text("Log out")');
     await this.page.click('a.MuiMenuItem-root:has-text("Log out")');
-    await this.page.waitForLoadState('load');
+    await this.page.waitForLoadState("load");
 
     // Expects the URL to contain c/main/token
     await this.hasURLContaining(/.*token/);
@@ -77,8 +77,8 @@ export class HeadlampPage {
 
   async tableHasHeaders(tableSelector: string, expectedHeaders: string[]) {
     // Get all table headers
-    const headers = await this.page.$$eval(`${tableSelector} th`, ths =>
-      ths.map(th => {
+    const headers = await this.page.$$eval(`${tableSelector} th`, (ths) =>
+      ths.map((th) => {
         if (th && th.textContent) {
           return th.textContent.trim();
         }
@@ -95,6 +95,23 @@ export class HeadlampPage {
 
   async clickOnPlugin(pluginName: string) {
     await this.page.click(`a:has-text("${pluginName}")`);
-    await this.page.waitForLoadState('load');
+    await this.page.waitForLoadState("load");
+  }
+
+  async clickOnRolesSection() {
+    await this.page.click('span:has-text("Roles")');
+    await this.page.waitForSelector('span:has-text("Roles")');
+    await this.page.waitForSelector('p:has-text("Rows per page")');
+  }
+
+  async clickNextPageRows() {
+    const nextPageButton = this.page.getByTitle("Next page");
+    await nextPageButton.click();
+  }
+
+  async getRowsDisplayed() {
+    const paginationCaption = this.page.locator("p:has-text(' of ')");
+    const captionText = await paginationCaption.textContent();
+    return captionText;
   }
 }