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 9f8a78ae9f..419c232e36 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
@@ -18,7 +18,7 @@
 
 @model IndexModel
 @{
-    ViewBag.FluidLayout = false;
+    ViewBag.FluidLayout = true;
     Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
     PageLayout.Content.Title = Model.DocumentName?.Replace("-", " ");
     ViewBag.Description = Model.GetDescription();
@@ -26,398 +26,421 @@
 }
 
 @section styles {
-<abp-style-bundle name="@typeof(IndexModel).FullName">
-    <abp-style type="@typeof(PrismjsStyleBundleContributor)" />
-    <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)" />
-    <abp-style src="/Pages/Documents/Project/bootstrap-toc.css" />
-    <abp-style src="/Pages/Documents/Shared/Styles/vs.css" />
-    <abp-style src="/Pages/Documents/Project/index.css" />
-</abp-style-bundle>
+    <abp-style-bundle name="@typeof(IndexModel).FullName">
+        <abp-style type="@typeof(PrismjsStyleBundleContributor)"/>
+        <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)"/>
+        <abp-style src="/Pages/Documents/Project/bootstrap-toc.css"/>
+        <abp-style src="/Pages/Documents/Shared/Styles/vs.css"/>
+        <abp-style src="/Pages/Documents/Project/index.css"/>
+    </abp-style-bundle>
 }
+
 @section scripts {
-<abp-script-bundle name="@typeof(IndexModel).FullName">
-    <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)" />
-    <abp-script type="@typeof(ClipboardScriptBundleContributor)" />
-    <abp-script type="@typeof(AnchorJsScriptBundleContributor)" />
-    <abp-script type="@typeof(PrismjsScriptBundleContributor)" />
-    <abp-script type="@typeof(PopperJsScriptBundleContributor)" />
-    <abp-script src="/client-proxies/docs-proxy.js" />
-    <abp-script src="/Pages/Documents/Project/bootstrap-toc.js" />
-    <abp-script src="/Pages/Documents/Shared/Scripts/vs.js" />
-    <abp-script src="/Pages/Documents/Project/index.js" />
-    <abp-script src="/Pages/Documents/Shared/ErrorComponent/error.js" />
-</abp-script-bundle>
+    <abp-script-bundle name="@typeof(IndexModel).FullName">
+        <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)"/>
+        <abp-script type="@typeof(ClipboardScriptBundleContributor)"/>
+        <abp-script type="@typeof(AnchorJsScriptBundleContributor)"/>
+        <abp-script type="@typeof(PrismjsScriptBundleContributor)"/>
+        <abp-script type="@typeof(PopperJsScriptBundleContributor)"/>
+        <abp-script src="/client-proxies/docs-proxy.js"/>
+        <abp-script src="/Pages/Documents/Project/bootstrap-toc.js"/>
+        <abp-script src="/Pages/Documents/Shared/Scripts/vs.js"/>
+        <abp-script src="/Pages/Documents/Project/index.js"/>
+        <abp-script src="/Pages/Documents/Shared/ErrorComponent/error.js"/>
+    </abp-script-bundle>
 }
