diff --git a/ui/src/app/core/accessories/accessories.module.ts b/ui/src/app/core/accessories/accessories.module.ts
index c6f564879..e8039d148 100644
--- a/ui/src/app/core/accessories/accessories.module.ts
+++ b/ui/src/app/core/accessories/accessories.module.ts
@@ -31,6 +31,10 @@ import { HumiditysensorComponent } from './types/humiditysensor/humiditysensor.c
 import { AirqualitysensorComponent } from './types/airqualitysensor/airqualitysensor.component';
 import { WindowcoveringComponent } from './types/windowcovering/windowcovering.component';
 import { WindowcoveringManageComponent } from './types/windowcovering/windowcovering.manage.component';
+import { WindowComponent } from './types/window/window.component';
+import { WindowManageComponent } from './types/window/window.manage.component';
+import { DoorComponent } from './types/door/door.component';
+import { DoorManageComponent } from './types/door/door.manage.component';
 import { TelevisionComponent } from './types/television/television.component';
 import { ContactsensorComponent } from './types/contactsensor/contactsensor.component';
 import { BatteryserviceComponent } from './types/batteryservice/batteryservice.component';
@@ -57,6 +61,8 @@ import { InfoModalComponent } from './info-modal/info-modal.component';
     FanManageComponent,
     Fanv2ManageComponent,
     WindowcoveringManageComponent,
+    WindowManageComponent,
+    DoorManageComponent,
     SpeakerManageComponent,
     SecuritysystemManageComponent,
     ValveManageComponent,
@@ -86,6 +92,10 @@ import { InfoModalComponent } from './info-modal/info-modal.component';
     AirqualitysensorComponent,
     WindowcoveringComponent,
     WindowcoveringManageComponent,
+    WindowComponent,
+    WindowManageComponent,
+    DoorComponent,
+    DoorManageComponent,
     TelevisionComponent,
     ContactsensorComponent,
     BatteryserviceComponent,
@@ -135,6 +145,10 @@ import { InfoModalComponent } from './info-modal/info-modal.component';
     AirqualitysensorComponent,
     WindowcoveringComponent,
     WindowcoveringManageComponent,
+    WindowComponent,
+    WindowManageComponent,
+    DoorComponent,
+    DoorManageComponent,
     TelevisionComponent,
     ContactsensorComponent,
     BatteryserviceComponent,
