diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor
new file mode 100644
index 0000000000..b461e34683
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor
@@ -0,0 +1,70 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<BitPanel AriaLabel="@AriaLabel"
+          Class="@ClassBuilder.Value"
+          Dir="Dir"
+          @attributes="HtmlAttributes"
+          Id="@Id"
+          IsEnabled="IsEnabled"
+          Style="@StyleBuilder.Value"
+          Visibility="Visibility"
+          AutoToggleScroll="AutoToggleScroll"
+          Blocking="Blocking"
+          Classes="Classes"
+          IsOpen="IsOpen"
+          IsOpenChanged="AssignIsOpen"
+          Modeless="Modeless"
+          OnDismiss="OnDismiss"
+          OnSwipeStart="OnSwipeStart"
+          OnSwipeMove="OnSwipeMove"
+          OnSwipeEnd="OnSwipeEnd"
+          Position="Position"
+          Size="Size"
+          ScrollerSelector="@ScrollerSelector"
+          Styles="Styles"
+          SwipeTrigger="SwipeTrigger">
+    @if (Header is not null || HeaderText is not null || ShowCloseButton)
+    {
+        <div style="@Styles?.HeaderContainer" class="bit-ppl-hcn @Classes?.HeaderContainer">
+            @if (Header is not null)
+            {
+                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                    @Header
+                </div>
+            }
+            else if (HeaderText is not null)
+            {
+                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                    @HeaderText
+                </div>
+            }
+
+            @if (ShowCloseButton)
+            {
+                <button @onclick="ClosePanel"
+                        style="@Styles?.CloseButton"
+                        class="bit-ppl-cls @Classes?.CloseButton">
+                    <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
+                </button>
+            }
+        </div>
+    }
+
+    <div style="@Styles?.Body" class="bit-ppl-bdy @Classes?.Body">
+        @(Body ?? ChildContent)
+    </div>
+
+    @if (Footer is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+            @Footer
+        </div>
+    }
+    else if (FooterText is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+            @FooterText
+        </div>
+    }
+</BitPanel>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
new file mode 100644
index 0000000000..cc7b077732
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs
@@ -0,0 +1,151 @@
+namespace Bit.BlazorUI;
+
+public partial class BitProPanel : BitComponentBase
+{
+    /// <summary>
+    /// Enables the auto scrollbar toggle behavior of the panel.
+    /// </summary>
+    [Parameter] public bool AutoToggleScroll { get; set; }
+
+    /// <summary>
+    /// The alias of the ChildContent.
+    /// </summary>
+    [Parameter] public RenderFragment? Body { get; set; }
+
+    /// <summary>
+    /// Whether the panel can be dismissed by clicking outside of it on the overlay.
+    /// </summary>
+    [Parameter] public bool Blocking { get; set; }
+
+    /// <summary>
+    /// The content of the panel.
+    /// </summary>
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the panel.
+    /// </summary>
+    [Parameter] public BitProPanelClassStyles? Classes { 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>
+    /// Determines the openness of the panel.
+    /// </summary>
+    [Parameter, TwoWayBound]
+    public bool IsOpen { get; set; }
+
+    /// <summary>
+    /// Renders the overlay in full mode that gives it an opaque background.
+    /// </summary>
+    [Parameter] public bool ModeFull { get; set; }
+
+    /// <summary>
+    /// Removes the overlay element of the panel.
+    /// </summary>
+    [Parameter] public bool Modeless { get; set; }
+
+    /// <summary>
+    /// A callback function for when the Panel is dismissed.
+    /// </summary>
+    [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action starts on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeStart { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action moves on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeMove { get; set; }
+
+    /// <summary>
+    /// The event callback for when the swipe action ends on the container of the panel.
+    /// </summary>
+    [Parameter] public EventCallback<decimal> OnSwipeEnd { get; set; }
+
+    /// <summary>
+    /// The position of the panel to show on the screen.
+    /// </summary>
+    [Parameter] public BitPanelPosition? Position { get; set; }
+
+    /// <summary>
+    /// The value of the height or width (based on the position) of the Panel.
+    /// </summary>
+    [Parameter] public double? Size { get; set; }
+
+    /// <summary>
+    /// Specifies the element selector for which the Panel 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 panel component.
+    /// </summary>
+    [Parameter] public BitProPanelClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).
+    /// </summary>
+    [Parameter] public decimal? SwipeTrigger { 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-ppl";
+
+    protected override void RegisterCssClasses()
+    {
+        ClassBuilder.Register(() => ModeFull ? "bit-ppl-mfl" : string.Empty);
+    }
+
+
+
+    private async Task ClosePanel(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/ProPanel/BitProPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss
new file mode 100644
index 0000000000..db747ffc91
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.scss
@@ -0,0 +1,71 @@
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
+
+.bit-ppl {
+    .bit-pnl-cnt {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.bit-ppl-mfl {
+    .bit-pnl-ovl {
+        background-color: $clr-bg-overlay;
+    }
+}
+
+.bit-ppl-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-ppl-hdr {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-size: spacing(2.5);
+}
+
+.bit-ppl-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-ppl-bdy {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: spacing(2);
+}
+
+.bit-ppl-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/ProPanel/BitProPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs
new file mode 100644
index 0000000000..0ce332226a
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanelClassStyles.cs
@@ -0,0 +1,34 @@
+namespace Bit.BlazorUI;
+
+public class BitProPanelClassStyles : BitPanelClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the header container of the BitProPanel.
+    /// </summary>
+    public string? HeaderContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the header of the BitProPanel.
+    /// </summary>
+    public string? Header { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProPanel.
+    /// </summary>
+    public string? CloseButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the close button of the BitProPanel.
+    /// </summary>
+    public string? CloseIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the body of the BitProPanel.
+    /// </summary>
+    public string? Body { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the footer of the BitProPanel.
+    /// </summary>
+    public string? Footer { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
index 66554e8edc..4d58f1782c 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
@@ -1,2 +1,2 @@
-@import "fabric.mdl2.bit.blazoui.extras.scss";
-@import "components.scss";
+@import "components.scss";
+@import "fabric.mdl2.bit.blazoui.extras.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
index 0e9f9d3e91..ca46bd9aef 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss
@@ -1,4 +1,4 @@
 @import "../Components/DataGrid/BitDataGrid.scss";
 @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
-
 @import "../Components/PdfReader/BitPdfReader.scss";
+@import "../Components/ProPanel/BitProPanel.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
index 79d9f65d85..a01542257f 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj
@@ -24,7 +24,8 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<ProjectReference Include="..\Bit.BlazorUI\Bit.BlazorUI.csproj" />
+        <ProjectReference Include="..\Bit.BlazorUI\Bit.BlazorUI.csproj" />
+        <ProjectReference Include="..\Bit.BlazorUI.Extras\Bit.BlazorUI.Extras.csproj" />
 	</ItemGroup>
 
 </Project>
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs
new file mode 100644
index 0000000000..be0b2ba6e8
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Extras/ProPanel/BitProPanelTests.cs
@@ -0,0 +1,54 @@
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Extras.ProPanel;
+
+[TestClass]
+public class BitProPanelTests : BunitTestContext
+{
+    [TestMethod]
+    public void BitProPanelContentTest()
+    {
+        var com = RenderComponent<BitProPanel>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.AddChildContent("<div>Test Content</div>");
+        });
+
+        var elementContent = com.Find(".bit-ppl-bdy");
+
+        elementContent.MarkupMatches("<div class=\"bit-ppl-bdy\"><div>Test Content</div></div>");
+    }
+
+    [TestMethod]
+    public void BitProPanelFooterContentTest()
+    {
+        var footerContent = "<div>Test Footer Content</div>";
+
+        var com = RenderComponent<BitProPanel>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Footer, footerContent);
+        });
+
+        var elementContent = com.Find(".bit-ppl-fcn :first-child");
+
+        elementContent.MarkupMatches(footerContent);
+    }
+
+    [TestMethod]
+    public void BitProPanelHeaderContentTest()
+    {
+        const string headerContent = "<div>Test Header Content</div>";
+
+        var com = RenderComponent<BitProPanel>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Header, headerContent);
+        });
+
+        var elementContent = com.Find(".bit-ppl-hcn :first-child :first-child");
+
+        elementContent.MarkupMatches(headerContent);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs
index e7a3a7fbc8..5477856812 100644
--- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelTests.cs
@@ -51,9 +51,6 @@ public void BitPanelModelessTest(bool modeless)
             parameters.Add(p => p.IsOpen, true);
         });
 
-        var element = com.Find(".bit-pnl");
-        Assert.AreEqual(element.Attributes["aria-modal"].Value, (modeless is false).ToString());
-
         var elementOverlay = com.FindAll(".bit-pnl-ovl");
         Assert.AreEqual(modeless ? 0 : 1, elementOverlay.Count);
     }
@@ -73,64 +70,6 @@ public void BitPanelIsOpenTest(bool isOpen)
         Assert.AreEqual(isOpen, container.GetStyle().CssText.Contains("opacity: 1"));
     }
 
-    [DataTestMethod,
-        DataRow(null),
-        DataRow(""),
-        DataRow("Test-S-A-Id")
-    ]
-    public void BitPanelSubtitleAriaIdTest(string subtitleAriaId)
-    {
-        var com = RenderComponent<BitPanel>(parameters =>
-        {
-            parameters.Add(p => p.SubtitleAriaId, subtitleAriaId);
-            parameters.Add(p => p.IsOpen, true);
-        });
-
-        var element = com.Find(".bit-pnl");
-
-        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 BitPanelTitleAriaIdTest(string titleAriaId)
-    {
-        var com = RenderComponent<BitPanel>(parameters =>
-        {
-            parameters.Add(p => p.TitleAriaId, titleAriaId);
-            parameters.Add(p => p.IsOpen, true);
-        });
-
-        var element = com.Find(".bit-pnl");
-
-        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 BitPanelContentTest()
     {
@@ -140,41 +79,9 @@ public void BitPanelContentTest()
             parameters.AddChildContent("<div>Test Content</div>");
         });
 
-        var elementContent = com.Find(".bit-pnl-bdy");
-
-        elementContent.MarkupMatches("<div class=\"bit-pnl-bdy\"><div>Test Content</div></div>");
-    }
-
-    [TestMethod]
-    public void BitPanelFooterContentTest()
-    {
-        var footerContent = "<div>Test Footer Content</div>";
-
-        var com = RenderComponent<BitPanel>(parameters =>
-        {
-            parameters.Add(p => p.IsOpen, true);
-            parameters.Add(p => p.FooterTemplate, footerContent);
-        });
-
-        var elementContent = com.Find(".bit-pnl-fcn :first-child");
-
-        elementContent.MarkupMatches(footerContent);
-    }
-
-    [TestMethod]
-    public void BitPanelHeaderContentTest()
-    {
-        const string headerContent = "<div>Test Header Content</div>";
-
-        var com = RenderComponent<BitPanel>(parameters =>
-        {
-            parameters.Add(p => p.IsOpen, true);
-            parameters.Add(p => p.HeaderTemplate, headerContent);
-        });
-
-        var elementContent = com.Find(".bit-pnl-hcn :first-child");
+        var elementContent = com.Find(".bit-pnl-cnt");
 
-        elementContent.MarkupMatches(headerContent);
+        elementContent.MarkupMatches("<div id:ignore style:ignore class=\"bit-pnl-cnt bit-pnl-end\"><div>Test Content</div></div>");
     }
 
     [TestMethod]