+
 @if (Model.LoadSuccess)
 {
-        <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
-         
-                    <div class="docs-sidebar-wrapper docs-sidebar">
-
-                        <div class="docs-top">
-                            <nav class="navbar navbar-logo">
-                                @if (!Model.Project.Name.IsNullOrWhiteSpace())
-                                {
-                                    <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"]
-                                        </strong>
-                                    </a>
-                                }
+    <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
 
-                                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
-                                {
-                                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
-                                        <i class="fa fa-chevron-left"></i>
-                                    </a>
-                                }
+    <div class="docs-sidebar-wrapper docs-sidebar">
 
-                                <div class="for-mobile">
-                                    <div class="navbar-dark">
-                                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
-                                            <span class="navbar-toggler-icon"></span>
-                                        </button>
-                                    </div>
+        <div class="docs-top">
+            <nav class="navbar navbar-logo">
+                @if (!Model.Project.Name.IsNullOrWhiteSpace())
+                {
+                    <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"]
+                        </strong>
+                    </a>
+                }
+
+                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
+                {
+                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
+                        <i class="fa fa-chevron-left"></i>
+                    </a>
+                }
+
+                <div class="for-mobile">
+                    <div class="navbar-dark">
+                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        </div>
+
+        <div class="docs-tree-list">
+            <div class="row gx-2 mb-2 ">
+                @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
+                {
+                    <div class="col-12 mb-2">
+
+                        <div class="docs-version">
+                            <span>Project</span>
+                            <div class="version-select">
+                                <div class="input-group">
+                                    <span class="input-group-text d-none">
+                                        <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
+                                    </span>
+
+                                    <select asp-items="Model.ProjectSelectItems"
+                                            class="form-select"
+                                            onchange="window.location.pathname = this.value">
+                                    </select>
                                 </div>
-                            </nav>
+                            </div>
                         </div>
 
-                        <div class="docs-tree-list">
-                                <div class="row gx-2 mb-2 ">
-                                     @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
-                                            {
-                                    <div class="col-12 mb-2">
-                                       
-                                                <div class="docs-version">
-                                                    <span>Project</span>
-                                                    <div class="version-select">
-                                                        <div class="input-group">
-                                                            <span class="input-group-text d-none">
-                                                                <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
-                                                            </span>
-
-                                                            <select asp-items="Model.ProjectSelectItems"
-                                                            class="form-select"
-                                                            onchange="window.location.pathname = this.value">
-                                                            </select>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                           
-                                    </div>
-                                    } 
-                                    @if (Model.VersionSelectItems.Any())
-                                            {
-                                    <div class="col">
-                                           
-                                                <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">
-                                                            <div class="input-group">
-
-                                                                <span class="input-group-text">
-                                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
-                                                                </span>
-
-
-                                                                <select asp-items="Model.VersionSelectItems"
-                                                                class="form-select"
-                                                                onchange="if (this.value) { window.location.replace(this.value) }">
-                                                                </select>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                           
-                                    </div>
-                            }
-                            @if (Model.LanguageSelectListItems.Count > 1)
-                                    {
-                                <div class="col">
-
-                                  
-                                        <div class="@(Model.VersionSelectItems.Any()? "" : "")">
-                                            <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>
+                }
+                @if (Model.VersionSelectItems.Any())
+                {
+                    <div class="col">
+                        <div class="@(Model.LanguageSelectListItems.Count > 1 ? "pe-0" : "")">
+                            <div class="docs-version @(Model.LanguageSelectListItems.Count > 1 ? "pe-1" : "")">
+                                <span>@L["Version"]</span>
+                                <div class="version-select">
+                                    <div class="input-group">
+                                        <span class="input-group-text">
+                                            <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
+                                        </span>
 
-                                <div class="docs-version">
-                                    <div class="version-select">
-                                        <div class="input-group">
-                                            <span class="input-group-text"><i class="fa fa-filter"></i></span>
-                                            <input class="form-control"
-                                            id="filter"
-                                            type="search"
-                                            data-search-url="@Model."
-                                            placeholder="@L["FilterTopics"].Value"
-                                            aria-label="Filter">
-                                        </div>
+                                        <select asp-items="Model.VersionSelectItems"
+                                                class="form-select"
+                                                onchange="if (this.value) { window.location.replace(this.value) }">
+                                        </select>
                                     </div>
                                 </div>
-
-                            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
-                            {
-                                <div class="text-muted p-3">
-                                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
-                                </div>
-                            }
-                            else
-                            {
-                                <ul root-node="@Model.Navigation"
-                            version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
-                            project-name="@Model.ProjectName"
-                            project-format="@Model.Project.Format"
-                            selected-document-name="@Model.DocumentNameWithExtension"
-                            language="@Model.LanguageCode"
-                            id="sidebar-scroll"
-                            class="nav nav-list"></ul>
-                            }
+                            </div>
                         </div>
-                    </div>
 
-                @if (Model.Document != null)
+                    </div>
+                }
+                @if (Model.LanguageSelectListItems.Count > 1)
                 {
-                    <div class="docs-content">
-                        <div class="top-container mb-3">
-                            <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 class="col">
+                        <div>
+                            <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                <span>@L["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 class="docs-link-btns">
-                            <div class="row">
-                                <div class="col">
-                                    @if (Model.FullSearchEnabled)
-                                    {
-                                        <div class="search-area">
-                                            <div class="input-group">
-                                                <span class="input-group-text"><i class="fa fa-search"></i></span>
-
-                                                <input class="form-control"
-                                        id="fullsearch"
-                                        type="search"
-                                        data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
-                                        placeholder="@L["FullSearch"].Value"
-                                        aria-label="Filter">
-                                            </div>
-                                        </div>
-                                    }
-                                </div>
-                                <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)
-                                        {
-                                                <div class="me-4 d-flex flex-column">
-                                                    <span class="for-desktop 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" data-bs-toggle="tooltip" data-bs-placement="top" title='@L["LastEditTime"]'>(@Model.Document.LastUpdatedTime.ToShortDateString())</span>
-                                                            </a>
-                                                        }
-                                                </div>
-                                                <div class="contributors">
-                                                  @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" 
-                                                                data-bs-toggle="tooltip"
-                                                                 data-bs-placement="top"
-                                                                />
-                                                        </a>
-                                                    }
-                                                </div>
-                                        }
-                                 
-                                    </div>
+                    </div>
+                }
+            </div>
+
+            <div class="docs-version">
+                <div class="version-select">
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="fa fa-filter"></i>
+                        </span>
+                        <input class="form-control"
+                               id="filter"
+                               type="search"
+                               data-search-url="@Model."
+                               placeholder="@L["FilterTopics"].Value"
+                               aria-label="Filter">
+                    </div>
+                </div>
+            </div>
 
