diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31a2c5139..88f4b5d77 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,10 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ### Changed
 - ([#621](https://github.com/demos-europe/demosplan-ui/pull/621)) Bump Vue Peer dependency to 2.5.17 ([@spiess-demos](https://github.com/spiess-demos))
+- ([#615](https://github.com/demos-europe/demosplan-ui/pull/615)) **Breaking:** Change DpBulkEditHeader Props ([@ahmad-demos](https://github.com/@ahmad-demos))
 
 ### Added
+- ([#615](https://github.com/demos-europe/demosplan-ui/pull/615)) Add DpBulkEditHeader documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#605](https://github.com/demos-europe/demosplan-ui/pull/605)) Add DpEditableList documentation to Storybook ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#591](https://github.com/demos-europe/demosplan-ui/pull/591)) Add label tests for form components ([@hwiem](https://github.com/hwiem))
 
diff --git a/src/components/core/DpBulkEditHeader.stories.mdx b/src/components/core/DpBulkEditHeader.stories.mdx
new file mode 100644
index 000000000..906374a0f
--- /dev/null
+++ b/src/components/core/DpBulkEditHeader.stories.mdx
@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs'
+import DpBulkEditHeader from './DpBulkEditHeader'
+
+<Meta
+    title="Components/BulkEditHeader"
+    component={DpBulkEditHeader}
+/>
+
+# BulkEditHeader
+
+The BulkEditHeader component allows users to perform bulk editing operations on a set of records. It is typically used in conjunction with `DpDataTable` or a similar component that allows users to select multiple records. Then, actions to be performed on that selection can be placed inside the default slot of `DpBulkEditHeader`.
+
+The component features a visually prominent style and showcases the number of selected items, along with a button to reset the current selection.
+
+## Custom usage
+
+```html
+<div>
+  <dp-bulk-edit-header
+      v-if="selectedItemsCount.length > 0"
+      :selected-items-text="selectedItemsCount.length + ' ' + 'Elements selected'"
+      @reset-selection="resetSelection"
+      v-bind="args">
+    <dp-button
+        text="Delete"
+        icon="delete"
+        @click="resetSelection" />
+  </dp-bulk-edit-header>
+  <label for="toggleAll">
+      <input
+          id="toggleAll"
+          type="checkbox"
+          @click="toggleAll">
+      Select all
+  </label>
+  <div
+      class="u-mt-0_5"
+      v-for="item in args.options"
+      :key="item.id">
+    <label :for="item.id">
+      <input
+          :id="item.id"
+          v-model="item.checked"
+          type="checkbox"/>
+      {{ item.label }}
+    </label>
+  </div>
+</div>
+```
diff --git a/src/components/core/DpBulkEditHeader.stories.tsx b/src/components/core/DpBulkEditHeader.stories.tsx
new file mode 100644
index 000000000..27860f900
--- /dev/null
+++ b/src/components/core/DpBulkEditHeader.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue'
+import DpBulkEditHeader from './DpBulkEditHeader.vue'
+import DpButton from '~/components/DpButton'
+
+const meta: Meta<typeof DpBulkEditHeader> = {
+    component: DpBulkEditHeader,
+    title: 'Components/BulkEditHeader',
+    render: (args) => ({
+        components: {
+            DpButton,
+            DpBulkEditHeader
+        },
+        computed: {
+            allSelected () {
+                return this.selectedItemsCount === (args as any).options.length
+            },
+            selectedItemsCount () {
+                return (args as any).options.filter(checked => checked.checked == true).length
+            },
+            selectedItemsText () {
+                return this.selectedItemsCount + ' ' + (this.selectedItemsCount > 1 ? 'Elements' : 'Element') + ' selected'
+            }
+        },
+        setup () {
+            const toggleAll = (event) => {
+                for (let element of (args as any).options) {
+                    element.checked = event.target.checked
+                }
+            }
+
+            const resetSelection = () => {
+                const toggleAll = document.getElementById('toggleAll') as HTMLInputElement
+                for (const element of (args as any).options) {
+                    element.checked = false
+                }
+                toggleAll.checked = false
+            }
+
+            return { args, resetSelection, toggleAll }
+        },
+        template: `
+          <div>
+              <dp-bulk-edit-header
+                  v-if="selectedItemsCount > 0"
+                  :selected-items-text="selectedItemsText"
+                  @reset-selection="resetSelection"
+                  v-bind="args">
+                <dp-button
+                    text="Delete"
+                    icon="delete"
+                    @click="resetSelection" />
+              </dp-bulk-edit-header>
+              <label for="toggleAll">
+                  <input
+                      id="toggleAll"
+                      type="checkbox"
+                      :checked="allSelected"
+                      @click="toggleAll">
+                  Select all
+              </label>
+              <div
+                  class="u-mt-0_5"
+                  v-for="item in args.options"
+                  :key="item.id">
+                <label :for="item.id">
+                  <input
+                      :id="item.id"
+                      v-model="item.checked"
+                      type="checkbox"/>
+                  {{ item.label }}
+                </label>
+              </div>
+          </div>
+        `,
+    })
+}
+
+interface IDpBulkEditHeader {
+    options: object[]
+}
+
+type Story = StoryObj<IDpBulkEditHeader>
+
+export default meta
+
+export const Default: Story = {
+    args: {
+        options: [
+            { label: 'Item 1', id: '1', checked: false },
+            { label: 'Item 2', id: '2', checked: false },
+            { label: 'Item 3', id: '3', checked: false }
+        ]
+    },
+    argTypes: {}
+}
diff --git a/src/components/core/DpBulkEditHeader.vue b/src/components/core/DpBulkEditHeader.vue
index 6edc5254a..0e912525a 100644
--- a/src/components/core/DpBulkEditHeader.vue
+++ b/src/components/core/DpBulkEditHeader.vue
@@ -5,39 +5,32 @@
     <span class="u-mr">
       {{ selectedItemsText }}
     </span>
-    <slot :selected-items-count="selectedItemsCount">
-      <!-- place edit actions here -->
-    </slot>
+    <slot />
     <button
       type="button"
       class="btn btn--secondary float-right"
       @click="$emit('reset-selection')">
-      {{ Translator.trans('unselect') }}
+      {{ deselect }}
     </button>
   </div>
 </template>
 
 <script>
+import { de } from '~/components/shared/translations'
+
 export default {
   name: 'DpBulkEditHeader',
 
   props: {
-    selectedItemsCount: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-
-    selectionText: {
+    selectedItemsText: {
       type: String,
-      required: false,
-      default: ''
+      required: true
     }
   },
 
-  computed: {
-    selectedItemsText () {
-      return this.selectedItemsCount + ' ' + this.selectionText
+  data () {
+    return {
+      deselect: de.operations.deselect.all
     }
   }
 }
diff --git a/src/components/shared/translations.js b/src/components/shared/translations.js
index 408cfdb74..184db67df 100644
--- a/src/components/shared/translations.js
+++ b/src/components/shared/translations.js
@@ -86,7 +86,7 @@ const de = {
     add: 'Hinzufügen',
     delete: 'Löschen',
     deselect: {
-      all: 'Alle abwählen'
+      all: 'Auswahl aufheben'
     },
     new: 'Neu',
     none: 'Keine',