diff --git a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj
index 9438d817fd..a0231bd04a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj
+++ b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj
@@ -18,6 +18,14 @@
         <SupportedPlatform Include="browser" />
     </ItemGroup>
 
+    <ItemGroup Condition="'$(Configuration)' == 'Debug'">
+        <InternalsVisibleTo Include="Bit.BlazorUI.Extras, PublicKey=00240000048000009400000006020000002400005253413100040000010001008d726fe8f1bed8ca2a003848640c872c6a5f2191c81eda677b249a6e34bd9134eba9ff7251582a5020cb3eee83a61e7034ce712f5873d60f7c3c61f48592b256c560d7b3384e9889e4f81e4d406bc2b639915a4062d60751193ae66028d7bd4b9a3bf0823f1e38abe5eadc3cd9615c6ff811974a9f6f89297dc2a722bf23d0bb"/>
+    </ItemGroup>
+    <ItemGroup Condition="'$(Configuration)' == 'Release'">
+        <InternalsVisibleTo Include="Bit.BlazorUI.Extras, PublicKey=002400000480000094000000060200000024000052534131000400000100010081a58360c43da697fbbc3b729e3565c1e4ef444878d7764f2e187ff0ca054413b6ad2b2eba16f4f1ad6da8e8be445bb410c43930195696e7f2317dd80164fed318366a83af39ab4c135349f75b3f2b9ad5875fad68025c9e1c4e8d16469addd506f3e1ed13461dd17a8f23f3faeb2cbd933cef6ebead4e50197943798f638aa9"/>
+    </ItemGroup>
+
+
     <ItemGroup>
         <PackageReference Condition="'$(TargetFramework)' == 'net8.0'" Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
         <PackageReference Condition="'$(TargetFramework)' == 'net9.0'" Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" />
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs
index c30cbcd9ff..746f61ef90 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs
@@ -177,9 +177,9 @@ protected override void OnAfterRender(bool firstRender)
 
     protected abstract string RootElementClass { get; }
 
-    internal ElementClassBuilder ClassBuilder { get; private set; } = new ElementClassBuilder();
+    protected ElementClassBuilder ClassBuilder { get; private set; } = new ElementClassBuilder();
 
-    internal ElementStyleBuilder StyleBuilder { get; private set; } = new ElementStyleBuilder();
+    protected ElementStyleBuilder StyleBuilder { get; private set; } = new ElementStyleBuilder();
 
     protected virtual void RegisterCssStyles() { }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelPosition.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitPanelPosition.cs
similarity index 100%
rename from src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelPosition.cs
rename to src/BlazorUI/Bit.BlazorUI/Components/BitPanelPosition.cs
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index a228db8891..addc3d92be 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -852,7 +852,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
         if (Responsive is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.End, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, _dotnetObj);
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? parsingErrorMessage)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs
index d7d3197c5b..31936c2e66 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs
@@ -307,7 +307,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
         _pointerUpAbortControllerId = await _js.BitCircularTimePickerRegisterPointerUp(_dotnetObj, nameof(_HandlePointerUp));
         _pointerMoveAbortControllerId = await _js.BitCircularTimePickerRegisterPointerMove(_dotnetObj, nameof(_HandlePointerMove));
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs
index a43798701a..35b8b01462 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs
@@ -530,7 +530,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
         if (Responsive is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTimeOffset? result, [NotNullWhen(false)] out string? validationErrorMessage)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
index 77abb1fe3f..a64044a39c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
@@ -593,7 +593,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
         if (Responsive is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out BitDateRangePickerValue? result, [NotNullWhen(false)] out string? validationErrorMessage)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
index 7c19c82d49..d554b0d9ee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
@@ -345,7 +345,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
         if (Responsive is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.Top, Dir is BitDir.Rtl, _dotnetObj);
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TimeSpan? result, [NotNullWhen(false)] out string? validationErrorMessage)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
index 2a426aa349..48f83584e7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
@@ -150,7 +150,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender is false) return;
         if (Responsive is false) return;
 
-        await _js.SwipesSetup(_calloutId, 0.25m, SwipesPosition.End, Dir is BitDir.Rtl, _dotnetObj);
+        await _js.SwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, _dotnetObj);
     }
 
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs
index c9d9247d69..5b774859de 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs
@@ -111,6 +111,12 @@ public override Task SetParametersAsync(ParameterView parameters)
 
 
 
+    internal new ElementClassBuilder ClassBuilder => base.ClassBuilder;
+
+    internal new ElementStyleBuilder StyleBuilder => base.StyleBuilder;
+
+
+
     protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => "bit-ldn");
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor
index c6f1965ebb..cd189aa5fb 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor
@@ -6,55 +6,19 @@
      role="dialog"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()"
-     aria-labelledby="@TitleAriaId"
-     aria-describedby="@SubtitleAriaId"
-     aria-modal="@((Modeless is false).ToString())">
+     dir="@Dir?.ToString().ToLower()">
 
     @if (IsOpen && Modeless is false)
     {
-        <div style="@Styles?.Overlay" class="bit-pnl-ovl @Classes?.Overlay" aria-hidden="true" @onclick="OnOverlayClicked" />
+        <div @onclick="OnOverlayClicked"
+             aria-hidden="true" 
+             style="@Styles?.Overlay" 
+             class="bit-pnl-ovl @Classes?.Overlay" />
     }
 
     <div id="@_containerId"
-         style="@GetPanelStyle()"
-         class="bit-pnl-cnt @GetPositionClass()">
-
-        <div style="@Styles?.Header"
-             class="bit-pnl-hcn @Classes?.Header">
-            @if (HeaderTemplate is not null)
-            {
-                @HeaderTemplate
-            }
-            else if (HeaderText.HasValue())
-            {
-                <label style="@Styles?.HeaderText" class="bit-pnl-ttl @Classes?.HeaderText">@HeaderText</label>
-            }
-
-            @if (ShowCloseButton)
-            {
-                <button @onclick="OnCloseButtonClicked"
-                        style="@Styles?.CloseButton"
-                        class="bit-pnl-cls @Classes?.CloseButton"
-                        type="button"
-                        title="Close"
-                        aria-label="Close"
-                        aria-hidden="Close"
-                        aria-describedby="Close">
-                    <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
-                </button>
-            }
-        </div>
-
-        <div style="@Styles?.Body" class="bit-pnl-bdy @Classes?.Body">
-            @ChildContent
-        </div>
-
-        @if (FooterTemplate is not null)
-        {
-            <div style="@Styles?.Footer" class="bit-pnl-fcn @Classes?.Footer">
-                @FooterTemplate
-            </div>
-        }
+         style="@GetContainerCssStyles()"
+         class="@GetContainerCssClasses()">
+        @ChildContent
     </div>
 </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs
index 5e0dbd5ef2..6f6863e164 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs
@@ -33,21 +33,6 @@ public partial class BitPanel : BitComponentBase, IAsyncDisposable
     /// </summary>
     [Parameter] public BitPanelClassStyles? Classes { get; set; }
 
-    /// <summary>
-    /// The template used to render the footer section of the panel.
-    /// </summary>
-    [Parameter] public RenderFragment? FooterTemplate { get; set; }
-
-    /// <summary>
-    /// The template used to render the header section of the panel.
-    /// </summary>
-    [Parameter] public RenderFragment? HeaderTemplate { get; set; }
-
-    /// <summary>
-    /// The text of the header section of the panel.
-    /// </summary>
-    [Parameter] public string? HeaderText { get; set; }
-
     /// <summary>
     /// Determines the openness of the panel.
     /// </summary>
@@ -94,31 +79,16 @@ public partial class BitPanel : BitComponentBase, IAsyncDisposable
     /// </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 panel component.
     /// </summary>
     [Parameter] public BitPanelClassStyles? Styles { get; set; }
 
-    /// <summary>
-    /// Specifies the id for the aria-describedby attribute of the panel.
-    /// </summary>
-    [Parameter] public string? SubtitleAriaId { get; set; }
-
     /// <summary>
     /// The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).
     /// </summary>
     [Parameter] public decimal? SwipeTrigger { get; set; }
 
-    /// <summary>
-    /// Specifies the id for the aria-labelledby attribute of the panel.
-    /// </summary>
-    [Parameter] public string? TitleAriaId { get; set; }
-
 
 
     public async Task Open()
@@ -140,19 +110,22 @@ public async Task Close()
     [JSInvokable("OnStart")]
     public async Task _OnStart(decimal startX, decimal startY)
     {
-        await OnSwipeStart.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY);
+        var start = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? startX : startY;
+        await OnSwipeStart.InvokeAsync(start);
     }
 
     [JSInvokable("OnMove")]
     public async Task _OnMove(decimal diffX, decimal diffY)
     {
-        await OnSwipeMove.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY);
+        var diff = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY;
+        await OnSwipeMove.InvokeAsync(diff);
     }
 
     [JSInvokable("OnEnd")]
     public async Task _OnEnd(decimal diffX, decimal diffY)
     {
-        await OnSwipeEnd.InvokeAsync((Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY);
+        var diff = (Position == BitPanelPosition.Start || Position == BitPanelPosition.End) ? diffX : diffY;
+        await OnSwipeEnd.InvokeAsync(diff);
     }
 
     [JSInvokable("OnClose")]
@@ -192,7 +165,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             var dotnetObj = DotNetObjectReference.Create(this);
-            await _js.BitPanelSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj);
+            await _js.SwipesSetup(_containerId, SwipeTrigger ?? 0.25m, Position ?? BitPanelPosition.End, Dir == BitDir.Rtl, dotnetObj, false);
         }
 
         if (_internalIsOpen == IsOpen) return;
@@ -227,21 +200,7 @@ private async Task OnOverlayClicked(MouseEventArgs e)
         await ClosePanel(e);
     }
 
-    private async Task OnCloseButtonClicked(MouseEventArgs e)
-    {
-        await ClosePanel(e);
-    }
-
-    private string GetPositionClass() => Position switch
-    {
-        BitPanelPosition.Start => "bit-pnl-start",
-        BitPanelPosition.End => "bit-pnl-end",
-        BitPanelPosition.Top => "bit-pnl-top",
-        BitPanelPosition.Bottom => "bit-pnl-bottom",
-        _ => "bit-pnl-end"
-    };
-
-    private string GetPanelStyle()
+    private string GetContainerCssStyles()
     {
         List<string> styles = [];
 
@@ -264,6 +223,27 @@ private string GetPanelStyle()
         return string.Join(';', styles);
     }
 
+    private string GetContainerCssClasses()
+    {
+        List<string> classes = ["bit-pnl-cnt"];
+
+        classes.Add(Position switch
+        {
+            BitPanelPosition.Start => "bit-pnl-start",
+            BitPanelPosition.End => "bit-pnl-end",
+            BitPanelPosition.Top => "bit-pnl-top",
+            BitPanelPosition.Bottom => "bit-pnl-bottom",
+            _ => "bit-pnl-end"
+        });
+
+        if (Classes?.Container is string containerClass && containerClass.HasValue())
+        {
+            classes.Add(containerClass);
+        }
+
+        return string.Join(' ', classes);
+    }
+
 
 
     public async ValueTask DisposeAsync()
