diff --git a/internal/cli/data/branding/storybook/branding-customization-notification.js b/internal/cli/data/branding/storybook/branding-customization-notification.js
new file mode 100644
index 000000000..3541bc065
--- /dev/null
+++ b/internal/cli/data/branding/storybook/branding-customization-notification.js
@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', function () {
+ var checkIfStorybookRendered = setInterval(function () {
+ var targetDiv = document.querySelectorAll("#panel-tab-content > div")[0];
+ if (targetDiv) {
+ clearInterval(checkIfStorybookRendered);
+ var insertHTML = `
+
+
An improved branding customization UI experience is available through the auth0 universal-login customize
command.
+
+
+ `;
+ targetDiv.innerHTML = insertHTML + targetDiv.innerHTML;
+
+ var brandingCloseButton = document.getElementById('branding-close-button');
+ brandingCloseButton.addEventListener('click', function () {
+ var brandingCustomizationNotification = document.getElementById('branding-customization-notification');
+ if (brandingCustomizationNotification) {
+ brandingCustomizationNotification.remove();
+ }
+ });
+ }
+ }, 100);
+});
diff --git a/internal/cli/data/branding/storybook/index.html b/internal/cli/data/branding/storybook/index.html
index 47370ed94..b844d482e 100644
--- a/internal/cli/data/branding/storybook/index.html
+++ b/internal/cli/data/branding/storybook/index.html
@@ -52,4 +52,4 @@
- window['DOCS_MODE'] = false;