diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 0bfdd1e8c2..9f8a78ae9f 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -106,8 +106,8 @@
                                                 </div>
                                            
                                     </div>
- } 
- @if (Model.VersionSelectItems.Any())
+                                    } 
+                                    @if (Model.VersionSelectItems.Any())
                                             {
                                     <div class="col">
                                            
@@ -132,8 +132,8 @@
                                                 </div>
                                            
                                     </div>
- }
-  @if (Model.LanguageSelectListItems.Count > 1)
+                            }
+                            @if (Model.LanguageSelectListItems.Count > 1)
                                     {
                                 <div class="col">
 
@@ -191,38 +191,39 @@
                             class="nav nav-list"></ul>
                             }
                         </div>
-
                     </div>
 
                 @if (Model.Document != null)
                 {
                     <div class="docs-content">
                         <div class="top-container mb-3">
-                            <div class="row w-100 mx-0">
-                                <div class="col-12 col-lg-9 px-0">
-                                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-                                        <ol class="breadcrumb">
-                                            <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
-                                        </ol>
-                                    </nav>
+                            <div class="w-100">
+                                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
+                                    <ol class="breadcrumb ">
+                                        <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                                    </ol>
+                                </nav>
+                                <div class="doc-social-btns">
+                                    <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                                        <i class="fa fa-twitter"></i>
+                                    </a>
+                                    <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                                        <i class="fa fa-linkedin"></i>
+                                    </a>
+                                    <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                                        <i class="fa fa-envelope-square"></i>
+                                    </a>
                                 </div>
-                                <div class="col-12 col-lg-3 text-lg-end px-0">
-                                    <div class="doc-social-btns">
-                                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                                            <i class="fa fa-twitter"></i>
-                                        </a>
-                                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                                            <i class="fa fa-linkedin"></i>
-                                        </a>
-                                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                                            <i class="fa fa-envelope-square"></i>
-                                        </a>
-                                    </div>
-                                </div>   
                             </div>
                         </div>
 
@@ -263,7 +264,7 @@
                                                             </a>
                                                         }
                                                 </div>
-                                                <div class="">
+                                                <div class="contributors">
                                                   @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
                                                     {
                                                         <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
@@ -362,7 +363,7 @@
                                 <div class="card-body">
                                     <h5 class="card-title">@L["InThisDocument"]</h5>
 
-                                    <div id="scroll-index" class="mt-2">
+                                    <div id="scroll-index" class="">
                                         <nav id="docs-sticky-index" class="navbar index-scroll">
                                         </nav>
                                         <div class="row">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
index 247ae27c9b..43ce41da49 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
@@ -20,7 +20,7 @@
         );
 
         var scrollTopBtn = $('.scroll-top-btn');
-        var enoughHeight = $('.docs-sidebar-wrapper > .docs-top').height() + 60;
+        var enoughHeight = $('.docs-sidebar-wrapper > .docs-top').height();
         var enoughHeightPlus = 500;
 
         $(window).scroll(function () {
@@ -133,6 +133,12 @@
             theme: 'minimal-dark',
             alwaysShowScrollbar: 0,
         });
