diff --git a/.storybook/decorators.js b/.storybook/decorators.js
index 0bd733476..734c13074 100644
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@@ -8,3 +8,11 @@ export const withClearSessionStorage = Story => {
   window.sessionStorage.clear();
   return <Story />;
 };
+
+/**
+ * This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
+ * needed so that components inherit the right font.
+ */
+export const utrechtDocumentDecorator = Story => {
+  return (<div className="utrecht-document utrecht-document--surface" ><Story/></div>);
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 476d4eda3..5f0345076 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -18,7 +18,7 @@ import 'styles.scss';
 import OpenFormsModule from 'formio/module';
 import OFLibrary from 'formio/templates';
 
-import {withClearSessionStorage} from './decorators';
+import {utrechtDocumentDecorator, withClearSessionStorage} from './decorators';
 import {reactIntl} from './reactIntl.js';
 
 initialize({
@@ -36,7 +36,7 @@ Formio.use(OpenFormsModule);
 Templates.current = OFLibrary;
 
 export default {
-  decorators: [mswDecorator, withClearSessionStorage],
+  decorators: [mswDecorator, withClearSessionStorage, utrechtDocumentDecorator],
   globals: {
     locale: reactIntl.defaultLocale,
     locales: {
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index aef91da2e..e416ae5b5 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -37,6 +37,18 @@ should be set:
   looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now
   ``pointer``.
 
+The alert component has also been refactored to use the Utrecht alert component. In order to
+maintain the same styles as in the previous version, the following Utrecht design tokens should be
+set:
+
+* ``--utrecht-alert-warning-background-color`` with the value of ``--of-alert-warning-bg``.
+* ``--utrecht-alert-info-background-color`` with the value of ``--of-alert-info-bg``.
+* ``--utrecht-alert-error-background-color`` with the value of ``--of-alert-error-bg``.
+* ``--utrecht-alert-icon-error-color`` with the value of ``--of-color-danger``.
+* ``--utrecht-alert-icon-info-color`` with the value of ``--of-color-info``.
+* ``--utrecht-alert-icon-warning-color`` with the value of ``--of-color-warning``.
+* ``--utrecht-alert-icon-ok-color`` with the value of ``--of-color-success``.
+
 1.5.4 (2023-10-30)
 ==================
 
diff --git a/design-tokens b/design-tokens
index 69ac09d49..0485a4657 160000
--- a/design-tokens
+++ b/design-tokens
@@ -1 +1 @@
-Subproject commit 69ac09d49dcd64e80a980f3e73fcd85873cd396e
+Subproject commit 0485a4657b51d6e2ec50d19d7b1f2a690b432c08
diff --git a/package.json b/package.json
index fb2938612..fffbf04ca 100644
--- a/package.json
+++ b/package.json
@@ -30,11 +30,12 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.45.1",
+    "@open-formulieren/design-tokens": "^0.46.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "classnames": "^2.3.1",
+    "date-fns": "^2.30.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",
     "formiojs": "4.13.12",
@@ -136,10 +137,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@utrecht/component-library-css": "^1.0.0-alpha.526",
-    "@utrecht/component-library-react": "^1.0.0-alpha.353",
-    "@utrecht/components": "^1.0.0-alpha.473",
-    "@utrecht/design-tokens": "^1.0.0-alpha.505",
+    "@utrecht/component-library-css": "1.0.0-alpha.604",
+    "@utrecht/component-library-react": "1.0.0-alpha.353",
+    "@utrecht/components": "1.0.0-alpha.565",
+    "@utrecht/design-tokens": "1.0.0-alpha.597",
     "babel-jest": "^27.4.2",
     "babel-loader": "^9.1.2",
     "babel-plugin-formatjs": "^10.3.8",
diff --git a/public/index.html b/public/index.html
index d2616d012..c5b679c7a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,7 +10,7 @@
     />
     <title>Open Forms SDK</title>
   </head>
-  <body>
+  <body class="utrecht-document">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/components/CoSign/Cosign.js b/src/components/CoSign/Cosign.js
index ba05ba040..6b22bbe95 100644
--- a/src/components/CoSign/Cosign.js
+++ b/src/components/CoSign/Cosign.js
@@ -4,7 +4,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {CosignSummary} from 'components/Summary';
 import useFormContext from 'hooks/useFormContext';
 
diff --git a/src/components/CoSign/index.js b/src/components/CoSign/index.js
index b57c1022c..411b754ff 100644
--- a/src/components/CoSign/index.js
+++ b/src/components/CoSign/index.js
@@ -6,7 +6,7 @@ import {useAsync} from 'react-use';
 import {ConfigContext, SubmissionContext} from 'Context';
 import {get} from 'api';
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 import LoginOptionsDisplay from 'components/LoginOptions/LoginOptionsDisplay';
 import {getLoginUrl} from 'components/utils';
diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js
deleted file mode 100644
index 0f1cf1315..000000000
--- a/src/components/ErrorMessage.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import Body from 'components/Body';
-import FAIcon from 'components/FAIcon';
-import useScrollIntoView from 'hooks/useScrollIntoView';
-import {getBEMClassName} from 'utils';
-
-const ErrorMessage = ({children, modifiers = ['error']}) => {
-  const errorRef = useScrollIntoView();
-  if (!children) return null;
-  return (
-    <div ref={errorRef} className={getBEMClassName('alert', modifiers)}>
-      <span className={getBEMClassName('alert__icon', ['wide'])}>
-        <FAIcon icon="exclamation-circle" />
-      </span>
-      <Body component="div">{children}</Body>
-    </div>
-  );
-};
-
-ErrorMessage.propTypes = {
-  children: PropTypes.node,
-  modifiers: PropTypes.arrayOf(PropTypes.string),
-};
-
-export default ErrorMessage;
diff --git a/src/components/ErrorBoundary.js b/src/components/Errors/ErrorBoundary.js
similarity index 98%
rename from src/components/ErrorBoundary.js
rename to src/components/Errors/ErrorBoundary.js
index 7206d12b9..bdf5cfba3 100644
--- a/src/components/ErrorBoundary.js
+++ b/src/components/Errors/ErrorBoundary.js
@@ -4,11 +4,12 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
 import Link from 'components/Link';
 import MaintenanceMode from 'components/MaintenanceMode';
 import {DEBUG} from 'utils';
 
+import ErrorMessage from './ErrorMessage';
+
 const logError = (error, errorInfo) => {
   DEBUG && console.error(error, errorInfo);
 };
diff --git a/src/components/Errors/ErrorMessage.js b/src/components/Errors/ErrorMessage.js
new file mode 100644
index 000000000..01ed8fd1f
--- /dev/null
+++ b/src/components/Errors/ErrorMessage.js
@@ -0,0 +1,32 @@
+import {Alert} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import useScrollIntoView from 'hooks/useScrollIntoView';
+
+const ICONS = {
+  error: <i className="fa fas fa-exclamation-circle" />,
+  info: <i className="fa fas fa-info-circle" />,
+  warning: <i className="fa fas fa-exclamation-triangle" />,
+  ok: <i className="fa fas fa-check-circle" />,
+};
+
+const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
+
+const ErrorMessage = ({children, modifier = 'error'}) => {
+  const errorRef = useScrollIntoView();
+  if (!children) return null;
+  return (
+    <Alert type={modifier} icon={ICONS[modifier]} ref={errorRef}>
+      {children}
+    </Alert>
+  );
+};
+
+ErrorMessage.propTypes = {
+  children: PropTypes.node,
+  modifier: PropTypes.oneOf(ALERT_MODIFIERS),
+};
+
+export {ALERT_MODIFIERS};
+export default ErrorMessage;
diff --git a/src/components/Errors/Errors.mdx b/src/components/Errors/Errors.mdx
new file mode 100644
index 000000000..067749621
--- /dev/null
+++ b/src/components/Errors/Errors.mdx
@@ -0,0 +1,21 @@
+import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+
+import * as ErrorsStories from './Errors.stories';
+
+<Meta of={ErrorsStories} />
+
+# Error Message
+
+The error message component uses the
+[Utrecht Alert component](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-alert--docs).
+
+<Canvas>
+  <Story of={ErrorsStories.ErrorMessageOkStory} />
+  <Story of={ErrorsStories.ErrorMessageInfoStory} />
+  <Story of={ErrorsStories.ErrorMessageErrorStory} />
+  <Story of={ErrorsStories.ErrorMessageWarningStory} />
+</Canvas>
+
+## Props
+
+<ArgTypes of={ErrorsStories} />
diff --git a/src/components/Errors/Errors.stories.js b/src/components/Errors/Errors.stories.js
new file mode 100644
index 000000000..dfecf72fa
--- /dev/null
+++ b/src/components/Errors/Errors.stories.js
@@ -0,0 +1,48 @@
+import ErrorMessage from './ErrorMessage';
+import {ALERT_MODIFIERS} from './ErrorMessage';
+
+export default {
+  title: 'Private API / Error Message',
+  render: ({message, modifier}) => <ErrorMessage modifier={modifier}>{message}</ErrorMessage>,
+  argTypes: {
+    modifier: {
+      options: ALERT_MODIFIERS,
+      control: {
+        type: 'radio',
+      },
+    },
+    children: {control: false},
+  },
+};
+
+export const ErrorMessageErrorStory = {
+  name: 'Error Message',
+  args: {
+    modifier: 'error',
+    message: 'Sadness, something went wrong.',
+  },
+};
+
+export const ErrorMessageOkStory = {
+  name: 'Ok Message',
+  args: {
+    modifier: 'ok',
+    message: 'Something went OK.',
+  },
+};
+
+export const ErrorMessageInfoStory = {
+  name: 'Info Message',
+  args: {
+    modifier: 'info',
+    message: 'This is an info!',
+  },
+};
+
+export const ErrorMessageWarningStory = {
+  name: 'Warning Message',
+  args: {
+    modifier: 'warning',
+    message: 'You are being warned.',
+  },
+};
diff --git a/src/components/Form.js b/src/components/Form.js
index bc530caa7..468fa06ed 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -6,7 +6,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';
diff --git a/src/components/LanguageSelection/LanguageSelection.stories.js b/src/components/LanguageSelection/LanguageSelection.stories.js
index 488b6dce9..67b168a3d 100644
--- a/src/components/LanguageSelection/LanguageSelection.stories.js
+++ b/src/components/LanguageSelection/LanguageSelection.stories.js
@@ -4,7 +4,7 @@ import {getWorker} from 'msw-storybook-addon';
 import React, {useState} from 'react';
 import {IntlProvider} from 'react-intl';
 
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {I18NContext} from 'i18n';
 import {ConfigDecorator} from 'story-utils/decorators';
 
diff --git a/src/components/MaintenanceMode.js b/src/components/MaintenanceMode.js
index 8b3734e2f..b13933615 100644
--- a/src/components/MaintenanceMode.js
+++ b/src/components/MaintenanceMode.js
@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
 import Card from 'components/Card';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {IsFormDesigner} from 'headers';
-import {getBEMClassName} from 'utils';
 
 const MaintenanceModeAlert = () => {
-  const alertClassName = getBEMClassName('alert', ['info']);
   const userIsFormDesigner = IsFormDesigner.getValue();
 
   let message;
@@ -32,14 +29,7 @@ const MaintenanceModeAlert = () => {
     );
   }
 
-  return (
-    <div className={alertClassName}>
-      <span className={getBEMClassName('alert__icon')}>
-        <FAIcon icon="info" />
-      </span>
-      <Body>{message}</Body>
-    </div>
-  );
+  return <ErrorMessage modifier="info">{message}</ErrorMessage>;
 };
 
 const MaintenanceMode = ({title, asToast = false}) => {
diff --git a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
index 89799e20a..c46f395d1 100644
--- a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
+++ b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
@@ -18,18 +18,17 @@ exports[`navigation without context displays a generic error message 1`] = `
   >
      
     <div
-      className="openforms-alert openforms-alert--error"
+      className="utrecht-alert utrecht-alert--error"
     >
-      <span
-        className="openforms-alert__icon openforms-alert__icon--wide"
+      <div
+        className="utrecht-alert__icon"
       >
         <i
-          aria-hidden="true"
-          className="fa fas fa-icon fa-exclamation-circle"
+          className="fa fas fa-exclamation-circle"
         />
-      </span>
+      </div>
       <div
-        className="openforms-body"
+        className="utrecht-alert__message"
       >
         We can't display any payment information - did you maybe get here by accident?
       </div>
@@ -60,18 +59,17 @@ exports[`on valid redirect renders an error message on failure 1`] = `
       className="openforms-body"
     >
       <div
-        className="openforms-alert openforms-alert--error"
+        className="utrecht-alert utrecht-alert--error"
       >
-        <span
-          className="openforms-alert__icon openforms-alert__icon--wide"
+        <div
+          className="utrecht-alert__icon"
         >
           <i
-            aria-hidden="true"
-            className="fa fas fa-icon fa-exclamation-circle"
+            className="fa fas fa-exclamation-circle"
           />
-        </span>
+        </div>
         <div
-          className="openforms-body"
+          className="utrecht-alert__message"
         >
           The payment has failed. If you aborted the payment, please complete payment from the confirmation email.
         </div>
diff --git a/src/components/PaymentOverview/index.js b/src/components/PaymentOverview/index.js
index 94807713d..972363f31 100644
--- a/src/components/PaymentOverview/index.js
+++ b/src/components/PaymentOverview/index.js
@@ -5,7 +5,7 @@ import {useLocation} from 'react-router-dom';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import useTitle from 'hooks/useTitle';
 
diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js
index 33388115d..36005750f 100644
--- a/src/components/Sessions/RequireSession.js
+++ b/src/components/Sessions/RequireSession.js
@@ -7,7 +7,7 @@ import {ConfigContext} from 'Context';
 import {apiCall} from 'api';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import Modal from 'components/modals/Modal';
@@ -137,7 +137,7 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
         setWarningDismissed(true);
       }}
     >
-      <ErrorMessage modifiers={['warning']}>
+      <ErrorMessage modifier="warning">
         <FormattedMessage
           description="Session expiry warning message (in modal)"
           defaultMessage="Your session is about to expire {delta}. Extend your session if you wish to continue."
diff --git a/src/components/StatementCheckboxes/StatementCheckbox.js b/src/components/StatementCheckboxes/StatementCheckbox.js
index d4f7bec2b..0964047db 100644
--- a/src/components/StatementCheckboxes/StatementCheckbox.js
+++ b/src/components/StatementCheckboxes/StatementCheckbox.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {FormioComponent} from 'components/formio';
 
 import './StatementCheckbox.scss';
@@ -41,7 +41,7 @@ const StatementCheckbox = ({configuration, showWarning = false}) => {
     <div className="openforms-privacy-checkbox">
       <FormioComponent component={formioDefinition} />
       {showWarning && (
-        <ErrorMessage modifiers={['warning']}>
+        <ErrorMessage modifier="warning">
           {intl.formatMessage(WARNINGS[configuration.key])}
         </ErrorMessage>
       )}
diff --git a/src/components/SubmissionConfirmation.js b/src/components/SubmissionConfirmation.js
index 175a79244..e6cd97e4b 100644
--- a/src/components/SubmissionConfirmation.js
+++ b/src/components/SubmissionConfirmation.js
@@ -8,7 +8,7 @@ import Anchor from 'components/Anchor';
 import Body from 'components/Body';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FAIcon from 'components/FAIcon';
 import Loader from 'components/Loader';
 import PaymentForm from 'components/PaymentForm';
diff --git a/src/components/Summary/GenericSummary.js b/src/components/Summary/GenericSummary.js
index b38c7ff56..249fbccc4 100644
--- a/src/components/Summary/GenericSummary.js
+++ b/src/components/Summary/GenericSummary.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import FormStepSummary from 'components/FormStepSummary';
 import {LayoutColumn} from 'components/Layout';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.js b/src/components/appointments/CreateAppointment/CreateAppointment.js
index 2289f1d31..22fb26eb5 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.js
@@ -3,7 +3,7 @@ import {Outlet, useLocation} from 'react-router-dom';
 
 import {ConfigContext} from 'Context';
 import Card from 'components/Card';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import {LiteralsProvider} from 'components/Literal';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/CreateAppointment/Summary.js b/src/components/appointments/CreateAppointment/Summary.js
index dd649d639..0a4805d7a 100644
--- a/src/components/appointments/CreateAppointment/Summary.js
+++ b/src/components/appointments/CreateAppointment/Summary.js
@@ -7,7 +7,7 @@ import {useAsync} from 'react-use';
 import {ConfigContext} from 'Context';
 import {post} from 'api';
 import {CardTitle} from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import FormStepSummary from 'components/FormStepSummary';
 import Literal from 'components/Literal';
 import Loader from 'components/Loader';
diff --git a/src/components/appointments/ManageAppointment.js b/src/components/appointments/ManageAppointment.js
index bcf581fb1..7928f0572 100644
--- a/src/components/appointments/ManageAppointment.js
+++ b/src/components/appointments/ManageAppointment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Route, Routes} from 'react-router-dom';
 
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {LayoutColumn} from 'components/Layout';
 
 import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js
index d53b57321..4e81db453 100644
--- a/src/components/appointments/cancel/CancelAppointment.js
+++ b/src/components/appointments/cancel/CancelAppointment.js
@@ -8,7 +8,7 @@ import {post} from 'api';
 import Body from 'components/Body';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {EmailField} from 'components/forms';
 import {ValidationError} from 'errors';
diff --git a/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js b/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js
new file mode 100644
index 000000000..00600e072
--- /dev/null
+++ b/src/components/auth/AuthenticationErrors/AuthenticationErrors.stories.js
@@ -0,0 +1,28 @@
+import {AuthenticationErrors, CANCEL_LOGIN_PARAM, MAPPING_PARAMS_SERVICE} from './index';
+
+export default {
+  title: 'Private API / Authentication Errors',
+  render: ({parameter, message}) => <AuthenticationErrors parameters={{[parameter]: message}} />,
+  argTypes: {
+    parameter: {
+      options: Object.keys(MAPPING_PARAMS_SERVICE),
+      control: {
+        type: 'radio',
+      },
+    },
+    message: {
+      options: [CANCEL_LOGIN_PARAM, 'error'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export const AuthenticationErrorsStory = {
+  name: 'Authentication Error',
+  args: {
+    parameter: '_digid-message',
+    message: 'error',
+  },
+};
diff --git a/src/components/auth/AuthenticationErrors/index.js b/src/components/auth/AuthenticationErrors/index.js
index d0bf82553..cd5b69c9f 100644
--- a/src/components/auth/AuthenticationErrors/index.js
+++ b/src/components/auth/AuthenticationErrors/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {useIntl} from 'react-intl';
 
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import useQuery from 'hooks/useQuery';
 
 const MAPPING_PARAMS_SERVICE = {
@@ -75,11 +75,16 @@ const AuthenticationErrors = ({parameters}) => {
     }
   }
 
-  return <ErrorMessage modifiers={['error', 'with-margin']}>{messagesToDisplay[0]}</ErrorMessage>;
+  return (
+    <div className="openforms-authentication-errors">
+      <ErrorMessage modifier="error">{messagesToDisplay[0]}</ErrorMessage>
+    </div>
+  );
 };
 
 AuthenticationErrors.propTypes = {
   parameters: PropTypes.object.isRequired,
 };
 
+export {MAPPING_PARAMS_SERVICE, CANCEL_LOGIN_PARAM};
 export {AuthenticationErrors, useDetectAuthErrorMessages};
diff --git a/src/components/auth/AuthenticationOutage.js b/src/components/auth/AuthenticationOutage.js
index ce14c8c41..d467b1d5d 100644
--- a/src/components/auth/AuthenticationOutage.js
+++ b/src/components/auth/AuthenticationOutage.js
@@ -2,10 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import useQuery from 'hooks/useQuery';
-import {getBEMClassName} from 'utils';
 
 const AUTHENTICATION_OUTAGE_QUERY_PARAM = 'of-auth-problem';
 
@@ -15,20 +13,15 @@ export const useDetectAuthenticationOutage = () => {
 };
 
 const AuthenticationOutage = ({loginOption}) => (
-  <div className={getBEMClassName('alert', ['error'])}>
-    <span className={getBEMClassName('alert__icon', ['wide'])}>
-      <FAIcon icon="exclamation-circle" />
-    </span>
-    <Body>
-      <FormattedMessage
-        description="Authentication outage message"
-        defaultMessage={`
+  <ErrorMessage>
+    <FormattedMessage
+      description="Authentication outage message"
+      defaultMessage={`
           This form is temporarily unavailable because of an outage with the {label}
           authentication service. Please try again later.`}
-        values={{label: loginOption.label}}
-      />
-    </Body>
-  </div>
+      values={{label: loginOption.label}}
+    />
+  </ErrorMessage>
 );
 
 AuthenticationOutage.propTypes = {
diff --git a/src/components/auth/AuthenticationOutage.stories.js b/src/components/auth/AuthenticationOutage.stories.js
new file mode 100644
index 000000000..e250e8cc6
--- /dev/null
+++ b/src/components/auth/AuthenticationOutage.stories.js
@@ -0,0 +1,18 @@
+import AuthenticationOutage from './AuthenticationOutage';
+
+export default {
+  title: 'Private API / Authentication Outage',
+  component: AuthenticationOutage,
+  args: {
+    loginOption: {
+      label: 'DigiD',
+    },
+  },
+};
+
+export const AuthenticationOutageStory = {
+  name: 'Authentication Outage',
+  args: {
+    label: 'DigiD',
+  },
+};
diff --git a/src/components/modals/FormStepSaveModal.js b/src/components/modals/FormStepSaveModal.js
index c7bee8e8f..f9482c8dc 100644
--- a/src/components/modals/FormStepSaveModal.js
+++ b/src/components/modals/FormStepSaveModal.js
@@ -11,7 +11,7 @@ import {useImmerReducer} from 'use-immer';
 import {ConfigContext} from 'Context';
 import {destroy, post} from 'api';
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {EmailField} from 'components/forms';
diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js
index b52b7986e..edeb49567 100644
--- a/src/i18n-zod.stories.js
+++ b/src/i18n-zod.stories.js
@@ -28,7 +28,7 @@ const TestComponent = ({email, number}) => {
 
   const formatted = result.error.format();
   return (
-    <div className="utrecht-document">
+    <>
       <p>Error messages should be in Dutch</p>
 
       <div>
@@ -47,7 +47,7 @@ const TestComponent = ({email, number}) => {
           ))}
         </ul>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/i18n.js b/src/i18n.js
index 40ead1cda..9e333b8ee 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -8,8 +8,8 @@ import {createGlobalstate, useGlobalState} from 'state-pool';
 
 import {ConfigContext, FormioTranslations} from 'Context';
 import {get} from 'api';
-import {logError} from 'components/ErrorBoundary';
-import ErrorMessage from 'components/ErrorMessage';
+import {logError} from 'components/Errors/ErrorBoundary';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 
 import messagesEN from './i18n/compiled/en.json';
diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss
index 2259ef0ac..02671ae9b 100644
--- a/src/scss/components/_alert.scss
+++ b/src/scss/components/_alert.scss
@@ -1,44 +1,46 @@
 @use 'microscope-sass/lib/bem';
 
-@import '../mixins/prefix';
-@import '../settings';
-
-.#{prefix('alert')} {
-  @include margin(true, $properties: padding);
-  @include margin('auto', $properties: margin-bottom);
-  display: flex;
-  justify-content: flex-start;
-
-  @include bem.modifier('info') {
-    background-color: var(--of-alert-info-bg);
-  }
-
-  @include bem.modifier('error') {
-    background-color: var(--of-alert-error-bg);
+// Temporary CSS override to get the colour of the icon to work
+.openforms-theme {
+  .utrecht-alert {
+    @include bem.modifier('error') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-error-color);
+      }
+    }
 
-    .fa-icon {
-      color: var(--of-color-danger);
+    @include bem.modifier('info') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-info-color);
+      }
     }
-  }
 
-  @include bem.modifier('warning') {
-    background-color: var(--of-alert-warning-bg);
+    @include bem.modifier('warning') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-warning-color);
+      }
+    }
 
-    .fa-icon {
-      color: var(--of-color-warning);
+    @include bem.modifier('ok') {
+      .utrecht-alert__icon {
+        color: var(--utrecht-alert-icon-ok-color);
+      }
     }
   }
+}
 
-  @include bem.modifier('with-margin') {
-    margin: 1rem 0;
+// TODO: remove in SDK 3.0
+// Backwards compatibility layer
+.utrecht-alert {
+  @include bem.modifier('error') {
+    background-color: var(--utrecht-alert-error-background-color, var(--of-alert-error-bg));
   }
 
-  @include bem.element('icon') {
-    display: block;
-    width: 1em;
+  @include bem.modifier('info') {
+    background-color: var(--utrecht-alert-info-background-color, var(--of-alert-info-bg));
+  }
 
-    @include bem.modifier('wide') {
-      width: 2em;
-    }
+  @include bem.modifier('warning') {
+    background-color: var(--utrecht-alert-warning-background-color, var(--of-alert-warning-bg));
   }
 }
diff --git a/src/scss/components/_authentication-errors.scss b/src/scss/components/_authentication-errors.scss
new file mode 100644
index 000000000..4c8cc5b4a
--- /dev/null
+++ b/src/scss/components/_authentication-errors.scss
@@ -0,0 +1,6 @@
+.openforms-authentication-errors {
+  padding-block-end: 1rem;
+  padding-block-start: 1rem;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
diff --git a/src/scss/components/_form-field.scss b/src/scss/components/_form-field.scss
index ee030dc04..f3feddd11 100644
--- a/src/scss/components/_form-field.scss
+++ b/src/scss/components/_form-field.scss
@@ -7,7 +7,10 @@
       background-color: var(--of-utrecht-form-field-background-color, unset);
 
       &.utrecht-form-field--invalid {
-        --of-utrecht-form-field-background-color: var(--of-alert-error-bg);
+        --of-utrecht-form-field-background-color: var(
+          --utrecht-alert-error-background-color,
+          var(--of-alert-error-bg)
+        );
         // apply padding in all dimensions for error state
         padding-inline-end: var(--utrecht-form-field-invalid-padding-inline-start);
         padding-block-start: var(--utrecht-form-field-invalid-padding-inline-start);
@@ -20,7 +23,10 @@
       background-color: var(--of-utrecht-form-field-background-color, unset);
 
       &.utrecht-form-fieldset--invalid {
-        --of-utrecht-form-field-background-color: var(--of-alert-error-bg);
+        --of-utrecht-form-field-background-color: var(
+          --utrecht-alert-error-background-color,
+          var(--of-alert-error-bg)
+        );
         // apply padding in all dimensions for error state
         padding-inline-end: var(--utrecht-form-field-invalid-padding-inline-start);
         padding-block-start: var(--utrecht-form-field-invalid-padding-inline-start);
diff --git a/src/scss/nl-design-system-community.scss b/src/scss/nl-design-system-community.scss
index 086e764ae..a1d36e943 100644
--- a/src/scss/nl-design-system-community.scss
+++ b/src/scss/nl-design-system-community.scss
@@ -4,3 +4,4 @@
 @import '@utrecht/components/dist/form-field/css/index.css';
 @import '@utrecht/components/dist/form-fieldset/css/index.css';
 @import '@utrecht/components/dist/radio-button/css/index.css';
+@import '@utrecht/components/dist/alert/css/index.css';
diff --git a/src/styles.scss b/src/styles.scss
index aa85986e3..af8042b29 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -65,3 +65,4 @@
 @import './scss/components/floating-widget';
 @import './scss/components/date-picker';
 @import './scss/components/input-container';
+@import './scss/components/authentication-errors';
diff --git a/yarn.lock b/yarn.lock
index bca88f7fe..edae31d4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1482,13 +1482,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
   integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -5138,12 +5145,12 @@
     "@typescript-eslint/types" "5.60.0"
     eslint-visitor-keys "^3.3.0"
 
-"@utrecht/component-library-css@^1.0.0-alpha.526":
-  version "1.0.0-alpha.529"
-  resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.529.tgz#f4b0e7109f76f8fa1992657b1b449e35d2c49960"
-  integrity sha512-GgwWM5KBfG0cKC21kLB/fxS7cxMAYnSJCAyVprm1vtdFhlqDATkpZ8nAy9G+M6Kybz67qpuzEhjQ9n77aEIinA==
+"@utrecht/component-library-css@1.0.0-alpha.604":
+  version "1.0.0-alpha.604"
+  resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.604.tgz#d8c53be9a103ef71cf2bb171b5ab6bb0233ecce8"
+  integrity sha512-2yAAOKxirmJVKpdHGhfh3lI4MdR46JN/W6oL+LlmRwmO84xTlJnWKqPuIcIijzjCHzggPWNl5O6zHPPlumWi4g==
 
-"@utrecht/component-library-react@^1.0.0-alpha.353":
+"@utrecht/component-library-react@1.0.0-alpha.353":
   version "1.0.0-alpha.353"
   resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-1.0.0-alpha.353.tgz#1913089f74880532a0954717240e0e7ffb032020"
   integrity sha512-WoJOGxUtQdDn0ysU9WYQou1MQBUIfJxEUJXMuTaRO2nxcYjv1lxto9Di+PRfDcRJr0mNKVApcxu3d8yRLFNHxQ==
@@ -5152,17 +5159,17 @@
     date-fns "2.30.0"
     lodash.chunk "4.2.0"
 
-"@utrecht/components@^1.0.0-alpha.473":
-  version "1.0.0-alpha.490"
-  resolved "https://registry.yarnpkg.com/@utrecht/components/-/components-1.0.0-alpha.490.tgz#8eedd4794c017d2c7d53e66c29d460bc50e1938e"
-  integrity sha512-cWX9e+OTjGLy00oZU7tQn/qPle+u9aFfH2zktkGxxiYaz/u8HQ36xnJMlpm9fEKST+9x0AJOT9RCYLCSgKxfNg==
+"@utrecht/components@1.0.0-alpha.565":
+  version "1.0.0-alpha.565"
+  resolved "https://registry.yarnpkg.com/@utrecht/components/-/components-1.0.0-alpha.565.tgz#af5ec288882343b43e41dab3b929e8b44caac94f"
+  integrity sha512-Rs/f8YzVpeM7pXgQuTicT/rb2sYrUqAGB3rRSWq7TuvUgreENrJa9vnRytVq2I6+Z66zEuz8d2tBO0tUEijFDA==
   dependencies:
     clsx "1.2.1"
 
-"@utrecht/design-tokens@^1.0.0-alpha.505":
-  version "1.0.0-alpha.522"
-  resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.522.tgz#ade2891d9a73b956b400674315898a7a2dd41871"
-  integrity sha512-YmOoH2eMkkTmxpUCei9Ccgcb3reWluf/9u36DDiNNwn837pjVZZz2Ldks12Vfe1Qb8wIL/Y0AT6zZ7Hwc4bCig==
+"@utrecht/design-tokens@1.0.0-alpha.597":
+  version "1.0.0-alpha.597"
+  resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.597.tgz#7f36889edc763a001437074d266d9b8d1fb81602"
+  integrity sha512-1DhRBv0896JkdaGiXBJL71mckrrQAZkr5CTqR5BRuHp/xbSaPtLg/JEw4uNXpsnvxZrwn1wmz/PY/wzvnBAGHw==
 
 "@vue/compiler-core@3.3.4", "@vue/compiler-core@^3.2.23":
   version "3.3.4"
@@ -7210,7 +7217,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@2.30.0:
+date-fns@2.30.0, date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
@@ -13840,6 +13847,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7, regenerator-runtime@^
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"