diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor
index c6fffbc238..11a1508c08 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor
@@ -5,39 +5,45 @@
             Description="callout component of the bit BlazorUI components" />
 
 <ComponentDemo ComponentName="Callout"
-               ComponentDescription="The Callout component ..."
+               ComponentDescription="A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them."
                ComponentParameters="componentParameters"
                ComponentPublicMembers="componentPublicMembers"
                ComponentSubClasses="componentSubClasses"
                ComponentSubEnums="componentSubEnums">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
-            <BitCallout>
-                <Anchor>
-                    <BitButton>Click me</BitButton>
-                </Anchor>
-                <Content>
-                    <div style="width: fit-content; padding: 1rem; border:1px solid gray;">
-                        This is the callout content.
-                    </div>
-                </Content>
-            </BitCallout>
+            <div>Basic usage of BitCallout component with a simple content and a button as the anchor to show or hide the callout.</div>
+            <br />
+            <div>
+                <BitCallout>
+                    <Anchor>
+                        <BitButton>Show callout</BitButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            This is the callout content.
+                        </div>
+                    </Content>
+                </BitCallout>
+            </div>
         </ExamplePreview>
     </ComponentExampleBox>
 
     <ComponentExampleBox Title="External anchor" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
+            <div>Use an external element as the anchor for a BitCallout component, with both ID-based and ElementSelector-based anchoring options.</div>
+            <br />
             <div class="example-box">
                 <BitButton Id="anchor_id" OnClick="() => callout1.Toggle()">AnchorId</BitButton>
                 <BitCallout AnchorId="anchor_id" @ref="callout1">
-                    <div style="padding:1rem; border:1px solid gray;">
+                    <div style="padding: 1rem; border: 1px solid gray;">
                         <BitCalendar />
                     </div>
                 </BitCallout>
 
                 <button @ref="anchorEl" @onclick="() => callout2.Toggle()">AnchorEl</button>
                 <BitCallout AnchorEl="() => anchorEl" @ref="callout2">
-                    <div style="padding:1rem; border:1px solid gray;">
+                    <div style="padding: 1rem; border: 1px solid gray;">
                         <BitCalendar />
                     </div>
                 </BitCallout>
@@ -47,19 +53,122 @@
 
     <ComponentExampleBox Title="Binding" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
         <ExamplePreview>
+            <div>Bind the Open state of BitCallout component to a boolean variable, allowing for more control over its opening and closing behavior.</div>
+            <br />
             <div class="example-box">
-                <BitButton OnClick="() => isOpen = true">Open callout</BitButton>
+                <BitButton OnClick="() => isOpen = true">Show callout</BitButton>
 
                 <BitCallout @bind-IsOpen="isOpen">
                     <Anchor>
                         <button>Anchor</button>
                     </Anchor>
                     <Content>
-                        <div style="width: fit-content; padding: 1rem; border:1px solid gray;">
+                        <div style="padding: 1rem; border: 1px solid gray;">
                             This is the callout content.
+                            <br />
+                            You can even close it from here!
+                            <br /><br />
+                            <div>
+                                <BitButton OnClick="() => isOpen = false">Done</BitButton>
+                                <BitButton OnClick="() => isOpen = false" Variant="BitVariant.Outline">Cancel</BitButton>
+                            </div>
+                        </div>
+                    </Content>
+                </BitCallout>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="DropDirection" RazorCode="@example4RazorCode" Id="example4">
+        <ExamplePreview>
+            <div>Explores different drop directions for the BitCallout component, including automatic and explicit directions.</div>
+            <br /><br />
+            <div>
+                <div>DropDirection: All</div><br />
+                <BitCallout Direction="BitDropDirection.All">
+                    <Anchor>
+                        <BitButton>Show callout</BitButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            @for (int i = 1; i < 13; i++)
+                            {
+                                var item = i;
+                                <div>Callout content @(item)</div><br />
+                            }
                         </div>
                     </Content>
                 </BitCallout>
