diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index 4fd194c2fa..46b675438a 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -76,4 +76,4 @@ graph TD;
 
 ----------------------------------------------
 
-*Built with [StencilJS](https://stenciljs.com/)*
+*Built with [StencilJS](https://stenciljs.com/)*
\ No newline at end of file
diff --git a/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
new file mode 100644
index 0000000000..bc776e5392
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Display', () => {
+  it('display', () => {
+    cy.visit('/iframe.html?id=snapshots--display');
+    cy.get('.display-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Display', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
new file mode 100644
index 0000000000..9d3f04c309
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as DisplayStories from './display.stories';
+import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
+import { forEach } from '@/utils/react';
+
+export const displayOptions = [
+  'none',
+  'inline',
+  'inline-block',
+  'block',
+  'grid',
+  'inline-grid',
+  'table',
+  'table-cell',
+  'table-row',
+  'flex',
+  'inline-flex',
+];
+
+<Meta of={DisplayStories} />
+
+# Display
+
+<div className="lead">
+  Use the display utility classes to set the display of an element to any possible display CSS
+  value.
+</div>
+
+The naming convention for display utilities follows this pattern:
+
+- For all breakpoints (<code>{firstBreakpoint}</code> and up): `d-{display}`
+- Starting from a specific breakpoint ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `d-{breakpoint}-{display}`
+
+### Available display values
+
+The available display utilities values are the following:
+
+<ul>
+  {forEach(displayOptions, function ({ value }) {
+    return <li>{value}</li>;
+  })}
+</ul>
+
+### Usage
+
+To set a display on an element, simply add a `d-{display}` class to it.
+
+<Canvas of={DisplayStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
new file mode 100644
index 0000000000..6600a7ed1c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './display.stories';
+import { displayOptions } from './display.docs.mdx';
+import './display.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Display: Story = {
+  render: () => {
+    return html`
+      <div class="display-example">
+        ${displayOptions.map(
+          display => html`
+            <div class="display-container p-8">
+              <div class="d-${display} p-8">${display}</div>
+              <div class="d-${display} p-8">${display}</div>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
new file mode 100644
index 0000000000..91b3a91143
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '1bb8a4a7-8205-4dcb-a41c-8f7ab1de1c99',
+  title: 'Utilities/Display',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () =>
+    html`
+      <div class="d-inline bg-yellow p-8">Content</div>
+      <div class="d-inline bg-black p-8">Content</div>
+    `,
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
new file mode 100644
index 0000000000..eb981a09ce
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -0,0 +1,11 @@
+@use 'sass:color';
+@use '@swisspost/design-system-styles/core' as post;
+
+.display-container {
+  border: post.$border-width solid post.$border-color;
+
+  > * {
+    border: post.$border-width solid post.$border-color;
+    background-color: color.adjust(post.$border-color, $lightness: 15%);
+  }
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 01cb191d0c..2c21df1b4b 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,4 +26,6 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'display');
+
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 721d5efe42..ddeb97c37a 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -126,6 +126,13 @@ $utilities: (
     class: column-gap,
     values: from-tokens('spacing', 'gap'),
   ),
-
+  'display': (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
+      none,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );