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 d471603c2f..ec897eb73c 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
@@ -53,13 +53,13 @@
         <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
             <div class="row">
                 <div class="col-md-2">
-                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
+                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar p-2">
 
                         <div class="docs-top">
                             <nav class="navbar navbar-logo">
                                 @if (!Model.Project.Name.IsNullOrWhiteSpace())
                                 {
-                                    <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
+                                    <a class="navbar-brand" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
                                         <span id="ProjectName">@Model.Project.Name</span><br>
                                         <strong class="display-block">
                                             @L["Documents"]
@@ -71,7 +71,6 @@
                                 {
                                     <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
                                         <i class="fa fa-chevron-left"></i>
-                                        @L["BackToWebsite"]
                                     </a>
                                 }
 
@@ -86,9 +85,10 @@
                         </div>
 
                         <div class="docs-tree-list">
-                            <div class="px-3">
-                                <div class="row mx-0 mb-2 ">
-                                    <div class="col-md-6 pe-1 ps-0">
+                            <div class="px-4">
+                                <div class="row mx-0 mb-1 ">
+                                    
+                                    <div class="col-12 px-0 mb-1">
                                         @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
                                             {
                                                 <div class="docs-version">
@@ -108,11 +108,11 @@
                                                 </div>
                                             }
                                     </div>
-                                    <div class="col-md-6 pe-0 ps-1">
-                                        <div class="row">
+
+                                    <div class="col-12 px-0 mb-1">
                                             @if (Model.VersionSelectItems.Any())
                                             {
-                                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
+                                                <div class="@(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
                                                     <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
                                                         <span>Version</span>
                                                         <div class="version-select">
@@ -132,28 +132,32 @@
                                                     </div>
                                                 </div>
                                             }
+                                    </div>
 
-                                            @if (Model.LanguageSelectListItems.Count > 1)
-                                            {
-                                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
-                                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
-                                                        <span>Language</span>
-                                                        <div class="version-select">
-                                                            <div class="input-group">
-                                                                @*<span class="input-group-text">
-                                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
-                                                                    </span>*@
-                                                                <select asp-items="Model.LanguageSelectListItems"
-                                                                class="form-select"
-                                                                onchange="window.location.replace(this.value)">
-                                                                </select>
-                                                            </div>
-                                                        </div>
+
+                                <div class="col-12 px-0 mb-1">
+
+                                    @if (Model.LanguageSelectListItems.Count > 1)
+                                    {
+                                        <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
+                                            <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                                <span>Language</span>
+                                                <div class="version-select">
+                                                    <div class="input-group">
+                                                        @*<span class="input-group-text">
+                                                            <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
+                                                            </span>*@
+                                                        <select asp-items="Model.LanguageSelectListItems"
+                                                        class="form-select"
+                                                        onchange="window.location.replace(this.value)">
+                                                        </select>
                                                     </div>
                                                 </div>
-                                            }
+                                            </div>
                                         </div>
-                                    </div>
+                                    }
+                                </div>
+
                                 </div>
 
                                 <div class="docs-version">
@@ -170,6 +174,7 @@
                                     </div>
                                 </div>
                             </div>
+
                             @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
                             {
                                 <div class="text-muted p-3">
@@ -239,41 +244,45 @@
                                         </div>
                                     }
                                 </div>
-                                <div class="col-auto">
-                                    <div class="cont-container">
+                                <div class="col-auto text-end">
+                                    <div class="cont-container d-flex align-items-center justify-content-end h-100">
                                         @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                                         {
-                                            <span class="for-desktop me-3">
-                                                @(L["Contributors"].Value)
-                                            </span>
-                                            @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
-                                            {
-                                                <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
-                                                    <img src="@contributor.AvatarUrl"
-                                        class="rounded-circle"
-                                        alt="Avatar"
-                                        height="21"
-                                        width="21"
-                                        title="@contributor.Username" />
-                                                </a>
-                                            }
+                                                <div class="me-4">
+                                                    <span class="for-desktop w-100 contributors-text">
+                                                       @(L["Contributors"].Value):
+                                                   </span>
+
+                                                     @if (string.IsNullOrEmpty(Model.Document.EditLink))
+                                                        {
+                                                            <a href="@Model.Document.EditLink" target="_blank">
+                                                                <i class="fa fa-edit"></i>
+                                                                @(L["Edit"])
+                                                                <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
+                                                            </a>
+                                                        }
+                                                </div>
+                                                <div class="">
+                                                  @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                                    {
+                                                        <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                                            <img src="@contributor.AvatarUrl"
+                                                                class="rounded-circle"
+                                                                alt="Avatar"
+                                                                height="21"
+                                                                width="21"
+                                                                title="@contributor.Username" />
+                                                        </a>
+                                                    }
+                                                </div>
                                         }
+                                 
                                     </div>
-                                </div>
-                                <div class="col-auto">
-                                    @if (!string.IsNullOrEmpty(Model.Document.EditLink))
-                                    {
-                                        <a href="@Model.Document.EditLink" target="_blank">
-                                            <i class="fa fa-edit"></i>
-                                            @(L["Edit"])
-                                            <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
-                                        </a>
-                                    }
+
+                               
 
                                 </div>
                             </div>
-
-
                         </div>
 
                     
@@ -295,7 +304,7 @@
                                             <abp-row>
                                                 @foreach (var parameter in Model.DocumentPreferences.Parameters)
                                                 {
-                                                    <abp-column size="_6">
+                                                    <abp-column size="_4">
                                                         <div class="custom-input-group">
                                                             <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
                                                             <select class="doc-section-combobox form-select"
@@ -356,7 +365,7 @@
                                     <nav id="docs-sticky-index" class="navbar index-scroll">
                                     </nav>
                                     <div class="row">
-                                        <div class="col p-0 py-3">
+                                        <div class="col p-0">
                                             <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
                                         </div>
                                     </div>
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 918974fa82..abcfb360bc 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
@@ -4,13 +4,21 @@ body {
 
 .container {
   max-width: 1920px !important;
-  border: 1px solid;
+  padding: 0;
 }
 
 a {
   text-decoration: none;
 }
 
+.btn-primary {
+  background-color: #b84297 !important;
+  font-size: 12px;
+}
+
+.docs-page {
+  padding: 0 1rem;
+}
 .docs-page .anchorjs-link {
   transition: all 0.25s linear;
   -webkit-transition: all 0.25s linear;
@@ -46,7 +54,7 @@ a {
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
   position: relative;
   font-size: 12px;
-  background-color: #474747;
+  background-color: #121212;
   color: rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   padding: 7px 10px 0 10px;
@@ -100,7 +108,7 @@ a {
   color: #ddd;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-  height: calc(100vh - 130px);
+  height: calc(100vh - 98px);
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
   display: block;
@@ -112,7 +120,7 @@ a {
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
   font-size: 14px;
   list-style: none;
-  padding: 0 1rem 1rem;
+  padding: 0 1.6em 1em;
   margin: 0;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
@@ -124,8 +132,8 @@ a {
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
   color: #999;
-  font-weight: 700;
-  padding: 7px 0;
+  font-weight: 500;
+  padding: 4px 0;
   display: block;
   border-bottom: 0;
 }
@@ -189,18 +197,18 @@ a {
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
   transform: rotate(90deg);
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
   transform: rotate(0deg);
 }
 .docs-page .docs-sidebar .docs-top {
-  padding: 0 1em;
+  padding: 0 1.9em;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   font-size: 1.35rem;
   color: #000;
-  font-weight: 700;
+  font-weight: 500;
   padding: 15px 0 15px;
   line-height: 1;
 }
@@ -252,37 +260,37 @@ a {
   text-decoration: none;
 }
 .docs-page .docs-content .docs-link-btns {
-  background: #f5f7fa;
-  padding: 15px 30px;
-  margin: 0 -15px;
-  text-align: right;
   font-size: 0.8em;
-  min-height: 48px;
+  padding: 0 2rem;
 }
 .docs-page .docs-content .docs-link-btns a {
-  color: #222;
+  color: #3e9fcb;
 }
 .docs-page .docs-content .docs-link-btns a .text-muted {
-  color: #ccc !important;
+  color: rgba(11, 22, 33, 0.3) !important;
 }
 .docs-page .docs-content .docs-link-btns a:hover {
-  color: #000;
+  color: #3e9fcb;
   text-decoration: none;
 }
 .docs-page .docs-content .docs-link-btns .search-area {
-  margin: -5px 0 -5px -10px;
-  box-shadow: 0 0 10px #e8e8e8;
+  background-color: rgba(11, 15, 33, 0.05);
+  border-radius: 8px;
+  height: 44px;
+}
+.docs-page .docs-content .docs-link-btns .search-area .input-group {
+  height: 100%;
 }
 .docs-page .docs-content .docs-link-btns .search-area .input-group-text {
-  background: white;
+  background: transparent;
   border: 0;
-  color: #000;
+  color: rgba(41, 45, 51, 0.5);
   font-size: 1em;
 }
 .docs-page .docs-content .docs-link-btns .search-area .form-control {
-  background: #fff;
+  background: transparent;
   border: 0;
-  font-size: 1em;
+  font-size: 1.1em;
   padding-left: 0;
   outline: 0;
   box-shadow: none;
@@ -383,17 +391,19 @@ a {
 .docs-page .docs-content article.docs-body table img {
   background-color: initial;
 }
+.docs-page .cont-container .contributors-text {
+  color: rgba(11, 22, 33, 0.5);
+  font-size: 1.1em;
+  font-weight: 600;
+}
 .docs-page .cont-container a.cont-avatar {
   position: relative;
 }
 .docs-page .cont-container a.cont-avatar img {
-  width: 24px;
-  height: 24px;
-  box-shadow: 0 0 8px #c1bbbb;
-  border: 2px solid #fff;
+  width: 32px;
+  height: 32px;
   margin-left: -10px;
   display: inline-block;
-  margin-top: -2px;
   transition: 0.2s;
 }
 .docs-page .cont-container:hover a.cont-avatar img {
@@ -430,16 +440,16 @@ a {
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
-  border-left: 1px solid #3e9fcb;
+  border-left: 1px solid #b84297;
   background: none;
-  color: #3e9fcb;
+  color: #b84297;
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
   margin-left: -30px;
@@ -470,11 +480,21 @@ a {
   background-color: transparent;
   border-bottom: none;
   color: #0b1621;
-  font-size: 19px;
   padding: 0;
 }
+.docs-page .card .card-header h5 {
+  font-size: 19px;
+}
 .docs-page .card .card-body {
   padding: 0;
+  color: rgba(11, 22, 33, 0.4);
+  font-size: 13px;
+  padding: 1rem 0;
+}
+.docs-page .card .card-footer {
+  padding: 0;
+  background-color: transparent;
+  border: none;
 }
 .docs-page .top-container {
   display: flex;
@@ -482,6 +502,7 @@ a {
   align-items: center;
   padding: 10px 0 5px 0;
   border-bottom: 1px solid #eaeaea;
+  margin: 0 2rem;
 }
 .docs-page .top-container .breadcrumb {
   margin-bottom: 0;
@@ -619,40 +640,20 @@ a {
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
   color: #fff;
-  text-align: center;
-  display: block;
-  width: 100%;
-  background: #444;
-  padding: 6px 0 8px;
-  border-radius: 5px;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
   color: #ddd;
 }
 
-@media (min-width: 1100px) {
-  .container {
-    max-width: 1080px;
-  }
-}
-@media (min-width: 1366px) {
-  .container {
-    max-width: 1340px;
-  }
-}
-@media (min-width: 1440px) {
-  .container {
-    max-width: 1400px;
-  }
-}
 @media (max-width: 767px) {
+  .docs-page {
+    padding: 0 0;
+  }
+
   .docs-page .docs-content article.docs-body h1 {
     padding-top: 1.5rem;
   }
 
-  .docs-page {
-    background: #f5f7f9;
-  }
   .docs-page > .container-fluid {
     display: block;
   }
@@ -662,23 +663,24 @@ a {
   .docs-page .docs-sidebar {
     position: fixed;
     max-width: 100%;
-    width: 100%;
+    width: 100% !important;
     display: block;
     padding: 0 !important;
-    top: 0;
+    top: 0 !important;
     left: 0;
     z-index: 100;
     right: 0;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper {
     max-width: 100%;
     width: 100%;
     top: 0px;
     position: relative;
     margin: 0 !important;
     height: 72px;
+    border-radius: 0;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
     padding: 0.5rem 1.5rem 2rem 1.5rem;
     position: fixed;
     top: 70px;
@@ -689,7 +691,7 @@ a {
     background: #1d1d1d;
     display: none;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list .docs-filter {
     padding: 0 0 1rem !important;
   }
   .docs-page .docs-sidebar .docs-top .navbar-logo {
@@ -700,7 +702,7 @@ a {
   }
   .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
     font-size: 1.25rem;
-    font-weight: 700;
+    font-weight: 500;
     display: block;
     margin-right: 0em;
     padding: 10px 0 15px;
@@ -722,7 +724,6 @@ a {
     left: 20px;
   }
   .docs-page .docs-content {
-    padding-top: 72px;
     max-width: 100%;
     display: block !important;
   }
@@ -810,6 +811,10 @@ div.code-toolbar > .toolbar a {
     opacity: 0;
   }
 
+  .docs-page .top-container {
+    display: none;
+  }
+
   .navbar {
     padding: 0.5rem 1.75rem;
   }
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 74ca9cf43e..d28bbb609b 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":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAIA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;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;;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;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;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;;AAOZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;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;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACE;;;AAYM;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAOpB;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;EAGJ;IASI;;EARA;IACI;;EAEA;IACI;;EAMR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;EAEA;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;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;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;;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;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAIJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACG;;AAGH;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;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;;AAOZ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;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;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;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;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","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 f397ba1cf6..4ca8843571 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
@@ -4,14 +4,20 @@ body {
 
 .container {
     max-width: 1920px !important;
-    border: 1px solid;
+    padding: 0;
 }
 
 a {
     text-decoration: none;
 }
 
+.btn-primary {
+    background-color: #b84297 !important;
+    font-size: 12px;
+}
+
 .docs-page {
+    padding: 0 1rem;
     .anchorjs-link {
         transition: all 0.25s linear;
         -webkit-transition: all 0.25s linear;
@@ -56,7 +62,7 @@ a {
             .docs-version {
                 position: relative;
                 font-size: 12px;
-                background-color: #474747;
+                background-color: #121212;
                 color: rgb(255 255 255 / 30%);
                 border-radius: 8px;
                 padding: 7px 10px 0 10px;
@@ -120,7 +126,7 @@ a {
             }
 
             .docs-tree-list {
-                height: calc(100vh - 130px);
+                height: calc(100vh - 98px);
 
                 > ul {
                     display: block;
@@ -133,7 +139,7 @@ a {
                 ul {
                     font-size: 14px;
                     list-style: none;
-                    padding: 0 1rem 1rem;
+                    padding: 0 1.6em 1em;
                     margin: 0;
 
                     li {
@@ -145,8 +151,8 @@ a {
 
                         a {
                             color: #999;
-                            font-weight: 700;
-                            padding: 7px 0;
+                            font-weight: 500;
+                            padding: 4px 0;
                             display: block;
                             border-bottom: 0;
 
@@ -231,7 +237,7 @@ a {
                             > span {
                                 .fa {
                                     transform: rotate(90deg);
-                                    color: #3e9fcb;
+                                    color: #b84297;
                                 }
                             }
 
@@ -249,13 +255,13 @@ a {
         }
 
         .docs-top {
-            padding: 0 1em;
+            padding: 0 1.9em;
 
             .navbar-logo {
                 .navbar-brand {
                     font-size: 1.35rem;
                     color: #000;
-                    font-weight: 700;
+                    font-weight: 500;
                     padding: 15px 0 15px;
                     line-height: 1;
 
@@ -320,41 +326,43 @@ a {
         }
 
         .docs-link-btns {
-            background: #f5f7fa;
-            padding: 15px 30px;
-            margin: 0 -15px;
-            text-align: right;
             font-size: 0.8em;
-            min-height: 48px;
+            padding: 0 2rem;
 
             a {
-                color: #222;
+                color: #3e9fcb;
 
                 .text-muted {
-                    color: #ccc !important;
+                    color:rgb(11 22 33 / 30%) !important
+
                 }
 
                 &:hover {
-                    color: #000;
+                    color: #3e9fcb;
                     text-decoration: none;
                 }
             }
 
             .search-area {
-                margin: -5px 0 -5px -10px;
-                box-shadow: 0 0 10px #e8e8e8;
+                background-color: rgb(11 15 33 / 5%);
+                border-radius: 8px;
+                height: 44px;
+
+                .input-group {
+                   height: 100%;
+                }
 
                 .input-group-text {
-                    background: white;
+                    background: transparent;
                     border: 0;
-                    color: #000;
+                    color: rgb(41 45 51 / 50%);
                     font-size: 1em;
                 }
 
                 .form-control {
-                    background: #fff;
+                    background: transparent;
                     border: 0;
-                    font-size: 1em;
+                    font-size: 1.1em;
                     padding-left: 0;
                     outline: 0;
                     box-shadow: none;
@@ -471,17 +479,20 @@ a {
     }
 
     .cont-container {
+        .contributors-text{
+            color: rgb(11 22 33 / 50%);
+            font-size: 1.1em;
+            font-weight: 600;
+        }
+
         a.cont-avatar {
             position: relative;
 
             img {
-                width: 24px;
-                height: 24px;
-                box-shadow: 0 0 8px #c1bbbb;
-                border: 2px solid #fff;
+                width: 32px;
+                height: 32px;
                 margin-left: -10px;
                 display: inline-block;
-                margin-top: -2px;
                 transition: 0.2s;
             }
         }
@@ -528,9 +539,9 @@ a {
                         font-weight: normal;
 
                         &.active {
-                            border-left: 1px solid #3e9fcb;
+                            border-left: 1px solid #b84297;
                             background: none;
-                            color: #3e9fcb;
+                            color: #b84297;
                             font-weight: normal;
                         }
                     }
@@ -538,14 +549,14 @@ a {
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #3e9fcb;
+                                color: #b84297;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #3e9fcb;
+                                    color: #b84297;
                                 }
                             }
                         }
@@ -588,11 +599,21 @@ a {
             background-color: transparent;
             border-bottom: none;
             color: #0b1621;
-            font-size: 19px;
             padding: 0;
+            h5 {
+                font-size: 19px;
+            }
         }
         .card-body {
             padding: 0;
+            color: rgb(11 22 33 / 40%);
+            font-size: 13px;
+            padding: 1rem 0;
+        }
+        .card-footer {
+            padding: 0;
+            background-color: transparent;
+            border: none;
         }
     }
 
@@ -602,6 +623,7 @@ a {
         align-items: center;
         padding: 10px 0 5px 0;
         border-bottom: 1px solid #eaeaea;
+        margin: 0 2rem;
 
         .breadcrumb {
             margin-bottom: 0;
@@ -647,17 +669,16 @@ a {
             padding: 0;
             background-color: transparent;
             border: none;
-            color: rgb(11 22 33 / 30%)
+            color: rgb(11 22 33 / 30%);
         }
         .form-select {
             border: none;
             padding: 0;
             background-color: transparent;
             background-position: right top;
-            &:focus{
-              box-shadow: none !important;
+            &:focus {
+                box-shadow: none !important;
             }
-
         }
     }
 }
@@ -790,12 +811,6 @@ a {
 
                 .go-back-site {
                     color: #fff;
-                    text-align: center;
-                    display: block;
-                    width: 100%;
-                    background: #444;
-                    padding: 6px 0 8px;
-                    border-radius: 5px;
                 }
 
                 .navbar-logo-desc {
@@ -806,25 +821,28 @@ a {
     }
 }
 
-@media (min-width: 1100px) {
-    .container {
-        max-width: 1080px;
-    }
-}
+// @media (min-width: 1100px) {
+//     .container {
+//         max-width: 1080px;
+//     }
+// }
 
-@media (min-width: 1366px) {
-    .container {
-        max-width: 1340px;
-    }
-}
+// @media (min-width: 1366px) {
+//     .container {
+//         max-width: 1340px;
+//     }
+// }
 
-@media (min-width: 1440px) {
-    .container {
-        max-width: 1400px;
-    }
-}
+// @media (min-width: 1440px) {
+//     .container {
+//         max-width: 1400px;
+//     }
+// }
 
 @media (max-width: 767px) {
+    .docs-page {
+        padding: 0 0;
+    }
     .docs-page .docs-content article.docs-body h1 {
         padding-top: 1.5rem;
     }
@@ -838,26 +856,25 @@ a {
             }
         }
 
-        background: rgb(245, 247, 249);
-
         .docs-sidebar {
             position: fixed;
             max-width: 100%;
-            width: 100%;
+            width: 100% !important;
             display: block;
             padding: 0 !important;
-            top: 0;
+            top: 0 !important;
             left: 0;
             z-index: 100;
             right: 0;
 
-            .docs-sidebar-wrapper {
+            &.docs-sidebar-wrapper {
                 max-width: 100%;
                 width: 100%;
                 top: 0px;
                 position: relative;
                 margin: 0 !important;
                 height: 72px;
+                border-radius: 0;
 
                 .docs-tree-list {
                     padding: 0.5rem 1.5rem 2rem 1.5rem;
@@ -891,7 +908,7 @@ a {
 
                     .navbar-brand {
                         font-size: 1.25rem;
-                        font-weight: 700;
+                        font-weight: 500;
                         display: block;
                         margin-right: 0em;
                         padding: 10px 0 15px;
@@ -924,7 +941,6 @@ a {
         }
 
         .docs-content {
-            padding-top: 72px;
             max-width: 100%;
             display: block !important;
 
@@ -1020,6 +1036,10 @@ div.code-toolbar > .toolbar a {
         opacity: 0;
     }
 
+    .docs-page .top-container {
+        display: none;
+    }
+
     .navbar {
         padding: 0.5rem 1.75rem;
 
@@ -1162,4 +1182,4 @@ div.code-toolbar > .toolbar a {
     opacity: 1 !important;
     filter: 'alpha(opacity=1)';
     -ms-filter: 'alpha(opacity=1)';
-}
\ No newline at end of file
+}