+                <br /><br />
+                <div>DropDirection: TopAndBottom</div><br />
+                <BitCallout Direction="BitDropDirection.TopAndBottom">
+                    <Anchor>
+                        <BitButton>Show callout</BitButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            @for (int i = 1; i < 13; i++)
+                            {
+                                var item = i;
+                                <div>Callout content @(item)</div><br />
+                            }
+                        </div>
+                    </Content>
+                </BitCallout>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+        <ExamplePreview>
+            <div>Explores styling and class customization for BitCallout, including component styles, custom classes, and detailed style options.</div>
+            <br />
+            <div>
+                <div>Component's Style & Class:</div><br />
+                <BitCallout Style="width: fit-content; box-shadow: tomato 0px 0px 8px;">
+                    <Anchor>
+                        <BitButton Color="BitColor.Error">Show callout</BitButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            This is the callout content.
+                        </div>
+                    </Content>
+                </BitCallout>
+                <br />
+                <BitCallout Class="custom-class">
+                    <Anchor>
+                        <BitButton>Show callout</BitButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            This is the callout content.
+                        </div>
+                    </Content>
+                </BitCallout>
+                <br /><br />
+                <div>Styles & Classes:</div><br />
+                <BitCallout Styles="@(new() { Root = "--anchor-color: #2e8b5775; width: fit-content;",
+                                              Opened = "--anchor-color: #04cb5b75;",
+                                              AnchorContainer = "background-color: var(--anchor-color);" })">
+                    <Anchor>
+                        <BitActionButton>Show callout</BitActionButton>
+                    </Anchor>
+                    <Content>
+                        <div style="padding: 1rem; border: 1px solid gray;">
+                            This is the callout content.
+                        </div>
+                    </Content>
+                </BitCallout>
+                <br />
+                <BitCallout Classes="@(new() { Content = "custom-content", AnchorContainer = "custom-anchor" })">
+                    <Anchor>
+                        Show callout
+                    </Anchor>
+                    <Content>
+                        This is the callout content.
+                    </Content>
+                </BitCallout>
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs
index e8efa890e3..83152f80b1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.cs
@@ -213,10 +213,10 @@ public partial class BitCalloutDemo
     private readonly string example1RazorCode = @"
 <BitCallout>
     <Anchor>
-        <BitButton>Click me</BitButton>
+        <BitButton>Show callout</BitButton>
     </Anchor>
     <Content>
-        <div style=""width: fit-content; padding: 1rem; border:1px solid gray;"">
+        <div style=""padding: 1rem; border: 1px solid gray;"">
             This is the callout content.
         </div>
     </Content>
@@ -225,15 +225,14 @@ This is the callout content.
     private readonly string example2RazorCode = @"
 <BitButton Id=""anchor_id"" OnClick=""() => callout1.Toggle()"">AnchorId</BitButton>
 <BitCallout AnchorId=""anchor_id"" @ref=""callout1"">
-    <div style=""padding:1rem; border:1px solid gray;"">
+    <div style=""padding: 1rem; border: 1px solid gray;"">
         <BitCalendar />
     </div>
 </BitCallout>
 
-
 <button @ref=""anchorEl"" @onclick=""() => callout2.Toggle()"">AnchorEl</button>
 <BitCallout AnchorEl=""() => anchorEl"" @ref=""callout2"">
-    <div style=""padding:1rem; border:1px solid gray;"">
+    <div style=""padding: 1rem; border: 1px solid gray;"">
         <BitCalendar />
     </div>
 </BitCallout>";
@@ -243,18 +242,124 @@ This is the callout content.
 private BitCallout callout2;";
 
     private readonly string example3RazorCode = @"
-<BitButton OnClick=""() => isOpen = true"">Open callout</BitButton>
+<BitButton OnClick=""() => isOpen = true"">Show callout</BitButton>
 
 <BitCallout @bind-IsOpen=""isOpen"">
     <Anchor>
         <button>Anchor</button>
     </Anchor>
     <Content>
-        <div style=""width: fit-content; padding: 1rem; border:1px solid gray;"">
+        <div style=""padding: 1rem; border: 1px solid gray;"">
             This is the callout content.