@@ -278,7 +258,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing)
 
         try
         {
-            await _js.BitPanelDispose(_containerId);
+            await _js.SwipesDispose(_containerId);
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss
index a1127c1f69..a8a70f87d7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.scss
@@ -1,10 +1,6 @@
 @import "../../../Styles/functions.scss";
 
 .bit-pnl {
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
     font-weight: 400;
     font-size: spacing(2);
     z-index: $zindex-modal;
@@ -17,116 +13,23 @@
 }
 
 .bit-pnl-ovl {
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
-    cursor: pointer;
     position: fixed;
-    pointer-events: auto;
     z-index: $zindex-overlay;
-    background: $clr-bg-overlay;
 }
 
 .bit-pnl-cnt {
     opacity: 0;
-    flex-grow: 1;
-    display: flex;
-    outline: none;
-    overflow: auto;
     position: fixed;
     box-sizing: border-box;
-    flex-direction: column;
     z-index: $zindex-callout;
     background-color: $clr-bg-pri;
     box-shadow: $box-shadow-callout;
-    border-radius: 0 0 spacing(0.25) spacing(0.25);
     transition: transform 200ms ease-out, opacity 100ms ease-in;
 }
 
-.bit-pnl-hcn {
-    top: 0;
-    z-index: 1;
-    display: flex;
-    position: sticky;
-    font-weight: 600;
-    color: $clr-fg-pri;
-    align-items: center;
-    font-size: spacing(2.5);
-    overflow-wrap: anywhere;
-    background-color: $clr-bg-pri;
-    padding: spacing(2.25) spacing(3) 0;
-}
-
-.bit-pnl-ttl {
-    width: 100%;
-    hyphens: auto;
-    word-break: break-word;
-    overflow-wrap: break-word;
-}
-
-.bit-pnl-cls {
-    border: none;
-    display: flex;
-    cursor: pointer;
-    font-weight: 400;
-    width: spacing(4);
-    margin-left: auto;
-    height: spacing(4);
-    align-self: normal;
-    text-align: center;
-    align-items: center;
-    text-decoration: none;
-    box-sizing: border-box;
-    padding: 0 spacing(0.5);
-    justify-content: center;
-    font-size: spacing(1.75);
-    border-radius: spacing(0.25);
-    background-color: transparent;
-    color: $clr-fg-pri;
-
-    span {
-        height: 100%;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-
-        i {
-            margin: 0 spacing(0.5);
-        }
-    }
-
-    @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-pnl-bdy {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding-left: spacing(3);
-    padding-right: spacing(3);
-    padding-bottom: spacing(2.5);
-}
-
-.bit-pnl-fcn {
-    bottom: 0;
-    z-index: 1;
-    position: sticky;
-    padding: spacing(2) spacing(3);
-    background-color: $clr-bg-pri;
-}
-
-
 .bit-pnl-start {
     height: 100%;
     max-width: 85%;
@@ -150,9 +53,9 @@
 .bit-pnl-top {
     top: 0;
     width: 100%;
-    inset-inline: 0;
     max-width: 100%;
     max-height: 85%;
+    inset-inline: 0;
     height: fit-content;
     transform: translateY(-100%);
 }
@@ -161,9 +64,9 @@
     bottom: 0;
     top: unset;
     width: 100%;
-    inset-inline: 0;
     max-width: 100%;
     max-height: 85%;
+    inset-inline: 0;
     height: fit-content;
     transform: translateY(100%);
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts
deleted file mode 100644
index b478a2e469..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-namespace BitBlazorUI {
-    export class Panel {
-        private static _panels: BitPanel[] = [];
-
-        public static setup(
-            id: string,
-            trigger: number,
-            position: BitPanelPosition,
-            isRtl: boolean,
-            dotnetObj: DotNetObject) {
-            const element = document.getElementById(id);
-            if (!element) return;
-            const bcr = element.getBoundingClientRect();
-
-            let diffX = 0;
-            let diffY = 0;
-            let startX = -1;
-            let startY = -1;
-            let originalTransform: string;
-            const isTouchDevice = Utils.isTouchDevice();
-
-            const getX = (e: TouchEvent | PointerEvent) => isTouchDevice ? (e as TouchEvent).touches[0].screenX : (e as PointerEvent).screenX;
-            const getY = (e: TouchEvent | PointerEvent) => isTouchDevice ? (e as TouchEvent).touches[0].screenY : (e as PointerEvent).screenY;
-
-            const onStart = async (e: TouchEvent | PointerEvent): Promise<void> => {
-                startX = getX(e);
-                startY = getY(e);
-
-                element.style.transitionDuration = '0s';
-                originalTransform = element.style.transform;
-
-                await dotnetObj.invokeMethodAsync('OnStart', startX, startY);
-            };
-
-            const onMove = async (e: TouchEvent | PointerEvent): Promise<void> => {
-                if (startX === -1 || startY === -1) return;
-
-                diffX = getX(e) - startX;
-                diffY = getY(e) - startY;
-
-                if (e.cancelable) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-
-                if ((!isRtl && position === BitPanelPosition.Start) || (isRtl && position === BitPanelPosition.End)) {
-                    if (diffX < 0) {
-                        element.style.transform = `translateX(${diffX}px)`;
-                    } else {
-                        element.style.transform = originalTransform;
-                    }
-                }
-
-                if ((!isRtl && position === BitPanelPosition.End) || (isRtl && position === BitPanelPosition.Start)) {
-                    if (diffX > 0) {
-                        element.style.transform = `translateX(${diffX}px)`;
-                    } else {
-                        element.style.transform = originalTransform;
-                    }
-                }
-
-                if (position === BitPanelPosition.Top) {
-                    if (diffY < 0) {
-                        element.style.transform = `translateY(${diffY}px)`;
-                    } else {
-                        element.style.transform = originalTransform;
-                    }
-                }
-
-                if (position === BitPanelPosition.Bottom) {
-                    if (diffY > 0) {
-                        element.style.transform = `translateY(${diffY}px)`;
-                    } else {
-                        element.style.transform = originalTransform;
-                    }
-                }
-
-                await dotnetObj.invokeMethodAsync('OnMove', diffX, diffY);
-            };
-
-            const onEnd = async (e: TouchEvent | PointerEvent): Promise<void> => {
-                if (startX === -1 || startY === -1) return;
-
-                startX = startY = -1;
-
-                element.style.transitionDuration = '';
-                try {
-                    if (((!isRtl && position === BitPanelPosition.Start) || (isRtl && position === BitPanelPosition.End)) && diffX < 0) {
-                        if ((Math.abs(diffX) / bcr.width) > trigger) {
-                            return await dotnetObj.invokeMethodAsync('OnClose');
-                        }
-                    }
-
-                    if (((!isRtl && position === BitPanelPosition.End) || (isRtl && position === BitPanelPosition.Start)) && diffX > 0) {
-                        if ((diffX / bcr.width) > trigger) {
-                            return await dotnetObj.invokeMethodAsync('OnClose');
-                        }
-                    }
-
-                    if (position === BitPanelPosition.Top && diffY < 0) {
-                        if ((Math.abs(diffY) / bcr.height) > trigger) {
-                            return await dotnetObj.invokeMethodAsync('OnClose');
-                        }
-                    }
-
-                    if (position === BitPanelPosition.Bottom && diffY > 0) {
-                        if ((diffY / bcr.height) > trigger) {
-                            return await dotnetObj.invokeMethodAsync('OnClose');
-                        }
-                    }
-
-                    element.style.transform = originalTransform;
-                } finally {
-                    await dotnetObj.invokeMethodAsync('OnEnd', diffX, diffY);
-                    diffX = diffY = 0;
-                }
-            };
-
-            const onLeave = (e: PointerEvent) => {
-                dotnetObj.invokeMethodAsync('OnEnd', diffX, diffY);
-
-                startX = startY = -1;
-                diffX = diffY = 0;
-                element.style.transitionDuration = '';
-                element.style.transform = originalTransform;
-            }
-
-            if (isTouchDevice) {
-                element.addEventListener('touchstart', onStart);
-                element.addEventListener('touchmove', onMove);
-                element.addEventListener('touchend', onEnd);
-            } else {
-                element.addEventListener('pointerdown', onStart);
-                element.addEventListener('pointermove', onMove);
-                element.addEventListener('pointerup', onEnd);
-                element.addEventListener('pointerleave', onEnd, false);
-            }
-
-            const panel = new BitPanel(id, element, trigger, dotnetObj);
-            panel.setDisposer(() => {
-                if (isTouchDevice) {
-                    element.removeEventListener('touchstart', onStart);
-                    element.removeEventListener('touchmove', onMove);
-                    element.removeEventListener('touchend', onEnd);
-                } else {
-                    element.removeEventListener('pointerdown', onStart);
-                    element.removeEventListener('pointermove', onMove);
-                    element.removeEventListener('pointerup', onEnd);
-                    element.removeEventListener('pointerleave', onEnd, false);
-                }
-            });
-            Panel._panels.push(panel);
-        }
-
-        public static dispose(id: string) {
-            const panel = Panel._panels.find(r => r.id === id);
-            if (!panel) return;
-
-            Panel._panels = Panel._panels.filter(r => r.id !== id);
-            panel.dispose();
-        }
-    }
-
-    class BitPanel {
-        id: string;
-        element: HTMLElement;
-        trigger: number;
-        dotnetObj: DotNetObject;
-        disposer: () => void = () => { };
-
-        constructor(id: string, element: HTMLElement, trigger: number, dotnetObj: DotNetObject) {
-            this.id = id;
-            this.element = element;
-            this.trigger = trigger;
-            this.dotnetObj = dotnetObj;
-        }
-        public setDisposer(disposer: () => void) {
-            this.disposer = disposer;
-        }
-
-        public dispose() {
-            this.disposer();
-            this.dotnetObj.dispose();
-        }
-    }
-
-    enum BitPanelPosition {
-        Start = 0,
-        End = 1,
-        Top = 2,
-        Bottom = 3,
-    }
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs
index 97b134b402..270ae80e35 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelClassStyles.cs
@@ -16,34 +16,4 @@ public class BitPanelClassStyles
     /// Custom CSS classes/styles for the container of the BitPanel.
     /// </summary>
     public string? Container { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the header of the BitPanel.
-    /// </summary>
-    public string? Header { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the header text of the BitPanel.
-    /// </summary>
-    public string? HeaderText { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the close button of the BitPanel.
-    /// </summary>
-    public string? CloseButton { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the close button of the BitPanel.
-    /// </summary>
-    public string? CloseIcon { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the body of the BitPanel.
-    /// </summary>
-    public string? Body { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the footer of the BitPanel.
-    /// </summary>
-    public string? Footer { get; set; }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs
deleted file mode 100644
index a067205ae3..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanelJsRuntimeExtensions.cs
+++ /dev/null
@@ -1,19 +0,0 @@
-namespace Bit.BlazorUI;
-
-internal static class BitPanelJsRuntimeExtensions
-{
-    internal static ValueTask BitPanelSetup(this IJSRuntime js,
-                                            string id,
-                                            decimal trigger,
-                                            BitPanelPosition position,
-                                            bool isRtl,
-                                            DotNetObjectReference<BitPanel>? dotnetObjectReference)
-    {
-        return js.InvokeVoid("BitBlazorUI.Panel.setup", id, trigger, position, isRtl, dotnetObjectReference);
-    }
-
-    internal static ValueTask BitPanelDispose(this IJSRuntime jsRuntime, string id)
-    {
-        return jsRuntime.InvokeVoid("BitBlazorUI.Panel.dispose", id);
-    }
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs
index c3e313efdf..d0dce6f787 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesJsRuntimeExtensions.cs
@@ -5,13 +5,14 @@ namespace Bit.BlazorUI;
 internal static class SwipesJsRuntimeExtensions
 {
     internal static ValueTask SwipesSetup<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] T>(this IJSRuntime js,
-                                               string id,
-                                               decimal trigger,
-                                               SwipesPosition position,
-                                               bool isRtl,
-                                               DotNetObjectReference<T>? dotnetObj) where T : class
+        string id,
+        decimal trigger,
+        BitPanelPosition position,
+        bool isRtl,
+        DotNetObjectReference<T>? dotnetObj,
+        bool isResponsive = true) where T : class
     {
-        return js.InvokeVoid("BitBlazorUI.Swipes.setup", id, trigger, position, isRtl, dotnetObj);
+        return js.InvokeVoid("BitBlazorUI.Swipes.setup", id, trigger, position, isRtl, dotnetObj, isResponsive);
     }
 
     internal static ValueTask SwipesDispose(this IJSRuntime jsRuntime, string id)
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs
deleted file mode 100644
index b72a92bf13..0000000000
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/SwipesPosition.cs
+++ /dev/null
@@ -1,9 +0,0 @@
-namespace Bit.BlazorUI;
-
-public enum SwipesPosition
-{
-    Start,
-    End,
-    Top,
-    Bottom,
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts
index edd97dfc03..ea6fa55872 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts
@@ -7,9 +7,12 @@
             trigger: number,
             position: BitSwipePosition,
             isRtl: boolean,
-            dotnetObj: DotNetObject) {
-            const windowWidth = window.innerWidth;
-            if (windowWidth >= Utils.MAX_MOBILE_WIDTH) return;
+            dotnetObj: DotNetObject,
+            isResponsive: boolean) {
+            if (isResponsive) {
+                const windowWidth = window.innerWidth;
+                if (windowWidth >= Utils.MAX_MOBILE_WIDTH) return;
+            }
 
             const element = document.getElementById(id);
             if (!element) return;
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
index c6f0337ba9..09ae31d958 100644
--- a/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Styles/general.scss
@@ -1,9 +1,8 @@
 @import "functions.scss";
 
-@import "fabric.mdl2.bit.blazoui.scss";
-@import "theme-variables.scss";
-@import "components.scss";
 @import "bit-css.scss";
+@import "components.scss";
+@import "fabric.mdl2.bit.blazoui.scss";
 
 button {
     border: none;
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
new file mode 100644
index 0000000000..afd142cdd1
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
@@ -0,0 +1,320 @@
+@page "/components/propanel"
+
+<PageOutlet Url="components/ProPanel"
+            Title="ProPanel"
+            Description="propanel component of the bit BlazorUI components" />
+
+<div>
+    <ComponentDemo ComponentName="ProPanel"
+                   ComponentDescription="ProPanel is an advanced version of normal Panel with additional features that tailored to more usual use-cases."
+                   ComponentParameters="componentParameters"
+                   ComponentSubClasses="componentSubClasses"
+                   ComponentSubEnums="componentSubEnums">
+        <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+            <ExamplePreview>
+                <BitButton OnClick="() => isBasicProPanelOpen = true">Open ProPanel</BitButton>
+                <BitProPanel @bind-IsOpen="isBasicProPanelOpen">
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Header & Footer" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+            <ExamplePreview>
+                <BitButton OnClick="() => isProPanelWithHeaderTextOpen = true">Open ProPanel with HeaderText</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelWithHeaderTextOpen" HeaderText="BitProPanel with HeaderText">
+                    <div style="width:300px">
+                        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>
+                </BitProPanel>
+                <br />
+                <BitButton OnClick="() => isProPanelWithHeaderOpen = true">Open ProPanel with Header</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelWithHeaderOpen">
+                    <Header>
+                        <div>
+                            <div style="margin-bottom:4px">BitProPanel with Header</div>
+                            <BitSearchBox Placeholder="Search here..." />
+                        </div>
+                    </Header>
+                    <Body>
+                        <div style="width:300px">
+                            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>
+                    </Body>
+                </BitProPanel>
+                <br /><br /><br />
+                <BitButton OnClick="() => isProPanelWithFooterTextOpen = true">Open ProPanel with FooterText</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelWithFooterTextOpen" FooterText="BitProPanel with FooterText">
+                    <div style="width:300px">
+                        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>
+                </BitProPanel>
+                <br />
+                <BitButton OnClick="() => isProPanelWithFooterOpen = true">Open ProPanel with Footer</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelWithFooterOpen">
+                    <Body>
+                        <div style="width:300px">
+                            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>
+                    </Body>
+                    <Footer>
+                        <h3 style="margin-bottom:4px">BitProPanel with Footer</h3>
+                        <BitButton OnClick="() => isProPanelWithFooterOpen = false">Save</BitButton>
+                        <BitButton OnClick="() => isProPanelWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
+                    </Footer>
+                </BitProPanel>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+            <ExamplePreview>
+                <div>BitProPanel has some advanced options to be customized.</div>
+                <br /><br />
+                <BitButton OnClick="() => bitProPanelRef.Open()">Open ProPanel with ShowCloseButton</BitButton>
+                <BitProPanel @ref="bitProPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br /><br />
+                <BitButton OnClick="() => isBlockingProPanelOpen = true">Open ProPanel with Blocking</BitButton>
+                <BitProPanel @bind-IsOpen="isBlockingProPanelOpen" HeaderText="Blocking" ShowCloseButton Blocking>
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br /><br />
+                <BitButton OnClick="() => isModelessProPanelOpen = true">Open ProPanel with Modeless</BitButton>
+                <BitProPanel @bind-IsOpen="isModelessProPanelOpen" HeaderText="Modeless" ShowCloseButton Modeless>
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br /><br />
+                <BitButton OnClick="() => isModeFullProPanelOpen = true">Open ProPanel with ModeFull</BitButton>
+                <BitProPanel @bind-IsOpen="isModeFullProPanelOpen" HeaderText="ModeFull" ShowCloseButton ModeFull>
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br /><br />
+                <BitButton OnClick="() => isAutoToggleScrollProPanelOpen = true">Open ProPanel with AutoToggleScroll</BitButton>
+                <BitProPanel @bind-IsOpen="isAutoToggleScrollProPanelOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Position and size" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+            <ExamplePreview>
+                <div>To set the Panel position on the page you can use the Position parameter.</div>
+                <br /><br />
+                <div class="position-btn">
+                    <BitSpinButton @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    <div>
+                        <BitButton OnClick="() => isStartProPanelOpen = true">Start</BitButton>
+                        <BitButton OnClick="() => isEndProPanelOpen = true">End</BitButton>
+                    </div>
+                    <div>
+                        <BitButton OnClick="() => isTopProPanelOpen = true">Top</BitButton>
+                        <BitButton OnClick="() => isBottomProPanelOpen = true">Bottom</BitButton>
+                    </div>
+                </div>
+
+                <BitProPanel @bind-Size="customProPanelSize"
+                             @bind-IsOpen="isStartProPanelOpen"
+                             HeaderText="Start BitProPanel"
+                             Position="BitPanelPosition.Start">
+                    BitProPanel with Start position and custom Size.
+                    <BitSpinButton @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    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.
+                </BitProPanel>
+
+                <BitProPanel @bind-Size="customProPanelSize"
+                             @bind-IsOpen="isEndProPanelOpen"
+                             HeaderText="End BitProPanel"
+                             Position="BitPanelPosition.End">
+                    BitProPanel with End position and custom Size.
+                    <BitSpinButton @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    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.
+                </BitProPanel>
+
+                <BitProPanel @bind-Size="customProPanelSize"
+                             @bind-IsOpen="isTopProPanelOpen"
+                             HeaderText="Top BitProPanel"
+                             Position="BitPanelPosition.Top">
+                    BitProPanel with Top position and custom Size.
+                    <BitSpinButton @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    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.
+                </BitProPanel>
+
+                <BitProPanel @bind-Size="customProPanelSize"
+                             @bind-IsOpen="isBottomProPanelOpen"
+                             HeaderText="Bottom BitProPanel"
+                             Position="BitPanelPosition.Bottom">
+                    BitProPanel with Bottom position and custom Size.
+                    <BitSpinButton @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    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.
+                </BitProPanel>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+            <ExamplePreview>
+                <div>Explore styling and class customization for BitProPanel, including component styles, custom classes, and detailed styles.</div>
+                <br /><br />
+                <div>Component's Style & Class:</div><br />
+                <BitButton OnClick="() => isStyledProPanelOpen = true">Open Styled ProPanel</BitButton>
+                <BitProPanel @bind-IsOpen="isStyledProPanelOpen" HeaderText="Style" ShowCloseButton Style="font-size: 3rem;">
+                    BitProPanel with custom style.
+                </BitProPanel>
+                <br /><br />
+                <BitButton OnClick="() => isClassedProPanelOpen = true">Open Classed ProPanel</BitButton>
+                <BitProPanel @bind-IsOpen="isClassedProPanelOpen" HeaderText="Class" ShowCloseButton Class="custom-class">
+                    BitProPanel with custom class:
+                    <div class="item">Item 1</div>
+                    <div class="item">Item 2</div>
+                    <div class="item">Item 3</div>
+
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br /><br />
+                <div><b>Styles</b> & <b>Classes</b>:</div><br />
+                <BitButton OnClick="() => isProPanelStylesOpen = true">Open ProPanel Styles</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelStylesOpen"
+                             HeaderText="Styles" ShowCloseButton
+                             Styles="@(new() { Overlay = "background-color: #4776f433;",
+                                               Container = "box-shadow: 0 0 1rem tomato;" })">
+                    BitProPanel with <b>Styles</b> to customize its elements.
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+                <br /><br />
+                <BitButton OnClick="() => isProPanelClassesOpen = true">Open ProPanel Classes</BitButton>
+                <BitProPanel @bind-IsOpen="isProPanelClassesOpen"
+                             HeaderText="Classes" ShowCloseButton
+                             FooterText="This is a footer text!"
+                             Classes="@(new() { Container = "custom-container",
+                                                Overlay = "custom-overlay",
+                                                HeaderContainer = "custom-header-container",
+                                                Header = "custom-header",
+                                                Body = "custom-body",
+                                                Footer = "custom-footer" })">
+                    BitProPanel with <b>Classes</b> to customize its elements.
+                    <div style="width:300px">
+                        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.
+                    </div>
+                </BitProPanel>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="RTL" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+            <ExamplePreview>
+                <div>Use BitProPanel in right-to-left (RTL).</div>
+                <br /><br />
+                <div>
+                    <div class="position-btn" dir="rtl">
+                        <div>
+                            <BitButton OnClick="() => isRtlProPanelOpenStart = true">آغاز</BitButton>
+                            <BitButton OnClick="() => isRtlProPanelOpenEnd = true">پایان</BitButton>
+                        </div>
+                    </div>
+
+                    <BitProPanel @bind-IsOpen="isRtlProPanelOpenStart"
+                                 Dir="BitDir.Rtl"
+                                 HeaderText="سرصفحه ی آغاز"
+                                 Position="BitPanelPosition.Start">
+                        <div style="width:300px">
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                        </div>
+                    </BitProPanel>
+
+                    <BitProPanel @bind-IsOpen="isRtlProPanelOpenEnd"
+                                 Dir="BitDir.Rtl"
+                                 HeaderText="سرصفحه ی پایان"
+                                 Position="BitPanelPosition.End">
+                        <div style="width:300px">
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                            کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                            در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                        </div>
+                    </BitProPanel>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+    </ComponentDemo>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000000..7cac770d07
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.cs
@@ -0,0 +1,621 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProPanel;
+
+public partial class BitProPanelDemo
+{
+    private readonly List<ComponentParameter> componentParameters =
+    [
+        new()
+        {
+            Name = "AutoToggleScroll",
+            Type = "bool",
+            DefaultValue = "false",
+            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",
+            DefaultValue = "false",
+            Description = "Whether the panel can be dismissed by clicking outside of it on the overlay.",
+        },
+        new()
+        {
+            Name = "ChildContent",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The content of the panel.",
+        },
+        new()
+        {
+            Name = "Classes",
+            Type = "BitProPanelClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS classes for different parts of the panel.",
+            Href = "#class-styles",
+            LinkType = LinkType.Link,
+        },
+        new()
+        {
+            Name = "Footer",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The template used to render the footer section of the panel.",
+        },
+        new()
+        {
+            Name = "FooterText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text of the footer section of the panel.",
+        },
+        new()
+        {
+            Name = "Header",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The template used to render the header section of the panel.",
+        },
+        new()
+        {
+            Name = "HeaderText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text of the header section of the panel.",
+        },
+        new()
+        {
+            Name = "IsOpen",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Determines the openness of the panel.",
+        },
+        new()
+        {
+            Name = "ModeFull",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Renders the overlay in full mode that gives it an opaque background.",
+        },
+        new()
+        {
+            Name = "Modeless",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Removes the overlay element of the panel.",
+        },
+        new()
+        {
+            Name = "OnDismiss",
+            Type = "EventCallback<MouseEventArgs>",
+            Description = "A callback function for when the Panel is dismissed.",
+        },
+        new()
+        {
+            Name = "OnSwipeStart",
+            Type = "EventCallback<decimal>",
+            Description = "The event callback for when the swipe action starts on the container of the panel.",
+        },
+        new()
+        {
+            Name = "OnSwipeMove",
+            Type = "EventCallback<decimal>",
+            Description = "The event callback for when the swipe action moves on the container of the panel.",
+        },
+        new()
+        {
+            Name = "OnSwipeEnd",
+            Type = "EventCallback<decimal>",
+            Description = "The event callback for when the swipe action ends on the container of the panel.",
+        },
+        new()
+        {
+            Name = "Position",
+            Type = "BitPanelPosition?",
+            DefaultValue = "null",
+            Description = "The position of the panel to show on the screen.",
+            Href = "#position-enum",
+            LinkType = LinkType.Link,
+        },
+        new()
+        {
+            Name = "Size",
+            Type = "double?",
+            DefaultValue = "null",
+            Description = "The value of the height or width (based on the position) of the Panel.",
+        },
+        new()
+        {
+            Name = "ScrollerSelector",
+            Type = "string",
+            DefaultValue = "null",
+            Description = "Specifies the element selector for which the Panel disables its scroll if applicable.",
+        },
+        new()
+        {
+            Name = "ShowCloseButton",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Shows the close button of the Panel.",
+        },
+        new()
+        {
+            Name = "Styles",
+            Type = "BitProPanelClassStyles?",
+            DefaultValue = "null",
+            Description = "Custom CSS styles for different parts of the panel component.",
+            Href = "#class-styles",
+            LinkType = LinkType.Link,
+        },
+        new()
+        {
+            Name = "SwipeTrigger",
+            Type = "decimal?",
+            DefaultValue = "null",
+            Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).",
+        },
+    ];
+
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        new()
+        {
+            Id = "class-styles",
+            Title = "BitProPanelClassStyles",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Root",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the root element of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "Overlay",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the overlay of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "Container",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the container of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "HeaderContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the header container of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "Header",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the header of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "CloseButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the close button of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "CloseIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the close icon of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "Body",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the body of the BitProPanel."
+               },
+               new()
+               {
+                   Name = "Footer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the footer container of the BitProPanel."
+               }
+            ]
+        }
+    ];
+
+    private readonly List<ComponentSubEnum> componentSubEnums =
+    [
+        new()
+        {
+            Id = "position-enum",
+            Name = "BitPanelPosition",
+            Description = "",
+            Items =
+            [
+                new() { Name = "Start", Value = "0" },
+                new() { Name = "End", Value = "1" },
+                new() { Name = "Top", Value = "2" },
+                new() { Name = "Bottom", Value = "3" }
+            ]
+        }
+    ];
+
+
+
+    private bool isBasicProPanelOpen;
+
+    private bool isProPanelWithHeaderTextOpen;
+    private bool isProPanelWithHeaderOpen;
+    private bool isProPanelWithFooterTextOpen;
+    private bool isProPanelWithFooterOpen;
+
+    private bool isBlockingProPanelOpen;
+    private bool isModelessProPanelOpen;
+    private bool isModeFullProPanelOpen;
+    private bool isAutoToggleScrollProPanelOpen;
+    private BitProPanel bitProPanelRef = default!;
+
+    private double customProPanelSize = 300;
+    private bool isStartProPanelOpen;
+    private bool isEndProPanelOpen;
+    private bool isTopProPanelOpen;
+    private bool isBottomProPanelOpen;
+
+    private bool isStyledProPanelOpen;
+    private bool isClassedProPanelOpen;
+    private bool isProPanelStylesOpen;
+    private bool isProPanelClassesOpen;
+
+    private bool isRtlProPanelOpenStart;
+    private bool isRtlProPanelOpenEnd;
+
+
+
+    private readonly string example1RazorCode = @"
+<BitButton OnClick=""() => isBasicProPanelOpen = true"">Open ProPanel</BitButton>
+<BitProPanel @bind-IsOpen=""isBasicProPanelOpen"">
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>";
+    private readonly string example1CsharpCode = @"
+private bool isBasicProPanelOpen;";
+
+    private readonly string example2RazorCode = @"
+<BitButton OnClick=""() => isProPanelWithHeaderTextOpen = true"">Open ProPanel with HeaderText</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelWithHeaderTextOpen"" HeaderText=""BitProPanel with HeaderText"">
+    <div style=""width:300px"">
+        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>
+</BitProPanel>
+
+<BitButton OnClick=""() => isProPanelWithHeaderOpen = true"">Open ProPanel with Header</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelWithHeaderOpen"">
+    <Header>
+        <div>
+            <div style=""margin-bottom:4px"">BitProPanel with Header</div>
+            <BitSearchBox Placeholder=""Search here..."" />
+        </div>
+    </Header>
+    <Body>
+        <div style=""width:300px"">
+            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>
+    </Body>
+</BitProPanel>
+
+
+<BitButton OnClick=""() => isProPanelWithFooterTextOpen = true"">Open ProPanel with FooterText</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelWithFooterTextOpen"" FooterText=""BitProPanel with FooterText"">
+    <div style=""width:300px"">
+        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>
+</BitProPanel>
+
+<BitButton OnClick=""() => isProPanelWithFooterOpen = true"">Open ProPanel with Footer</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelWithFooterOpen"">
+    <Body>
+        <div style=""width:300px"">
+            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>
+    </Body>
+    <Footer>
+        <h3 style=""margin-bottom:4px"">BitProPanel with Footer</h3>
+        <BitButton OnClick=""() => isProPanelWithFooterOpen = false"">Save</BitButton>
+        <BitButton OnClick=""() => isProPanelWithFooterOpen = false"" Variant=""BitVariant.Outline"">Close</BitButton>
+    </Footer>
+</BitProPanel>";
+    private readonly string example2CsharpCode = @"
+private bool isProPanelWithHeaderTextOpen;
+private bool isProPanelWithHeaderOpen;
+private bool isProPanelWithFooterTextOpen;
+private bool isProPanelWithFooterOpen;";
+
+    private readonly string example3RazorCode = @"
+<BitButton OnClick=""() => bitProPanelRef.Open()"">Open ProPanel with ShowCloseButton</BitButton>
+<BitProPanel @ref=""bitProPanelRef"" HeaderText=""ShowCloseButton"" ShowCloseButton>
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isBlockingProPanelOpen = true"">Open ProPanel with Blocking</BitButton>
+<BitProPanel @bind-IsOpen=""isBlockingProPanelOpen"" HeaderText=""Blocking"" ShowCloseButton Blocking>
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isModelessProPanelOpen = true"">Open ProPanel with Modeless</BitButton>
+<BitProPanel @bind-IsOpen=""isModelessProPanelOpen"" HeaderText=""Modeless"" ShowCloseButton Modeless>
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isModeFullProPanelOpen = true"">Open ProPanel with ModeFull</BitButton>
+<BitProPanel @bind-IsOpen=""isModeFullProPanelOpen"" HeaderText=""ModeFull"" ShowCloseButton ModeFull>
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isAutoToggleScrollProPanelOpen = true"">Open ProPanel with AutoToggleScroll</BitButton>
+<BitProPanel @bind-IsOpen=""isAutoToggleScrollProPanelOpen"" HeaderText=""AutoToggleScroll"" AutoToggleScroll>
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>";
+    private readonly string example3CsharpCode = @"
+private bool isBlockingProPanelOpen;
+private bool isModelessProPanelOpen;
+private bool isModeFullProPanelOpen;
+private bool isAutoToggleScrollProPanelOpen;
+private BitProPanel bitProPanelRef = default!;";
+
+    private readonly string example4RazorCode = @"
+<BitSpinButton @bind-Value=""customProPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+
+<BitButton OnClick=""() => isStartProPanelOpen = true"">Start</BitButton>
+<BitButton OnClick=""() => isEndProPanelOpen = true"">End</BitButton>
+
+<BitButton OnClick=""() => isTopProPanelOpen = true"">Top</BitButton>
+<BitButton OnClick=""() => isBottomProPanelOpen = true"">Bottom</BitButton>
+
+
+<BitProPanel @bind-Size=""customProPanelSize""
+             @bind-IsOpen=""isStartProPanelOpen""
+             HeaderText=""Start BitProPanel""
+             Position=""BitPanelPosition.Start"">
+    BitProPanel with Start position and custom Size.
+    <BitSpinButton @bind-Value=""customProPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    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.
+</BitProPanel>
+
+<BitProPanel @bind-Size=""customProPanelSize""
+             @bind-IsOpen=""isEndProPanelOpen""
+             HeaderText=""End BitProPanel""
+             Position=""BitPanelPosition.End"">
+    BitProPanel with End position and custom Size.
+    <BitSpinButton @bind-Value=""customProPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    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.
+</BitProPanel>
+
+<BitProPanel @bind-Size=""customProPanelSize""
+             @bind-IsOpen=""isTopProPanelOpen""
+             HeaderText=""Top BitProPanel""
+             Position=""BitPanelPosition.Top"">
+    BitProPanel with Top position and custom Size.
+    <BitSpinButton @bind-Value=""customProPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    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.
+</BitProPanel>
+
+<BitProPanel @bind-Size=""customProPanelSize""
+             @bind-IsOpen=""isBottomProPanelOpen""
+             HeaderText=""Bottom BitProPanel""
+             Position=""BitPanelPosition.Bottom"">
+    BitProPanel with Bottom position and custom Size.
+    <BitSpinButton @bind-Value=""customProPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    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.
+</BitProPanel>";
+    private readonly string example4CsharpCode = @"
+private double customPanelSize = 300;
+private bool isOpenInPositionStart;
+private bool isOpenPositionEnd;
+private bool isOpenInPositionTop;
+private bool isOpenInPositionBottom;";
+
+    private readonly string example5RazorCode = @"
+<style>
+    .custom-class .item {
+        color: black;
+        padding: 1rem;
+        margin: 0.5rem;
+        border-radius: 0.5rem;
+        background-color: brown;
+    }
+
+    .custom-container {
+        border: 0.25rem solid #0054C6;
+    }
+
+    .custom-overlay {
+        background-color: #ffbd5a66;
+    }
+
+    .custom-header-container {
+        padding: 1.5rem;
+        background-color: tomato;
+    }
+
+    .custom-header {
+        font-size: 2rem;
+    }
+
+    .custom-body {
+        color: black;
+        background-color: lightseagreen;
+    }
+
+    .custom-footer {
+        color: brown;
+        padding: 1.5rem;
+        font-size: 1.5rem;
+        background-color: tomato;
+    }
+</style>
+
+<BitButton OnClick=""() => isStyledProPanelOpen = true"">Open Styled ProPanel</BitButton>
+<BitProPanel @bind-IsOpen=""isStyledProPanelOpen"" HeaderText=""Style"" ShowCloseButton Style=""font-size: 3rem;"">
+    BitProPanel with custom style.
+</BitProPanel>
+
+<BitButton OnClick=""() => isClassedProPanelOpen = true"">Open Classed ProPanel</BitButton>
+<BitProPanel @bind-IsOpen=""isClassedProPanelOpen"" HeaderText=""Class"" ShowCloseButton Class=""custom-class"">
+    BitProPanel with custom class:
+    <div class=""item"">Item 1</div>
+    <div class=""item"">Item 2</div>
+    <div class=""item"">Item 3</div
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isProPanelStylesOpen = true"">Open ProPanel Styles</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelStylesOpen""
+             HeaderText=""Styles"" ShowCloseButton
+             Styles=""@(new() { Overlay = ""background-color: #4776f433;"",
+                               Container = ""box-shadow: 0 0 1rem tomato;"" })"">
+    BitProPanel with <b>Styles</b> to customize its elements.
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>
+
+<BitButton OnClick=""() => isProPanelClassesOpen = true"">Open ProPanel Classes</BitButton>
+<BitProPanel @bind-IsOpen=""isProPanelClassesOpen""
+             HeaderText=""Classes"" ShowCloseButton
+             FooterText=""This is a footer text!""
+             Classes=""@(new() { Container = ""custom-container"",
+                                Overlay = ""custom-overlay"",
+                                HeaderContainer = ""custom-header-container"",
+                                Header = ""custom-header"",
+                                Body = ""custom-body"",
+                                Footer = ""custom-footer"" })"">
+    BitProPanel with <b>Classes</b> to customize its elements.
+    <div style=""width:300px"">
+        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.
+    </div>
+</BitProPanel>";
+    private readonly string example5CsharpCode = @"
+private bool isStyledPanelOpen;
+private bool isClassedPanelOpen;
+private bool isPanelStylesOpen;
+private bool isPanelClassesOpen;";
+
+    private readonly string example6RazorCode = @"
+<BitButton OnClick=""() => isRtlPanelOpenStart = true"">آغاز</BitButton>
+<BitButton OnClick=""() => isRtlPanelOpenEnd = true"">پایان</BitButton>
+
+<BitProPanel @bind-IsOpen=""isRtlProPanelOpenStart""
+             Dir=""BitDir.Rtl""
+             HeaderText=""سرصفحه ی آغاز""
+             Position=""BitPanelPosition.Start"">
+    <div style=""width:300px"">
+        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+    </div>
+</BitProPanel
+<BitProPanel @bind-IsOpen=""isRtlProPanelOpenEnd""
+             Dir=""BitDir.Rtl""
+             HeaderText=""سرصفحه ی پایان""
+             Position=""BitPanelPosition.End"">
+    <div style=""width:300px"">
+        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+    </div>
+</BitProPanel>";
+    private readonly string example6CsharpCode = @"
+private bool isRtlProPanelOpenStart;
+private bool isRtlProPanelOpenEnd;";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss
new file mode 100644
index 0000000000..2fd279810f
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss
@@ -0,0 +1,60 @@
+@import '../../../../Styles/abstracts/functions';
+
+.btn-container {
+    display: flex;
+    gap: rem2(16px);
+    flex-flow: column;
+    max-width: max-content;
+}
+
+.position-btn {
+    gap: rem2(16px);
+    display: flex;
+    flex-flow: column nowrap;
+
+    div {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+::deep {
+    .custom-class {
+        .item {
+            color: black;
+            padding: 1rem;
+            margin: 0.5rem;
+            border-radius: 0.5rem;
+            background-color: brown;
+        }
+    }
+
+    .custom-container {
+        border: 0.25rem solid #0054C6;
+    }
+
+    .custom-overlay {
+        background-color: #ffbd5a66;
+    }
+
+    .custom-header-container {
+        padding: 1.5rem;
+        background-color: tomato;
+    }
+
+    .custom-header {
+        font-size: 2rem;
+    }
+
+    .custom-body {
+        color: black;
+        background-color: lightseagreen;
+    }
+
+    .custom-footer {
+        color: brown;
+        padding: 1.5rem;
+        font-size: 1.5rem;
+        background-color: tomato;
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
index e282901360..adda9f235c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor
@@ -14,7 +14,7 @@
             <ExamplePreview>
                 <BitButton OnClick="() => isBasicPanelOpen = true">Open Panel</BitButton>
                 <BitPanel @bind-IsOpen="isBasicPanelOpen">
-                    <div style="width:300px">
+                    <div style="width:300px;padding:1rem">
                         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
@@ -24,111 +24,43 @@
             </ExamplePreview>
         </ComponentExampleBox>
 
-        <ComponentExampleBox Title="Header" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
-            <ExamplePreview>
-                <div>HeaderText:</div><br />
-                <BitButton OnClick="() => isPanelWithHeaderTextOpen = true">Open Panel</BitButton>
-                <BitPanel HeaderText="Simple header" @bind-IsOpen="isPanelWithHeaderTextOpen">
-                    <div style="width:300px">
-                        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>
-                </BitPanel>
-                <br /><br /><br />
-                <div>HeaderTemplate:</div><br />
-                <BitButton OnClick="() => isPanelWithCustomHeaderOpen = true">Open Panel</BitButton>
-                <BitPanel @bind-IsOpen="isPanelWithCustomHeaderOpen">
-                    <HeaderTemplate>
-                        <div style="margin-bottom:1rem">
-                            <p>BitPanel with custom header content</p>
-                            <BitSearchBox Placeholder="Search here..." />
-                        </div>
-                    </HeaderTemplate>
-                    <ChildContent>
-                        <div style="width:300px">
-                            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>
-                    </ChildContent>
-                </BitPanel>
-            </ExamplePreview>
-        </ComponentExampleBox>
-
-        <ComponentExampleBox Title="Footer" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
-            <ExamplePreview>
-                <div>FooterTemplate:</div><br />
-                <BitButton OnClick="() => isPanelWithFooterOpen = true">Open Panel</BitButton>
-                <BitPanel @bind-IsOpen="isPanelWithFooterOpen">
-                    <ChildContent>
-                        <div style="width:300px">
-                            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>
-                    </ChildContent>
-                    <FooterTemplate>
-                        <BitButton OnClick="() => isPanelWithFooterOpen = false">Save</BitButton>
-                        <BitButton Variant="BitVariant.Outline" OnClick="() => isPanelWithFooterOpen = false">Close</BitButton>
-                    </FooterTemplate>
-                </BitPanel>
-            </ExamplePreview>
-        </ComponentExampleBox>
-
-        <ComponentExampleBox Title="Advanced options" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+        <ComponentExampleBox Title="Advanced options" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
             <ExamplePreview>
                 <div>BitPanel has some advanced options to be customized.</div>
                 <br /><br />
-                <div>ShowCloseButton:</div><br />
-                <BitButton OnClick="() => bitPanelRef.Open()">Open Panel</BitButton>
-                <BitPanel @ref="bitPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
-                    <div style="width:300px">
-                        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.
-                    </div>
-                </BitPanel>
-                <br /><br /><br />
                 <div>Blocking:</div><br />
                 <BitButton OnClick="() => isBlockingPanelOpen = true">Open Panel</BitButton>
-                <BitPanel HeaderText="Blocking" @bind-IsOpen="isBlockingPanelOpen" Blocking ShowCloseButton>
-                    <div style="width:300px">
-                        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.
+                <BitPanel @bind-IsOpen="isBlockingPanelOpen" Blocking>
+                    <div style="width:300px;padding:1rem">
+                        <h3>Blocking</h3>
+                        <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.
+                        </div>
+                        <BitButton OnClick="() => isBlockingPanelOpen = false">Close</BitButton>
                     </div>
                 </BitPanel>
                 <br /><br /><br />
                 <div>Modeless:</div><br />
                 <BitButton OnClick="() => isModelessPanelOpen = true">Open Panel</BitButton>
-                <BitPanel HeaderText="Modeless" @bind-IsOpen="isModelessPanelOpen" Modeless ShowCloseButton>
-                    <div style="width:300px">
-                        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.
+                <BitPanel @bind-IsOpen="isModelessPanelOpen" @ref="modelessPanelRef" Modeless>
+                    <div style="width:300px;padding:1rem">
+                        <h3>Modeless</h3>
+                        <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.
+                        </div>
+                        <BitButton OnClick="() => modelessPanelRef.Close()">Close</BitButton>
                     </div>
                 </BitPanel>
                 <br /><br /><br />
                 <div>AutoToggleScroll:</div><br />
                 <BitButton OnClick="() => isAutoToggleScrollPanelOpen = true">Open Panel</BitButton>
-                <BitPanel HeaderText="AutoToggleScroll" @bind-IsOpen="isAutoToggleScrollPanelOpen" AutoToggleScroll>
-                    <div style="width:300px">
+                <BitPanel @bind-IsOpen="isAutoToggleScrollPanelOpen" AutoToggleScroll>
+                    <div style="width:300px;padding:1rem">
+                        <h3>AutoToggleScroll</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.
@@ -137,7 +69,7 @@
             </ExamplePreview>
         </ComponentExampleBox>
 
-        <ComponentExampleBox Title="Position and size" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+        <ComponentExampleBox Title="Position and size" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
             <ExamplePreview>
                 <div>To set the Panel position on the page you can use the Position parameter.</div>
                 <br /><br />
@@ -153,69 +85,82 @@
                     </div>
                 </div>
 
-                <BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenInPositionStart" Position="BitPanelPosition.Start">
-                    BitPanel with Start position and custom Size.
-                    <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                <BitPanel @bind-Size="customPanelSize"
+                          @bind-IsOpen="isOpenInPositionStart"
+                          Position="BitPanelPosition.Start">
+                    <div style="padding:1rem">
+                        BitPanel with Start position and custom Size.
+                        <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    </div>
                 </BitPanel>
 
-                <BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenPositionEnd" Position="BitPanelPosition.End">
-                    BitPanel with End position and custom Size.
-                    <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                <BitPanel @bind-Size="customPanelSize"
+                          @bind-IsOpen="isOpenPositionEnd"
+                          Position="BitPanelPosition.End">
+                    <div style="padding:1rem">
+                        BitPanel with End position and custom Size.
+                        <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    </div>
                 </BitPanel>
 
                 <BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenInPositionTop" Position="BitPanelPosition.Top">
-                    BitPanel with Top position and custom Size.
-                    <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    <div style="padding:1rem">
+                        BitPanel with Top position and custom Size.
+                        <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    </div>
                 </BitPanel>
 
-                <BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenInPositionBottom" Position="BitPanelPosition.Bottom">
-                    BitPanel with Bottom position and custom Size.
-                    <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                <BitPanel @bind-Size="customPanelSize"
+                          @bind-IsOpen="isOpenInPositionBottom"
+                          Position="BitPanelPosition.Bottom">
+                    <div style="padding:1rem">
+                        BitPanel with Bottom position and custom Size.
+                        <BitSpinButton @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
+                    </div>
                 </BitPanel>
             </ExamplePreview>
         </ComponentExampleBox>
 
-        <ComponentExampleBox Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+        <ComponentExampleBox Title="Style & Class" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
             <ExamplePreview>
                 <div>Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.</div>
                 <br /><br />
                 <div>Component's Style & Class:</div><br />
                 <BitButton OnClick="() => isStyledPanelOpen = true">Open Styled panel</BitButton>
-                <br /><br />
-                <BitButton OnClick="() => isClassedPanelOpen = true">Open Classed panel</BitButton>
-                <br /><br /><br />
-                <div><b>Styles</b> & <b>Classes</b>:</div><br />
-                <BitButton OnClick="() => isPanelStylesOpen = true">Open panel Styles</BitButton>
-                <br /><br />
-                <BitButton OnClick="() => isPanelClassesOpen = true">Open panel Classes</BitButton>
-
                 <BitPanel @bind-IsOpen="isStyledPanelOpen" Style="font-size: 3rem;">
-                    BitPanel with custom style.
+                    <div style="padding:1rem">
+                        BitPanel with custom style.
+                    </div>
                 </BitPanel>
-
+                <br /><br />
+                <BitButton OnClick="() => isClassedPanelOpen = true">Open Classed panel</BitButton>
                 <BitPanel @bind-IsOpen="isClassedPanelOpen" Class="custom-class">
-                    BitPanel with custom class:
-                    <div class="item">Item 1</div>
-                    <div class="item">Item 2</div>
-                    <div class="item">Item 3</div>
+                    <div style="padding:1rem">
+                        BitPanel with custom class:
+                        <div class="item">Item 1</div>
+                        <div class="item">Item 2</div>
+                        <div class="item">Item 3</div>
+                    </div>
                 </BitPanel>
-
-                <BitPanel @bind-IsOpen="isPanelStylesOpen" Styles="@(new() { Overlay = "background-color: #4776f433;", Container = "box-shadow: 0 0 1rem tomato;" })">
+                <br /><br /><br /><br />
+                <div><b>Styles</b> & <b>Classes</b>:</div><br />
+                <BitButton OnClick="() => isPanelStylesOpen = true">Open panel Styles</BitButton>
+                <BitPanel @bind-IsOpen="isPanelStylesOpen"
+                          Styles="@(new() { Overlay = "background-color: #4776f433;",
+                                            Container = "padding: 1rem; box-shadow: 0 0 1rem tomato;" })">
                     BitPanel with <b>Styles</b> to customize its elements.
                 </BitPanel>
-
+                <br /><br />
+                <BitButton OnClick="() => isPanelClassesOpen = true">Open panel Classes</BitButton>
                 <BitPanel @bind-IsOpen="isPanelClassesOpen"
-                          HeaderText="Simple header"
                           Classes="@(new() { Container = "custom-container",
-                                             Overlay = "custom-overlay",
-                                             Body = "custom-body",
-                                             Header = "custom-header" })">
+                                             Overlay = "custom-overlay" })">
                     BitPanel with <b>Classes</b> to customize its elements.
                 </BitPanel>
             </ExamplePreview>
         </ComponentExampleBox>
 
-        <ComponentExampleBox Title="RTL" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+        <ComponentExampleBox Title="RTL" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
             <ExamplePreview>
                 <div>Use BitPanel in right-to-left (RTL).</div>
                 <br /><br />
@@ -227,8 +172,10 @@
                         </div>
                     </div>
 
-                    <BitPanel @bind-IsOpen="isRtlPanelOpenStart" Dir="BitDir.Rtl" HeaderText="سرصفحه ی آغاز" Position="BitPanelPosition.Start">
-                        <div style="width:300px">
+                    <BitPanel @bind-IsOpen="isRtlPanelOpenStart"
+                              Dir="BitDir.Rtl"
+                              Position="BitPanelPosition.Start">
+                        <div style="width:300px;padding:1rem">
                             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                             چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                             کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
@@ -236,8 +183,10 @@
                         </div>
                     </BitPanel>
 
-                    <BitPanel @bind-IsOpen="isRtlPanelOpenEnd" Dir="BitDir.Rtl" HeaderText="سرصفحه ی پایان" Position="BitPanelPosition.End">
-                        <div style="width:300px">
+                    <BitPanel @bind-IsOpen="isRtlPanelOpenEnd"
+                              Dir="BitDir.Rtl"
+                              Position="BitPanelPosition.End">
+                        <div style="width:300px;padding:1rem">
                             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                             چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                             کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
index f1d64e297e..ac7c61e7c0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.cs
@@ -35,27 +35,6 @@ public partial class BitPanelDemo
             LinkType = LinkType.Link,
         },
         new()
-        {
-            Name = "FooterTemplate",
-            Type = "RenderFragment?",
-            DefaultValue = "null",
-            Description = "The template used to render the footer section of the panel.",
-        },
-        new()
-        {
-            Name = "HeaderTemplate",
-            Type = "RenderFragment?",
-            DefaultValue = "null",
-            Description = "The template used to render the header section of the panel.",
-        },
-        new()
-        {
-            Name = "HeaderText",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "The text of the header section of the panel.",
-        },
-        new()
         {
             Name = "IsOpen",
             Type = "bool",
@@ -117,13 +96,6 @@ public partial class BitPanelDemo
             Description = "Specifies the element selector for which the Panel disables its scroll if applicable.",
         },
         new()
-        {
-            Name = "ShowCloseButton",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Shows the close button of the Panel.",
-        },
-        new()
         {
             Name = "Styles",
             Type = "BitPanelClassStyles?",
@@ -133,26 +105,12 @@ public partial class BitPanelDemo
             LinkType = LinkType.Link,
         },
         new()
-        {
-            Name = "SubtitleAriaId",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "Specifies the id for the aria-describedby attribute of the panel.",
-        },
-        new()
         {
             Name = "SwipeTrigger",
             Type = "decimal?",
             DefaultValue = "null",
             Description = "The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).",
         },
-        new()
-        {
-            Name = "TitleAriaId",
-            Type = "string?",
-            DefaultValue = "null",
-            Description = "Specifies the id for the aria-labelledby attribute of the panel.",
-        },
     ];
 
     private readonly List<ComponentSubClass> componentSubClasses =
@@ -183,48 +141,6 @@ public partial class BitPanelDemo
                    Type = "string?",
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the container of the BitPanel."
-               },
-               new()
-               {
-                   Name = "Header",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the header of the BitPanel."
-               },
-               new()
-               {
-                   Name = "HeaderText",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the header text of the BitPanel."
-               },
-               new()
-               {
-                   Name = "CloseButton",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the close button of the BitPanel."
-               },
-               new()
-               {
-                   Name = "CloseIcon",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the close icon of the BitPanel."
-               },
-               new()
-               {
-                   Name = "Body",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the body of the BitPanel."
-               },
-               new()
-               {
-                   Name = "Footer",
-                   Type = "string?",
-                   DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the footer of the BitPanel."
                }
             ]
         }
