diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index 2a0cd4947..f007a6b72 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -223,9 +223,13 @@
   {% if component.cssParts.length %}
     <h2>CSS parts</h2>
     <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
+    
+    <{{ component.tagName }} id="parts-example"></{{ component.tagName }}>
+
+    {{ demo }}
 
     <wa-scroller>
-      <table class="component-table wa-hover-rows">
+      <table id="css-parts-table" class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -234,7 +238,7 @@
         </thead>
         <tbody>
           {% for cssPart in component.cssParts %}
-            <tr>
+            <tr data-part="{{ cssPart.name }}">
               <td class="table-name"><code>{{ cssPart.name }}</code></td>
               <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
             </tr>
@@ -305,4 +309,6 @@
       Ask for help
     </wa-button>
   </div>
-{% endblock %}
+
+  <script type="module" src="/assets/scripts/parts-diagram.js"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/packages/webawesome/docs/assets/scripts/parts-diagram.js b/packages/webawesome/docs/assets/scripts/parts-diagram.js
new file mode 100644
index 000000000..d278ad737
--- /dev/null
+++ b/packages/webawesome/docs/assets/scripts/parts-diagram.js
@@ -0,0 +1,25 @@
+// Get all table rows with data-part attributes
+const tableRows = document.querySelectorAll('[data-part]');
+
+// Add event listeners for mouseenter and mouseleave
+tableRows.forEach(row => {
+  row.addEventListener('mouseenter', function () {
+    const partName = this.getAttribute('data-part');
+    const correspondingPart = document.getElementById('parts-example').shadowRoot.querySelector(`[part='${partName}']`);
+
+    console.log('hello!');
+
+    if (correspondingPart) {
+      correspondingPart.style.outline = '2px solid red';
+    }
+  });
+
+  row.addEventListener('mouseleave', function () {
+    const partName = this.getAttribute('data-part');
+    const correspondingPart = document.getElementById('parts-example').shadowRoot.querySelector(`[part='${partName}']`);
+
+    if (correspondingPart) {
+      correspondingPart.style.outline = '';
+    }
+  });
+});