diff --git a/ui/src/app/core/accessories/types/door/door.component.html b/ui/src/app/core/accessories/types/door/door.component.html
new file mode 100644
index 000000000..d95223fe4
--- /dev/null
+++ b/ui/src/app/core/accessories/types/door/door.component.html
@@ -0,0 +1,24 @@
+<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick
+  (longclick)="onLongClick()" (shortclick)="onClick()">
+  <div class="d-flex flex-column h-100">
+    <div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/door-closed.svg'"
+      aria-label="Door " class="accessory-svg"></div>
+    <div *ngIf="service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/door-open.svg'"
+      aria-label="Door " class="accessory-svg"></div>
+    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
+    <div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2">
+      <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
+      <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
+        {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+      </span>
+      <span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span>
+    </div>
+    <div class="accessory-label red-text" *ngIf="service.values.PositionState === 1">
+      {{ 'accessories.control.label_opening' | translate }}...
+    </div>
+    <div class="accessory-label red-text" *ngIf="service.values.PositionState === 0">
+      {{ 'accessories.control.label_closing' | translate }}...
+    </div>
+  </div>
+</div>
+
diff --git a/ui/src/app/core/accessories/types/door/door.component.scss b/ui/src/app/core/accessories/types/door/door.component.scss
new file mode 100644
index 000000000..558befd64
--- /dev/null
+++ b/ui/src/app/core/accessories/types/door/door.component.scss
@@ -0,0 +1,7 @@
+.door-mode-control {
+  .btn {
+    font-size: 1.4rem;
+    text-transform: initial;
+  }
+}
+
diff --git a/ui/src/app/core/accessories/types/door/door.component.ts b/ui/src/app/core/accessories/types/door/door.component.ts
new file mode 100644
index 000000000..eb6aea236
--- /dev/null
+++ b/ui/src/app/core/accessories/types/door/door.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ServiceTypeX } from '../../accessories.interfaces';
+
+import { DoorManageComponent } from './door.manage.component';
+
+@Component({
+  selector: 'app-door',
+  templateUrl: './door.component.html',
+  styleUrls: ['./door.component.scss'],
+})
+export class DoorComponent implements OnInit {
+  @Input() public service: ServiceTypeX;
+
+  constructor(
+    private modalService: NgbModal,
+  ) { }
+
+  ngOnInit() { }
+
+  onClick() {
+    if (this.service.values.TargetPosition) {
+      this.service.getCharacteristic('TargetPosition').setValue(0);
+    } else {
+      this.service.getCharacteristic('TargetPosition').setValue(100);
+    }
+  }
+
+  onLongClick() {
+    const ref = this.modalService.open(DoorManageComponent, {
+      size: 'sm',
+    });
+    ref.componentInstance.service = this.service;
+  }
+
+}
diff --git a/ui/src/app/core/accessories/types/door/door.manage.component.html b/ui/src/app/core/accessories/types/door/door.manage.component.html
new file mode 100644
index 000000000..b9297b831
--- /dev/null
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.html
@@ -0,0 +1,36 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+      (click)="activeModal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body text-center">
+
+    <h5>
+      <strong>
+        <div *ngIf="service.values.PositionState === 2">
+          <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
+          <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
+            {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+          </span>
+          <span *ngIf="service.values.CurrentPosition === 100">Open</span>
+        </div>
+        <div class="red-text" *ngIf="service.values.PositionState === 1">
+          {{ 'accessories.control.label_opening' | translate }}...
+        </div>
+        <div class="red-text" *ngIf="service.values.PositionState === 0">
+          {{ 'accessories.control.label_closing' | translate }}...
+        </div>
+      </strong>
+    </h5>
+
+    <p>{{ 'accessories.control.label_target' | translate }}: {{ targetPosition.value }}%</p>
+    <nouislider [min]="targetPosition.min" [max]="targetPosition.max" [step]="targetPosition.step"
+      [(ngModel)]="targetPosition.value" (ngModelChange)="onTargetPositionChange()">
+    </nouislider>
+
+  </div>
+</div>
+
diff --git a/ui/src/app/core/accessories/types/door/door.manage.component.ts b/ui/src/app/core/accessories/types/door/door.manage.component.ts
new file mode 100644
index 000000000..fcaf6ee8b
--- /dev/null
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ServiceTypeX } from '../../accessories.interfaces';
+
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-door-manage',
+  templateUrl: './door.manage.component.html',
+  styleUrls: ['./door.component.scss'],
+})
+export class DoorManageComponent implements OnInit {
+  @Input() public service: ServiceTypeX;
+  public targetMode: any;
+  public targetPosition: any;
+  public targetPositionChanged: Subject<string> = new Subject<string>();
+
+  constructor(
+    public activeModal: NgbActiveModal,
+  ) {
+    this.targetPositionChanged
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+      )
+      .subscribe((value) => {
+        if (this.service.getCharacteristic('CurrentPosition').value < this.targetPosition.value) {
+          this.service.values.PositionState = 1;
+        } else if (this.service.getCharacteristic('CurrentPosition').value > this.targetPosition.value) {
+          this.service.values.PositionState = 0;
+        }
+        this.service.getCharacteristic('TargetPosition').setValue(this.targetPosition.value);
+      });
+  }
+
+  ngOnInit() {
+    this.targetMode = this.service.values.On;
+    this.loadTargetPosition();
+  }
+
+  loadTargetPosition() {
+    const TargetPosition = this.service.getCharacteristic('TargetPosition');
+
+    if (TargetPosition) {
+      this.targetPosition = {
+        value: TargetPosition.value,
+        min: TargetPosition.minValue,
+        max: TargetPosition.maxValue,
+        step: TargetPosition.minStep,
+      };
+    }
+  }
+
+  onTargetPositionChange() {
+    this.targetPositionChanged.next(this.targetPosition.value);
+  }
+
+}
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
new file mode 100644
index 000000000..53e2f3e8e
--- /dev/null
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -0,0 +1,24 @@
+<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick
+  (longclick)="onLongClick()" (shortclick)="onClick()">
+  <div class="d-flex flex-column h-100">
+    <div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/window-closed.svg'"
+      aria-label="Window " class="accessory-svg"></div>
+    <div *ngIf="service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/window-open.svg'"
+      aria-label="Window " class="accessory-svg"></div>
+    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
+    <div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2">
+      <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
+      <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
+        {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+      </span>
+      <span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span>
+    </div>
+    <div class="accessory-label red-text" *ngIf="service.values.PositionState === 1">
+      {{ 'accessories.control.label_opening' | translate }}...
+    </div>
+    <div class="accessory-label red-text" *ngIf="service.values.PositionState === 0">
+      {{ 'accessories.control.label_closing' | translate }}...
+    </div>
+  </div>
+</div>
+
diff --git a/ui/src/app/core/accessories/types/window/window.component.scss b/ui/src/app/core/accessories/types/window/window.component.scss
new file mode 100644
index 000000000..d483bd167
--- /dev/null
+++ b/ui/src/app/core/accessories/types/window/window.component.scss
@@ -0,0 +1,7 @@
+.window-mode-control {
+  .btn {
+    font-size: 1.4rem;
+    text-transform: initial;
+  }
+}
+
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
new file mode 100644
index 000000000..606bb1718
--- /dev/null
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ServiceTypeX } from '../../accessories.interfaces';
+
+import { WindowManageComponent } from './window.manage.component';
+
+@Component({
+  selector: 'app-window',
+  templateUrl: './window.component.html',
+  styleUrls: ['./window.component.scss'],
+})
+export class WindowComponent implements OnInit {
+  @Input() public service: ServiceTypeX;
+
+  constructor(
+    private modalService: NgbModal,
+  ) { }
+
+  ngOnInit() { }
+
+  onClick() {
+    if (this.service.values.TargetPosition) {
+      this.service.getCharacteristic('TargetPosition').setValue(0);
+    } else {
+      this.service.getCharacteristic('TargetPosition').setValue(100);
+    }
+  }
+
+  onLongClick() {
+    const ref = this.modalService.open(WindowManageComponent, {
+      size: 'sm',
+    });
+    ref.componentInstance.service = this.service;
+  }
+
+}
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
new file mode 100644
index 000000000..b9297b831
--- /dev/null
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -0,0 +1,36 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+      (click)="activeModal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body text-center">
+
+    <h5>
+      <strong>
+        <div *ngIf="service.values.PositionState === 2">
+          <span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span>
+          <span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100">
+            {{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }}
+          </span>
+          <span *ngIf="service.values.CurrentPosition === 100">Open</span>
+        </div>
+        <div class="red-text" *ngIf="service.values.PositionState === 1">
+          {{ 'accessories.control.label_opening' | translate }}...
+        </div>
+        <div class="red-text" *ngIf="service.values.PositionState === 0">
+          {{ 'accessories.control.label_closing' | translate }}...
+        </div>
+      </strong>
+    </h5>
+
+    <p>{{ 'accessories.control.label_target' | translate }}: {{ targetPosition.value }}%</p>
+    <nouislider [min]="targetPosition.min" [max]="targetPosition.max" [step]="targetPosition.step"
+      [(ngModel)]="targetPosition.value" (ngModelChange)="onTargetPositionChange()">
+    </nouislider>
+
+  </div>
+</div>
+
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
new file mode 100644
index 000000000..aad6b8faf
--- /dev/null
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ServiceTypeX } from '../../accessories.interfaces';
+
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-window-manage',
+  templateUrl: './window.manage.component.html',
+  styleUrls: ['./window.component.scss'],
+})
+export class WindowManageComponent implements OnInit {
+  @Input() public service: ServiceTypeX;
+  public targetMode: any;
+  public targetPosition: any;
+  public targetPositionChanged: Subject<string> = new Subject<string>();
+
+  constructor(
+    public activeModal: NgbActiveModal,
+  ) {
+    this.targetPositionChanged
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+      )
+      .subscribe((value) => {
+        if (this.service.getCharacteristic('CurrentPosition').value < this.targetPosition.value) {
+          this.service.values.PositionState = 1;
+        } else if (this.service.getCharacteristic('CurrentPosition').value > this.targetPosition.value) {
+          this.service.values.PositionState = 0;
+        }
+        this.service.getCharacteristic('TargetPosition').setValue(this.targetPosition.value);
+      });
+  }
+
+  ngOnInit() {
+    this.targetMode = this.service.values.On;
+    this.loadTargetPosition();
+  }
+
+  loadTargetPosition() {
+    const TargetPosition = this.service.getCharacteristic('TargetPosition');
+
+    if (TargetPosition) {
+      this.targetPosition = {
+        value: TargetPosition.value,
+        min: TargetPosition.minValue,
+        max: TargetPosition.maxValue,
+        step: TargetPosition.minStep,
+      };
+    }
+  }
+
+  onTargetPositionChange() {
+    this.targetPositionChanged.next(this.targetPosition.value);
+  }
+
+}
diff --git a/ui/src/app/modules/accessories/accessories.component.html b/ui/src/app/modules/accessories/accessories.component.html
index efaf9368c..872b45608 100644
--- a/ui/src/app/modules/accessories/accessories.component.html
+++ b/ui/src/app/modules/accessories/accessories.component.html
@@ -66,6 +66,10 @@ <h5 class="primary-text drag-handle room-title" [ngClass]="{'cursor-move': !isMo
               </app-airqualitysensor>
               <app-windowcovering *ngSwitchCase="'WindowCovering'" [service]="service">Window Covering
               </app-windowcovering>