@@ -251,15 +167,10 @@ public partial class BitPanelDemo
 
     private bool isBasicPanelOpen;
 
-    private bool isPanelWithHeaderTextOpen;
-    private bool isPanelWithCustomHeaderOpen;
-
-    private bool isPanelWithFooterOpen;
-
     private bool isBlockingPanelOpen;
     private bool isModelessPanelOpen;
+    private BitPanel modelessPanelRef = default!;
     private bool isAutoToggleScrollPanelOpen;
-    private BitPanel bitPanelRef = default!;
 
     private double customPanelSize = 300;
     private bool isOpenInPositionStart;
@@ -280,7 +191,7 @@ public partial class BitPanelDemo
     private readonly string example1RazorCode = @"
 <BitButton OnClick=""() => isBasicPanelOpen = true"">Open Panel</BitButton>
 <BitPanel @bind-IsOpen=""isBasicPanelOpen"">
-    <div style=""width:300px"">
+    <div style=""width:300px;padding:1rem"">
         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
@@ -291,111 +202,48 @@ public partial class BitPanelDemo
 private bool isBasicPanelOpen;";
 
     private readonly string example2RazorCode = @"
-<BitButton OnClick=""() => isPanelWithHeaderTextOpen = true"">Open Panel</BitButton>
-<BitPanel HeaderText=""Simple header"" @bind-IsOpen=""isPanelWithHeaderTextOpen"">
-    <div style=""width:300px"">
-        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>
-</BitPanel>
-
-<BitButton OnClick=""() => isPanelWithCustomHeaderOpen = true"">Open Panel</BitButton>
-<BitPanel @bind-IsOpen=""isPanelWithCustomHeaderOpen"">
-    <HeaderTemplate>
-        <div style=""margin-bottom:1rem"">
-            <p>BitPanel with custom header content</p>
-            <BitSearchBox Placeholder=""Search here..."" />
-        </div>
-    </HeaderTemplate>
-    <ChildContent>
-        <div style=""width:300px"">
+<BitButton OnClick=""() => isBlockingPanelOpen = true"">Open Panel</BitButton>
+<BitPanel @bind-IsOpen=""isBlockingPanelOpen"" Blocking>
+    <div style=""width:300px;padding:1rem"">
+        <h3>Blocking</h3>
+        <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.
+            sagittis nunc, ut interdum ipsum vestibulum non.
         </div>
