diff --git a/webui/src/features/mail/MailboxPage.tsx b/webui/src/features/mail/MailboxPage.tsx
index 85574b1..247ee79 100644
--- a/webui/src/features/mail/MailboxPage.tsx
+++ b/webui/src/features/mail/MailboxPage.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Home, Mail, Paperclip, RefreshCw, Search, X } from "lucide-react";
+import { ChevronRight, Home, Mail, Paperclip, RefreshCw, Search, X } from "lucide-react";
 import {
   Button,
+  DataGridPaginationBar,
   DismissibleAlert,
   ExplorerTree,
   LoadingIndicator,
@@ -474,10 +475,12 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
               })}
             </div>
           </div>
-          <MailboxPagination
+          <DataGridPaginationBar
             page={messagePage}
             pageSize={messagePageSize}
             totalRows={messageTotalCount ?? 0}
+            className="mailbox-pagination"
+            ariaLabel="i18n:govoplan-mail.mailbox_message_pagination.965407bf"
             disabled={loadingMessages || !foldersReady}
             onPageChange={changeMessagePage}
             onPageSizeChange={changeMessagePageSize} />
@@ -521,31 +524,6 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
 }
 
 
-function MailboxPagination({ page, pageSize, totalRows, disabled, onPageChange, onPageSizeChange }: {page: number;pageSize: number;totalRows: number;disabled: boolean;onPageChange: (page: number) => void;onPageSizeChange: (pageSize: number) => void;}) {
-  const pageCount = Math.max(1, Math.ceil(totalRows / pageSize));
-  const first = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
-  const last = Math.min(totalRows, page * pageSize);
-  const options = [10, 25, 50, 100];
-  return (
-    <div className="data-grid-pagination mailbox-pagination" aria-label="i18n:govoplan-mail.mailbox_message_pagination.965407bf">
-      <div className="data-grid-pagination-summary">{first}-{last} of {totalRows}</div>
-      <label className="data-grid-page-size">
-        <span>i18n:govoplan-mail.rows_per_page.af2f9c1b</span>
-        <select value={pageSize} disabled={disabled} onChange={(event) => onPageSizeChange(Number(event.target.value))}>
-          {options.map((value) => <option key={value} value={value}>{value}</option>)}
-        </select>
-      </label>
-      <div className="data-grid-page-controls">
-        <button type="button" aria-label="i18n:govoplan-mail.first_page.49d74b49" disabled={disabled || page <= 1} onClick={() => onPageChange(1)}><ChevronsLeft size={16} /></button>
-        <button type="button" aria-label="i18n:govoplan-mail.previous_page.81f54719" disabled={disabled || page <= 1} onClick={() => onPageChange(page - 1)}><ChevronLeft size={16} /></button>
-        <span>i18n:govoplan-mail.page.fb06270f {page} of {pageCount}</span>
-        <button type="button" aria-label="i18n:govoplan-mail.next_page.4bfc194b" disabled={disabled || page >= pageCount} onClick={() => onPageChange(page + 1)}><ChevronRight size={16} /></button>
-        <button type="button" aria-label="i18n:govoplan-mail.last_page.b01f16ae" disabled={disabled || page >= pageCount} onClick={() => onPageChange(pageCount)}><ChevronsRight size={16} /></button>
-      </div>
-    </div>);
-
-}
-
 function mailboxMessageKey(folder: string, uid: string): string {
   return `${folder || "INBOX"}::${uid}`;
 }