diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
index 2ecc51de0e..ef88aa7ecf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
@@ -13,6 +13,8 @@
                    ComponentPublicMembers="componentPublicMembers">
         <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
             <ExamplePreview>
+                <div>Basic examples of BitSearchBox including a default and a disabled state.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Basic</BitLabel>
@@ -29,6 +31,8 @@
 
         <ComponentExampleBox Title="IsUnderlined" RazorCode="@example2RazorCode" Id="example2">
             <ExamplePreview>
+                <div>Demonstrating the underlined style of BitSearchBox in both enabled and disabled states.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Basic Underlined SearchBox</BitLabel>
@@ -45,6 +49,8 @@
 
         <ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
             <ExamplePreview>
+                <div>Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>SearchBox with fixed icon</BitLabel>
@@ -71,6 +77,8 @@
 
         <ComponentExampleBox Title="Search Button" RazorCode="@example4RazorCode" Id="example4">
             <ExamplePreview>
+                <div>Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Basic SearchBox</BitLabel>
@@ -98,22 +106,34 @@
 
         <ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
             <ExamplePreview>
+                <div>Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.</div>
+                <br /><br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Component's Style & Class:</BitLabel>
-                        <BitSearchBox Placeholder="Search" Style="background-color: lightskyblue; border-radius: 1rem; margin: 1rem 0" />
+                        <br />
+                        <BitSearchBox Placeholder="Search" Style="box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;" />
+                        <br />
                         <BitSearchBox Placeholder="Search" Class="custom-class" />
                     </div>
-                    <br />
+                    <br /><br />
                     <div>
                         <BitLabel>Styles & Classes:</BitLabel>
+                        <br />
                         <BitSearchBox Placeholder="Search"
-                                      Styles="@(new() { Icon = "color: darkorange;",
-                                                        Input = "padding: 0.5rem; background-color: goldenrod" })" />
+                                      Styles="@(new() { Root = "margin-inline: 1rem;",
+                                                        Focused = "--focused-background: #b2b2b25a;",
+                                                        Input = "padding: 0.5rem;",
+                                                        InputContainer = "background: var(--focused-background);" })" />
                         <br />
-                        <BitSearchBox Placeholder="Search" DefaultValue="This is default value"
-                                      Classes="@(new() { ClearButtonIcon = "custom-clear",
-                                                         IconWrapper = "custom-search" })" />
+                        <BitSearchBox FixedIcon
+                                      Placeholder="Search" DefaultValue="This is default value"
+                                      Classes="@(new() { Root = "custom-root",
+                                                         Icon = "custom-icon",
+                                                         Focused = "custom-focused",
+                                                         ClearButton = "custom-clear",
+                                                         IconWrapper = "custom-icon-wrapper",
+                                                         InputContainer = "custom-input-container" })" />
                     </div>
                 </div>
             </ExamplePreview>
@@ -121,6 +141,8 @@
 
         <ComponentExampleBox Title="Visibility" RazorCode="@example6RazorCode" Id="example6">
             <ExamplePreview>
+                <div>BitSearchBox visibility examples including visible, hidden, and collapsed states.</div>
+                <br />
                 <div class="example-content">
                     <div class="visibility-items">Visible: [ <BitSearchBox Visibility="BitVisibility.Visible" Placeholder="Visible SearchBox" /> ]</div>
                     <div class="visibility-items">Hidden: [ <BitSearchBox Visibility="BitVisibility.Hidden" Placeholder="Hidden SearchBox" />  ]</div>
@@ -131,6 +153,8 @@
 
         <ComponentExampleBox Title="Binding" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
             <ExamplePreview>
+                <div>Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Two-way Bind</BitLabel>
@@ -155,6 +179,8 @@
 
         <ComponentExampleBox Title="Validation" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
             <ExamplePreview>
+                <div>Demonstrating validation of BitSearchBox using data annotations.</div>
+                <br />
                 <div class="example-content">
                     <EditForm Model="ValidationSearchBoxModel">
                         <DataAnnotationsValidator />
@@ -167,6 +193,8 @@
 
         <ComponentExampleBox Title="Suggest List" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
             <ExamplePreview>
+                <div>Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.</div>
+                <br />
                 <div class="example-content">
                     <div>
                         <BitLabel>Items:</BitLabel>
@@ -210,7 +238,9 @@
 
         <ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
             <ExamplePreview>
-                <div class="example-content">
+                <div>Use the BitSearchBox component in right-to-left (RTL).</div>
+                <br />
+                <div dir="rtl" class="example-content">
                     <BitSearchBox Dir="BitDir.Rtl" Placeholder="جستجو" />
                     <br />
                     <BitSearchBox IsUnderlined Dir="BitDir.Rtl" Placeholder="جستجو" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
index 095550d3b8..17afa8070a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
@@ -377,31 +377,73 @@ private async Task<ICollection<string>> LoadItems(string? search, int count)
     private readonly string example5RazorCode = @"
 <style>
     .custom-class {
-        border: 1px solid red;
-        box-shadow: aqua 0 0 1rem;
+        overflow: hidden;
+        margin-inline: 1rem;
+        border-radius: 1rem;
+        border: 2px solid tomato;
     }
 
