diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/Branding.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/Branding.razor
new file mode 100644
index 0000000000..4810320664
--- /dev/null
+++ b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/Branding.razor
@@ -0,0 +1,3 @@
+@using Volo.Abp.Ui.Branding
+@inject IBrandingProvider BrandingProvider
+<a class="navbar-brand" href="/">@BrandingProvider.AppName</a>
diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor
index 20b96bef45..e85e899123 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor
+++ b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor
@@ -1,9 +1,7 @@
 @inherits LayoutComponentBase
-@using Volo.Abp.Ui.Branding
-@inject IBrandingProvider BrandingProvider
 <nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4" id="main-navbar" style="min-height: 4rem;">
     <div class="container">
-        <a class="navbar-brand" href="/">@BrandingProvider.AppName</a>
+        <Branding />
         <button @onclick="ToggleCollapse" class="navbar-toggler" type="button" data-toggle="collapse"
                 data-target="#main-navbar-collapse" aria-controls="main-navbar-collapse"
                 aria-expanded="false" aria-label="Toggle navigation">