-    </ChildContent>
-</BitPanel>";
-    private readonly string example2CsharpCode = @"
-private bool isPanelWithHeaderTextOpen;
-private bool isPanelWithCustomHeaderOpen;";
-
-    private readonly string example3RazorCode = @"
-<BitButton OnClick=""() => isPanelWithFooterOpen = true"">Open Panel</BitButton>
-<BitPanel @bind-IsOpen=""isPanelWithFooterOpen"">
-    <ChildContent>
-        <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>
-    </ChildContent>
-    <FooterTemplate>
-        <BitButton OnClick=""() => isPanelWithFooterOpen = false"">Save</BitButton>
-        <BitButton Variant=""BitVariant.Outline"" OnClick=""() => isPanelWithFooterOpen = false"">Close</BitButton>
-    </FooterTemplate>
-</BitPanel>";
-    private readonly string example3CsharpCode = @"
-private bool isPanelWithFooterOpen;";
-
-    private readonly string example4RazorCode = @"
-<BitButton OnClick=""() => bitPanelRef.Open()"">Open Panel</BitButton>
-<BitPanel @ref=""bitPanelRef"" HeaderText=""ShowCloseButton"" ShowCloseButton>
-    <div style=""width:300px"">
-        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.
-    </div>
-</BitPanel>
-
-<BitButton OnClick=""() => isBlockingPanelOpen = true"">Open Panel</BitButton>
-<BitPanel HeaderText=""Blocking"" @bind-IsOpen=""isBlockingPanelOpen"" Blocking ShowCloseButton>
-    <div style=""width:300px"">
-        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.
+        <BitButton OnClick=""() => isBlockingPanelOpen = false"">Close</BitButton>
     </div>
 </BitPanel>
 
 <BitButton OnClick=""() => isModelessPanelOpen = true"">Open Panel</BitButton>