+
+        $('.mCustomScrollbar-1').mCustomScrollbar({
+            theme: 'minimal-dark',
+            alwaysShowScrollbar: 0,
+            horizontalScroll: true,
+        });
     }
 
     window.Toc.helpers.createNavList = function () {
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index bbd253d306..7b047e306c 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -79,6 +79,8 @@ body.scrolledMore .alert-criteria p.alert-p {
   background: #211e1e;
   padding: 0.5rem 1.75em;
   width: 300px;
+  transition: top 0.3s;
+  -webkit-transition: top 0.3s;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   font-size: 1.35rem;
@@ -297,25 +299,29 @@ body.scrolledMore .alert-criteria p.alert-p {
   align-items: center;
   border-bottom: 1px solid #eaeaea;
   margin: 0 1.75em;
+  position: relative;
+}
+.docs-page .docs-content .top-container nav {
+  padding-right: 150px;
 }
-.docs-page .docs-content .top-container .breadcrumb {
+.docs-page .docs-content .top-container nav .breadcrumb {
   margin-bottom: 0;
   flex-wrap: nowrap;
   overflow-x: scroll;
   white-space: nowrap;
   padding-bottom: 10px;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item {
   color: #838690;
   font-size: 13px;
   font-weight: 500;
   padding: 0 9px 0 0px;
   display: flex;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item a {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item a {
   color: #838690;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item.active {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item.active {
   color: #c7c8c9;
   font-weight: 400;
 }
@@ -323,7 +329,8 @@ body.scrolledMore .alert-criteria p.alert-p {
   color: rgba(11, 22, 33, 0.5);
   white-space: nowrap;
   top: -2px;
-  position: relative;
+  position: absolute;
+  right: 0;
 }
 .docs-page .docs-content .top-container .doc-social-btns small {
   font-size: 13px;
@@ -388,7 +395,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
-.docs-page .docs-content .docs-link-btns .cont-container:hover a.cont-avatar img {
+.docs-page .docs-content .docs-link-btns .cont-container .contributors:hover a.cont-avatar img {
   margin-left: -8px;
 }
 .docs-page .docs-content .docs-content-field .docs-text-field {
@@ -519,6 +526,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   background: rgba(190, 223, 238, 0.82);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
+  z-index: 3;
 }
 .docs-page .docs-content .docs-content-field .alert-criteria p.alert-p {
   font-size: 0.96em;
@@ -541,9 +549,11 @@ body.scrolledMore .alert-criteria p.alert-p {
 }
 .docs-page .docs-page-index .docs-inner-anchors {
   position: fixed;
-  z-index: 99;
+  z-index: 2;
   top: 1rem;
   font-size: 0.9em;
+  transition: top 0.3s;
+  -webkit-transition: top 0.3s;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
   font-size: 0.92em;
@@ -596,6 +606,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   border-radius: 12px;
   border: none;
   width: 300px;
+  margin-bottom: 1rem;
   box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 }
 .docs-page .docs-page-index .card .card-header {
@@ -615,6 +626,9 @@ body.scrolledMore .alert-criteria p.alert-p {
   background-color: transparent;
   border: none;
 }
+.docs-page .docs-page-index .card .btn {
+  font-size: 12px;
+}
 
 @media (max-width: 767px) {
   body {
@@ -637,7 +651,7 @@ body .close-dmenu {
     opacity: 0;
   }
   body.scrolledMore .alert-criteria {
-    top: 72px;
+    top: 72px !important;
   }
 
   .docs-page {
@@ -779,6 +793,9 @@ body .close-dmenu {
   }
 }
 @media (max-width: 992px) {
+  .docs-page .docs-content .top-container nav {
+    padding-right: 0;
+  }
   .docs-page .docs-content .top-container .doc-social-btns {
     display: none;
   }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index cf35442d4a..e0b98457b2 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAtpBC;EAupBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA7uBH;;AA+uBD;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAhqBC;EAiqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eA5uBC;EA6uBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA1vBH;;AA4vBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index b1c86750ee..514fe8e575 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -99,6 +99,8 @@ body {
         background: #211e1e;
         padding: 0.5rem $gap-x-size;
         width: 300px;
+        transition: top 0.3s;
+        -webkit-transition: top 0.3s;
 
         .docs-top {
             .navbar-logo {
@@ -373,34 +375,41 @@ body {
             align-items: center;
             border-bottom: 1px solid #eaeaea;
             margin: 0 $gap-x-size;
+            position: relative;
 
-            .breadcrumb {
-                margin-bottom: 0;
-                flex-wrap: nowrap;
-                overflow-x: scroll;
-                white-space: nowrap;
-                padding-bottom: 10px;
+            nav {
+                padding-right: 150px;
+                .breadcrumb {
+                    margin-bottom: 0;
+                    flex-wrap: nowrap;
+                    overflow-x: scroll;
+                    white-space: nowrap;
+                    padding-bottom: 10px;
 
-                .breadcrumb-item {
-                    color: #838690;
-                    font-size: 13px;
-                    font-weight: 500;
-                    padding: 0 9px 0 0px;
-                    display: flex;
-                    a {
+                    .breadcrumb-item {
                         color: #838690;
-                    }
-                    &.active {
-                        color: #c7c8c9;
-                        font-weight: 400;
+                        font-size: 13px;
+                        font-weight: 500;
+                        padding: 0 9px 0 0px;
+                        display: flex;
+                        a {
+                            color: #838690;
+                        }
+                        &.active {
+                            color: #c7c8c9;
+                            font-weight: 400;
+                        }
                     }
                 }
             }
+
             .doc-social-btns {
                 color: rgb(11 22 33 / 50%);
                 white-space: nowrap;
                 top: -2px;
-                position: relative;
+                position: absolute;
+                right: 0;
+
 
                 small {
                     font-size: 13px;
@@ -480,7 +489,7 @@ body {
                     }
                 }
 
-                &:hover {
+                .contributors:hover {
                     a.cont-avatar {
                         img {
                             margin-left: -8px;
@@ -631,6 +640,7 @@ body {
                 background: hsl(199deg 59% 84% / 82%);
                 -webkit-backdrop-filter: blur(10px);
                 backdrop-filter: blur(10px);
+                z-index: 3;
 
                 p.alert-p {
                     font-size: 0.96em;
@@ -660,9 +670,11 @@ body {
 
         .docs-inner-anchors {
             position: fixed;
-            z-index: 99;
+            z-index: 2;
             top: $gap-y-size;
             font-size: 0.9em;
+            transition: top 0.3s;
+            -webkit-transition: top 0.3s;
 
             .navbar {
                 .nav-pills {
@@ -735,6 +747,7 @@ body {
             border-radius: 12px;
             border: none;
             width: 300px;
+            margin-bottom: $gap-y-size;
             box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 
             .card-header {
@@ -754,6 +767,10 @@ body {
                 background-color: transparent;
                 border: none;
             }
+
+            .btn {
+                font-size: 12px;
+            }
         }
     }
 }
@@ -783,7 +800,7 @@ body {
 
         &.scrolledMore {
             .alert-criteria {
-                top: 72px;
+                top: 72px !important;
             }
         }
     }
@@ -958,6 +975,9 @@ body {
     .docs-page {
         .docs-content {
             .top-container {
+                nav{
+                    padding-right: 0;
+                }
                 .doc-social-btns {
                     display: none;
                 }