-                               
+            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
+            {
+                <div class="text-muted p-3">
+                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
+                </div>
+            }
+            else
+            {
+                <ul root-node="@Model.Navigation"
+                    version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
+                    project-name="@Model.ProjectName"
+                    project-format="@Model.Project.Format"
+                    selected-document-name="@Model.DocumentNameWithExtension"
+                    language="@Model.LanguageCode"
+                    id="sidebar-scroll"
+                    class="nav nav-list">
+                </ul>
+            }
+        </div>
+    </div>
 
+    @if (Model.Document != null)
+    {
+        // TODO: get elements
+        <div class="docs-content">
+            <div class="top-container mb-3">
+                <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>
+            </div>
+
+            <div class="docs-link-btns">
+                <div class="row">
+                    <div class="col">
+                        @if (Model.FullSearchEnabled)
+                        {
+                            <div class="search-area">
+                                <div class="input-group">
+                                    <span class="input-group-text">
+                                        <i class="fa fa-search"></i>
+                                    </span>
+
+                                    <input class="form-control"
+                                           id="fullsearch"
+                                           type="search"
+                                           data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
+                                           placeholder="@L["FullSearch"].Value"
+                                           aria-label="Filter">
                                 </div>
                             </div>
-                        </div>
+                        }
+                    </div>
+                    <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)
+                            {
+                                <div class="me-4 d-flex flex-column">
+                                    <span class="for-desktop contributors-text">
+                                        @L["Contributors"].Value
+                                    </span>
 
-                        <div class="docs-content-field">
-                            <div class="docs-text-field">
-                                <div class="position-relative">
-                                    @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                                    @if (string.IsNullOrEmpty(Model.Document.EditLink))
                                     {
-                                        <div class="alert alert-primary alert-criteria">
-                                            <abp-row>
-                                                <abp-column>
-                                                    <p class="alert-p mb-2">
-                                                        <i class="fa fa-info-circle"></i>
-                                                        @L["MultipleVersionDocumentInfo"]
-                                                    </p>
-                                                </abp-column>
-                                            </abp-row>
-                                            <abp-row class="gx-2">
-                                                @foreach (var parameter in Model.DocumentPreferences.Parameters)
-                                                {
-                                                    <div class="col">
-                                                        <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"
-                                                    aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
-                                                    id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
-                                                                @foreach (var value in parameter.Values)
-                                                                {
-                                                                    @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
-                                                                    {
-                                                                        <option value="@value.Key" selected="selected">@value.Value</option>
-                                                                    }
-                                                                    else
-                                                                    {
-                                                                        <option value="@value.Key">@value.Value</option>
-                                                                    }
-                                                                }
-                                                            </select>
-                                                        </div>
-                                                    </div>
-                                                }
-                                            </abp-row>
-                                        </div>
+                                        <a href="@Model.Document.EditLink" target="_blank">
+                                            <i class="fa fa-edit"></i>
+                                            @L["Edit"]
+                                            <span class="for-desktop text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title='@L["LastEditTime"]'>(@Model.Document.LastUpdatedTime.ToShortDateString())</span>
+                                        </a>
                                     }
                                 </div>
-
-                                <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
-                                    <article class="docs-body">
-
-                                        @if (Model.DocumentLanguageCode != Model.LanguageCode)
-                                        {
-                                            <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
-                                                @L["DocumentNotFoundInSelectedLanguage"]
-                                            </abp-alert>
-                                        }
-                                        @Html.Raw(Model.Document.Content)
-                                    </article>
-
-                                    <div id="crawler_link" style="display:none;">
-                                        @foreach (var query in Model.AlternativeOptionLinkQueries)
-                                        {
-                                            <a href="@($"{Request.Path}?{query}")"> @query </a>
-                                        }
-                                    </div>
+                                <div class="contributors">
+                                    @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"
+                                                 data-bs-toggle="tooltip"
+                                                 data-bs-placement="top"/>
+                                        </a>
+                                    }
                                 </div>
-                            </div>
+                            }
+
                         </div>
+
+
                     </div>
+                </div>
+            </div>
 