+            <br />
+            You can even close it from here!
+            <br /><br />
+            <div>
+                <BitButton OnClick=""() => isOpen = false"">Done</BitButton>
+                <BitButton OnClick=""() => isOpen = false"" Variant=""BitVariant.Outline"">Cancel</BitButton>
+            </div>
         </div>
     </Content>
 </BitCallout>";
     private readonly string example3CsharpCode = @"
 private bool isOpen;";
+
+    private readonly string example4RazorCode = @"
+<BitCallout Direction=""BitDropDirection.All"">
+    <Anchor>
+        <BitButton>Show callout</BitButton>
+    </Anchor>
+    <Content>
+        <div style=""padding: 1rem; border: 1px solid gray;"">
+            @for (int i = 1; i < 13; i++)
+            {
+                var item = i;
+                <div>Callout content @(item)</div><br />
+            }
+        </div>
+    </Content>
+</BitCallout>
+
+<BitCallout Direction=""BitDropDirection.TopAndBottom"">
+    <Anchor>
+        <BitButton>Show callout</BitButton>
+    </Anchor>
+    <Content>
+        <div style=""padding: 1rem; border: 1px solid gray;"">
+            @for (int i = 1; i < 13; i++)
+            {
+                var item = i;
+                <div>Callout content @(item)</div><br />
+            }
+        </div>
+    </Content>
+</BitCallout>";
+
+    private readonly string example5RazorCode = @"
+<style>
+    .custom-class {
+        width: fit-content;
+        box-shadow: dodgerblue 0px 0px 8px;
+    }
+
+    .custom-content {
+        padding: 16px;
+        border-radius: 2px;
+        box-shadow: #a9a9a92e 0px 0px 4px 2px;
+    }
+
+    .custom-anchor {
+        color: white;
+        cursor: pointer;
+        padding: 8px 16px;
+        border-radius: 2px;
+        background-color: darkviolet;
+    }
+</style>
+
+
+<BitCallout Style=""width: fit-content; box-shadow: tomato 0px 0px 8px;"">
+    <Anchor>
+        <BitButton Color=""BitColor.Error"">Show callout</BitButton>
+    </Anchor>
+    <Content>
+        <div style=""padding: 1rem; border: 1px solid gray;"">
+            This is the callout content.
+        </div>
+    </Content>
+</BitCallout>
+
+<BitCallout Class=""custom-class"">
+    <Anchor>
+        <BitButton>Show callout</BitButton>
+    </Anchor>
+    <Content>
+        <div style=""padding: 1rem; border: 1px solid gray;"">
+            This is the callout content.
+        </div>
+    </Content>
+</BitCallout>
+
+
+<BitCallout Styles=""@(new() { Root = ""--anchor-color: #2e8b5775; width: fit-content;"",
+                              Opened = ""--anchor-color: #04cb5b75;"",
+                              AnchorContainer = ""background-color: var(--anchor-color);"" })"">
+    <Anchor>
+        <BitActionButton>Show callout</BitActionButton>
+    </Anchor>
+    <Content>
+        <div style=""padding: 1rem; border: 1px solid gray;"">
+            This is the callout content.
+        </div>
+    </Content>
+</BitCallout>
+
+<BitCallout Classes=""@(new() { Content = ""custom-content"", AnchorContainer = ""custom-anchor"" })"">
+    <Anchor>
+        Show callout
+    </Anchor>
+    <Content>
+        This is the callout content.
+    </Content>
+</BitCallout>";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.scss
index 6b8dee934b..e33daa4eff 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Callout/BitCalloutDemo.razor.scss
@@ -1,4 +1,26 @@
 .example-box {
     gap: 3rem;
     display: flex;
+    flex-wrap: wrap;
+}
+
+::deep {
+    .custom-class {
+        width: fit-content;
+        box-shadow: dodgerblue 0px 0px 8px;
+    }
+
+    .custom-content {
+        padding: 16px;
+        border-radius: 2px;
+        box-shadow: #a9a9a92e 0px 0px 4px 2px;
+    }
+
+    .custom-anchor {
+        color: white;
+        cursor: pointer;
+        padding: 8px 16px;
+        border-radius: 2px;
+        background-color: darkviolet;
+    }
 }