diff --git a/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.demo.ts b/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.demo.ts
new file mode 100644
index 0000000..26ae86d
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.demo.ts
@@ -0,0 +1,21 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      width: 100%;
+      height: 600px;
+      background: hsl(240 10% 4%);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  </style>
+  <div class="demo-container">
+    <eco-peripherals
+      .activeCategory=${'all'}
+      @device-select=${(e: CustomEvent) => console.log('Device selected:', e.detail)}
+      @scan-start=${() => console.log('Scanning started')}
+      @scan-complete=${() => console.log('Scanning complete')}
+    ></eco-peripherals>
+  </div>
+`;
diff --git a/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.ts b/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.ts
new file mode 100644
index 0000000..f70df0c
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-peripherals/eco-peripherals.ts
@@ -0,0 +1,840 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
+import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../interfaces/secondarymenu.js';
+import { demo } from './eco-peripherals.demo.js';
+
+// Ensure components are registered
+DeesAppuiSecondarymenu;
+DeesIcon;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'eco-peripherals': EcoPeripherals;
+  }
+}
+
+export type TPeripheralCategory =
+  | 'all'
+  | 'printers'
+  | 'scanners'
+  | 'speakers'
+  | 'storage'
+  | 'power'
+  | 'cameras'
+  | 'streaming'
+  | 'usb';
+
+export type TConnectionType = 'network' | 'usb' | 'bluetooth';
+
+export interface IPeripheralDevice {
+  id: string;
+  name: string;
+  type: TPeripheralCategory;
+  connectionType: TConnectionType;
+  status: 'online' | 'offline' | 'busy' | 'error';
+  ip?: string;
+  manufacturer?: string;
+  model?: string;
+  isDefault?: boolean;
+}
+
+@customElement('eco-peripherals')
+export class EcoPeripherals extends DeesElement {
+  public static demo = demo;
+  public static demoGroup = 'App Launcher';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      }
+
+      .peripherals-container {
+        display: flex;
+        height: 100%;
+      }
+
+      dees-appui-secondarymenu {
+        flex-shrink: 0;
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
+      }
+
+      .content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 32px 48px;
+      }
+
+      .panel-header {
+        margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .panel-header-left {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .panel-title {
+        font-size: 28px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+      }
+
+      .panel-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .scan-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 20px;
+        background: hsl(217 91% 60%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .scan-button:hover {
+        background: hsl(217 91% 55%);
+      }
+
+      .scan-button.scanning {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        cursor: not-allowed;
+      }
+
+      .scan-button.scanning dees-icon {
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .device-section {
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+        border-radius: 12px;
+        margin-bottom: 24px;
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+      }
+
+      .section-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .device-count {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 20%)')};
+        padding: 2px 8px;
+        border-radius: 10px;
+      }
+
+      .device-list {
+        padding: 8px 0;
+      }
+
+      .device-item {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 14px 20px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .device-item:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
+      }
+
+      .device-icon-wrapper {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 18%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+      }
+
+      .device-icon-wrapper.online {
+        background: ${cssManager.bdTheme('hsl(142 71% 93%)', 'hsl(142 71% 45% / 0.15)')};
+        color: hsl(142 71% 35%);
+      }
+
+      .device-icon-wrapper.busy {
+        background: ${cssManager.bdTheme('hsl(47 100% 93%)', 'hsl(47 100% 50% / 0.15)')};
+        color: hsl(47 100% 40%);
+      }
+
+      .device-icon-wrapper.error {
+        background: ${cssManager.bdTheme('hsl(0 72% 93%)', 'hsl(0 72% 51% / 0.15)')};
+        color: hsl(0 72% 45%);
+      }
+
+      .device-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .device-name {
+        font-size: 15px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .default-badge {
+        font-size: 10px;
+        font-weight: 600;
+        color: hsl(217 91% 60%);
+        background: ${cssManager.bdTheme('hsl(217 91% 95%)', 'hsl(217 91% 60% / 0.15)')};
+        padding: 2px 6px;
+        border-radius: 4px;
+        text-transform: uppercase;
+      }
+
+      .device-details {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+        margin-top: 2px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .device-detail {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .status-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-indicator.online {
+        background: hsl(142 71% 45%);
+      }
+
+      .status-indicator.offline {
+        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 40%)')};
+      }
+
+      .status-indicator.busy {
+        background: hsl(47 100% 50%);
+      }
+
+      .status-indicator.error {
+        background: hsl(0 72% 51%);
+      }
+
+      .device-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .action-button {
+        padding: 8px 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        border-radius: 6px;
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+        font-size: 13px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 18%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(240 5% 35%)')};
+      }
+
+      .action-button.primary {
+        background: hsl(217 91% 60%);
+        border-color: hsl(217 91% 60%);
+        color: white;
+      }
+
+      .action-button.primary:hover {
+        background: hsl(217 91% 55%);
+      }
+
+      .empty-state {
+        padding: 48px 20px;
+        text-align: center;
+      }
+
+      .empty-icon {
+        color: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 35%)')};
+        margin-bottom: 16px;
+      }
+
+      .empty-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
+        margin-bottom: 8px;
+      }
+
+      .empty-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+      }
+
+      .connection-type {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 20%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+    `,
+  ];
+
+  @property({ type: String })
+  accessor activeCategory: TPeripheralCategory = 'all';
+
+  @state()
+  accessor isScanning = false;
+
+  @state()
+  accessor devices: IPeripheralDevice[] = [
+    // Mock printers
+    {
+      id: 'printer-1',
+      name: 'HP LaserJet Pro',
+      type: 'printers',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.50',
+      manufacturer: 'HP',
+      model: 'LaserJet Pro M404n',
+      isDefault: true,
+    },
+    {
+      id: 'printer-2',
+      name: 'Brother MFC-L2750DW',
+      type: 'printers',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.51',
+      manufacturer: 'Brother',
+      model: 'MFC-L2750DW',
+    },
+    {
+      id: 'printer-3',
+      name: 'Canon PIXMA',
+      type: 'printers',
+      connectionType: 'usb',
+      status: 'offline',
+      manufacturer: 'Canon',
+      model: 'PIXMA TR8620',
+    },
+    // Mock scanners
+    {
+      id: 'scanner-1',
+      name: 'Epson Perfection V600',
+      type: 'scanners',
+      connectionType: 'usb',
+      status: 'online',
+      manufacturer: 'Epson',
+      model: 'Perfection V600',
+    },
+    // Mock speakers
+    {
+      id: 'speaker-1',
+      name: 'Sonos One',
+      type: 'speakers',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.60',
+      manufacturer: 'Sonos',
+      model: 'One (Gen 2)',
+    },
+    {
+      id: 'speaker-2',
+      name: 'HomePod mini',
+      type: 'speakers',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.61',
+      manufacturer: 'Apple',
+      model: 'HomePod mini',
+    },
+    // Mock NAS
+    {
+      id: 'nas-1',
+      name: 'Synology DS920+',
+      type: 'storage',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.100',
+      manufacturer: 'Synology',
+      model: 'DS920+',
+    },
+    // Mock UPS
+    {
+      id: 'ups-1',
+      name: 'APC Back-UPS Pro',
+      type: 'power',
+      connectionType: 'usb',
+      status: 'online',
+      manufacturer: 'APC',
+      model: 'Back-UPS Pro 1500',
+    },
+    // Mock cameras
+    {
+      id: 'camera-1',
+      name: 'Logitech C920',
+      type: 'cameras',
+      connectionType: 'usb',
+      status: 'online',
+      manufacturer: 'Logitech',
+      model: 'C920 HD Pro',
+      isDefault: true,
+    },
+    {
+      id: 'camera-2',
+      name: 'Ring Indoor Cam',
+      type: 'cameras',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.70',
+      manufacturer: 'Ring',
+      model: 'Indoor Cam',
+    },
+    // Mock streaming devices
+    {
+      id: 'streaming-1',
+      name: 'Living Room Apple TV',
+      type: 'streaming',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.80',
+      manufacturer: 'Apple',
+      model: 'Apple TV 4K',
+    },
+    {
+      id: 'streaming-2',
+      name: 'Bedroom Chromecast',
+      type: 'streaming',
+      connectionType: 'network',
+      status: 'online',
+      ip: '192.168.1.81',
+      manufacturer: 'Google',
+      model: 'Chromecast with Google TV',
+    },
+    // Mock USB devices
+    {
+      id: 'usb-1',
+      name: 'SanDisk Ultra',
+      type: 'usb',
+      connectionType: 'usb',
+      status: 'online',
+      manufacturer: 'SanDisk',
+      model: 'Ultra USB 3.0 128GB',
+    },
+  ];
+
+  private getMenuGroups(): ISecondaryMenuGroup[] {
+    const allCount = this.devices.length;
+    const getCount = (type: TPeripheralCategory) =>
+      this.devices.filter(d => d.type === type).length;
+
+    return [
+      {
+        name: 'Devices',
+        iconName: 'lucide:monitor',
+        items: [
+          {
+            key: 'all',
+            iconName: 'lucide:layoutGrid',
+            action: () => this.activeCategory = 'all',
+            badge: allCount,
+          },
+        ],
+      },
+      {
+        name: 'Output',
+        iconName: 'lucide:printer',
+        items: [
+          {
+            key: 'printers',
+            iconName: 'lucide:printer',
+            action: () => this.activeCategory = 'printers',
+            badge: getCount('printers') || undefined,
+          },
+          {
+            key: 'speakers',
+            iconName: 'lucide:speaker',
+            action: () => this.activeCategory = 'speakers',
+            badge: getCount('speakers') || undefined,
+          },
+        ],
+      },
+      {
+        name: 'Input',
+        iconName: 'lucide:scan',
+        items: [
+          {
+            key: 'scanners',
+            iconName: 'lucide:scan',
+            action: () => this.activeCategory = 'scanners',
+            badge: getCount('scanners') || undefined,
+          },
+          {
+            key: 'cameras',
+            iconName: 'lucide:camera',
+            action: () => this.activeCategory = 'cameras',
+            badge: getCount('cameras') || undefined,
+          },
+        ],
+      },
+      {
+        name: 'Network',
+        iconName: 'lucide:network',
+        items: [
+          {
+            key: 'storage',
+            iconName: 'lucide:hardDrive',
+            action: () => this.activeCategory = 'storage',
+            badge: getCount('storage') || undefined,
+          },
+          {
+            key: 'streaming',
+            iconName: 'lucide:cast',
+            action: () => this.activeCategory = 'streaming',
+            badge: getCount('streaming') || undefined,
+          },
+        ],
+      },
+      {
+        name: 'Other',
+        iconName: 'lucide:plug',
+        items: [
+          {
+            key: 'power',
+            iconName: 'lucide:batteryCharging',
+            action: () => this.activeCategory = 'power',
+            badge: getCount('power') || undefined,
+          },
+          {
+            key: 'usb',
+            iconName: 'lucide:usb',
+            action: () => this.activeCategory = 'usb',
+            badge: getCount('usb') || undefined,
+          },
+        ],
+      },
+    ];
+  }
+
+  private getSelectedItem(): ISecondaryMenuItem | null {
+    for (const group of this.getMenuGroups()) {
+      for (const item of group.items) {
+        if ('key' in item && item.key === this.activeCategory) {
+          return item;
+        }
+      }
+    }
+    return null;
+  }
+
+  private getFilteredDevices(): IPeripheralDevice[] {
+    if (this.activeCategory === 'all') {
+      return this.devices;
+    }
+    return this.devices.filter(d => d.type === this.activeCategory);
+  }
+
+  private getCategoryTitle(): string {
+    const titles: Record<TPeripheralCategory, string> = {
+      all: 'All Devices',
+      printers: 'Printers',
+      scanners: 'Scanners',
+      speakers: 'Speakers',
+      storage: 'Network Storage',
+      power: 'Power Devices',
+      cameras: 'Cameras',
+      streaming: 'Streaming Devices',
+      usb: 'USB Devices',
+    };
+    return titles[this.activeCategory];
+  }
+
+  private getCategoryDescription(): string {
+    const descriptions: Record<TPeripheralCategory, string> = {
+      all: 'View and manage all connected peripherals',
+      printers: 'Manage printers and print queues',
+      scanners: 'Configure scanners and scanning options',
+      speakers: 'Network speakers and audio devices',
+      storage: 'NAS devices and network storage',
+      power: 'UPS and power management devices',
+      cameras: 'Webcams and security cameras',
+      streaming: 'Apple TV, Chromecast, and streaming devices',
+      usb: 'USB storage and connected devices',
+    };
+    return descriptions[this.activeCategory];
+  }
+
+  private getDeviceIcon(device: IPeripheralDevice): string {
+    const icons: Record<TPeripheralCategory, string> = {
+      all: 'lucide:monitor',
+      printers: 'lucide:printer',
+      scanners: 'lucide:scan',
+      speakers: 'lucide:speaker',
+      storage: 'lucide:hardDrive',
+      power: 'lucide:batteryCharging',
+      cameras: 'lucide:camera',
+      streaming: 'lucide:cast',
+      usb: 'lucide:usb',
+    };
+    return icons[device.type];
+  }
+
+  private getConnectionIcon(type: TConnectionType): string {
+    const icons: Record<TConnectionType, string> = {
+      network: 'lucide:wifi',
+      usb: 'lucide:usb',
+      bluetooth: 'lucide:bluetooth',
+    };
+    return icons[type];
+  }
+
+  private async handleScan(): Promise<void> {
+    if (this.isScanning) return;
+
+    this.isScanning = true;
+    this.dispatchEvent(new CustomEvent('scan-start', {
+      bubbles: true,
+      composed: true,
+    }));
+
+    // Simulate scanning
+    await new Promise(resolve => setTimeout(resolve, 3000));
+
+    this.isScanning = false;
+    this.dispatchEvent(new CustomEvent('scan-complete', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleDeviceClick(device: IPeripheralDevice): void {
+    this.dispatchEvent(new CustomEvent('device-select', {
+      detail: { device },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handleSetDefault(device: IPeripheralDevice, e: Event): void {
+    e.stopPropagation();
+    this.devices = this.devices.map(d => ({
+      ...d,
+      isDefault: d.type === device.type ? d.id === device.id : d.isDefault,
+    }));
+    this.dispatchEvent(new CustomEvent('device-set-default', {
+      detail: { device },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="peripherals-container">
+        <dees-appui-secondarymenu
+          .heading=${'Peripherals'}
+          .groups=${this.getMenuGroups()}
+          .selectedItem=${this.getSelectedItem()}
+        ></dees-appui-secondarymenu>
+        <div class="content">
+          ${this.renderContent()}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderContent(): TemplateResult {
+    const devices = this.getFilteredDevices();
+
+    return html`
+      <div class="panel-header">
+        <div class="panel-header-left">
+          <div class="panel-title">${this.getCategoryTitle()}</div>
+          <div class="panel-description">${this.getCategoryDescription()}</div>
+        </div>
+        <button
+          class="scan-button ${this.isScanning ? 'scanning' : ''}"
+          @click=${this.handleScan}
+          ?disabled=${this.isScanning}
+        >
+          <dees-icon .icon=${this.isScanning ? 'lucide:loader2' : 'lucide:radar'} .iconSize=${16}></dees-icon>
+          ${this.isScanning ? 'Scanning...' : 'Scan for Devices'}
+        </button>
+      </div>
+
+      ${this.activeCategory === 'all'
+        ? this.renderGroupedDevices(devices)
+        : this.renderDeviceList(devices)
+      }
+    `;
+  }
+
+  private renderGroupedDevices(devices: IPeripheralDevice[]): TemplateResult {
+    const groups = new Map<TPeripheralCategory, IPeripheralDevice[]>();
+
+    for (const device of devices) {
+      const existing = groups.get(device.type) || [];
+      existing.push(device);
+      groups.set(device.type, existing);
+    }
+
+    const categoryLabels: Record<TPeripheralCategory, string> = {
+      all: 'All',
+      printers: 'Printers',
+      scanners: 'Scanners',
+      speakers: 'Speakers',
+      storage: 'Network Storage',
+      power: 'Power Devices',
+      cameras: 'Cameras',
+      streaming: 'Streaming',
+      usb: 'USB Devices',
+    };
+
+    return html`
+      ${Array.from(groups.entries()).map(([category, categoryDevices]) => html`
+        <div class="device-section">
+          <div class="section-header">
+            <span class="section-title">${categoryLabels[category]}</span>
+            <span class="device-count">${categoryDevices.length}</span>
+          </div>
+          <div class="device-list">
+            ${categoryDevices.map(device => this.renderDeviceItem(device))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderDeviceList(devices: IPeripheralDevice[]): TemplateResult {
+    if (devices.length === 0) {
+      return this.renderEmptyState();
+    }
+
+    return html`
+      <div class="device-section">
+        <div class="section-header">
+          <span class="section-title">Discovered Devices</span>
+          <span class="device-count">${devices.length}</span>
+        </div>
+        <div class="device-list">
+          ${devices.map(device => this.renderDeviceItem(device))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderDeviceItem(device: IPeripheralDevice): TemplateResult {
+    return html`
+      <div class="device-item" @click=${() => this.handleDeviceClick(device)}>
+        <div class="device-icon-wrapper ${device.status}">
+          <dees-icon .icon=${this.getDeviceIcon(device)} .iconSize=${24}></dees-icon>
+        </div>
+        <div class="device-info">
+          <div class="device-name">
+            ${device.name}
+            ${device.isDefault ? html`<span class="default-badge">Default</span>` : ''}
+          </div>
+          <div class="device-details">
+            <div class="device-detail">
+              <span class="status-indicator ${device.status}"></span>
+              ${device.status.charAt(0).toUpperCase() + device.status.slice(1)}
+            </div>
+            ${device.ip ? html`
+              <div class="device-detail">${device.ip}</div>
+            ` : ''}
+            <span class="connection-type">
+              <dees-icon .icon=${this.getConnectionIcon(device.connectionType)} .iconSize=${10}></dees-icon>
+              ${device.connectionType.toUpperCase()}
+            </span>
+          </div>
+        </div>
+        <div class="device-actions">
+          ${!device.isDefault && (device.type === 'printers' || device.type === 'cameras') ? html`
+            <button class="action-button" @click=${(e: Event) => this.handleSetDefault(device, e)}>
+              Set Default
+            </button>
+          ` : ''}
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderEmptyState(): TemplateResult {
+    return html`
+      <div class="device-section">
+        <div class="empty-state">
+          <dees-icon class="empty-icon" .icon=${'lucide:searchX'} .iconSize=${48}></dees-icon>
+          <div class="empty-title">No devices found</div>
+          <div class="empty-description">
+            Click "Scan for Devices" to discover ${this.getCategoryTitle().toLowerCase()} on your network or connected via USB.
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/ts_web/elements/00group-applauncher/eco-peripherals/index.ts b/ts_web/elements/00group-applauncher/eco-peripherals/index.ts
new file mode 100644
index 0000000..030b4cb
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-peripherals/index.ts
@@ -0,0 +1 @@
+export * from './eco-peripherals.js';
diff --git a/ts_web/elements/00group-applauncher/eco-settings/eco-settings.demo.ts b/ts_web/elements/00group-applauncher/eco-settings/eco-settings.demo.ts
new file mode 100644
index 0000000..5acdb55
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-settings/eco-settings.demo.ts
@@ -0,0 +1,18 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => html`
+  <style>
+    .demo-container {
+      width: 100%;
+      height: 600px;
+      background: hsl(240 10% 4%);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  </style>
+  <div class="demo-container">
+    <eco-settings
+      .activePanel=${'general'}
+    ></eco-settings>
+  </div>
+`;
diff --git a/ts_web/elements/00group-applauncher/eco-settings/eco-settings.ts b/ts_web/elements/00group-applauncher/eco-settings/eco-settings.ts
new file mode 100644
index 0000000..4cbf7ae
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-settings/eco-settings.ts
@@ -0,0 +1,1178 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
+import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../interfaces/secondarymenu.js';
+import { demo } from './eco-settings.demo.js';
+
+// Ensure components are registered
+DeesAppuiSecondarymenu;
+DeesIcon;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'eco-settings': EcoSettings;
+  }
+}
+
+export type TSettingsPanel =
+  | 'general'
+  | 'network'
+  | 'bluetooth'
+  | 'display'
+  | 'sound'
+  | 'notifications'
+  | 'privacy'
+  | 'accounts'
+  | 'apps'
+  | 'updates'
+  | 'about';
+
+@customElement('eco-settings')
+export class EcoSettings extends DeesElement {
+  public static demo = demo;
+  public static demoGroup = 'App Launcher';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      }
+
+      .settings-container {
+        display: flex;
+        height: 100%;
+      }
+
+      dees-appui-secondarymenu {
+        flex-shrink: 0;
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
+      }
+
+      .content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 32px 48px;
+      }
+
+      .panel-header {
+        margin-bottom: 32px;
+      }
+
+      .panel-title {
+        font-size: 28px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+        margin-bottom: 8px;
+      }
+
+      .panel-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
+      }
+
+      .settings-section {
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
+        border-radius: 12px;
+        margin-bottom: 24px;
+        overflow: hidden;
+      }
+
+      .section-title {
+        padding: 16px 20px 12px;
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .settings-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 20px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
+        transition: background 0.15s ease;
+      }
+
+      .settings-item:first-child {
+        border-top: none;
+      }
+
+      .settings-item:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
+      }
+
+      .settings-item.clickable {
+        cursor: pointer;
+      }
+
+      .item-left {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+      }
+
+      .item-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+      }
+
+      .item-icon.blue { background: hsl(217 91% 60%); }
+      .item-icon.green { background: hsl(142 71% 45%); }
+      .item-icon.orange { background: hsl(25 95% 53%); }
+      .item-icon.purple { background: hsl(262 83% 58%); }
+      .item-icon.red { background: hsl(0 72% 51%); }
+      .item-icon.teal { background: hsl(175 84% 32%); }
+      .item-icon.gray { background: hsl(220 9% 46%); }
+
+      .item-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .item-label {
+        font-size: 15px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
+      }
+
+      .item-sublabel {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+      }
+
+      .item-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
+      }
+
+      .item-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
+      }
+
+      .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        border-radius: 12px;
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .toggle-switch.active {
+        background: hsl(217 91% 60%);
+      }
+
+      .toggle-switch::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: white;
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
+      }
+
+      .toggle-switch.active::after {
+        transform: translateX(20px);
+      }
+
+      .slider-container {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 200px;
+      }
+
+      .slider {
+        flex: 1;
+        height: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(240 5% 25%)')};
+        border-radius: 2px;
+        position: relative;
+        cursor: pointer;
+      }
+
+      .slider-fill {
+        height: 100%;
+        background: hsl(217 91% 60%);
+        border-radius: 2px;
+      }
+
+      .slider-value {
+        min-width: 36px;
+        text-align: right;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+      }
+
+      select {
+        padding: 8px 32px 8px 12px;
+        font-size: 14px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 90%)')};
+        cursor: pointer;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 10px center;
+      }
+
+      select:focus {
+        outline: none;
+        border-color: hsl(217 91% 60%);
+      }
+    `,
+  ];
+
+  @property({ type: String })
+  accessor activePanel: TSettingsPanel = 'general';
+
+  @state()
+  accessor wifiEnabled = true;
+
+  @state()
+  accessor bluetoothEnabled = true;
+
+  @state()
+  accessor darkMode = true;
+
+  @state()
+  accessor notificationsEnabled = true;
+
+  @state()
+  accessor soundEnabled = true;
+
+  @state()
+  accessor brightness = 80;
+
+  @state()
+  accessor volume = 70;
+
+  private getMenuGroups(): ISecondaryMenuGroup[] {
+    return [
+      {
+        name: 'System',
+        iconName: 'lucide:settings',
+        items: [
+          {
+            key: 'general',
+            iconName: 'lucide:settings',
+            action: () => this.activePanel = 'general',
+          },
+          {
+            key: 'display',
+            iconName: 'lucide:monitor',
+            action: () => this.activePanel = 'display',
+          },
+          {
+            key: 'sound',
+            iconName: 'lucide:volume2',
+            action: () => this.activePanel = 'sound',
+          },
+          {
+            key: 'notifications',
+            iconName: 'lucide:bell',
+            action: () => this.activePanel = 'notifications',
+          },
+        ],
+      },
+      {
+        name: 'Network',
+        iconName: 'lucide:wifi',
+        items: [
+          {
+            key: 'network',
+            iconName: 'lucide:wifi',
+            action: () => this.activePanel = 'network',
+          },
+          {
+            key: 'bluetooth',
+            iconName: 'lucide:bluetooth',
+            action: () => this.activePanel = 'bluetooth',
+          },
+        ],
+      },
+      {
+        name: 'Personal',
+        iconName: 'lucide:user',
+        items: [
+          {
+            key: 'accounts',
+            iconName: 'lucide:user',
+            action: () => this.activePanel = 'accounts',
+          },
+          {
+            key: 'privacy',
+            iconName: 'lucide:shield',
+            action: () => this.activePanel = 'privacy',
+          },
+        ],
+      },
+      {
+        name: 'System Info',
+        iconName: 'lucide:info',
+        items: [
+          {
+            key: 'apps',
+            iconName: 'lucide:layoutGrid',
+            action: () => this.activePanel = 'apps',
+          },
+          {
+            key: 'updates',
+            iconName: 'lucide:download',
+            action: () => this.activePanel = 'updates',
+          },
+          {
+            key: 'about',
+            iconName: 'lucide:info',
+            action: () => this.activePanel = 'about',
+          },
+        ],
+      },
+    ];
+  }
+
+  private getSelectedItem(): ISecondaryMenuItem | null {
+    for (const group of this.getMenuGroups()) {
+      for (const item of group.items) {
+        if ('key' in item && item.key === this.activePanel) {
+          return item;
+        }
+      }
+    }
+    return null;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="settings-container">
+        <dees-appui-secondarymenu
+          .heading=${'Settings'}
+          .groups=${this.getMenuGroups()}
+          .selectedItem=${this.getSelectedItem()}
+        ></dees-appui-secondarymenu>
+        <div class="content">
+          ${this.renderActivePanel()}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderActivePanel(): TemplateResult {
+    switch (this.activePanel) {
+      case 'general':
+        return this.renderGeneralPanel();
+      case 'network':
+        return this.renderNetworkPanel();
+      case 'bluetooth':
+        return this.renderBluetoothPanel();
+      case 'display':
+        return this.renderDisplayPanel();
+      case 'sound':
+        return this.renderSoundPanel();
+      case 'notifications':
+        return this.renderNotificationsPanel();
+      case 'privacy':
+        return this.renderPrivacyPanel();
+      case 'accounts':
+        return this.renderAccountsPanel();
+      case 'apps':
+        return this.renderAppsPanel();
+      case 'updates':
+        return this.renderUpdatesPanel();
+      case 'about':
+        return this.renderAboutPanel();
+      default:
+        return this.renderGeneralPanel();
+    }
+  }
+
+  private renderGeneralPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">General</div>
+        <div class="panel-description">Configure general system settings</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Appearance</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon gray">
+              <dees-icon .icon=${'lucide:moon'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Dark Mode</div>
+              <div class="item-sublabel">Use dark theme throughout the system</div>
+            </div>
+          </div>
+          <div
+            class="toggle-switch ${this.darkMode ? 'active' : ''}"
+            @click=${() => this.darkMode = !this.darkMode}
+          ></div>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:type'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Text Size</div>
+            </div>
+          </div>
+          <select>
+            <option>Small</option>
+            <option selected>Medium</option>
+            <option>Large</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Language & Region</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon purple">
+              <dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Language</div>
+            </div>
+          </div>
+          <div class="item-right">
+            <span class="item-value">English (US)</span>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon teal">
+              <dees-icon .icon=${'lucide:clock'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Time Zone</div>
+            </div>
+          </div>
+          <div class="item-right">
+            <span class="item-value">UTC+01:00</span>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderNetworkPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Network</div>
+        <div class="panel-description">Manage Wi-Fi and network connections</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Wi-Fi</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:wifi'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Wi-Fi</div>
+              <div class="item-sublabel">${this.wifiEnabled ? 'Connected to HomeNetwork' : 'Off'}</div>
+            </div>
+          </div>
+          <div
+            class="toggle-switch ${this.wifiEnabled ? 'active' : ''}"
+            @click=${() => this.wifiEnabled = !this.wifiEnabled}
+          ></div>
+        </div>
+      </div>
+
+      ${this.wifiEnabled ? html`
+        <div class="settings-section">
+          <div class="section-title">Available Networks</div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-info">
+                <div class="item-label">HomeNetwork</div>
+                <div class="item-sublabel">Connected</div>
+              </div>
+            </div>
+            <div class="item-right">
+              <dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
+              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
+            </div>
+          </div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-info">
+                <div class="item-label">OfficeWiFi</div>
+              </div>
+            </div>
+            <div class="item-right">
+              <dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
+              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
+            </div>
+          </div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-info">
+                <div class="item-label">CoffeeShop_Guest</div>
+              </div>
+            </div>
+            <div class="item-right">
+              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
+            </div>
+          </div>
+        </div>
+      ` : ''}
+    `;
+  }
+
+  private renderBluetoothPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Bluetooth</div>
+        <div class="panel-description">Manage Bluetooth devices and connections</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Bluetooth</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:bluetooth'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Bluetooth</div>
+              <div class="item-sublabel">${this.bluetoothEnabled ? 'On' : 'Off'}</div>
+            </div>
+          </div>
+          <div
+            class="toggle-switch ${this.bluetoothEnabled ? 'active' : ''}"
+            @click=${() => this.bluetoothEnabled = !this.bluetoothEnabled}
+          ></div>
+        </div>
+      </div>
+
+      ${this.bluetoothEnabled ? html`
+        <div class="settings-section">
+          <div class="section-title">Connected Devices</div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-icon gray">
+                <dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
+              </div>
+              <div class="item-info">
+                <div class="item-label">AirPods Pro</div>
+                <div class="item-sublabel">Connected</div>
+              </div>
+            </div>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+
+        <div class="settings-section">
+          <div class="section-title">Available Devices</div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-info">
+                <div class="item-label">Magic Keyboard</div>
+              </div>
+            </div>
+          </div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-info">
+                <div class="item-label">JBL Speaker</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ` : ''}
+    `;
+  }
+
+  private renderDisplayPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Display</div>
+        <div class="panel-description">Adjust display and brightness settings</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Brightness</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon orange">
+              <dees-icon .icon=${'lucide:sun'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Brightness</div>
+            </div>
+          </div>
+          <div class="slider-container">
+            <dees-icon .icon=${'lucide:sunDim'} .iconSize=${16}></dees-icon>
+            <div class="slider">
+              <div class="slider-fill" style="width: ${this.brightness}%"></div>
+            </div>
+            <dees-icon .icon=${'lucide:sun'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:sparkles'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Auto-Brightness</div>
+              <div class="item-sublabel">Automatically adjust based on ambient light</div>
+            </div>
+          </div>
+          <div class="toggle-switch active"></div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Night Shift</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon orange">
+              <dees-icon .icon=${'lucide:moonStar'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Night Shift</div>
+              <div class="item-sublabel">Reduce blue light in the evening</div>
+            </div>
+          </div>
+          <div class="toggle-switch"></div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Resolution</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon purple">
+              <dees-icon .icon=${'lucide:monitor'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Display Resolution</div>
+            </div>
+          </div>
+          <select>
+            <option>1920 x 1080</option>
+            <option selected>2560 x 1440</option>
+            <option>3840 x 2160</option>
+          </select>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderSoundPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Sound</div>
+        <div class="panel-description">Configure audio settings and output devices</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Volume</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:volume2'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Output Volume</div>
+            </div>
+          </div>
+          <div class="slider-container">
+            <dees-icon .icon=${'lucide:volumeX'} .iconSize=${16}></dees-icon>
+            <div class="slider">
+              <div class="slider-fill" style="width: ${this.volume}%"></div>
+            </div>
+            <span class="slider-value">${this.volume}%</span>
+          </div>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon gray">
+              <dees-icon .icon=${'lucide:volumeX'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Mute</div>
+            </div>
+          </div>
+          <div
+            class="toggle-switch ${!this.soundEnabled ? 'active' : ''}"
+            @click=${() => this.soundEnabled = !this.soundEnabled}
+          ></div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Output Device</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon teal">
+              <dees-icon .icon=${'lucide:speaker'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Built-in Speakers</div>
+              <div class="item-sublabel">Selected</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:check'} .iconSize=${18}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon gray">
+              <dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">AirPods Pro</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Sound Effects</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Play sound effects</div>
+            </div>
+          </div>
+          <div class="toggle-switch active"></div>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Play startup sound</div>
+            </div>
+          </div>
+          <div class="toggle-switch active"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderNotificationsPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Notifications</div>
+        <div class="panel-description">Control how apps notify you</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Notifications</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon red">
+              <dees-icon .icon=${'lucide:bell'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Allow Notifications</div>
+              <div class="item-sublabel">Show notifications from apps and services</div>
+            </div>
+          </div>
+          <div
+            class="toggle-switch ${this.notificationsEnabled ? 'active' : ''}"
+            @click=${() => this.notificationsEnabled = !this.notificationsEnabled}
+          ></div>
+        </div>
+      </div>
+
+      ${this.notificationsEnabled ? html`
+        <div class="settings-section">
+          <div class="section-title">App Notifications</div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-icon blue">
+                <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
+              </div>
+              <div class="item-info">
+                <div class="item-label">Mail</div>
+                <div class="item-sublabel">Banners, Sounds, Badges</div>
+              </div>
+            </div>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-icon green">
+                <dees-icon .icon=${'lucide:messageSquare'} .iconSize=${18}></dees-icon>
+              </div>
+              <div class="item-info">
+                <div class="item-label">Messages</div>
+                <div class="item-sublabel">Banners, Sounds, Badges</div>
+              </div>
+            </div>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+          <div class="settings-item clickable">
+            <div class="item-left">
+              <div class="item-icon orange">
+                <dees-icon .icon=${'lucide:calendar'} .iconSize=${18}></dees-icon>
+              </div>
+              <div class="item-info">
+                <div class="item-label">Calendar</div>
+                <div class="item-sublabel">Banners, Sounds</div>
+              </div>
+            </div>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+      ` : ''}
+    `;
+  }
+
+  private renderPrivacyPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Privacy & Security</div>
+        <div class="panel-description">Manage privacy settings and app permissions</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Privacy</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:mapPin'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Location Services</div>
+              <div class="item-sublabel">On</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon green">
+              <dees-icon .icon=${'lucide:camera'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Camera</div>
+              <div class="item-sublabel">3 apps have access</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon red">
+              <dees-icon .icon=${'lucide:mic'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Microphone</div>
+              <div class="item-sublabel">2 apps have access</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Security</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon gray">
+              <dees-icon .icon=${'lucide:fingerprint'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Touch ID & Password</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderAccountsPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Accounts</div>
+        <div class="panel-description">Manage your accounts and sign-in options</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon blue" style="width: 48px; height: 48px; border-radius: 24px; font-size: 20px; font-weight: 600;">
+              JD
+            </div>
+            <div class="item-info">
+              <div class="item-label">John Doe</div>
+              <div class="item-sublabel">john.doe@example.com</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Connected Accounts</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon" style="background: #4285f4;">
+              <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Google</div>
+              <div class="item-sublabel">john.doe@gmail.com</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon" style="background: #0078d4;">
+              <dees-icon .icon=${'lucide:cloud'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Microsoft</div>
+              <div class="item-sublabel">john.doe@outlook.com</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderAppsPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Apps</div>
+        <div class="panel-description">Manage installed applications</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Default Apps</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Web Browser</div>
+            </div>
+          </div>
+          <div class="item-right">
+            <span class="item-value">Browser</span>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-icon blue">
+              <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Email Client</div>
+            </div>
+          </div>
+          <div class="item-right">
+            <span class="item-value">Mail</span>
+            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Installed Apps</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Browser</div>
+              <div class="item-sublabel">Version 120.0.1</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Mail</div>
+              <div class="item-sublabel">Version 16.0</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Calendar</div>
+              <div class="item-sublabel">Version 14.0</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderUpdatesPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">Software Updates</div>
+        <div class="panel-description">Keep your system up to date</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-icon green">
+              <dees-icon .icon=${'lucide:checkCircle'} .iconSize=${18}></dees-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-label">Your system is up to date</div>
+              <div class="item-sublabel">Last checked: Today at 9:00 AM</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Update Settings</div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Automatic Updates</div>
+              <div class="item-sublabel">Download and install updates automatically</div>
+            </div>
+          </div>
+          <div class="toggle-switch active"></div>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Beta Updates</div>
+              <div class="item-sublabel">Receive early access to new features</div>
+            </div>
+          </div>
+          <div class="toggle-switch"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderAboutPanel(): TemplateResult {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">About</div>
+        <div class="panel-description">System information and details</div>
+      </div>
+
+      <div class="settings-section">
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Device Name</div>
+            </div>
+          </div>
+          <span class="item-value">EcoBridge Desktop</span>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">System Version</div>
+            </div>
+          </div>
+          <span class="item-value">EcoOS 1.0.0</span>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Processor</div>
+            </div>
+          </div>
+          <span class="item-value">ARM64</span>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Memory</div>
+            </div>
+          </div>
+          <span class="item-value">16 GB</span>
+        </div>
+        <div class="settings-item">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Storage</div>
+            </div>
+          </div>
+          <span class="item-value">512 GB (256 GB Available)</span>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-title">Legal</div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Terms of Service</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Privacy Policy</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
+        </div>
+        <div class="settings-item clickable">
+          <div class="item-left">
+            <div class="item-info">
+              <div class="item-label">Open Source Licenses</div>
+            </div>
+          </div>
+          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/ts_web/elements/00group-applauncher/eco-settings/index.ts b/ts_web/elements/00group-applauncher/eco-settings/index.ts
new file mode 100644
index 0000000..1b6599f
--- /dev/null
+++ b/ts_web/elements/00group-applauncher/eco-settings/index.ts
@@ -0,0 +1 @@
+export * from './eco-settings.js';
diff --git a/ts_web/elements/00group-applauncher/index.ts b/ts_web/elements/00group-applauncher/index.ts
index 2973cf2..1ce25b4 100644
--- a/ts_web/elements/00group-applauncher/index.ts
+++ b/ts_web/elements/00group-applauncher/index.ts
@@ -4,3 +4,5 @@ export * from './eco-applauncher-wifimenu/index.js';
 export * from './eco-applauncher-batterymenu/index.js';
 export * from './eco-applauncher-soundmenu/index.js';
 export * from './eco-applauncher-keyboard/index.js';
+export * from './eco-settings/index.js';
+export * from './eco-peripherals/index.js';