+              <app-window *ngSwitchCase="'Window'" [service]="service">Window
+              </app-window>
+              <app-door *ngSwitchCase="'Door'" [service]="service">Door
+              </app-door>
               <app-television *ngSwitchCase="'Television'" [service]="service">Television
               </app-television>
               <app-batteryservice *ngSwitchCase="'BatteryService'" [service]="service">BatteryService
diff --git a/ui/src/app/modules/status/widgets/accessories-widget/accessories-widget.component.html b/ui/src/app/modules/status/widgets/accessories-widget/accessories-widget.component.html
index 3a3812696..11612763e 100644
--- a/ui/src/app/modules/status/widgets/accessories-widget/accessories-widget.component.html
+++ b/ui/src/app/modules/status/widgets/accessories-widget/accessories-widget.component.html
@@ -34,6 +34,10 @@
         </app-airqualitysensor>
         <app-windowcovering *ngSwitchCase="'WindowCovering'" [service]="service">Window Covering
         </app-windowcovering>
+        <app-window *ngSwitchCase="'Window'" [service]="service">Window
+        </app-window>
+        <app-door *ngSwitchCase="'Door'" [service]="service">Door
+        </app-door>
         <app-television *ngSwitchCase="'Television'" [service]="service">Television
         </app-television>
         <app-securitysystem *ngSwitchCase="'SecuritySystem'" [service]="service">Security System
