diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
new file mode 100644
index 0000000000..c1c9d5c011
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
@@ -0,0 +1,70 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<BitModal AriaLabel="@AriaLabel"
+          Class="@ClassBuilder.Value"
+          Dir="Dir"
+          @attributes="HtmlAttributes"
+          Id="@Id"
+          IsEnabled="IsEnabled"
+          Style="@StyleBuilder.Value"
+          Visibility="Visibility"
+          AbsolutePosition="AbsolutePosition"
+          Alert="Alert"
+          AutoToggleScroll="AutoToggleScroll"
+          Blocking="Blocking"
+          Classes="Classes"
+          DragElementSelector="@DragElementSelector"
+          Draggable="Draggable"
+          IsOpen="IsOpen"
+          IsOpenChanged="AssignIsOpen"
+          Modeless="Modeless"
+          OnDismiss="OnDismiss"
+          OnOverlayClick="OnOverlayClick"
+          Position="Position"
+          ScrollerSelector="@ScrollerSelector"
+          Styles="Styles">
+    @if (Header is not null || HeaderText is not null || ShowCloseButton)
+    {
+        <div style="@Styles?.HeaderContainer" class="bit-pmd-hcn @Classes?.HeaderContainer">
+            @if (Header is not null)
+            {
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
+                    @Header
+                </div>
+            }
+            else if (HeaderText is not null)
+            {
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
+                    @HeaderText
+                </div>
+            }
+
+            @if (ShowCloseButton)
+            {
+                <button @onclick="CloseModal"
+                        style="@Styles?.CloseButton"
+                        class="bit-pmd-cls @Classes?.CloseButton">
+                    <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
+                </button>
+            }
+        </div>
+    }
+
+    <div style="@Styles?.Body" class="bit-pmd-bdy @Classes?.Body">
+        @(Body ?? ChildContent)
+    </div>
+
+    @if (Footer is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
+            @Footer
+        </div>
+    }
+    else if (FooterText is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
+            @FooterText
+        </div>
+    }
+</BitModal>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs
new file mode 100644
index 0000000000..236d6b1e20
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs
@@ -0,0 +1,186 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProModal : BitComponentBase
+{
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
+    /// <summary>
+    /// When true, the Modal will be positioned absolute instead of fixed.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool AbsolutePosition { get; set; }
+
+    /// <summary>
+    /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
+    /// </summary>
+    [Parameter] public bool? Alert { get; set; }
+
+    /// <summary>
+    /// Enables the auto scrollbar toggle behavior of the Modal.
+    /// </summary>
+    [Parameter] public bool AutoToggleScroll { get; set; }
+
+    /// <summary>
+    /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).
+    /// </summary>
+    [Parameter] public bool Blocking { get; set; }
+
+    /// <summary>
+    /// The alias of the ChildContent.
+    /// </summary>
+    [Parameter] public RenderFragment? Body { get; set; }
+
+    /// <summary>
+    /// The content of the Modal, it can be any custom tag or text.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitModal component.
+    /// </summary>
+    [Parameter] public BitProModalClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The CSS selector of the drag element. by default it's the Modal container.
+    /// </summary>
+    [Parameter] public string? DragElementSelector { get; set; }
+
+    /// <summary>
+    /// Whether the Modal can be dragged around.
+    /// </summary>
+    [Parameter] public bool Draggable { get; set; }
+
+    /// <summary>
+    /// The template used to render the footer section of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? Footer { get; set; }
+
+    /// <summary>
+    /// The text of the footer section of the panel.
+    /// </summary>
+    [Parameter] public string? FooterText { get; set; }
+
+    /// <summary>
+    /// The template used to render the header section of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? Header { get; set; }
+
+    /// <summary>
+    /// The text of the header section of the panel.
+    /// </summary>
+    [Parameter] public string? HeaderText { get; set; }
+
+    /// <summary>
+    /// Makes the Modal height 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullHeight { get; set; }
+
+    /// <summary>
+    /// Makes the Modal width and height 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullSize { get; set; }
+
+    /// <summary>
+    /// Makes the Modal width 100% of its parent container.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullWidth { get; set; }
+
+    /// <summary>
+    /// Whether the Modal is displayed.
+    /// </summary>
+    [Parameter, TwoWayBound]
+    public bool IsOpen { get; set; }
+
+    /// <summary>
+    /// Renders the overlay in full mode that gives it an opaque background.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool ModeFull { get; set; }
+
+    /// <summary>
+    /// Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.
+    /// </summary>
+    [Parameter] public bool Modeless { get; set; }
+
+    /// <summary>
+    /// Removes the default top border of the modal.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool NoBorder { get; set; }
+
+    /// <summary>
+    /// A callback function for when the Modal is dismissed.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
+
+    /// <summary>
+    /// A callback function for when somewhere on the overlay element of the Modal is clicked.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnOverlayClick { get; set; }
+
+    /// <summary>
+    /// Position of the Modal on the screen.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitPosition? Position { get; set; }
+
+    /// <summary>
+    /// Set the element selector for which the Modal disables its scroll if applicable.
+    /// </summary>
+    [Parameter] public string? ScrollerSelector { get; set; }
+
+    /// <summary>
+    /// Shows the close button of the Panel.
+    /// </summary>
+    [Parameter] public bool ShowCloseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the BitModal component.
+    /// </summary>
+    [Parameter] public BitProModalClassStyles? Styles { get; set; }
+
+
+
+    public async Task Open()
+    {
+        if (await AssignIsOpen(true) is false) return;
+
+        StateHasChanged();
+    }
+
+    public async Task Close()
+    {
+        if (await AssignIsOpen(false) is false) return;
+
+        StateHasChanged();
+    }
+
+
+
+    protected override string RootElementClass => "bit-pmd";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => FullSize || FullHeight ? "bit-pmd-fhe" : string.Empty);
+        ClassBuilder.Register(() => FullSize || FullWidth ? "bit-pmd-fwi" : string.Empty);
+
+        ClassBuilder.Register(() => ModeFull ? "bit-pmd-mfl" : string.Empty);
+        ClassBuilder.Register(() => NoBorder ? "" : "bit-pmd-tbr");
+    }
+
+
+
+    private async Task CloseModal(MouseEventArgs e)
+    {
+        if (IsEnabled is false) return;
+
+        if (await AssignIsOpen(false) is false) return;
+
+        await OnDismiss.InvokeAsync(e);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
new file mode 100644
index 0000000000..4c9c5c2091
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
@@ -0,0 +1,91 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-pmd {
+}
+
+.bit-pmd-mfl {
+    .bit-mdl-ovl {
+        background-color: $clr-bg-overlay;
+    }
+}
+
+.bit-pmd-tbr {
+    .bit-mdl-ctn {
+        border-top: spacing(0.5) solid $clr-pri;
+    }
+}
+
+.bit-pmd-fhe {
+    .bit-mdl-ctn {
+        height: 100%;
+        border-top: none;
+    }
+}
+
+.bit-pmd-fwi {
+    .bit-mdl-ctn {
+        width: 100%;
+    }
+
+    .bit-pmd-bdy {
+        max-width: unset;
+    }
+}
+
+.bit-pmd-hcn {
+    top: 0;
+    z-index: 1;
+    display: flex;
+    position: sticky;
+    font-weight: 600;
+    color: $clr-fg-pri;
+    overflow-wrap: anywhere;
+    background-color: $clr-bg-pri;
+    padding: spacing(2) spacing(2) 0;
+}
+
+.bit-pmd-hdr {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-size: spacing(2.5);
+}
+
+.bit-pmd-cls {
+    display: flex;
+    cursor: pointer;
+    width: spacing(5);
+    height: spacing(5);
+    align-items: center;
+    justify-content: center;
+    font-size: spacing(1.75);
+    border-radius: spacing(0.25);
+    background-color: transparent;
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:active {
+        color: $clr-fg-pri-active;
+        background-color: $clr-bg-pri-active;
+    }
+}
+
+.bit-pmd-bdy {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: spacing(2);
+    max-width: spacing(75);
+}
+
+.bit-pmd-fcn {
+    bottom: 0;
+    z-index: 1;
+    position: sticky;
+    background-color: $clr-bg-pri;
+    padding: 0 spacing(2) spacing(2) spacing(2);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs
new file mode 100644
index 0000000000..39568f6b77
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cs
@@ -0,0 +1,34 @@
+namespace Bit.BlazorUI;
+
+public class BitProModalClassStyles : BitModalClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the header container of the BitProModal.
+    /// </summary>
+    public string? HeaderContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the header of the BitProModal.
+    /// </summary>
+    public string? Header { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProModal.
+    /// </summary>
+    public string? CloseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProModal.
+    /// </summary>
+    public string? CloseIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the body of the BitProModal.
+    /// </summary>
+    public string? Body { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the footer of the BitProModal.
+    /// </summary>
+    public string? Footer { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
index cc7b077732..69d36664af 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
@@ -8,14 +8,14 @@ public partial class BitProPanel : BitComponentBase
     [Parameter] public bool AutoToggleScroll { get; set; }
 
     /// <summary>
-    /// The alias of the ChildContent.
+    /// Whether the panel can be dismissed by clicking outside of it on the overlay.
     /// </summary>
-    [Parameter] public RenderFragment? Body { get; set; }
+    [Parameter] public bool Blocking { get; set; }
 
     /// <summary>
-    /// Whether the panel can be dismissed by clicking outside of it on the overlay.
+    /// The alias of the ChildContent.
     /// </summary>
-    [Parameter] public bool Blocking { get; set; }
+    [Parameter] public RenderFragment? Body { get; set; }
 
     /// <summary>
     /// The content of the panel.
@@ -56,7 +56,8 @@ public partial class BitProPanel : BitComponentBase
     /// <summary>
     /// Renders the overlay in full mode that gives it an opaque background.
     /// </summary>
-    [Parameter] public bool ModeFull { get; set; }
+    [Parameter, ResetClassBuilder]
+    public bool ModeFull { get; set; }
 
     /// <summary>
     /// Removes the overlay element of the panel.
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
index ca46bd9aef..686e6e4d58 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
@@ -1,4 +1,5 @@
 @import "../Components/DataGrid/BitDataGrid.scss";
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
 @import "../Components/PdfReader/BitPdfReader.scss";
+@import "../Components/ProModal/BitProModal.scss";
 @import "../Components/ProPanel/BitProPanel.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs
index eb3b8ed478..950c89e54c 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalTests.cs
@@ -17,7 +17,7 @@ public void BitModalIsAlertTest(bool? isAlert)
     {
         var com = RenderComponent<BitModal>(parameters =>
         {
-            parameters.Add(p => p.IsAlert, isAlert);
+            parameters.Add(p => p.Alert, isAlert);
             parameters.Add(p => p.IsOpen, true);
         });
 
@@ -82,64 +82,6 @@ public void BitModalIsOpenTest(bool isOpen)
         Assert.AreEqual(isOpen ? 1 : 0, bitModel.Count);
     }
 
-    [DataTestMethod,
-        DataRow(null),
-        DataRow(""),
-        DataRow("Test-S-A-Id")
-    ]
-    public void BitModalSubtitleAriaIdTest(string subtitleAriaId)
-    {
-        var com = RenderComponent<BitModal>(parameters =>
-        {
-            parameters.Add(p => p.SubtitleAriaId, subtitleAriaId);
-            parameters.Add(p => p.IsOpen, true);
-        });
-
-        var element = com.Find(".bit-mdl");
-
-        if (subtitleAriaId == null)
-        {
-            Assert.IsFalse(element.HasAttribute("aria-describedby"));
-        }
-        else if (subtitleAriaId == string.Empty)
-        {
-            Assert.AreEqual(element.Attributes["aria-describedby"].Value, string.Empty);
-        }
-        else
-        {
-            Assert.AreEqual(element.Attributes["aria-describedby"].Value, subtitleAriaId);
-        }
-    }
-
-    [DataTestMethod,
-        DataRow(null),
-        DataRow(""),
-        DataRow("Test-T-A-Id")
-    ]
-    public void BitModalTitleAriaIdTest(string titleAriaId)
-    {
-        var com = RenderComponent<BitModal>(parameters =>
-        {
-            parameters.Add(p => p.TitleAriaId, titleAriaId);
-            parameters.Add(p => p.IsOpen, true);
-        });
-
-        var element = com.Find(".bit-mdl");
-
-        if (titleAriaId == null)
-        {
-            Assert.IsFalse(element.HasAttribute("aria-labelledby"));
-        }
-        else if (titleAriaId == string.Empty)
-        {
-            Assert.AreEqual(element.Attributes["aria-labelledby"].Value, string.Empty);
-        }
-        else
-        {
-            Assert.AreEqual(element.Attributes["aria-labelledby"].Value, titleAriaId);
-        }
-    }
-
     [TestMethod]
     public void BitModalContentTest()
     {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs
index 5ae699aba7..da8c189047 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs
@@ -217,16 +217,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (IsDraggable)
             {
-                _ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector());
+                _ = _js.DragDropsSetup(_containerId, GetDragElementSelector());
             }
             else
             {
-                _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+                _ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
             }
         }
         else
         {
-            _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+            _ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
         }
 
         _offsetTop = 0;
@@ -329,7 +329,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing)
 
         try
         {
-            await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+            await _js.DragDropsRemove(_containerId, GetDragElementSelector());
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss
index a91c080711..85e6aa8966 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.scss
@@ -21,14 +21,6 @@
     }
 }
 
-.bit-dlg-nta {
-    touch-action: none;
-
-    * {
-        touch-action: none;
-    }
-}
-
 .bit-dlg-abs {
     z-index: unset;
     position: absolute;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor
index e9638db9a2..42222bcfd8 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor
@@ -8,8 +8,6 @@
          style="@StyleBuilder.Value"
          class="@ClassBuilder.Value"
          dir="@ModalParameters.Dir?.ToString().ToLower()"
-         aria-labelledby="@ModalParameters.TitleAriaId"
-         aria-describedby="@ModalParameters.SubtitleAriaId"
          aria-modal="@((ModalParameters.Modeless is false).ToString().ToLower())"
          role="@GetRole()">
         @if (ModalParameters.Modeless is false)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs
index c19d8f49bb..6326f03afa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs
@@ -16,10 +16,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable
     private BitModalParameters modalParameters = new();
 
 
-    /// <summary>
-    /// Enables the auto scrollbar toggle behavior of the Modal.
-    /// </summary>
-    [Parameter] public bool AutoToggleScroll { get; set; }
 
     /// <summary>
     /// When true, the Modal will be positioned absolute instead of fixed.
@@ -27,6 +23,16 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable
     [Parameter, ResetClassBuilder]
     public bool AbsolutePosition { get; set; }
 
+    /// <summary>
+    /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
+    /// </summary>
+    [Parameter] public bool? Alert { get; set; }
+
+    /// <summary>
+    /// Enables the auto scrollbar toggle behavior of the Modal.
+    /// </summary>
+    [Parameter] public bool AutoToggleScroll { get; set; }
+
     /// <summary>
     /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).
     /// </summary>
@@ -52,29 +58,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable
     /// </summary>
     [Parameter] public bool Draggable { get; set; }
 
-    /// <summary>
-    /// Makes the Modal height 100% of its parent container.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public bool FullHeight { get; set; }
-
-    /// <summary>
-    /// Makes the Modal width and height 100% of its parent container.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public bool FullSize { get; set; }
-
-    /// <summary>
-    /// Makes the Modal width 100% of its parent container.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public bool FullWidth { get; set; }
-
-    /// <summary>
-    /// Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
-    /// </summary>
-    [Parameter] public bool? IsAlert { get; set; }
-
     /// <summary>
     /// Whether the Modal is displayed.
     /// </summary>
@@ -112,16 +95,6 @@ public partial class BitModal : BitComponentBase, IAsyncDisposable
     /// </summary>
     [Parameter] public BitModalClassStyles? Styles { get; set; }
 
-    /// <summary>
-    /// ARIA id for the subtitle of the Modal, if any.
-    /// </summary>
-    [Parameter] public string? SubtitleAriaId { get; set; }
-
-    /// <summary>
-    /// ARIA id for the title of the Modal, if any.
-    /// </summary>
-    [Parameter] public string? TitleAriaId { get; set; }
-
 
 
     protected override string RootElementClass => "bit-mdl";
@@ -133,9 +106,6 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => ModalParameters.AbsolutePosition ? "bit-mdl-abs" : string.Empty);
 
-        ClassBuilder.Register(() => ModalParameters.FullSize || ModalParameters.FullHeight ? "bit-mdl-fhe" : string.Empty);
-        ClassBuilder.Register(() => ModalParameters.FullSize || ModalParameters.FullWidth ? "bit-mdl-fwi" : string.Empty);
-
         ClassBuilder.Register(() => ModalParameters.Position switch
         {
             BitPosition.Center => "bit-mdl-ctr",
@@ -179,16 +149,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (ModalParameters.Draggable)
             {
-                _ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector());
+                _ = _js.DragDropsSetup(_containerId, GetDragElementSelector());
             }
             else
             {
-                _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+                _ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
             }
         }
         else
         {
-            _ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+            _ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
         }
 
         _offsetTop = 0;
@@ -225,7 +195,7 @@ private string GetDragElementSelector()
 
     private string GetRole()
     {
-        return (ModalParameters.IsAlert ?? (ModalParameters.Blocking && ModalParameters.Modeless is false)) ? "alertdialog" : "dialog";
+        return (ModalParameters.Alert ?? (ModalParameters.Blocking && ModalParameters.Modeless is false)) ? "alertdialog" : "dialog";
     }
 
     private async Task ToggleScroll(bool isOpen)
@@ -250,7 +220,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing)
         try
         {
             await ToggleScroll(false);
-            await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
+            await _js.DragDropsRemove(_containerId, GetDragElementSelector());
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss
index 370c4664f5..9b76c851cf 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss
@@ -19,14 +19,6 @@
     transition: opacity 300ms ease 0s;
 }
 
