diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
index a3db4f6063..3781fb06a0 100644
--- a/apps/demo-app/src/views/HomeView.vue
+++ b/apps/demo-app/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import {
   DENSITIES,
   OnyxAvatar,
   OnyxBadge,
+  OnyxBottomBar,
   OnyxButton,
   OnyxCheckboxGroup,
   OnyxDatePicker,
@@ -321,6 +322,14 @@ const selectedDate = ref<DateValue>();
         <!-- Add new components alphabetically. -->
       </div>
     </div>
+    <template #footer>
+      <OnyxBottomBar>
+        <template #right>
+          <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+          <OnyxButton label="Button"></OnyxButton>
+        </template>
+      </OnyxBottomBar>
+    </template>
   </OnyxPageLayout>
 </template>
 
diff --git a/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue b/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue
index ab0b59f439..7a874059fb 100644
--- a/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue
+++ b/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue
@@ -43,7 +43,7 @@ const { densityClass } = useDensity(props);
 
 .onyx-bottom-bar {
   @include layers.component() {
-    position: fixed;
+    position: sticky;
     bottom: 0;
     width: 100%;
     margin-inline: var(--onyx-grid-margin-inline);