diff --git a/ui/src/assets/hap-icons/door-closed.svg b/ui/src/assets/hap-icons/door-closed.svg
new file mode 100644
index 000000000..73ab9079b
--- /dev/null
+++ b/ui/src/assets/hap-icons/door-closed.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M65 65L565 65L565 565L65 565L65 65Z" id="azpwPyWyb"></path><path d="M215 120L415 120L415 520L215 520L215 120Z" id="a3LUTa5wUU"></path><path d="M250 307.5C250 311.64 246.64 315 242.5 315C238.36 315 235 311.64 235 307.5C235 303.37 238.36 300 242.5 300C246.64 300 250 303.37 250 307.5Z" id="j6bKSy55h0"></path></defs><g><g><g><use xlink:href="#azpwPyWyb" opacity="1" fill="#666666" fill-opacity="1"></use></g><g><use xlink:href="#a3LUTa5wUU" opacity="1" fill="#c3c3c3" fill-opacity="1"></use></g><g><use xlink:href="#j6bKSy55h0" opacity="1" fill="#666666" fill-opacity="1"></use></g></g></g></svg>
\ No newline at end of file
diff --git a/ui/src/assets/hap-icons/door-open.svg b/ui/src/assets/hap-icons/door-open.svg
new file mode 100644
index 000000000..7b32c2efb
--- /dev/null
+++ b/ui/src/assets/hap-icons/door-open.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M65 65L565 65L565 565L65 565L65 65Z" id="a16emSr1OF"></path><path d="M215 120L415 120L415 520L215 520L215 120Z" id="a1Q7XDVmJL"></path><path d="M289.99 170.73L414.99 170.72L415.01 469.1L290 469.1L289.99 170.73Z" id="aI4o4W69"></path><path d="M447.32 196.13L320.84 247.23L290 170.89L416.47 119.79L447.32 196.13Z" id="bKSCmHabW"></path><path d="M296.54 301.7C297.89 298.37 302.09 296.93 305.93 298.48C309.77 300.03 311.79 303.99 310.45 307.31C309.11 310.64 304.9 312.08 301.06 310.53C297.22 308.98 295.2 305.02 296.54 301.7Z" id="amWNNwFCe"></path><path d="M447.33 443.73L320.85 392.63L290 468.97L416.48 520.08L447.33 443.73Z" id="hiueE6AyB"></path><path d="M415 113.14L551.37 113.14L551.37 533.73L415 533.73L415 113.14Z" id="bKLdTBWhx"></path></defs><g><g><g><use xlink:href="#a16emSr1OF" opacity="1" fill="#666666" fill-opacity="1"></use></g><g><use xlink:href="#a1Q7XDVmJL" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#aI4o4W69" opacity="1" fill="#56d723" fill-opacity="1"></use></g><g><use xlink:href="#bKSCmHabW" opacity="1" fill="#56d723" fill-opacity="1"></use></g><g><use xlink:href="#amWNNwFCe" opacity="1" fill="#666666" fill-opacity="1"></use></g><g><use xlink:href="#hiueE6AyB" opacity="1" fill="#56d723" fill-opacity="1"></use></g><g><use xlink:href="#bKLdTBWhx" opacity="1" fill="#666666" fill-opacity="1"></use></g></g></g></svg>
\ No newline at end of file
diff --git a/ui/src/assets/hap-icons/window-closed.svg b/ui/src/assets/hap-icons/window-closed.svg
new file mode 100644
index 000000000..9cd0713ae
--- /dev/null
+++ b/ui/src/assets/hap-icons/window-closed.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M506.35 123.61L506.35 506.98L133.65 506.98L133.65 123.61L506.35 123.61M112.94 536.47L527.06 536.47L527.06 94.12L527.06 94.12L112.94 94.12L112.94 536.47Z" id="f2pCRcSgv"></path><path d="M506.35 123.61L506.35 506.98L133.65 506.98L133.65 123.61L506.35 123.61M112.94 536.47L527.06 536.47L527.06 94.12L527.06 94.12L112.94 94.12L112.94 536.47Z" id="jvy0XBu5M"></path><path d="M329.41 94.12C329.41 359.53 329.41 506.98 329.41 536.47C329.41 536.47 329.41 536.47 329.41 536.47C318.12 536.47 311.84 536.47 310.59 536.47C310.59 536.47 310.59 536.47 310.59 536.47C310.59 271.06 310.59 123.61 310.59 94.12C310.59 94.12 310.59 94.12 310.59 94.12C321.88 94.12 328.16 94.12 329.41 94.12C329.41 94.12 329.41 94.12 329.41 94.12Z" id="eTErwsP1o"></path><path d="M329.41 94.12C329.41 359.53 329.41 506.98 329.41 536.47C329.41 536.47 329.41 536.47 329.41 536.47C318.12 536.47 311.84 536.47 310.59 536.47C310.59 536.47 310.59 536.47 310.59 536.47C310.59 271.06 310.59 123.61 310.59 94.12C310.59 94.12 310.59 94.12 310.59 94.12C321.88 94.12 328.16 94.12 329.41 94.12C329.41 94.12 329.41 94.12 329.41 94.12Z" id="f1QuyuvIlz"></path></defs><g><g><g><use xlink:href="#f2pCRcSgv" opacity="1" fill="#666666" fill-opacity="1"></use><g><use xlink:href="#f2pCRcSgv" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#jvy0XBu5M" opacity="1" fill="#666666" fill-opacity="0"></use><g><use xlink:href="#jvy0XBu5M" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#eTErwsP1o" opacity="1" fill="#666666" fill-opacity="1"></use><g><use xlink:href="#eTErwsP1o" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#f1QuyuvIlz" opacity="1" fill="#000000" fill-opacity="0"></use><g><use xlink:href="#f1QuyuvIlz" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
\ No newline at end of file
diff --git a/ui/src/assets/hap-icons/window-open.svg b/ui/src/assets/hap-icons/window-open.svg
new file mode 100644
index 000000000..3ebbc4e8a
--- /dev/null
+++ b/ui/src/assets/hap-icons/window-open.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M506.35 123.61L506.35 506.98L133.65 506.98L133.65 123.61L506.35 123.61M112.94 94.12L112.94 536.47L527.06 536.47L527.06 94.12L527.06 94.12L112.94 94.12Z" id="b4Fl6hSQ5v"></path><path d="M247.89 467.69C247.89 467.69 247.89 467.69 247.89 467.69C170.82 495.74 128 511.32 119.44 514.43C119.44 514.43 119.44 514.43 119.44 514.43C115.58 503.82 113.43 497.92 113 496.75C113 496.75 113 496.75 113 496.75C190.07 468.7 232.89 453.12 241.45 450C241.45 450 241.45 450 241.45 450C245.31 460.61 247.46 466.51 247.89 467.69Z" id="e29097qVAi"></path><path d="M247.63 150.94C247.63 150.94 247.63 150.94 247.63 150.94C247.73 340.57 247.79 445.92 247.8 466.99C247.8 466.99 247.8 466.99 247.8 466.99C236.5 467 230.23 467 228.97 467C228.97 467 228.97 467 228.97 467C228.87 277.37 228.82 172.02 228.81 150.95C228.81 150.95 228.81 150.95 228.81 150.95C240.1 150.95 246.38 150.95 247.63 150.94Z" id="b4gFt7F5c5"></path><path d="M241.45 169.44C241.45 169.44 241.45 169.44 241.45 169.44C164.38 141.39 121.57 125.8 113 122.69C113 122.69 113 122.69 113 122.69C116.87 112.07 119.01 106.18 119.44 105C119.44 105 119.44 105 119.44 105C196.51 133.05 239.32 148.64 247.89 151.75C247.89 151.75 247.89 151.75 247.89 151.75C244.02 162.36 241.88 168.26 241.45 169.44Z" id="a16AiNZUmY"></path><path d="M519.45 514.43C519.45 514.43 519.45 514.43 519.45 514.43C442.38 486.38 399.56 470.8 391 467.69C391 467.69 391 467.69 391 467.69C394.86 457.08 397.01 451.18 397.44 450C397.44 450 397.44 450 397.44 450C474.51 478.04 517.32 493.62 525.89 496.74C525.89 496.74 525.89 496.74 525.89 496.74C522.02 507.35 519.88 513.25 519.45 514.43Z" id="b1uuBEfib"></path><path d="M410.48 151.94C410.48 151.94 410.48 151.94 410.48 151.94C410.57 341.57 410.63 446.92 410.64 467.99C410.64 467.99 410.64 467.99 410.64 467.99C399.35 468 393.07 468 391.82 468C391.82 468 391.82 468 391.82 468C391.72 278.37 391.66 173.02 391.65 151.95C391.65 151.95 391.65 151.95 391.65 151.95C402.95 151.95 409.22 151.95 410.48 151.94Z" id="bAmqCK33"></path><path d="M525.88 122.69C525.88 122.69 525.88 122.69 525.88 122.69C448.81 150.74 406 166.32 397.43 169.44C397.43 169.44 397.43 169.44 397.43 169.44C393.57 158.82 391.43 152.93 391 151.75C391 151.75 391 151.75 391 151.75C468.07 123.7 510.88 108.12 519.44 105C519.44 105 519.44 105 519.44 105C523.31 115.61 525.45 121.51 525.88 122.69Z" id="c3F93mW3Nx"></path></defs><g><g><g><use xlink:href="#b4Fl6hSQ5v" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#b4Fl6hSQ5v" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#e29097qVAi" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#e29097qVAi" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#b4gFt7F5c5" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#b4gFt7F5c5" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a16AiNZUmY" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#a16AiNZUmY" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#b1uuBEfib" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#b1uuBEfib" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#bAmqCK33" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#bAmqCK33" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#c3F93mW3Nx" opacity="1" fill="#f9bd2b" fill-opacity="1"></use><g><use xlink:href="#c3F93mW3Nx" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
\ No newline at end of file