diff --git a/live-editing/configs/DialogConfigGenerator.ts b/live-editing/configs/DialogConfigGenerator.ts
index 2f7b732adb..6303faa09c 100644
--- a/live-editing/configs/DialogConfigGenerator.ts
+++ b/live-editing/configs/DialogConfigGenerator.ts
@@ -10,32 +10,32 @@ export class DialogConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // dialog sample 1
+        // dialog overview
         configs.push(new Config({
-            component: 'DialogSample1Component',
+            component: 'DialogOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
-        // dialog sample 2
+        // dialog types
         configs.push(new Config({
-            component: 'DialogSample2Component',
+            component: 'DialogTypesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
-        // dialog sample 3
+        // dialog styling
         configs.push(new Config({
-            component: 'DialogSample3Component',
+            component: 'DialogStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/dialog/"
         }));
 
+        // dialog tailwind styling
         configs.push(new Config({
-            component: 'DialogStylingSampleComponent',
-            additionalFiles: ["/src/app/interactions/dialog/dialog-styling-sample/layout.scss"],
+            component: 'DialogTailwindStylingComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/interactions/"
+            shortenComponentPathBy: "/interactions/dialog/"
         }));
 
         return configs;
diff --git a/src/app/interactions/dialog/dialog-overview/dialog-overview.component.html b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.html
new file mode 100644
index 0000000000..5ecf7c705e
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.html
@@ -0,0 +1,12 @@
+<button igxButton="outlined" type="button" class="open-button" (click)="dialog.open()">Open dialog</button>
+
+<igx-dialog #dialog
+    title="Confirmation"
+    message="Your email will be permanently deleted"
+    [positionSettings]="positionSettings"
+    [isOpen]="isBrowser">
+    <div igxDialogActions>
+        <button igxButton="flat" type="button" (click)="dialog.close()">Cancel</button>
+        <button igxButton="flat" type="button" (click)="dialog.close()">OK</button>
+    </div>
+</igx-dialog>
diff --git a/src/app/interactions/dialog/dialog-overview/dialog-overview.component.scss b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.scss
new file mode 100644
index 0000000000..03041a4665
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.scss
@@ -0,0 +1,26 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.9375rem 1rem 1rem;
+}
+
+.open-button {
+    width: 11.25rem;
+}
+
+igx-dialog {
+    --ig-overlay-background-color: transparent;
+    --ig-dialog-message-color: var(--ig-gray-700);
+}
+
+igx-dialog ::ng-deep .igx-dialog__window {
+    width: 17.5rem;
+    margin-top: 6.9375rem;
+}
+
+igx-dialog [igxButton] {
+    --ig-size: var(--ig-size-medium);
+
+    min-width: auto;
+}
diff --git a/src/app/interactions/dialog/dialog-overview/dialog-overview.component.ts b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.ts
new file mode 100644
index 0000000000..129c6930e9
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-overview/dialog-overview.component.ts
@@ -0,0 +1,19 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Component, inject, PLATFORM_ID } from '@angular/core';
+import { PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
+import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-dialog-overview',
+    styleUrls: ['./dialog-overview.component.scss'],
+    templateUrl: './dialog-overview.component.html',
+    imports: [IgxButtonDirective, IgxDialogComponent, IgxDialogActionsDirective]
+})
+export class DialogOverviewComponent {
+    public isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+    public positionSettings: PositionSettings = {
+        verticalDirection: VerticalAlignment.Top
+    };
+}
diff --git a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.html b/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.html
deleted file mode 100644
index ce304428f1..0000000000
--- a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<button igxButton="contained" igxRipple="white" (click)="alert.open()">Show Alert Dialog</button>
-
-<igx-dialog #alert
-    title="Notification"
-    message="Your email has been sent successfully!"
-    leftButtonLabel="OK"
-    (leftButtonSelect)="alert.close()">
-</igx-dialog>
diff --git a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.scss b/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.scss
deleted file mode 100644
index 5bc4862429..0000000000
--- a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-    display: block;
-    padding: 16px;
-}
diff --git a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.ts b/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.ts
deleted file mode 100644
index 45895afcd7..0000000000
--- a/src/app/interactions/dialog/dialog-sample-1/dialog-sample-1.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxDialogComponent } from 'igniteui-angular/dialog';
-
-@Component({
-    selector: 'app-dialog-sample-1',
-    styleUrls: ['./dialog-sample-1.component.scss'],
-    templateUrl: './dialog-sample-1.component.html',
-    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent]
-})
-export class DialogSample1Component { }
diff --git a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.html b/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.html
deleted file mode 100644
index 8c22d96f57..0000000000
--- a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<button igxButton="contained" igxRipple="white" (click)="dialog.open()">Show Confirmation Dialog</button>
-
-<igx-dialog #dialog title="Confirmation"
-    leftButtonLabel="Cancel"
-    (leftButtonSelect)="dialog.close()"
-    rightButtonLabel="OK"
-    (rightButtonSelect)="onDialogOKSelected($event)"
-    message="Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?">
-</igx-dialog>
diff --git a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.scss b/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.scss
deleted file mode 100644
index 5bc4862429..0000000000
--- a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-    display: block;
-    padding: 16px;
-}
diff --git a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.ts b/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.ts
deleted file mode 100644
index 667d646447..0000000000
--- a/src/app/interactions/dialog/dialog-sample-2/dialog-sample-2.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxDialogComponent } from 'igniteui-angular/dialog';
-
-@Component({
-    selector: 'app-dialog-sample-2',
-    styleUrls: ['./dialog-sample-2.component.scss'],
-    templateUrl: './dialog-sample-2.component.html',
-    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent]
-})
-export class DialogSample2Component {
-
-    constructor() { }
-
-    public onDialogOKSelected(event) {
-        event.dialog.close();
-    }
-}
diff --git a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.html b/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.html
deleted file mode 100644
index 5d86968975..0000000000
--- a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<button igxButton="contained" igxRipple="white" (click)="form.open()">Show Custom Dialog</button>
-
-<igx-dialog #form [closeOnOutsideSelect]="true">
-    <igx-dialog-title>
-        <div class="title-container">
-            <igx-icon>vpn_key</igx-icon>
-            <div class="dialog-title">Sign In</div>
-        </div>
-    </igx-dialog-title>
-
-    <form class="signInForm">
-        <igx-input-group>
-            <igx-prefix>
-                <igx-icon>person</igx-icon>
-            </igx-prefix>
-            <label igxLabel for="username">Username</label>
-            <input igxInput id="username" type="text" />
-        </igx-input-group>
-        <igx-input-group>
-            <igx-prefix>
-                <igx-icon>lock</igx-icon>
-            </igx-prefix>
-            <label igxLabel>Password</label>
-            <input igxInput id="password" type="password" />
-        </igx-input-group>
-    </form>
-
-    <div igxDialogActions>
-        <button igxButton (click)="form.close()">CANCEL</button>
-        <button igxButton (click)="form.close()">SIGN IN</button>
-    </div>
-</igx-dialog>
diff --git a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.scss b/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.scss
deleted file mode 100644
index 0cf7df6578..0000000000
--- a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-:host {
-    display: block;
-    padding: 16px;
-}
-
-.signInForm {
-    igx-input-group + igx-input-group {
-        margin-top: 24px;
-    }
-}
-
-.title-container{
-    display: flex;
-
-    igx-icon {
-        margin-right: 8px;
-    }
-}
diff --git a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.ts b/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.ts
deleted file mode 100644
index df3e2e7e1d..0000000000
--- a/src/app/interactions/dialog/dialog-sample-3/dialog-sample-3.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-    selector: 'app-dialog-sample-3',
-    styleUrls: ['./dialog-sample-3.component.scss'],
-    templateUrl: './dialog-sample-3.component.html',
-    imports: [IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxDialogActionsDirective]
-})
-export class DialogSample3Component {
-
-    constructor() { }
-
-    public signIn(event) {
-        event.dialog.close();
-    }
-}
diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html
deleted file mode 100644
index 847b8995b3..0000000000
--- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div igxOverlayOutlet class="dialog-wrapper">
-    <button igxButton="contained" igxRipple="white" (click)="openDialog()">Show Styled Dialog</button>
-    <igx-dialog #dialog1 message="This will create a new social media account.">
-        <igx-dialog-title>
-            <div class="dialog-container">
-                <igx-icon>account_box</igx-icon>
-                <div class="dialog-title">Create a new account?</div>
-            </div>
-        </igx-dialog-title>
-        <div  igxDialogActions class="dialog-container dialog-actions">
-            <button igxButton="contained" igxRipple="white" (click)="dialog.close()">CREATE</button>
-            <button igxButton="contained" igxRipple="white" (click)="dialog.close()">CANCEL</button>
-        </div>
-    </igx-dialog>
-</div>
diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss
deleted file mode 100644
index 04cf8a7677..0000000000
--- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "layout.scss";
-@use "igniteui-angular/theming" as *;
-
-$my-dialog-theme: dialog-theme(
-  $background: #011627,
-  $title-color: #ecaa53,
-  $border-radius: 5px,
-);
-
-$custom-button: contained-button-theme(
-  $background: #ecaa53,
-  $foreground: #011627,
-);
-
-.dialog-container {
-  @include tokens($custom-button);
-}
-
-:host {
-    @include tokens($my-dialog-theme);
-}
diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.ts b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.ts
deleted file mode 100644
index 720f1a1d6e..0000000000
--- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useAnimation } from '@angular/animations';
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { CloseScrollStrategy, GlobalPositionStrategy, IgxOverlayOutletDirective, PositionSettings } from 'igniteui-angular/core';
-import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
-import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-import { slideInBottom, slideOutTop } from 'igniteui-angular/animations';
-
-@Component({
-    selector: 'app-dialog-styling-sample',
-    styleUrls: ['./dialog-styling-sample.component.scss'],
-    templateUrl: './dialog-styling-sample.component.html',
-    imports: [IgxOverlayOutletDirective, IgxButtonDirective, IgxRippleDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxDialogActionsDirective]
-})
-export class DialogStylingSampleComponent implements OnInit {
-
-    @ViewChild(IgxOverlayOutletDirective, { static: true })
-    public outlet: IgxOverlayOutletDirective;
-
-    @ViewChild('dialog1', { read: IgxDialogComponent, static: true })
-    public dialog: IgxDialogComponent;
-
-    private _animaitonSettings: PositionSettings = {
-        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
-        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
-    };
-
-    private _dialogOverlaySettings2;
-
-    public openDialog() {
-        this._dialogOverlaySettings2.outlet = this.outlet;
-        this.dialog.open(this._dialogOverlaySettings2);
-    }
-
-    public ngOnInit() {
-        this._dialogOverlaySettings2 = {
-            modal: true,
-            outlet: this.outlet,
-            scrollStrategy: new CloseScrollStrategy(),
-            positionStrategy: new GlobalPositionStrategy(this._animaitonSettings)
-        };
-    }
-}
diff --git a/src/app/interactions/dialog/dialog-styling-sample/layout.scss b/src/app/interactions/dialog/dialog-styling-sample/layout.scss
deleted file mode 100644
index 724759238f..0000000000
--- a/src/app/interactions/dialog/dialog-styling-sample/layout.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.dialog-container {
-  display: flex;
-}
-
-igx-icon {
-  margin-right: 8px;
-}
-
-.dialog-wrapper {
-  display: block;
-  padding: 16px;
-}
\ No newline at end of file
diff --git a/src/app/interactions/dialog/dialog-styling/dialog-styling.component.html b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.html
new file mode 100644
index 0000000000..ee54d1b628
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.html
@@ -0,0 +1,36 @@
+<igx-dialog class="sign-in-dialog">
+    <igx-dialog-title class="sign-in-header">
+        <button igxButton="fab" type="button" class="sign-in-avatar" aria-label="Profile">
+            <igx-icon>person</igx-icon>
+        </button>
+        <span class="sign-in-title">Welcome back</span>
+    </igx-dialog-title>
+
+    <span class="sign-in-message">Sign in to your workspace</span>
+    <div class="sign-in-fields">
+        <igx-input-group class="sign-in-input">
+            <igx-prefix>
+                <igx-icon>notifications</igx-icon>
+            </igx-prefix>
+            <label igxLabel for="email">E-mail</label>
+            <input igxInput id="email" type="email" placeholder="dean@company.com" />
+        </igx-input-group>
+        <igx-input-group class="sign-in-input">
+            <igx-prefix>
+                <igx-icon>lock</igx-icon>
+            </igx-prefix>
+            <label igxLabel for="password">Password</label>
+            <input igxInput id="password" type="password" placeholder="***********" />
+        </igx-input-group>
+    </div>
+
+    <div igxDialogActions class="sign-in-footer">
+        <div class="sign-in-actions">
+            <button igxButton="outlined" type="button" class="cancel-button">Cancel</button>
+            <button igxButton="contained" type="button" class="submit-button">Sign in</button>
+        </div>
+        <span class="sign-up">
+            No account? <a href="#" (click)="$event.preventDefault()">Create workspace</a>
+        </span>
+    </div>
+</igx-dialog>
diff --git a/src/app/interactions/dialog/dialog-styling/dialog-styling.component.scss b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.scss
new file mode 100644
index 0000000000..78b8418822
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.scss
@@ -0,0 +1,167 @@
+@use "sass:meta";
+@use "igniteui-angular/theming" as *;
+@import url("https://use.typekit.net/bng2zgw.css");
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital@0;1&display=swap");
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-dialog-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.sign-in-dialog {
+    --ig-dialog-background: #00142b;
+    --ig-dialog-border-radius: 1rem;
+    --ig-dialog-elevation: none;
+    --ig-dialog-title-color: #fcfcfc;
+    --ig-dialog-message-color: #d2dbe8;
+
+    display: block;
+}
+
+.sign-in-dialog .igx-dialog.igx-toggle--hidden {
+    display: block !important;
+}
+
+.sign-in-dialog .igx-dialog__window {
+    width: 21.8125rem;
+    border: none;
+}
+
+.sign-in-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem 1.5rem 0;
+    border: none;
+    font: 500 1.25rem / 1.5rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0;
+}
+
+.sign-in-dialog .igx-dialog__window-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 1.5rem 1.5rem;
+}
+
+.sign-in-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1.375rem;
+    padding: 0 1.5rem 1.5rem;
+    border: none;
+}
+
+.sign-in-avatar {
+    width: 3rem;
+    min-width: 0;
+    height: 3rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.75rem;
+    background: #5a1f0c;
+    box-shadow: var(--ig-elevation-6);
+}
+
+.sign-in-avatar igx-icon {
+    --ig-icon-size: 1.125rem;
+
+    color: #f95924;
+}
+
+.sign-in-title {
+    margin: 0;
+}
+
+.sign-in-message {
+    margin-bottom: 0.375rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+}
+
+.sign-in-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @include tokens(input-group-theme($schema: $dark-indigo-schema), $mode: "scoped");
+    @include tokens(icon-theme($schema: $dark-indigo-schema), $mode: "scoped");
+}
+
+.sign-in-input {
+    --ig-size: var(--ig-size-small);
+    --ig-font-family: "Nunito Sans", sans-serif;
+    --ig-input-group-idle-text-color: #fcfcfc;
+    --ig-input-group-filled-text-color: #fcfcfc;
+    --ig-input-group-filled-text-hover-color: #fcfcfc;
+    --ig-input-group-focused-text-color: #fcfcfc;
+    --ig-input-group-placeholder-color: #a9b8cc;
+    --ig-input-group-hover-placeholder-color: #d2dbe8;
+    --ig-input-group-idle-secondary-color: #a9b8cc;
+    --ig-input-group-focused-secondary-color: #a9b8cc;
+    --ig-input-group-input-prefix-color: #7d91ab;
+    --ig-input-group-input-prefix-color--filled: #7d91ab;
+    --ig-input-group-input-prefix-color--focused: #7d91ab;
+    --ig-input-group-idle-bottom-line-color: rgb(255 255 255 / 40%);
+    --ig-input-group-hover-bottom-line-color: rgb(255 255 255 / 80%);
+    --ig-input-group-focused-bottom-line-color: #f95924;
+}
+
+.sign-in-input label {
+    font-size: 0.6875rem;
+    line-height: 0.9375rem;
+    letter-spacing: 0;
+}
+
+.sign-in-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.sign-in-actions [igxButton] {
+    flex: 1;
+    min-height: 1.875rem;
+    height: 1.875rem;
+    border-radius: 0.5rem;
+    font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 0.15px;
+    text-transform: none;
+}
+
+.cancel-button {
+    --ig-outlined-button-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-focus-hover-background: rgb(125 145 171 / 8%);
+    --ig-outlined-button-active-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-background: rgb(125 145 171 / 16%);
+    --ig-outlined-button-focus-visible-background: rgb(125 145 171 / 16%);
+
+    border-color: #7d91ab;
+    color: #7d91ab;
+}
+
+.submit-button {
+    background: #f95924;
+    color: #00142b;
+    box-shadow: none;
+}
+
+.submit-button:hover {
+    background: #e04f20;
+}
+
+.sign-up {
+    font: 400 0.625rem / 1rem aktiv-grotesk, sans-serif;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    text-align: center;
+    color: #a9b8cc;
+}
+
+.sign-up a {
+    color: #f95924;
+    text-decoration: none;
+}
diff --git a/src/app/interactions/dialog/dialog-styling/dialog-styling.component.ts b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.ts
new file mode 100644
index 0000000000..08495fa655
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-styling/dialog-styling.component.ts
@@ -0,0 +1,24 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group';
+
+@Component({
+    selector: 'app-dialog-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./dialog-styling.component.scss'],
+    templateUrl: './dialog-styling.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxDialogComponent,
+        IgxDialogTitleDirective,
+        IgxDialogActionsDirective,
+        IgxIconComponent,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxLabelDirective,
+        IgxPrefixDirective
+    ]
+})
+export class DialogStylingComponent { }
diff --git a/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.html b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.html
new file mode 100644
index 0000000000..778e14d3a0
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.html
@@ -0,0 +1,27 @@
+<div class="flex items-start gap-15 [--ig-font-family:aktiv-grotesk,sans-serif]">
+    <igx-dialog class="[--ig-dialog-background:#002b5c] [--ig-dialog-border-color:transparent] [--ig-dialog-border-radius:1rem] [--ig-dialog-elevation:none] [--ig-dialog-message-color:#a9b8cc] [--ig-dialog-title-color:#fcfcfc] [&_.igx-dialog\_\_window]:!w-70 [&_.igx-dialog\_\_window]:!min-w-0 [&_.igx-dialog\_\_window]:!border-0 [&_.igx-dialog\_\_window-content]:!px-6 [&_.igx-dialog\_\_window-content]:!py-3.5">
+        <igx-dialog-title class="!px-6 !pt-4 !pb-0 !border-0 !text-base/5 !font-bold !tracking-normal">Export complete</igx-dialog-title>
+        <span class="block text-xs/4 font-semibold tracking-[0.15px]">
+            analytics_report_Q3.csv
+            <br />
+            has been exported to your Downloads folder.
+        </span>
+        <div igxDialogActions class="!pt-0 !pr-6 !pb-6 !pl-2 !border-0">
+            <button igxButton="contained" type="button" class="!h-7.5 !min-h-7.5 !w-[4.0625rem] !min-w-0 !rounded-lg !bg-[#f95924] !px-2 !text-xs/4 !font-semibold !tracking-[0.15px] !text-black !normal-case !shadow-[var(--ig-elevation-2)] hover:!bg-[#e04f20]">
+                Got it
+            </button>
+        </div>
+    </igx-dialog>
+
+    <igx-dialog class="[--ig-dialog-background:#e6f2ff] [--ig-dialog-border-color:#99c9ff] [--ig-dialog-border-radius:0.5rem] [--ig-dialog-elevation:none] [--ig-dialog-message-color:#004699] [--ig-dialog-title-color:#004699] [&_.igx-dialog\_\_window]:!w-[15.5625rem] [&_.igx-dialog\_\_window]:!min-w-0 [&_.igx-dialog\_\_window-content]:!px-6 [&_.igx-dialog\_\_window-content]:!py-3.5">
+        <igx-dialog-title class="!justify-between !px-6 !pt-4 !pb-0 !border-0 !text-base/5 !font-bold !tracking-normal">
+            <span>Invitation sent</span>
+            <button igxIconButton="outlined" type="button" aria-label="Close" class="!size-6 !min-w-0 !min-h-0 !p-0 !rounded-full !border !border-[#004699] !text-[#004699]">
+                <igx-icon>clear</igx-icon>
+            </button>
+        </igx-dialog-title>
+        <span class="block text-xs/4 font-semibold tracking-[0.15px]">
+            <span class="text-[#0176ff]">john.smith&#64;company.com</span> has been invited to your team.
+        </span>
+    </igx-dialog>
+</div>
diff --git a/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.scss b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.scss
new file mode 100644
index 0000000000..fa4e44cc02
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.scss
@@ -0,0 +1,19 @@
+@use "sass:meta";
+@import url("https://use.typekit.net/bng2zgw.css");
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-dialog-tailwind-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+app-dialog-tailwind-styling igx-dialog {
+    display: block;
+}
+
+app-dialog-tailwind-styling .igx-dialog.igx-toggle--hidden {
+    display: block !important;
+}
diff --git a/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.ts b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.ts
new file mode 100644
index 0000000000..d3e015eb6b
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-tailwind-styling/dialog-tailwind-styling.component.ts
@@ -0,0 +1,20 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-dialog-tailwind-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./dialog-tailwind-styling.component.scss'],
+    templateUrl: './dialog-tailwind-styling.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxIconButtonDirective,
+        IgxDialogComponent,
+        IgxDialogTitleDirective,
+        IgxDialogActionsDirective,
+        IgxIconComponent
+    ]
+})
+export class DialogTailwindStylingComponent { }
diff --git a/src/app/interactions/dialog/dialog-types/dialog-types.component.html b/src/app/interactions/dialog/dialog-types/dialog-types.component.html
new file mode 100644
index 0000000000..8cb82a3b85
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-types/dialog-types.component.html
@@ -0,0 +1,37 @@
+<div class="dialog-types">
+    <igx-dialog title="Notification" message="Your email has been sent successfully!">
+        <div igxDialogActions>
+            <button igxButton="flat" type="button">OK</button>
+        </div>
+    </igx-dialog>
+
+    <igx-dialog title="Confirmation" message="Your email will be permanently deleted">
+        <div igxDialogActions>
+            <button igxButton="flat" type="button">Cancel</button>
+            <button igxButton="flat" type="button">OK</button>
+        </div>
+    </igx-dialog>
+
+    <igx-dialog title="Sign In">
+        <div class="sign-in-form">
+            <igx-input-group type="border">
+                <igx-prefix>
+                    <igx-icon>account_circle</igx-icon>
+                </igx-prefix>
+                <label igxLabel for="username">Username</label>
+                <input igxInput id="username" type="text" value="DeanG" />
+            </igx-input-group>
+            <igx-input-group type="border">
+                <igx-prefix>
+                    <igx-icon>lock</igx-icon>
+                </igx-prefix>
+                <label igxLabel for="password">Password</label>
+                <input igxInput id="password" type="password" value="password123" />
+            </igx-input-group>
+        </div>
+        <div igxDialogActions>
+            <button igxButton="flat" type="button">Cancel</button>
+            <button igxButton="flat" type="button">Sign In</button>
+        </div>
+    </igx-dialog>
+</div>
diff --git a/src/app/interactions/dialog/dialog-types/dialog-types.component.scss b/src/app/interactions/dialog/dialog-types/dialog-types.component.scss
new file mode 100644
index 0000000000..d87da090b4
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-types/dialog-types.component.scss
@@ -0,0 +1,45 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.dialog-types {
+    display: flex;
+    align-items: flex-start;
+    gap: 3.75rem;
+}
+
+.dialog-types igx-dialog {
+    --ig-dialog-message-color: var(--ig-gray-700);
+
+    display: block;
+    flex: 0 1 17.5rem;
+    min-width: 0;
+}
+
+.dialog-types igx-dialog ::ng-deep .igx-toggle--hidden {
+    display: block !important;
+}
+
+.dialog-types igx-dialog ::ng-deep .igx-dialog__window {
+    min-width: 0;
+}
+
+.dialog-types [igxButton] {
+    --ig-size: var(--ig-size-medium);
+
+    min-width: auto;
+}
+
+.sign-in-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+}
+
+.sign-in-form igx-input-group {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/src/app/interactions/dialog/dialog-types/dialog-types.component.ts b/src/app/interactions/dialog/dialog-types/dialog-types.component.ts
new file mode 100644
index 0000000000..375233e795
--- /dev/null
+++ b/src/app/interactions/dialog/dialog-types/dialog-types.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group';
+
+@Component({
+    selector: 'app-dialog-types',
+    styleUrls: ['./dialog-types.component.scss'],
+    templateUrl: './dialog-types.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxDialogComponent,
+        IgxDialogActionsDirective,
+        IgxIconComponent,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxLabelDirective,
+        IgxPrefixDirective
+    ]
+})
+export class DialogTypesComponent { }
diff --git a/src/app/interactions/interactions-routes-data.ts b/src/app/interactions/interactions-routes-data.ts
index 1f81a4f4d8..720a71a048 100644
--- a/src/app/interactions/interactions-routes-data.ts
+++ b/src/app/interactions/interactions-routes-data.ts
@@ -4,10 +4,10 @@ export const interactionsRoutesData = {
     'chat-overview-sample': { displayName: 'Chat Overview', parentName: 'Chat' },
     'chat-features-sample': { displayName: 'Chat Features', parentName: 'Chat' },
     'chat-styling-sample': { displayName: 'Chat Styling', parentName: 'Chat' },
-    'dialog-sample-1': { displayName: 'Completed Action Dialog', parentName: 'Dialog' },
-    'dialog-sample-2': { displayName: 'Confirmation Dialog', parentName: 'Dialog' },
-    'dialog-sample-3': { displayName: 'Sign-in form Dialog', parentName: 'Dialog' },
-    'dialog-styling-sample': {displayName: 'Dialog Styling', parentName: 'Dialog' },
+    'dialog-overview': { displayName: 'Dialog Overview', parentName: 'Dialog' },
+    'dialog-types': { displayName: 'Dialog Types', parentName: 'Dialog' },
+    'dialog-styling': { displayName: 'Dialog Styling', parentName: 'Dialog' },
+    'dialog-tailwind-styling': { displayName: 'Dialog Tailwind Styling', parentName: 'Dialog' },
     'slider-sample-1': { displayName: 'Slider Lower and Upper range values', parentName: 'Slider' },
     'slider-sample-2': { displayName: 'Continuous Slider', parentName: 'Slider' },
     'slider-sample-3': { displayName: 'Discrete Slider', parentName: 'Slider' },
diff --git a/src/app/interactions/interactions.routes.ts b/src/app/interactions/interactions.routes.ts
index 5918ee1fae..7563635fe4 100644
--- a/src/app/interactions/interactions.routes.ts
+++ b/src/app/interactions/interactions.routes.ts
@@ -3,10 +3,10 @@ import { Routes } from '@angular/router';
 import { ChatOverviewSampleComponent } from './chat/overview-sample/overview-sample.component';
 import { ChatFeaturesSampleComponent } from './chat/features-sample/features-sample.component';
 import { ChatStylingSampleComponent } from './chat/styling-sample/styling-sample.component';
-import { DialogSample1Component } from './dialog/dialog-sample-1/dialog-sample-1.component';
-import { DialogSample2Component } from './dialog/dialog-sample-2/dialog-sample-2.component';
-import { DialogSample3Component } from './dialog/dialog-sample-3/dialog-sample-3.component';
-import { DialogStylingSampleComponent } from './dialog/dialog-styling-sample/dialog-styling-sample.component';
+import { DialogOverviewComponent } from './dialog/dialog-overview/dialog-overview.component';
+import { DialogTypesComponent } from './dialog/dialog-types/dialog-types.component';
+import { DialogStylingComponent } from './dialog/dialog-styling/dialog-styling.component';
+import { DialogTailwindStylingComponent } from './dialog/dialog-tailwind-styling/dialog-tailwind-styling.component';
 import { DragDialogSampleComponent } from './drag-drop/dialog-sample/drag-dialog-sample.component';
 import { EmailSampleComponent } from './drag-drop/email-sample/email-sample.component';
 import { IconsSampleComponent } from './drag-drop/icons-sample/icons-sample.component';
@@ -87,24 +87,24 @@ export const InteractionsRoutes: Routes = [
         path: 'chat-styling-sample'
     },
     {
-        component: DialogSample1Component,
-        data: interactionsRoutesData['dialog-sample-1'],
-        path: 'dialog-sample-1'
+        component: DialogOverviewComponent,
+        data: interactionsRoutesData['dialog-overview'],
+        path: 'dialog-overview'
     },
     {
-        component: DialogSample2Component,
-        data: interactionsRoutesData['dialog-sample-2'],
-        path: 'dialog-sample-2'
+        component: DialogTypesComponent,
+        data: interactionsRoutesData['dialog-types'],
+        path: 'dialog-types'
     },
     {
-        component: DialogSample3Component,
-        data: interactionsRoutesData['dialog-sample-3'],
-        path: 'dialog-sample-3'
+        component: DialogStylingComponent,
+        data: interactionsRoutesData['dialog-styling'],
+        path: 'dialog-styling'
     },
     {
-        component: DialogStylingSampleComponent,
-        data: interactionsRoutesData['dialog-styling-sample'],
-        path: 'dialog-styling-sample'
+        component: DialogTailwindStylingComponent,
+        data: interactionsRoutesData['dialog-tailwind-styling'],
+        path: 'dialog-tailwind-styling'
     },
     {
         component: SliderSample1Component,