diff --git a/changelog.md b/changelog.md
index 5ff3b80..bbdaeb9 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-07 - 2.12.0 - feat(elements)
+standardize dashboard and detail views on dees tile and stats grid components
+
+- replace custom stat cards with dees-statsgrid across status and network views and remove the obsolete sz-stat-card element
+- migrate multiple detail and settings views to dees-tile headers and footers for consistent action placement and styling
+- extend sz-config-section with footer links and actions plus improved collapsed tile behavior
+
 ## 2026-04-05 - 2.11.2 - fix(route-card)
 align route card with source profile metadata and vpnOnly route configuration
 
diff --git a/readme.hints.md b/readme.hints.md
index 7c8f8b1..d8a13f9 100644
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -2,7 +2,7 @@
 
 ## Project Structure
 - `html/index.ts` - WccTools setup with sections for Pages and Elements
-- `ts_web/elements/` - All web components (34 elements + 9 demo-view wrappers)
+- `ts_web/elements/` - All web components (33 elements + 9 demo-view wrappers)
 - `ts_web/elements/index.ts` - Barrel export for all element components
 - `ts_web/pages/` - Page components
 
@@ -16,7 +16,7 @@
 ## Demo Groups
 | Group | Elements |
 |-------|----------|
-| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
+| Dashboard | sz-dashboard-view, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
 | Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
 | Platform | sz-platform-services-card, sz-platform-service-detail-view |
 | Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 47679ce..2e08f75 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '2.11.2',
+  version: '2.12.0',
   description: 'UI component catalog for serve.zone'
 }
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 911663b..2da4959 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -1,5 +1,4 @@
 // Dashboard Cards
-export * from './sz-stat-card.js';
 export * from './sz-resource-usage-card.js';
 export * from './sz-traffic-card.js';
 export * from './sz-platform-services-card.js';
diff --git a/ts_web/elements/sz-config-section.ts b/ts_web/elements/sz-config-section.ts
index ffe257f..89888cf 100644
--- a/ts_web/elements/sz-config-section.ts
+++ b/ts_web/elements/sz-config-section.ts
@@ -24,6 +24,13 @@ export interface IConfigSectionAction {
   detail?: any;
 }
 