-<BitPanel HeaderText=""Modeless"" @bind-IsOpen=""isModelessPanelOpen"" Modeless ShowCloseButton>
-    <div style=""width:300px"">
-        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.
+<BitPanel @bind-IsOpen=""isModelessPanelOpen"" @ref=""modelessPanelRef"" Modeless>
+    <div style=""width:300px;padding:1rem"">
+        <h3>Modeless</h3>
+        <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.
+        </div>
+        <BitButton OnClick=""() => modelessPanelRef.Close()"">Close</BitButton>
     </div>
 </BitPanel>
 
 <BitButton OnClick=""() => isAutoToggleScrollPanelOpen = true"">Open Panel</BitButton>
-<BitPanel HeaderText=""AutoToggleScroll"" @bind-IsOpen=""isAutoToggleScrollPanelOpen"" AutoToggleScroll>
-    <div style=""width:300px"">
+<BitPanel @bind-IsOpen=""isAutoToggleScrollPanelOpen"" AutoToggleScroll>
+    <div style=""width:300px;padding:1rem"">
+        <h3>AutoToggleScroll</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.
     </div>
 </BitPanel>";
-    private readonly string example4CsharpCode = @"
+    private readonly string example2CsharpCode = @"
 private bool isBlockingPanelOpen;
 private bool isModelessPanelOpen;