-    .custom-clear {
-        color: blueviolet;
+    .custom-class * {
+        border: none;
     }
 
-    .custom-search {
-        margin-right: 0.25rem;
-        border-radius: 0.5rem;
-        background-color: tomato;
+
+    .custom-root {
+        margin-inline: 1rem;
+    }
+
+    .custom-input-container {
+        height: 3rem;
+        overflow: hidden;
+        align-items: center;
+        border-radius: 1.5rem;
+        border-color: #13a3a375;
+        background-color: #13a3a375;
+    }
+
+    .custom-focused .custom-input-container {
+        border-width: 1px;
+        border-color: #13a3a375;
+    }
+
+    .custom-clear:hover {
+        background: transparent;
+    }
+
+    .custom-icon {
+        color: darkslategrey;
+    }
+
+    .custom-icon-wrapper {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 1rem;
+        margin-inline: 0.5rem;
+        background-color: whitesmoke;
+    }
     }
 </style>
 
-<BitSearchBox Placeholder=""Search"" Style=""background-color: lightskyblue; border-radius: 1rem; margin: 1rem 0"" />
+
+<BitSearchBox Placeholder=""Search"" Style=""box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;"" />
+
 <BitSearchBox Placeholder=""Search"" Class=""custom-class"" />
 
-<BitSearchBox Placeholder=""Search""
-              Styles=""@(new() { SearchIcon = ""color: darkorange;"",
-                                Input = ""padding: 0.5rem; background-color: goldenrod"" })"" />
 
-<BitSearchBox Placeholder=""Search"" DefaultValue=""This is default value""
-              Classes=""@(new() { ClearButtonIcon = ""custom-clear"",
-                                 IconWrapper = ""custom-search"" })"" />";
+<BitSearchBox Placeholder=""Search""
+              Styles=""@(new() { Root = ""margin-inline: 1rem;"",
+                                Focused = ""--focused-background: #b2b2b25a;"",
+                                Input = ""padding: 0.5rem;"",
+                                InputContainer = ""background: var(--focused-background);"" })"" />
+
+<BitSearchBox FixedIcon
+              Placeholder=""Search"" DefaultValue=""This is default value""
+              Classes=""@(new() { Root = ""custom-root"",
+                                 Icon = ""custom-icon"",
+                                 Focused = ""custom-focused"",
+                                 ClearButton = ""custom-clear"",
+                                 IconWrapper = ""custom-icon-wrapper"",
+                                 InputContainer = ""custom-input-container"" })"" />";
 
     private readonly string example6RazorCode = @"
 Visible: [ <BitSearchBox Visibility=""BitVisibility.Visible"" Placeholder=""Visible SearchBox"" /> ]
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.scss
index 4f934b3894..a0d60e6ac7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.scss
@@ -1,40 +1,70 @@
-@import '../../../../Styles/abstracts/_functions.scss';
+@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+
+.example-content {
+    display: flex;
+    gap: 1.25rem;
+    max-width: 19rem;
+    flex-flow: row wrap;
+    align-items: center;
+
+    &.column {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    & > div {
+        width: 100%;
+    }
+}
 
 ::deep {
-    .example-content {
-        display: flex;
-        gap: rem2(20px);
-        flex-flow: row wrap;
-        align-items: center;
-        max-width: rem2(304px);
+    .custom-class {
+        overflow: hidden;
+        margin-inline: 1rem;
+        border-radius: 1rem;
+        border: 2px solid tomato;
+    }
+
+    .custom-class * {
+        border: none;
+    }
 
-        &.column {
-            flex-direction: column;
-            align-items: flex-start;
-        }
+    .custom-root {
+        margin-inline: 1rem;
+    }
 
-        & > div {
-            width: 100%;
-        }
+    .custom-input-container {
+        height: 3rem;
+        overflow: hidden;
+        align-items: center;
+        border-radius: 1.5rem;
+        border-color: #13a3a375;
+        background-color: #13a3a375;
     }
 
-    .validation-message {
-        color: red;
-        font-size: rem2(12px);
+    .custom-focused .custom-input-container {
+        border-width: 1px;
+        border-color: #13a3a375;
     }
 
-    .custom-class {
-        border: 1px solid red;
-        box-shadow: aqua 0 0 1rem;
+    .custom-clear:hover {
+        background: transparent;
+    }
+
+    .custom-icon {
+        color: darkslategrey;
     }
 
-    .custom-clear {
-        color: blueviolet;
+    .custom-icon-wrapper {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 1rem;
+        margin-inline: 0.5rem;
+        background-color: whitesmoke;
     }
 
-    .custom-search {
-        margin-right: 0.25rem;
-        border-radius: 0.5rem;
-        background-color: tomato;
+    .validation-message {
+        font-size: rem2(12px);
+        color: $bit-color-error;
     }
 }