-.bit-mdl-nta {
-    touch-action: none;
-
-    * {
-        touch-action: none;
-    }
-}
-
 .bit-mdl-abs {
     z-index: unset;
     position: absolute;
@@ -36,7 +28,6 @@
     inset: 0;
     z-index: 0;
     position: absolute;
-    background-color: $clr-bg-overlay;
 }
 
 .bit-mdl-ctn {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs
deleted file mode 100644
index 4bbdb16006..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalJsRuntimeExtensions.cs
+++ /dev/null
@@ -1,14 +0,0 @@
-namespace Bit.BlazorUI;
-
-internal static class BitModalJsRuntimeExtensions
-{
-    internal static ValueTask BitModalSetupDragDrop(this IJSRuntime js, string id, string dragElementSelector)
-    {
-        return js.InvokeVoid("BitBlazorUI.Modal.setupDragDrop", id, dragElementSelector);
-    }
-
-    internal static ValueTask BitModalRemoveDragDrop(this IJSRuntime js, string id, string dragElementSelector)
-    {
-        return js.InvokeVoid("BitBlazorUI.Modal.removeDragDrop", id, dragElementSelector);
-    }
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs
index e9cd0da410..c54074c5d5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs
@@ -21,13 +21,7 @@ public class BitModalParameters
 
     public bool Draggable { get { return _modal?.Draggable ?? field; } set; }
 
-    public bool FullHeight { get { return _modal?.FullHeight ?? field; } set; }
-
-    public bool FullSize { get { return _modal?.FullSize ?? field; } set; }
-
-    public bool FullWidth { get { return _modal?.FullWidth ?? field; } set; }
-
-    public bool? IsAlert { get { return _modal?.IsAlert ?? field; } set; }
+    public bool? Alert { get { return _modal?.Alert ?? field; } set; }
 
     public bool Modeless { get { return _modal?.Modeless ?? field; } set; }
 
@@ -63,10 +57,6 @@ public EventCallback<MouseEventArgs> OnOverlayClick
 
     public BitModalClassStyles? Styles { get; set; }
 
-    public string? SubtitleAriaId { get { return _modal?.SubtitleAriaId ?? field; } set; }
-
-    public string? TitleAriaId { get { return _modal?.TitleAriaId ?? field; } set; }
-
 
     private BitModal? _modal;
     public void SetModal(BitModal modal)
@@ -94,10 +84,7 @@ public void SetModal(BitModal modal)
             Classes = BitModalClassStyles.Merge(params1.Classes, params2.Classes),
             DragElementSelector = params1.DragElementSelector ?? params2.DragElementSelector,
             Draggable = params1.Draggable || params2.Draggable,
-            FullHeight = params1.FullHeight || params2.FullHeight,
-            FullSize = params1.FullSize || params2.FullSize,
-            FullWidth = params1.FullWidth || params2.FullWidth,
-            IsAlert = params1.IsAlert ?? params2.IsAlert,
+            Alert = params1.Alert ?? params2.Alert,
             Modeless = params1.Modeless || params2.Modeless,
             OnDismiss = EventCallback.Factory.Create<MouseEventArgs>(new object(), async () =>
             {
@@ -112,8 +99,6 @@ public void SetModal(BitModal modal)
             Position = params1.Position ?? params2.Position,
             ScrollerSelector = params1.ScrollerSelector ?? params2.ScrollerSelector,
             Styles = BitModalClassStyles.Merge(params1.Styles, params2.Styles),
-            SubtitleAriaId = params1.SubtitleAriaId ?? params2.SubtitleAriaId,
-            TitleAriaId = params1.TitleAriaId ?? params2.TitleAriaId,
         };
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs
new file mode 100644
index 0000000000..c6c9d53a6c
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DragDropsJsRuntimeExtensions.cs
@@ -0,0 +1,14 @@
+namespace Bit.BlazorUI;
+
+internal static class DragDropsJsRuntimeExtensions
+{
+    internal static ValueTask DragDropsSetup(this IJSRuntime js, string id, string dragElementSelector)
+    {
+        return js.InvokeVoid("BitBlazorUI.DragDrops.setup", id, dragElementSelector);
+    }
+
+    internal static ValueTask DragDropsRemove(this IJSRuntime js, string id, string dragElementSelector)
+    {
+        return js.InvokeVoid("BitBlazorUI.DragDrops.remove", id, dragElementSelector);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts
similarity index 79%
rename from src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts
rename to src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts
index c07eaf45c3..862567560d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/DragDrop.ts
@@ -1,14 +1,17 @@
 namespace BitBlazorUI {
-    export class Modal {
+    export class DragDrops {
         private static _dragDropListeners: any = {};
 
-        public static setupDragDrop(containerId: string, dragElementSelector: string) {
-            Modal.removeDragDrop(containerId, dragElementSelector);
+        public static setup(id: string, dragElementSelector: string) {
+            DragDrops.remove(id, dragElementSelector);
             const listeners: any = {};
-            Modal._dragDropListeners[containerId] = listeners;
+            DragDrops._dragDropListeners[id] = listeners;
 
-            const element = document.getElementById(containerId)! as HTMLElement;
-            const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;
+            const element = document.getElementById(id) as HTMLElement;
+            if (!element) return;
+
+            const dragElement = document.querySelector(dragElementSelector) as HTMLElement;
+            if (!dragElement) return;
 
             let x = 0;
             let y = 0;
@@ -16,7 +19,7 @@
             listeners['pointerdown'] = handlePointerDown;
             dragElement.addEventListener('pointerdown', handlePointerDown);
             dragElement.style.cursor = 'move';
-            dragElement.classList.add('bit-mdl-nta');
+            dragElement.classList.add('bit-nta');
 
             function handlePointerDown(e: PointerEvent) {
                 //e.preventDefault();
@@ -55,15 +58,15 @@
             }
         }
 
-        public static removeDragDrop(id: string, dragElementSelector: string) {
-            const listeners = Modal._dragDropListeners[id];
+        public static remove(id: string, dragElementSelector: string) {
+            const listeners = DragDrops._dragDropListeners[id];
             if (!listeners) return;
 
             const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;
 
             dragElement.removeEventListener('pointerdown', listeners['pointerdown']);
             dragElement.style.cursor = '';
-            dragElement.classList.remove('bit-mdl-nta');
+            dragElement.classList.remove('bit-nta');
 
             document.removeEventListener('pointermove', listeners['pointermove']);
 
@@ -74,7 +77,7 @@
             delete listeners['pointerdown'];
             delete listeners['pointermove'];
             delete listeners['pointerup'];
-            delete Modal._dragDropListeners[id];
+            delete DragDrops._dragDropListeners[id];
         }
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
index feee193b9f..e39212f8dc 100644
--- a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
@@ -3,18 +3,6 @@
 
 $html-font-size: 16px;
 
-@function stripUnit($value) {
-    @return math.div($value, ($value * 0 + 1));
-}
-
-@function em2($pxValue, $base-font-size: $html-font-size) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($base-font-size))}em;
-}
-
-@function rem2($pxValue) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($html-font-size))}rem;
-}
-
 @function spacing($spacingValue) {
     @return calc($spacing-scaling-factor * $spacingValue);
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
index 09ae31d958..34cbd760b3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
@@ -9,7 +9,16 @@ button {
     outline: none;
 }
 
-// Prevent text selection by user
+// none touch action
+.bit-nta {
+    touch-action: none;
+
+    * {
+        touch-action: none;
+    }
+}
+
+// none text selection
 .bit-nts {
     user-select: none;
     -ms-user-select: none;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
index ffef99e155..395ca784f1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -5,21 +5,35 @@
         <BitText Typography="BitTypography.H3" Class="title">@ComponentName</BitText>
         <section id="overview-section" class="page-section">
             <BitText Typography="BitTypography.Subtitle1">
-                @ComponentDescription
+                @if (DescriptionTemplate is not null)
+                {
+                    @DescriptionTemplate
+                }
+                else
+                {
+                    @ComponentDescription
+                }
             </BitText>
         </section>
 
-        @if (Notes.HasValue())
+        @if (NotesTemplate is not null || Notes.HasValue())
         {
             <section id="notes-section" class="page-section">
                 <BitText Typography="BitTypography.H4" Class="subtitle">Notes</BitText>
-                @Notes
+                @if (NotesTemplate is not null)
+                {
+                    @NotesTemplate
+                }
+                else
+                {
+                    @Notes
+                }
             </section>
         }
 
         <section id="usage-section" class="page-section">
             <BitText Typography="BitTypography.H4" Class="subtitle">Usage</BitText>
-            @ChildContent
+            @(Body ?? ChildContent)
         </section>
 
         <section id="api-section" class="page-section">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
index 0491a6bfe9..9e03e60774 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
@@ -5,6 +5,9 @@ public partial class ComponentDemo
     [Parameter] public string ComponentName { get; set; } = default!;
     [Parameter] public string? ComponentDescription { get; set; }
     [Parameter] public string? Notes { get; set; }
+    [Parameter] public RenderFragment? DescriptionTemplate { get; set; }
+    [Parameter] public RenderFragment? NotesTemplate { get; set; }
+    [Parameter] public RenderFragment? Body { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public List<ComponentParameter> ComponentParameters { get; set; } = [];
     [Parameter] public List<ComponentSubClass> ComponentSubClasses { get; set; } = [];
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor
new file mode 100644
index 0000000000..0b8973d133
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor
@@ -0,0 +1,478 @@
+@page "/components/promodal"
+
+<PageOutlet Url="components/promodal"
+            Title="ProModal"
+            Description="promodal component of the bit BlazorUI components" />
+
+<ComponentDemo ComponentName="ProModal"
+               ComponentDescription="ProModals are advanced modals with more practical features that can take care of a wider range of requirements."
+               ComponentParameters="componentParameters"
+               ComponentSubClasses="componentSubClasses"
+               ComponentSubEnums="componentSubEnums">
+    <NotesTemplate>
+        The BitProPanel is the advanced version of the <BitLink Href="components/modal">BitModal</BitLink> component.
+    </NotesTemplate>
+    <Body>
+        <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+            <ExamplePreview>
+                <BitButton OnClick="() => isOpenBasic = true">Open ProModal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenBasic">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Header & Footer" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+            <ExamplePreview>
+                <BitButton OnClick="() => isProModalWithHeaderTextOpen = true">Open ProModal with HeaderText</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithHeaderTextOpen" HeaderText="BitProModal with HeaderText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isProModalWithHeaderOpen = true">Open ProModal with Header</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithHeaderOpen">
+                    <Header>
+                        <div>
+                            <div style="margin-bottom:4px">BitProModal with Header</div>
+                            <BitSearchBox Placeholder="Search here..." />
+                        </div>
+                    </Header>
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                </BitProModal>
+                <br /><br /><br /><br />
+                <BitButton OnClick="() => isProModalWithFooterTextOpen = true">Open ProModal with FooterText</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithFooterTextOpen" FooterText="BitProModal with FooterText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isProModalWithFooterOpen = true">Open ProModal with Footer</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithFooterOpen">
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                    <Footer>
+                        <h3 style="margin-bottom:4px">BitProModal with Footer</h3>
+                        <BitButton OnClick="() => isProModalWithFooterOpen = false">Save</BitButton>
+                        <BitButton OnClick="() => isProModalWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
+                    </Footer>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+            <ExamplePreview>
+                <div>BitProModal has some advanced options to be customized.</div>
+                <br /><br />
+                <BitButton OnClick="() => isCloseButtonProModalOpen = true">Open ProModal with ShowCloseButton</BitButton>
+                <BitProModal @bind-IsOpen="isCloseButtonProModalOpen" HeaderText="ShowCloseButton" ShowCloseButton>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isBlockingProModalOpen = true">Open ProModal with Blocking</BitButton>
+                <BitProModal @bind-IsOpen="isBlockingProModalOpen" HeaderText="Blocking" ShowCloseButton Blocking>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isModelessProModalOpen = true">Open ProModal with Modeless</BitButton>
+                <BitProModal @bind-IsOpen="isModelessProModalOpen" HeaderText="Modeless" ShowCloseButton Modeless>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isModeFullProModalOpen = true">Open ProModal with ModeFull</BitButton>
+                <BitProModal @bind-IsOpen="isModeFullProModalOpen" HeaderText="ModeFull" ModeFull>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isAutoToggleScrollProModalOpen = true">Open ProModal with AutoToggleScroll</BitButton>
+                <BitProModal @bind-IsOpen="isAutoToggleScrollProModalOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isNoBorderProModalOpen = true">Open ProModal with NoBorder</BitButton>
+                <BitProModal @bind-IsOpen="isNoBorderProModalOpen" HeaderText="NoBorder" NoBorder>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Size" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+            <ExamplePreview>
+                <div>BitProModal has size related parameters to make it occupy available screen width/height or both.</div>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullSize = true">Open ProModal with FullSize</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullSize" FullSize="isFullSize" HeaderText="FullSize ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullSize" OnText="Restore" OffText="FullSize" />
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullWidth = true">Open ProModal with FullWidth</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullWidth" FullWidth="isFullWidth" HeaderText="FullWidth ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullWidth" OnText="Restore" OffText="FullWidth" />
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullHeight = true">Open ProModal with FullHeight</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullHeight" FullHeight="isFullHeight" HeaderText="FullHeight ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullHeight" OnText="Restore" OffText="FullHeight" />
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="AbsolutePosition" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+            <ExamplePreview>
+                <div>BitProModal has an absolute position option to further customize its location.</div><br />
+                <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal</BitButton>
+                <br /><br />
+                <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
+                <br /><br />
+                <div class="relative-container" id="modal-scroller">
+                    <BitProModal @bind-IsOpen="isOpenAbsolutePosition" HeaderText="AbsolutePosition" AbsolutePosition>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis.
+                    </BitProModal>
+
+                    <BitProModal @bind-IsOpen="isOpenScrollerSelector"
+                                 HeaderText="AbsolutePosition with AutoToggleScroll and ScrollerSelector"
+                                 AbsolutePosition AutoToggleScroll ScrollerSelector="#modal-scroller">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis.
+                    </BitProModal>
+
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Position" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+            <ExamplePreview>
+                <div>To set the ProModal position on the page you can use the Position parameter.</div><br />
+                <div class="position-btn-container">
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopLeft)">Top Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopCenter)">Top Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopRight)">Top Right</BitButton>
+                    </div>
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterLeft)">Center Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.Center)">Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterRight)">Center Right</BitButton>
+                    </div>
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomLeft)">Bottom Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomCenter)">Bottom Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomRight)">Bottom Right</BitButton>
+                    </div>
+                </div>
+                <BitProModal @bind-IsOpen="isOpenPosition" Position="position">
+                    <Header>
+                        Position: @position
+                    </Header>
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Draggable" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+            <ExamplePreview>
+                <div>The Draggable parameter of the BitProModal allows users to move the modal around the screen.</div><br />
+                <BitButton OnClick="() => isOpenDraggable = true">Open Modal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenDraggable" Draggable>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Draggable</h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
+                </BitProModal>
+                <br /><br /><br /><br />
+                <div>Using custom drag element:</div><br />
+                <BitButton OnClick="() => isOpenDraggableSelector = true">Open Modal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenDraggableSelector" Draggable DragElementSelector="#modal-drag-element">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3 id="modal-drag-element" style="color: white; background: brown; padding: 1rem">
+                            Draggable with DragElementSelector
+                        </h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+            <ExamplePreview>
+                <div>
+                    <div>Using css related parameter users can further customize the modal based on their needs.</div>
+                    <br /><br />
+                    <div>Component's Style & Class:</div><br />
+                    <BitButton OnClick="() => isOpenStyle = true">Open styled modal</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenStyle" Style="box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Styled modal</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                    <br /><br />
+                    <BitButton OnClick="() => isOpenClass = true">Open classed modal</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenClass" Class="custom-class">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Classed modal</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+
+                    <br /><br /><br /><br />
+
+                    <div><b>Styles</b> & <b>Classes</b>:</div><br />
+                    <BitButton OnClick="() => isOpenStyles = true">Open modal Styles</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenStyles" Styles="@(new() { Overlay = "background-color: #4776f433;", Content = "box-shadow: 0 0 1rem tomato;" })">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Modal with Styles</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                    <br /><br />
+                    <BitButton OnClick="() => isOpenClasses = true">Open modal Classes</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenClasses" Classes="@(new() { Root = "custom-root", Overlay = "custom-overlay", Content = "custom-content" })">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Modal with Classes</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+            <ExamplePreview>
+                <div>Use BitProModal in right-to-left (RTL).</div><br />
+                <BitButton Dir="BitDir.Rtl" OnClick="() => isOpenRtl = true">باز کردن مُدال</BitButton>
+                <BitProModal Dir="BitDir.Rtl" @bind-IsOpen="isOpenRtl">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>مدال راست به چپ</h3>
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                    </div>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+    </Body>
+</ComponentDemo>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs
new file mode 100644
index 0000000000..e0cf8ba5ec
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs
@@ -0,0 +1,401 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProModal;
+
+public partial class BitProModalDemo
+{
+    private readonly List<ComponentParameter> componentParameters =
+    [
+        new()
+        {
+            Name = "AbsolutePosition",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When true, the Modal will be positioned absolute instead of fixed.",
+        },
+        new()
+        {
+            Name = "Alert",
+            Type = "bool?",
+            DefaultValue = "null",
+            Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.",
+        },
+        new()
+        {
+            Name = "AutoToggleScroll",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Enables the auto scrollbar toggle behavior of the Modal.",
+        },
+        new()
+        {
+            Name = "Blocking",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).",
+        },
+        new()
+        {
+            Name = "ChildContent",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The content of Modal, It can be Any custom tag or a text.",
+        },
+        new()
+        {
+            Name = "Classes",
+            Type = "BitModalClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS classes for different parts of the BitModal component.",
+            LinkType = LinkType.Link,
+            Href = "#modal-class-styles",
+        },
+        new()
+        {
+            Name = "DragElementSelector",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The CSS selector of the drag element. by default the Modal container is the drag element.",
+        },
+        new()
+        {
+            Name = "Draggable",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the Modal can be dragged around.",
+        },
+        new()
+        {
+            Name = "FullHeight",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Makes the Modal height 100% of its parent container.",
+        },
+        new()
+        {
+            Name = "FullSize",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Makes the Modal width and height 100% of its parent container.",
+        },
+        new()
+        {
+            Name = "FullWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Makes the Modal width 100% of its parent container.",
+        },
+        new()
+        {
+            Name = "IsOpen",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the Modal is displayed.",
+        },
+        new()
+        {
+            Name = "Modeless",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.",
+        },
+        new()
+        {
+            Name = "OnDismiss",
+            Type = "EventCallback<MouseEventArgs>",
+            Description = "A callback function for when the Modal is dismissed.",
+        },
+        new()
+        {
+            Name = "OnOverlayClick",
+            Type = "EventCallback<MouseEventArgs>",
+            Description = "A callback function for when somewhere on the overlay element of the Modal is clicked.",
+        },
+        new()
+        {
+            Name = "Position",
+            Type = "BitPosition?",
+            DefaultValue = "null",
+            Description = "Position of the Modal on the screen.",
+            LinkType = LinkType.Link,
+            Href = "#position-enum",
+        },
+        new()
+        {
+            Name = "ScrollerSelector",
+            Type = "string",
+            DefaultValue = "body",
+            Description = "Set the element selector for which the Modal disables its scroll if applicable.",
+        },
+        new()
+        {
+            Name = "Styles",
+            Type = "BitModalClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS styles for different parts of the BitModal component.",
+            LinkType = LinkType.Link,
+            Href = "#modal-class-styles",
+        }
+    ];
+
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        new()
+        {
+            Id = "modal-class-styles",
+            Title = "BitModalClassStyles",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Root",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the root element of the BitModal."
+               },
+               new()
+               {
+                   Name = "Overlay",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the overlay of the BitModal."
+               },
+               new()
+               {
+                   Name = "Content",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the content of the BitModal."
+               }
+            ]
+        }
+    ];
+
+    private readonly List<ComponentSubEnum> componentSubEnums =
+    [
+        new()
+        {
+            Id = "position-enum",
+            Name = "BitPosition",
+            Description = "",
+            Items =
+            [
+                new() { Name = "Center", Value = "0" },
+                new() { Name = "TopLeft", Value = "1" },
+                new() { Name = "TopCenter", Value = "2" },
+                new() { Name = "TopRight", Value = "3" },
+                new() { Name = "CenterLeft", Value = "4" },
+                new() { Name = "CenterRight", Value = "5" },
+                new() { Name = "BottomLeft", Value = "6" },
+                new() { Name = "BottomCenter", Value = "7" },
+                new() { Name = "BottomRight", Value = "8" }
+            ]
+        }
+    ];
+
+
+
+    private bool isOpenBasic;
+
+    private bool isProModalWithHeaderTextOpen;
+    private bool isProModalWithHeaderOpen;
+    private bool isProModalWithFooterTextOpen;
+    private bool isProModalWithFooterOpen;
+
+    private bool isCloseButtonProModalOpen;
+    private bool isBlockingProModalOpen;
+    private bool isModelessProModalOpen;
+    private bool isModeFullProModalOpen;
+    private bool isAutoToggleScrollProModalOpen;
+    private bool isNoBorderProModalOpen;
+
+    private bool isFullSize;
+    private bool isOpenFullSize;
+    private bool isFullWidth;
+    private bool isOpenFullWidth;
+    private bool isFullHeight;
+    private bool isOpenFullHeight;
+
+    private bool isOpenAbsolutePosition;
+    private bool isOpenScrollerSelector;
+
+    private bool isOpenPosition;
+    private BitPosition position;
+    private void OpenModalInPosition(BitPosition positionValue)
+    {
+        isOpenPosition = true;
+        position = positionValue;
+    }
+
+    private bool isOpenDraggable;
+    private bool isOpenDraggableSelector;
+
+    private bool isOpenStyle;
+    private bool isOpenClass;
+    private bool isOpenStyles;
+    private bool isOpenClasses;
+
+    private bool isOpenRtl;
+
+
+
+    private readonly string example1RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example1CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example2RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example2CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example3RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example3CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example4RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example4CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example5RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example5CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example6RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example6CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example7RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example7CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example8RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example8CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example9RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example9CsharpCode = @"
+private bool isOpenBasic;";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss
new file mode 100644
index 0000000000..a9d42776c2
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss
@@ -0,0 +1,45 @@
+.relative-container {
+    width: 100%;
+    height: 400px;
+    overflow: auto;
+    margin-top: 1rem;
+    position: relative;
+    border: 2px lightgreen solid;
+}
+
+.position-btn-container {
+    gap: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+
+    div {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+::deep {
+    .position-button {
+        width: 130px;
+    }
+
+    .custom-class {
+        border: 0.5rem solid tomato;
+        background-color: darkgoldenrod;
+    }
+
+    .custom-root {
+        border: 0.25rem solid #0054C6;
+    }
+
+    .custom-overlay {
+        background-color: #ffbd5a66;
+    }
+
+    .custom-content {
+        margin: 1rem;
+        box-shadow: 0 0 10rem purple;
+        border-end-end-radius: 1rem;
+        border-end-start-radius: 1rem;
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
index afd142cdd1..3a16b05cc9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
@@ -101,8 +101,7 @@
 
         <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
             <ExamplePreview>
-                <div>BitProPanel has some advanced options to be customized.</div>
-                <br /><br />
+                <div>BitProPanel has some advanced options to be customized.</div><br />
                 <BitButton OnClick="() => bitProPanelRef.Open()">Open ProPanel with ShowCloseButton</BitButton>
                 <BitProPanel @ref="bitProPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
                     <div style="width:300px">
@@ -111,7 +110,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isBlockingProPanelOpen = true">Open ProPanel with Blocking</BitButton>
                 <BitProPanel @bind-IsOpen="isBlockingProPanelOpen" HeaderText="Blocking" ShowCloseButton Blocking>
                     <div style="width:300px">
@@ -120,7 +119,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isModelessProPanelOpen = true">Open ProPanel with Modeless</BitButton>
                 <BitProPanel @bind-IsOpen="isModelessProPanelOpen" HeaderText="Modeless" ShowCloseButton Modeless>
                     <div style="width:300px">
@@ -129,7 +128,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isModeFullProPanelOpen = true">Open ProPanel with ModeFull</BitButton>
                 <BitProPanel @bind-IsOpen="isModeFullProPanelOpen" HeaderText="ModeFull" ShowCloseButton ModeFull>
                     <div style="width:300px">
@@ -138,7 +137,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isAutoToggleScrollProPanelOpen = true">Open ProPanel with AutoToggleScroll</BitButton>
                 <BitProPanel @bind-IsOpen="isAutoToggleScrollProPanelOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
                     <div style="width:300px">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs
index 7cac770d07..89b8f9e7a1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs
@@ -12,13 +12,6 @@ public partial class BitProPanelDemo
             Description = "Enables the auto scrollbar toggle behavior of the panel.",
         },
         new()
-        {
-            Name = "Body",
-            Type = "RenderFragment?",
-            DefaultValue = "null",
-            Description = "The alias of the ChildContent.",
-        },
-        new()
         {
             Name = "Blocking",
             Type = "bool",
@@ -26,6 +19,13 @@ public partial class BitProPanelDemo
             Description = "Whether the panel can be dismissed by clicking outside of it on the overlay.",
         },
         new()
+        {
+            Name = "Body",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The alias of the ChildContent.",
+        },
+        new()
         {
             Name = "ChildContent",
             Type = "RenderFragment?",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
index 683e56b935..c5e7190147 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
@@ -13,7 +13,7 @@
         <ExamplePreview>
             <BitButton OnClick="() => isOpenBasic = true">Open Modal</BitButton>
             <BitModal @bind-IsOpen="isOpenBasic">
-                <div style="padding:1rem;max-width:40rem">
+                <div style="padding: 1rem; max-width: 40rem">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                     amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
                     sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -27,64 +27,68 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Customizing content" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+    <ComponentExampleBox Title="Options" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
-            <BitButton OnClick="() => isOpenCustomContent = true">Open Modal</BitButton>
-            <BitModal @bind-IsOpen="isOpenCustomContent">
-                <div class="modal-header">
-                    <span class="modal-header-text">Lorem Ipsum</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenCustomContent = false" IconName="@BitIconName.ChromeClose" Title="Close" />
+            <div>BitModal has some options.</div><br />
+            <BitButton OnClick="() => isOpenBlocking = true">Open Modal (Blocking)</BitButton>
+            <BitModal @bind-IsOpen="isOpenBlocking" Blocking>
+                <div style="padding: 1rem; max-width: 40rem">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitButton OnClick="() => isOpenBlocking = false">Close</BitButton>
                 </div>
-                <div class="modal-body">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                        efficitur.
-                    </p>
-                    <p>
-                        Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus
-                        faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a
-                        magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia,
-                        nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est ornare,
-                        rhoncus odio eu, pharetra tellus. Nunc sed velit mi.
-                    </p>
-                    <p>
-                        Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel
-                        consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis
-                        et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor
-                        finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend
-                        mollis. Curabitur ultricies leo ac metus venenatis elementum.
-                    </p>
+            </BitModal>
+            <br /><br />
+            <BitButton OnClick="() => isOpenModeless = true">Open Modal (Modeless)</BitButton>
+            <BitModal @bind-IsOpen="isOpenModeless" Modeless>
+                <div style="padding: 1rem; max-width: 40rem">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitButton OnClick="() => isOpenModeless = false">Close</BitButton>
+                </div>
+            </BitModal>
+            <br /><br />
+            <BitButton OnClick="() => isOpenAutoToggleScroll = true">Open Modal (AutoToggleScroll)</BitButton>
+            <BitModal @bind-IsOpen="isOpenAutoToggleScroll" AutoToggleScroll>
+                <div style="padding: 1rem; max-width: 40rem">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
                 </div>
             </BitModal>
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+    <ComponentExampleBox Title="AbsolutePosition" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
         <ExamplePreview>
-            <div>BitModal has some advanced options.</div><br />
-            <BitButton OnClick="() => isOpenBlocking = true">Open Modal (Blocking)</BitButton>
+            <div>BitModal has an absolute position option to further customize its location.</div><br />
+            <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal</BitButton>
             <br /><br />
-            <BitButton OnClick="() => isOpenAutoToggleScroll = true">Open Modal (AutoToggleScroll)</BitButton>
+            <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
             <br /><br />
-            <BitButton OnClick="() => isOpenModeless = true">Open Modal (Modeless)</BitButton>
-
-            <BitModal @bind-IsOpen="isOpenBlocking" Blocking>
-                <div class="modal-header">
-                    <span class="modal-header-text">Blocking</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenBlocking = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        In Blocking mode, the modal won't close by clicking outside (on the overlay).
-                    </p>
-                    <br />
-                    <p>
+            <div class="relative-container" id="modal-scroller">
+                <BitModal @bind-IsOpen="isOpenAbsolutePosition" AbsolutePosition>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>AbsolutePosition</h3>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
                         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -93,46 +97,11 @@
                         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
                         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                         efficitur.
-                    </p>
-                </div>
-            </BitModal>
-
-            <BitModal @bind-IsOpen="isOpenAutoToggleScroll" AutoToggleScroll>
-                <div class="modal-header">
-                    <span class="modal-header-text">AutoToggleScroll</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenAutoToggleScroll = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        In AutoToggleScroll mode, the scrollbar of the scroll element
-                        (body by default and customizable with the ScrollerSelector parameter)
-                        will be removed when the modal opens.
-                    </p>
-                    <br />
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                        efficitur.
-                    </p>
-                </div>
-            </BitModal>
-
-            <BitModal @bind-IsOpen="isOpenModeless" Modeless>
-                <div class="modal-header">
-                    <span class="modal-header-text">Modeless</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenModeless = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        In Modeless mode, the overlay element won't render.
-                    </p>
-                    <br />
-                    <p>
+                    </div>
+                </BitModal>
+                <BitModal @bind-IsOpen="isOpenScrollerSelector" AbsolutePosition AutoToggleScroll ScrollerSelector="#modal-scroller">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>AbsolutePosition with AutoToggleScroll and ScrollerSelector</h3>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
                         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -141,55 +110,6 @@
                         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
                         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                         efficitur.
-                    </p>
-                </div>
-            </BitModal>
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    <ComponentExampleBox Title="Absolute positioning" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
-        <ExamplePreview>
-            <div>BitModal has an absolute position option to further customize its location.</div><br />
-            <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal (AbsolutePosition)</BitButton>
-            <br /><br />
-            <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (ScrollerSelector)</BitButton>
-            <br />
-            <div class="relative-container">
-                <BitModal @bind-IsOpen="isOpenAbsolutePosition" AbsolutePosition Modeless>
-                    <div class="modal-header">
-                        <span class="modal-header-text">AbsolutePosition & Modeless</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenAbsolutePosition = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
-                    </div>
-                </BitModal>
-
-                <BitModal @bind-IsOpen="isOpenScrollerSelector" AutoToggleScroll AbsolutePosition ScrollerSelector=".relative-container">
-                    <div class="modal-header">
-                        <span class="modal-header-text">ScrollerSelector</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenScrollerSelector = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
                     </div>
                 </BitModal>
 
@@ -234,7 +154,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Position" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <ComponentExampleBox Title="Position" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <ExamplePreview>
             <div>To set the modal position on the page you can use the Position parameter.</div><br />
             <div class="position-btn-container">
@@ -255,81 +175,69 @@
                 </div>
             </div>
             <BitModal @bind-IsOpen="isOpenPosition" Position="position">
-                <div class="modal-header">
-                    <span class="modal-header-text">Modal positioning</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenPosition = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    BitModal with custom positioning. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                <div style="padding: 1rem; max-width: 40rem">
+                    <h3>Position: @position</h3>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
                 </div>
             </BitModal>
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Draggable" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <ComponentExampleBox Title="Draggable" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <ExamplePreview>
             <div>The Draggable parameter of the BitModal allows users to move the modal around the screen.</div><br />
             <BitButton OnClick="() => isOpenDraggable = true">Open Modal</BitButton>
             <BitModal @bind-IsOpen="isOpenDraggable" Draggable>
-                <div class="modal-header">
-                    <span class="modal-header-text">Draggable Modal</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenDraggable = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                        efficitur.
-                    </p>
+                <div style="padding: 1rem; max-width: 40rem">
+                    <h3>Draggable</h3>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
                 </div>
             </BitModal>
             <br /><br /><br /><br />
-            <div>Using custom drag element.</div><br />
+            <div>Using custom drag element:</div><br />
             <BitButton OnClick="() => isOpenDraggableSelector = true">Open Modal</BitButton>
-            <BitModal @bind-IsOpen="isOpenDraggableSelector" Draggable DragElementSelector=".modal-header-drag">
-                <div class="modal-header modal-header-drag">
-                    <span class="modal-header-text">Draggable Modal with custom drag element</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenDraggableSelector = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                        efficitur.
-                    </p>
+            <BitModal @bind-IsOpen="isOpenDraggableSelector" Draggable DragElementSelector="#modal-drag-element">
+                <div style="padding: 1rem; max-width: 40rem">
+                    <h3 id="modal-drag-element" style="color: white; background: brown; padding: 1rem">
+                        Draggable with DragElementSelector
+                    </h3>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
                 </div>
             </BitModal>
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="FullSize" RazorCode="@example7RazorCode" CSharpCode="@example7CsharpCode" Id="example7">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
-            <div>The FullSize parameter of the BitModal allows the modal to be full-screen.</div><br />
-            <BitButton OnClick="() => isOpenFullSize = true">Open Modal</BitButton>
-            <BitModal @bind-IsOpen="isOpenFullSize" FullSize="isFullSize">
-                <div class="modal-header">
-                    <span class="modal-header-text">Full size modal</span>
-                    <BitButton Variant="BitVariant.Text"
-                               OnClick="() => isFullSize = !isFullSize"
-                               IconName="@(isFullSize ? BitIconName.BackToWindow : BitIconName.ChromeFullScreen)"
-                               Title="@(isFullSize ? "Exit FullScreen" : "FullScreen")" />
-                    <BitButton Variant="BitVariant.Text"
-                               OnClick="() => isOpenFullSize = false"
-                               IconName="@BitIconName.ChromeClose"
-                               Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
+            <div>
+                <div>Using css related parameter users can further customize the modal based on their needs.</div>
+                <br /><br />
+                <div>Component's Style & Class:</div><br />
+                <BitButton OnClick="() => isOpenStyle = true">Open styled modal</BitButton>
+                <BitModal @bind-IsOpen="isOpenStyle" Style="box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Styled modal</h3>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
                         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -338,134 +246,71 @@
                         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
                         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                         efficitur.
-                    </p>
-                </div>
-            </BitModal>
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
-        <ExamplePreview>
-            <div>
-                <div>Using css related parameter users can further customize the modal based on their needs.</div>
-                <br /><br />
-                <div>Component's Style & Class:</div><br />
-                <BitButton OnClick="() => isOpenStyle = true">Open styled modal</BitButton>
-                <br /><br />
-                <BitButton OnClick="() => isOpenClass = true">Open classed modal</BitButton>
-
-                <BitModal @bind-IsOpen="isOpenStyle" Style="box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;">
-                    <div class="modal-header">
-                        <span class="modal-header-text">Styled modal</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenStyle = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
                     </div>
                 </BitModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenClass = true">Open classed modal</BitButton>
                 <BitModal @bind-IsOpen="isOpenClass" Class="custom-class">
-                    <div class="modal-header">
-                        <span class="modal-header-text">Classed modal</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenClass = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Classed modal</h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
                     </div>
                 </BitModal>
 
                 <br /><br /><br /><br />
 
                 <div><b>Styles</b> & <b>Classes</b>:</div><br />
-                <BitButton OnClick="() => isOpenStyles = true">Open modal styles</BitButton>
-                <br /><br />
-                <BitButton OnClick="() => isOpenClasses = true">Open modal classes</BitButton>
-
+                <BitButton OnClick="() => isOpenStyles = true">Open modal Styles</BitButton>
                 <BitModal @bind-IsOpen="isOpenStyles" Styles="@(new() { Overlay = "background-color: #4776f433;", Content = "box-shadow: 0 0 1rem tomato;" })">
-                    <div class="modal-header">
-                        <span class="modal-header-text">Modal styles</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenStyles = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Modal with Styles</h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
                     </div>
                 </BitModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenClasses = true">Open modal Classes</BitButton>
                 <BitModal @bind-IsOpen="isOpenClasses" Classes="@(new() { Root = "custom-root", Overlay = "custom-overlay", Content = "custom-content" })">
-                    <div class="modal-header">
-                        <span class="modal-header-text">Modal classes</span>
-                        <BitButton Variant="BitVariant.Text" OnClick="() => isOpenClasses = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                    </div>
-                    <div class="modal-body">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                            efficitur.
-                        </p>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Modal with Classes</h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
                     </div>
                 </BitModal>
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <ExamplePreview>
             <div>Use BitModal in right-to-left (RTL).</div><br />
             <BitButton Dir="BitDir.Rtl" OnClick="() => isOpenRtl = true">باز کردن مُدال</BitButton>
             <BitModal Dir="BitDir.Rtl" @bind-IsOpen="isOpenRtl">
-                <div class="modal-header">
-                    <span class="modal-header-text">لورم ایپسوم</span>
-                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenRtl = false" IconName="@BitIconName.ChromeClose" Title="Close" />
-                </div>
-                <div class="modal-body">
-                    <p>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                    </p>
-                    <p>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                    </p>
-                    <p>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-                    </p>
+                <div style="padding: 1rem; max-width: 40rem">
+                    <h3>مدال راست به چپ</h3>
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                 </div>
             </BitModal>
         </ExamplePreview>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
index 44520654da..0371960dd7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
@@ -6,17 +6,24 @@ public partial class BitModalDemo
     [
         new()
         {
-            Name = "AutoToggleScroll",
+            Name = "AbsolutePosition",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Enables the auto scrollbar toggle behavior of the Modal.",
+            Description = "When true, the Modal will be positioned absolute instead of fixed.",
         },
         new()
         {
-            Name = "AbsolutePosition",
+            Name = "Alert",
+            Type = "bool?",
+            DefaultValue = "null",
+            Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.",
+        },
+        new()
+        {
+            Name = "AutoToggleScroll",
             Type = "bool",
             DefaultValue = "false",
-            Description = "When true, the Modal will be positioned absolute instead of fixed.",
+            Description = "Enables the auto scrollbar toggle behavior of the Modal.",
         },
         new()
         {
@@ -56,34 +63,6 @@ public partial class BitModalDemo
             Description = "Whether the Modal can be dragged around.",
         },
         new()
-        {
-            Name = "FullHeight",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Makes the Modal height 100% of its parent container.",
-        },
-        new()
-        {
-            Name = "FullSize",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Makes the Modal width and height 100% of its parent container.",
-        },
-        new()
-        {
-            Name = "FullWidth",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Makes the Modal width 100% of its parent container.",
-        },
-        new()
-        {
-            Name = "IsAlert",
-            Type = "bool?",
-            DefaultValue = "null",
-            Description = "Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.",
-        },
-        new()
         {
             Name = "IsOpen",
             Type = "bool",
@@ -133,20 +112,6 @@ public partial class BitModalDemo
             Description = "Custom CSS styles for different parts of the BitModal component.",
             LinkType = LinkType.Link,
             Href = "#modal-class-styles",
-        },
-        new()
-        {
-            Name = "SubtitleAriaId",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "ARIA id for the subtitle of the Modal, if any.",
-        },
-        new()
-        {
-            Name = "TitleAriaId",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "ARIA id for the title of the Modal, if any.",
         }
     ];
 
@@ -209,8 +174,6 @@ public partial class BitModalDemo
 
     private bool isOpenBasic;
 
-    private bool isOpenCustomContent;
-
     private bool isOpenBlocking;
     private bool isOpenAutoToggleScroll;
     private bool isOpenModeless;
@@ -229,9 +192,6 @@ private void OpenModalInPosition(BitPosition positionValue)
     private bool isOpenDraggable;
     private bool isOpenDraggableSelector;
 
-    private bool isOpenFullSize;
-    private bool isFullSize;
-
     private bool isOpenStyle;
     private bool isOpenClass;
     private bool isOpenStyles;
@@ -244,7 +204,7 @@ private void OpenModalInPosition(BitPosition positionValue)
 <BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
 
 <BitModal @bind-IsOpen=""isOpenBasic"">
-    <div style=""padding:1rem; max-width:40rem"">
+    <div style=""padding: 1rem; max-width: 40rem"">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -259,172 +219,64 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
 private bool isOpenBasic;";
 
     private readonly string example2RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
+<BitButton OnClick=""() => isOpenBlocking = true"">Open Modal (Blocking)</BitButton>
 
-    .modal-header-text {
-        flex-grow: 1;
-    }
+<BitModal @bind-IsOpen=""isOpenBlocking"" Blocking>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+        <hr />
+        <BitButton OnClick=""() => isOpenBlocking = false"">Close</BitButton>
+    </div>
+</BitModal>
 
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
 
 
-<BitButton OnClick=""() => isOpenCustomContent = true"">Open Modal</BitButton>
+<BitButton OnClick=""() => isOpenModeless = true"">Open Modal (Modeless)</BitButton>
 
-<BitModal @bind-IsOpen=""isOpenCustomContent"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Lorem Ipsum</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenCustomContent = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
-        <p>
-            Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus
-            faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a
-            magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia,
-            nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est ornare,
-            rhoncus odio eu, pharetra tellus. Nunc sed velit mi.
-        </p>
-        <p>
-            Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel
-            consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis
-            et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor
-            finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend
-            mollis. Curabitur ultricies leo ac metus venenatis elementum.
-        </p>
+<BitModal @bind-IsOpen=""isOpenModeless"" Modeless>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+        <hr />
+        <BitButton OnClick=""() => isOpenModeless = false"">Close</BitButton>
     </div>
-</BitModal>";
-    private readonly string example2CsharpCode = @"
-private bool isOpenCustomContent;";
-
-    private readonly string example3RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
+</BitModal>
 
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
 
 
-<BitButton OnClick=""() => isOpenBlocking = true"">Open Modal (Blocking)</BitButton>
 <BitButton OnClick=""() => isOpenAutoToggleScroll = true"">Open Modal (AutoToggleScroll)</BitButton>
-<BitButton OnClick=""() => isOpenModeless = true"">Open Modal (Modeless)</BitButton>
-
-<BitModal @bind-IsOpen=""isOpenBlocking"" Blocking>
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Blocking</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenBlocking = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            In Blocking mode, the modal won't close by clicking outside (on the overlay).
-        </p>
-        <br />
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
-    </div>
-</BitModal>
 
 <BitModal @bind-IsOpen=""isOpenAutoToggleScroll"" AutoToggleScroll>
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">AutoToggleScroll</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenAutoToggleScroll = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            In AutoToggleScroll mode, the scrollbar of the scroll element 
-            (body by default and customizable with the ScrollerSelector parameter)
-            will be removed when the modal opens.
-        </p>
-        <br />
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
-    </div>
-</BitModal>
-
-<BitModal @bind-IsOpen=""isOpenModeless"" Modeless>
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Modeless</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenModeless = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            In Modeless mode, the overlay element won't render.
-        </p>
-        <br />
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>";
-    private readonly string example3CsharpCode = @"
+    private readonly string example2CsharpCode = @"
 private bool isOpenBlocking;
 private bool isOpenAutoToggleScroll;
 private bool isOpenModeless;";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example3RazorCode = @"
 <style>
     .relative-container {
         width: 100%;
@@ -435,72 +287,40 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
         background-color: #eee;
         border: 2px lightgreen solid;
     }
-
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
-
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
 </style>
 
 
-<BitButton OnClick=""() => isOpenAbsolutePosition = true"">Open Modal (AbsolutePosition)</BitButton>
-<BitButton OnClick=""() => isOpenScrollerSelector = true"">Open Modal (ScrollerSelector)</BitButton>
+<BitButton OnClick=""() => isOpenAbsolutePosition = true"">Open Modal</BitButton>
 
-<div class=""relative-container"">
-    <BitModal @bind-IsOpen=""isOpenAbsolutePosition"" AbsolutePosition Modeless>
-        <div class=""modal-header"">
-            <span class=""modal-header-text"">AbsolutePosition & Modeless</span>
-            <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenAbsolutePosition = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-        </div>
-        <div class=""modal-body"">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                efficitur.
-            </p>
-        </div>
-    </BitModal>
+<BitButton OnClick=""() => isOpenScrollerSelector = true"">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
 
-    <BitModal @bind-IsOpen=""isOpenScrollerSelector"" AutoToggleScroll AbsolutePosition ScrollerSelector="".relative-container"">
-        <div class=""modal-header"">
-            <span class=""modal-header-text"">ScrollerSelector</span>
-            <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenScrollerSelector = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
+<div class=""relative-container"" id=""modal-scroller"">
+    <BitModal @bind-IsOpen=""isOpenAbsolutePosition"" AbsolutePosition>
+        <div style=""padding: 1rem; max-width: 40rem"">
+            <h3>AbsolutePosition</h3>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+            efficitur.
         </div>
-        <div class=""modal-body"">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                efficitur.
-            </p>
+    </BitModal>
+    <BitModal @bind-IsOpen=""isOpenScrollerSelector"" AbsolutePosition AutoToggleScroll ScrollerSelector=""#modal-scroller"">
+        <div style=""padding: 1rem; max-width: 40rem"">
+            <h3>AbsolutePosition with AutoToggleScroll and ScrollerSelector</h3>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+            efficitur.
         </div>
     </BitModal>
-
     <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
@@ -509,8 +329,7 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
         ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-        efficitur.
-
+        efficitur
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -518,8 +337,7 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
         ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-        efficitur.
-
+        efficitur
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -527,8 +345,7 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
         ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
         Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
         Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-        efficitur.
-
+        efficitur
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
         sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -539,50 +356,38 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
         efficitur.
     </div>
 </div>";
-    private readonly string example4CsharpCode = @"
+    private readonly string example3CsharpCode = @"
 private bool isOpenAbsolutePosition;
 private bool isOpenScrollerSelector;";
 
-    private readonly string example5RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
+    private readonly string example4RazorCode = @"
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.TopLeft)"">Top Left</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.TopCenter)"">Top Center</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.TopRight)"">Top Right</BitButton>
 
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.CenterLeft)"">Center Left</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.Center)"">Center</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.CenterRight)"">Center Right</BitButton>
 
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.BottomLeft)"">Bottom Left</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.BottomCenter)"">Bottom Center</BitButton>
+<BitButton Class=""position-button"" OnClick=""() => OpenModalInPosition(BitPosition.BottomRight)"">Bottom Right</BitButton>
 
