diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
index 3318f513b5..85ba6a4172 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj
@@ -18,7 +18,7 @@
 
         <PackageReference Include="Bit.Butil" />
         <PackageReference Include="Bit.BlazorUI" />
-        <PackageReference Include="Bit.BlazorUI.Icons"/>
+        <PackageReference Include="Bit.BlazorUI.Icons" />
         <PackageReference Include="Bit.BlazorUI.Assets" />
         <!--/+:msbuild-conditional:noEmit -->
         <PackageReference Condition=" '$(offlineDb)' == 'true' OR '$(offlineDb)' == ''" Include="Bit.Besql" />
@@ -70,7 +70,7 @@
         <Exec Condition=" '$(Configuration)' == 'Release' " Command="node_modules/.bin/esbuild wwwroot/scripts/app.js --minify --outfile=wwwroot/scripts/app.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
     </Target>
 
-    <Target Name="BuildCssFiles">        
+    <Target Name="BuildCssFiles">
         <Exec Command="node_modules/.bin/sass .:. Styles/app.scss:wwwroot/styles/app.css --style compressed --load-path=." StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
     </Target>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.cs
similarity index 92%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.cs
index a0bdcb6263..c4e38aa892 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.cs
@@ -1,4 +1,4 @@
-namespace Boilerplate.Client.Core.Components.Layout;
+namespace Boilerplate.Client.Core.Components;
 
 public partial class ConfirmMessageBox
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.scss
similarity index 82%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.scss
index c2d93adad1..fe74a57e21 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/ConfirmMessageBox.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ConfirmMessageBox.razor.scss
@@ -1,6 +1,6 @@
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
-@import '../../Styles/abstracts/_bit-css-variables.scss';
+@import '../Styles/abstracts/_functions.scss';
+@import '../Styles/abstracts/_media-queries.scss';
+@import '../Styles/abstracts/_bit-css-variables.scss';
 
 .main-container {
     flex-grow: 1;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/EmptyLayout.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/EmptyLayout.razor
new file mode 100644
index 0000000000..ecd2281dc7
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/EmptyLayout.razor
@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<AppErrorBoundary>
+    @Body
+</AppErrorBoundary>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor
deleted file mode 100644
index a2a0524141..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor
+++ /dev/null
@@ -1,47 +0,0 @@
-@inherits AppComponentBase
-
-<footer class="footer">
-    @if (SelectedCulture is not null)
-    {
-        <BitDropdown @bind-Value="SelectedCulture"
-                     Class="culture-drp"
-                     Items="cultures"
-                     OnSelectItem="WrapHandled((BitDropdownItem<string> item) => OnCultureChanged())" />
-    }
-
-    <div class="footer-content">
-        Made with <span class="text--red">♥</span> by bit platform
-
-        <div class="footer-social-lnk-grp">
-            <BitLink Href="https://www.linkedin.com/company/bitplatformhq" Target="_blank">
-                <div class="social-lnk linkedin-lnk">
-                    <svg viewBox="0 0 32 32"><path d="M23.155 23.13H20.2737V18.622C20.2737 17.5464 20.2556 16.164 18.7768 16.164C17.2778 16.164 17.0488 17.3354 17.0488 18.5443V23.13H14.1702V13.8586H16.9322V15.1265H16.9725C17.3562 14.3978 18.2965 13.6289 19.6984 13.6289C22.6158 13.6289 23.1543 15.5484 23.1543 18.0453V23.13H23.155ZM10.9218 12.5928C10.7022 12.593 10.4847 12.5499 10.2818 12.466C10.0789 12.382 9.89452 12.2589 9.73924 12.1036C9.58397 11.9483 9.46083 11.764 9.37688 11.561C9.29293 11.3581 9.24982 11.1407 9.25 10.9211C9.25 10.5906 9.34797 10.2676 9.53153 9.99282C9.71509 9.71804 9.97599 9.50386 10.2813 9.37734C10.5865 9.25082 10.9225 9.21764 11.2466 9.28201C11.5707 9.34637 11.8684 9.50539 12.1022 9.73896C12.336 9.97252 12.4952 10.2701 12.5599 10.5942C12.6245 10.9183 12.5916 11.2542 12.4653 11.5596C12.3391 11.865 12.1251 12.1261 11.8505 12.3098C11.5759 12.4936 11.2529 12.5919 10.9225 12.5921L10.9218 12.5928ZM12.3631 23.13H9.47901V13.8586H12.3631V23.13Z" /></svg>
-                </div>
-            </BitLink>
-            <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_blank">
-                <div class="social-lnk github-lnk">
-                    <svg viewBox="0 0 32 32"><path d="M18.5373 10.0257C17.3046 9.73929 16.0226 9.73929 14.7899 10.0257C14.078 9.58908 13.5344 9.3884 13.1391 9.30369C12.9704 9.26561 12.7978 9.24767 12.6248 9.25024C12.5461 9.25237 12.4678 9.26183 12.3909 9.27848L12.3808 9.28049L12.3767 9.28251H12.3737L12.5119 9.76757L12.3737 9.28352C12.3029 9.30354 12.2373 9.33883 12.1815 9.38692C12.1258 9.435 12.0812 9.49471 12.051 9.56185C11.7535 10.2281 11.6968 10.9771 11.8907 11.6806C11.3886 12.289 11.115 13.0538 11.1172 13.8427C11.1172 15.4088 11.5791 16.4616 12.3667 17.1382C12.9183 17.6122 13.5879 17.8643 14.2595 18.0085C14.1486 18.3161 14.1203 18.6418 14.1425 18.9746V19.5776C13.7321 19.6633 13.4477 19.6361 13.245 19.5696C12.9919 19.4859 12.7973 19.3175 12.6107 19.0754C12.5132 18.945 12.4223 18.8097 12.3384 18.67L12.2809 18.5763C12.2084 18.4556 12.133 18.3365 12.0551 18.2193C11.8635 17.9359 11.5791 17.5809 11.1192 17.4599L10.6311 17.3318L10.375 18.308L10.8631 18.4361C10.9438 18.4562 11.0486 18.5319 11.2211 18.785C11.2846 18.8788 11.3441 18.9766 11.4127 19.0895L11.4813 19.2005C11.576 19.3538 11.685 19.5232 11.811 19.6886C12.0661 20.0213 12.4141 20.3571 12.9304 20.5276C13.2833 20.6446 13.6847 20.6728 14.1425 20.6022V22.4849C14.1425 22.6187 14.1956 22.7469 14.2902 22.8415C14.3848 22.936 14.513 22.9892 14.6467 22.9892H18.6805C18.8142 22.9892 18.9425 22.936 19.037 22.8415C19.1316 22.7469 19.1847 22.6187 19.1847 22.4849V18.8919C19.1847 18.5742 19.1706 18.2828 19.0808 18.0115C19.7494 17.8703 20.414 17.6182 20.9626 17.1443C21.7491 16.4626 22.21 15.3997 22.21 13.8245V13.8235C22.2075 13.0411 21.9338 12.2838 21.4355 11.6806C21.6291 10.9774 21.5725 10.2288 21.2752 9.56286C21.2452 9.49564 21.2009 9.4358 21.1453 9.38754C21.0897 9.33929 21.0242 9.30378 20.9535 9.28352L20.8153 9.76757C20.9535 9.28352 20.9525 9.28352 20.9515 9.28352L20.9495 9.28251L20.9454 9.28049L20.9363 9.27848C20.9114 9.272 20.8862 9.26695 20.8607 9.26335C20.8079 9.25564 20.7547 9.25127 20.7014 9.25024C20.5284 9.24769 20.3558 9.26563 20.1871 9.30369C19.7928 9.3884 19.2492 9.58908 18.5373 10.0257Z" /></svg>
-                </div>
-            </BitLink>
-            <BitLink Href="@("https://www.youtube.com/@bitplatform")" Target="_blank">
-                <div class="social-lnk youtube-lnk">
-                    <svg viewBox="0 0 32 32"><path d="M23.6572 11.8735C24 13.21 24 16 24 16C24 16 24 18.79 23.6572 20.1265C23.4667 20.8653 22.9095 21.4465 22.2037 21.643C20.922 22 16.5 22 16.5 22C16.5 22 12.0802 22 10.7962 21.643C10.0875 21.4435 9.531 20.863 9.34275 20.1265C9 18.79 9 16 9 16C9 16 9 13.21 9.34275 11.8735C9.53325 11.1348 10.0905 10.5535 10.7962 10.357C12.0802 10 16.5 10 16.5 10C16.5 10 20.922 10 22.2037 10.357C22.9125 10.5565 23.469 11.137 23.6572 11.8735ZM15 18.625L19.5 16L15 13.375V18.625Z" /></svg>
-                </div>
-            </BitLink>
-            <BitLink Href="https://twitter.com/bitplatformhq" Target="_blank">
-                <div class="social-lnk twitter-lnk">
-                    <svg viewBox="0 0 32 32"><path d="M22.9075 11.692C22.4053 11.9145 21.8657 12.0649 21.2985 12.1329C21.8838 11.7827 22.3216 11.2315 22.5304 10.5822C21.9805 10.9088 21.3787 11.1387 20.7511 11.2619C20.3291 10.8113 19.7701 10.5126 19.161 10.4123C18.5518 10.3119 17.9266 10.4155 17.3823 10.7069C16.8381 10.9983 16.4052 11.4612 16.151 12.0238C15.8968 12.5864 15.8355 13.2172 15.9765 13.8183C14.8623 13.7623 13.7724 13.4727 12.7774 12.9683C11.7824 12.4639 10.9046 11.7558 10.201 10.8902C9.96036 11.3052 9.82202 11.7864 9.82202 12.2989C9.82175 12.7602 9.93536 13.2145 10.1528 13.6214C10.3702 14.0283 10.6847 14.3753 11.0683 14.6315C10.6234 14.6173 10.1883 14.4971 9.79916 14.2808V14.3169C9.79912 14.9639 10.0229 15.5911 10.4326 16.0919C10.8424 16.5927 11.4127 16.9364 12.0469 17.0645C11.6342 17.1762 11.2014 17.1927 10.7814 17.1126C10.9603 17.6694 11.3089 18.1562 11.7783 18.505C12.2477 18.8539 12.8144 19.0471 13.3991 19.0579C12.4065 19.837 11.1807 20.2597 9.91886 20.2578C9.69533 20.2579 9.472 20.2448 9.25 20.2187C10.5309 21.0423 12.0219 21.4794 13.5447 21.4777C18.6995 21.4777 21.5175 17.2083 21.5175 13.5055C21.5175 13.3852 21.5144 13.2637 21.509 13.1434C22.0572 12.747 22.5303 12.2561 22.9063 11.6938L22.9075 11.692Z" /></svg>
-                </div>
-            </BitLink>
-        </div>
-    </div>
-
-    <div class="theme-container">
-        <button @onclick="WrapHandled(ToggleTheme)" class="toggle-theme-btn dark-theme" title="Turn on light">
-            <span class="icon-container"><i class="bit-icon bit-icon--Sunny"></i></span>
-        </button>
-        <button @onclick="WrapHandled(ToggleTheme)" class="toggle-theme-btn light-theme" title="Turn off light">
-            <span class="icon-container"><i class="bit-icon bit-icon--ClearNight"></i></span>
-        </button>
-    </div>
-</footer>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.cs
deleted file mode 100644
index 3c29ff9b1d..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.cs
+++ /dev/null
@@ -1,57 +0,0 @@
-//-:cnd:noEmit
-namespace Boilerplate.Client.Core.Components.Layout;
-
-public partial class Footer
-{
-    [AutoInject] private Cookie cookie = default!;
-    [AutoInject] private IPubSubService pubSubService = default!;
-    [AutoInject] private BitThemeManager bitThemeManager = default!;
-    [AutoInject] private CultureInfoManager cultureInfoManager = default!;
-    [AutoInject] private IBitDeviceCoordinator bitDeviceCoordinator = default!;
-
-    private BitDropdownItem<string>[] cultures = default!;
-
-    protected override async Task OnInitAsync()
-    {
-        if (CultureInfoManager.MultilingualEnabled)
-        {
-            cultures = CultureInfoManager.SupportedCultures
-                              .Select(sc => new BitDropdownItem<string> { Value = sc.Culture.Name, Text = sc.DisplayName })
-                              .ToArray();
-
-            SelectedCulture = CultureInfo.CurrentUICulture.Name;
-        }
-
-        await base.OnInitAsync();
-    }
-
-    private string? SelectedCulture;
-
-    private async Task OnCultureChanged()
-    {
-        if (AppPlatform.IsBlazorHybrid)
-        {
-            await StorageService.SetItem("Culture", SelectedCulture, persistent: true);
-            cultureInfoManager.SetCurrentCulture(SelectedCulture!);
-            pubSubService.Publish(PubSubMessages.CULTURE_CHANGED, SelectedCulture);
-        }
-        else
-        {
-            await cookie.Set(new()
-            {
-                Name = ".AspNetCore.Culture",
-                Value = Uri.EscapeDataString($"c={SelectedCulture}|uic={SelectedCulture}"),
-                MaxAge = 30 * 24 * 3600,
-                Path = "/",
-                Secure = AppEnvironment.IsDev() is false
-            });
-        }
-
-        NavigationManager.NavigateTo(NavigationManager.GetUriWithoutCulture(), forceLoad: true, replace: true);
-    }
-
-    private async Task ToggleTheme()
-    {
-        await bitDeviceCoordinator.ApplyTheme(await bitThemeManager.ToggleDarkLightAsync() == "dark");
-    }
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.scss
deleted file mode 100644
index 289aee9a04..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Footer.razor.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@import '../../Styles/abstracts/_vars.scss';
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
-@import '../../Styles/abstracts/_bit-css-variables.scss';
-
-.footer {
-    bottom: 0;
-    z-index: 1;
-    width: 100%;
-    display: flex;
-    padding: 0.5rem;
-    position: fixed;
-    align-items: center;
-    height: $footerHeight;
-    justify-content: center;
-    background-color: $bit-color-background-primary;
-
-    .bit-ios & {
-        padding-bottom: env(safe-area-inset-bottom);
-        height: calc($footerHeight + env(safe-area-inset-bottom));
-    }
-}
-
-.footer-content {
-    flex-grow: 1;
-    text-align: center;
-    font-size: rem2(12px);
-
-    @include sm {
-        font-size: rem2(10px);
-    }
-}
-
-.footer-social-lnk-grp {
-    display: flex;
-    align-items: center;
-    flex-flow: row nowrap;
-    justify-content: center;
-}
-
-.social-lnk {
-    width: rem2(32px);
-    height: rem2(32px);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-
-    @include sm {
-        width: rem2(30px);
-        height: rem2(30px);
-    }
-
-    svg path {
-        fill: $bit-color-foreground-secondary;
-    }
-}
-
-::deep .culture-drp {
-    width: rem2(104px);
-}
-
-.theme-container {
-    text-align: end;
-    width: rem2(104px);
-}
-
-.toggle-theme-btn {
-    padding: 0;
-    border: none;
-    cursor: pointer;
-    height: rem2(35px);
-    border-radius: 50%;
-    min-width: rem2(35px);
-    color: $bit-color-primary-text;
-    background-color: $bit-color-primary;
-
-    .icon-container {
-        height: 100%;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-
-        .bit-icon {
-            margin: 0 rem2(4px);
-        }
-    }
-
-    &.dark-theme {
-        .icon-container {
-            padding: 2px 0 0 1px;
-        }
-    }
-}
-
-.theme-dark .light-theme {
-    display: none;
-}
-
-.theme-light .dark-theme {
-    display: none;
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor
deleted file mode 100644
index e665330524..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor
+++ /dev/null
@@ -1,25 +0,0 @@
-@inherits AppComponentBase
-
-<header class="header">
-    <div class="header-contact">
-        @if (isUserAuthenticated)
-        {
-            <BitButton Class="header-menu" IconName="@BitIconName.CollapseMenu" OnClick="ToggleMenu" Variant="BitVariant.Text" />
-        }
-        <a class="logo-lnk" href="@Urls.HomePage"></a>
-    </div>
-    <div class="header-contact">
-        @if (isUserAuthenticated is false)
-        {
-            <BitActionButton Class="header-item" IconName="@BitIconName.EntityExtraction" Href="@Urls.TermsPage" Target="_self">
-                @Localizer[nameof(AppStrings.TermsTitle)]
-            </BitActionButton>
-            <BitActionButton Class="header-item" IconName="@BitIconName.AddFriend" Href="@Urls.SignUpPage" Target="_self">
-                @Localizer[nameof(AppStrings.SignUp)]
-            </BitActionButton>
-            <BitActionButton Class="header-item" IconName="@BitIconName.Signin" Href="@Urls.SignInPage" Target="_self">
-                @Localizer[nameof(AppStrings.SignIn)]
-            </BitActionButton>
-        }
-    </div>
-</header>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.cs
deleted file mode 100644
index 8595aabdfe..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.cs
+++ /dev/null
@@ -1,50 +0,0 @@
-namespace Boilerplate.Client.Core.Components.Layout;
-
-public partial class Header
-{
-    private bool disposed;
-    private bool isUserAuthenticated;
-
-    [Parameter] public EventCallback OnToggleMenu { get; set; }
-
-    protected override async Task OnInitAsync()
-    {
-        AuthenticationManager.AuthenticationStateChanged += VerifyUserIsAuthenticatedOrNot;
-
-        isUserAuthenticated = await PrerenderStateService.GetValue(async () => (await AuthenticationStateTask).User.IsAuthenticated());
-
-        await base.OnInitAsync();
-    }
-
-    async void VerifyUserIsAuthenticatedOrNot(Task<AuthenticationState> task)
-    {
-        try
-        {
-            isUserAuthenticated = (await task).User.IsAuthenticated();
-        }
-        catch (Exception ex)
-        {
-            ExceptionHandler.Handle(ex);
-        }
-        finally
-        {
-            await InvokeAsync(StateHasChanged);
-        }
-    }
-
-    private async Task ToggleMenu()
-    {
-        await OnToggleMenu.InvokeAsync();
-    }
-
-    protected override async ValueTask DisposeAsync(bool disposing)
-    {
-        await base.DisposeAsync(disposing);
-
-        if (disposed || disposing is false) return;
-
-        AuthenticationManager.AuthenticationStateChanged -= VerifyUserIsAuthenticatedOrNot;
-
-        disposed = true;
-    }
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.scss
deleted file mode 100644
index fbfc033deb..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header.razor.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import '../../Styles/abstracts/_vars.scss';
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
-@import '../../Styles/abstracts/_bit-css-variables.scss';
-
-.header {
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    display: flex;
-    padding: 0.5rem;
-    position: fixed;
-    align-items: end;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    background-color: $bit-color-background-primary;
-    padding-top: 0.5rem;
-    height: $headerHeight;
-
-    .bit-ios & {
-        height: calc($headerHeight + env(safe-area-inset-top));
-    }
-}
-
-.logo-lnk {
-    width: 2rem;
-    height: 2rem;
-    cursor: pointer;
-    margin: 0 0.5rem;
-    border-radius: rem2(4px);
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-image: url('images/bit-logo.svg');
-}
-
-.header-contact {
-    display: flex;
-    align-items: center;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-}
-
-::deep {
-    .header-menu {
-        display: none;
-
-        @include lt-lg {
-            display: flex;
-        }
-    }
-
-    .header-item {
-        display: flex;
-        padding: rem2(4px) rem2(16px);
-
-        @include lt-lg {
-            padding: rem2(4px) rem2(8px);
-        }
-
-        @include lt-md {
-            padding: rem2(4px) rem2(4px);
-        }
-    }
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor
new file mode 100644
index 0000000000..322e5fc9ef
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor
@@ -0,0 +1,53 @@
+@inherits AppComponentBase
+
+<header>
+    <BitStack Horizontal Gap="0.5rem" VerticalAlign="BitAlignment.Center">
+        @if (isAnonymousPage is true)
+        {
+            <BitButton Href="@Urls.SignUpPage">
+                @Localizer[nameof(AppStrings.SignUp)]
+            </BitButton>
+            <BitButton Href="@Urls.SignInPage" Variant="BitVariant.Text" Color="BitColor.Tertiary">
+                @Localizer[nameof(AppStrings.SignIn)]
+            </BitButton>
+        }
+        else
+        {
+            <BitLink NoUnderline Href="@Urls.HomePage">
+                <BitStack Horizontal Gap="0.5rem" VerticalAlign="BitAlignment.Center">
+                    <BitIcon IconName="@(currentDir is BitDir.Rtl ? BitIconName.ChromeBackMirrored : BitIconName.ChromeBack)" Size="BitSize.Small" />
+                    <BitText Typography="BitTypography.Body2">@Localizer[nameof(AppStrings.BackToHome)]</BitText>
+                </BitStack>
+            </BitLink>
+        }
+
+        <BitSpacer />
+
+        <BitButton IconOnly
+                   FixedColor
+                   Variant="BitVariant.Text"
+                   OnClick="WrapHandled(ToggleTheme)"
+                   Color="BitColor.SecondaryBackground"
+                   IconName="@(currentTheme == AppThemeType.Light ? BitIconName.Sunny : BitIconName.ClearNight)" />
+
+        @if (CultureInfoManager.MultilingualEnabled)
+        {
+            <BitDropdown Items="cultures"
+                         FitWidth NoBorder Transparent
+                         DefaultValue="@CultureInfo.CurrentUICulture.Name"
+                         OnChange="WrapHandled((string c) => OnCultureChanged(c))">
+                <TextTemplate Context="item">
+                    <BitImage Src="@($"_content/Boilerplate.Client.Core/images/flags/{item.Value}.webp")" />
+                </TextTemplate>
+                <ItemTemplate Context="item">
+                    <BitStack Horizontal VerticalAlign="BitAlignment.Center">
+                        <BitImage Src="@($"_content/Boilerplate.Client.Core/images/flags/{item.Value}.webp")" />
+                        <BitText Typography="BitTypography.Body1" Style="@(item.IsSelected ? "font-weight:bold" : "")">
+                            @item.Text
+                        </BitText>
+                    </BitStack>
+                </ItemTemplate>
+            </BitDropdown>
+        }
+    </BitStack>
+</header>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.cs
new file mode 100644
index 0000000000..14fd3c0f58
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.cs
@@ -0,0 +1,40 @@
+namespace Boilerplate.Client.Core.Components.Layout.Identity;
+
+public partial class IdentityHeader : AppComponentBase
+{
+    private BitDropdownItem<string>[] cultures = default!;
+
+
+    [AutoInject] private IThemeService themeService = default!;
+    [AutoInject] private ICultureService cultureService = default!;
+
+
+    [CascadingParameter] private BitDir? currentDir { get; set; }
+    [CascadingParameter(Name = Parameters.CurrentUrl)] private string? currentUrl { get; set; }
+    [CascadingParameter(Name = Parameters.CurrentTheme)] private AppThemeType? currentTheme { get; set; }
+    [CascadingParameter(Name = Parameters.IsAnonymousPage)] private bool? isAnonymousPage { get; set; }
+
+
+    protected override async Task OnInitAsync()
+    {
+        if (CultureInfoManager.MultilingualEnabled)
+        {
+            cultures = CultureInfoManager.SupportedCultures
+                        .Select(sc => new BitDropdownItem<string> { Value = sc.Culture.Name, Text = sc.DisplayName })
+                        .ToArray();
+        }
+
+        await base.OnInitAsync();
+    }
+
+
+    private async Task ToggleTheme()
+    {
+        await themeService.ToggleTheme();
+    }
+
+    private async Task OnCultureChanged(string? cultureName)
+    {
+        await cultureService.ChangeCulture(cultureName);
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.scss
new file mode 100644
index 0000000000..876dbe12d6
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityHeader.razor.scss
@@ -0,0 +1,10 @@
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+header {
+    width: 100%;
+    padding: 1rem;
+    position: absolute;
+    height: rem2(65px);
+    z-index: $bit-zindex-base;
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor
new file mode 100644
index 0000000000..2235a17fda
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor
@@ -0,0 +1,32 @@
+@inherits LayoutComponentBase
+
+<main>
+    <BitStack>
+        <IdentityHeader />
+
+        @if (isAnonymousPage is true)
+        {
+            <div class="panel">
+                @Body
+            </div>
+        }
+        else
+        {
+            <BitStack Horizontal AutoHeight Grows>
+                <div class="panel1">
+                    @Body
+                </div>
+                <BitStack Grows Class="panel2" Alignment="BitAlignment.Center">
+                    <BitStack Style="width:75%" Alignment="BitAlignment.Center">
+                        <BitImage Width="85%" Src="_content/Boilerplate.Client.Core/images/identitylayout-image.webp" />
+                        <BitText Typography="BitTypography.Body1">
+                            @* bit Boilerplate is a feature-rich project template for both Visual studio and the .NET CLI.
+                        It comes with a lot of features right out of the box that are required for a real world application. *@
+                        </BitText>
+                    </BitStack>
+                </BitStack>
+            </BitStack>
+        }
+
+    </BitStack>
+</main>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.cs
new file mode 100644
index 0000000000..943244297a
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.cs
@@ -0,0 +1,6 @@
+namespace Boilerplate.Client.Core.Components.Layout.Identity;
+
+public partial class IdentityLayout
+{
+    [CascadingParameter(Name = Parameters.IsAnonymousPage)] private bool? isAnonymousPage { get; set; }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss
new file mode 100644
index 0000000000..f5214184bf
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss
@@ -0,0 +1,49 @@
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+main {
+    width: 100%;
+    height: 100%
+}
+
+.panel {
+    width: 100%;
+    padding: 2rem;
+    min-height: 100%;
+    padding-top: 5rem;
+    background-color: $bit-color-background-secondary;
+}
+
+.panel1 {
+    width: 30%;
+    padding: 2rem;
+    min-height: 100%;
+    min-width: 35rem;
+    padding-top: 5rem;
+    background-color: $bit-color-background-secondary;
+
+    @include lt-md {
+        width: 100%;
+        min-width: unset;
+        padding-inline: 1rem;
+
+        .form {
+            padding-inline: 1rem;
+        }
+    }
+}
+
+::deep {
+    @include lt-md {
+        .panel1 {
+            .form {
+                padding: 1rem;
+            }
+        }
+
+        .panel2 {
+            display: none;
+        }
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor
new file mode 100644
index 0000000000..c41583aa5b
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor
@@ -0,0 +1,29 @@
+@inherits AppComponentBase
+
+<header>
+    <BitStack Horizontal VerticalAlign="BitAlignment.Center">
+        <BitButton IconOnly FixedColor
+                   Class="menu-btn"
+                   Size="BitSize.Large"
+                   OnClick="OpenNavPanel"
+                   Variant="BitVariant.Text"
+                   Color="BitColor.SecondaryBackground"
+                   IconName="@BitIconName.CollapseMenu" />
+
+        <BitStack AutoSize VerticalAlign="BitAlignment.Center" Gap="0.5rem" Style="height:4rem">
+            <BitText Typography="BitTypography.H5">
+                @pageTitle
+            </BitText>
+            @if (string.IsNullOrWhiteSpace(pageSubtitle) is false)
+            {
+                <BitText Typography="BitTypography.Body1" Foreground="BitColorKind.Secondary" NoWrap>
+                    @pageSubtitle
+                </BitText>
+            }
+        </BitStack>
+
+        <BitSpacer />
+
+        <UserMenu />
+    </BitStack>
+</header>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.cs
new file mode 100644
index 0000000000..7ac72331bf
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.cs
@@ -0,0 +1,33 @@
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class MainHeader : AppComponentBase
+{
+    private string? pageTitle;
+    private string? pageSubtitle;
+    private Action unsubscribePageTitleChanged = default!;
+
+
+    protected override async Task OnInitAsync()
+    {
+        unsubscribePageTitleChanged = PubSubService.Subscribe(PubSubMessages.PAGE_TITLE_CHANGED, async payload =>
+        {
+            (pageTitle, pageSubtitle) = (ValueTuple<string?, string?>)payload!;
+
+            StateHasChanged();
+        });
+    }
+
+
+    private void OpenNavPanel()
+    {
+        PubSubService.Publish(PubSubMessages.OPEN_NAV_PANEL);
+    }
+
+
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        await base.DisposeAsync(disposing);
+
+        unsubscribePageTitleChanged();
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.scss
new file mode 100644
index 0000000000..042aa39bac
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainHeader.razor.scss
@@ -0,0 +1,30 @@
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+header {
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    position: sticky;
+    background-color: $bit-color-background-primary;
+}
+
+::deep {
+    .menu-btn {
+        @include gt-sm {
+            display: none;
+        }
+    }
+
+    .persona {
+        max-width: rem2(180px);
+    }
+
+    .persona-details,
+    .menu-chevron {
+        @include lt-sm {
+            display: none;
+        }
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor
new file mode 100644
index 0000000000..5bc5494e69
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor
@@ -0,0 +1,18 @@
+@inherits LayoutComponentBase
+
+<main>
+    <BitStack Horizontal AutoSize Gap="0">
+        <NavPanel />
+
+        <BitStack Style="padding:1rem">
+            <MainHeader />
+
+            <div class="body">
+                @Body
+            </div>
+        </BitStack>
+
+    </BitStack>
+
+    <NavMenu />
+</main>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.cs
new file mode 100644
index 0000000000..aa6aa3effe
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.cs
@@ -0,0 +1,5 @@
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class MainLayout
+{
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.scss
new file mode 100644
index 0000000000..384f359708
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.scss
@@ -0,0 +1,15 @@
+@import '../../../Styles/abstracts/_media-queries.scss';
+
+main {
+    width: 100%;
+    height: 100%;
+}
+
+.body {
+    width: 100%;
+    height: 100%;
+
+    @include lt-md {
+        margin-bottom: 3.5rem
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor
new file mode 100644
index 0000000000..ae592b1fd8
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor
@@ -0,0 +1,50 @@
+@*+:cnd:noEmit*@
+@inherits AppComponentBase;
+
+<section>
+    @*#if (sample == "Todo")*@
+    <a href="@Urls.HomePage">
+        <BitIcon IconName="@BitIconName.Home" Color="@(IsActive(Urls.HomePage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.HomePage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.Home)]
+        </BitText>
+    </a>
+
+    <a href="@Urls.TodoPage">
+        <BitIcon IconName="@BitIconName.ToDoLogoOutline" Color="@(IsActive(Urls.TodoPage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.TodoPage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.TodoTitle)]
+        </BitText>
+    </a>
+
+    <a href="@Urls.TermsPage">
+        <BitIcon IconName="@BitIconName.EntityExtraction" Color="@(IsActive(Urls.TermsPage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.TermsPage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.TermsTitle)]
+        </BitText>
+    </a>
+    @*#endif*@
+
+    @*#if (sample == "Admin")*@
+    <a href="@Urls.DashboardPage">
+        <BitIcon IconName="@BitIconName.BarChartVerticalFill" Color="@(IsActive(Urls.DashboardPage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.DashboardPage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.Dashboard)]
+        </BitText>
+    </a>
+
+    <a href="@Urls.ProductsPage">
+        <BitIcon IconName="@BitIconName.Product" Color="@(IsActive(Urls.ProductsPage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.ProductsPage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.Products)]
+        </BitText>
+    </a>
+
+    <a href="@Urls.CategoriesPage">
+        <BitIcon IconName="@BitIconName.BuildQueue" Color="@(IsActive(Urls.CategoriesPage) ? BitColor.Primary : BitColor.SecondaryForeground)" />
+        <BitText Typography="BitTypography.Caption2" Color="@(IsActive(Urls.CategoriesPage) ? BitColor.Primary : BitColor.SecondaryForeground)">
+            @Localizer[nameof(AppStrings.Categories)]
+        </BitText>
+    </a>
+    @*#endif*@
+</section>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.cs
new file mode 100644
index 0000000000..9392bb74a7
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.cs
@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Components.Routing;
+
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class NavMenu : IDisposable
+{
+    private string? currentUrl;
+
+    protected override Task OnInitAsync()
+    {
+        SetCurrentItem();
+
+        NavigationManager.LocationChanged += OnLocationChanged;
+
+        return base.OnInitAsync();
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        SetCurrentItem();
+        StateHasChanged();
+    }
+
+    private void SetCurrentItem()
+    {
+        currentUrl = NavigationManager.Uri.Replace(NavigationManager.BaseUri, "/", StringComparison.Ordinal);
+    }
+
+    private bool IsActive(string url)
+    {
+        return currentUrl == url;
+    }
+
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= OnLocationChanged;
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.scss
new file mode 100644
index 0000000000..aae0d790f9
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavMenu.razor.scss
@@ -0,0 +1,27 @@
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+section {
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 3.5rem;
+    position: fixed;
+    max-width: 100vw;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color: $bit-color-background-primary;
+    border-top: 1px solid $bit-color-border-tertiary;
+
+    @include gt-sm {
+        display: none;
+    }
+}
+
+a {
+    gap: 0.25rem;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    flex-direction: column;
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor
new file mode 100644
index 0000000000..e1b6a8b10e
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor
@@ -0,0 +1,68 @@
+@inherits AppComponentBase;
+
+@if (isMenuOpen)
+{
+    <div class="menu-overlay" @onclick=CloseMenu></div>
+}
+
+@{
+    var isToggled = !isMenuOpen && isMenuToggled;
+    var imageUrl = user.ProfileImageName is null ? null : $"{profileImageUrl}&file={user.ProfileImageName}";
+}
+
+<section class="@(isMenuOpen ? "" : "closed")" Style="@($"--nav-menu-width:{(isToggled ? "6rem" : "14rem")}")">
+    <BitCard Class="panel">
+        <BitStack HorizontalAlign="@(isToggled ? BitAlignment.Center : BitAlignment.Start)" Grows>
+            <BitStack Horizontal AutoHeight Alignment="BitAlignment.Center">
+                <BitImage Src="_content/Boilerplate.Client.Core/images/bit-logo.svg"
+                          Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />
+                <BitSpacer Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />
+                <BitButton IconOnly FixedColor
+                           Class="toggle-btn"
+                           Size="BitSize.Large"
+                           OnClick="ToggleNavPanel"
+                           Variant="BitVariant.Text"
+                           Color="BitColor.TertiaryBackground"
+                           IconName="@BitIconName.ColumnRightTwoThirds" />
+            </BitStack>
+
+            <BitSeparator />
+
+            <BitPersona Class="persona"
+                        ImageUrl="@imageUrl"
+                        OnImageClick=GoToProfile
+                        PrimaryText="@user.FullName"
+                        SecondaryText="@user.DisplayName"
+                        HidePersonaDetails="isToggled"
+                        Presence="BitPersonaPresence.Online"
+                        Size="@(isToggled ? BitPersonaSize.Size40 : BitPersonaSize.Size48)">
+                <ImageOverlayTemplate>
+                    <span>@Localizer[nameof(AppStrings.Edit)]</span>
+                </ImageOverlayTemplate>
+            </BitPersona>
+
+            <BitSeparator />
+
+            <BitNav FullWidth
+                    Items="navItems"
+                    IconOnly="isToggled"
+                    DefaultSelectedItem="navItems[0]"
+                    Accent="BitColor.SecondaryBackground"
+                    OnItemClick="(BitNavItem item) => HandleNavItemClick(item)"
+                    Styles="@(new() { SelectedItemContainer = "background-color: var(--bit-clr-bg-sec-active)" })">
+            </BitNav>
+
+            <BitSpacer />
+
+            <BitActionButton OnClick="DoSignOut"
+                             IconOnly="isToggled"
+                             FullWidth="!isToggled"
+                             IconName="@BitIconName.SignOut"
+                             Title="@Localizer[nameof(AppStrings.SignOut)]">
+                @(isToggled ? "" : Localizer[nameof(AppStrings.SignOut)])
+            </BitActionButton>
+        </BitStack>
+    </BitCard>
+</section>
+
+<SignOutConfirmModal @bind-IsOpen=isSignOutModalOpen></SignOutConfirmModal>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.cs
new file mode 100644
index 0000000000..a6e0587a16
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.cs
@@ -0,0 +1,86 @@
+using Boilerplate.Shared.Dtos.Identity;
+
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class NavPanel
+{
+    private bool disposed;
+    private bool isMenuOpen;
+    private bool isMenuToggled;
+    private UserDto user = new();
+    private bool isSignOutModalOpen;
+    private string? profileImageUrl;
+    private List<BitNavItem> navItems = [];
+    private Action unsubOpenNavPanel = default!;
+    private Action unsubUserDataChange = default!;
+
+    [AutoInject] private NavigationManager navManager = default!;
+
+
+
+    protected override async Task OnInitAsync()
+    {
+        CreateNavItems();
+
+        unsubOpenNavPanel = PubSubService.Subscribe(PubSubMessages.OPEN_NAV_PANEL, async _ => {
+            isMenuOpen = true;
+            StateHasChanged();
+        });
+
+        unsubUserDataChange = PubSubService.Subscribe(PubSubMessages.USER_DATA_UPDATED, async payload =>
+        {
+            if (payload is null) return;
+            user = (UserDto)payload;
+            StateHasChanged();
+        });
+
+        user = (await PrerenderStateService.GetValue(() => HttpClient.GetFromJsonAsync("api/User/GetCurrentUser", AppJsonContext.Default.UserDto, CurrentCancellationToken)))!;
+
+        var serverAddress = Configuration.GetServerAddress();
+        var access_token = await PrerenderStateService.GetValue(() => AuthTokenProvider.GetAccessTokenAsync());
+        profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
+    }
+
+
+    private async Task DoSignOut()
+    {
+        isSignOutModalOpen = true;
+        await CloseMenu();
+    }
+
+    private async Task GoToProfile()
+    {
+        await CloseMenu();
+        navManager.NavigateTo(Urls.ProfilePage);
+    }
+
+    private async Task HandleNavItemClick(BitNavItem item)
+    {
+        if (string.IsNullOrEmpty(item.Url)) return;
+
+        await CloseMenu();
+    }
+
+    private async Task CloseMenu()
+    {
+        isMenuOpen = false;
+    }
+
+    private async Task ToggleNavPanel()
+    {
+        isMenuToggled = !isMenuToggled;
+    }
+
+
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        await base.DisposeAsync(disposing);
+
+        if (disposed || disposing is false) return;
+
+        unsubOpenNavPanel?.Invoke();
+        unsubUserDataChange?.Invoke();
+
+        disposed = true;
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.items.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.items.cs
new file mode 100644
index 0000000000..a7e3480ed9
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.items.cs
@@ -0,0 +1,77 @@
+//+:cnd:noEmit
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class NavPanel
+{
+    private void CreateNavItems()
+    {
+        navItems =
+        [
+            new()
+            {
+                Text = Localizer[nameof(AppStrings.Home)],
+                IconName = BitIconName.Home,
+                Url = Urls.HomePage,
+            },
+            //#if (sample == "Admin")
+            new() {
+                Text = Localizer[nameof(AppStrings.Dashboard)],
+                IconName = BitIconName.BarChartVerticalFill,
+                Url = Urls.DashboardPage,
+            },
+            new() {
+                Text = Localizer[nameof(AppStrings.Products)],
+                IconName = BitIconName.Product,
+                Url = Urls.ProductsPage,
+            },
+            new() {
+                Text = Localizer[nameof(AppStrings.Categories)],
+                IconName = BitIconName.BuildQueue,
+                Url = Urls.CategoriesPage,
+            },
+            //#elif (sample == "Todo")
+            new()
+            {
+                Text = Localizer[nameof(AppStrings.TodoTitle)],
+                IconName = BitIconName.ToDoLogoOutline,
+                Url = Urls.TodoPage,
+            },
+            //#endif
+            new()
+            {
+                Text = Localizer[nameof(AppStrings.ProfileTitle)],
+                IconName = BitIconName.EditContact,
+                Url = Urls.ProfilePage,
+            },
+            //#if (offlineDb == true)
+            new()
+            {
+                Text = Localizer[nameof(AppStrings.OfflineEditProfileTitle)],
+                IconName = BitIconName.EditContact,
+                Url = Urls.OfflineEditProfilePage,
+            },
+            //#endif
+            new()
+            {
+                Text = Localizer[nameof(AppStrings.TermsTitle)],
+                IconName = BitIconName.EntityExtraction,
+                Url = Urls.TermsPage,
+            }
+        ];
+
+        if (AppPlatform.IsBlazorHybrid)
+        {
+            // Currently, the "About" page is absent from the Client/Core project, rendering it inaccessible on the web platform.
+            // In order to exhibit a sample page that grants direct access to native functionalities without dependence on
+            // dependency injection (DI) or publish-subscribe patterns, the "About" page is integrated within Blazor
+            // hybrid projects like Client/Maui.
+
+            navItems.Add(new()
+            {
+                Text = Localizer[nameof(AppStrings.AboutTitle)],
+                IconName = BitIconName.HelpMirrored,
+                Url = Urls.AboutPage,
+            });
+        }
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.scss
new file mode 100644
index 0000000000..4590d42a1c
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.scss
@@ -0,0 +1,78 @@
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+section {
+    top: 0;
+    height: 100vh;
+    padding: 1rem;
+    position: sticky;
+    overflow: hidden auto;
+    min-width: var(--nav-menu-width);
+    max-width: var(--nav-menu-width);
+
+    .bit-ios & {
+        top: calc(env(safe-area-inset-top));
+    }
+
+    &::-webkit-scrollbar {
+        width: 0;
+    }
+
+    @include lt-md {
+        z-index: 3;
+        padding: 0;
+        position: fixed;
+
+        .bit-ios & {
+            top: 0;
+            padding-top: calc(env(safe-area-inset-top));
+        }
+
+        &.closed {
+            display: none;
+        }
+    }
+}
+
+.menu-overlay {
+    inset: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    min-height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    @include gt-sm {
+        display: none;
+    }
+}
+
+::deep {
+    .panel {
+        width: auto;
+        display: flex;
+        padding: 0.5rem;
+        min-height: 100%;
+        flex-direction: column;
+        background-color: $bit-color-background-secondary;
+
+        @include lt-md {
+            padding: 1rem;
+        }
+    }
+
+    .toggle-btn {
+        @include lt-md {
+            display: none;
+        }
+    }
+
+    .persona {
+        width: 100%;
+    }
+
+    a {
+        text-decoration: none;
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor
similarity index 92%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor
index b1e8cc2e3a..220b34a602 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor
@@ -7,7 +7,7 @@
         </div>
         <div class="modal-title">@Localizer[nameof(AppStrings.SignOut)]</div>
         <div class="modal-desc">@Localizer[nameof(AppStrings.SignOutPrompt)]</div>
-        <BitStack Horizontal>
+        <BitStack Horizontal Alignment="BitAlignment.Center">
             <BitButton OnClick="SignOut" AutoLoading>
                 @Localizer[nameof(AppStrings.SignOut)]
             </BitButton>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.cs
similarity index 90%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.cs
index 97a3697a84..d46fc83ef2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.cs
@@ -1,4 +1,4 @@
-namespace Boilerplate.Client.Core.Components.Layout;
+namespace Boilerplate.Client.Core.Components.Layout.Main;
 
 public partial class SignOutConfirmModal
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.scss
similarity index 83%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.scss
index 36d6798ca4..c641370600 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/SignOutConfirmModal.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/SignOutConfirmModal.razor.scss
@@ -1,5 +1,5 @@
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_media-queries.scss';
 
 .modal-body {
     display: flex;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor
new file mode 100644
index 0000000000..21db413f31
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor
@@ -0,0 +1,90 @@
+@inherits AppComponentBase
+
+@{
+    var imageUrl = user.ProfileImageName is null ? null : $"{profileImageUrl}&file={user.ProfileImageName}";
+}
+
+<BitDropMenu Transparent @bind-IsOpen="isOpen" Responsive>
+    <Template>
+        <BitPersona Class="persona"
+                    ImageUrl="@imageUrl"
+                    Size=@BitPersonaSize.Size32
+                    PrimaryText="@user.FullName"
+                    Classes="@(new() { DetailsContainer="persona-details" })" />
+        <BitIcon IconName="@BitIconName.ChevronDown" Size="BitSize.Small" Color="BitColor.Info" Class="menu-chevron" />
+    </Template>
+    <Body>
+        <BitCard FullSize>
+            @if (showCultures is false)
+            {
+                <BitStack AutoSize>
+                    <BitPersona Class="persona"
+                                OnImageClick="GoToProfile"
+                                PrimaryText="@user.FullName"
+                                Size="BitPersonaSize.Size48"
+                                SecondaryText="@user.DisplayName"
+                                Presence="BitPersonaPresence.Online"
+                                ImageUrl="@imageUrl">
+                        <ImageOverlayTemplate>
+                            <span>@Localizer[nameof(AppStrings.Edit)]</span>
+                        </ImageOverlayTemplate>
+                    </BitPersona>
+                    <BitSeparator />
+                    <BitActionButton IconName="@BitIconName.Contact" Href="@Urls.ProfilePage" FullWidth OnClick="() => isOpen=false">
+                        @Localizer[nameof(AppStrings.ProfileTitle)]
+                    </BitActionButton>
+                    <BitActionButton IconName="@BitIconName.Globe" FullWidth OnClick="() => showCultures=true">
+                        <BitStack Horizontal Gap="0" Grows VerticalAlign="BitAlignment.Center">
+                            @Localizer[nameof(AppStrings.Language)]
+                            <BitSpacer />
+                            <BitIcon Size="BitSize.Small"
+                                     Color="BitColor.SecondaryForeground"
+                                     IconName="@(currentDir is BitDir.Rtl ? BitIconName.ChevronLeft : BitIconName.ChevronRight)" />
+                        </BitStack>
+                    </BitActionButton>
+                    <BitStack Horizontal VerticalAlign="BitAlignment.Center" Gap="0">
+                        <BitActionButton Style="flex-grow:1"
+                                         OnClick="ToggleTheme"
+                                         IconName="@(currentTheme == AppThemeType.Light ? BitIconName.Sunny : BitIconName.ClearNight)">
+                            @(currentTheme == AppThemeType.Light ? Localizer[nameof(AppStrings.Light)] : Localizer[nameof(AppStrings.Dark)])
+                        </BitActionButton>
+                        <BitToggle OnChange="ToggleTheme" Value="currentTheme == AppThemeType.Light" ValueChanged="v => {}" />
+                    </BitStack>
+                    <BitActionButton IconName="@BitIconName.Globe" Href="@Urls.ProfilePage" FullWidth OnClick="() => isOpen=false">
+                        @Localizer[nameof(AppStrings.Settings)]
+                    </BitActionButton>
+                    <BitActionButton IconName="@BitIconName.SignOut" FullWidth OnClick="() => { showSignOut=true; isOpen=false; }">
+                        @Localizer[nameof(AppStrings.SignOut)]
+                    </BitActionButton>
+                </BitStack>
+            }
+            else
+            {
+                <BitStack HorizontalAlign="BitAlignment.Start" AutoSize>
+                    <BitActionButton FullWidth
+                                     Style="align-items:flex-end"
+                                     OnClick="() => showCultures=false"
+                                     IconName="@(currentDir is BitDir.Rtl ? BitIconName.ChromeBackMirrored : BitIconName.ChromeBack)">
+                        @Localizer[nameof(AppStrings.SelectLanguage)]
+                    </BitActionButton>
+                    <BitSeparator />
+                    <BitChoiceGroup Items="cultures" NoCircle Style="width:100%"
+                                    DefaultValue="@CultureInfo.CurrentUICulture.Name"
+                                    OnChange="async (string? c) => await OnCultureChanged(c)"
+                                    Styles="@(new() { ItemLabel = "flex-grow:1", ItemLabelWrapper = "width:100%" })">
+                        <ItemTemplate Context="item">
+                            <BitStack Horizontal VerticalAlign="BitAlignment.Center" Style="cursor:pointer">
+                                <BitImage Src="@($"_content/Boilerplate.Client.Core/images/flags/{item.Value}.webp")" />
+                                <BitText Typography="BitTypography.Body1" Style="@(item.IsSelected ? "font-weight:bold" : "")">
+                                    @item.Text
+                                </BitText>
+                            </BitStack>
+                        </ItemTemplate>
+                    </BitChoiceGroup>
+                </BitStack>
+            }
+        </BitCard>
+    </Body>
+</BitDropMenu>
+
+<SignOutConfirmModal @bind-IsOpen="showSignOut"></SignOutConfirmModal>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor.cs
new file mode 100644
index 0000000000..897e076ebd
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/UserMenu.razor.cs
@@ -0,0 +1,75 @@
+using Boilerplate.Shared.Dtos.Identity;
+
+namespace Boilerplate.Client.Core.Components.Layout.Main;
+
+public partial class UserMenu
+{
+    private bool isOpen;
+    private bool showSignOut;
+    private bool showCultures;
+    private UserDto user = new();
+    private string? currentCulture;
+    private string? profileImageUrl;
+    private Action unsubscribeUerDataUpdated = default!;
+    private BitChoiceGroupItem<string>[] cultures = default!;
+
+    [AutoInject] private Cookie cookie = default!;
+    [AutoInject] private CultureInfoManager cultureInfoManager = default!;
+    [AutoInject] private IThemeService themeService { get; set; } = default!;
+    [AutoInject] private ICultureService cultureService { get; set; } = default!;
+
+
+    [CascadingParameter] private BitDir? currentDir { get; set; }
+    [CascadingParameter(Name = Parameters.CurrentTheme)] private AppThemeType? currentTheme { get; set; }
+
+
+    protected override async Task OnInitAsync()
+    {
+        if (CultureInfoManager.MultilingualEnabled)
+        {
+            cultures = CultureInfoManager.SupportedCultures
+                              .Select(sc => new BitChoiceGroupItem<string> { Value = sc.Culture.Name, Text = sc.DisplayName })
+                              .ToArray();
+        }
+
+        unsubscribeUerDataUpdated = PubSubService.Subscribe(PubSubMessages.USER_DATA_UPDATED, async payload =>
+        {
+            if (payload is null) return;
+
+            user = (UserDto)payload;
+
+            await InvokeAsync(StateHasChanged);
+        });
+
+        user = (await PrerenderStateService.GetValue(() => HttpClient.GetFromJsonAsync("api/User/GetCurrentUser", AppJsonContext.Default.UserDto, CurrentCancellationToken)))!;
+
+        var serverAddress = Configuration.GetServerAddress();
+        var access_token = await PrerenderStateService.GetValue(() => AuthTokenProvider.GetAccessTokenAsync());
+        profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
+
+        await base.OnInitAsync();
+    }
+
+    private async Task OnCultureChanged(string? cultureName)
+    {
+        currentCulture = cultureName;
+        await cultureService.ChangeCulture(cultureName);
+    }
+
+    private async Task ToggleTheme()
+    {
+        await themeService.ToggleTheme();
+    }
+
+    private async Task GoToProfile()
+    {
+        NavigationManager.NavigateTo(Urls.ProfilePage);
+    }
+
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        await base.DisposeAsync(disposing);
+
+        unsubscribeUerDataUpdated();
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor
deleted file mode 100644
index bb7abc679c..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor
+++ /dev/null
@@ -1,25 +0,0 @@
-@inherits LayoutComponentBase
-
-<div class="status-bar">Boilerplate</div>
-
-<CascadingValue Value="currentDir">
-    <div dir="@currentDir?.ToString()" class="layout">
-        <Header OnToggleMenu=ToggleMenuHandler />
-
-        <main>
-            @if (isUserAuthenticated)
-            {
-                <NavMenu @bind-IsMenuOpen=isMenuOpen />
-            }
-            <div class="main-content">
-                <AppErrorBoundary>
-                    @Body
-                </AppErrorBoundary>
-            </div>
-        </main>
-
-        <Footer />
-
-        <MessageBox />
-    </div>
-</CascadingValue>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor
deleted file mode 100644
index 005e59b074..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor
+++ /dev/null
@@ -1,35 +0,0 @@
-@inherits AppComponentBase;
-
-@if (IsMenuOpen)
-{
-    <div class="menu-overlay" @onclick=CloseMenu></div>
-}
-
-<section class="main-container @(IsMenuOpen ? null : "main-container--closed")">
-    <div class="top-container">
-        @{
-            var imageUrl = user.ProfileImageName is null ? null : $"{profileImageUrl}&file={user.ProfileImageName}";
-        }
-        <BitPersona Class="persona"
-                    PrimaryText="@user.FullName"
-                    SecondaryText="@user.DisplayName"
-                    Size=@BitPersonaSize.Size48
-                    Presence="BitPersonaPresence.Online"
-                    ImageUrl="@imageUrl"
-                    OnImageClick=GoToProfile>
-            <ImageOverlayTemplate>
-                <span>@Localizer[nameof(AppStrings.Edit)]</span>
-            </ImageOverlayTemplate>
-        </BitPersona>
-        <br />
-        <BitActionButton IconName="@BitIconName.SignOut" OnClick=DoSignOut Style="width:fit-content">
-            @Localizer[nameof(AppStrings.SignOut)]
-        </BitActionButton>
-    </div>
-    <BitNav Items="navItems"
-            DefaultSelectedItem="navItems[0]"
-            OnItemClick="(BitNavItem item) => HandleNavItemClick(item)">
-    </BitNav>
-</section>
-
-<SignOutConfirmModal @bind-IsOpen=isSignOutModalOpen></SignOutConfirmModal>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
deleted file mode 100644
index b2b6fc8dc9..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
+++ /dev/null
@@ -1,149 +0,0 @@
-//+:cnd:noEmit
-using Boilerplate.Shared.Dtos.Identity;
-
-namespace Boilerplate.Client.Core.Components.Layout;
-
-public partial class NavMenu
-{
-    private bool disposed;
-    private bool isSignOutModalOpen;
-    private string? profileImageUrl;
-    private UserDto user = new();
-    private List<BitNavItem> navItems = [];
-    private Action unsubscribe = default!;
-
-    [AutoInject] private NavigationManager navManager = default!;
-
-    [Parameter] public bool IsMenuOpen { get; set; }
-
-    [Parameter] public EventCallback<bool> IsMenuOpenChanged { get; set; }
-
-    protected override async Task OnInitAsync()
-    {
-        navItems =
-        [
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.Home)],
-                IconName = BitIconName.Home,
-                Url = Urls.HomePage,
-            },
-            //#if (sample == "Admin")
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.ProductCategory)],
-                IconName = BitIconName.Product,
-                IsExpanded = true,
-                ChildItems =
-                [
-                    new() {
-                        Text = Localizer[nameof(AppStrings.Dashboard)],
-                        Url = Urls.DashboardPage,
-                    },
-                    new() {
-                        Text = Localizer[nameof(AppStrings.Products)],
-                        Url = Urls.ProductsPage,
-                    },
-                    new() {
-                        Text = Localizer[nameof(AppStrings.Categories)],
-                        Url = Urls.CategoriesPage,
-                    },
-                ]
-            },
-            //#elif (sample == "Todo")
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.TodoTitle)],
-                IconName = BitIconName.ToDoLogoOutline,
-                Url = Urls.TodoPage,
-            },
-            //#endif
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.ProfileTitle)],
-                IconName = BitIconName.EditContact,
-                Url = Urls.ProfilePage,
-            },
-            //#if (offlineDb == true)
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.OfflineEditProfileTitle)],
-                IconName = BitIconName.EditContact,
-                Url = Urls.OfflineEditProfilePage,
-            },
-            //#endif
-            new()
-            {
-                Text = Localizer[nameof(AppStrings.TermsTitle)],
-                IconName = BitIconName.EntityExtraction,
-                Url = Urls.TermsPage,
-            }
-        ];
-
-        if (AppPlatform.IsBlazorHybrid)
-        {
-            // Presently, the About page is absent from the Client/Core project, rendering it inaccessible on the web platform.
-            // In order to exhibit a sample page that grants direct access to native functionalities without dependence on dependency injection (DI) or publish-subscribe patterns,
-            // about page is integrated within Blazor hybrid projects like Client/Maui.
-
-            navItems.Add(new()
-            {
-                Text = Localizer[nameof(AppStrings.AboutTitle)],
-                IconName = BitIconName.HelpMirrored,
-                Url = Urls.AboutPage,
-            });
-        }
-
-        unsubscribe = PubSubService.Subscribe(PubSubMessages.USER_DATA_UPDATED, async payload =>
-        {
-            if (payload is null) return;
-
-            user = (UserDto)payload;
-
-            await InvokeAsync(StateHasChanged);
-        });
-
-        user = (await PrerenderStateService.GetValue(() => HttpClient.GetFromJsonAsync("api/User/GetCurrentUser", AppJsonContext.Default.UserDto, CurrentCancellationToken)))!;
-
-        var serverAddress = Configuration.GetServerAddress();
-        var access_token = await PrerenderStateService.GetValue(() => AuthTokenProvider.GetAccessTokenAsync());
-        profileImageUrl = $"{serverAddress}/api/Attachment/GetProfileImage?access_token={access_token}";
-    }
-
-    private async Task DoSignOut()
-    {
-        isSignOutModalOpen = true;
-
-        await CloseMenu();
-    }
-
-    private async Task GoToProfile()
-    {
-        await CloseMenu();
-        navManager.NavigateTo(Urls.ProfilePage);
-    }
-
-    private async Task HandleNavItemClick(BitNavItem item)
-    {
-        if (string.IsNullOrEmpty(item.Url)) return;
-
-        await CloseMenu();
-    }
-
-    private async Task CloseMenu()
-    {
-        IsMenuOpen = false;
-        await IsMenuOpenChanged.InvokeAsync(false);
-    }
-
-    protected override async ValueTask DisposeAsync(bool disposing)
-    {
-        await base.DisposeAsync(disposing);
-
-        if (disposed || disposing is false) return;
-
-        unsubscribe?.Invoke();
-
-        disposed = true;
-    }
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.scss
deleted file mode 100644
index 3e63602336..0000000000
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import '../../Styles/abstracts/_vars.scss';
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
-@import '../../Styles/abstracts/_bit-css-variables.scss';
-
-.main-container {
-    height: 100%;
-    display: flex;
-    position: sticky;
-    min-height: 100%;
-    max-height: 100vh;
-    overflow: hidden auto;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    min-width: rem2($navMenuWidth);
-    background-color: $bit-color-background-primary;
-    top: $headerHeight;
-    padding-bottom: calc($headerHeight + $footerHeight);
-
-    .bit-ios & {
-        top: calc($headerHeight + env(safe-area-inset-top));
-    }
-
-    &::-webkit-scrollbar {
-        width: 0;
-    }
-}
-
-@include lt-lg {
-    .main-container {
-        z-index: 3;
-        position: fixed;
-        padding-bottom: 0;
-
-        .bit-ios & {
-            top: 0;
-            padding-top: calc(env(safe-area-inset-top));
-        }
-    }
-
-    .main-container--closed {
-        display: none;
-    }
-}
-
-.top-container {
-    width: 100%;
-    display: flex;
-    padding: rem2(16px);
-    flex-flow: column nowrap;
-    margin-bottom: rem2(20px);
-    justify-content: flex-start;
-    border-bottom: rem2(1px) solid $bit-color-border-secondary;
-}
-
-.menu-overlay {
-    top: 0;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    min-height: 100vh;
-    inset-inline-start: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    @include gt-md {
-        display: none;
-    }
-}
-
-::deep {
-    a {
-        text-decoration: none;
-    }
-
-    .persona {
-        margin: auto;
-        max-width: rem2(calc($navMenuWidth - 20px));
-    }
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor
new file mode 100644
index 0000000000..9534456d16
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor
@@ -0,0 +1,20 @@
+@inherits LayoutComponentBase
+
+<div dir="@currentDir?.ToString().ToLower()" class="layout">
+    <AppErrorBoundary>
+        <CascadingValue Value="currentDir">
+            <CascadingValue Value="currentTheme" Name="@Parameters.CurrentTheme">
+                <CascadingValue Value="currentUrl" Name="@Parameters.CurrentUrl">
+                    <CascadingValue Value="isAuthenticated" Name="@Parameters.IsAuthenticated">
+                        <CascadingValue Value="isAnonymousPage" Name="@Parameters.IsAnonymousPage">
+                            <LayoutView Layout="GetCurrentLayout()">
+                                @Body
+                            </LayoutView>
+                        </CascadingValue>
+                    </CascadingValue>
+                </CascadingValue>
+            </CascadingValue>
+        </CascadingValue>
+        <MessageBox />
+    </AppErrorBoundary>
+</div>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.cs
similarity index 50%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.cs
index 8f3c081f46..13d9d972fa 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.cs
@@ -1,39 +1,54 @@
-using Microsoft.AspNetCore.Components.Web;
+using Boilerplate.Client.Core.Components.Layout.Identity;
+using Boilerplate.Client.Core.Components.Layout.Main;
 
 namespace Boilerplate.Client.Core.Components.Layout;
 
-public partial class MainLayout : IDisposable
+public partial class RootLayout : IDisposable
 {
     private bool disposed;
-    private bool isMenuOpen;
     private BitDir? currentDir;
-    private bool isUserAuthenticated;
-    private ErrorBoundary errorBoundaryRef = default!;
+    private string? currentUrl;
+    private bool? isAuthenticated;
+    private bool? isAnonymousPage;
+    private AppThemeType? currentTheme;
+    private Action unsubscribeThemeChange = default!;
     private Action unsubscribeCultureChange = default!;
 
+
+    [AutoInject] private IThemeService themeService = default!;
     [AutoInject] private IPubSubService pubSubService = default!;
     [AutoInject] private AuthenticationManager authManager = default!;
     [AutoInject] private IExceptionHandler exceptionHandler = default!;
+    [AutoInject] private NavigationManager navigationManager = default!;
     [AutoInject] private IPrerenderStateService prerenderStateService = default!;
 
+
     [CascadingParameter] public Task<AuthenticationState> AuthenticationStateTask { get; set; } = default!;
 
+
     protected override async Task OnInitializedAsync()
     {
         try
         {
+            navigationManager.LocationChanged += NavigationManagerLocationChanged;
             authManager.AuthenticationStateChanged += AuthenticationStateChanged;
-
-            isUserAuthenticated = await prerenderStateService.GetValue(async () => (await AuthenticationStateTask).User.IsAuthenticated());
-
             unsubscribeCultureChange = pubSubService.Subscribe(PubSubMessages.CULTURE_CHANGED, async _ =>
             {
                 SetCurrentDir();
-
                 StateHasChanged();
             });
+            unsubscribeThemeChange = pubSubService.Subscribe(PubSubMessages.THEME_CHANGED, async payload =>
+            {
+                if (payload is null) return;
+                currentTheme = (AppThemeType)payload;
+                StateHasChanged();
+            });
+
+            isAuthenticated = await prerenderStateService.GetValue(async () => (await AuthenticationStateTask).User.IsAuthenticated());
 
             SetCurrentDir();
+            SetCurrentUrl();
+            currentTheme = await themeService.GetCurrentTheme();
 
             await base.OnInitializedAsync();
         }
@@ -52,23 +67,32 @@ protected override void OnParametersSet()
         base.OnParametersSet();
     }
 
-    private void SetCurrentDir()
+
+    private Type GetCurrentLayout()
     {
-        var currentCulture = CultureInfo.CurrentUICulture;
+        return isAuthenticated is null
+                ? typeof(EmptyLayout)
+                : isAuthenticated is true
+                    ? typeof(MainLayout)
+                    : typeof(IdentityLayout);
+    }
 
-        currentDir = currentCulture.TextInfo.IsRightToLeft ? BitDir.Rtl : null;
+    private void SetCurrentDir()
+    {
+        currentDir = CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? BitDir.Rtl : null;
     }
 
-    private void ToggleMenuHandler()
+    private void SetCurrentUrl()
     {
-        isMenuOpen = !isMenuOpen;
+        currentUrl = navigationManager.Uri.Replace(navigationManager.BaseUri, "/", StringComparison.InvariantCultureIgnoreCase);
+        isAnonymousPage = Urls.AnonymousPages.Any(p => currentUrl == p);
     }
 
     private async void AuthenticationStateChanged(Task<AuthenticationState> task)
     {
         try
         {
-            isUserAuthenticated = (await task).User.IsAuthenticated();
+            isAuthenticated = (await task).User.IsAuthenticated();
         }
         catch (Exception ex)
         {
@@ -80,6 +104,13 @@ private async void AuthenticationStateChanged(Task<AuthenticationState> task)
         }
     }
 
+    private void NavigationManagerLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
+    {
+        SetCurrentUrl();
+        StateHasChanged();
+    }
+
+
     public void Dispose()
     {
         Dispose(true);
@@ -91,9 +122,12 @@ protected virtual void Dispose(bool disposing)
     {
         if (disposed || disposing is false) return;
 
+        navigationManager.LocationChanged -= NavigationManagerLocationChanged;
+
         authManager.AuthenticationStateChanged -= AuthenticationStateChanged;
 
-        unsubscribeCultureChange?.Invoke();
+        unsubscribeThemeChange();
+        unsubscribeCultureChange();
 
         disposed = true;
     }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss
similarity index 75%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss
index 63c30e4f1f..b60b60990d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MainLayout.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss
@@ -6,39 +6,7 @@
 .layout {
     width: 100%;
     height: 100%;
-}
-
-main {
-    width: 100%;
-    display: flex;
-    min-height: 100vh;
-    position: relative;
-    box-sizing: border-box;
-    justify-content: flex-start;
-    padding-bottom: $footerHeight;
     background-color: $bit-color-background-primary;
-    padding-top: $headerHeight;
-
-    .bit-ios & {
-        padding-top: calc($headerHeight + env(safe-area-inset-top));
-        padding-bottom: calc($footerHeight + env(safe-area-inset-bottom));
-    }
-}
-
-.main-content {
-    flex-grow: 1;
-    display: flex;
-    padding: 1rem;
-    min-height: 100%;
-    flex-flow: column;
-    align-items: center;
-    justify-content: center;
-    width: calc(100% - $navMenuWidth);
-    background-color: $bit-color-background-secondary;
-
-    @include lt-lg {
-        width: 100%;
-    }
 }
 
 .status-bar {
@@ -59,6 +27,17 @@ main {
         color: transparent;
         height: env(safe-area-inset-top);
     }
+
+    .bit-windows &, .bit-macos & {
+        display: flex;
+        height: var(--bit-status-bar-height);
+    }
+}
+
+.bit-ios {
+    ::deep .form-message-bar {
+        scroll-margin-top: calc($headerHeight + env(safe-area-inset-top) + 1px);
+    }
 }
 
 ::deep {
@@ -129,16 +108,10 @@ main {
         inset-block-start: 0;
         inset-inline-start: 0;
         border-radius: rem2(4px) rem2(4px) 0 0;
-        scroll-margin-top: calc($headerHeight + 1px);
+        scroll-margin-top: calc($headerHeight + var(--bit-status-bar-height) + 1px);
     }
-}
 
-.bit-ios {
-    ::deep .form-message-bar {
-        scroll-margin-top: calc($headerHeight + env(safe-area-inset-top) + 1px);
+    .loading-container {
+        text-align: center;
     }
 }
-
-::deep .loading-container {
-    text-align: center;
-}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor
similarity index 99%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor
index 3d77d75ff4..22c2d90d6a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor
@@ -1,15 +1,16 @@
 <style>
-    .bit-lds-grid div {
-        background-color: @Color;
-    }
-
     .bit-lds-wrapper {
         top: 50%;
         left: 50%;
+        z-index: -1;
         position: absolute;
         transform: translate(-50%, -50%);
     }
 
+    .bit-lds-grid div {
+        background-color: @Color;
+    }
+
     .bit-lds-grid {
         width: 80px;
         height: 80px;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor.cs
similarity index 65%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor.cs
index 98279d7fbb..0b86f459bf 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/LoadingComponent.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/LoadingComponent.razor.cs
@@ -1,4 +1,4 @@
-namespace Boilerplate.Client.Core.Components.Layout;
+namespace Boilerplate.Client.Core.Components;
 
 public partial class LoadingComponent
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs
new file mode 100644
index 0000000000..75b3332065
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/AppPageBase.cs
@@ -0,0 +1,15 @@
+
+namespace Boilerplate.Client.Core.Components.Pages;
+
+public abstract partial class AppPageBase : AppComponentBase
+{
+    protected virtual string? Title { get; }
+    protected virtual string? Subtitle { get; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        PubSubService.Publish(PubSubMessages.PAGE_TITLE_CHANGED, (Title, Subtitle));
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor
index 2413c0b8a0..94292adc2f 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.AddOrEditCategoryPage + "/{Id:guid?}")]
 @attribute [Route("{culture?}" + Urls.AddOrEditCategoryPage + "/{Id:guid?}")]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>
     @if (category.Id == default)
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs
index 3156812c7c..69363fdf37 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/AddOrEditCategoryPage.razor.cs
@@ -6,6 +6,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Categories;
 [Authorize]
 public partial class AddOrEditCategoryPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.Category)];
+    protected override string? Subtitle => string.Empty;
+
     [AutoInject] ICategoryController categoryController = default!;
 
     [Parameter] public Guid? Id { get; set; }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor
index 0bd512c18c..77eeb345c5 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor
@@ -1,7 +1,7 @@
 @attribute [Route(Urls.CategoriesPage)]
 @attribute [Route("{culture?}" + Urls.CategoriesPage)]
 @using Boilerplate.Shared.Dtos.Categories
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.CategoriesPageTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
index 6f65ba52ab..ffb6c6204d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Categories/CategoriesPage.razor.cs
@@ -7,6 +7,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Categories;
 [Authorize]
 public partial class CategoriesPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.Categories)];
+    protected override string? Subtitle => string.Empty;
+
     [AutoInject] ICategoryController categoryController = default!;
 
     private bool isLoading;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor
index 0d0248ebc4..4bcd1885e4 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor
@@ -1,6 +1,5 @@
 @attribute [Route(Urls.DashboardPage)]
-@attribute [Route("{culture?}" + Urls.DashboardPage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 @if (isLoadingAssemblies)
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.cs
index 05e68e0028..6b2a690af0 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.cs
@@ -6,6 +6,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Dashboard;
 [Authorize]
 public partial class DashboardPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.Dashboard)];
+    protected override string? Subtitle => Localizer[nameof(AppStrings.DashboardSubtitle)];
+
     [AutoInject] LazyAssemblyLoader lazyAssemblyLoader = default!;
 
     private bool isLoadingAssemblies = true;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.scss
index 8bd1fefbe8..82bf94bc56 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/DashboardPage.razor.scss
@@ -14,4 +14,6 @@
     display: flex;
     gap: rem2(24px);
     flex-flow: row wrap;
-}
\ No newline at end of file
+    margin-bottom: 2rem;
+    justify-content: center;
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss
index 37f4a5c7cc..1c3ddcbccb 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/OverallStatsWidget.razor.scss
@@ -11,6 +11,10 @@
     margin-bottom: rem2(56px);
     justify-content: space-between;
 
+    @include lt-md {
+        gap: 1rem;
+    }
+
     @include md {
         margin-bottom: rem2(40px);
     }
@@ -25,8 +29,8 @@
     height: 100%;
     display: flex;
     padding: rem2(24px);
-    min-height: rem2(168px);
     width: calc(25% - 18px);
+    min-height: rem2(168px);
     align-items: flex-start;
     border-radius: rem2(8px);
     flex-flow: column nowrap;
@@ -39,8 +43,9 @@
     background-color: $bit-color-background-primary;
     border: rem2(1px) solid $bit-color-border-secondary;
 
-    @include sm {
-        height: 204px;
+    @include lt-md {
+        min-height: 13rem;
+        width: calc(50% - 12px);
     }
 
     .card-num {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor.scss
index 1c7f8b8488..dfb9600ae8 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsCountPerCategoryWidget.razor.scss
@@ -4,6 +4,7 @@
 
 .card {
     display: flex;
+    padding: 1rem;
     min-height: rem2(376px);
     width: calc(50% - 12px);
     align-items: flex-start;
@@ -11,18 +12,12 @@
     flex-flow: column nowrap;
     margin-bottom: rem2(24px);
     justify-content: flex-start;
-    padding: rem2(24px) rem2(16px) rem2(58px);
     background-color: $bit-color-background-primary;
     border: rem2(1px) solid $bit-color-border-secondary;
 
-    @include md {
-        padding: rem2(24px) rem2(16px) rem2(36px);
-    }
-
-    @include sm {
+    @include lt-md {
         width: 100%;
-        margin-bottom: rem2(16px);
-        padding: rem2(24px) rem2(8px) rem2(32px);
+        margin-bottom: 0;
     }
 }
 
@@ -87,4 +82,4 @@
     @include sm {
         padding: rem2(32px) rem2(8px) 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor.scss
index 20a75dddae..dfb9600ae8 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsPercentageWidget.razor.scss
@@ -4,6 +4,7 @@
 
 .card {
     display: flex;
+    padding: 1rem;
     min-height: rem2(376px);
     width: calc(50% - 12px);
     align-items: flex-start;
@@ -11,18 +12,12 @@
     flex-flow: column nowrap;
     margin-bottom: rem2(24px);
     justify-content: flex-start;
-    padding: rem2(24px) rem2(16px) rem2(58px);
     background-color: $bit-color-background-primary;
     border: rem2(1px) solid $bit-color-border-secondary;
 
-    @include md {
-        padding: rem2(24px) rem2(16px) rem2(36px);
-    }
-
-    @include sm {
+    @include lt-md {
         width: 100%;
-        margin-bottom: rem2(16px);
-        padding: rem2(24px) rem2(8px) rem2(32px);
+        margin-bottom: 0;
     }
 }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsSalesWidget.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsSalesWidget.razor.scss
index 3ea02d1404..ae7e493b45 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsSalesWidget.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Dashboard/ProductsSalesWidget.razor.scss
@@ -15,14 +15,8 @@
     background-color: $bit-color-background-primary;
     border: rem2(1px) solid $bit-color-border-secondary;
 
-    @include md {
-        padding: rem2(24px) rem2(16px) rem2(36px);
-    }
-
-    @include sm {
-        width: 100%;
-        margin-bottom: rem2(16px);
-        padding: rem2(24px) rem2(8px) rem2(32px);
+    @include lt-md {
+        margin-bottom: 0;
     }
 }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor
index 694731da11..3fbdd36aad 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor
@@ -3,15 +3,21 @@
 @attribute [Route("en-GB" + Urls.HomePage)]
 @attribute [Route("fr-FR" + Urls.HomePage)]
 @attribute [Route("fa-IR" + Urls.HomePage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.HomeTitle)]</PageTitle>
 
-<div class="page-container">
-    <section class="page-section hero-section">
-        <h1 class="hero-section-title">@Localizer[nameof(AppStrings.HomeTitle)]</h1>
+<section>
+    <BitStack Alignment="BitAlignment.Center" Gap="2rem">
+        <BitText Typography="BitTypography.H3" Align="BitTextAlign.Center">
+            @Localizer[nameof(AppStrings.HomeTitle)]
+        </BitText>
 
-        <div class="hero-section-desc">@Localizer[nameof(AppStrings.HomeMessage)]</div>
+        <BitText Typography="BitTypography.H6" Align="BitTextAlign.Center">
+            @Localizer[nameof(AppStrings.HomeMessage)]
+        </BitText>
+
+        <br />
 
         <BitButton Href="https://github.com/bitfoundation/bitplatform/tree/develop/src/Templates/Boilerplate"
                    Target="_blank"
@@ -19,5 +25,5 @@
                    Title="@Localizer[nameof(AppStrings.GitHubRepo)]">
             @Localizer[nameof(AppStrings.GitHubRepo)]
         </BitButton>
-    </section>
-</div>
+    </BitStack>
+</section>
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs
index b432f85f21..4021ef7ef4 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.cs
@@ -2,4 +2,6 @@
 
 public partial class HomePage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.Home)];
+    protected override string? Subtitle => string.Empty;
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss
index 425edb78f0..f791280f32 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/HomePage.razor.scss
@@ -1,87 +1,8 @@
 @import '../../Styles/abstracts/_functions.scss';
 @import '../../Styles/abstracts/_media-queries.scss';
 
-.page-container {
+section {
     width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 rem2(16px);
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-}
-
-.page-section {
-    width: 100%;
-}
-
-.hero-section {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: rem2(144px) 0;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-
-    @include lt-xl {
-        padding: rem2(130px) 0;
-    }
-
-    @include sm {
-        padding: rem2(120px) 0;
-    }
-}
-
-.hero-section-title {
-    font-weight: bold;
-    text-align: center;
-    font-size: rem2(42px);
-    line-height: rem2(62px);
-    margin-bottom: rem2(32px);
-
-    @include lg {
-        font-size: rem2(34px);
-        line-height: rem2(56px);
-        margin-bottom: rem2(24px);
-    }
-
-    @include md {
-        font-size: rem2(26px);
-        line-height: rem2(44px);
-        margin-bottom: rem2(24px);
-    }
-
-    @include sm {
-        font-size: rem2(24px);
-        line-height: rem2(40px);
-        margin-bottom: rem2(16px);
-    }
-}
-
-.hero-section-desc {
-    text-align: center;
-    font-size: rem2(24px);
-    max-width: rem2(1232px);
-    line-height: rem2(40px);
-    margin-bottom: rem2(40px);
-
-    @include lg {
-        font-size: rem2(20px);
-        max-width: rem2(821px);
-        line-height: rem2(32px);
-        margin-bottom: rem2(38px);
-    }
-
-    @include md {
-        font-size: rem2(18px);
-        max-width: rem2(572px);
-        line-height: rem2(28px);
-        margin-bottom: rem2(32px);
-    }
-
-    @include sm {
-        max-width: 100%;
-        font-size: rem2(14px);
-        line-height: rem2(24px);
-        margin-bottom: rem2(32px);
-    }
+    height: 100%;
+    padding: 1rem;
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
index f1701b2ae7..f26f13a7a8 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignInPage.razor
@@ -24,7 +24,7 @@
         @if (requiresTwoFactor is false)
         {
             <br /><br />
-            <BitStack Horizontal>
+            <BitStack Horizontal Alignment="BitAlignment.Center">
                 <BitButton IsLoading="isWaiting"
                            Size="BitSize.Small"
                            Variant="BitVariant.Text"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
index 9f47c1da2c..c5c639a515 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUpPage.razor
@@ -21,7 +21,7 @@
             @Localizer[nameof(AppStrings.SignUp)]
         </BitText>
         <br /><br />
-        <BitStack Horizontal>
+        <BitStack Horizontal Alignment="BitAlignment.Center">
             <BitButton IsLoading="isWaiting"
                        Size="BitSize.Small"
                        Variant="BitVariant.Text"
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor
index a0e7507dfc..61484bb590 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotAuthorizedPage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.NotAuthorizedPage)]
 @attribute [Route("{culture?}" + Urls.NotAuthorizedPage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <AuthorizeView>
     <div class="main">
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor
index 900e143153..0c0e82e02f 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.NotFoundPage)]
 @attribute [Route("{culture?}" + Urls.NotFoundPage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <div class="main">
     <h1 class="title">404</h1>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
index af94062b2b..af4ed1ce07 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.OfflineEditProfilePage)]
 @attribute [Route("{culture?}" + Urls.OfflineEditProfilePage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.EditProfileTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor.cs
index ca633680c6..7590693f27 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Offline/OfflineEditProfilePage.razor.cs
@@ -7,6 +7,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Offline;
 [Authorize]
 public partial class OfflineEditProfilePage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.ProfileTitle)];
+    protected override string? Subtitle => string.Empty;
+
     [AutoInject] IDbContextFactory<OfflineDbContext> dbContextFactory = default!;
 
     private bool isSaving;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
index 381652b494..5526fb980f 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor
@@ -1,7 +1,7 @@
 @attribute [Route(Urls.ProductsPage)]
 @attribute [Route("{culture?}" + Urls.ProductsPage)]
 @using Boilerplate.Shared.Dtos.Products
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.ProductsPageTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
index d306e490f0..95dd840b12 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/ProductsPage.razor.cs
@@ -7,6 +7,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Products;
 [Authorize]
 public partial class ProductsPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.Products)];
+    protected override string? Subtitle => string.Empty;
+
     [AutoInject] IProductController productController = default!;
 
     private bool isLoading;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor.cs
similarity index 97%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor.cs
index c5fcb1c751..a8a29bfd96 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor.cs
@@ -1,7 +1,7 @@
 using Boilerplate.Shared.Dtos.Identity;
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class ChangeEmailSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor.scss
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangeEmailSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangeEmailSection.razor.scss
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor.cs
similarity index 97%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor.cs
index b65b154433..09a9e137b7 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor.cs
@@ -1,7 +1,7 @@
 using Boilerplate.Shared.Dtos.Identity;
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class ChangePhoneNumberSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor.scss
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ChangePhoneNumberSection.razor.scss
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.cs
similarity index 90%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.cs
index d15826e648..8e30189d7c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.cs
@@ -1,6 +1,6 @@
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class DeleteAccountConfirmModal
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.scss
similarity index 77%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.scss
index f04991a025..af02637046 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountConfirmModal.razor.scss
@@ -1,6 +1,6 @@
-@import '../../../../Styles/abstracts/_functions.scss';
-@import '../../../../Styles/abstracts/_media-queries.scss';
-@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
 
 
 .modal-body {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.cs
similarity index 57%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.cs
index d6014ccfd5..613b502c55 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.cs
@@ -1,4 +1,4 @@
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class DeleteAccountSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.scss
similarity index 57%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.scss
index e47a19e894..776060bb99 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/DeleteAccountSection.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/DeleteAccountSection.razor.scss
@@ -1,4 +1,4 @@
-@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
 
 .title {
     color: $bit-color-error;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor
similarity index 97%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor
index 2913e3b456..6ecfffb79a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor
@@ -1,7 +1,7 @@
 @*+:cnd:noEmit*@
 @attribute [Route(Urls.ProfilePage)]
 @attribute [Route("{culture?}" + Urls.ProfilePage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.ProfileTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.cs
similarity index 74%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.cs
index 21aa017abb..cea65993d5 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.cs
@@ -2,11 +2,14 @@
 using Boilerplate.Shared.Dtos.Identity;
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 [Authorize]
 public partial class ProfilePage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.ProfileTitle)];
+    protected override string? Subtitle => string.Empty;
+
     private UserDto? user;
     private bool isLoading;
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.scss
similarity index 83%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.scss
index 94aef88316..77b7a4f57a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/ProfilePage.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/ProfilePage.razor.scss
@@ -1,6 +1,6 @@
-@import '../../../../Styles/abstracts/_functions.scss';
-@import '../../../../Styles/abstracts/_media-queries.scss';
-@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+@import '../../../Styles/abstracts/_functions.scss';
+@import '../../../Styles/abstracts/_media-queries.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
 
 .page-container {
     width: 100%;
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.cs
similarity index 98%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.cs
index 1f58f6fa6c..75164ecb74 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.cs
@@ -1,7 +1,7 @@
 using Boilerplate.Shared.Dtos.Identity;
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class TwoFactorSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.scss
similarity index 92%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.scss
index a6a1cb9dfd..105779f12d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/TwoFactorSection.razor.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/TwoFactorSection.razor.scss
@@ -1,4 +1,4 @@
-@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
 
 ::deep {
     .tfa-message-bar {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor.cs
similarity index 98%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor.cs
index 13d9eb6e3f..b1e8d45915 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor.cs
@@ -1,7 +1,7 @@
 using Boilerplate.Shared.Dtos.Identity;
 using Boilerplate.Shared.Controllers.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class UserDataSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor.scss
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserDataSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserDataSection.razor.scss
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor.cs
similarity index 97%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor.cs
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor.cs
index 351a82de93..9749ffe45d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor.cs
@@ -1,7 +1,7 @@
 using Boilerplate.Shared.Controllers.Identity;
 using Boilerplate.Shared.Dtos.Identity;
 
-namespace Boilerplate.Client.Core.Components.Pages.Identity.Profile;
+namespace Boilerplate.Client.Core.Components.Pages.Profile;
 
 public partial class UserSessionsSection
 {
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor.scss
similarity index 100%
rename from src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Profile/UserSessionsSection.razor.scss
rename to src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Profile/UserSessionsSection.razor.scss
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor
index b31c8dd864..1df002032b 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.TermsPage)]
 @attribute [Route("{culture?}" + Urls.TermsPage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.TermsTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor.cs
index 54ce6ccf48..b9779b996a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/TermsPage.razor.cs
@@ -2,4 +2,6 @@
 
 public partial class TermsPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.TermsTitle)];
+    protected override string? Subtitle => string.Empty;
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor
index c6685c28cc..60b6e1ae7d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor
@@ -1,6 +1,6 @@
 @attribute [Route(Urls.TodoPage)]
 @attribute [Route("{culture?}" + Urls.TodoPage)]
-@inherits AppComponentBase
+@inherits AppPageBase
 
 <PageTitle>@Localizer[nameof(AppStrings.TodoTitle)]</PageTitle>
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor.cs
index 66dc6a3bce..b3e169c3ec 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Todo/TodoPage.razor.cs
@@ -6,6 +6,9 @@ namespace Boilerplate.Client.Core.Components.Pages.Todo;
 [Authorize]
 public partial class TodoPage
 {
+    protected override string? Title => Localizer[nameof(AppStrings.TodoTitle)];
+    protected override string? Subtitle => string.Empty;
+
     [AutoInject] Keyboard keyboard = default!;
     [AutoInject] ITodoItemController todoItemController = default!;
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Parameters.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Parameters.cs
new file mode 100644
index 0000000000..c7fb32a6bf
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Parameters.cs
@@ -0,0 +1,10 @@
+namespace Boilerplate.Client.Core.Components;
+
+public class Parameters
+{
+    public const string CurrentDir = nameof(CurrentDir);
+    public const string CurrentUrl = nameof(CurrentUrl);
+    public const string CurrentTheme = nameof(CurrentTheme);
+    public const string IsAuthenticated = nameof(IsAuthenticated);
+    public const string IsAnonymousPage = nameof(IsAnonymousPage);
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IServiceCollectionExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IServiceCollectionExtensions.cs
index 8bf5b64a82..e0937f04fc 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IServiceCollectionExtensions.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IServiceCollectionExtensions.cs
@@ -17,10 +17,12 @@ public static IServiceCollection AddClientCoreProjectServices(this IServiceColle
 
         services.TryAddTransient<IPrerenderStateService, PrerenderStateService>();
 
+        services.TryAddSessioned<IThemeService, ThemeService>();
         services.TryAddSessioned<IPubSubService, PubSubService>();
-        services.TryAddTransient<IAuthTokenProvider, ClientSideAuthTokenProvider>();
-        services.TryAddTransient<IStorageService, BrowserStorageService>();
+        services.TryAddSessioned<ICultureService, CultureService>();
         services.TryAddSingleton<ILocalHttpServer, NoopLocalHttpServer>();
+        services.TryAddTransient<IStorageService, BrowserStorageService>();
+        services.TryAddTransient<IAuthTokenProvider, ClientSideAuthTokenProvider>();
         services.TryAddTransient<IExternalNavigationService, DefaultExternalNavigationService>();
 
         services.TryAddTransient<RequestHeadersDelegationHandler>();
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs
index edf39611ed..82ad717af4 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/NavigationManagerExtensions.cs
@@ -1,5 +1,4 @@
 using System.Web;
-using System.Text.RegularExpressions;
 
 namespace Microsoft.AspNetCore.Components;
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor
index 3a30d31e7d..6878b0f925 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor
@@ -1,6 +1,6 @@
 <CascadingAuthenticationState>
-	<AppInitializer />
-    <LayoutView Layout="@typeof(MainLayout)">
+    <AppInitializer />
+    <LayoutView Layout="@typeof(RootLayout)">
         <Router AppAssembly="@GetType().Assembly"
                 AdditionalAssemblies="@(AssemblyLoadContext.Default.Assemblies.Where(asm => asm.GetName().Name?.Contains("Boilerplate.Client") is true))">
             <Found Context="routeData">
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppThemeType.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppThemeType.cs
new file mode 100644
index 0000000000..7c58a3f5bc
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppThemeType.cs
@@ -0,0 +1,7 @@
+namespace Boilerplate.Client.Core.Services;
+
+public enum AppThemeType
+{
+    Light,
+    Dark
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/ICultureService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/ICultureService.cs
new file mode 100644
index 0000000000..2208e1b0af
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/ICultureService.cs
@@ -0,0 +1,6 @@
+namespace Boilerplate.Client.Core.Services.Contracts;
+
+public interface ICultureService
+{
+    Task ChangeCulture(string? cultureName);
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IPubSubService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IPubSubService.cs
index 74e9aebace..ca04272c37 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IPubSubService.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IPubSubService.cs
@@ -5,6 +5,6 @@
 /// </summary>
 public interface IPubSubService
 {
-    void Publish(string message, object? payload);
+    void Publish(string message, object? payload = null);
     Action Subscribe(string message, Func<object?, Task> handler);
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IThemeService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IThemeService.cs
new file mode 100644
index 0000000000..0c8aa3a70e
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IThemeService.cs
@@ -0,0 +1,8 @@
+namespace Boilerplate.Client.Core.Services.Contracts;
+
+public interface IThemeService
+{
+    Task<AppThemeType> GetCurrentTheme();
+
+    Task<AppThemeType> ToggleTheme();
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/CultureService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/CultureService.cs
new file mode 100644
index 0000000000..933d4ce65a
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/CultureService.cs
@@ -0,0 +1,32 @@
+namespace Boilerplate.Client.Core.Services;
+
+public partial class CultureService : ICultureService
+{
+    [AutoInject] private Cookie cookie = default!;
+    [AutoInject] private IPubSubService pubSubService = default!;
+    [AutoInject] private IStorageService storageService = default!;
+    [AutoInject] private NavigationManager navigationManager = default!;
+    [AutoInject] private CultureInfoManager cultureInfoManager = default!;
+
+    public async Task ChangeCulture(string? cultureName)
+    {
+        if (AppPlatform.IsBlazorHybrid)
+        {
+            await storageService.SetItem("Culture", cultureName, persistent: true);
+            cultureInfoManager.SetCurrentCulture(cultureName!);
+            pubSubService.Publish(PubSubMessages.CULTURE_CHANGED, cultureName);
+        }
+        else
+        {
+            await cookie.Set(new()
+            {
+                MaxAge = 30 * 24 * 3600,
+                Name = ".AspNetCore.Culture",
+                Secure = AppEnvironment.IsDev() is false,
+                Value = Uri.EscapeDataString($"c={cultureName}|uic={cultureName}"),
+            });
+        }
+
+        navigationManager.NavigateTo(navigationManager.GetUriWithoutCulture(), forceLoad: true, replace: true);
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubMessages.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubMessages.cs
index 7104d05c18..3d202cd120 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubMessages.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubMessages.cs
@@ -2,7 +2,10 @@
 
 public static partial class PubSubMessages
 {
-    public const string USER_DATA_UPDATED = nameof(USER_DATA_UPDATED);
     public const string SHOW_MESSAGE = nameof(SHOW_MESSAGE);
+    public const string OPEN_NAV_PANEL = nameof(OPEN_NAV_PANEL);
+    public const string THEME_CHANGED = nameof(THEME_CHANGED);
     public const string CULTURE_CHANGED = nameof(CULTURE_CHANGED);
+    public const string USER_DATA_UPDATED = nameof(USER_DATA_UPDATED);
+    public const string PAGE_TITLE_CHANGED = nameof(PAGE_TITLE_CHANGED);
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubService.cs
index f44bfec30a..b944b830de 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubService.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PubSubService.cs
@@ -5,27 +5,31 @@
 /// </summary>
 public partial class PubSubService : IPubSubService
 {
-    [AutoInject] private IServiceProvider serviceProvider = default!;
-
     private readonly ConcurrentDictionary<string, List<Func<object?, Task>>> handlers = new();
 
-    public void Publish(string message, object? payload)
+    [AutoInject] private readonly IServiceProvider serviceProvider = default!;
+
+
+
+    public void Publish(string message, object? payload = null)
     {
         if (handlers.TryGetValue(message, out var messageHandlers))
         {
             foreach (var handler in messageHandlers.ToArray())
             {
-                handler(payload)
-                    .ContinueWith(t => serviceProvider.GetRequiredService<IExceptionHandler>().Handle(t.Exception!), TaskContinuationOptions.OnlyOnFaulted);
+                handler(payload).ContinueWith(handleException, TaskContinuationOptions.OnlyOnFaulted);
             }
         }
+
+        void handleException(Task t)
+        {
+            serviceProvider.GetRequiredService<IExceptionHandler>().Handle(t.Exception!);
+        }
     }
 
     public Action Subscribe(string message, Func<object?, Task> handler)
     {
-        var messageHandlers = handlers.ContainsKey(message)
-                            ? handlers[message]
-                            : handlers[message] = [];
+        var messageHandlers = handlers.TryGetValue(message, out var value) ? value : handlers[message] = [];
 
         messageHandlers.Add(handler);
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ThemeService.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ThemeService.cs
new file mode 100644
index 0000000000..58c211a0f5
--- /dev/null
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ThemeService.cs
@@ -0,0 +1,37 @@
+namespace Boilerplate.Client.Core.Services;
+
+public partial class ThemeService : IThemeService
+{
+    [AutoInject] private Cookie cookie = default!;
+    [AutoInject] private IPubSubService pubSubService = default!;
+    [AutoInject] private BitThemeManager bitThemeManager = default!;
+    [AutoInject] private IBitDeviceCoordinator bitDeviceCoordinator = default!;
+
+
+    public async Task<AppThemeType> GetCurrentTheme()
+    {
+        var theme = await bitThemeManager.GetCurrentThemeAsync();
+        return theme == "dark" ? AppThemeType.Dark : AppThemeType.Light;
+    }
+
+    public async Task<AppThemeType> ToggleTheme()
+    {
+        var newThemeName = await bitThemeManager.ToggleDarkLightAsync();
+        
+        var isDark = newThemeName == "dark";
+        await bitDeviceCoordinator.ApplyTheme(isDark);
+
+        var theme = isDark ? AppThemeType.Dark : AppThemeType.Light;
+        pubSubService.Publish(PubSubMessages.THEME_CHANGED, theme);
+
+        await cookie.Set(new()
+        {
+            MaxAge = 30 * 24 * 3600,
+            Name = "bit.Theme",
+            Secure = AppEnvironment.IsDev() is false,
+            Value = Uri.EscapeDataString(newThemeName),
+        });
+
+        return theme;
+    }
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs
index b072e2705b..26328f40f3 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs
@@ -2,7 +2,7 @@
 
 public partial class ThemeColors
 {
-    public static readonly string PrimaryDarkBgColor = "#000000";
+    public static readonly string PrimaryDarkBgColor = "#010409";
     public static readonly string PrimaryLightBgColor = "#FFFFFF";
     // In case you need to change the background color, make sure to also update app.scss's --bit-clr-bg-pri accordingly.
 }
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss
index 9a08fda500..3182fe1539 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scss
@@ -102,6 +102,9 @@ $bit-color-foreground-primary-active: var(--bit-clr-fg-pri-active);
 $bit-color-foreground-secondary: var(--bit-clr-fg-sec);
 $bit-color-foreground-secondary-hover: var(--bit-clr-fg-sec-hover);
 $bit-color-foreground-secondary-active: var(--bit-clr-fg-sec-hover);
+$bit-color-foreground-tertiary: var(--bit-clr-fg-ter);
+$bit-color-foreground-tertiary-hover: var(--bit-clr-fg-ter-hover);
+$bit-color-foreground-tertiary-active: var(--bit-clr-fg-ter-hover);
 $bit-color-foreground-disabled: var(--bit-clr-fg-dis);
 
 //backgrounds
@@ -111,6 +114,9 @@ $bit-color-background-primary-active: var(--bit-clr-bg-pri-active);
 $bit-color-background-secondary: var(--bit-clr-bg-sec);
 $bit-color-background-secondary-hover: var(--bit-clr-bg-sec-hover);
 $bit-color-background-secondary-active: var(--bit-clr-bg-sec-active);
+$bit-color-background-tertiary: var(--bit-clr-bg-ter);
+$bit-color-background-tertiary-hover: var(--bit-clr-bg-ter-hover);
+$bit-color-background-tertiary-active: var(--bit-clr-bg-ter-active);
 $bit-color-background-disabled: var(--bit-clr-bg-dis);
 $bit-color-background-overlay: var(--bit-clr-bg-overlay);
 
@@ -121,6 +127,9 @@ $bit-color-border-primary-active: var(--bit-clr-brd-pri-active);
 $bit-color-border-secondary: var(--bit-clr-brd-sec);
 $bit-color-border-secondary-hover: var(--bit-clr-brd-sec-hover);
 $bit-color-border-secondary-active: var(--bit-clr-brd-sec-active);
+$bit-color-border-tertiary: var(--bit-clr-brd-ter);
+$bit-color-border-tertiary-hover: var(--bit-clr-brd-ter-hover);
+$bit-color-border-tertiary-active: var(--bit-clr-brd-ter-active);
 $bit-color-border-disabled: var(--bit-clr-brd-dis);
 
 //required
@@ -180,3 +189,134 @@ $bit-box-shadow-21: var(--bit-shd-21);
 $bit-box-shadow-22: var(--bit-shd-22);
 $bit-box-shadow-23: var(--bit-shd-23);
 $bit-box-shadow-24: var(--bit-shd-24);
+
+//spacing
+$bit-spacing-scaling-factor: var(--bit-spa-scaling-factor);
+
+//z-index
+$bit-zindex-snackbar: var(--bit-zin-snackbar);
+$bit-zindex-modal: var(--bit-zin-modal);
+$bit-zindex-callout: var(--bit-zin-callout);
+$bit-zindex-overlay: var(--bit-zin-overlay);
+$bit-zindex-base: var(--bit-zin-base);
+
+//shape
+$bit-shape-border-radius: var(--bit-shp-brd-radius);
+$bit-shape-border-width: var(--bit-shp-brd-width);
+$bit-shape-border-style: var(--bit-shp-brd-style);
+
+/*---- Typography ----*/
+$bit-typography-font-family: var(--bit-tpg-font-family);
+$bit-typography-font-weight: var(--bit-tpg-font-weight);
+$bit-typography-line-height: var(--bit-tpg-line-height);
+$bit-typography-gutter-size: var(--bit-tpg-gutter-size);
+
+// h1
+$bit-typography-h1-margin: var(--bit-tpg-h1-margin);
+$bit-typography-h1-font-weight: var(--bit-tpg-h1-font-weight);
+$bit-typography-h1-font-size: var(--bit-tpg-h1-font-size);
+$bit-typography-h1-line-height: var(--bit-tpg-h1-line-height);
+$bit-typography-h1-letter-spacing: var(--bit-tpg-h1-letter-spacing);
+
+// h2
+$bit-typography-h2-margin: var(--bit-tpg-h2-margin);
+$bit-typography-h2-font-weight: var(--bit-tpg-h2-font-weight);
+$bit-typography-h2-font-size: var(--bit-tpg-h2-font-size);
+$bit-typography-h2-line-height: var(--bit-tpg-h2-line-height);
+$bit-typography-h2-letter-spacing: var(--bit-tpg-h2-letter-spacing);
+
+// h3
+$bit-typography-h3-margin: var(--bit-tpg-h3-margin);
+$bit-typography-h3-font-weight: var(--bit-tpg-h3-font-weight);
+$bit-typography-h3-font-size: var(--bit-tpg-h3-font-size);
+$bit-typography-h3-line-height: var(--bit-tpg-h3-line-height);
+$bit-typography-h3-letter-spacing: var(--bit-tpg-h3-letter-spacing);
+
+// h4
+$bit-typography-h4-margin: var(--bit-tpg-h4-margin);
+$bit-typography-h4-font-weight: var(--bit-tpg-h4-font-weight);
+$bit-typography-h4-font-size: var(--bit-tpg-h4-font-size);
+$bit-typography-h4-line-height: var(--bit-tpg-h4-line-height);
+$bit-typography-h4-letter-spacing: var(--bit-tpg-h4-letter-spacing);
+
+// h5
+$bit-typography-h5-margin: var(--bit-tpg-h5-margin);
+$bit-typography-h5-font-weight: var(--bit-tpg-h5-font-weight);
+$bit-typography-h5-font-size: var(--bit-tpg-h5-font-size);
+$bit-typography-h5-line-height: var(--bit-tpg-h5-line-height);
+$bit-typography-h5-letter-spacing: var(--bit-tpg-h5-letter-spacing);
+
+// h6
+$bit-typography-h6-margin: var(--bit-tpg-h6-margin);
+$bit-typography-h6-font-weight: var(--bit-tpg-h6-font-weight);
+$bit-typography-h6-font-size: var(--bit-tpg-h6-font-size);
+$bit-typography-h6-line-height: var(--bit-tpg-h6-line-height);
+$bit-typography-h6-letter-spacing: var(--bit-tpg-h6-letter-spacing);
+
+// subtitle1
+$bit-typography-subtitle1-margin: var(--bit-tpg-subtitle1-margin);
+$bit-typography-subtitle1-font-weight: var(--bit-tpg-subtitle1-font-weight);
+$bit-typography-subtitle1-font-size: var(--bit-tpg-subtitle1-font-size);
+$bit-typography-subtitle1-line-height: var(--bit-tpg-subtitle1-line-height);
+$bit-typography-subtitle1-letter-spacing: var(--bit-tpg-subtitle1-letter-spacing);
+
+// subtitle2
+$bit-typography-subtitle2-margin: var(--bit-tpg-subtitle2-margin);
+$bit-typography-subtitle2-font-weight: var(--bit-tpg-subtitle2-font-weight);
+$bit-typography-subtitle2-font-size: var(--bit-tpg-subtitle2-font-size);
+$bit-typography-subtitle2-line-height: var(--bit-tpg-subtitle2-line-height);
+$bit-typography-subtitle2-letter-spacing: var(--bit-tpg-subtitle2-letter-spacing);
+
+// body1
+$bit-typography-body1-margin: var(--bit-tpg-body1-margin);
+$bit-typography-body1-font-weight: var(--bit-tpg-body1-font-weight);
+$bit-typography-body1-font-size: var(--bit-tpg-body1-font-size);
+$bit-typography-body1-line-height: var(--bit-tpg-body1-line-height);
+$bit-typography-body1-letter-spacing: var(--bit-tpg-body1-letter-spacing);
+
+// body2
+$bit-typography-body2-margin: var(--bit-tpg-body2-margin);
+$bit-typography-body2-font-weight: var(--bit-tpg-body2-font-weight);
+$bit-typography-body2-font-size: var(--bit-tpg-body2-font-size);
+$bit-typography-body2-line-height: var(--bit-tpg-body2-line-height);
+$bit-typography-body2-letter-spacing: var(--bit-tpg-body2-letter-spacing);
+
+// button
+$bit-typography-button-margin: var(--bit-tpg-button-margin);
+$bit-typography-button-font-weight: var(--bit-tpg-button-font-weight);
+$bit-typography-button-font-size: var(--bit-tpg-button-font-size);
+$bit-typography-button-line-height: var(--bit-tpg-button-line-height);
+$bit-typography-button-letter-spacing: var(--bit-tpg-button-letter-spacing);
+$bit-typography-button-text-transform: var(--bit-tpg-button-text-transform);
+$bit-typography-button-display: var(--bit-tpg-button-display);
+
+// caption1
+$bit-typography-caption1-margin: var(--bit-tpg-caption1-margin);
+$bit-typography-caption1-font-weight: var(--bit-tpg-caption1-font-weight);
+$bit-typography-caption1-font-size: var(--bit-tpg-caption1-font-size);
+$bit-typography-caption1-line-height: var(--bit-tpg-caption1-line-height);
+$bit-typography-caption1-letter-spacing: var(--bit-tpg-caption1-letter-spacing);
+
+// caption2
+$bit-typography-caption2-margin: var(--bit-tpg-caption2-margin);
+$bit-typography-caption2-font-weight: var(--bit-tpg-caption2-font-weight);
+$bit-typography-caption2-font-size: var(--bit-tpg-caption2-font-size);
+$bit-typography-caption2-line-height: var(--bit-tpg-caption2-line-height);
+$bit-typography-caption2-letter-spacing: var(--bit-tpg-caption2-letter-spacing);
+
+// overline
+$bit-typography-overline-margin: var(--bit-tpg-overline-margin);
+$bit-typography-overline-font-weight: var(--bit-tpg-overline-font-weight);
+$bit-typography-overline-font-size: var(--bit-tpg-overline-font-size);
+$bit-typography-overline-line-height: var(--bit-tpg-overline-line-height);
+$bit-typography-overline-letter-spacing: var(--bit-tpg-overline-letter-spacing);
+$bit-typography-overline-text-transform: var(--bit-tpg-overline-text-transform);
+$bit-typography-overline-display: var(--bit-tpg-overline-display);
+
+// inherit
+$bit-typography-inherit-margin: var(--bit-tpg-inherit-margin);
+$bit-typography-inherit-font-family: var(--bit-tpg-inherit-font-family);
+$bit-typography-inherit-font-weight: var(--bit-tpg-inherit-font-weight);
+$bit-typography-inherit-font-size: var(--bit-tpg-inherit-font-size);
+$bit-typography-inherit-line-height: var(--bit-tpg-inherit-line-height);
+$bit-typography-inherit-letter-spacing: var(--bit-tpg-inherit-letter-spacing);
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss
index 7abd9a8404..181936835c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_media-queries.scss
@@ -3,20 +3,26 @@
 /// https://github.com/Necromancerx/media-queries-scss-mixins
 
 // media aliases and breakpoints
-$screen-xl-min: rem2(1920px);
-$screen-xl-max: rem2(5000px);
-
+$screen-sm-min: rem2(600px);
+$screen-md-min: rem2(960px);
 $screen-lg-min: rem2(1280px);
-$screen-lg-max: rem2(1919px);
+$screen-xl-min: rem2(1920px);
 
-$screen-md-min: rem2(769px);
+$screen-xs-max: rem2(599px);
+$screen-sm-max: rem2(959px);
 $screen-md-max: rem2(1279px);
-
-$screen-sm-max: rem2(768px);
+$screen-lg-max: rem2(1919px);
+$screen-xl-max: rem2(5000px);
 
 // media devices
+@mixin xs {
+    @media screen and (max-width: #{$screen-xs-max}) {
+        @content;
+    }
+}
+
 @mixin sm {
-    @media screen and (max-width: #{$screen-sm-max}) {
+    @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
         @content;
     }
 }
@@ -40,6 +46,12 @@ $screen-sm-max: rem2(768px);
 }
 
 // media lt queries
+@mixin lt-sm {
+    @media screen and (max-width: #{$screen-xs-max}) {
+        @content;
+    }
+}
+
 @mixin lt-md {
     @media screen and (max-width: #{$screen-sm-max}) {
         @content;
@@ -59,6 +71,12 @@ $screen-sm-max: rem2(768px);
 }
 
 // media gt queries
+@mixin gt-xs {
+    @media screen and (min-width: #{$screen-sm-min}) {
+        @content;
+    }
+}
+
 @mixin gt-sm {
     @media screen and (min-width: #{$screen-md-min}) {
         @content;
@@ -75,4 +93,4 @@ $screen-sm-max: rem2(768px);
     @media screen and (min-width: #{$screen-xl-min}) {
         @content;
     }
-}
+}
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_vars.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_vars.scss
index e897a9f119..1c2aa0532f 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_vars.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_vars.scss
@@ -1,3 +1,3 @@
 $headerHeight: 48px;
 $footerHeight: 68px;
-$navMenuWidth: 256px;
\ No newline at end of file
+$navPanelWidth: 256px;
\ No newline at end of file
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss
index 2383dbce92..986a396498 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss
@@ -1,5 +1,5 @@
 :root[bit-theme="dark"] {
-    --bit-clr-bg-pri: #000000;
+    //--bit-clr-bg-pri: #010409;
     // In case you need to change the background color, make sure to also update ThemeColors.cs's PrimaryDarkBgColor accordingly.
 }
 
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/_Imports.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/_Imports.razor
index 5b78a959bb..7780008dc2 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/_Imports.razor
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/_Imports.razor
@@ -19,6 +19,8 @@
 @using Boilerplate.Client.Core
 @using Boilerplate.Client.Core.Services
 @using Boilerplate.Client.Core.Components
-@using Boilerplate.Client.Core.Components.Layout
 @using Boilerplate.Client.Core.Components.Pages
+@using Boilerplate.Client.Core.Components.Layout
 @using Boilerplate.Client.Core.Services.Contracts
+@using Boilerplate.Client.Core.Components.Layout.Main
+@using Boilerplate.Client.Core.Components.Layout.Identity
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/compilerconfig.json b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/compilerconfig.json
index bdd69eb4fe..38e2eedd66 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/compilerconfig.json
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/compilerconfig.json
@@ -7,32 +7,50 @@
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/AppErrorBoundary.razor.css",
-        "inputFile": "Components/Layout/AppErrorBoundary.razor.scss",
+        "outputFile": "Components/Layout/Identity/IdentityHeader.razor.css",
+        "inputFile": "Components/Layout/Identity/IdentityHeader.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
+    {
+        "outputFile": "Components/Layout/Identity/IdentityLayout.razor.css",
+        "inputFile": "Components/Layout/Identity/IdentityLayout.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
+    {
+        "outputFile": "Components/Layout/Main/MainHeader.razor.css",
+        "inputFile": "Components/Layout/Main/MainHeader.razor.scss",
+        "minify": { "enabled": false },
+        "options": { "sourceMap": false }
+    },
+    {
+        "outputFile": "Components/Layout/Main/MainLayout.razor.css",
+        "inputFile": "Components/Layout/Main/MainLayout.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/ConfirmMessageBox.razor.css",
-        "inputFile": "Components/Layout/ConfirmMessageBox.razor.scss",
+        "outputFile": "Components/Layout/Main/NavMenu.razor.css",
+        "inputFile": "Components/Layout/Main/NavMenu.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/Footer.razor.css",
-        "inputFile": "Components/Layout/Footer.razor.scss",
+        "outputFile": "Components/Layout/Main/NavPanel.razor.css",
+        "inputFile": "Components/Layout/Main/NavPanel.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/Header.razor.css",
-        "inputFile": "Components/Layout/Header.razor.scss",
+        "outputFile": "Components/Layout/Main/SignOutConfirmModal.razor.css",
+        "inputFile": "Components/Layout/Main/SignOutConfirmModal.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/MainLayout.razor.css",
-        "inputFile": "Components/Layout/MainLayout.razor.scss",
+        "outputFile": "Components/Layout/AppErrorBoundary.razor.css",
+        "inputFile": "Components/Layout/AppErrorBoundary.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
@@ -43,14 +61,14 @@
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/NavMenu.razor.css",
-        "inputFile": "Components/Layout/NavMenu.razor.scss",
+        "outputFile": "Components/Layout/RootLayout.razor.css",
+        "inputFile": "Components/Layout/RootLayout.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Layout/SignOutConfirmModal.razor.css",
-        "inputFile": "Components/Layout/SignOutConfirmModal.razor.scss",
+        "outputFile": "Components/ConfirmMessageBox.razor.css",
+        "inputFile": "Components/ConfirmMessageBox.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
@@ -79,44 +97,44 @@
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/ProfilePage.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/ProfilePage.razor.scss",
+        "outputFile": "Components/Pages/Profile/ProfilePage.razor.css",
+        "inputFile": "Components/Pages/Profile/ProfilePage.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/UserDataSection.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/UserDataSection.razor.scss",
+        "outputFile": "Components/Pages/Profile/UserDataSection.razor.css",
+        "inputFile": "Components/Pages/Profile/UserDataSection.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/TwoFactorSection.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/TwoFactorSection.razor.scss",
+        "outputFile": "Components/Pages/Profile/TwoFactorSection.razor.css",
+        "inputFile": "Components/Pages/Profile/TwoFactorSection.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/DeleteAccountSection.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/DeleteAccountSection.razor.scss",
+        "outputFile": "Components/Pages/Profile/DeleteAccountSection.razor.css",
+        "inputFile": "Components/Pages/Profile/DeleteAccountSection.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/DeleteAccountConfirmModal.razor.scss",
+        "outputFile": "Components/Pages/Profile/DeleteAccountConfirmModal.razor.css",
+        "inputFile": "Components/Pages/Profile/DeleteAccountConfirmModal.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/ChangeEmailSection.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/ChangeEmailSection.razor.scss",
+        "outputFile": "Components/Pages/Profile/ChangeEmailSection.razor.css",
+        "inputFile": "Components/Pages/Profile/ChangeEmailSection.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
     {
-        "outputFile": "Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.css",
-        "inputFile": "Components/Pages/Identity/Profile/ChangePhoneNumberSection.razor.scss",
+        "outputFile": "Components/Pages/Profile/ChangePhoneNumberSection.razor.css",
+        "inputFile": "Components/Pages/Profile/ChangePhoneNumberSection.razor.scss",
         "minify": { "enabled": false },
         "options": { "sourceMap": false }
     },
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-GB.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-GB.webp
new file mode 100644
index 0000000000..7f9582c698
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-GB.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-US.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-US.webp
new file mode 100644
index 0000000000..6b67a22a9c
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/en-US.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fa-IR.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fa-IR.webp
new file mode 100644
index 0000000000..38c90580b5
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fa-IR.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fr-FR.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fr-FR.webp
new file mode 100644
index 0000000000..1597a3a39b
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/fr-FR.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/nl-NL.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/nl-NL.webp
new file mode 100644
index 0000000000..61ec733cc4
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/flags/nl-NL.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/identitylayout-image.webp b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/identitylayout-image.webp
new file mode 100644
index 0000000000..af30521622
Binary files /dev/null and b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/wwwroot/images/identitylayout-image.webp differ
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
index c8250fb9b5..8528ce96fb 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx
@@ -189,6 +189,21 @@
   </data>
     <data name="Date" xml:space="preserve">
     <value>تاریخ</value>
+  </data>
+    <data name="Settings" xml:space="preserve">
+    <value>تنظیمات</value>
+  </data>
+    <data name="Dark" xml:space="preserve">
+    <value>تیره</value>
+  </data>
+    <data name="Light" xml:space="preserve">
+    <value>روشن</value>
+  </data>
+    <data name="Language" xml:space="preserve">
+    <value>زبان</value>
+  </data>
+    <data name="SelectLanguage" xml:space="preserve">
+    <value>انتخاب زبان</value>
   </data>
     <data name="ProfileTitle" xml:space="preserve">
     <value>پروفایل</value>
@@ -361,6 +376,9 @@
   </data>
     <data name="SomethingWentWrong" xml:space="preserve">
     <value>اوه! به نظر مشکلی پیش اومده...</value>
+  </data>
+    <data name="BackToHome" xml:space="preserve">
+    <value>بازگشت به خانه</value>
   </data>
     <data name="UserLockedOut" xml:space="preserve">
     <value>کاربر قفل شده است. دوباره امتحان کنید در {0}</value>
@@ -990,6 +1008,9 @@
   </data>
     <data name="Dashboard" xml:space="preserve">
     <value>داشبورد</value>
+  </data>
+    <data name="DashboardSubtitle" xml:space="preserve">
+    <value>داده های تحلیلی شما</value>
   </data>
     <!--#if (captcha == "reCaptcha") -->
     <data name="InvalidGoogleRecaptchaResponse" xml:space="preserve">
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
index 6f57725f52..4f343f358a 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fr.resx
@@ -189,6 +189,21 @@
   </data>
     <data name="Date" xml:space="preserve">
     <value>Date</value>
+  </data>
+    <data name="Settings" xml:space="preserve">
+    <value>Paramètres</value>
+  </data>
+    <data name="Dark" xml:space="preserve">
+    <value>Sombre</value>
+  </data>
+    <data name="Light" xml:space="preserve">
+    <value>Lumière</value>
+  </data>
+    <data name="Language" xml:space="preserve">
+    <value>langue</value>
+  </data>
+    <data name="SelectLanguage" xml:space="preserve">
+    <value>Sélectionnez la langue</value>
   </data>
     <data name="ProfileTitle" xml:space="preserve">
     <value>Profil</value>
@@ -361,6 +376,9 @@
   </data>
     <data name="SomethingWentWrong" xml:space="preserve">
     <value>Oups, quelque chose s'est mal passé...</value>
+  </data>
+    <data name="BackToHome" xml:space="preserve">
+    <value>Retour à la maison</value>
   </data>
     <data name="UserLockedOut" xml:space="preserve">
     <value>L'utilisateur est verrouillé. Réessayez dans {0}</value>
@@ -990,6 +1008,9 @@
   </data>
     <data name="Dashboard" xml:space="preserve">
     <value>Tableau de bord</value>
+  </data>
+    <data name="DashboardSubtitle" xml:space="preserve">
+    <value>Voici vos données analytiques</value>
   </data>
     <!--#if (captcha == "reCaptcha") -->
     <data name="InvalidGoogleRecaptchaResponse" xml:space="preserve">
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
index e3d23f5d21..b189e3ba8c 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx
@@ -189,6 +189,21 @@
   </data>
     <data name="Date" xml:space="preserve">
     <value>Date</value>
+  </data>
+    <data name="Settings" xml:space="preserve">
+    <value>Settings</value>
+  </data>
+    <data name="Dark" xml:space="preserve">
+    <value>Dark</value>
+  </data>
+    <data name="Light" xml:space="preserve">
+    <value>Light</value>
+  </data>
+    <data name="Language" xml:space="preserve">
+    <value>Language</value>
+  </data>
+    <data name="SelectLanguage" xml:space="preserve">
+    <value>Select language</value>
   </data>
     <data name="ProfileTitle" xml:space="preserve">
     <value>Profile</value>
@@ -361,6 +376,9 @@
   </data>
     <data name="SomethingWentWrong" xml:space="preserve">
     <value>Oops, something went wrong...</value>
+  </data>
+    <data name="BackToHome" xml:space="preserve">
+    <value>Back to home</value>
   </data>
     <data name="UserLockedOut" xml:space="preserve">
     <value>User is locked out. Try again in {0}</value>
@@ -990,6 +1008,9 @@
   </data>
     <data name="Dashboard" xml:space="preserve">
     <value>Dashboard</value>
+  </data>
+    <data name="DashboardSubtitle" xml:space="preserve">
+    <value>Here's your analytic data</value>
   </data>
     <!--#endif -->
     <!--#if (captcha == "reCaptcha") -->
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Services/CultureInfoManager.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Services/CultureInfoManager.cs
index 2975fa0bfd..078115e464 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Services/CultureInfoManager.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Services/CultureInfoManager.cs
@@ -20,6 +20,7 @@ public static (string DisplayName, CultureInfo Culture)[] SupportedCultures =>
     [
         ("English US", CreateCultureInfo("en-US")),
         ("English UK", CreateCultureInfo("en-GB")),
+        ("Dutch", CreateCultureInfo("nl-NL")),
         ("Française", CreateCultureInfo("fr-FR")),
         ("فارسی", CreateCultureInfo("fa-IR"))
         // Adding new cultures requires changing HomePage.razor's routes and MainActivity's DataPathPrefixes.
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs
index 8f8d58d070..c70eaff99d 100644
--- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs
+++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs
@@ -41,4 +41,6 @@ public static partial class Urls
     //#endif
 
     public const string AboutPage = "/about";
+
+    public readonly static string[] AnonymousPages = [HomePage, TermsPage];
 }