diff --git a/ts_web/elements/dees-input-richtext.demo.ts b/ts_web/elements/dees-input-richtext.demo.ts
index 518a7da..970caff 100644
--- a/ts_web/elements/dees-input-richtext.demo.ts
+++ b/ts_web/elements/dees-input-richtext.demo.ts
@@ -1,5 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -14,36 +15,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .demo-section {
-          background: #f8f9fa;
-          border-radius: 8px;
-          padding: 24px;
+        dees-panel {
+          margin-bottom: 24px;
         }
         
-        @media (prefers-color-scheme: dark) {
-          .demo-section {
-            background: #1a1a1a;
-          }
-        }
-        
-        .demo-section h3 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #0069f2;
-          font-size: 18px;
-        }
-        
-        .demo-section p {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #666;
-          font-size: 14px;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .demo-section p {
-            color: #999;
-          }
+        dees-panel:last-child {
+          margin-bottom: 0;
         }
         
         .grid-layout {
@@ -80,33 +57,24 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
-        <h3>Basic Rich Text Editor</h3>
-        <p>A full-featured rich text editor with formatting toolbar</p>
-        
+      <dees-panel .title=${'1. Basic Rich Text Editor'} .subtitle=${'A full-featured rich text editor with formatting toolbar'}>
         <dees-input-richtext 
           .label=${'Article Content'} 
           .value=${'<h1>Welcome to the Rich Text Editor!</h1><p>This is a feature-rich editor built with TipTap. You can:</p><ul><li><strong>Format text</strong> with <em>various</em> <u>styles</u></li><li>Create different heading levels</li><li>Add <a href="https://example.com">links</a> to external resources</li><li>Write <code>inline code</code> or code blocks</li></ul><blockquote><p>Use the toolbar above to explore all the formatting options available!</p></blockquote><p>Start typing to see the magic happen...</p>'}
           .description=${'Use the toolbar to format your content with headings, lists, links, and more'}
           .showWordCount=${true}
         ></dees-input-richtext>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>With Placeholder</h3>
-        <p>Empty editor with placeholder text</p>
-        
+      <dees-panel .title=${'2. With Placeholder'} .subtitle=${'Empty editor with placeholder text'}>
         <dees-input-richtext 
           .label=${'Blog Post'} 
           .placeholder=${'Start writing your blog post here...'}
           .showWordCount=${true}
         ></dees-input-richtext>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Different Heights</h3>
-        <p>Editors with different minimum heights for various use cases</p>
-        
+      <dees-panel .title=${'3. Different Heights'} .subtitle=${'Editors with different minimum heights for various use cases'}>
         <div class="grid-layout">
           <dees-input-richtext 
             .label=${'Short Note'} 
@@ -122,36 +90,27 @@ export const demoFunc = () => html`
             .showWordCount=${true}
           ></dees-input-richtext>
         </div>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Code Examples</h3>
-        <p>Editor pre-filled with code examples</p>
-        
+      <dees-panel .title=${'4. Code Examples'} .subtitle=${'Editor pre-filled with code examples'}>
         <dees-input-richtext 
           .label=${'Technical Documentation'} 
           .value=${'<h2>Installation Guide</h2><p>To install the package, run the following command:</p><pre><code>npm install @design.estate/dees-catalog</code></pre><p>Then import the component in your TypeScript file:</p><pre><code>import { DeesInputRichtext } from "@design.estate/dees-catalog";</code></pre><p>You can now use the <code>&lt;dees-input-richtext&gt;</code> element in your templates.</p>'}
           .minHeight=${250}
           .showWordCount=${true}
         ></dees-input-richtext>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Disabled State</h3>
-        <p>Read-only rich text content</p>
-        
+      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only rich text content'}>
         <dees-input-richtext 
           .label=${'Published Article (Read Only)'} 
           .value=${'<h2>The Future of Web Components</h2><p>Web Components have revolutionized how we build modern web applications...</p><blockquote><p>"The future of web development lies in reusable, encapsulated components."</p></blockquote>'}
           .disabled=${true}
           .showWordCount=${true}
         ></dees-input-richtext>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
-        <h3>Interactive Demo</h3>
-        <p>Type in the editor below and see the HTML output</p>
-        
+      <dees-panel .title=${'6. Interactive Demo'} .subtitle=${'Type in the editor below and see the HTML output'}>
         <dees-input-richtext 
           id="interactive-editor"
           .label=${'Try it yourself'} 
@@ -168,7 +127,7 @@ export const demoFunc = () => html`
         <div class="output-preview" id="output-preview">
           <em>HTML output will appear here...</em>
         </div>
-      </div>
+      </dees-panel>
     </div>
   </dees-demowrapper>
 `;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-wysiwyg.demo.ts b/ts_web/elements/dees-input-wysiwyg.demo.ts
index b6833bc..678cc8b 100644
--- a/ts_web/elements/dees-input-wysiwyg.demo.ts
+++ b/ts_web/elements/dees-input-wysiwyg.demo.ts
@@ -1,5 +1,6 @@
 import { html, css, type TemplateResult } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
 import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
 import type { IBlock } from './wysiwyg/wysiwyg.types.js';
 
@@ -630,7 +631,7 @@ export const demoFunc = (): TemplateResult => html`
   </style>
   
     <div class="demo-container">
-      <dees-panel heading="🚀 Modern WYSIWYG Editor">
+      <dees-panel .title=${'1. 🚀 Modern WYSIWYG Editor'}>
         <p class="panel-description">
           A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. 
           Perfect for content creation, blog posts, documentation, and more.
@@ -708,7 +709,7 @@ export const demoFunc = (): TemplateResult => html`
         </div>
       </dees-panel>
       
-      <dees-panel heading="📝 Blog Post Example">
+      <dees-panel .title=${'2. 📝 Blog Post Example'}>
         <p class="panel-description">
           Perfect for creating rich content with multiple block types. 
           The editor preserves formatting and provides a clean editing experience.
@@ -722,7 +723,7 @@ export const demoFunc = (): TemplateResult => html`
         ></dees-input-wysiwyg>
       </dees-panel>
 
-      <dees-panel heading="🔀 Drag & Drop Reordering">
+      <dees-panel .title=${'3. 🔀 Drag & Drop Reordering'}>
         <p class="panel-description">
           Easily rearrange your content blocks by dragging them. 
           Hover over any block to reveal the drag handle on the left side.
@@ -746,7 +747,7 @@ export const demoFunc = (): TemplateResult => html`
         </div>
       </dees-panel>
 
-      <dees-panel heading="📚 Tutorial & Documentation">
+      <dees-panel .title=${'4. 📚 Tutorial & Documentation'}>
         <p class="panel-description">
           Create comprehensive tutorials and documentation with code examples, lists, and structured content.
         </p>
@@ -850,7 +851,7 @@ git merge feature-branch
         ></dees-input-wysiwyg>
       </dees-panel>
 
-      <dees-panel heading="🔄 Output Formats">
+      <dees-panel .title=${'5. 🔄 Output Formats'}>
         <p class="panel-description">
           Choose between HTML and Markdown output formats depending on your needs. 
           Perfect for static site generators, documentation systems, or any content management workflow.
@@ -930,7 +931,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
         </div>
       </dees-panel>
 
-      <dees-panel heading="🎨 Advanced Editing">
+      <dees-panel .title=${'6. 🎨 Advanced Editing'}>
         <p class="panel-description">
           Create complex documents with mixed content types. The editor handles all formatting seamlessly.
         </p>
@@ -949,7 +950,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
         ></dees-input-wysiwyg>
       </dees-panel>
 
-      <dees-panel heading="⚙️ Form Integration">
+      <dees-panel .title=${'7. ⚙️ Form Integration'}>
         <p class="panel-description">
           Seamlessly integrates with dees-form for complete form solutions. 
           All standard form features like validation, required fields, and data binding work out of the box.
@@ -977,7 +978,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
         </dees-form>
       </dees-panel>
 
-      <dees-panel heading="🧩 Programmatic Block Creation">
+      <dees-panel .title=${'8. 🧩 Programmatic Block Creation'}>
         <p class="panel-description">
           Create content programmatically using the block API for dynamic document generation.
         </p>
@@ -1003,7 +1004,7 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
         </div>
       </dees-panel>
 
-      <dees-panel heading="📤 Export/Import Features">
+      <dees-panel .title=${'9. 📤 Export/Import Features'}>
         <p class="panel-description">
           The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.
         </p>