diff --git a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
index afe19a8..6758468 100644
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
@@ -21,6 +21,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -142,94 +143,89 @@ export class DeesModal extends DeesElement {
         align-items: center;
         justify-content: center;
       }
-      .modal {
+      dees-tile {
         will-change: transform;
         transform: translateY(0px) scale(0.95);
         opacity: 0;
         min-height: 120px;
         max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         transition: all 0.2s ease;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
         margin: 20px;
-        display: flex;
-        flex-direction: column;
         overscroll-behavior: contain;
       }
 
+      dees-tile::part(outer) {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+      }
+
       /* Width variations */
-      .modal.width-small {
+      dees-tile.width-small {
         width: 380px;
       }
 
-      .modal.width-medium {
+      dees-tile.width-medium {
         width: 560px;
       }
 
-      .modal.width-large {
+      dees-tile.width-large {
         width: 800px;
       }
 
-      .modal.width-fullscreen {
+      dees-tile.width-fullscreen {
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         max-height: calc(100vh - 40px);
       }
 
       @media (max-width: 768px) {
-        .modal {
+        dees-tile {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
-        
-        /* Allow full height on mobile when content needs it */
+
         .modalContainer {
           padding: 10px;
         }
-        
-        .modal {
+
+        dees-tile {
           margin: 10px;
           max-height: calc(100vh - 20px);
         }
-        
-        /* Full screen mode on mobile */
-        .modal.mobile-fullscreen {
+
+        dees-tile.mobile-fullscreen {
           width: 100vw !important;
           height: 100vh !important;
           max-height: 100vh !important;
           margin: 0;
+        }
+
+        dees-tile.mobile-fullscreen::part(outer) {
           border-radius: 0;
           border: none;
         }
       }
 
-      .modal.show {
+      dees-tile.show {
         opacity: 1;
         transform: translateY(0px) scale(1);
       }
 
-      .modal.show.predestroy {
+      dees-tile.show.predestroy {
         opacity: 0;
         transform: translateY(10px) scale(1);
       }
 
-      .modal .heading {
+      .heading {
         height: 40px;
-        min-height: 40px;
         font-family: ${cssGeistFontFamily};
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         position: relative;
-        flex-shrink: 0;
       }
 
-      .modal .heading .header-buttons {
+      .heading .header-buttons {
         display: flex;
         align-items: center;
         gap: 4px;
@@ -239,7 +235,7 @@ export class DeesModal extends DeesElement {
         transform: translateY(-50%);
       }
 
-      .modal .heading .header-button {
+      .heading .header-button {
         width: 28px;
         height: 28px;
         border-radius: 4px;
@@ -252,22 +248,22 @@ export class DeesModal extends DeesElement {
         color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
-      .modal .heading .header-button:hover {
+      .heading .header-button:hover {
         background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
         color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
-      .modal .heading .header-button:active {
+      .heading .header-button:active {
         background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
       }
 
-      .modal .heading .header-button dees-icon {
+      .heading .header-button dees-icon {
         width: 16px;
         height: 16px;
         display: block;
       }
 
-      .modal .heading .heading-text {
+      .heading .heading-text {
         flex: 1;
         text-align: center;
         font-weight: 600;
@@ -277,23 +273,22 @@ export class DeesModal extends DeesElement {
         color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
-      .modal .content {
-        flex: 1;
+      .content {
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
       }
-      .modal .bottomButtons {
+      .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
         gap: 8px;
         padding: 8px;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .modal .bottomButtons .bottomButton {
+      .bottomButtons .bottomButton {
         padding: 8px 16px;
         border-radius: 4px;
         line-height: 16px;
@@ -309,27 +304,27 @@ export class DeesModal extends DeesElement {
         white-space: nowrap;
       }
 
-      .modal .bottomButtons .bottomButton:hover {
+      .bottomButtons .bottomButton:hover {
         background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
         border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
       }
-      .modal .bottomButtons .bottomButton:active {
+      .bottomButtons .bottomButton:active {
         background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
       }
-      .modal .bottomButtons .bottomButton:last-child {
+      .bottomButtons .bottomButton:last-child {
         border-right: none;
       }
 
-      .modal .bottomButtons .bottomButton.primary {
+      .bottomButtons .bottomButton.primary {
         background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
         border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
         color: #ffffff;
       }
-      .modal .bottomButtons .bottomButton.primary:hover {
+      .bottomButtons .bottomButton.primary:hover {
         background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
         border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
       }
-      .modal .bottomButtons .bottomButton.primary:active {
+      .bottomButtons .bottomButton.primary:active {
         background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
         border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
       }
@@ -345,13 +340,13 @@ export class DeesModal extends DeesElement {
 
     return html`
       <style>
-        ${customWidth ? `.modal { width: ${customWidth}; }` : ''}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+          <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">
               ${this.showHelpButton ? html`
@@ -368,7 +363,7 @@ export class DeesModal extends DeesElement {
           </div>
           <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
           ${this.menuOptions.length > 0 ? html`
-            <div class="bottomButtons">
+            <div slot="footer" class="bottomButtons">
               ${this.menuOptions.map(
                 (actionArg, index) => html`
                   <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
@@ -378,7 +373,7 @@ export class DeesModal extends DeesElement {
               )}
             </div>
           ` : ''}
-        </div>
+        </dees-tile>
       </div>
     `;
   }
@@ -388,8 +383,8 @@ export class DeesModal extends DeesElement {
     super.firstUpdated(_changedProperties);
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('show');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('show');
   }
 
   public async handleOutsideClick(eventArg: MouseEvent) {
@@ -402,8 +397,8 @@ export class DeesModal extends DeesElement {
 
   public async destroy() {
     const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('predestroy');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();