diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 21cd9ee2f..dd4cd119a 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { parse as HTMLParse } from 'node-html-parser';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
@@ -87,6 +88,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
   eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
   eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
+  eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
   // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
   // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
   eleventyConfig.addFilter('trimPipes', content => {
diff --git a/packages/webawesome/docs/_includes/pro-badge.njk b/packages/webawesome/docs/_includes/pro-badge.njk
new file mode 100644
index 000000000..f5d05dd2a
--- /dev/null
+++ b/packages/webawesome/docs/_includes/pro-badge.njk
@@ -0,0 +1,5 @@
+{% macro proBadge(proBadgeDescription, proBadgeId) %}
+  {% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}">Pro</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ proBadgeDescription or "This requires access to Web Awesome Pro" }}</wa-tooltip>
+{% endmacro %}
diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 17b5170e9..a09fac59f 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -1,5 +1,6 @@
 {# Search #}
 {% include "search-trigger-button.njk" %}
+{% from "pro-badge.njk" import proBadge %}
 
 {# Getting started #}
 <h2>Getting Started</h2>
@@ -38,7 +39,7 @@
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
           Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
         </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
     </li>
     <li><a href="/docs/components/animated-image/">Animated Image</a></li>
@@ -179,7 +180,7 @@
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
           Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
         </a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
     </li>
   </ul>
@@ -197,7 +198,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/app/">App</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -243,7 +244,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/blog-news/">Blog &amp; News</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
       <li>
@@ -305,7 +306,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/ecommerce/">Ecommerce</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -346,7 +347,7 @@
     <li>
       <span class="wa-split">
         <a href="/docs/patterns/layouts/">Layouts</a>
-        <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+        {{ proBadge() }}
       </span>
       <ul>
         <li>
@@ -371,7 +372,7 @@
   <li>
     <span class="wa-split">
       <a href="/themer" data-turbo="false">Theme Builder</a>
-      <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
+      {{ proBadge("This requires an active Web Awesome Pro subscription") }}
     </span>
   </li>
 </ul>
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index ed5aefa28..6364f9002 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -72,6 +72,12 @@
     color: white;
     background-color: var(--wa-brand-orange);
     border-color: var(--wa-brand-orange);
+    text-transform: uppercase;
+
+    + wa-tooltip {
+      font-size: var(--wa-font-size-xs);
+      --max-width: unset;
+    }
   }
 
   /* search trigger */