diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 79d69423f2a..eaf7fc2beec 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -6,7 +6,7 @@
   cdkTrapFocus
   cdkTrapFocusAutoCapture
 >
-  @let showHeaderBorder = !isDrawer || bodyHasScrolledFrom().top;
+  @let showHeaderBorder = !isDrawer || background === "alt" || bodyHasScrolledFrom().top;
   <header
     class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid"
     [ngClass]="{
@@ -45,6 +45,8 @@
     class="tw-relative tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden"
     [ngClass]="{
       'tw-min-h-60': loading,
+      'tw-bg-background': background === 'default',
+      'tw-bg-background-alt': background === 'alt',
     }"
   >
     @if (loading) {
@@ -59,15 +61,13 @@
         'tw-px-6 tw-py-4': !disablePadding && isDrawer,
         'tw-overflow-y-auto': !loading,
         'tw-invisible tw-overflow-y-hidden': loading,
-        'tw-bg-background': background === 'default',
-        'tw-bg-background-alt': background === 'alt',
       }"
     >
       <ng-content select="[bitDialogContent]"></ng-content>
     </div>
   </div>
 
-  @let showFooterBorder = !isDrawer || bodyHasScrolledFrom().bottom;
+  @let showFooterBorder = !isDrawer || background === "alt" || bodyHasScrolledFrom().bottom;
   <footer
     class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background"
     [ngClass]="[isDrawer ? 'tw-px-6 tw-py-4' : 'tw-p-4']"