diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
index b2c7a737c7f..d0c5473a47f 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
+++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
@@ -18,7 +18,7 @@
         @Body
     </section>
 
-    <DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd">
+    <DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" class="bb-dial-gear">
         <ButtonTemplate>
             <div class="btn-circle btn-fade dial-button-gear">
                 <img src="./images/logo.png" />
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
index 58b259f82a9..55a9b7ee606 100644
--- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@@ -76,7 +76,7 @@
             background-color: var(--bb-sidebar-body-drag-hover-bg);
         }
 
-::deep .dial-button {
+::deep .bb-dial-gear {
     display: none;
     position: fixed;
     z-index: 10;
@@ -172,7 +172,7 @@
         display: block;
     }
 
-    ::deep .dial-button {
+    ::deep .bb-dial-gear {
         display: block;
     }
 }