diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index e87e8b5b..1884e37b 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -12,16 +12,18 @@
   --mykn-button-height: auto;
   --mykn-button-width: auto;
   --mykn-button-offset: 0px;
-  --mykn-button-padding-v: var(--spacing-v);
-  --mykn-button-padding-h: var(--spacing-h);
+
+  --mykn-button-padding-v: 0;
+  --mykn-button-padding-h: 0;
 
   align-items: center;
   appearance: none;
   margin: 0;
-  padding: 0;
+  padding-block: var(--mykn-button-padding-v);
+  padding-inline: var(--mykn-button-padding-h);
   background-color: var(--mykn-button-color-background);
   border: 1px solid var(--mykn-button-color-border);
-  border-radius: var(--border-radius-l);
+  border-radius: var(--border-radius-s);
   box-shadow: 0 calc(var(--mykn-button-offset) * -1)
     var(--mykn-button-color-shadow);
   box-sizing: border-box;
@@ -41,12 +43,9 @@
   width: var(--mykn-button-width);
 
   &[disabled] {
-    --mykn-button-color-background: var(
-      --mykn-button-color-background-mute,
-      #ccc
-    ) !important;
     --mykn-button-offset: 0 !important;
     pointer-events: none;
+    opacity: 0.4;
   }
 
   &--align-start {
@@ -77,29 +76,30 @@
   }
 
   &--pad-h {
-    padding-inline-start: var(--mykn-button-padding-h);
-    padding-inline-end: var(--mykn-button-padding-h);
+    --mykn-button-padding-h: var(--mykn-button-padding-xs, var(--spacing-h));
   }
 
   &--pad-v {
-    padding-block-start: var(--mykn-button-padding-h);
-    padding-block-end: var(--mykn-button-padding-h);
+    --mykn-button-padding-v: var(--mykn-button-padding-xs, var(--spacing-v));
   }
 
   &--size-xs {
     --mykn-button-font-size: var(--typography-font-size-body-xs);
     --mykn-button-line-height: var(--typography-line-height-body-xs);
+    --mykn-button-padding-xs: calc(var(--spacing-h) / 2);
   }
 
   &--square {
     --mykn-button-height: calc(
-      var(--typography-line-height-body-s) + 2 * var(--spacing-v)
+      var(--mykn-button-line-height) + 2 *
+        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
     );
     --mykn-button-width: calc(
-      var(--typography-line-height-body-s) + 2 * var(--spacing-v)
+      var(--mykn-button-line-height) + 2 *
+        var(--mykn-button-padding-xs, var(--mykn-button-padding-v)) + 2px
     );
-    --mykn-button-padding-v: 0;
-    --mykn-button-padding-h: 0;
+    padding-block: 0;
+    padding-inline: 0;
     flex-shrink: 0;
   }
 
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 341d0486..0f22be08 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -12,6 +12,9 @@ type BaseButtonProps = {
   /** Whether the text should be presented bold. */
   bold?: boolean;
 
+  /** Additional class names. */
+  className?: string;
+
   /** Whether the buttons width should be set to 100%. */
   justify?: boolean;
 
@@ -42,17 +45,6 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 
 /**
  * Button component
- * @param active
- * @param align
- * @param bold
- * @param justify
- * @param muted
- * @param pad
- * @param size
- * @param square
- * @param variant
- * @param wrap
- * @constructor
  */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -60,6 +52,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       active = false,
       align = "center",
       bold = false,
+      className,
       justify = false,
       muted = false,
       pad = true,
@@ -89,6 +82,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             "mykn-button--square": square,
             "mykn-button--wrap": wrap,
           },
+          className,
         )}
         {...props}
       >