-<BitButton OnClick=""() => OpenModalInPosition(BitPosition.TopLeft)"">Top Left</BitButton>
-<BitButton OnClick=""() => OpenModalInPosition(BitPosition.TopRight)"">Top Right</BitButton>
-<BitButton OnClick=""() => OpenModalInPosition(BitPosition.BottomLeft)"">Bottom Left</BitButton>
-<BitButton OnClick=""() => OpenModalInPosition(BitPosition.BottomRight)"">Bottom Right</BitButton>
 
 <BitModal @bind-IsOpen=""isOpenPosition"" Position=""position"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Modal positioning</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenPosition = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        BitModal with custom positioning. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Position: @position</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>";
-    private readonly string example5CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 private bool isOpenPosition;
 private BitPosition position;
 
@@ -592,153 +397,48 @@ private void OpenModalInPosition(BitPosition positionValue)
     position = positionValue;
 }";
 
-    private readonly string example6RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
-
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
-
-
+    private readonly string example5RazorCode = @"
 <BitButton OnClick=""() => isOpenDraggable = true"">Open Modal</BitButton>
+
 <BitModal @bind-IsOpen=""isOpenDraggable"" Draggable>
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Draggble Modal</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenDraggable = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Draggable</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>
 
 
+
 <BitButton OnClick=""() => isOpenDraggableSelector = true"">Open Modal</BitButton>