-                    <!-- Right Bar -->
-                    <div class="docs-page-index">
-                        <div class=" docs-inner-anchors">
-                            <div class="card">
-                                <div class="card-body">
-                                    <h5 class="card-title">@L["InThisDocument"]</h5>
-
-                                    <div id="scroll-index" class="">
-                                        <nav id="docs-sticky-index" class="navbar index-scroll">
-                                        </nav>
-                                        <div class="row">
-                                            <div class="col p-0">
-                                                <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+            <div class="docs-content-field">
+                <div class="docs-text-field">
+                    <div class="position-relative">
+                        @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                        {
+                            <div class="alert alert-primary alert-criteria">
+                                <abp-row>
+                                    <abp-column>
+                                        <p class="alert-p mb-2">
+                                            <i class="fa fa-info-circle"></i>
+                                            @L["MultipleVersionDocumentInfo"]
+                                        </p>
+                                    </abp-column>
+                                </abp-row>
+                                <abp-row class="gx-2">
+                                    @foreach (var parameter in Model.DocumentPreferences.Parameters)
+                                    {
+                                        <div class="col">
+                                            <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"
+                                                        aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
+                                                        id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
+                                                    @foreach (var value in parameter.Values)
+                                                    {
+                                                        @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
+                                                        {
+                                                            <option value="@value.Key" selected="selected">@value.Value</option>
+                                                        }
+                                                        else
+                                                        {
+                                                            <option value="@value.Key">@value.Value</option>
+                                                        }
+                                                    }
+                                                </select>
                                             </div>
                                         </div>
-                                    </div>
+                                    }
+                                </abp-row>
+                            </div>
+                        }
+                    </div>
+
+                    <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
+                        <article class="docs-body">
+
+                            @if (Model.DocumentLanguageCode != Model.LanguageCode)
+                            {
+                                <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
+                                    @L["DocumentNotFoundInSelectedLanguage"]
+                                </abp-alert>
+                            }
+                            @Html.Raw(Model.Document.Content)
+                        </article>
+
+                        <div id="crawler_link" style="display:none;">
+                            @foreach (var query in Model.AlternativeOptionLinkQueries)
+                            {
+                                <a href="@($"{Request.Path}?{query}")"> @query </a>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Bar -->
+        <div class="docs-page-index">
+            <div class=" docs-inner-anchors">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">@L["InThisDocument"]</h5>
 
+                        <div id="scroll-index" class="">
+                            <nav id="docs-sticky-index" class="navbar index-scroll">
+                            </nav>
+                            <div class="row">
+                                <div class="col p-0">
+                                    <a href="javascript:;" class="scroll-top-btn">
+                                        <i class="fa fa-chevron-up"></i> @L["GoToTop"]
+                                    </a>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                }
-                else
-                {
-                    <div class="col-md-9 p-5 bg-white">
-                        <p>@L["DocumentNotFound"]</p>
 
-                        <a href="/">
-                            <i class="fa fa-chevron-left"></i>
-                            @L["BackToWebsite"]
-                        </a>
                     </div>
-                }
+                </div>
+            </div>
         </div>
+    }
+    else
+    {
+        <div class="col-md-9 p-5 bg-white">
+            <p>@L["DocumentNotFound"]</p>
+
+            <a href="/">
+                <i class="fa fa-chevron-left"></i>
+                @L["BackToWebsite"]
+            </a>
+        </div>
+    }
+    </div>
 }
 else
 {
     if (!Model.ProjectFound)
     {
         @(await Component.InvokeAsync<ErrorViewComponent>(new
-         {
-             model = new ErrorPageModel
-             {
-                 RedirectUrl = Model.DocumentsUrlPrefix,
-                 ErrorCode = "404",
-                 ErrorMessage = L.GetString("ProjectNotFound")
-             }
-         }))
+        {
+            model = new ErrorPageModel
+            {
+                RedirectUrl = Model.DocumentsUrlPrefix,
+                ErrorCode = "404",
+                ErrorMessage = L.GetString("ProjectNotFound")
+            }
+        }))
     }
 
     if (!Model.DocumentFound)
     {
         @(await Component.InvokeAsync<ErrorViewComponent>(new
-          {
-              model = new ErrorPageModel
-              {
-                  RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
-                                + (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
-                  ErrorCode = "404",
-                  ErrorMessage = L.GetString("DocumentNotFound"),
-                  AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
-              }
-          }))
+        {
+            model = new ErrorPageModel
+            {
+                RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
+                              + (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
+                ErrorCode = "404",
+                ErrorMessage = L.GetString("DocumentNotFound"),
+                AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
+            }
+        }))
     }
 }
\ No newline at end of file