-private bool isAutoToggleScrollPanelOpen;
-private BitPanel bitPanelRef = default!;";
+private BitPanel modelessPanelRef = default!;
+private bool isAutoToggleScrollPanelOpen;";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example3RazorCode = @"
 <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
 
 <BitButton OnClick=""() => isOpenInPositionStart = true"">Start</BitButton>
@@ -403,121 +251,108 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
 <BitButton OnClick=""() => isOpenInPositionTop = true"">Top</BitButton>
 <BitButton OnClick=""() => isOpenInPositionBottom = true"">Bottom</BitButton>
 
-<BitPanel @bind-Size=""customPanelSize"" @bind-IsOpen=""isOpenInPositionStart"" Position=""BitPanelPosition.Start"">
-    BitPanel with Start position and custom Size.
-    <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+<BitPanel @bind-Size=""customPanelSize""
+            @bind-IsOpen=""isOpenInPositionStart""
+            Position=""BitPanelPosition.Start"">
+    <div style=""padding:1rem"">
+        BitPanel with Start position and custom Size.
+        <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    </div>
 </BitPanel>
 
-<BitPanel @bind-Size=""customPanelSize"" @bind-IsOpen=""isOpenPositionEnd"" Position=""BitPanelPosition.End"">
-    BitPanel with End position and custom Size.
-    <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+<BitPanel @bind-Size=""customPanelSize""
+            @bind-IsOpen=""isOpenPositionEnd""
+            Position=""BitPanelPosition.End"">
+    <div style=""padding:1rem"">
+        BitPanel with End position and custom Size.
+        <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    </div>
 </BitPanel>
 
 <BitPanel @bind-Size=""customPanelSize"" @bind-IsOpen=""isOpenInPositionTop"" Position=""BitPanelPosition.Top"">
