diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts
index 678494cd9f8..f70918d91f3 100644
--- a/libs/components/src/dialog/dialog.service.stories.ts
+++ b/libs/components/src/dialog/dialog.service.stories.ts
@@ -44,10 +44,10 @@ class StoryDialogComponent {
         <br />
         Animal: {{ animal }}
       </span>
-      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
+      <ng-container bitDialogFooter>
         <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
         <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
-      </div>
+      </ng-container>
     </bit-dialog>
   `,
 })
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 963e600aa2c..bb3721795fb 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -25,7 +25,7 @@
   </div>
 
   <div
-    class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"
+    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-alt tw-p-4"
   >
     <ng-content select="[bitDialogFooter]"></ng-content>
   </div>
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index 8ba031b680a..11a67038140 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -55,7 +55,7 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
   <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
     <span bitDialogTitle>{{title}}</span>
     <span bitDialogContent>Dialog body text goes here.</span>
-    <div bitDialogFooter class="tw-flex tw-items-center tw-flex-row tw-gap-2">
+    <ng-container bitDialogFooter>
       <button bitButton buttonType="primary">Save</button>
       <button bitButton buttonType="secondary">Cancel</button>
       <button
@@ -65,7 +65,7 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
         size="default"
         title="Delete"
         aria-label="Delete"></button>
-    </div>
+    </ng-container>
   </bit-dialog>
   `,
 });
@@ -98,18 +98,18 @@ const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
   <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-  <span bitDialogTitle>Scrolling Example</span>
-  <span bitDialogContent>
-    Dialog body text goes here.<br>
-    <ng-container *ngFor="let _ of [].constructor(100)">
-      repeating lines of characters <br>
+    <span bitDialogTitle>Scrolling Example</span>
+    <span bitDialogContent>
+      Dialog body text goes here.<br>
+      <ng-container *ngFor="let _ of [].constructor(100)">
+        repeating lines of characters <br>
+      </ng-container>
+      end of sequence!
+    </span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary">Save</button>
+      <button bitButton buttonType="secondary">Cancel</button>
     </ng-container>
-    end of sequence!
-  </span>
-  <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
-    <button bitButton buttonType="primary">Save</button>
-    <button bitButton buttonType="secondary">Cancel</button>
-  </div>
   </bit-dialog>
   `,
 });
@@ -123,18 +123,18 @@ const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
   <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-  <span bitDialogTitle>Tab Content Example</span>
-  <span bitDialogContent>
-    <bit-tab-group>
-        <bit-tab label="First Tab">First Tab Content</bit-tab>
-        <bit-tab label="Second Tab">Second Tab Content</bit-tab>
-        <bit-tab label="Third Tab">Third Tab Content</bit-tab>
-    </bit-tab-group>
-  </span>
-  <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
-    <button bitButton buttonType="primary">Save</button>
-    <button bitButton buttonType="secondary">Cancel</button>
-  </div>
+    <span bitDialogTitle>Tab Content Example</span>
+    <span bitDialogContent>
+      <bit-tab-group>
+          <bit-tab label="First Tab">First Tab Content</bit-tab>
+          <bit-tab label="Second Tab">Second Tab Content</bit-tab>
+          <bit-tab label="Third Tab">Third Tab Content</bit-tab>
+      </bit-tab-group>
+    </span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary">Save</button>
+      <button bitButton buttonType="secondary">Cancel</button>
+    </ng-container>
   </bit-dialog>
   `,
 });
diff --git a/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html b/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
index dfc30d8c8fc..a494d65b176 100644
--- a/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
+++ b/libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.html
@@ -5,7 +5,7 @@
 
   <div bitDialogContent>{{ content }}</div>
 
-  <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
+  <ng-container bitDialogFooter>
     <button
       type="button"
       bitButton
@@ -24,5 +24,5 @@
     >
       {{ cancelButtonText }}
     </button>
-  </div>
+  </ng-container>
 </bit-simple-dialog>
diff --git a/libs/components/src/dialog/simple-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog.service.stories.ts
index ab973484c87..470db348693 100644
--- a/libs/components/src/dialog/simple-dialog.service.stories.ts
+++ b/libs/components/src/dialog/simple-dialog.service.stories.ts
@@ -44,10 +44,10 @@ class StoryDialogComponent {
         <br />
         Animal: {{ animal }}
       </span>
-      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
+      <ng-container bitDialogFooter>
         <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
         <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
-      </div>
+      </ng-container>
     </bit-simple-dialog>
   `,
 })
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 4614dc96e53..3ce08e32af8 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -16,7 +16,9 @@
   <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
     <ng-content select="[bitDialogContent]"></ng-content>
   </div>
-  <div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4">
+  <div
+    class="tw-flex tw-flex-row tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4"
+  >
     <ng-content select="[bitDialogFooter]"></ng-content>
   </div>
 </div>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index 17922607992..1e5514abe5b 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
@@ -26,12 +26,12 @@ const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) =>
   props: args,
   template: `
   <bit-simple-dialog>
-      <span bitDialogTitle>Alert Dialog</span>
-      <span bitDialogContent>Message Content</span>
-      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
-        <button bitButton buttonType="primary">Yes</button>
-        <button bitButton buttonType="secondary">No</button>
-      </div>
+    <span bitDialogTitle>Alert Dialog</span>
+    <span bitDialogContent>Message Content</span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary">Yes</button>
+      <button bitButton buttonType="secondary">No</button>
+    </ng-container>
   </bit-simple-dialog>
   `,
 });
@@ -42,13 +42,13 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
   props: args,
   template: `
   <bit-simple-dialog>
-      <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
-      <span bitDialogTitle>Premium Subscription Available</span>
-      <span bitDialogContent> Message Content</span>
-      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
-        <button bitButton buttonType="primary">Yes</button>
-        <button bitButton buttonType="secondary">No</button>
-      </div>
+    <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
+    <span bitDialogTitle>Premium Subscription Available</span>
+    <span bitDialogContent> Message Content</span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary">Yes</button>
+      <button bitButton buttonType="secondary">No</button>
+    </ng-container>
   </bit-simple-dialog>
   `,
 });
@@ -59,19 +59,19 @@ const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponen
   props: args,
   template: `
   <bit-simple-dialog>
-      <span bitDialogTitle>Alert Dialog</span>
-      <span bitDialogContent>
-        Message Content
-        Message text goes here.<br>
-        <ng-container *ngFor="let _ of [].constructor(100)">
-          repeating lines of characters <br>
-        </ng-container>
-        end of sequence!
-      </span>
-      <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
-        <button bitButton buttonType="primary">Yes</button>
-        <button bitButton buttonType="secondary">No</button>
-      </div>
+    <span bitDialogTitle>Alert Dialog</span>
+    <span bitDialogContent>
+      Message Content
+      Message text goes here.<br>
+      <ng-container *ngFor="let _ of [].constructor(100)">
+        repeating lines of characters <br>
+      </ng-container>
+      end of sequence!
+    </span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary">Yes</button>
+      <button bitButton buttonType="secondary">No</button>
+    </ng-container>
   </bit-simple-dialog>
   `,
 });