diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md
index 75da5169cb..18f9f01e36 100644
--- a/docs/en/framework/ui/angular/modifying-the-menu.md
+++ b/docs/en/framework/ui/angular/modifying-the-menu.md
@@ -44,7 +44,30 @@ export const appConfig: ApplicationConfig = {
 
 Notes
 - This approach works across themes. If you are using LeptonX, the brand logo component reads these values automatically; you don't need any theme-specific code.
-- You can still override visuals with CSS variables if desired. See the LeptonX section for CSS overrides.
+- The `name` property is used for the **brand/logo display** in the UI. For the **browser page title**, ABP uses the `::AppName` localization key from your Domain.Shared layer (`Localization/[ProjectName]/en.json`).
+- You can still override visuals with CSS variables if desired. See the alternative approach below.
+
+### Alternative: Using CSS Variables (LeptonX Theme)
+
+If you're using the LeptonX theme, you can also configure the logo using CSS variables in your `styles.scss` file. This approach is specific to LeptonX and provides direct control over the logo styling.
+
+Add the following to your `src/styles.scss`:
+
+```scss
+:root {
+  --lpx-logo: url('/assets/images/logo/logo-light.png');
+  --lpx-logo-icon: url('/assets/images/logo/logo-light-thumbnail.png');
+}
+```
+
+**When to use each approach:**
+
+| Approach | Use Case | Theme Support |
+|----------|----------|---------------|
+| **provideLogo** (recommended) | Cross-theme compatibility, environment-based configuration | All themes (Basic, LeptonX, custom) |
+| **CSS Variables** | LeptonX-specific styling, fine-grained CSS control | LeptonX only |
+
+**Recommendation:** Use the `provideLogo` approach for most cases as it's theme-independent and follows ABP's standard configuration pattern. Use CSS variables only when you need LeptonX-specific styling control or have existing CSS-based theme customizations.
 
 ## How to Add a Navigation Element