+export interface IConfigSectionLink {
+  label: string;
+  href: string;
+  icon?: string;
+  external?: boolean;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'sz-config-section': SzConfigSection;
@@ -46,6 +53,12 @@ export class SzConfigSection extends DeesElement {
         { key: 'Auto Renew', value: true, type: 'boolean' },
         { key: 'Renew Threshold', value: '30 days' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Docs', href: 'https://code.foss.global/serve.zone/smartproxy', icon: 'lucide:bookOpen', external: true },
+      ] as IConfigSectionLink[]}
+      .actions=${[
+        { label: 'Configure', icon: 'lucide:settings', event: 'configure' },
+      ] as IConfigSectionAction[]}
     ></sz-config-section>
     <sz-config-section
       title="Email Server"
@@ -57,6 +70,13 @@ export class SzConfigSection extends DeesElement {
         { key: 'Hostname', value: null },
         { key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Docs', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:bookOpen', external: true },
+        { label: 'Source', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:github', external: true },
+      ] as IConfigSectionLink[]}
+      .actions=${[
+        { label: 'Enable', icon: 'lucide:power', event: 'enable' },
+      ] as IConfigSectionAction[]}
     ></sz-config-section>
     <sz-config-section
       title="DNS Server"
@@ -68,6 +88,9 @@ export class SzConfigSection extends DeesElement {
         { key: 'Port', value: 53 },
         { key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
       ] as IConfigField[]}
+      .links=${[
+        { label: 'Getting Started', href: 'https://docs.example.com/dns', icon: 'lucide:bookOpen', external: true },
+      ] as IConfigSectionLink[]}
     ></sz-config-section>
   `;
 
@@ -91,6 +114,9 @@ export class SzConfigSection extends DeesElement {
   @property({ type: Array })
   public accessor actions: IConfigSectionAction[] = [];
 
+  @property({ type: Array })
+  public accessor links: IConfigSectionLink[] = [];
+
   @property({ type: Boolean })
   public accessor collapsible: boolean = false;
 
@@ -108,20 +134,25 @@ export class SzConfigSection extends DeesElement {
         margin-bottom: 16px;
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
+      dees-tile {
+        display: block;
+      }
+
+      :host([collapsed]) dees-tile::part(content) {
+        display: none;
+      }
+
+      :host([collapsed]) dees-tile::part(footer) {
+        display: none;
       }
 
       .section-header {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 14px 20px;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        padding: 10px 16px;
+        gap: 12px;
+        width: 100%;
+        box-sizing: border-box;
         cursor: default;
         user-select: none;
       }
@@ -131,30 +162,31 @@ export class SzConfigSection extends DeesElement {
       }
 
       :host([collapsible]) .section-header:hover {
-        background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
+        background: var(--dees-color-hover);
       }
 
       .header-left {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
         min-width: 0;
+        flex: 1;
       }
 
       .header-icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 36px;
-        height: 36px;
-        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
+        width: 28px;
+        height: 28px;
+        background: var(--dees-color-border-default);
+        border-radius: 6px;
         flex-shrink: 0;
       }
 
       .header-icon dees-icon {
-        font-size: 18px;
-        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+        font-size: 14px;
+        color: var(--dees-color-text-muted);
       }
 
       .header-text {
@@ -162,15 +194,17 @@ export class SzConfigSection extends DeesElement {
       }
 
       .header-title {
-        font-size: 15px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
         line-height: 1.3;
       }
 
       .header-subtitle {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
         line-height: 1.3;
         margin-top: 1px;
       }
@@ -236,30 +270,60 @@ export class SzConfigSection extends DeesElement {
         background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
       }
 
-      /* Action buttons */
-      .header-action {
-        display: inline-flex;
+      /* Footer action buttons — canonical dees-modal / dees-tile pattern */
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
         align-items: center;
-        gap: 5px;
-        padding: 4px 12px;
-        border-radius: 6px;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
         background: transparent;
         border: none;
-        cursor: pointer;
-        transition: background 150ms ease;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
         font-family: inherit;
+        text-decoration: none;
       }
 
-      .header-action:hover {
-        background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
+      .tile-button:first-child {
+        border-left: none;
       }
 
-      .header-action dees-icon {
-        font-size: 14px;
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button dees-icon {
+        font-size: 12px;
       }
 
       /* Chevron */
@@ -274,8 +338,8 @@ export class SzConfigSection extends DeesElement {
       }
 
       .chevron dees-icon {
-        font-size: 16px;
-        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        font-size: 14px;
+        color: var(--dees-color-text-muted);
       }
 
       /* Content */
@@ -283,10 +347,6 @@ export class SzConfigSection extends DeesElement {
         padding: 0;
       }
 
-      .section-content.collapsed {
-        display: none;
-      }
-
       /* Field rows */
       .field-row {
         display: flex;
@@ -439,6 +499,13 @@ export class SzConfigSection extends DeesElement {
     }
   }
 
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('isCollapsed')) {
+      this.toggleAttribute('collapsed', this.isCollapsed);
+    }
+  }
+
   public render(): TemplateResult {
     const statusLabels: Record<string, string> = {
       'enabled': 'Enabled',
@@ -448,8 +515,9 @@ export class SzConfigSection extends DeesElement {
     };
 
     return html`
-      <div class="section">
+      <dees-tile>
         <div
+          slot="header"
           class="section-header"
           @click=${() => {
             if (this.collapsible) {
@@ -475,8 +543,36 @@ export class SzConfigSection extends DeesElement {
                 ${statusLabels[this.status] || this.status}
               </span>
             ` : ''}
+            ${this.collapsible ? html`
+              <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
+                <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
+              </span>
+            ` : ''}
+          </div>
+        </div>
+        <div class="section-content">
+          ${this.fields.map(field => this.renderField(field))}
+          <div class="slot-content">
+            <slot></slot>
+          </div>
+        </div>
+        ${this.links.length > 0 || this.actions.length > 0 ? html`
+          <div slot="footer" class="section-footer">
+            ${this.links.map(link => html`
+              <a
+                class="tile-button"
+                href=${link.href}
+                target=${link.external ? '_blank' : '_self'}
+                rel=${link.external ? 'noopener noreferrer' : ''}
+                @click=${(e: Event) => e.stopPropagation()}
+              >
+                ${link.icon ? html`<dees-icon .icon=${link.icon}></dees-icon>` : ''}
+                ${link.label}
+                ${link.external ? html`<dees-icon .icon=${'lucide:externalLink'}></dees-icon>` : ''}
+              </a>
+            `)}
             ${this.actions.map(action => html`
-              <button class="header-action" @click=${(e: Event) => {
+              <button class="tile-button primary" @click=${(e: Event) => {
                 e.stopPropagation();
                 this.dispatchEvent(new CustomEvent(action.event || 'action', {
                   detail: action.detail || { label: action.label },
@@ -488,20 +584,9 @@ export class SzConfigSection extends DeesElement {
                 ${action.label}
               </button>
             `)}
-            ${this.collapsible ? html`
-              <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
-                <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
-              </span>
-            ` : ''}
           </div>
-        </div>
-        <div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
-          ${this.fields.map(field => this.renderField(field))}
-          <div class="slot-content">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
+        ` : ''}
+      </dees-tile>
     `;
   }
 
diff --git a/ts_web/elements/sz-domain-detail-view.ts b/ts_web/elements/sz-domain-detail-view.ts
index bdb8562..c24a37b 100644
--- a/ts_web/elements/sz-domain-detail-view.ts
+++ b/ts_web/elements/sz-domain-detail-view.ts
@@ -229,57 +229,87 @@ export class SzDomainDetailView extends DeesElement {
         }
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .section.full-width {
+      dees-tile.full-width {
         grid-column: 1 / -1;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .section-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        flex: 1;
         display: flex;
         align-items: center;
         gap: 8px;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-title svg {
-        width: 16px;
-        height: 16px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        color: var(--dees-color-text-secondary);
       }
 
-      .section-action {
-        padding: 6px 10px;
-        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 4px;
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
         font-size: 12px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-weight: 500;
         cursor: pointer;
-        transition: all 200ms ease;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
       }
 
-      .section-action:hover {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      .tile-button:first-child {
+        border-left: none;
       }
 
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+
       .section-content {
         padding: 16px;
       }
@@ -582,8 +612,8 @@ export class SzDomainDetailView extends DeesElement {
 
       <div class="grid">
         <!-- Certificate Section -->
-        <div class="section">
-          <div class="section-header">
+        <dees-tile>
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
@@ -591,9 +621,6 @@ export class SzDomainDetailView extends DeesElement {
               </svg>
               SSL Certificate
             </div>
-            ${this.certificate ? html`
-              <button class="section-action" @click=${() => this.handleRenewCertificate()}>Renew</button>
-            ` : ''}
           </div>
           <div class="section-content">
             ${this.certificate ? html`
@@ -652,11 +679,16 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No certificate configured</div>
             `}
           </div>
-        </div>
+          ${this.certificate ? html`
+            <div slot="footer" class="section-footer">
+              <button class="tile-button primary" @click=${() => this.handleRenewCertificate()}>Renew</button>
+            </div>
+          ` : ''}
+        </dees-tile>
 
         <!-- Proxy Routes Section -->
-        <div class="section">
-          <div class="section-header">
+        <dees-tile>
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <polyline points="16 3 21 3 21 8"></polyline>
@@ -679,11 +711,11 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No proxy routes configured</div>
             `}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- DNS Records Section -->
-        <div class="section full-width">
-          <div class="section-header">
+        <dees-tile class="full-width">
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="10"></circle>
@@ -692,13 +724,6 @@ export class SzDomainDetailView extends DeesElement {
               </svg>
               DNS Records
             </div>
-            <button class="section-action" @click=${() => this.handleAddDnsRecord()}>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              Add Record
-            </button>
           </div>
           <div class="section-content">
             ${this.dnsRecords.length > 0 ? html`
@@ -737,7 +762,16 @@ export class SzDomainDetailView extends DeesElement {
               <div class="empty-state">No DNS records configured</div>
             `}
           </div>
-        </div>
+          <div slot="footer" class="section-footer">
+            <button class="tile-button primary" @click=${() => this.handleAddDnsRecord()}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+              </svg>
+              Add Record
+            </button>
+          </div>
+        </dees-tile>
       </div>
     `;
   }
diff --git a/ts_web/elements/sz-mta-detail-view.ts b/ts_web/elements/sz-mta-detail-view.ts
index 9c2f3b3..cafadea 100644
--- a/ts_web/elements/sz-mta-detail-view.ts
+++ b/ts_web/elements/sz-mta-detail-view.ts
@@ -256,31 +256,89 @@ export class SzMtaDetailView extends DeesElement {
         gap: 24px;
       }
 
-      .card {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
+      .card-header {
+        height: 36px;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .card-header {
+      .card-heading {
+        flex: 1;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .card-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .card-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-top: 2px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .card-content {
@@ -451,37 +509,13 @@ export class SzMtaDetailView extends DeesElement {
         color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
       }
 
-      /* Copy button */
-      .smtp-copy-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 150ms ease;
-      }
-
-      .smtp-copy-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
-      }
-
-      /* Header subtitle enhancements */
+      /* SMTP metadata banner — sits inside content, above the log */
       .smtp-header-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-top: 2px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-wrap: wrap;
+        padding: 10px 16px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        font-family: monospace;
       }
 
       .smtp-direction-badge {
@@ -578,7 +612,7 @@ export class SzMtaDetailView extends DeesElement {
         color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
       }
 
-      .rejection-card {
+      dees-tile.rejection-card::part(outer) {
         border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
       }
 
@@ -646,9 +680,11 @@ export class SzMtaDetailView extends DeesElement {
       <div class="content">
         <div class="main-content">
           <!-- Email Metadata -->
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title">Email Metadata</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Email Metadata</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -684,49 +720,53 @@ export class SzMtaDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- SMTP Transaction Log -->
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">SMTP Transaction Log</div>
-                <div class="smtp-header-subtitle">
-                  <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
-                  <span>${email.direction === 'outbound'
-                    ? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
-                    : `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
-                  }</span>
-                </div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">SMTP Transaction Log</span>
+                <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
               </div>
-              <button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            </div>
+            <div class="smtp-header-subtitle">
+              ${email.direction === 'outbound'
+                ? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
+                : `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
+              }
+            </div>
+            ${this.renderSmtpLog(email)}
+            <div slot="footer" class="card-footer">
+              <button class="tile-button" @click=${() => this.copySmtpLog()}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                   <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                 </svg>
                 Copy Log
               </button>
             </div>
-            ${this.renderSmtpLog(email)}
-          </div>
+          </dees-tile>
 
           <!-- Email Body -->
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">Email Body (Escaped)</div>
-                <div class="card-subtitle">Raw content — HTML is not rendered</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Email Body (Escaped)</span>
+                <span class="card-subtitle">Raw content — HTML is not rendered</span>
               </div>
             </div>
             <pre class="email-body-container">${email.body}</pre>
-          </div>
+          </dees-tile>
         </div>
 
         <div class="sidebar">
           <!-- Connection Info -->
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title">Connection Info</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Connection Info</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -772,12 +812,14 @@ export class SzMtaDetailView extends DeesElement {
                 ` : ''}
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- Authentication Results -->
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title">Authentication Results</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Authentication Results</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="auth-row">
@@ -802,13 +844,15 @@ export class SzMtaDetailView extends DeesElement {
                 <span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
           <!-- Rejection Details (conditional) -->
           ${email.status === 'rejected' || email.status === 'bounced' ? html`
-            <div class="card rejection-card">
-              <div class="card-header">
-                <div class="card-title">Rejection Details</div>
+            <dees-tile class="rejection-card">
+              <div slot="header" class="card-header">
+                <div class="card-heading">
+                  <span class="card-title">Rejection Details</span>
+                </div>
               </div>
               <div class="card-content">
                 ${email.rejectionReason ? html`
@@ -820,7 +864,7 @@ export class SzMtaDetailView extends DeesElement {
                   <div class="rejection-text">${email.bounceMessage}</div>
                 ` : ''}
               </div>
-            </div>
+            </dees-tile>
           ` : ''}
         </div>
       </div>
diff --git a/ts_web/elements/sz-network-domains-view.ts b/ts_web/elements/sz-network-domains-view.ts
index 29c53ac..8b2179f 100644
--- a/ts_web/elements/sz-network-domains-view.ts
+++ b/ts_web/elements/sz-network-domains-view.ts
@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
-import './sz-stat-card.js';
+import type { IStatsTile } from '@design.estate/dees-catalog';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -91,19 +90,11 @@ export class SzNetworkDomainsView extends DeesElement {
         border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
       }
 
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
+      dees-statsgrid {
+        display: block;
         margin-bottom: 24px;
       }
 
-      @media (min-width: 768px) {
-        .stats-grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
-
       .table-container {
         background: ${cssManager.bdTheme('#ffffff', '#09090b')};
         border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
@@ -205,6 +196,42 @@ export class SzNetworkDomainsView extends DeesElement {
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Domains',
+        value: this.stats.total,
+        type: 'number',
+        icon: 'lucide:globe',
+      },
+      {
+        id: 'valid',
+        title: 'Valid Certificates',
+        value: this.stats.valid,
+        type: 'number',
+        icon: 'lucide:shieldCheck',
+        color: '#22c55e',
+      },
+      {
+        id: 'expiring',
+        title: 'Expiring Soon',
+        value: this.stats.expiring,
+        type: 'number',
+        icon: 'lucide:shieldAlert',
+        color: this.stats.expiring > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'expired',
+        title: 'Expired/Pending',
+        value: this.stats.expired,
+        type: 'number',
+        icon: 'lucide:circleOff',
+        color: this.stats.expired > 0 ? '#ef4444' : undefined,
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="header">
@@ -212,31 +239,10 @@ export class SzNetworkDomainsView extends DeesElement {
         <button class="sync-button" @click=${() => this.handleSync()}>Sync Cloudflare</button>
       </div>
 
-      <div class="stats-grid">
-        <sz-stat-card
-          label="Total Domains"
-          value="${this.stats.total}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Valid Certificates"
-          value="${this.stats.valid}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expiring Soon"
-          value="${this.stats.expiring}"
-          icon="stop"
-          variant="${this.stats.expiring > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expired/Pending"
-          value="${this.stats.expired}"
-          icon="stop"
-          variant="${this.stats.expired > 0 ? 'error' : 'default'}"
-        ></sz-stat-card>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
 
       <div class="table-container">
         <div class="table-header">
diff --git a/ts_web/elements/sz-network-proxy-view.ts b/ts_web/elements/sz-network-proxy-view.ts
index 3d3bad6..48b6b60 100644
--- a/ts_web/elements/sz-network-proxy-view.ts
+++ b/ts_web/elements/sz-network-proxy-view.ts
@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
-import './sz-stat-card.js';
+import type { IStatsTile } from '@design.estate/dees-catalog';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -113,42 +112,107 @@ export class SzNetworkProxyView extends DeesElement {
         background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
       }
 
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
+      dees-statsgrid {
+        display: block;
         margin-bottom: 24px;
       }
 
-      @media (min-width: 768px) {
-        .stats-grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
-
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        height: 36px;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .section-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-top: 2px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button.danger {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .tile-button.danger:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
       }
 
       .table-header {
@@ -234,61 +298,6 @@ export class SzNetworkProxyView extends DeesElement {
         color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
       }
 
-      .logs-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-      }
-
-      .logs-actions {
-        display: flex;
-        gap: 8px;
-      }
-
-      .stream-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        background: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
-        border: none;
-        border-radius: 4px;
-        font-size: 13px;
-        font-weight: 500;
-        color: white;
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .stream-button:hover {
-        background: ${cssManager.bdTheme('#1d4ed8', '#2563eb')};
-      }
-
-      .stream-button.streaming {
-        background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .stream-button.streaming:hover {
-        background: ${cssManager.bdTheme('#b91c1c', '#dc2626')};
-      }
-
-      .clear-button {
-        padding: 6px 12px;
-        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 4px;
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .clear-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-
       .logs-container {
         padding: 16px;
         font-family: monospace;
@@ -336,41 +345,57 @@ export class SzNetworkProxyView extends DeesElement {
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'proxy-status',
+        title: 'Proxy Status',
+        value: this.proxyStatus === 'running' ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:server',
+        color: this.proxyStatus === 'running' ? '#22c55e' : '#ef4444',
+      },
+      {
+        id: 'routes',
+        title: 'Routes',
+        value: this.routeCount,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+      {
+        id: 'certificates',
+        title: 'Certificates',
+        value: this.certificateCount,
+        type: 'number',
+        icon: 'lucide:check',
+      },
+      {
+        id: 'targets',
+        title: 'Targets',
+        value: this.targetCount,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="actions">
         <button class="refresh-button" @click=${() => this.handleRefresh()}>Refresh</button>
       </div>
 
-      <div class="stats-grid">
-        <sz-stat-card
-          label="Proxy Status"
-          value="${this.proxyStatus === 'running' ? 'Running' : 'Stopped'}"
-          icon="server"
-          variant="${this.proxyStatus === 'running' ? 'success' : 'error'}"
-          valueBadge
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Routes"
-          value="${this.routeCount}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Certificates"
-          value="${this.certificateCount}"
-          icon="check"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Targets"
-          value="${this.targetCount}"
-          icon="server"
-        ></sz-stat-card>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
 
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">Traffic Targets</div>
-          <div class="section-subtitle">Services, registry, and platform services with their routing info</div>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Traffic Targets</span>
+            <span class="section-subtitle">Services, registry, and platform services with their routing info</span>
+          </div>
         </div>
         <div class="table-header">
           <span>Type</span>
@@ -388,30 +413,13 @@ export class SzNetworkProxyView extends DeesElement {
             <span><span class="status-badge ${target.status}">${target.status}</span></span>
           </div>
         `)}
-      </div>
+      </dees-tile>
 
-      <div class="section">
-        <div class="logs-header">
-          <div>
-            <div class="section-title">Access Logs</div>
-            <div class="section-subtitle">Real-time Caddy access logs</div>
-          </div>
-          <div class="logs-actions">
-            <button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                ${this.streaming
-                  ? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
-                  : html`<polygon points="5,3 19,12 5,21"/>`
-                }
-              </svg>
-              ${this.streaming ? 'Stop' : 'Stream'}
-            </button>
-            <button class="clear-button" @click=${() => this.handleClearLogs()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
-              </svg>
-              Clear logs
-            </button>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Access Logs</span>
+            <span class="section-subtitle">Real-time Caddy access logs</span>
           </div>
         </div>
         <div class="logs-container">
@@ -428,7 +436,24 @@ export class SzNetworkProxyView extends DeesElement {
             <div class="empty-logs">Click "Stream" to start live access log streaming</div>
           `}
         </div>
-      </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button ${this.streaming ? 'danger' : 'primary'}" @click=${() => this.toggleStreaming()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              ${this.streaming
+                ? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
+                : html`<polygon points="5,3 19,12 5,21"/>`
+              }
+            </svg>
+            ${this.streaming ? 'Stop' : 'Stream'}
+          </button>
+          <button class="tile-button" @click=${() => this.handleClearLogs()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
+            </svg>
+            Clear logs
+          </button>
+        </div>
+      </dees-tile>
     `;
   }
 
diff --git a/ts_web/elements/sz-platform-service-detail-view.ts b/ts_web/elements/sz-platform-service-detail-view.ts
index 7ddfef4..73e76ce 100644
--- a/ts_web/elements/sz-platform-service-detail-view.ts
+++ b/ts_web/elements/sz-platform-service-detail-view.ts
@@ -225,39 +225,35 @@ export class SzPlatformServiceDetailView extends DeesElement {
         }
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .section.full-width {
+      dees-tile.full-width {
         grid-column: 1 / -1;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .section-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        flex: 1;
         display: flex;
         align-items: center;
         gap: 8px;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-title svg {
-        width: 16px;
-        height: 16px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        color: var(--dees-color-text-secondary);
       }
 
       .section-content {
@@ -452,8 +448,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
 
       <div class="grid">
         <!-- Connection Info -->
-        <div class="section">
-          <div class="section-header">
+        <dees-tile>
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
@@ -516,11 +512,11 @@ export class SzPlatformServiceDetailView extends DeesElement {
               </div>
             ` : ''}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- Configuration -->
-        <div class="section">
-          <div class="section-header">
+        <dees-tile>
+          <div slot="header" class="section-header">
             <div class="section-title">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="3"></circle>
@@ -537,12 +533,12 @@ export class SzPlatformServiceDetailView extends DeesElement {
               </div>
             `)}
           </div>
-        </div>
+        </dees-tile>
 
         <!-- Metrics -->
         ${this.service.metrics ? html`
-          <div class="section full-width">
-            <div class="section-header">
+          <dees-tile class="full-width">
+            <div slot="header" class="section-header">
               <div class="section-title">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <line x1="18" y1="20" x2="18" y2="10"></line>
@@ -583,7 +579,7 @@ export class SzPlatformServiceDetailView extends DeesElement {
                 ` : ''}
               </div>
             </div>
-          </div>
+          </dees-tile>
         ` : ''}
 
         <!-- Logs -->
diff --git a/ts_web/elements/sz-service-detail-view.ts b/ts_web/elements/sz-service-detail-view.ts
index 4daa91d..22604b4 100644
--- a/ts_web/elements/sz-service-detail-view.ts
+++ b/ts_web/elements/sz-service-detail-view.ts
@@ -11,8 +11,6 @@ import {
 
 import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
 
-import './sz-stat-card.js';
-
 declare global {
   interface HTMLElementTagNameMap {
     'sz-service-detail-view': SzServiceDetailView;
@@ -218,31 +216,97 @@ export class SzServiceDetailView extends DeesElement {
         gap: 24px;
       }
 
-      .card {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        overflow: hidden;
+      .card-header {
+        height: 36px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .card-header {
+      .card-heading {
+        flex: 1;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .card-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .card-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-top: 2px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .tile-button.danger {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .tile-button.danger:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
       }
 
       .card-content {
@@ -518,12 +582,11 @@ export class SzServiceDetailView extends DeesElement {
 
       <div class="content">
         <div class="main-content">
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">Service Details</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Service Details</span>
               </div>
-              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleEdit()}>Edit</button>
             </div>
             <div class="card-content">
               <div class="detail-list">
@@ -557,7 +620,10 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+            <div slot="footer" class="card-footer">
+              <button class="tile-button primary" @click=${() => this.handleEdit()}>Edit</button>
+            </div>
+          </dees-tile>
 
           <dees-chart-log
             .label=${'Service Logs'}
@@ -573,9 +639,11 @@ export class SzServiceDetailView extends DeesElement {
         </div>
 
         <div class="sidebar">
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title">Live stats</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Live stats</span>
+              </div>
             </div>
             <div class="card-content">
               <div class="stats-grid">
@@ -598,13 +666,13 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">Actions</div>
-                <div class="card-subtitle">Manage service state</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Actions</span>
+                <span class="card-subtitle">Manage service state</span>
               </div>
             </div>
             <div class="card-content">
@@ -624,13 +692,13 @@ export class SzServiceDetailView extends DeesElement {
                 <button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">Image Source</div>
-                <div class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Image Source</span>
+                <span class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</span>
               </div>
             </div>
             <div class="card-content">
@@ -649,21 +717,14 @@ export class SzServiceDetailView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </dees-tile>
 
-          <div class="card">
-            <div class="card-header">
-              <div>
-                <div class="card-title">Backups</div>
-                <div class="card-subtitle">Create and manage service backups</div>
+          <dees-tile>
+            <div slot="header" class="card-header">
+              <div class="card-heading">
+                <span class="card-title">Backups</span>
+                <span class="card-subtitle">Create and manage service backups</span>
               </div>
-              <button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleCreateBackup()}>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
-                  <line x1="12" y1="5" x2="12" y2="19"></line>
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
-                </svg>
-                Create Backup
-              </button>
             </div>
             <div class="card-content">
               <div class="backup-list">
@@ -698,7 +759,16 @@ export class SzServiceDetailView extends DeesElement {
                 `)}
               </div>
             </div>
-          </div>
+            <div slot="footer" class="card-footer">
+              <button class="tile-button primary" @click=${() => this.handleCreateBackup()}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                Create Backup
+              </button>
+            </div>
+          </dees-tile>
         </div>
       </div>
     `;
diff --git a/ts_web/elements/sz-services-backups-view.ts b/ts_web/elements/sz-services-backups-view.ts
index c6d9641..5f48244 100644
--- a/ts_web/elements/sz-services-backups-view.ts
+++ b/ts_web/elements/sz-services-backups-view.ts
@@ -65,71 +65,94 @@ export class SzServicesBackupsView extends DeesElement {
         display: block;
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .section-info {
+      .section-heading {
+        flex: 1;
         display: flex;
-        flex-direction: column;
-        gap: 4px;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .header-actions {
+      .section-footer {
         display: flex;
-        gap: 8px;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .action-button {
-        display: inline-flex;
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
         align-items: center;
         gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        cursor: pointer;
-        transition: all 200ms ease;
       }
 
-      .action-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      .tile-button:first-child {
+        border-left: none;
       }
 
-      .action-button.primary {
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
-        border: none;
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
-      .action-button.primary:hover {
-        opacity: 0.9;
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .table-header {
@@ -253,28 +276,11 @@ export class SzServicesBackupsView extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
-        <div class="section-header">
-          <div class="section-info">
-            <div class="section-title">Backup Schedules</div>
-            <div class="section-subtitle">Configure automated backup schedules for your services</div>
-          </div>
-          <div class="header-actions">
-            <button class="action-button" @click=${() => this.handleImport()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                <polyline points="17 8 12 3 7 8"/>
-                <line x1="12" y1="3" x2="12" y2="15"/>
-              </svg>
-              Import Backup
-            </button>
-            <button class="action-button primary" @click=${() => this.handleCreateSchedule()}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-              Create Schedule
-            </button>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Backup Schedules</span>
+            <span class="section-subtitle">Configure automated backup schedules for your services</span>
           </div>
         </div>
         <div class="table-header schedules-header">
@@ -318,13 +324,30 @@ export class SzServicesBackupsView extends DeesElement {
             </span>
           </div>
         `)}
-      </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleImport()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="17 8 12 3 7 8"/>
+              <line x1="12" y1="3" x2="12" y2="15"/>
+            </svg>
+            Import Backup
+          </button>
+          <button class="tile-button primary" @click=${() => this.handleCreateSchedule()}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            Create Schedule
+          </button>
+        </div>
+      </dees-tile>
 
-      <div class="section">
-        <div class="section-header">
-          <div class="section-info">
-            <div class="section-title">All Backups</div>
-            <div class="section-subtitle">Browse and manage all backups across services</div>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">All Backups</span>
+            <span class="section-subtitle">Browse and manage all backups across services</span>
           </div>
         </div>
         <div class="table-header backups-header">
@@ -358,7 +381,7 @@ export class SzServicesBackupsView extends DeesElement {
             </span>
           </div>
         `)}
-      </div>
+      </dees-tile>
     `;
   }
 
diff --git a/ts_web/elements/sz-settings-view.ts b/ts_web/elements/sz-settings-view.ts
index 898fed4..19bb29f 100644
--- a/ts_web/elements/sz-settings-view.ts
+++ b/ts_web/elements/sz-settings-view.ts
@@ -72,28 +72,98 @@ export class SzSettingsView extends DeesElement {
         display: block;
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        padding: 20px;
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
       }
 
       .section-header {
-        margin-bottom: 16px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .section-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-top: 2px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .section-content {
+        padding: 20px;
+      }
+
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .form-group {
@@ -224,161 +294,151 @@ export class SzSettingsView extends DeesElement {
         margin-bottom: 4px;
       }
 
-      .actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 12px;
-        padding-top: 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        margin-top: 24px;
-      }
-
-      .button {
-        padding: 10px 20px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .button.secondary {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-      }
-
-      .button.secondary:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-
-      .button.primary {
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border: none;
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
-      }
-
-      .button.primary:hover {
-        opacity: 0.9;
-      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">Appearance</div>
-          <div class="section-subtitle">Customize the look and feel</div>
-        </div>
-        <div class="form-row">
-          <div class="form-label-group">
-            <span class="form-label">Dark Mode</span>
-            <span class="form-hint">Toggle dark mode on or off</span>
-          </div>
-          <div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
-        </div>
-      </div>
-
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">Cloudflare Integration</div>
-          <div class="section-subtitle">Configure Cloudflare API for DNS management</div>
-        </div>
-        <div class="input-group">
-          <div class="form-group">
-            <div class="field-label">API Token</div>
-            <input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
-          </div>
-          <div class="form-group">
-            <div class="field-label">Zone ID (Optional)</div>
-            <input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
-          </div>
-          <div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
-        </div>
-      </div>
-
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">SSL/TLS Settings</div>
-          <div class="section-subtitle">Configure certificate management</div>
-        </div>
-        <div class="form-row">
-          <div class="form-label-group">
-            <span class="form-label">Auto-Renew Certificates</span>
-            <span class="form-hint">Automatically renew certificates before expiry</span>
-          </div>
-          <div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
-        </div>
-        <div class="form-group" style="margin-top: 16px;">
-          <div class="field-label">Renewal Threshold (days)</div>
-          <input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
-          <div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
-        </div>
-        <div class="form-group">
-          <div class="field-label">ACME Email</div>
-          <input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
-          <div class="form-hint">Email address for Let's Encrypt notifications.</div>
-        </div>
-      </div>
-
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">Network Settings</div>
-          <div class="section-subtitle">Configure network and proxy settings</div>
-        </div>
-        <div class="input-row">
-          <div class="form-group">
-            <div class="field-label">HTTP Port</div>
-            <input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
-          </div>
-          <div class="form-group">
-            <div class="field-label">HTTPS Port</div>
-            <input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Appearance</span>
+            <span class="section-subtitle">Customize the look and feel</span>
           </div>
         </div>
-        <div class="form-row">
-          <div class="form-label-group">
-            <span class="form-label">Force HTTPS</span>
-            <span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
-          </div>
-          <div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
-        </div>
-      </div>
-
-      <div class="section">
-        <div class="section-header">
-          <div class="section-title">Account</div>
-          <div class="section-subtitle">Manage your account settings</div>
-        </div>
-        <div class="form-group">
-          <div class="field-label">Current User</div>
-          <div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
-        </div>
-        <div class="password-section">
-          <div class="password-title">Change Password</div>
-          <div class="password-fields">
-            <div>
-              <div class="field-label">Current Password</div>
-              <input type="password" id="currentPassword">
+        <div class="section-content">
+          <div class="form-row">
+            <div class="form-label-group">
+              <span class="form-label">Dark Mode</span>
+              <span class="form-hint">Toggle dark mode on or off</span>
             </div>
-            <div>
-              <div class="field-label">New Password</div>
-              <input type="password" id="newPassword">
-            </div>
-            <div>
-              <div class="field-label">Confirm Password</div>
-              <input type="password" id="confirmPassword">
-            </div>
-            <button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
+            <div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
           </div>
         </div>
-      </div>
+      </dees-tile>
 
-      <div class="actions">
-        <button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
-        <button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
-      </div>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Cloudflare Integration</span>
+            <span class="section-subtitle">Configure Cloudflare API for DNS management</span>
+          </div>
+        </div>
+        <div class="section-content">
+          <div class="input-group">
+            <div class="form-group">
+              <div class="field-label">API Token</div>
+              <input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
+            </div>
+            <div class="form-group">
+              <div class="field-label">Zone ID (Optional)</div>
+              <input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
+            </div>
+            <div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
+          </div>
+        </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">SSL/TLS Settings</span>
+            <span class="section-subtitle">Configure certificate management</span>
+          </div>
+        </div>
+        <div class="section-content">
+          <div class="form-row">
+            <div class="form-label-group">
+              <span class="form-label">Auto-Renew Certificates</span>
+              <span class="form-hint">Automatically renew certificates before expiry</span>
+            </div>
+            <div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
+          </div>
+          <div class="form-group" style="margin-top: 16px;">
+            <div class="field-label">Renewal Threshold (days)</div>
+            <input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
+            <div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
+          </div>
+          <div class="form-group">
+            <div class="field-label">ACME Email</div>
+            <input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
+            <div class="form-hint">Email address for Let's Encrypt notifications.</div>
+          </div>
+        </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Network Settings</span>
+            <span class="section-subtitle">Configure network and proxy settings</span>
+          </div>
+        </div>
+        <div class="section-content">
+          <div class="input-row">
+            <div class="form-group">
+              <div class="field-label">HTTP Port</div>
+              <input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
+            </div>
+            <div class="form-group">
+              <div class="field-label">HTTPS Port</div>
+              <input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-label-group">
+              <span class="form-label">Force HTTPS</span>
+              <span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
+            </div>
+            <div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
+          </div>
+        </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Account</span>
+            <span class="section-subtitle">Manage your account settings</span>
+          </div>
+        </div>
+        <div class="section-content">
+          <div class="form-group">
+            <div class="field-label">Current User</div>
+            <div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
+          </div>
+          <div class="password-section">
+            <div class="password-title">Change Password</div>
+            <div class="password-fields">
+              <div>
+                <div class="field-label">Current Password</div>
+                <input type="password" id="currentPassword">
+              </div>
+              <div>
+                <div class="field-label">New Password</div>
+                <input type="password" id="newPassword">
+              </div>
+              <div>
+                <div class="field-label">Confirm Password</div>
+                <input type="password" id="confirmPassword">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
+        </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div class="section-content" style="padding: 12px 16px; text-align: center; color: var(--dees-color-text-muted); font-size: 12px;">
+          Save your changes or reset to defaults.
+        </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button" @click=${() => this.handleReset()}>Reset</button>
+          <button class="tile-button primary" @click=${() => this.handleSave()}>Save Settings</button>
+        </div>
+      </dees-tile>
     `;
   }
 
diff --git a/ts_web/elements/sz-stat-card.ts b/ts_web/elements/sz-stat-card.ts
deleted file mode 100644
index 3805daf..0000000
--- a/ts_web/elements/sz-stat-card.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import {
-  DeesElement,
-  customElement,
-  html,
-  css,
-  cssManager,
-  property,
-  type TemplateResult,
-} from '@design.estate/dees-element';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sz-stat-card': SzStatCard;
-  }
-}
-
-@customElement('sz-stat-card')
-export class SzStatCard extends DeesElement {
-  public static demo = () => html`
-    <style>
-      .demo-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        padding: 24px;
-        max-width: 800px;
-      }
-    </style>
-    <div class="demo-grid">
-      <sz-stat-card
-        label="Total Services"
-        value="7"
-        icon="server"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Running"
-        value="7"
-        icon="check"
-        variant="success"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Stopped"
-        value="0"
-        icon="stop"
-      ></sz-stat-card>
-      <sz-stat-card
-        label="Docker"
-        value="Running"
-        icon="container"
-        variant="success"
-        valueBadge
-      ></sz-stat-card>
-    </div>
-  `;
-
-  public static demoGroups = ['Dashboard'];
-
-  @property({ type: String })
-  public accessor label: string = '';
-
-  @property({ type: String })
-  public accessor value: string = '';
-
-  @property({ type: String })
-  public accessor icon: string = '';
-
-  @property({ type: String })
-  public accessor variant: 'default' | 'success' | 'warning' | 'error' = 'default';
-
-  @property({ type: Boolean })
-  public accessor valueBadge: boolean = false;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      .card {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        padding: 20px;
-        transition: all 200ms ease;
-        height: 100%;
-        box-sizing: border-box;
-      }
-
-      .card:hover {
-        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
-        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.2)')};
-      }
-
-      .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-      }
-
-      .label {
-        font-size: 14px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-
-      .icon {
-        width: 20px;
-        height: 20px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-
-      .value {
-        font-size: 28px;
-        font-weight: 700;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        line-height: 1.2;
-      }
-
-      .value.success {
-        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
-      }
-
-      .value.warning {
-        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
-      }
-
-      .value.error {
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        padding: 4px 12px;
-        border-radius: 9999px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      .badge.success {
-        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
-        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
-      }
-
-      .badge.warning {
-        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
-        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
-      }
-
-      .badge.error {
-        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
-        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
-      }
-
-      .badge.default {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    const valueClass = this.valueBadge ? `badge ${this.variant}` : `value ${this.variant}`;
-
-    return html`
-      <div class="card">
-        <div class="header">
-          <span class="label">${this.label}</span>
-          ${this.renderIcon()}
-        </div>
-        <div class="${valueClass}">${this.value}</div>
-      </div>
-    `;
-  }
-
-  private renderIcon(): TemplateResult {
-    const icons: Record<string, TemplateResult> = {
-      server: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
-      check: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
-      stop: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>`,
-      container: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>`,
-    };
-
-    return icons[this.icon] || html``;
-  }
-}
diff --git a/ts_web/elements/sz-status-grid-cluster.ts b/ts_web/elements/sz-status-grid-cluster.ts
index a3c71b6..a5078b4 100644
--- a/ts_web/elements/sz-status-grid-cluster.ts
+++ b/ts_web/elements/sz-status-grid-cluster.ts
@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
-import './sz-stat-card.js';
+import type { IStatsTile } from '@design.estate/dees-catalog';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -54,54 +53,51 @@ export class SzStatusGridCluster extends DeesElement {
       :host {
         display: block;
       }
-
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        align-items: stretch;
-      }
-
-      .grid > * {
-        height: 100%;
-      }
-
-      @media (min-width: 768px) {
-        .grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Services',
+        value: this.stats.totalServices,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+      {
+        id: 'running',
+        title: 'Running',
+        value: this.stats.running,
+        type: 'number',
+        icon: 'lucide:check',
+        color: '#22c55e',
+      },
+      {
+        id: 'stopped',
+        title: 'Stopped',
+        value: this.stats.stopped,
+        type: 'number',
+        icon: 'lucide:circleStop',
+        color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'docker',
+        title: 'Docker',
+        value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:container',
+        color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
-      <div class="grid">
-        <sz-stat-card
-          label="Total Services"
-          value="${this.stats.totalServices}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Running"
-          value="${this.stats.running}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Stopped"
-          value="${this.stats.stopped}"
-          icon="stop"
-          variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Docker"
-          value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
-          icon="container"
-          variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
-          valueBadge
-        ></sz-stat-card>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
     `;
   }
 }
diff --git a/ts_web/elements/sz-tokens-view.ts b/ts_web/elements/sz-tokens-view.ts
index 15fd35f..e1b01b0 100644
--- a/ts_web/elements/sz-tokens-view.ts
+++ b/ts_web/elements/sz-tokens-view.ts
@@ -55,56 +55,94 @@ export class SzTokensView extends DeesElement {
         display: block;
       }
 
-      .section {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
-        overflow: hidden;
       }
 
       .section-header {
+        height: 36px;
         display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        padding: 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .section-info {
+      .section-heading {
+        flex: 1;
         display: flex;
-        flex-direction: column;
-        gap: 4px;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .section-subtitle {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .create-button {
-        display: inline-flex;
+      .section-footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
         align-items: center;
         gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        border: none;
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
-        cursor: pointer;
-        transition: all 200ms ease;
       }
 
-      .create-button:hover {
-        opacity: 0.9;
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       .token-list {
@@ -192,45 +230,18 @@ export class SzTokensView extends DeesElement {
       .empty-text {
         font-size: 14px;
         color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-        margin-bottom: 16px;
-      }
-
-      .empty-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px 14px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 6px;
-        font-size: 13px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        cursor: pointer;
-        transition: all 200ms ease;
-      }
-
-      .empty-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="section">
-        <div class="section-header">
-          <div class="section-info">
-            <div class="section-title">Global Tokens</div>
-            <div class="section-subtitle">Tokens that can push images to multiple services</div>
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">Global Tokens</span>
+            <span class="section-subtitle">Tokens that can push images to multiple services</span>
           </div>
-          <button class="create-button" @click=${() => this.handleCreate('global')}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="12" y1="5" x2="12" y2="19"></line>
-              <line x1="5" y1="12" x2="19" y2="12"></line>
-            </svg>
-            Create Token
-          </button>
         </div>
         ${this.globalTokens.length > 0 ? html`
           <div class="token-list">
@@ -239,25 +250,26 @@ export class SzTokensView extends DeesElement {
         ` : html`
           <div class="empty-state">
             <div class="empty-text">No global tokens created</div>
-            <button class="empty-button" @click=${() => this.handleCreate('global')}>Create Global Token</button>
           </div>
         `}
-      </div>
-
-      <div class="section">
-        <div class="section-header">
-          <div class="section-info">
-            <div class="section-title">CI Tokens (Service-specific)</div>
-            <div class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</div>
-          </div>
-          <button class="create-button" @click=${() => this.handleCreate('ci')}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <div slot="footer" class="section-footer">
+          <button class="tile-button primary" @click=${() => this.handleCreate('global')}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <line x1="12" y1="5" x2="12" y2="19"></line>
               <line x1="5" y1="12" x2="19" y2="12"></line>
             </svg>
             Create Token
           </button>
         </div>
+      </dees-tile>
+
+      <dees-tile>
+        <div slot="header" class="section-header">
+          <div class="section-heading">
+            <span class="section-title">CI Tokens (Service-specific)</span>
+            <span class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</span>
+          </div>
+        </div>
         ${this.ciTokens.length > 0 ? html`
           <div class="token-list">
             ${this.ciTokens.map(token => this.renderToken(token))}
@@ -265,10 +277,18 @@ export class SzTokensView extends DeesElement {
         ` : html`
           <div class="empty-state">
             <div class="empty-text">No CI tokens created</div>
-            <button class="empty-button" @click=${() => this.handleCreate('ci')}>Create CI Token</button>
           </div>
         `}
-      </div>
+        <div slot="footer" class="section-footer">
+          <button class="tile-button primary" @click=${() => this.handleCreate('ci')}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+            Create Token
+          </button>
+        </div>
+      </dees-tile>
     `;
   }