-<BitModal @bind-IsOpen=""isOpenDraggableSelector"" Draggable DragElementSelector="".modal-header-drag"">
-    <div class=""modal-header modal-header-drag"">
-        <span class=""modal-header-text"">Draggble Modal with custom drag element</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenDraggableSelector = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+
+<BitModal @bind-IsOpen=""isOpenDraggableSelector"" Draggable DragElementSelector=""#modal-drag-element"">
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3 id=""modal-drag-element"" style=""color: white; background: brown; padding: 1rem"">
+            Draggable with DragElementSelector
+        </h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>";
-    private readonly string example6CsharpCode = @"
+    private readonly string example5CsharpCode = @"
 private bool isOpenDraggable;
 private bool isOpenDraggableSelector;";
 
-    private readonly string example7RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
-
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
-
-
-<BitButton OnClick=""() => isOpenFullSize = true"">Open Modal</BitButton>
-<BitModal @bind-IsOpen=""isOpenFullSize"" FullSize=""isFullSize"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Full size modal</span>
-        <BitButton Variant=""BitVariant.Text""
-                   OnClick=""() => isFullSize = !isFullSize""
-                   IconName=""@(isFullSize ? BitIconName.BackToWindow : BitIconName.ChromeFullScreen)""
-                   Title=""@(isFullSize ? ""Exit FullScreen"" : ""FullScreen"")"" />
-        <BitButton Variant=""BitVariant.Text""
-                   OnClick=""() => isOpenFullSize = false""
-                   IconName=""@BitIconName.ChromeClose""
-                   Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
-    </div>
-</BitModal>";
-    private readonly string example7CsharpCode = @"
-private bool isOpenFullSize;
-private bool isFullSize;";
-
-    private readonly string example8RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
-
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-
     .custom-class {
         border: 0.5rem solid tomato;
         background-color: darkgoldenrod;
@@ -762,141 +462,92 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
 
 
 <BitButton OnClick=""() => isOpenStyle = true"">Open styled modal</BitButton>
-<BitButton OnClick=""() => isOpenClass = true"">Open classed modal</BitButton>
+
 <BitModal @bind-IsOpen=""isOpenStyle"" Style=""box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Styled modal</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenStyle = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Styled modal</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>
+
+
+
+<BitButton OnClick=""() => isOpenClass = true"">Open classed modal</BitButton>
+
 <BitModal @bind-IsOpen=""isOpenClass"" Class=""custom-class"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Classed modal</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenClass = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Classed modal</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
-</BitModal>
+</BitModal
 
 
-<BitButton OnClick=""() => isOpenStyles = true"">Open modal styles</BitButton>
-<BitButton OnClick=""() => isOpenClasses = true"">Open modal classes</BitButton>
+
+<BitButton OnClick=""() => isOpenStyles = true"">Open modal Styles</BitButton>
+
 <BitModal @bind-IsOpen=""isOpenStyles"" Styles=""@(new() { Overlay = ""background-color: #4776f433;"", Content = ""box-shadow: 0 0 1rem tomato;"" })"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Modal styles</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenStyles = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Modal with Styles</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>
+
+
+
+<BitButton OnClick=""() => isOpenClasses = true"">Open modal Classes</BitButton>
+
 <BitModal @bind-IsOpen=""isOpenClasses"" Classes=""@(new() { Root = ""custom-root"", Overlay = ""custom-overlay"", Content = ""custom-content"" })"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">Modal classes</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenClasses = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-            efficitur.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>Modal with Classes</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
     </div>
 </BitModal>";
-    private readonly string example8CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 private bool isOpenStyle;
 private bool isOpenClass;
 private bool isOpenStyles;
 private bool isOpenClasses;";
 
-    private readonly string example9RazorCode = @"
-<style>
-    .modal-header {
-        gap: 0.5rem;
-        display: flex;
-        font-size: 24px;
-        font-weight: 600;
-        align-items: center;
-        padding: 12px 12px 14px 24px;
-        border-top: 4px solid #0054C6;
-    }
-
-    .modal-header-text {
-        flex-grow: 1;
-    }
-
-    .modal-body {
-        max-width: 960px;
-        line-height: 20px;
-        overflow-y: hidden;
-        padding: 0 24px 24px;
-    }
-</style>
-
-
+    private readonly string example7RazorCode = @"
 <BitButton Dir=""BitDir.Rtl"" OnClick=""() => isOpenRtl = true"">باز کردن مُدال</BitButton>
+
 <BitModal Dir=""BitDir.Rtl"" @bind-IsOpen=""isOpenRtl"">
-    <div class=""modal-header"">
-        <span class=""modal-header-text"">لورم ایپسوم</span>
-        <BitButton Variant=""BitVariant.Text"" OnClick=""() => isOpenRtl = false"" IconName=""@BitIconName.ChromeClose"" Title=""Close"" />
-    </div>
-    <div class=""modal-body"">
-        <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-        </p>
-        <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-        </p>
-        <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
-            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
-            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
-            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-        </p>
+    <div style=""padding: 1rem; max-width: 40rem"">
+        <h3>مدال راست به چپ</h3>
+        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
     </div>
 </BitModal>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private bool isOpenRtl;";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
index d25be02092..a635eb0595 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
@@ -1,33 +1,9 @@
-@import '../../../../Styles/abstracts/_functions.scss';
-
-.modal-header {
-    gap: 0.5rem;
-    display: flex;
-    font-weight: 600;
-    align-items: center;
-    font-size: rem2(24px);
-    border-top: rem2(4px) solid #0054C6;
-    padding: rem2(12px) rem2(12px) rem2(14px) rem2(24px);
-}
-
-.modal-header-text {
-    flex-grow: 1;
-}
-
-.modal-body {
-    overflow-y: hidden;
-    max-width: rem2(960px);
-    line-height: rem2(20px);
-    padding: 0 rem2(24px) rem2(24px);
-}
-
-.relative-container {
+.relative-container {
     width: 100%;
+    height: 345px;
     overflow: auto;
-    margin-top: 1rem;
     position: relative;
-    height: rem2(400px);
-    border: rem2(2px) lightgreen solid;
+    border: 2px lightgreen solid;
 }
 
 .position-btn-container {
@@ -61,8 +37,8 @@
 
     .custom-content {
         margin: 1rem;
-        box-shadow: 0 0 10rem purple;
         border-end-end-radius: 1rem;
+        box-shadow: 0 0 10rem purple;
         border-end-start-radius: 1rem;
     }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
index b3e28e6a15..63a35a585f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
@@ -256,6 +256,9 @@
             <BitLink Href="/components/propanel" title="ProPanel" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">ProPanel</BitText>
             </BitLink>
+            <BitLink Href="/components/promodal" title="ProModal" Style="display: flex">
+                <BitText Typography="BitTypography.Subtitle1">ProModal</BitText>
+            </BitLink>
             <BitLink Href="/components/modalservice" title="ModalService" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">ModalService</BitText>
             </BitLink>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
index 84b6f10f89..46508c9eae 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs
@@ -156,6 +156,7 @@ public partial class NavMenu : IDisposable
                 new() { Text = "DataGrid", Url = "/components/datagrid", AdditionalUrls = ["/components/data-grid"] },
                 new() { Text = "Chart", Url = "/components/chart" },
                 new() { Text = "PdfReader", Url = "/components/pdfreader" },
+                new() { Text = "ProModal", Url = "/components/promodal" },
                 new() { Text = "ProPanel", Url = "/components/propanel" },
                 new() 
                 {