-    BitPanel with Top position and custom Size.
-    <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    <div style=""padding:1rem"">
+        BitPanel with Top position and custom Size.
+        <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    </div>
 </BitPanel>
 
-<BitPanel @bind-Size=""customPanelSize"" @bind-IsOpen=""isOpenInPositionBottom"" Position=""BitPanelPosition.Bottom"">
-    BitPanel with Bottom position and custom Size.
-    <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+<BitPanel @bind-Size=""customPanelSize""
+            @bind-IsOpen=""isOpenInPositionBottom""
+            Position=""BitPanelPosition.Bottom"">
+    <div style=""padding:1rem"">
+        BitPanel with Bottom position and custom Size.
+        <BitSpinButton @bind-Value=""customPanelSize"" Mode=""BitSpinButtonMode.Inline"" Label=""Custom size"" />
+    </div>
 </BitPanel>";
-    private readonly string example5CsharpCode = @"
+    private readonly string example3CsharpCode = @"
 private double customPanelSize = 300;
 private bool isOpenInPositionStart;
 private bool isOpenPositionEnd;
 private bool isOpenInPositionTop;
 private bool isOpenInPositionBottom;";
 
-    private readonly string example6RazorCode = @"
-<style>
-    .custom-class .item {
-        width: 3rem;
-        height: 3rem;
-        margin: 0.5rem;
-        border-radius: 0.5rem;
-        background-color: brown;
-    }
-
-    .custom-container {
-        border: 0.25rem solid #0054C6;
-        border-end-start-radius: 1rem;
-        border-start-start-radius: 1rem;
-    }
-
-    .custom-overlay {
-        background-color: #ffbd5a66;
-    }
-
-    .custom-header {
-        padding-bottom: 1.25rem;
-        background-color: tomato;
-    }
-
-    .custom-body {
-        padding-top: 1.25rem;
-        background-color: lightseagreen;
-    }
-</style>
-
-
+    private readonly string example4RazorCode = @"
 <BitButton OnClick=""() => isStyledPanelOpen = true"">Open Styled panel</BitButton>
-<BitButton OnClick=""() => isClassedPanelOpen = true"">Open Classed panel</BitButton>
-
-<BitButton OnClick=""() => isPanelStylesOpen = true"">Open panel Styles</BitButton>
-<BitButton OnClick=""() => isPanelClassesOpen = true"">Open panel Classes</BitButton
-
 <BitPanel @bind-IsOpen=""isStyledPanelOpen"" Style=""font-size: 3rem;"">
-    BitPanel with custom style.
-</BitPanel
+    <div style=""padding:1rem"">
+        BitPanel with custom style.
+    </div>
+</BitPanel>
 
+<BitButton OnClick=""() => isClassedPanelOpen = true"">Open Classed panel</BitButton>
 <BitPanel @bind-IsOpen=""isClassedPanelOpen"" Class=""custom-class"">
-    BitPanel with custom class:
-    <div class=""item"">Item 1</div>
-    <div class=""item"">Item 2</div>
-    <div class=""item"">Item 3</div>
-</BitPanel
+    <div style=""padding:1rem"">
+        BitPanel with custom class:
+        <div class=""item"">Item 1</div>
+        <div class=""item"">Item 2</div>
+        <div class=""item"">Item 3</div>
+    </div>
+</BitPanel>
 
-<BitPanel @bind-IsOpen=""isPanelStylesOpen"" Styles=""@(new() { Overlay = ""background-color: #4776f433;"", Container = ""box-shadow: 0 0 1rem tomato;"" })"">
+<BitButton OnClick=""() => isPanelStylesOpen = true"">Open panel Styles</BitButton>
+<BitPanel @bind-IsOpen=""isPanelStylesOpen""
+          Styles=""@(new() { Overlay = ""background-color: #4776f433;"",
+                            Container = ""padding: 1rem; box-shadow: 0 0 1rem tomato;"" })"">
     BitPanel with <b>Styles</b> to customize its elements.
-</BitPanel
+</BitPanel>
 
+<BitButton OnClick=""() => isPanelClassesOpen = true"">Open panel Classes</BitButton>
 <BitPanel @bind-IsOpen=""isPanelClassesOpen""
-          HeaderText=""Simple header""
           Classes=""@(new() { Container = ""custom-container"",
-                             Overlay = ""custom-overlay"",
-                             Body = ""custom-body"",
-                             Header = ""custom-header"" })"">
+                             Overlay = ""custom-overlay"" })"">
     BitPanel with <b>Classes</b> to customize its elements.
 </BitPanel>";
-    private readonly string example6CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 private bool isStyledPanelOpen;
 private bool isClassedPanelOpen;
 private bool isPanelStylesOpen;
 private bool isPanelClassesOpen;";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitButton OnClick=""() => isRtlPanelOpenStart = true"">آغاز</BitButton>
 <BitButton OnClick=""() => isRtlPanelOpenEnd = true"">پایان</BitButton>
 
-<BitPanel @bind-IsOpen=""isRtlPanelOpenStart"" Dir=""BitDir.Rtl"" HeaderText=""سرصفحه ی آغاز"" Position=""BitPanelPosition.Start"">
-    <p>
+<BitPanel @bind-IsOpen=""isRtlPanelOpenStart""
+          Dir=""BitDir.Rtl""
+          Position=""BitPanelPosition.Start"">
+    <div style=""width:300px;padding:1rem"">
         لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
         چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
         کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
         در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-    </p>
-</BitPanel>
-
-<BitPanel @bind-IsOpen=""isRtlPanelOpenEnd"" Dir=""BitDir.Rtl"" HeaderText=""سرصفحه ی پایان"" Position=""BitPanelPosition.End"">
-    <p>
+    </div>
+</BitPanel
+<BitPanel @bind-IsOpen=""isRtlPanelOpenEnd""
+          Dir=""BitDir.Rtl""
+          Position=""BitPanelPosition.End"">
+    <div style=""width:300px;padding:1rem"">
         لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
         چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
         کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
         در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-    </p>
+    </div>
 </BitPanel>";
-    private readonly string example7CsharpCode = @"
+    private readonly string example5CsharpCode = @"
 private bool isRtlPanelOpenStart;
 private bool isRtlPanelOpenEnd;";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss
index a54db15c4f..99ecfa183f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Panel/BitPanelDemo.razor.scss
@@ -1,5 +1,10 @@
 @import '../../../../Styles/abstracts/functions';
 
+.panel-body {
+    width: 300px;
+    padding: 1rem;
+}
+
 .btn-container {
     display: flex;
     gap: rem2(16px);
@@ -19,21 +24,6 @@
 }
 
 ::deep {
-    .header-margin,
-    .custom-header {
-        margin-top: var(--bit-status-bar-height);
-
-        @supports (-webkit-touch-callout: none) {
-            margin-top: env(safe-area-inset-top);
-        }
-    }
-
-    .footer-margin {
-        @supports (-webkit-touch-callout: none) {
-            margin-top: env(safe-area-inset-bottom);
-        }
-    }
-
     .custom-class {
         .item {
             width: 3rem;
@@ -45,6 +35,7 @@
     }
 
     .custom-container {
+        padding: 1rem;
         border: 0.25rem solid #0054C6;
         border-end-start-radius: 1rem;
         border-start-start-radius: 1rem;
@@ -53,14 +44,4 @@
     .custom-overlay {
         background-color: #ffbd5a66;
     }
-
-    .custom-header {
-        padding-bottom: 1.25rem;
-        background-color: tomato;
-    }
-
-    .custom-body {
-        padding-top: 1.25rem;
-        background-color: lightseagreen;
-    }
 }
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 bec34a5508..b3e28e6a15 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
@@ -253,6 +253,9 @@
             <BitLink Href="/components/pdfreader" title="PdfReader" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">PdfReader</BitText>
             </BitLink>
+            <BitLink Href="/components/propanel" title="ProPanel" Style="display: flex">
+                <BitText Typography="BitTypography.Subtitle1">ProPanel</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 d1277d3a9f..84b6f10f89 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 = "ProPanel", Url = "/components/propanel" },
                 new() 
                 { 
                     Text = "Services",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json
index 1ea4c0c110..d9e1a8c69c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json
@@ -71,6 +71,12 @@
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
+    {
+        "outputFile": "Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.css",
+        "inputFile": "Pages/Components/Extras/ProPanel/BitProPanelDemo.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
     {
         "outputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.css",
         "inputFile": "Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss",
@@ -306,8 +312,8 @@
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Pages/Components/Progress/ProgressBar/BitProgressDemo.razor.css",
-        "inputFile": "Pages/Components/Progress/ProgressBar/BitProgressDemo.razor.scss",
+        "outputFile": "Pages/Components/Progress/Progress/BitProgressDemo.razor.css",
+        "inputFile": "Pages/Components/Progress/Progress/BitProgressDemo.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },