diff --git a/package-lock.json b/package-lock.json
index 5ab256bfb..c70346ab4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13994,7 +13994,7 @@
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0-alpha.13",
+      "version": "3.0.0-beta.1",
       "license": "TODO",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk
index 7405e924f..da64a68d3 100644
--- a/packages/webawesome/docs/docs/color-palettes.njk
+++ b/packages/webawesome/docs/docs/color-palettes.njk
@@ -12,23 +12,36 @@ layout: page
   <link rel="stylesheet" href="/dist/styles/color/palettes/{{palette.filename}}" />
 {% endfor %}
 
-{% raw %}
 <div id="color-palettes">
-  {% if not currentUser.hasPro %}
-    <p>
-      Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
-    </p>
-  {% endif %}
-
+  {% raw %}
+    {% if not currentUser.hasPro %}
+      <p>
+        Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
+      </p>
+    {% endif %}
+  {% endraw %}
   <wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
     {% for palette in themer.palettes %}
-      {% if not palette.isPro or currentUser.hasPro %}
+      {% if not palette.isPro %}
         <wa-radio
           class="palette-card"
           value="{{ palette.name | lower }}"
         >
           {{ palette.name }}
         </wa-radio>
+      {% else %}
+        {% raw %}
+          {% if currentUser.hasPro %}
+        {% endraw %}
+            <wa-radio
+              class="palette-card"
+              value="{{ palette.name | lower }}"
+            >
+              {{ palette.name }}
+            </wa-radio>
+        {% raw %}
+          {% endif %}
+        {% endraw %}
       {% endif %}
     {% endfor %}
   </wa-radio-group>
@@ -51,7 +64,6 @@ layout: page
   </div>
   {% endfor %}
 </div>
-{% endraw %}
 
 <h2>Using This Palette</h2>
 <div id="import-code">
diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index 436803f6d..eb6910cb9 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -14,7 +14,6 @@ layout: page
     </wa-button>
   </div>
 
-  {% raw %}
   <div id="theme-viewer">
     {% if not currentUser.hasPro %}
       <p>
@@ -24,7 +23,7 @@ layout: page
 
     <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
       {% for theme in themer.themes %}
-        {% if not theme.isPro or currentUser.hasPro %}
+        {% if not theme.isPro %}
           <wa-radio
             class="theme-card"
             value="{{ theme.filename | stripExtension }}"
@@ -34,11 +33,26 @@ layout: page
           >
             {{ theme.name }}
           </wa-radio>
+        {% else %}
+          {% raw %}
+            {% if currentUser.hasPro %}
+          {% endraw %}
+            <wa-radio
+              class="theme-card"
+              value="{{ theme.filename | stripExtension }}"
+              data-description="{{ theme.description }}"
+              data-title="{{ theme.name }}"
+              {% if theme.isPro %}data-is-pro{% endif %}
+            >
+              {{ theme.name }}
+            </wa-radio>
+          {% raw %}
+            {% endif %}
+          {% endraw %}
         {% endif %}
       {% endfor %}
     </wa-radio-group>
   </div>
-  {% endraw %}
 
   <div id="theme-preview" class="wa-stack">
     <header class="wa-stack">