@@ -100,18 +94,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button";
 
 /**
- * Button component
- * @param active
- * @param align
- * @param bold
- * @param justify
- * @param muted
- * @param pad
- * @param size
- * @param square
- * @param variant
- * @param wrap
- * @constructor
+ * Button (link) )component
  */
 export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   (
@@ -119,6 +102,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       active = false,
       align = "center",
       bold = false,
+      className,
       justify = false,
       muted = false,
       pad = true,
@@ -133,22 +117,25 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
     return (
       <a
         ref={ref as LegacyRef<HTMLAnchorElement>}
-        className={clsx(
-          "mykn-button",
-          `mykn-button--align-${align}`,
-          `mykn-button--size-${size}`,
-          `mykn-button--variant-${variant}`,
-          {
-            "mykn-button--active": active,
-            "mykn-button--bold": bold,
-            "mykn-button--justify": justify,
-            "mykn-button--muted": muted,
-            "mykn-button--pad-h": pad === true || pad === "h",
-            "mykn-button--pad-v": pad === true || pad === "v",
-            "mykn-button--square": square,
-            "mykn-button--wrap": wrap,
-          },
-        )}
+        className={
+          (clsx(
+            "mykn-button",
+            `mykn-button--align-${align}`,
+            `mykn-button--size-${size}`,
+            `mykn-button--variant-${variant}`,
+            {
+              "mykn-button--active": active,
+              "mykn-button--bold": bold,
+              "mykn-button--justify": justify,
+              "mykn-button--muted": muted,
+              "mykn-button--pad-h": pad === true || pad === "h",
+              "mykn-button--pad-v": pad === true || pad === "v",
+              "mykn-button--square": square,
+              "mykn-button--wrap": wrap,
+            },
+          ),
+          className)
+        }
         {...props}
       >
         {props.children}
diff --git a/src/components/data/datagrid/datagrid.tsx b/src/components/data/datagrid/datagrid.tsx
index 255bd6b4..9338cc59 100644
--- a/src/components/data/datagrid/datagrid.tsx
+++ b/src/components/data/datagrid/datagrid.tsx
@@ -604,7 +604,7 @@ export const DataGridFooter: React.FC<DataGridFooterProps> = ({
           selectable ? renderableFields.length + 1 : renderableFields.length
         }
       >
-        <Toolbar align="end" pad={true}>
+        <Toolbar pad={true}>
           <Paginator
             count={count}
             loading={loading}
diff --git a/src/components/data/paginator/paginator.scss b/src/components/data/paginator/paginator.scss
index 26aa00e2..a298f0c2 100644
--- a/src/components/data/paginator/paginator.scss
+++ b/src/components/data/paginator/paginator.scss
@@ -2,37 +2,54 @@
 
 .mykn-paginator {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
   gap: var(--spacing-v);
+  position: relative;
+  width: 100%;
 
   &__section {
-    align-items: center;
     display: flex;
+    align-items: center;
     gap: var(--spacing-h);
   }
 
-  &__section .mykn-p:not(:last-child) {
-    margin-block-end: 0;
-  }
-
-  &__section--form .mykn-icon:first-child {
-    color: var(--typography-color-body);
+  &__section--meta {
+    display: flex;
+    gap: var(--spacing-v);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+
+    > .mykn-icon {
+      inset-inline-start: 100%;
+      margin-inline-start: var(--spacing-h);
+      position: absolute;
+    }
   }
 
   @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
-    width: 100%;
+    flex-wrap: wrap;
 
-    &__section--form {
-      display: none;
+    &__section {
+      flex-basis: calc(50% - var(--spacing-v) / 2);
+      white-space: nowrap;
     }
 
-    &__section {
-      width: 100%;
-      justify-content: flex-end;
+    &__section--meta {
+      position: static;
+      text-align: end;
+      transform: none;
+    }
 
-      .mykn-button {
-        justify-content: center !important;
-      }
+    &__section--options {
+      flex-basis: 100%;
+    }
+
+    &__ellipsis,
+    &__button--page {
+      display: none;
     }
   }
 }
diff --git a/src/components/data/paginator/paginator.tsx b/src/components/data/paginator/paginator.tsx
index b9009402..6a0c01cd 100644
--- a/src/components/data/paginator/paginator.tsx
+++ b/src/components/data/paginator/paginator.tsx
@@ -4,8 +4,9 @@ import { ucFirst } from "../../../lib/format/string";
 import { formatMessage } from "../../../lib/i18n/formatmessage";
 import { useIntl } from "../../../lib/i18n/useIntl";
 import { Button } from "../../button";
-import { Input, Option, Select, SelectProps } from "../../form";
+import { Option, Select, SelectProps } from "../../form";
 import { Outline } from "../../icon";
+import { Toolbar } from "../../toolbar";
 import { P } from "../../typography";
 import "./paginator.scss";
 
@@ -69,21 +70,6 @@ export type PaginatorProps = React.HTMLAttributes<HTMLElement> & {
  *
  * The `onPageChange` callback is debounced and provided a mechanism for a
  * spinner to appear during load (see docs).
- *
- * All labels that are passed to this component may contain the following
- * placeholders:
- *
- * - {count}
- * - {index}
- * - {page}
- * - {pageCount}
- * - {pageStart}
- * - {pageEnd}
- * - {pageSize}
- *
- * @param children
- * @param props
- * @constructor
  */
 export const Paginator: React.FC<PaginatorProps> = ({
   count,
@@ -124,43 +110,6 @@ export const Paginator: React.FC<PaginatorProps> = ({
 
   const intl = useIntl();
 
-  const _labelCurrentPageRange = labelCurrentPageRange
-    ? formatMessage(labelCurrentPageRange, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelCurrentPageRange",
-          description:
-            "mykn.components.Paginator: The current page range (accessible) label",
-          defaultMessage:
-            "resultaat {pageStart} t/m {pageEnd} van {pageCount} pagina's",
-        },
-        context,
-      );
-
-  const _labelGoToPage = labelGoToPage
-    ? formatMessage(labelGoToPage, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelGoToPage",
-          description:
-            "mykn.components.Paginator: The go to page (accessible) label",
-          defaultMessage: "naar pagina",
-        },
-        context,
-      );
-
-  const _labelPageSize = labelPageSize
-    ? formatMessage(labelPageSize, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelPageSize",
-          description:
-            "mykn.components.Paginator: The page size (accessible) label",
-          defaultMessage: "aantal resultaten",
-        },
-        context,
-      );
-
   const _labelPagination = labelPagination
     ? formatMessage(labelPagination, context)
     : intl.formatMessage(
@@ -173,42 +122,6 @@ export const Paginator: React.FC<PaginatorProps> = ({
         context,
       );
 
-  const _labelPrevious = labelPrevious
-    ? formatMessage(labelPrevious, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelPrevious",
-          description:
-            "mykn.components.Paginator: The go to previous page (accessible) label",
-          defaultMessage: "vorige",
-        },
-        context,
-      );
-
-  const _labelNext = labelNext
-    ? formatMessage(labelNext, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelNext",
-          description:
-            "mykn.components.Paginator: The go to next page (accessible) label",
-          defaultMessage: "volgende",
-        },
-        context,
-      );
-
-  const _labelLoading = labelLoading
-    ? formatMessage(labelLoading, context)
-    : intl.formatMessage(
-        {
-          id: "mykn.components.Paginator.labelLoading",
-          description:
-            "mykn.components.Paginator: The loading (accessible) label",
-          defaultMessage: "bezig met laden...",
-        },
-        context,
-      );
-
   useEffect(() => setPageState(page), [page]);
   useEffect(() => setPageSizeState(pageSize), [pageSize]);
 
@@ -249,30 +162,10 @@ export const Paginator: React.FC<PaginatorProps> = ({
 
   /**
    * Gets called when the page input is changed.
-   * @param event
-   */
-  const handlePageChange: React.ChangeEventHandler<HTMLInputElement> = (
-    event,
-  ) => {
-    const value = parseInt(event.target.value);
-    const sanitizedValue = Math.max(Math.min(value, pageCount), 1);
-    setPageState(sanitizedValue);
-  };
-
-  /**
-   * Gets called when the previous button is changed.
-   */
-  const handlePrevious: React.MouseEventHandler<HTMLButtonElement> = () => {
-    const sanitizedValue = Math.max(pageState - 1, 1);
-    setPageState(sanitizedValue);
-  };
-
-  /**
-   * Gets called when the page input is changed.
+   * @param page
    */
-  const handleNext: React.MouseEventHandler<HTMLButtonElement> = () => {
-    const sanitizedValue = Math.min(pageState + 1, pageCount);
-    setPageState(sanitizedValue);
+  const handlePageChange = (page: number) => {
+    setPageState(page);
   };
 
   // `loading` takes precedence over `loadingState` (derived from Promise).
@@ -284,61 +177,355 @@ export const Paginator: React.FC<PaginatorProps> = ({
       aria-label={ucFirst(_labelPagination)}
       {...props}
     >
-      <div className="mykn-paginator__section mykn-paginator__section--form">
-        {_labelLoading && (
-          <Outline.ArrowPathIcon
-            spin={true}
-            aria-hidden={!isLoading}
-            aria-label={isLoading ? ucFirst(_labelLoading) : ""}
-            hidden={!isLoading}
-          />
-        )}
-
-        {pageSizeOptions.length > 0 && (
-          <>
-            <P>{ucFirst(_labelPageSize)}</P>
-            <Select
-              options={pageSizeOptions}
-              required={true}
-              size="fit-content"
-              value={pageSizeState}
-              variant="transparent"
-              onChange={handlePageSizeChange}
-            />
-          </>
-        )}
-
-        <P>{ucFirst(_labelGoToPage)}</P>
-        <Input
-          min={1}
-          max={pageCount}
-          size={String(pageCount).length}
-          type="number"
-          value={pageState}
-          variant="transparent"
-          onChange={handlePageChange}
-        ></Input>
+      <div className="mykn-paginator__section mykn-paginator__section--nav">
+        <PaginatorNav
+          count={count}
+          currentPage={pageState}
+          labelGoToPage={labelGoToPage}
+          labelPrevious={labelPrevious}
+          labelNext={labelNext}
+          pageSize={pageSizeState}
+          onPageSizeChange={handlePageChange}
+        />
       </div>
 
-      <div className="mykn-paginator__section mykn-paginator__section--navigate">
-        <P>{ucFirst(_labelCurrentPageRange)}</P>
-        <Button
-          square
-          variant="outline"
-          aria-label={ucFirst(_labelPrevious)}
-          onClick={handlePrevious}
-        >
-          <Outline.ChevronLeftIcon />
-        </Button>
-        <Button
-          square
-          variant="outline"
-          aria-label={ucFirst(_labelNext)}
-          onClick={handleNext}
-        >
-          <Outline.ChevronRightIcon />
-        </Button>
+      <div className="mykn-paginator__section mykn-paginator__section--meta">
+        <PaginatorMeta
+          count={count}
+          page={pageState}
+          pageSize={pageSizeState}
+          labelCurrentPageRange={labelCurrentPageRange}
+          labelLoading={labelLoading}
+          loading={isLoading}
+        />
+      </div>
+
+      <div className="mykn-paginator__section mykn-paginator__section--options">
+        <PaginatorOptions
+          labelPageSize={labelPageSize}
+          pageSize={pageSizeState}
+          pageSizeOptions={pageSizeOptions}
+          onPageSizeChange={handlePageSizeChange}
+        />
       </div>
     </nav>
   );
 };
+
+export type PaginatorNavProps = {
+  count: number;
+  currentPage: number;
+  labelGoToPage: string;
+  labelPrevious?: string;
+  labelNext?: string;
+  pageSize: number;
+  onPageSizeChange: (page: number) => void;
+};
+
+export const PaginatorNav: React.FC<PaginatorNavProps> = ({
+  count,
+  currentPage = 1,
+  labelGoToPage,
+  labelNext,
+  labelPrevious,
+  onPageSizeChange,
+  pageSize,
+}) => {
+  const intl = useIntl();
+
+  const maxOffset = 2;
+  const pageCount = Math.ceil(count / pageSize);
+
+  const previousPage = Math.max(0, currentPage - 1);
+  const nextPage = currentPage + 1 > pageCount ? 0 : currentPage + 1;
+
+  const startRange = Math.min(maxOffset, previousPage);
+  const endRange = Math.min(maxOffset, pageCount - currentPage);
+
+  const startPages = new Array(startRange)
+    .fill(0)
+    .map((_, i) => currentPage - (i + 1))
+    .reverse();
+  const endPages = new Array(endRange)
+    .fill(0)
+    .map((_, i) => currentPage + i + 1);
+
+  const pages = [...startPages, currentPage, ...endPages];
+
+  const context = {
+    count,
+    currentPage,
+    pageCount,
+    pageSize,
+    previousPage,
+    nextPage,
+  };
+
+  const _labelPrevious = labelPrevious
+    ? formatMessage(labelPrevious, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelPrevious",
+          description:
+            "mykn.components.Paginator: The go to previous page (accessible) label",
+          defaultMessage: "vorige",
+        },
+        context,
+      );
+
+  const _labelNext = labelNext
+    ? formatMessage(labelNext, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelNext",
+          description:
+            "mykn.components.Paginator: The go to next page (accessible) label",
+          defaultMessage: "volgende",
+        },
+        context,
+      );
+
+  const _labelGoToPage = labelGoToPage
+    ? formatMessage(labelGoToPage, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelGoToPage",
+          description:
+            "mykn.components.Paginator: The go to page (accessible) label",
+          defaultMessage: "naar pagina {page}",
+        },
+        context,
+      );
+
+  return (
+    <Toolbar directionResponsive={false} pad={false} variant="transparent">
+      <Button
+        className="mykn-paginator__button mykn-paginator__button--previous"
+        disabled={!previousPage}
+        size="xs"
+        variant="outline"
+        wrap={false}
+        onClick={() => onPageSizeChange(previousPage)}
+      >
+        <Outline.ChevronLeftIcon />
+        {ucFirst(_labelPrevious)}
+      </Button>
+
+      {startPages.length > 0 && !startPages.includes(1) && (
+        <>
+          <Button
+            active={currentPage === 1}
+            aria-label={formatMessage(_labelGoToPage, { page: 1 })}
+            aria-current={currentPage === 1}
+            className="mykn-paginator__button mykn-paginator__button--page"
+            size="xs"
+            square
+            variant="outline"
+            onClick={() => onPageSizeChange(1)}
+          >
+            1
+          </Button>
+          {!startPages.includes(2) && (
+            <Button
+              aria-hidden
+              className="mykn-paginator__ellipsis"
+              disabled
+              size="xs"
+              square
+              variant="outline"
+            >
+              …
+            </Button>
+          )}
+        </>
+      )}
+
+      {pages.map((page) => {
+        return (
+          <Button
+            key={page}
+            active={currentPage === page}
+            aria-current={currentPage === page}
+            aria-label={formatMessage(_labelGoToPage, { page })}
+            className="mykn-paginator__button mykn-paginator__button--page"
+            size="xs"
+            square
+            variant="outline"
+            onClick={() => onPageSizeChange(page)}
+          >
+            {page}
+          </Button>
+        );
+      })}
+
+      {endPages.length > 0 && !endPages.includes(pageCount) && (
+        <>
+          {!endPages.includes(pageCount - 1) && (
+            <Button
+              aria-hidden
+              className="mykn-paginator__ellipsis"
+              disabled
+              size="xs"
+              square
+              variant="outline"
+            >
+              …
+            </Button>
+          )}
+          <Button
+            active={currentPage === pageCount}
+            aria-current={currentPage === pageCount}
+            aria-label={formatMessage(_labelGoToPage, { page: pageCount })}
+            className="mykn-paginator__button mykn-paginator__button--page"
+            size="xs"
+            square
+            variant="outline"
+            onClick={() => onPageSizeChange(pageCount)}
+          >
+            {pageCount}
+          </Button>
+        </>
+      )}
+
+      <Button
+        className="mykn-paginator__button mykn-paginator__button--next"
+        disabled={!nextPage}
+        size="xs"
+        variant="outline"
+        wrap={false}
+        onClick={() => onPageSizeChange(nextPage)}
+      >
+        {ucFirst(_labelNext)}
+        <Outline.ChevronRightIcon />
+      </Button>
+    </Toolbar>
+  );
+};
+
+export type PaginatorMetaProps = {
+  count: number;
+  labelCurrentPageRange?: string;
+  labelLoading?: string;
+  loading: boolean;
+  page: number;
+  pageSize: number;
+};
+
+export const PaginatorMeta: React.FC<PaginatorMetaProps> = ({
+  count,
+  labelCurrentPageRange,
+  labelLoading,
+  loading,
+  page,
+  pageSize,
+}) => {
+  const intl = useIntl();
+
+  const index = page - 1;
+  const pageCount = Math.ceil(count / pageSize);
+  const pageStart = index * pageSize + 1;
+  const pageEnd = Math.min(pageStart + pageSize - 1, count);
+
+  const context = {
+    count,
+    index,
+    loading,
+    page,
+    pageCount,
+    pageStart,
+    pageEnd,
+    pageSize,
+  };
+
+  const _labelCurrentPageRange = labelCurrentPageRange
+    ? formatMessage(labelCurrentPageRange, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelCurrentPageRange",
+          description:
+            "mykn.components.Paginator: The current page range (accessible) label",
+          defaultMessage:
+            "resultaat {pageStart} t/m {pageEnd} van {pageCount} pagina's",
+        },
+        context,
+      );
+
+  const _labelLoading = labelLoading
+    ? formatMessage(labelLoading, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelLoading",
+          description:
+            "mykn.components.Paginator: The loading (accessible) label",
+          defaultMessage: "bezig met laden...",
+        },
+        context,
+      );
+
+  return (
+    <>
+      <P size="xs" title={ucFirst(_labelCurrentPageRange)}>
+        {`${pageStart}-${pageEnd} / ${count}`}
+      </P>
+      {_labelLoading && (
+        <Outline.ArrowPathIcon
+          spin={true}
+          aria-hidden={!loading}
+          aria-label={loading ? ucFirst(_labelLoading) : ""}
+          hidden={!loading}
+        />
+      )}
+    </>
+  );
+};
+
+export type PaginatorOptionsProps = {
+  labelPageSize?: string;
+  onPageSizeChange: React.ChangeEventHandler;
+  pageSize: number;
+  pageSizeOptions: Option<number, number>[];
+};
+
+export const PaginatorOptions: React.FC<PaginatorOptionsProps> = ({
+  labelPageSize,
+  onPageSizeChange,
+  pageSize,
+  pageSizeOptions = [],
+}) => {
+  const intl = useIntl();
+
+  if (pageSizeOptions.length === 0) {
+    return;
+  }
+
+  const context = {
+    pageSize,
+  };
+
+  const _labelPageSize = labelPageSize
+    ? formatMessage(labelPageSize, context)
+    : intl.formatMessage(
+        {
+          id: "mykn.components.Paginator.labelPageSize",
+          description:
+            "mykn.components.Paginator: The page size (accessible) label",
+          defaultMessage: "aantal resultaten",
+        },
+        context,
+      );
+
+  return (
+    <>
+      <P size="xs">{ucFirst(_labelPageSize)}</P>
+      <Select
+        options={pageSizeOptions}
+        required={true}
+        size="fit-content"
+        textSize="xs"
+        value={pageSize}
+        variant="transparent"
+        onChange={onPageSizeChange}
+      />
+    </>
+  );
+};
diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss
index f4938816..d5110afa 100644
--- a/src/components/form/select/select.scss
+++ b/src/components/form/select/select.scss
@@ -1,4 +1,8 @@
 .mykn-select {
+  --select-font-size: var(--typography-font-size-body-s);
+  --select-line-height: var(--typography-line-height-body-s);
+  --select-min-height: 38px;
+
   align-items: center;
   background: var(--typography-color-background);
   border: 1px solid var(--form-color-border);
@@ -9,12 +13,13 @@
   display: inline-flex;
   justify-content: space-between;
   font-family: var(--typography-font-family-body);
-  font-size: var(--typography-font-size-body-s);
+  font-size: var(--select-font-size);
   font-weight: var(--typography-font-weight-normal);
-  line-height: var(--typography-line-height-body-s);
-  padding: var(--spacing-v) var(--spacing-h);
+  line-height: var(--select-line-height);
+  padding: var(--mykn-select-padding-xs, var(--spacing-v))
+    var(--mykn-select-padding-xs, var(--spacing-h));
   width: min(320px, 100%);
-  min-height: 38px;
+  min-height: var(--select-min-height);
   max-width: 100%;
   position: relative;
   text-align: start;
@@ -23,6 +28,13 @@
     width: fit-content;
   }
 
+  &--text-size-xs {
+    --mykn-select-padding-xs: calc(var(--spacing-h) / 2);
+    --select-font-size: var(--typography-font-size-body-xs);
+    --select-line-height: var(--typography-line-height-body-xs);
+    --select-min-height: 0;
+  }
+
   &--variant-transparent {
     background-color: transparent;
   }
@@ -37,6 +49,8 @@
   }
 
   &__label {
+    font-size: var(--select-font-size);
+    line-height: var(--select-line-height);
     width: 100%;
     flex-grow: 0;
     white-space: nowrap;
@@ -81,9 +95,9 @@
   color: var(--mykn-option-color-body);
   cursor: pointer;
   font-family: var(--typography-font-family-body);
-  font-size: var(--typography-font-size-body-s);
+  font-size: var(--select-font-size);
   font-weight: var(--mykn-option-font-weight);
-  line-height: var(--typography-line-height-body-s);
+  line-height: var(--select-line-height);
   padding: 0 var(--spacing-h);
   text-align: start;
   white-space: nowrap;
diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
index 2c58ac6d..cebc9013 100644
--- a/src/components/form/select/select.tsx
+++ b/src/components/form/select/select.tsx
@@ -38,6 +38,9 @@ export type SelectProps = ChoiceFieldProps & {
   /** Can be set to `fit-content` to apply auto sizing based on content width. */
   size?: "fit-content";
 
+  /** The size of the text. */
+  textSize?: "s" | "xs";
+
   /** The clear value (accessible) label. */
   labelClear?: string;
 
@@ -64,6 +67,7 @@ export const Select: React.FC<SelectProps> = ({
   placeholder = "",
   required = false,
   size,
+  textSize = "s",
   value = null,
   variant = "normal",
   form,
@@ -193,10 +197,14 @@ export const Select: React.FC<SelectProps> = ({
   return (
     <>
       <div
-        className={clsx("mykn-select", `mykn-select--variant-${variant}`, {
-          "mykn-select--selected": selectedIndex,
-          [`mykn-select--size-${size}`]: size,
-        })}
+        className={clsx(
+          "mykn-select",
+          `mykn-select--variant-${variant} mykn-select--text-size-${textSize}`,
+          {
+            "mykn-select--selected": selectedIndex,
+            [`mykn-select--size-${size}`]: size,
+          },
+        )}
         tabIndex={0}
         ref={refs.setReference}
         title={label || undefined}
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index e4387757..6559daec 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -4,11 +4,11 @@
   $self: &;
   background-color: var(--typography-color-background);
   box-sizing: border-box;
-  column-gap: 24px;
+  column-gap: var(--spacing-h);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  row-gap: 12px;
+  row-gap: var(--spacing-v);
   text-align: start;
   width: 100%;
   z-index: 10;
@@ -17,6 +17,10 @@
     gap: 0;
   }
 
+  &:not(#{&}--direction-responsive)#{&}--direction-horizontal {
+    flex-direction: row;
+  }
+
   &--variant-transparent {
     background-color: transparent;
   }
diff --git a/src/components/toolbar/toolbar.tsx b/src/components/toolbar/toolbar.tsx
index 617c8296..0ecc65ac 100644
--- a/src/components/toolbar/toolbar.tsx
+++ b/src/components/toolbar/toolbar.tsx
@@ -23,6 +23,9 @@ export type ToolbarProps = React.PropsWithChildren<
     /** Whether the toolbar shows items horizontally or vertically, mobile devices always use vertical. */
     direction?: "horizontal" | "vertical";
 
+    /** Whether the direction is responsive. */
+    directionResponsive?: boolean;
+
     /** When set to true, gap between items is removed. */
     compact?: boolean;
 
@@ -51,6 +54,7 @@ export type ToolbarProps = React.PropsWithChildren<
  * @param align
  * @param compact
  * @param direction
+ * @param directionResponsive
  * @param pad
  * @param padA
  * @param sticky
@@ -65,6 +69,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   align = "start",
   compact = false,
   direction = "horizontal",
+  directionResponsive = true,
   pad = "v",
   padA = false,
   sticky = false,
@@ -124,6 +129,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         `mykn-toolbar--variant-${variant}`,
         {
           "mykn-toolbar--compact": compact,
+          "mykn-toolbar--direction-responsive": directionResponsive,
           "mykn-toolbar--pad-h": pad === true || pad === "h",
           "mykn-toolbar--pad-v": pad === true || pad === "v",
           "mykn-toolbar--pad-a": padA,
diff --git a/src/components/typography/p/p.tsx b/src/components/typography/p/p.tsx
index 18beeeae..60474611 100644
--- a/src/components/typography/p/p.tsx
+++ b/src/components/typography/p/p.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import "./p.scss";
 
-export type PProps = React.PropsWithChildren<{
+export type PProps = React.ComponentProps<"p"> & {
   /** Whether the text should be presented bold. */
   bold?: boolean;
 
@@ -12,7 +12,7 @@ export type PProps = React.PropsWithChildren<{
 
   /** The size of the text. */
   size?: "s" | "xs";
-}>;
+};
 
 /**
  * Ul component
diff --git a/src/lib/i18n/messages/en.json b/src/lib/i18n/messages/en.json
index e34f034c..615dda6e 100644
--- a/src/lib/i18n/messages/en.json
+++ b/src/lib/i18n/messages/en.json
@@ -42,7 +42,7 @@
   "mykn.components.Paginator.labelGoToPage": {
     "defaultMessage": "go to page",
     "description": "mykn.components.Paginator: The go to page (accessible) label",
-    "originalDefault": "naar pagina"
+    "originalDefault": "naar pagina {page}"
   },
   "mykn.components.Paginator.labelLoading": {
     "defaultMessage": "loading...",
diff --git a/src/lib/i18n/messages/nl.json b/src/lib/i18n/messages/nl.json
index 54f90d98..f520e497 100644
--- a/src/lib/i18n/messages/nl.json
+++ b/src/lib/i18n/messages/nl.json
@@ -40,9 +40,9 @@
     "originalDefault": "resultaat {pageStart} t/m {pageEnd} van {pageCount} pagina's"
   },
   "mykn.components.Paginator.labelGoToPage": {
-    "defaultMessage": "naar pagina",
+    "defaultMessage": "naar pagina {page}",
     "description": "mykn.components.Paginator: The go to page (accessible) label",
-    "originalDefault": "naar pagina"
+    "originalDefault": "naar pagina {page}"
   },
   "mykn.components.Paginator.labelLoading": {
     "defaultMessage": "bezig met laden...",
diff --git a/src/lib/i18n/useIntl.tsx b/src/lib/i18n/useIntl.tsx
index 2d61fc01..7ddeb774 100644
--- a/src/lib/i18n/useIntl.tsx
+++ b/src/lib/i18n/useIntl.tsx
@@ -42,7 +42,7 @@ try {
 }
 
 // Redefine (minimal) react-intl types.
-type MessageContext = Record<string, number | string>;
+type MessageContext = Record<string, boolean | number | string>;
 
 type MessageDescriptor = {
   id?: string;
@@ -68,7 +68,7 @@ const getLocalizedFallbackIntl = (
   return {
     formatMessage: (
       descriptor: MessageDescriptor,
-      context: Record<string, number | string> = {},
+      context: MessageContext = {},
     ) => {
       let messages: Record<string, MessageDescriptor> = {};
       try {
diff --git a/src/style/tokens/base.scss b/src/style/tokens/base.scss
index 4a3e7ba1..7b874cfc 100644
--- a/src/style/tokens/base.scss
+++ b/src/style/tokens/base.scss
@@ -89,7 +89,7 @@
   --button-color-text-primary-hover: var(--button-color-text-primary);
   --button-color-text-primary-active: var(--button-color-text-primary);
 
-  --button-color-text-outline: var(--form-color-border);
+  --button-color-text-outline: var(--typography-color-body);
   --button-color-text-outline-hover: var(--button-color-background-primary);
   --button-color-text-outline-active: var(--button-color-text-outline);