diff --git a/src/app/applications/bulk-import/bulk-import.component.ts b/src/app/applications/bulk-import/bulk-import.component.ts
index c39bf3f54..1fbebd7bb 100644
--- a/src/app/applications/bulk-import/bulk-import.component.ts
+++ b/src/app/applications/bulk-import/bulk-import.component.ts
@@ -9,7 +9,6 @@ import {
 import { IoTDeviceService } from '@applications/iot-devices/iot-device.service';
 import { faDownload, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { TranslateService } from '@ngx-translate/core';
-import { OrganizationAccessScope } from '@shared/enums/access-scopes';
 import { ErrorMessageService } from '@shared/error-message.service';
 import { splitList } from '@shared/helpers/array.helper';
 import { Download } from '@shared/helpers/download.helper';
@@ -20,7 +19,7 @@ import { Papa } from 'ngx-papaparse';
 import { Observable, Subject } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { BulkImport } from './bulk-import.model';
-import { BulkMapping } from './bulkMapping';
+import { BulkMapping } from './bulk-mapping';
 
 @Component({
   selector: 'app-bulk-import',
@@ -54,6 +53,14 @@ export class BulkImportComponent implements OnInit {
       name: 'lorawan-abp-sample.csv',
       url: '../../../assets/docs/iotdevice_lorawan_abp.csv',
     },
+    {
+      name: 'mqtt-internal-broker-sample.csv',
+      url: '../../../assets/docs/mqtt_internal_broker_sample.csv',
+    },
+    {
+      name: 'mqtt-external-broker-sample.csv',
+      url: '../../../assets/docs/mqtt_external_broker_sample.csv',
+    },
   ];
   download$: Observable<Download>;
   private bulkMapper = new BulkMapping();
diff --git a/src/app/applications/bulk-import/bulk-mapping.ts b/src/app/applications/bulk-import/bulk-mapping.ts
new file mode 100644
index 000000000..1913265d0
--- /dev/null
+++ b/src/app/applications/bulk-import/bulk-mapping.ts
@@ -0,0 +1,131 @@
+import { IotDevice } from '@applications/iot-devices/iot-device.model';
+import { DeviceType } from '@shared/enums/device-type';
+import { Buffer } from 'buffer';
+
+export class BulkMapping {
+  public dataMapper(data: IotDevice, applicationId: number): IotDevice {
+    switch (data.type.toUpperCase()) {
+      case DeviceType.LORAWAN:
+        return this.lorawanMapper(data, applicationId);
+      case DeviceType.MQTT_INTERNAL_BROKER:
+        return this.mqttInternalBrokerMapper(data, applicationId);
+      case DeviceType.MQTT_EXTERNAL_BROKER:
+        return this.mqttExternalBrokerMapper(data, applicationId);
+      case DeviceType.GENERIC_HTTP:
+        return this.baseMapper(data, applicationId);
+      default:
+        break;
+    }
+  }
+
+  private lorawanMapper(data: any, applicationId): IotDevice {
+    const newDevice = this.baseMapper(data, applicationId);
+    newDevice.lorawanSettings = {
+      devEUI: data.devEUI,
+      skipFCntCheck: data.skipFCntCheck
+        ? this.convertToBoolean(data.skipFCntCheck)
+        : undefined,
+      activationType: data.activationType ? data.activationType : undefined,
+      OTAAapplicationKey: data.OTAAapplicationKey
+        ? data.OTAAapplicationKey
+        : undefined,
+      devAddr: data.devAddr ? data.devAddr : undefined,
+      networkSessionKey: data.networkSessionKey
+        ? data.networkSessionKey
+        : undefined,
+      applicationSessionKey: data.applicationSessionKey
+        ? data.applicationSessionKey
+        : undefined,
+      serviceProfileID: data.serviceProfileID
+        ? data.serviceProfileID
+        : undefined,
+      deviceProfileID: data.deviceProfileID ? data.deviceProfileID : undefined,
+      fCntUp: data.fCntUp ? +data.fCntUp : undefined,
+      nFCntDown: data.nFCntDown ? +data.nFCntDown : undefined,
+      deviceStatusBattery: undefined,
+      deviceStatusMargin: undefined,
+    };
+    newDevice.type = DeviceType.LORAWAN;
+    return newDevice;
+  }
+
+  private mqttInternalBrokerMapper(data: any, applicationId: number) {
+    const newDevice = this.baseMapper(data, applicationId);
+    newDevice.mqttInternalBrokerSettings = {
+      authenticationType: data.authenticationType,
+      caCertificate: undefined,
+      deviceCertificate: undefined,
+      deviceCertificateKey: undefined,
+      mqttPort: undefined,
+      mqttURL: undefined,
+      mqtttopicname: undefined,
+      mqttusername: data.mqttusername,
+      mqttpassword: data.mqttpassword,
+    };
+    newDevice.type = DeviceType.MQTT_INTERNAL_BROKER;
+    return newDevice;
+  }
+
+  private mqttExternalBrokerMapper(data: any, applicationId: number) {
+    const newDevice = this.baseMapper(data, applicationId);
+    newDevice.mqttExternalBrokerSettings = {
+      authenticationType: data.authenticationType,
+      caCertificate: this.base64Decode(data.caCertificate),
+      deviceCertificate: this.base64Decode(data.deviceCertificate),
+      deviceCertificateKey: this.base64Decode(data.deviceCertificateKey),
+      mqttPort: data.mqttPort ? Number(data.mqttPort) : undefined,
+      mqttURL: data.mqttURL,
+      mqtttopicname: data.mqtttopicname,
+      mqttpassword: data.mqttpassword,
+      mqttusername: data.mqttusername,
+      invalidMqttConfig: data.invalidMqttConfig,
+    };
+    newDevice.type = DeviceType.MQTT_EXTERNAL_BROKER;
+    return newDevice;
+  }
+
+  private base64Decode(input: string) {
+    if (!input) {
+      return undefined;
+    }
+    return Buffer.from(input, 'base64').toString('binary');
+  }
+
+  private convertToBoolean(text: string): boolean {
+    if (text.toUpperCase() === 'TRUE') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  private baseMapper(data: any, applicationId: number): IotDevice {
+    return {
+      name: data.name,
+      application: undefined,
+      location: undefined,
+      commentOnLocation: data.commentOnLocation,
+      comment: data.comment,
+      type: DeviceType.GENERIC_HTTP,
+      receivedMessagesMetadata: undefined,
+      metadata: undefined,
+      apiKey: undefined,
+      id: undefined,
+      createdAt: undefined,
+      updatedAt: undefined,
+      applicationId: applicationId,
+      longitude: data.longitude ? Number(data.longitude) : 0,
+      latitude: data.latitude ? Number(data.latitude) : 0,
+      latestReceivedMessage: undefined,
+      lorawanSettings: undefined,
+      sigfoxSettings: undefined,
+      mqttInternalBrokerSettings: undefined,
+      mqttExternalBrokerSettings: undefined,
+      createdBy: undefined,
+      updatedBy: undefined,
+      updatedByName: undefined,
+      createdByName: undefined,
+      deviceModelId: data.deviceModelId != '' ? +data.deviceModelId : undefined,
+    };
+  }
+}
diff --git a/src/app/applications/bulk-import/bulkMapping.ts b/src/app/applications/bulk-import/bulkMapping.ts
deleted file mode 100644
index 5f7b66d60..000000000
--- a/src/app/applications/bulk-import/bulkMapping.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { IotDevice } from '@applications/iot-devices/iot-device.model';
-import { DeviceType } from '@shared/enums/device-type';
-
-export class BulkMapping {
-
-    public dataMapper(data: IotDevice, applicationId: number): IotDevice {
-
-        switch (data.type.toUpperCase()) {
-          case DeviceType.LORAWAN:
-            return this.lorawanMapper(data, applicationId);
-          case DeviceType.GENERIC_HTTP:
-            return this.baseMapper(data, applicationId);
-          default:
-            break;
-        }
-        //return new IotDevice();
-    }
-
-    private lorawanMapper(data: any, applicationId): IotDevice {
-        const newDevice = this.baseMapper(data, applicationId);
-        newDevice.lorawanSettings = {
-            devEUI: data.devEUI,
-            skipFCntCheck: data.skipFCntCheck ? this.convertToBoolean(data.skipFCntCheck) : undefined,
-            activationType: data.activationType ? data.activationType : undefined,
-            OTAAapplicationKey: data.OTAAapplicationKey ? data.OTAAapplicationKey : undefined,
-            devAddr: data.devAddr ? data.devAddr : undefined,
-            networkSessionKey: data.networkSessionKey ? data.networkSessionKey : undefined,
-            applicationSessionKey: data.applicationSessionKey ? data.applicationSessionKey : undefined,
-            serviceProfileID: data.serviceProfileID ? data.serviceProfileID : undefined,
-            deviceProfileID: data.deviceProfileID ? data.deviceProfileID : undefined,
-            fCntUp: data.fCntUp ? +data.fCntUp : undefined,
-            nFCntDown: data.nFCntDown ? +data.nFCntDown : undefined,
-            deviceStatusBattery: undefined,
-            deviceStatusMargin: undefined
-        };
-        newDevice.type = DeviceType.LORAWAN;
-        return newDevice;
-    }
-
-    private convertToBoolean(text: string): boolean {
-        if (text.toUpperCase() === 'TRUE') {
-            return true;
-        } else {
-            return false;
-        }
-
-    }
-
-    private baseMapper(data: any, applicationId: number): IotDevice {
-        return {
-            name: data.name,
-            application: undefined,
-            location: undefined,
-            commentOnLocation: data.commentOnLocation,
-            comment: data.comment,
-            type: DeviceType.GENERIC_HTTP,
-            receivedMessagesMetadata: undefined,
-            metadata: undefined,
-            apiKey: undefined,
-            id: data.id ? data.id : undefined,
-            createdAt: undefined,
-            updatedAt: undefined,
-            applicationId: applicationId,
-            longitude: data.longitude ? Number(data.longitude) : 0,
-            latitude: data.latitude ? Number(data.latitude) : 0,
-            latestReceivedMessage: undefined,
-            lorawanSettings: undefined,
-            sigfoxSettings: undefined,
-            createdBy: undefined,
-            updatedBy: undefined,
-            updatedByName: undefined,
-            createdByName: undefined,
-            deviceModelId: data.deviceModelId != "" ? +data.deviceModelId : undefined,
-        };
-    }
-}
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html
index 1cab2bc81..d7f8f5ec6 100644
--- a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html
@@ -2,43 +2,44 @@
     <div class="col-md-6 d-flex align-items-stretch">
         <div class="jumbotron jumbotron--m-right jumbotron--full-width">
             <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
-            <!-- Battery -->
             <p class="mr-1"><strong>{{ 'IOT-TABLE.APPLICATION' | translate }}</strong>{{device.application.name}}</p>
             <app-general-details [data]="device"></app-general-details>
+            <!-- Battery -->
+            <ng-template [ngIf]="device.type === DeviceType.LORAWAN">
             <mat-divider></mat-divider>
-            <div class="d-flex align-items-center">
+              <div class="d-flex align-items-center">
                 <p class="mr-1"><strong>{{ 'IOT-TABLE.BATTERY' | translate }}</strong></p>
-                <app-batteri-status *ngIf="device.type === 'LORAWAN'; else noBatteryStatus" [color]="batteryStatusColor"
-                    [percentage]="batteryStatusPercentage"></app-batteri-status>
-                <ng-template #noBatteryStatus>
-                    <div>
-                        <p>{{ 'IOTDEVICE-TABLE-ROW.NOT-SUPPORTED-SHORT' | translate }}</p>
-                    </div>
-                </ng-template>
-                <ng-template #notAvailable>
-                  <span>{{'IOTDEVICE-TABLE-ROW.NOT-AVAILABLE' | translate}}</span>
-                </ng-template>
-            </div>
+                <app-batteri-status [color]="batteryStatusColor"
+                                    [percentage]="batteryStatusPercentage"></app-batteri-status>
+              </div>
+            </ng-template>
             <mat-divider></mat-divider>
 
             <!-- Unit type -->
             <p> <strong>{{ 'IOTDEVICE.TYPE' | translate }}</strong>{{ 'IOT-DEVICE-TYPES.' + device.type | translate}}
             </p>
             <!-- IF  Lora device-->
-            <ng-container *ngIf="device.type === 'LORAWAN' && device.lorawanSettings">
+            <ng-container *ngIf="device.type === DeviceType.LORAWAN && device.lorawanSettings">
                 <app-iot-device-detail-lorawan [device]="device"></app-iot-device-detail-lorawan>
             </ng-container>
             <!-- SIGFOX DEVICE-->
-            <ng-container *ngIf="device.type === 'SIGFOX' && device.sigfoxSettings">
+            <ng-container *ngIf="device.type === DeviceType.SIGFOX && device.sigfoxSettings">
                 <app-iot-device-detail-sigfox [device]="device"></app-iot-device-detail-sigfox>
             </ng-container>
-            <ng-container  *ngIf="device.type === 'GENERIC_HTTP'">
+            <ng-container *ngIf="device.type === DeviceType.GENERIC_HTTP">
                 <mat-divider></mat-divider>
                 <p>
                     <strong>{{ 'IOTDEVICE.GENERIC_HTTP.APIKEY' | translate }}</strong>
                     <span class="pre text-break">{{ httpDeviceUrl }}</span>
                 </p>
             </ng-container>
+          <ng-container *ngIf="device.type === DeviceType.MQTT_INTERNAL_BROKER">
+            <app-iot-device-details-mqtt-internal-broker [device]="device" ></app-iot-device-details-mqtt-internal-broker>
+          </ng-container>
+          <ng-container *ngIf="device.type === DeviceType.MQTT_EXTERNAL_BROKER">
+            <p class="alarmText" *ngIf="device.mqttExternalBrokerSettings.invalidMqttConfig">{{ 'IOTDEVICE.MQTT.NOCONNECTION' | translate}}</p>
+            <app-iot-device-details-mqtt-external-broker [device]="device"></app-iot-device-details-mqtt-external-broker>
+          </ng-container>
             <!-- Comment -->
             <mat-divider></mat-divider>
             <p>
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss
index 6d2bcf418..8e0bf6a9a 100644
--- a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss
@@ -4,3 +4,8 @@
   white-space: -o-pre-wrap;
   font-family: monospace;
 }
+
+.alarmText{
+  color: #ff0000;
+  font-size: 1em;
+}
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.ts b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.ts
index ac439b806..a2e2110d1 100644
--- a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.ts
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.ts
@@ -14,6 +14,7 @@ import { environment } from '@environments/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { jsonToList } from '@shared/helpers/json.helper';
 import { KeyValue } from '@shared/types/tuple.type';
+import { DeviceType } from '@shared/enums/device-type';
 
 @Component({
   selector: 'app-iot-device-detail-generic',
@@ -45,7 +46,6 @@ export class IotDeviceDetailGenericComponent
   ngOnChanges(changes: SimpleChanges): void {
     this.batteryStatusPercentage = this.getBatteryProcentage();
     this.httpDeviceUrl = this.getGenericHttpDeviceUrl();
-
     if (
       changes?.device?.previousValue?.metadata !==
         changes?.device?.currentValue?.metadata &&
@@ -83,4 +83,6 @@ export class IotDeviceDetailGenericComponent
   }
 
   ngOnDestroy(): void {}
+
+  protected readonly DeviceType = DeviceType;
 }
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.html b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.html
new file mode 100644
index 000000000..6aa1198ec
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.html
@@ -0,0 +1,11 @@
+<p><strong>{{ 'IOTDEVICE.MQTT.URL' | translate }}</strong>{{ device.mqttExternalBrokerSettings.mqttURL }}</p>
+<p><strong>{{ 'IOTDEVICE.MQTT.PORT' | translate }}</strong>{{ device.mqttExternalBrokerSettings.mqttPort }}</p>
+<p><strong>{{ 'IOTDEVICE.MQTT.TOPIC_NAME' | translate }}</strong>{{ device.mqttExternalBrokerSettings.mqtttopicname }}</p>
+<ng-container *ngIf="device.mqttExternalBrokerSettings.authenticationType === AuthenticationType.PASSWORD; else certificate">
+  <p><strong>{{ 'QUESTION.MQTT.USERNAME-LABEL' | translate }}</strong>{{ device.mqttExternalBrokerSettings.mqttusername }}</p>
+</ng-container>
+<ng-template #certificate>
+  <p><strong>{{ 'QUESTION.MQTT.CA-CERTIFICATE' | translate }}</strong><textarea class="form-control" [readOnly]="true">{{ device.mqttExternalBrokerSettings.caCertificate }}</textarea></p>
+  <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE' | translate }}</strong><textarea class="form-control" [readOnly]="true">{{ device.mqttExternalBrokerSettings.deviceCertificate }}</textarea></p>
+  <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE-KEY' | translate }}</strong><textarea class="form-control" [readOnly]="true">{{ device.mqttExternalBrokerSettings.deviceCertificateKey }}</textarea></p>
+</ng-template>
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.scss b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.ts b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.ts
new file mode 100644
index 000000000..e74f503fb
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IotDevice } from '@applications/iot-devices/iot-device.model';
+import { AuthenticationType } from '@shared/enums/authentication-type';
+
+@Component({
+  selector: 'app-iot-device-details-mqtt-external-broker',
+  templateUrl: './iot-device-details-mqtt-external-broker.component.html',
+  styleUrls: ['./iot-device-details-mqtt-external-broker.component.scss'],
+})
+export class IotDeviceDetailsMqttExternalBrokerComponent implements OnInit {
+  @Input() device: IotDevice;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  protected readonly AuthenticationType = AuthenticationType;
+}
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.html b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.html
new file mode 100644
index 000000000..cf321b63f
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.html
@@ -0,0 +1,23 @@
+<p><strong>{{ 'IOTDEVICE.MQTT.URL' | translate }}</strong>{{ device.mqttInternalBrokerSettings.mqttURL }}</p>
+<p><strong>{{ 'IOTDEVICE.MQTT.PORT' | translate }}</strong>{{ device.mqttInternalBrokerSettings.mqttPort }}</p>
+<p><strong>{{ 'IOTDEVICE.MQTT.TOPIC_NAME' | translate }}</strong>{{device.mqttInternalBrokerSettings.mqtttopicname}}</p>
+
+<ng-container *ngIf="device.mqttInternalBrokerSettings.authenticationType === AuthenticationType.PASSWORD">
+  <p><strong>{{ 'QUESTION.MQTT.USERNAME-LABEL' | translate }}</strong>{{ device.mqttInternalBrokerSettings.mqttusername }}</p>
+</ng-container>
+  <p><strong>{{ 'QUESTION.MQTT.CA-CERTIFICATE' | translate }}</strong>
+    <button [cdkCopyToClipboard]="device.mqttInternalBrokerSettings.caCertificate" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttInternalBrokerSettings.caCertificate, 'ca.crt')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttInternalBrokerSettings.caCertificate }}</textarea></p>
+<ng-container *ngIf="device.mqttInternalBrokerSettings.authenticationType === AuthenticationType.CERTIFICATE">
+  <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE' | translate }}</strong>
+    <button [cdkCopyToClipboard]="device.mqttInternalBrokerSettings.deviceCertificate" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttInternalBrokerSettings.deviceCertificate,  device.name +'.crt')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttInternalBrokerSettings.deviceCertificate }}</textarea>
+  </p>
+  <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE-KEY' | translate }}</strong>
+    <button [cdkCopyToClipboard]="device.mqttInternalBrokerSettings.deviceCertificateKey" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttInternalBrokerSettings.deviceCertificateKey, device.name + '.key')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttInternalBrokerSettings.deviceCertificateKey }}</textarea>
+  </p>
+</ng-container>
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.scss b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.ts b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.ts
new file mode 100644
index 000000000..03a0c5312
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IotDevice } from '@applications/iot-devices/iot-device.model';
+import { AuthenticationType } from '@shared/enums/authentication-type';
+import { simpleDownload } from '@shared/helpers/download.helper';
+
+@Component({
+  selector: 'app-iot-device-details-mqtt-internal-broker',
+  templateUrl: './iot-device-details-mqtt-internal-broker.component.html',
+  styleUrls: ['./iot-device-details-mqtt-internal-broker.component.scss'],
+})
+export class IotDeviceDetailsMqttInternalBrokerComponent implements OnInit {
+  @Input() device: IotDevice;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  protected readonly AuthenticationType = AuthenticationType;
+
+  downloadCaCertificate(caCertificate: string, filename: string) {
+    simpleDownload(caCertificate, filename);
+  }
+}
diff --git a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html
index 0a0ab24ca..02b91ff21 100644
--- a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html
+++ b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html
@@ -1,4 +1,5 @@
-<app-top-bar backButtonTitle="{{'NAV.APPLICATION' | translate}}" title="{{'QUESTION.CREATE-IOT-DEVICE' | translate}}" [canEdit]="canEdit">
+<app-top-bar backButtonTitle="{{'NAV.APPLICATION' | translate}}" title="{{'QUESTION.CREATE-IOT-DEVICE' | translate}}"
+             [canEdit]="canEdit">
 </app-top-bar>
 
 <form (ngSubmit)="onSubmit()" class="os2-form p-3 mt-4">
@@ -12,11 +13,11 @@
 
   <div class="row mb-5">
     <div class="form-group d-flex justify-content-center p-3 col-12"
-      [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('type'), 'is-valid' : formFailedSubmit && !errorFields.includes('type')}">
+         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('type'), 'is-valid' : formFailedSubmit && !errorFields.includes('type')}">
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="LoRaWAN" type="radio" name="type" value="LORAWAN" class="form-check-input" required
-                 [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="LoRaWAN" type="checkbox" name="LORAWAN" class="form-check-input" required
+                [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('LORAWAN')">
           <div class="image-container">
             <img src="assets/images/lora.png" alt="LoRaWAN">
           </div>
@@ -24,8 +25,8 @@
       </div>
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="{{'GEN.HTTP' | translate}}" type="radio" name="type" value="GENERIC_HTTP"
-            class="form-check-input" required [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="{{'GEN.HTTP' | translate}}" type="checkbox" name="GENERIC_HTTP"
+                 class="form-check-input" required [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('GENERIC_HTTP')">
           <div class="image-container">
             <app-dynamic-img [altText]="'GEN.HTTP' | translate" [image]="'iot'"></app-dynamic-img>
           </div>
@@ -33,8 +34,17 @@
       </div>
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="Sigfox" type="radio" name="type" value="SIGFOX" class="form-check-input" required
-            [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="MQTT" type="checkbox" name="MQTT" required
+                 class="form-check-input" [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('MQTT')">
+          <div class="image-container">
+            <img src="assets/images/logo_mqtt.png" alt="MQTT">
+          </div>
+        </label>
+      </div>
+      <div class="form-check-inline radio-image">
+        <label class="form-check-label d-flex flex-column-reverse">
+          <input attr.aria-label="Sigfox" type="checkbox" name="SIGFOX" class="form-check-input" required
+                 [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('SIGFOX')">
           <div class="image-container">
             <img src="assets/images/Sigfox_Logo.png" alt="Sigfox">
           </div>
@@ -47,9 +57,9 @@
     <div class="form-group mt-3 col-12">
       <label class="form-label" for="name">{{'QUESTION.GIVE-DEVICE-NAME' | translate}}</label>*
       <input type="text" class="form-control" id="name" name="name"
-        [placeholder]="'QUESTION.DEVICE-NAME-PLACEHOLDER' | translate" maxlength="50" required
-        [(ngModel)]="iotDevice.name"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
+             [placeholder]="'QUESTION.DEVICE-NAME-PLACEHOLDER' | translate" maxlength="50" required
+             [(ngModel)]="iotDevice.name"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
     </div>
 
     <div class="form-group mt-3 col-12" *ngIf="application">
@@ -59,9 +69,9 @@
     <div class="form-group mt-3 col-12">
       <label class="form-label" for="comment">{{'IOTDEVICE.COMMENT' | translate}}</label>
       <input type="text" class="form-control" id="comment" name="comment"
-        [placeholder]="'QUESTION.EXTRA-COMMENT-PLACEHOLDER' | translate" maxLength="1024"
-        [(ngModel)]="iotDevice.comment"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('comment'), 'is-valid' : formFailedSubmit && !errorFields.includes('comment')}">
+             [placeholder]="'QUESTION.EXTRA-COMMENT-PLACEHOLDER' | translate" maxLength="1024"
+             [(ngModel)]="iotDevice.comment"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('comment'), 'is-valid' : formFailedSubmit && !errorFields.includes('comment')}">
     </div>
 
     <div class="form-group mt-3 col-12 thirty-height" *ngIf="iotDevice">
@@ -71,30 +81,31 @@
     <div class="form-group mt-3 col-6">
       <label class="form-label" for="longitude">{{'IOTDEVICE.LONGITUDE' | translate}}</label>
       <input type="number" class="form-control" id="longitude" name="longitude" [placeholder]="00" required
-        [(ngModel)]="iotDevice.longitude" step=".000001" min="-180" max="180" maxlength="9"
-        (keyup)="onCoordinateKey($event)"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('longitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('longitude')}">
+             [(ngModel)]="iotDevice.longitude" step=".000001" min="-180" max="180" maxlength="9"
+             (keyup)="onCoordinateKey($event)"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('longitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('longitude')}">
     </div>
 
     <div class="form-group mt-3 col-6">
       <label class="form-label" for="latitude">{{'IOTDEVICE.LATITUDE' | translate}}</label>
       <input type="number" class="form-control" id="latitude" name="latitude" [placeholder]="00" required
-        [(ngModel)]="iotDevice.latitude" step=".000001" min="-90" max="90" maxlength="9"
-        (keyup)="onCoordinateKey($event)"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('latitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('latitude')}">
+             [(ngModel)]="iotDevice.latitude" step=".000001" min="-90" max="90" maxlength="9"
+             (keyup)="onCoordinateKey($event)"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('latitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('latitude')}">
     </div>
     <div class="form-group mt-5">
       <label class="form-label" for="commentOnLocation">{{'QUESTION.LOCATION-DESCRIPTION' | translate}}</label>
       <input type="text" id="commentOnLocation" name="commentOnLocation" maxLength="1024"
-        [placeholder]="'QUESTION.LOCATION-DESCRIPTION-PLACEHOLDER' | translate" class="form-control"
-        [(ngModel)]="iotDevice.commentOnLocation"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('commentOnLocation'), 'is-valid' : formFailedSubmit && !errorFields.includes('commentOnLocation')}">
+             [placeholder]="'QUESTION.LOCATION-DESCRIPTION-PLACEHOLDER' | translate" class="form-control"
+             [(ngModel)]="iotDevice.commentOnLocation"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('commentOnLocation'), 'is-valid' : formFailedSubmit && !errorFields.includes('commentOnLocation')}">
     </div>
 
     <div class="form-group mt-5">
       <label class="form-label" for="deviceModel">{{'QUESTION.DEVICE-MODEL-SELECT' | translate}}</label>
-      <mat-select class="form-control" name="deviceModel" [compareWith]="compare" [(ngModel)]="iotDevice.deviceModelId"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('deviceModel'), 'is-valid' : formFailedSubmit && !errorFields.includes('deviceModel')}">
+      <mat-select class="form-control" name="deviceModel" id="deviceModel" [compareWith]="compare"
+                  [(ngModel)]="iotDevice.deviceModelId"
+                  [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('deviceModel'), 'is-valid' : formFailedSubmit && !errorFields.includes('deviceModel')}">
         <mat-option [value]="0">
           {{'QUESTION.DEVICE-MODEL-SELECT-NON' | translate }}
         </mat-option>
@@ -113,20 +124,20 @@ <h3>{{'IOTDEVICE.LORAWANSETUP' | translate}}</h3>
     <div class="form-group mt-5">
       <label class="form-label" for="devEUI">{{'QUESTION.DEVEUI' | translate}}*</label>
       <input type="text" id="devEUI" name="devEUI" maxLength="16"
-        [placeholder]="'QUESTION.DEVEUI-PLACEHOLDER' | translate" class="form-control"
-        [(ngModel)]="iotDevice.lorawanSettings.devEUI" [disabled]="editmode"
-        [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('devEUI'), 'is-valid' : formFailedSubmit && !errorFields.includes('devEUI')}">
+             [placeholder]="'QUESTION.DEVEUI-PLACEHOLDER' | translate" class="form-control"
+             [(ngModel)]="iotDevice.lorawanSettings.devEUI" [disabled]="editmode"
+             [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('devEUI'), 'is-valid' : formFailedSubmit && !errorFields.includes('devEUI')}">
     </div>
 
     <ng-container *ngIf="iotDevice.lorawanSettings.serviceProfileID || serviceProfiles">
       <div class="form-group mt-3 col-12">
         <label class="form-label" for="serviceProfileID">{{'QUESTION.CHOOSE-SERVICEPROFILE' | translate}}</label>*
         <select id="serviceProfileID" class="form-select" name="serviceProfileID"
-          [(ngModel)]="iotDevice.lorawanSettings.serviceProfileID" required
-          [value]="iotDevice.lorawanSettings.serviceProfileID" [disabled]="editmode"
-          [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('serviceProfileID'), 'is-valid' : formFailedSubmit && !errorFields.includes('serviceProfileID')}">
+                [(ngModel)]="iotDevice.lorawanSettings.serviceProfileID" required
+                [value]="iotDevice.lorawanSettings.serviceProfileID" [disabled]="editmode"
+                [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('serviceProfileID'), 'is-valid' : formFailedSubmit && !errorFields.includes('serviceProfileID')}">
           <option *ngFor="let serviceProfile of serviceProfiles" [value]="serviceProfile.id"
-            [selected]="serviceProfile.id === iotDevice.lorawanSettings.serviceProfileID">
+                  [selected]="serviceProfile.id === iotDevice.lorawanSettings.serviceProfileID">
             {{serviceProfile.name}}
           </option>
         </select>
@@ -136,11 +147,12 @@ <h3>{{'IOTDEVICE.LORAWANSETUP' | translate}}</h3>
       <div class="form-group mt-3 col-12">
         <label class="form-label" for="deviceProfileID">{{'QUESTION.CHOOSE-DEVICE' | translate}}</label>*
         <select id="deviceProfileID" class="form-select" name="deviceProfileID"
-          [(ngModel)]="iotDevice.lorawanSettings.deviceProfileID" required
-          (change)="onChangeDeviceProfile($event.target.value)" [value]="iotDevice.lorawanSettings.deviceProfileID"
-          [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('deviceProfileID'), 'is-valid' : formFailedSubmit && !errorFields.includes('deviceProfileID')}">
+                [(ngModel)]="iotDevice.lorawanSettings.deviceProfileID" required
+                (change)="onChangeDeviceProfile($event.target.value)"
+                [value]="iotDevice.lorawanSettings.deviceProfileID"
+                [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('deviceProfileID'), 'is-valid' : formFailedSubmit && !errorFields.includes('deviceProfileID')}">
           <option *ngFor="let deviceProfile of deviceProfiles" [value]="deviceProfile.id"
-            [selected]="deviceProfile.id === iotDevice.lorawanSettings.deviceProfileID">
+                  [selected]="deviceProfile.id === iotDevice.lorawanSettings.deviceProfileID">
             {{deviceProfile.name}}
           </option>
         </select>
@@ -154,9 +166,9 @@ <h3>{{'QUESTION.OTAA' | translate}}</h3>
         <div class="form-group mt-5">
           <label class="form-label" for="OTAAapplicationKey">{{'QUESTION.OTAAAPPLICATIONKEY' | translate}}*</label>
           <input type="text" id="OTAAapplicationKey" name="OTAAapplicationKey" maxLength="32"
-            [placeholder]="'QUESTION.OTAAAPPLICATIONKEY-PLACEHOLDER' | translate" class="form-control"
-            [(ngModel)]="iotDevice.lorawanSettings.OTAAapplicationKey"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('OTAAapplicationKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('OTAAapplicationKey')}">
+                 [placeholder]="'QUESTION.OTAAAPPLICATIONKEY-PLACEHOLDER' | translate" class="form-control"
+                 [(ngModel)]="iotDevice.lorawanSettings.OTAAapplicationKey"
+                 [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('OTAAapplicationKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('OTAAapplicationKey')}">
         </div>
       </ng-container>
 
@@ -166,42 +178,44 @@ <h3>{{'QUESTION.ABP' | translate}}</h3>
         <div class="form-group mt-5">
           <label class="form-label" for="devAddr">{{'QUESTION.DEVADDR' | translate}}*</label>
           <input type="text" id="devAddr" name="devAddr" maxLength="8"
-            [placeholder]="'QUESTION.DEVADDR-PLACEHOLDER' | translate" class="form-control"
-            [(ngModel)]="iotDevice.lorawanSettings.devAddr"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('devAddr'), 'is-valid' : formFailedSubmit && !errorFields.includes('devAddr')}">
+                 [placeholder]="'QUESTION.DEVADDR-PLACEHOLDER' | translate" class="form-control"
+                 [(ngModel)]="iotDevice.lorawanSettings.devAddr"
+                 [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('devAddr'), 'is-valid' : formFailedSubmit && !errorFields.includes('devAddr')}">
         </div>
 
         <div class="form-group mt-5">
           <label class="form-label" for="networkSessionKey">{{'QUESTION.NETWORKSESSIONKEY' | translate}}*</label>
           <input type="text" id="networkSessionKey" name="networkSessionKey" maxLength="32"
-            [placeholder]="'QUESTION.NETWORKSESSIONKEY-PLACEHOLDER' | translate" class="form-control"
-            [(ngModel)]="iotDevice.lorawanSettings.networkSessionKey"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('networkSessionKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('networkSessionKey')}">
+                 [placeholder]="'QUESTION.NETWORKSESSIONKEY-PLACEHOLDER' | translate" class="form-control"
+                 [(ngModel)]="iotDevice.lorawanSettings.networkSessionKey"
+                 [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('networkSessionKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('networkSessionKey')}">
         </div>
 
         <div class="form-group mt-5">
           <label class="form-label" for="applicationSessionKey">{{'QUESTION.APPLICATIONSESSIONKEY' |
             translate}}*</label>
           <input type="text" id="applicationSessionKey" name="applicationSessionKey" maxLength="32"
-            [placeholder]="'QUESTION.APPLICATIONSESSIONKEY-PLACEHOLDER' | translate" class="form-control"
-            [(ngModel)]="iotDevice.lorawanSettings.applicationSessionKey"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('applicationSessionKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('applicationSessionKey')}">
+                 [placeholder]="'QUESTION.APPLICATIONSESSIONKEY-PLACEHOLDER' | translate" class="form-control"
+                 [(ngModel)]="iotDevice.lorawanSettings.applicationSessionKey"
+                 [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('applicationSessionKey'), 'is-valid' : formFailedSubmit && !errorFields.includes('applicationSessionKey')}">
         </div>
 
         <div class="form-group mt-5">
           <label class="form-label" for="fCntUp">{{'QUESTION.FCNTUP' | translate}}*</label>
-          <input type="number" id="fCntUp" name="fCntUp" maxLength="32"
+          <input
+            type="number" id="fCntUp" name="fCntUp" maxLength="32"
             [placeholder]="'QUESTION.FCNTUP-PLACEHOLDER' | translate" class="form-control"
             [(ngModel)]="iotDevice.lorawanSettings.fCntUp"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('fCntUp'), 'is-valid' : formFailedSubmit && !errorFields.includes('fCntUp')}">
+            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('fCntUp'), 'is-valid' : formFailedSubmit && !errorFields.includes('fCntUp')}"
+          />
         </div>
 
         <div class="form-group mt-5">
           <label class="form-label" for="nFCntDown">{{'QUESTION.NFCNTDOWN' | translate}}*</label>
           <input type="number" id="nFCntDown" name="nFCntDown" maxLength="32"
-            [placeholder]="'QUESTION.NFCNTDOWN-PLACEHOLDER' | translate" class="form-control"
-            [(ngModel)]="iotDevice.lorawanSettings.nFCntDown"
-            [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('nFCntDown'), 'is-valid' : formFailedSubmit && !errorFields.includes('nFCntDown')}">
+                 [placeholder]="'QUESTION.NFCNTDOWN-PLACEHOLDER' | translate" class="form-control"
+                 [(ngModel)]="iotDevice.lorawanSettings.nFCntDown"
+                 [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('nFCntDown'), 'is-valid' : formFailedSubmit && !errorFields.includes('nFCntDown')}">
         </div>
       </ng-container>
     </div>
@@ -209,7 +223,7 @@ <h3>{{'QUESTION.ABP' | translate}}</h3>
     <div class="form-group mt-5">
       <label class="form-label" for="skipFCntCheck">{{'QUESTION.SKIPFCNTCHECK' | translate}}</label>
       <div>
-        <mat-checkbox [(ngModel)]="iotDevice.lorawanSettings.skipFCntCheck" name="skipFCntCheck">
+        <mat-checkbox [(ngModel)]="iotDevice.lorawanSettings.skipFCntCheck" name="skipFCntCheck" id="skipFCntCheck">
           {{'QUESTION.SKIPFCNTCHECK-YES' | translate}}
         </mat-checkbox>
       </div>
@@ -221,6 +235,15 @@ <h3>{{'QUESTION.ABP' | translate}}</h3>
     </app-sigfox-device-edit>
   </ng-container>
 
+  <ng-container *ngIf="iotDevice.type.toString().includes('MQTT')">
+    <app-mqtt-device-edit
+      [iotDevice]="iotDevice"
+      [errorFields]="errorFields"
+      [formFailedSubmit]="formFailedSubmit"
+      [editMode]="editmode">
+    </app-mqtt-device-edit>
+  </ng-container>
+
   <div class="mt-5 row">
     <h3>{{ "QUESTION.METADATA" | translate}}</h3>
     <app-form-key-value-list [(tags)]="metadataTags" [errorFieldId]="errorMetadataFieldId">
diff --git a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts
index f39d2af56..5e462ccb0 100644
--- a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts
+++ b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts
@@ -50,7 +50,6 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
   public OTAA = true;
   metadataTags: { key?: string; value?: string }[] = [];
   errorMetadataFieldId: string | undefined;
-
   public deviceSubscription: Subscription;
   private applicationsSubscription: Subscription;
   private serviceProfilesSubscription: Subscription;
@@ -129,6 +128,17 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
       });
   }
 
+  isChecked(event) {
+    if (event.target.checked) {
+      this.iotDevice.type = event.target.name;
+    } else if (
+      !event.target.checked &&
+      this.iotDevice.type.toString().includes(event.target.name)
+    ) {
+      event.target.checked = true;
+    }
+  }
+
   getDevice(id: number): void {
     this.deviceSubscription = this.iotDeviceService
       .getIoTDevice(id)
@@ -311,8 +321,14 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
 
   postIoTDevice() {
     this.iotDeviceService.createIoTDevice(this.iotDevice).subscribe(
-      () => {
-        this.router.navigate(['applications/', this.iotDevice.applicationId]);
+      (response: IotDevice) => {
+        this.router.navigate([
+          'applications/' +
+            this.iotDevice.applicationId +
+            '/iot-device/' +
+            response.id +
+            '/details',
+        ]);
       },
       (error: HttpErrorResponse) => {
         this.handleError(error);
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.html b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.html
new file mode 100644
index 000000000..eb30c3d8c
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.html
@@ -0,0 +1,64 @@
+<div class="form-group mt-3 col-12">
+  <label class="form-label" for="authenticationType">{{'QUESTION.MQTT.AUTHENTICATIONTYPE' | translate}}*</label>
+  <select
+    id="authenticationType" class="form-select" name="authenticationType"
+    [(ngModel)]="settings.authenticationType"
+    [value]="settings.authenticationType"
+  >
+    <option *ngFor="let type of AuthenticationType | keyvalue" [value]="type.key">
+      {{'QUESTION.MQTT.' + type.key | translate}}
+    </option>
+  </select>
+</div>
+
+<ng-template [ngIf]="settings.authenticationType === AuthenticationType.PASSWORD">
+  <div class="form-group mt-3 col-12">
+    <label class="form-label" for="username">{{'QUESTION.MQTT.USERNAME-LABEL' | translate}}*</label>
+    <fa-icon
+      [icon]="faQuestionCircle"
+      class="form-info-icon"
+      [matTooltip]="'QUESTION.MQTT.USERNAME-HOVER' | translate"
+      matTooltipPosition="above"
+      matTooltipShowDelay="600"
+      matTooltipHideDelay="2000">
+    </fa-icon>
+    <input
+      type="text"
+      class="form-control"
+      id="username"
+      name="username"
+      [placeholder]="'QUESTION.MQTT.USERNAME-PLACEHOLDER' | translate"
+      required
+      [(ngModel)]="settings.mqttusername"
+      [ngClass]="{
+          'is-invalid': formFailedSubmit && errorFields.includes('mqttusername'),
+          'is-valid': formFailedSubmit && !errorFields.includes('mqttusername')
+        }"
+    />
+  </div>
+  <div class="form-group mt-3 col-12">
+    <label class="form-label" for="password">{{'QUESTION.MQTT.PASSWORD-LABEL' | translate}}*</label>
+    <fa-icon
+      [icon]="faQuestionCircle"
+      class="form-info-icon"
+      [matTooltip]="'QUESTION.MQTT.PASSWORD-HOVER' | translate"
+      matTooltipPosition="above"
+      matTooltipShowDelay="600"
+      matTooltipHideDelay="2000">
+    </fa-icon>
+    <input
+      type="text"
+      class="form-control"
+      id="password"
+      name="password"
+      [placeholder]="'QUESTION.MQTT.PASSWORD-PLACEHOLDER' | translate"
+      required
+      datatype=""
+      [(ngModel)]="settings.mqttpassword"
+      [ngClass]="{
+          'is-invalid': formFailedSubmit && errorFields.includes('mqttpassword'),
+          'is-valid': formFailedSubmit && !errorFields.includes('mqttpassword')
+        }"
+    />
+  </div>
+</ng-template>
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.scss b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.scss
new file mode 100644
index 000000000..276abe9d1
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.scss
@@ -0,0 +1,4 @@
+.form-info-icon {
+  margin-left: 5px;
+  cursor: pointer;
+}
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.ts b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.ts
new file mode 100644
index 000000000..557c2f2ca
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AuthenticationType } from '@shared/enums/authentication-type';
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { MqttSharedSettings } from '@shared/models/mqtt-shared-settings.model';
+
+@Component({
+  selector: 'app-mqtt-authentication-select',
+  templateUrl: './mqtt-authentication-select.component.html',
+  styleUrls: ['./mqtt-authentication-select.component.scss'],
+})
+export class MqttAuthenticationSelectComponent implements OnInit {
+  @Input() settings: MqttSharedSettings;
+  @Input() editMode: boolean = false;
+  @Input() formFailedSubmit: boolean = false;
+  @Input() errorFields: string[];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  protected readonly AuthenticationType = AuthenticationType;
+  protected readonly faQuestionCircle = faQuestionCircle;
+}
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.html b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.html
new file mode 100644
index 000000000..5318ee5db
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.html
@@ -0,0 +1,171 @@
+<form>
+  <div class="row mb-5">
+    <h3>{{'QUESTION.MQTT.TITLE' | translate}}</h3>
+  </div>
+  <div class="form-group mt-3 col-12">
+    <label class="form-label" for="subType">{{'QUESTION.MQTT.SUBTYPE' | translate}}*</label>
+    <fa-icon
+      [icon]="faQuestionCircle"
+      class="form-info-icon"
+      [matTooltip]="'QUESTION.MQTT.SUBTYPE-HOVER' | translate"
+      matTooltipPosition="above"
+      matTooltipShowDelay="600"
+      matTooltipHideDelay="2000">
+    </fa-icon>
+    <select
+      id="subType"
+      class="form-select"
+      name="subType"
+      [(ngModel)]="iotDevice.type"
+      [disabled]="editMode"
+      [value]="iotDevice.type"
+    >
+      <option *ngFor="let type of mqttDeviceTypes" [value]="type">
+        {{'QUESTION.MQTT.' + type | translate}}
+      </option>
+    </select>
+  </div>
+  <ng-template [ngIf]="iotDevice.type === DeviceType.MQTT_INTERNAL_BROKER">
+    <app-mqtt-authentication-select
+      [settings]="iotDevice.mqttInternalBrokerSettings"
+      [editMode]="editMode"
+      [formFailedSubmit]="formFailedSubmit"
+      [errorFields]="errorFields"
+    ></app-mqtt-authentication-select>
+  </ng-template>
+
+  <ng-template [ngIf]="iotDevice.type === DeviceType.MQTT_EXTERNAL_BROKER">
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="brokerUrl">{{'QUESTION.MQTT.BROKER-URL' | translate}}*</label>
+      <input
+        type="text"
+        class="form-control"
+        id="brokerUrl"
+        name="brokerUrl"
+        [placeholder]="'QUESTION.MQTT.BROKER-URL-PLACEHOLDER' | translate"
+        required
+        [(ngModel)]="iotDevice.mqttExternalBrokerSettings.mqttURL"
+        [ngClass]="{
+        'is-invalid': formFailedSubmit && errorFields.includes('mqttURL'),
+        'is-valid': formFailedSubmit && !errorFields.includes('mqttURL')
+        }"
+      />
+    </div>
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="brokerPort">{{'QUESTION.MQTT.BROKER-PORT' | translate}}*</label>
+      <input
+        type="number"
+        class="form-control"
+        id="brokerPort"
+        name="brokerPort"
+        [placeholder]="'QUESTION.MQTT.BROKER-PORT-PLACEHOLDER' | translate"
+        required
+        [(ngModel)]="iotDevice.mqttExternalBrokerSettings.mqttPort"
+        [ngClass]="{
+        'is-invalid': formFailedSubmit && errorFields.includes('mqttPort'),
+        'is-valid': formFailedSubmit && !errorFields.includes('mqttPort')
+        }"
+      />
+    </div>
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="topicPath">{{'QUESTION.MQTT.TOPIC-PATH' | translate}}*</label>
+      <input
+        type="text"
+        class="form-control"
+        id="topicPath"
+        name="topicPath"
+        [placeholder]="'QUESTION.MQTT.TOPIC-PATH-PLACEHOLDER' | translate"
+        required
+        [(ngModel)]="iotDevice.mqttExternalBrokerSettings.mqtttopicname"
+        [ngClass]="{
+        'is-invalid': formFailedSubmit && errorFields.includes('mqtttopicname'),
+        'is-valid': formFailedSubmit && !errorFields.includes('mqtttopicname')
+        }"
+      />
+    </div>
+    <app-mqtt-authentication-select
+      [settings]="iotDevice.mqttExternalBrokerSettings"
+      [editMode]="editMode"
+      [formFailedSubmit]="formFailedSubmit"
+      [errorFields]="errorFields"
+    ></app-mqtt-authentication-select>
+    <ng-container *ngIf="iotDevice.mqttExternalBrokerSettings.authenticationType === AuthenticationType.CERTIFICATE">
+      <div class="form-group mt-3 col-12">
+        <label class="form-label" for="caCertificate">{{'QUESTION.MQTT.CA-CERTIFICATE' | translate}}*</label>
+        <fa-icon
+          [icon]="faQuestionCircle"
+          class="form-info-icon"
+          [matTooltip]="'QUESTION.MQTT.CA-CERTIFICATE-HOVER' | translate"
+          matTooltipPosition="above"
+          matTooltipShowDelay="600"
+          matTooltipHideDelay="2000">
+        </fa-icon>
+        <textarea
+          type="text"
+          class="form-control"
+          id="caCertificate"
+          name="caCertificate"
+          [placeholder]="'QUESTION.MQTT.CERTIFICATE-PLACEHOLDER' | translate"
+          required
+          [(ngModel)]="iotDevice.mqttExternalBrokerSettings.caCertificate"
+          [ngClass]="{
+            'is-invalid': formFailedSubmit && errorFields.includes('caCertificate'),
+            'is-valid': formFailedSubmit && !errorFields.includes('caCertificate')
+          }"
+        ></textarea>
+      </div>
+      <div class="form-group mt-3 col-12">
+        <label class="form-label" for="deviceCertificate">{{'QUESTION.MQTT.DEVICE-CERTIFICATE' | translate}}*</label>
+        <fa-icon
+          [icon]="faQuestionCircle"
+          class="form-info-icon"
+          [matTooltip]="'QUESTION.MQTT.DEVICE-CERTIFICATE-HOVER' | translate"
+          matTooltipPosition="above"
+          matTooltipShowDelay="600"
+          matTooltipHideDelay="2000">
+        </fa-icon>
+        <textarea
+          type="text"
+          class="form-control"
+          id="deviceCertificate"
+          name="deviceCertificate"
+          [placeholder]="'QUESTION.MQTT.CERTIFICATE-PLACEHOLDER' | translate"
+          required
+          [(ngModel)]="iotDevice.mqttExternalBrokerSettings.deviceCertificate"
+          [ngClass]="{
+            'is-invalid': formFailedSubmit && errorFields.includes('deviceCertificate'),
+            'is-valid': formFailedSubmit && !errorFields.includes('deviceCertificate')
+          }"
+        ></textarea>
+      </div>
+      <div class="form-group mt-3 col-12">
+        <label class="form-label" for="deviceCertificateKey">{{'QUESTION.MQTT.DEVICE-CERTIFICATE-KEY' | translate}}*</label>
+        <fa-icon
+          [icon]="faQuestionCircle"
+          class="form-info-icon"
+          [matTooltip]="'QUESTION.MQTT.DEVICE-CERTIFICATE-HOVER' | translate"
+          matTooltipPosition="above"
+          matTooltipShowDelay="600"
+          matTooltipHideDelay="2000">
+        </fa-icon>
+        <textarea
+          type="text"
+          class="form-control"
+          id="deviceCertificateKey"
+          name="deviceCertificateKey"
+          [placeholder]="'QUESTION.MQTT.DEVICE-CERTIFICATE-KEY-PLACEHOLDER' | translate"
+          required
+          [(ngModel)]="iotDevice.mqttExternalBrokerSettings.deviceCertificateKey"
+          [ngClass]="{
+            'is-invalid': formFailedSubmit && errorFields.includes('deviceCertificateKey'),
+            'is-valid': formFailedSubmit && !errorFields.includes('deviceCertificateKey')
+          }"
+        ></textarea>
+      </div>
+    </ng-container>
+  </ng-template>
+  <div class="row mt-2" *ngIf="iotDevice.mqttInternalBrokerSettings?. authenticationType === AuthenticationType.PASSWORD">
+    <strong>OBS!</strong><p>{{ 'QUESTION.MQTT.CERTIFICATE-OBS' | translate }}</p>
+  </div>
+  <div class="row mt-2" *ngIf="iotDevice.mqttExternalBrokerSettings?.authenticationType || iotDevice.mqttInternalBrokerSettings?.authenticationType"><p>{{ 'QUESTION.MQTT.CONFIG-HELP' | translate }}</p></div>
+</form>
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.scss b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.scss
new file mode 100644
index 000000000..276abe9d1
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.scss
@@ -0,0 +1,4 @@
+.form-info-icon {
+  margin-left: 5px;
+  cursor: pointer;
+}
diff --git a/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.ts b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.ts
new file mode 100644
index 000000000..282510dc0
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-device-edit.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IotDevice } from '@applications/iot-devices/iot-device.model';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceType } from '@shared/enums/device-type';
+import { AuthenticationType } from '@shared/enums/authentication-type';
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-mqtt-device-edit',
+  templateUrl: './mqtt-device-edit.component.html',
+  styleUrls: ['./mqtt-device-edit.component.scss'],
+})
+export class MqttDeviceEditComponent implements OnInit {
+  @Input() iotDevice: IotDevice;
+  @Input() formFailedSubmit: boolean = false;
+  @Input() errorFields: string[];
+  @Input() editMode: boolean = false;
+  public mqttDeviceTypes = [
+    DeviceType.MQTT_INTERNAL_BROKER,
+    DeviceType.MQTT_EXTERNAL_BROKER,
+  ];
+
+  constructor(public translate: TranslateService) {}
+
+  ngOnInit(): void {
+    this.translate.use('da');
+    if (this.iotDevice?.id) {
+      this.editMode = true;
+    }
+  }
+
+  protected readonly DeviceType = DeviceType;
+  protected readonly AuthenticationType = AuthenticationType;
+  protected readonly faQuestionCircle = faQuestionCircle;
+}
diff --git a/src/app/applications/iot-devices/iot-device.model.ts b/src/app/applications/iot-devices/iot-device.model.ts
index dc5a3decf..c385a2d21 100644
--- a/src/app/applications/iot-devices/iot-device.model.ts
+++ b/src/app/applications/iot-devices/iot-device.model.ts
@@ -6,6 +6,8 @@ import { JsonLocation } from '@shared/models/Json-location.model';
 import { LorawanSettings } from '@shared/models/lorawan-settings.model';
 import { ReceivedMessageMetadata } from '@shared/models/received-message-metadata.model';
 import { LatestReceivedMessage } from './latestReceivedMessage.model';
+import { MqttInternalBrokerSettings } from '@shared/models/mqtt-broker-settings.model';
+import { MqttExternalBrokerSettings } from '@shared/models/mqtt-subscriber-settings.model';
 
 export class IotDevice {
   name: string;
@@ -31,6 +33,8 @@ export class IotDevice {
   latestReceivedMessage: LatestReceivedMessage;
   lorawanSettings = new LorawanSettings();
   sigfoxSettings = new SigfoxSettings();
+  mqttInternalBrokerSettings = new MqttInternalBrokerSettings();
+  mqttExternalBrokerSettings = new MqttExternalBrokerSettings();
   deviceModel?: DeviceModel;
 }
 
diff --git a/src/app/applications/iot-devices/iot-device.service.ts b/src/app/applications/iot-devices/iot-device.service.ts
index 99eb12af2..a6f4be1ad 100644
--- a/src/app/applications/iot-devices/iot-device.service.ts
+++ b/src/app/applications/iot-devices/iot-device.service.ts
@@ -1,85 +1,112 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { IotDevice, IoTDevicesMinimalResponse, IotDevicesImportResponse, IotDeviceImportRequest, IoTDeviceStatsResponse } from './iot-device.model';
+import {
+  IotDevice,
+  IoTDevicesMinimalResponse,
+  IotDevicesImportResponse,
+  IotDeviceImportRequest,
+  IoTDeviceStatsResponse,
+} from './iot-device.model';
 import { RestService } from 'src/app/shared/services/rest.service';
 import { map } from 'rxjs/operators';
 import { UserMinimalService } from '@app/admin/users/user-minimal.service';
 
 @Injectable({
-    providedIn: 'root',
+  providedIn: 'root',
 })
 export class IoTDeviceService {
+  private BASEURL = 'iot-device';
 
-    private BASEURL = 'iot-device';
+  constructor(
+    private restService: RestService,
+    private userMinimalService: UserMinimalService
+  ) {}
 
-    constructor(
-        private restService: RestService,
-        private userMinimalService: UserMinimalService
-        ) { }
+  createIoTDevice(body: IotDevice): Observable<IotDevice> {
+    return this.restService.post(this.BASEURL, body);
+  }
 
-    createIoTDevice(body: IotDevice): Observable<IotDevice> {
-        return this.restService.post(this.BASEURL, body);
-    }
+  updateIoTDevice(body: IotDevice, id: number): Observable<IotDevice> {
+    return this.restService.put(this.BASEURL, body, id, {
+      observe: 'response',
+    });
+  }
 
-    updateIoTDevice(body: IotDevice, id: number): Observable<IotDevice> {
-        return this.restService.put(this.BASEURL, body, id, { observe: 'response' });
-    }
+  createIoTDevices(
+    body: IotDeviceImportRequest
+  ): Observable<IotDevicesImportResponse[]> {
+    return this.restService.post(`${this.BASEURL}/createMany`, body);
+  }
 
-    createIoTDevices(body: IotDeviceImportRequest): Observable<IotDevicesImportResponse[]> {
-        return this.restService.post(`${this.BASEURL}/createMany`, body);
-    }
+  updateIoTDevices(
+    body: IotDeviceImportRequest
+  ): Observable<IotDevicesImportResponse[]> {
+    return this.restService.post(`${this.BASEURL}/updateMany`, body);
+  }
 
-    updateIoTDevices(body: IotDeviceImportRequest): Observable<IotDevicesImportResponse[]> {
-        return this.restService.post(`${this.BASEURL}/updateMany`, body);
-    }
+  getIoTDevice(id: number): Observable<IotDevice> {
+    return this.restService.get(this.BASEURL, {}, id).pipe(
+      map((response: IotDevice) => {
+        return {
+          name: response.name,
+          application: response.application,
+          location: response.location,
+          commentOnLocation: response.commentOnLocation,
+          comment: response.comment,
+          type: response.type,
+          receivedMessagesMetadata: response.receivedMessagesMetadata,
+          metadata: response.metadata,
+          apiKey: response.apiKey,
+          id: response.id,
+          createdAt: response.createdAt,
+          updatedAt: response.updatedAt,
+          applicationId: response.applicationId,
+          longitude: response.longitude,
+          latitude: response.latitude,
+          deviceModelId: response.deviceModel?.id,
+          latestReceivedMessage: response.latestReceivedMessage,
+          lorawanSettings: response.lorawanSettings,
+          sigfoxSettings: response.sigfoxSettings,
+          mqttInternalBrokerSettings: response.mqttInternalBrokerSettings,
+          mqttExternalBrokerSettings: response.mqttExternalBrokerSettings,
+          createdBy: response.createdBy,
+          updatedBy: response.updatedBy,
+          createdByName: this.userMinimalService.getUserNameFrom(
+            response.createdBy
+          ),
+          updatedByName: this.userMinimalService.getUserNameFrom(
+            response.updatedBy
+          ),
+        };
+      })
+    );
+  }
 
-    getIoTDevice(id: number): Observable<IotDevice> {
-        return this.restService.get(this.BASEURL, {}, id).pipe(
-            map(
-                (response: IotDevice) => {
-                    return {
-                        name: response.name,
-                        application: response.application,
-                        location: response.location,
-                        commentOnLocation: response.commentOnLocation,
-                        comment: response.comment,
-                        type: response.type,
-                        receivedMessagesMetadata: response.receivedMessagesMetadata,
-                        metadata: response.metadata,
-                        apiKey: response.apiKey,
-                        id: response.id,
-                        createdAt: response.createdAt,
-                        updatedAt: response.updatedAt,
-                        applicationId: response.applicationId,
-                        longitude: response.longitude,
-                        latitude: response.latitude,
-                        deviceModelId: response.deviceModel?.id,
-                        latestReceivedMessage: response.latestReceivedMessage,
-                        lorawanSettings: response.lorawanSettings,
-                        sigfoxSettings: response.sigfoxSettings,
-                        createdBy: response.createdBy,
-                        updatedBy: response.updatedBy,
-                        createdByName: this.userMinimalService.getUserNameFrom(response.createdBy),
-                        updatedByName: this.userMinimalService.getUserNameFrom(response.updatedBy)
-                    };
-                }
-            )
-        );
-    }
+  getIoTDevicesUsingPayloadDecoderMinimal(
+    payloadDecoderId: number,
+    limit: number,
+    offset: number
+  ): Observable<IoTDevicesMinimalResponse> {
+    return this.restService.get(
+      `${this.BASEURL}/minimalByPayloadDecoder`,
+      { limit, offset },
+      payloadDecoderId
+    );
+  }
 
-    getIoTDevicesUsingPayloadDecoderMinimal(payloadDecoderId: number, limit: number, offset: number): Observable<IoTDevicesMinimalResponse> {
-        return this.restService.get(`${this.BASEURL}/minimalByPayloadDecoder`, {limit, offset}, payloadDecoderId);
-    }
+  deleteIoTDevice(id: number) {
+    return this.restService.delete(this.BASEURL, id);
+  }
 
-    deleteIoTDevice(id: number) {
-        return this.restService.delete(this.BASEURL, id);
-    }
+  getDeviceStats(id: number): Observable<IoTDeviceStatsResponse[]> {
+    return this.restService.get(`${this.BASEURL}/stats`, null, id);
+  }
 
-    getDeviceStats(id: number): Observable<IoTDeviceStatsResponse[]> {
-      return this.restService.get(`${this.BASEURL}/stats`, null, id);
-    }
-
-    resetHttpDeviceApiKey(id: number): Observable<Pick<IotDevice, 'apiKey'>> {
-      return this.restService.put(`${this.BASEURL}/resetHttpDeviceApiKey`, null, id);
-    }
+  resetHttpDeviceApiKey(id: number): Observable<Pick<IotDevice, 'apiKey'>> {
+    return this.restService.put(
+      `${this.BASEURL}/resetHttpDeviceApiKey`,
+      null,
+      id
+    );
+  }
 }
diff --git a/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.html b/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.html
new file mode 100644
index 000000000..ade88d38d
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.html
@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{'DIALOG.EXPORT-CSV.TITLE' | translate}}</h1>
+<div mat-dialog-content>
+  {{ 'DIALOG.EXPORT-CSV.BODY' | translate }}
+</div>
+<div mat-dialog-actions class="d-flex flex-row">
+  <button mat-dialog-close [mat-dialog-close]="true" class="btn btn-primary">
+    {{ 'DIALOG.OK' | translate }}
+  </button>
+  <button mat-dialog-close [mat-dialog-close]="false" class="btn btn-secondary ml-2">
+    {{ 'DIALOG.CLOSE' | translate}}
+  </button>
+</div>
diff --git a/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.scss b/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.ts b/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.ts
new file mode 100644
index 000000000..054c0041d
--- /dev/null
+++ b/src/app/applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component.ts
@@ -0,0 +1,17 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DialogModel } from '@shared/models/dialog.model';
+
+@Component({
+  selector: 'export-csv-dialog',
+  templateUrl: './export-csv-dialog.component.html',
+  styleUrls: ['./export-csv-dialog.component.scss'],
+})
+export class ExportCsvDialogComponent implements OnInit {
+  constructor(
+    public dialog: MatDialogRef<ExportCsvDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogModel: DialogModel
+  ) {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.html b/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.html
index 045efac8a..78a27c582 100644
--- a/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.html
+++ b/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.html
@@ -2,10 +2,18 @@
   <div class="row">
     <div class="col-sm-12">
       <div class="jumbotron">
+        <div class="col-12">
+          <mat-progress-bar *ngIf="download$ | async as download"
+                            [mode]="download.state === 'PENDING' ? 'buffer' : 'determinate'" [value]="download.progress" class="mb-5">
+          </mat-progress-bar>
+        </div>
         <div *ngIf="applicationService.canEdit else readOnly">
-          <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate"
-                             [ctaLabelPrimary]="'FORM.CREATE-NEW-IOT-DEVICE' | translate" [ctaRouterLinkPrimary]="'../new-iot-device'"
-                             [ctaLabelSecondary]="'APPLICATION.IMPORT-CSV' | translate" [ctaRouterLinkSecondary]="'../bulk-import'">
+          <app-top-bar-table
+            [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate"
+            [ctaLabelPrimary]="'FORM.CREATE-NEW-IOT-DEVICE' | translate" [ctaRouterLinkPrimary]="'../new-iot-device'"
+            [ctaLabelSecondary]="'APPLICATION.IMPORT-CSV' | translate" [ctaRouterLinkSecondary]="'../bulk-import'"
+            [ctaActionButtonLabel]="'APPLICATION.EXPORT-CSV' | translate" [ctaActionButtonOnClick]="openDialogFunc"
+          >
           </app-top-bar-table>
         </div>
         <ng-template #readOnly>
diff --git a/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.ts b/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.ts
index e87042809..ef79b7efa 100644
--- a/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.ts
+++ b/src/app/applications/iot-devices/iot-devices-tab/iot-devices-tab.component.ts
@@ -1,5 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ApplicationService } from '@applications/application.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ExportCsvDialogComponent } from '@applications/iot-devices/iot-devices-tab/export-csv-dialog/export-csv-dialog.component';
+import { RestService } from '@shared/services/rest.service';
+import { Download } from '@shared/helpers/download.helper';
+import { DownloadService } from '@shared/services/download.service';
+import { environment } from '@environments/environment';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-iot-devices-tab',
@@ -7,7 +14,35 @@ import { ApplicationService } from '@applications/application.service';
   styleUrls: ['./iot-devices-tab.component.scss'],
 })
 export class IotDevicesTabComponent implements OnInit {
-  constructor(public applicationService: ApplicationService) {}
+  download$: Observable<Download>;
+  private applicationId: number;
 
-  ngOnInit(): void {}
+  constructor(
+    public applicationService: ApplicationService,
+    private dialog: MatDialog,
+    private downloader: DownloadService
+  ) {}
+  ngOnInit(): void {
+    this.applicationId = this.applicationService.id;
+  }
+
+  get openDialogFunc() {
+    return this.openExportCsvDialog.bind(this);
+  }
+
+  public openExportCsvDialog() {
+    const dialog = this.dialog.open(ExportCsvDialogComponent);
+
+    dialog.afterClosed().subscribe(async (result) => {
+      if (result) {
+        // Start csv download
+        this.download$ = this.downloader.download(
+          environment.baseUrl +
+            'iot-device/getDevicesMetadataCsv/' +
+            this.applicationId,
+          'iotDeviceMetadata.csv'
+        );
+      }
+    });
+  }
 }
diff --git a/src/app/applications/iot-devices/iot-devices.module.ts b/src/app/applications/iot-devices/iot-devices.module.ts
index 30826a11c..36a9c2422 100644
--- a/src/app/applications/iot-devices/iot-devices.module.ts
+++ b/src/app/applications/iot-devices/iot-devices.module.ts
@@ -26,6 +26,13 @@ import { IotDeviceHistoryTabComponent } from './iot-device-detail/iot-device-his
 import { IotDeviceDetailsTabComponent } from './iot-device-detail/iot-device-details-tab/iot-device-details-tab.component';
 import { IotDeviceDataPacketsTabComponent } from './iot-device-detail/iot-device-data-packets-tab/iot-device-data-packets-tab.component';
 import { IotDeviceDownlinkTabComponent } from './iot-device-detail/iot-device-downlink-tab/iot-device-downlink-tab.component';
+import { MqttDeviceEditComponent } from './iot-device-edit/mqtt-device-edit/mqtt-device-edit.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MqttAuthenticationSelectComponent } from './iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { ExportCsvDialogComponent } from './iot-devices-tab/export-csv-dialog/export-csv-dialog.component';
+import { IotDeviceDetailsMqttInternalBrokerComponent } from '@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component';
+import { IotDeviceDetailsMqttExternalBrokerComponent } from '@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +53,11 @@ import { IotDeviceDownlinkTabComponent } from './iot-device-detail/iot-device-do
     IotDeviceDetailsTabComponent,
     IotDeviceDataPacketsTabComponent,
     IotDeviceDownlinkTabComponent,
+    MqttDeviceEditComponent,
+    IotDeviceDetailsMqttInternalBrokerComponent,
+    MqttAuthenticationSelectComponent,
+    IotDeviceDetailsMqttExternalBrokerComponent,
+    ExportCsvDialogComponent,
   ],
   exports: [IotDevicesTableComponent, IoTDeviceDetailComponent],
   imports: [
@@ -59,6 +71,8 @@ import { IotDeviceDownlinkTabComponent } from './iot-device-detail/iot-device-do
     PipesModule,
     MonacoEditorModule,
     GraphModule,
+    FontAwesomeModule,
+    ClipboardModule,
   ],
 })
 export class IotDevicesModule {}
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
index a1bb57202..2bea15778 100644
--- a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
+++ b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
@@ -1,242 +1,265 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { TranslateService } from '@ngx-translate/core';
-import { RestService } from '@shared/services/rest.service';
-import { HttpErrorResponse } from '@angular/common/http';
-import { ApplicationRequest, Application } from '@applications/application.model';
-import { ApplicationService } from '@applications/application.service';
-import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
-import { ApplicationStatus, ApplicationStatusEntries } from '@applications/enums/status.enum';
-import { UntypedFormControl } from '@angular/forms';
-import { ControlledPropertyTypes } from '@app/device-model/Enums/controlled-propperty.enum';
-import { ApplicationDeviceTypes, ApplicationDeviceTypeEntries } from '@shared/enums/device-type';
-import { isPhoneNumberValid } from '@shared/validators/phone-number.validator';
-
-
-export class User {
-    public name: string;
-    public email: string;
-    public password: string;
-    public hobbies: string;
-}
-
-interface DropdownOption {
-  label: string;
-  value: string | number;
-}
-
-@Component({
-    selector: 'app-form-body-application',
-    templateUrl: './form-body-application.component.html',
-    styleUrls: ['./form-body-application.component.scss'],
-})
-export class FormBodyApplicationComponent implements OnInit, OnDestroy {
-    @Input() submitButton: string;
-    public payLoad = '';
-    public applicationsSubscription: Subscription;
-    public errorMessage: string;
-    public errorMessages: string[];
-    public errorFields: string[];
-    public formFailedSubmit = false;
-    private id: number;
-
-    application = new ApplicationRequest();
-    model = new User();
-    statuses: DropdownOption[] = [];
-    serializedStartDate = new UntypedFormControl();
-    serializedEndDate = new UntypedFormControl();
-    phoneCtrl: UntypedFormControl;
-    controlledProperties = Object.values(ControlledPropertyTypes);
-    deviceTypes: DropdownOption[] = [];
-
-    constructor(
-        private restService: RestService,
-        private applicationService: ApplicationService,
-        private route: ActivatedRoute,
-        public translate: TranslateService,
-        private router: Router,
-        private sharedVariableService: SharedVariableService
-    ) {
-      this.fillDefaultMetadata();
-      this.phoneCtrl = new UntypedFormControl(this.application.contactPhone, [isPhoneNumberValid()]);
-     }
-
-    ngOnInit(): void {
-        this.translate.use('da');
-        this.id = +this.route.snapshot.paramMap.get('id');
-        if (this.id) {
-            this.getApplication(this.id);
-        }
-
-        const statusTranslationPrefix = 'APPLICATION.STATUS.';
-        const statusTranslationKeys = ApplicationStatusEntries.map((x) => `${statusTranslationPrefix}${x.key}`);
-        const deviceTypeTranslationPrefix = 'IOT-DEVICE-TYPES.';
-        const deviceTypeTranslationKeys = ApplicationDeviceTypeEntries.map((x) => `${deviceTypeTranslationPrefix}${x.key}`);
-        this.translate
-          .get([...statusTranslationKeys, ...deviceTypeTranslationKeys, deviceTypeTranslationPrefix + 'OTHER'])
-          .subscribe((translations) => {
-            // Populate the dropdown options with a translated label and the enum value
-            const statusOptions: DropdownOption[] = ApplicationStatusEntries.map(
-              (entry) => ({
-                label: translations[statusTranslationPrefix + entry.key],
-                value: ApplicationStatus[entry.key],
-              })
-            );
-            this.statuses.push(...statusOptions);
-
-            const deviceTypeOptions: DropdownOption[] = ApplicationDeviceTypeEntries.map(
-              (entry) => ({
-                label: translations[deviceTypeTranslationPrefix + entry.key],
-                value: ApplicationDeviceTypes[entry.key],
-              })
-            );
-            this.deviceTypes.push(...deviceTypeOptions);
-          });
-    }
-
-    fillDefaultMetadata() {
-      this.application.status = this.application.status ?? ApplicationStatus['NONE'];
-    }
-
-    getApplication(id: number): void {
-        this.applicationsSubscription = this.restService
-            .get('application', {}, id)
-            .subscribe((application: Application) => {
-                this.application = new ApplicationRequest();
-                this.application.name = application.name;
-                this.application.description = application.description;
-                this.application.organizationId = application.belongsTo.id;
-                this.application.status = application.status;
-                this.application.startDate = application.startDate;
-                this.application.endDate = application.endDate;
-
-                if (this.application.startDate) {
-                  this.serializedStartDate.setValue(
-                    new Date(this.application.startDate)
-                  );
-                }
-                if (this.application.endDate) {
-                  this.serializedEndDate.setValue(
-                    new Date(this.application.endDate)
-                  );
-                }
-                this.application.category = application.category;
-                this.application.owner = application.owner;
-                this.application.contactPerson = application.contactPerson;
-                this.application.contactEmail = application.contactEmail;
-                this.application.contactPhone = application.contactPhone;
-                this.phoneCtrl.setValue(application.contactPhone);
-                this.application.personalData = application.personalData;
-                this.application.hardware = application.hardware;
-                this.application.controlledProperties = application.controlledProperties.map(
-                  (ctrlProperty) => ctrlProperty.type
-                );
-                this.application.deviceTypes = application.deviceTypes.map(
-                  (deviceType) => deviceType.type
-                );
-
-                this.fillDefaultMetadata();
-            });
-    }
-
-    onSubmit(): void {
-        if (this.serializedStartDate.invalid) {
-            // Depending on what date component is used, it might use its own highlighting
-            this.handleError(this.buildErrorMessage('MESSAGE.INVALID-DATE'), 'application.startDate');
-            return;
-        } else if (this.serializedEndDate.invalid) {
-            this.handleError(this.buildErrorMessage('MESSAGE.INVALID-DATE'), 'application.endDate');
-            return;
-        }
-
-        this.application.organizationId = this.sharedVariableService.getSelectedOrganisationId();
-        this.application.startDate = this.serializedStartDate.value?.toISOString();
-        this.application.endDate = this.serializedEndDate.value?.toISOString();
-        this.application.contactPhone = this.phoneCtrl.value ? this.phoneCtrl.value : null;
-
-        if (this.id) {
-            this.updateApplication(this.id);
-        } else {
-            this.postApplication();
-        }
-    }
-
-    private buildErrorMessage(message: string): Pick<HttpErrorResponse, 'error'> {
-      return {
-        error: {
-          message,
-        },
-      };
-    }
-
-    updateApplication(id: number): void {
-        this.applicationService
-            .updateApplication(this.application, id)
-            .subscribe(
-                (response) => {
-                    console.log(response);
-                    this.router.navigateByUrl('/applications');
-                },
-                (error: HttpErrorResponse) => {
-                    this.handleError(error);
-                }
-            );
-    }
-
-    postApplication(): void {
-        this.applicationService
-            .createApplication(this.application)
-            .subscribe(
-                () => {
-                    this.router.navigateByUrl('/applications');
-                },
-                (error: HttpErrorResponse) => {
-                    this.handleError(error);
-                }
-            );
-    }
-
-    private handleError(error: Pick<HttpErrorResponse, 'error'>, errorField?: string) {
-        this.errorFields = [];
-        this.errorMessages = [];
-
-        // Temp fix till we standardise backend error handling
-        if (error.error?.message[0]?.property) {
-            this.externalError(error);
-        } else {
-            this.backendError(error, errorField);
-        }
-
-        this.formFailedSubmit = true;
-    }
-
-    externalError(error: Pick<HttpErrorResponse, 'error'>) {
-        error.error.message.forEach((err) => {
-            this.errorFields.push(err.property);
-            this.errorMessages = this.errorMessages.concat(
-                Object.values(err.constraints)
-            );
-        });
-        this.formFailedSubmit = true;
-    }
-
-    backendError(error: Pick<HttpErrorResponse, 'error'>, errorField = 'name') {
-        this.translate.get([error.error.message])
-            .subscribe(translations => {
-                this.errorMessages.push(translations[error.error.message]);
-            });
-        this.errorFields.push(errorField);
-    }
-
-    routeBack(): void {
-        this.router.navigateByUrl('/applications');
-    }
-
-    ngOnDestroy() {
-        // prevent memory leak by unsubscribing
-        if (this.applicationsSubscription) {
-            this.applicationsSubscription.unsubscribe();
-        }
-    }
-}
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import { RestService } from '@shared/services/rest.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import {
+  ApplicationRequest,
+  Application,
+} from '@applications/application.model';
+import { ApplicationService } from '@applications/application.service';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
+import {
+  ApplicationStatus,
+  ApplicationStatusEntries,
+} from '@applications/enums/status.enum';
+import { UntypedFormControl } from '@angular/forms';
+import { ControlledPropertyTypes } from '@app/device-model/Enums/controlled-propperty.enum';
+import {
+  ApplicationDeviceTypes,
+  ApplicationDeviceTypeEntries,
+} from '@shared/enums/device-type';
+import { isPhoneNumberValid } from '@shared/validators/phone-number.validator';
+
+export class User {
+  public name: string;
+  public email: string;
+  public password: string;
+  public hobbies: string;
+}
+
+interface DropdownOption {
+  label: string;
+  value: string | number;
+}
+
+@Component({
+  selector: 'app-form-body-application',
+  templateUrl: './form-body-application.component.html',
+  styleUrls: ['./form-body-application.component.scss'],
+})
+export class FormBodyApplicationComponent implements OnInit, OnDestroy {
+  @Input() submitButton: string;
+  public payLoad = '';
+  public applicationsSubscription: Subscription;
+  public errorMessage: string;
+  public errorMessages: string[];
+  public errorFields: string[];
+  public formFailedSubmit = false;
+  private id: number;
+
+  application = new ApplicationRequest();
+  model = new User();
+  statuses: DropdownOption[] = [];
+  serializedStartDate = new UntypedFormControl();
+  serializedEndDate = new UntypedFormControl();
+  phoneCtrl: UntypedFormControl;
+  controlledProperties = Object.values(ControlledPropertyTypes);
+  deviceTypes: DropdownOption[] = [];
+
+  constructor(
+    private restService: RestService,
+    private applicationService: ApplicationService,
+    private route: ActivatedRoute,
+    public translate: TranslateService,
+    private router: Router,
+    private sharedVariableService: SharedVariableService
+  ) {
+    this.fillDefaultMetadata();
+    this.phoneCtrl = new UntypedFormControl(this.application.contactPhone, [
+      isPhoneNumberValid(),
+    ]);
+  }
+
+  ngOnInit(): void {
+    this.translate.use('da');
+    this.id = +this.route.snapshot.paramMap.get('id');
+    if (this.id) {
+      this.getApplication(this.id);
+    }
+
+    const statusTranslationPrefix = 'APPLICATION.STATUS.';
+    const statusTranslationKeys = ApplicationStatusEntries.map(
+      (x) => `${statusTranslationPrefix}${x.key}`
+    );
+    const deviceTypeTranslationPrefix = 'IOT-DEVICE-TYPES.';
+    const deviceTypeTranslationKeys = ApplicationDeviceTypeEntries.map(
+      (x) => `${deviceTypeTranslationPrefix}${x.key}`
+    );
+    this.translate
+      .get([
+        ...statusTranslationKeys,
+        ...deviceTypeTranslationKeys,
+        deviceTypeTranslationPrefix + 'OTHER',
+      ])
+      .subscribe((translations) => {
+        // Populate the dropdown options with a translated label and the enum value
+        const statusOptions: DropdownOption[] = ApplicationStatusEntries.map(
+          (entry) => ({
+            label: translations[statusTranslationPrefix + entry.key],
+            value: ApplicationStatus[entry.key],
+          })
+        );
+        this.statuses.push(...statusOptions);
+
+        const deviceTypeOptions: DropdownOption[] = ApplicationDeviceTypeEntries.filter(
+          (e) => !['MQTT'].includes(e.key)
+        ).map((entry) => ({
+          label: translations[deviceTypeTranslationPrefix + entry.key],
+          value: ApplicationDeviceTypes[entry.key],
+        }));
+        this.deviceTypes.push(...deviceTypeOptions);
+      });
+  }
+
+  fillDefaultMetadata() {
+    this.application.status =
+      this.application.status ?? ApplicationStatus['NONE'];
+  }
+
+  getApplication(id: number): void {
+    this.applicationsSubscription = this.restService
+      .get('application', {}, id)
+      .subscribe((application: Application) => {
+        this.application = new ApplicationRequest();
+        this.application.name = application.name;
+        this.application.description = application.description;
+        this.application.organizationId = application.belongsTo.id;
+        this.application.status = application.status;
+        this.application.startDate = application.startDate;
+        this.application.endDate = application.endDate;
+
+        if (this.application.startDate) {
+          this.serializedStartDate.setValue(
+            new Date(this.application.startDate)
+          );
+        }
+        if (this.application.endDate) {
+          this.serializedEndDate.setValue(new Date(this.application.endDate));
+        }
+        this.application.category = application.category;
+        this.application.owner = application.owner;
+        this.application.contactPerson = application.contactPerson;
+        this.application.contactEmail = application.contactEmail;
+        this.application.contactPhone = application.contactPhone;
+        this.phoneCtrl.setValue(application.contactPhone);
+        this.application.personalData = application.personalData;
+        this.application.hardware = application.hardware;
+        this.application.controlledProperties = application.controlledProperties.map(
+          (ctrlProperty) => ctrlProperty.type
+        );
+        this.application.deviceTypes = application.deviceTypes.map(
+          (deviceType) => deviceType.type
+        );
+
+        this.fillDefaultMetadata();
+      });
+  }
+
+  onSubmit(): void {
+    if (this.serializedStartDate.invalid) {
+      // Depending on what date component is used, it might use its own highlighting
+      this.handleError(
+        this.buildErrorMessage('MESSAGE.INVALID-DATE'),
+        'application.startDate'
+      );
+      return;
+    } else if (this.serializedEndDate.invalid) {
+      this.handleError(
+        this.buildErrorMessage('MESSAGE.INVALID-DATE'),
+        'application.endDate'
+      );
+      return;
+    }
+
+    this.application.organizationId = this.sharedVariableService.getSelectedOrganisationId();
+    this.application.startDate = this.serializedStartDate.value?.toISOString();
+    this.application.endDate = this.serializedEndDate.value?.toISOString();
+    this.application.contactPhone = this.phoneCtrl.value
+      ? this.phoneCtrl.value
+      : null;
+
+    if (this.id) {
+      this.updateApplication(this.id);
+    } else {
+      this.postApplication();
+    }
+  }
+
+  private buildErrorMessage(message: string): Pick<HttpErrorResponse, 'error'> {
+    return {
+      error: {
+        message,
+      },
+    };
+  }
+
+  updateApplication(id: number): void {
+    this.applicationService.updateApplication(this.application, id).subscribe(
+      (response) => {
+        console.log(response);
+        this.router.navigateByUrl('/applications');
+      },
+      (error: HttpErrorResponse) => {
+        this.handleError(error);
+      }
+    );
+  }
+
+  postApplication(): void {
+    this.applicationService.createApplication(this.application).subscribe(
+      () => {
+        this.router.navigateByUrl('/applications');
+      },
+      (error: HttpErrorResponse) => {
+        this.handleError(error);
+      }
+    );
+  }
+
+  private handleError(
+    error: Pick<HttpErrorResponse, 'error'>,
+    errorField?: string
+  ) {
+    this.errorFields = [];
+    this.errorMessages = [];
+
+    // Temp fix till we standardise backend error handling
+    if (error.error?.message[0]?.property) {
+      this.externalError(error);
+    } else {
+      this.backendError(error, errorField);
+    }
+
+    this.formFailedSubmit = true;
+  }
+
+  externalError(error: Pick<HttpErrorResponse, 'error'>) {
+    error.error.message.forEach((err) => {
+      this.errorFields.push(err.property);
+      this.errorMessages = this.errorMessages.concat(
+        Object.values(err.constraints)
+      );
+    });
+    this.formFailedSubmit = true;
+  }
+
+  backendError(error: Pick<HttpErrorResponse, 'error'>, errorField = 'name') {
+    this.translate.get([error.error.message]).subscribe((translations) => {
+      this.errorMessages.push(translations[error.error.message]);
+    });
+    this.errorFields.push(errorField);
+  }
+
+  routeBack(): void {
+    this.router.navigateByUrl('/applications');
+  }
+
+  ngOnDestroy() {
+    // prevent memory leak by unsubscribing
+    if (this.applicationsSubscription) {
+      this.applicationsSubscription.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/shared/components/top-bar-table/top-bar-table.component.html b/src/app/shared/components/top-bar-table/top-bar-table.component.html
index ec0849cdb..0bf68faff 100644
--- a/src/app/shared/components/top-bar-table/top-bar-table.component.html
+++ b/src/app/shared/components/top-bar-table/top-bar-table.component.html
@@ -1,26 +1,34 @@
 <div class="row sub-bar-wrapper">
-    <div class="col-12 d-flex sub-bar align-items-center">
-        <h3 *ngIf="title" class="mb-0">{{title}}</h3>
-        <div class="ml-auto d-flex">
-            <div>
-                <button *ngIf="ctaRouterLinkSecondary" [routerLink]="ctaRouterLinkSecondary" routerLinkActive="active"
-                    class="btn btn-secondary" type="button"
-                    [attr.aria-label]="ctaLabelSecondary">{{ctaLabelSecondary}}</button>
+  <div class="col-12 d-flex sub-bar align-items-center">
+    <h3 *ngIf="title" class="mb-0">{{title}}</h3>
+    <div class="ml-auto d-flex">
+      <div>
+        <button
+          *ngIf="ctaActionButtonOnClick"
+          (click)="ctaActionButtonOnClick()"
+          class="btn btn-secondary"
+          type="button"
+          [attr.aria-label]="ctaActionButtonLabel">
+          {{ctaActionButtonLabel}}
+        </button>
+        <button *ngIf="ctaRouterLinkSecondary" [routerLink]="ctaRouterLinkSecondary" routerLinkActive="active"
+                class="btn btn-secondary" type="button"
+                [attr.aria-label]="ctaLabelSecondary">{{ctaLabelSecondary}}</button>
 
-                <button *ngIf="ctaRouterLinkPrimary" [routerLink]="ctaRouterLinkPrimary" routerLinkActive="active"
-                    class="btn btn-primary" type="button"
-                    [attr.aria-label]="ctaLabelPrimary">{{ctaLabelPrimary}}</button>
+        <button *ngIf="ctaRouterLinkPrimary" [routerLink]="ctaRouterLinkPrimary" routerLinkActive="active"
+                class="btn btn-primary" type="button"
+                [attr.aria-label]="ctaLabelPrimary">{{ctaLabelPrimary}}</button>
 
-                <mat-form-field appearance="fill" *ngIf="addDropdown">
-                    <mat-label>{{dropdownLabel}}</mat-label>
-                    <mat-select [placeholder]="dropdownLabel" [(value)]="selectedOpt">
-                        <mat-option (click)="setOptionToNull()">--{{dropdownDefaultOption}}--</mat-option>
-                        <mat-option *ngFor="let option of options" [value]="option.id" (click)="setOptionToParent()">
-                            {{option.name}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
+        <mat-form-field appearance="fill" *ngIf="addDropdown">
+          <mat-label>{{dropdownLabel}}</mat-label>
+          <mat-select [placeholder]="dropdownLabel" [(value)]="selectedOpt">
+            <mat-option (click)="setOptionToNull()">--{{dropdownDefaultOption}}--</mat-option>
+            <mat-option *ngFor="let option of options" [value]="option.id" (click)="setOptionToParent()">
+              {{option.name}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/app/shared/components/top-bar-table/top-bar-table.component.ts b/src/app/shared/components/top-bar-table/top-bar-table.component.ts
index 7419f74ce..7e3953161 100644
--- a/src/app/shared/components/top-bar-table/top-bar-table.component.ts
+++ b/src/app/shared/components/top-bar-table/top-bar-table.component.ts
@@ -1,11 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-top-bar-table',
   templateUrl: './top-bar-table.component.html',
-  styleUrls: ['./top-bar-table.component.scss']
+  styleUrls: ['./top-bar-table.component.scss'],
 })
 export class TopBarTableComponent implements OnInit {
   @Input() title: string;
@@ -13,6 +14,8 @@ export class TopBarTableComponent implements OnInit {
   @Input() ctaRouterLinkPrimary: string;
   @Input() ctaLabelSecondary: string;
   @Input() ctaRouterLinkSecondary: string;
+  @Input() ctaActionButtonLabel: string;
+  @Input() ctaActionButtonOnClick: Function;
   @Input() component: false;
   @Input() backButtonTitle: string;
 
@@ -23,14 +26,11 @@ export class TopBarTableComponent implements OnInit {
   @Input() dropdownLabel: string;
   @Input() dropdownDefaultOption: string;
 
-
-  constructor(
-    public translate: TranslateService,
-    private location: Location) {
+  constructor(public translate: TranslateService, private location: Location) {
     translate.use('da');
   }
 
-  ngOnInit(): void { }
+  ngOnInit(): void {}
 
   routeBack(): void {
     this.location.back();
@@ -44,5 +44,4 @@ export class TopBarTableComponent implements OnInit {
   setOptionToParent() {
     this.updateSelectedOpt.emit(this.selectedOpt);
   }
-
 }
diff --git a/src/app/shared/enums/authentication-type.ts b/src/app/shared/enums/authentication-type.ts
new file mode 100644
index 000000000..971b15420
--- /dev/null
+++ b/src/app/shared/enums/authentication-type.ts
@@ -0,0 +1,4 @@
+export enum AuthenticationType {
+  PASSWORD = 'PASSWORD',
+  CERTIFICATE = 'CERTIFICATE',
+}
diff --git a/src/app/shared/enums/device-type.ts b/src/app/shared/enums/device-type.ts
index eea58dde6..2a5f8d12f 100644
--- a/src/app/shared/enums/device-type.ts
+++ b/src/app/shared/enums/device-type.ts
@@ -4,13 +4,19 @@ export enum DeviceType {
   GENERIC_HTTP = 'GENERIC_HTTP',
   LORAWAN = 'LORAWAN',
   SIGFOX = 'SIGFOX',
+  MQTT = 'MQTT',
+  MQTT_INTERNAL_BROKER = 'MQTT_INTERNAL_BROKER',
+  MQTT_EXTERNAL_BROKER = 'MQTT_EXTERNAL_BROKER',
 }
 
 enum ApplicationExtraDeviceType {
   OTHER = 'OTHER',
 }
 
-export type ApplicationDeviceTypeUnion = DeviceType | ApplicationExtraDeviceType;
+export type ApplicationDeviceTypeUnion =
+  | Exclude<DeviceType, DeviceType.MQTT_INTERNAL_BROKER | DeviceType.MQTT_EXTERNAL_BROKER>
+  | ApplicationExtraDeviceType;
+
 // Enums cannot be extended like types
 export const ApplicationDeviceTypes = {
   ...DeviceType,
diff --git a/src/app/shared/error-message.service.ts b/src/app/shared/error-message.service.ts
index 3219aba21..adb8b14a0 100644
--- a/src/app/shared/error-message.service.ts
+++ b/src/app/shared/error-message.service.ts
@@ -1,81 +1,80 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ErrorMessage } from './models/error-message.model';
+import { nameof } from '@shared/helpers/type.helper';
+import { IotDevice } from '@applications/iot-devices/iot-device.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ErrorMessageService {
-
-    public handleErrorMessage(err: HttpErrorResponse): string[] {
-        let errorMessages = [];
-        if (typeof err.error.message === 'string') {
-          errorMessages.push(err.error.message);
-        } else if (err.error.chirpstackError) {
-          errorMessages.push(err.error.chirpstackError.message);
-        } else {
-          err.error.message.forEach( (err) => {
-            if (err.property === 'lorawanSettings') {
-              err.children.forEach( (element) => {
-                errorMessages = errorMessages.concat(
-                  Object.values(element.constraints)
-                );
-              });
-            } else {
-              errorMessages.push(
-                Object.values(err.constraints)
-              );
-            }
+  public handleErrorMessage(err: HttpErrorResponse): string[] {
+    let errorMessages = [];
+    if (typeof err.error.message === 'string') {
+      errorMessages.push(err.error.message);
+    } else if (err.error.chirpstackError) {
+      errorMessages.push(err.error.chirpstackError.message);
+    } else {
+      err.error.message.forEach((err) => {
+        if (err.property === 'lorawanSettings') {
+          err.children.forEach((element) => {
+            errorMessages = errorMessages.concat(
+              Object.values(element.constraints)
+            );
           });
+        } else {
+          errorMessages.push(Object.values(err.constraints));
         }
-        return errorMessages;
+      });
+    }
+    return errorMessages;
   }
 
-  public handleErrorMessageWithFields(error: HttpErrorResponse | Pick<HttpErrorResponse, 'error'>): ErrorMessage {
-    const errors: ErrorMessage = {errorFields: [], errorMessages: []};
+  public handleErrorMessageWithFields(
+    error: HttpErrorResponse | Pick<HttpErrorResponse, 'error'>
+  ): ErrorMessage {
+    const errors: ErrorMessage = { errorFields: [], errorMessages: [] };
     if (typeof error.error === 'string') {
       errors.errorMessages.push(error.error);
-    } else if (typeof error.error?.error === 'string' && !Array.isArray(error.error?.message)) {
+    } else if (
+      typeof error.error?.error === 'string' &&
+      !Array.isArray(error.error?.message)
+    ) {
       errors.errorMessages.push(error.error.error);
     } else if (typeof error.error?.message === 'string') {
       errors.errorMessages.push(error.error.message);
     } else {
-        error.error.message.forEach((err) => {
-          if (
-            err.property === 'lorawanSettings' ||
-            err.property === 'sigfoxSettings' ||
-            err.property === 'openDataDkDataset' ||
-            err.property === 'deviceProfile' ||
-            err.property === 'gateway'
-          ) {
-            err.children.forEach((element) => {
-              if (element.constraints) {
-                errors.errorFields.push(err.property === 'openDataDkDataset' ? 'openDataDkDataset.'+element.property: element.property);
-                errors.errorMessages = errors.errorMessages.concat(
-                  Object.values(element.constraints)
-                );
-              } else if (element.children) {
-                element.children.forEach((child) => {
-                  if (child.constraints) {
-                    errors.errorFields.push(err.property === 'openDataDkDataset' ? 'openDataDkDataset.'+element.property: element.property);
-                    errors.errorMessages = errors.errorMessages.concat(
-                      Object.values(child.constraints)
-                    );
-                  }
-                });
-              }
-            });
-          } else if (err.message) {
-            errors.errorFields.push(err.field);
-            errors.errorMessages.push(err.message);
-          } else if (err.constraints) {
-            errors.errorFields.push(err.property);
-            errors.errorMessages = errors.errorMessages.concat(
-              Object.values(err.constraints)
-            );
-          }
-        });
+      error.error.message.forEach((err) => {
+        if (err.children.length > 0) {
+          this.handleNestedErrorFields(err.children, errors);
+        } else if (err.message) {
+          errors.errorFields.push(err.field);
+          errors.errorMessages.push(err.message);
+        } else if (err.constraints) {
+          errors.errorFields.push(err.property);
+          errors.errorMessages = errors.errorMessages.concat(
+            Object.values(err.constraints)
+          );
+        }
+      });
     }
     return errors;
   }
+
+  private handleNestedErrorFields(errorChildren: any, errors: ErrorMessage) {
+    errorChildren.forEach((error) => {
+      if (error.constraints) {
+        errors.errorFields.push(
+          error.property === 'openDataDkDataset'
+            ? 'openDataDkDataset.' + error.property
+            : error.property
+        );
+        errors.errorMessages = errors.errorMessages.concat(
+          Object.values(error.constraints)
+        );
+      } else if (error.children) {
+        this.handleNestedErrorFields(error.children, errors);
+      }
+    });
+  }
 }
diff --git a/src/app/shared/helpers/download.helper.ts b/src/app/shared/helpers/download.helper.ts
index 6403bdd26..aad10a672 100644
--- a/src/app/shared/helpers/download.helper.ts
+++ b/src/app/shared/helpers/download.helper.ts
@@ -1,64 +1,83 @@
-import {
-    HttpEvent,
-    HttpEventType,
-    HttpProgressEvent,
-    HttpResponse
-} from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { distinctUntilChanged, scan, map, tap } from 'rxjs/operators';
-
-function isHttpResponse<T>(event: HttpEvent<T>): event is HttpResponse<T> {
-    return event.type === HttpEventType.Response;
-}
-
-function isHttpProgressEvent(
-    event: HttpEvent<unknown>
-): event is HttpProgressEvent {
-    return (
-        event.type === HttpEventType.DownloadProgress ||
-        event.type === HttpEventType.UploadProgress
-    );
-}
-
-export interface Download {
-    content: Blob | null;
-    progress: number;
-    state: 'PENDING' | 'IN_PROGRESS' | 'DONE';
-}
-
-export function download(
-    saver?: (b: Blob) => void
-): (source: Observable<HttpEvent<Blob>>) => Observable<Download> {
-    return (source: Observable<HttpEvent<Blob>>) =>
-        source.pipe(
-            scan(
-                (download: Download, event): Download => {
-                    if (isHttpProgressEvent(event)) {
-                        return {
-                            progress: event.total
-                                ? Math.round((100 * event.loaded) / event.total)
-                                : download.progress,
-                            state: 'IN_PROGRESS',
-                            content: null
-                        };
-                    }
-                    if (isHttpResponse(event)) {
-                        if (saver) {
-                            saver(event.body);
-                        }
-                        return {
-                            progress: 100,
-                            state: 'DONE',
-                            content: event.body
-                        };
-                    }
-                    return download;
-                },
-                { state: 'PENDING', progress: 0, content: null }
-            ),
-            distinctUntilChanged((a, b) => a.state === b.state
-                && a.progress === b.progress
-                && a.content === b.content
-            )
-        );
-}
+import {
+  HttpEvent,
+  HttpEventType,
+  HttpProgressEvent,
+  HttpResponse,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { distinctUntilChanged, scan, map, tap } from 'rxjs/operators';
+
+function isHttpResponse<T>(event: HttpEvent<T>): event is HttpResponse<T> {
+  return event.type === HttpEventType.Response;
+}
+
+function isHttpProgressEvent(
+  event: HttpEvent<unknown>
+): event is HttpProgressEvent {
+  return (
+    event.type === HttpEventType.DownloadProgress ||
+    event.type === HttpEventType.UploadProgress
+  );
+}
+
+export interface Download {
+  content: Blob | null;
+  progress: number;
+  state: 'PENDING' | 'IN_PROGRESS' | 'DONE';
+}
+
+export function download(
+  saver?: (b: Blob) => void
+): (source: Observable<HttpEvent<Blob>>) => Observable<Download> {
+  return (source: Observable<HttpEvent<Blob>>) =>
+    source.pipe(
+      scan(
+        (download: Download, event): Download => {
+          if (isHttpProgressEvent(event)) {
+            return {
+              progress: event.total
+                ? Math.round((100 * event.loaded) / event.total)
+                : download.progress,
+              state: 'IN_PROGRESS',
+              content: null,
+            };
+          }
+          if (isHttpResponse(event)) {
+            if (saver) {
+              saver(event.body);
+            }
+            return {
+              progress: 100,
+              state: 'DONE',
+              content: event.body,
+            };
+          }
+          return download;
+        },
+        { state: 'PENDING', progress: 0, content: null }
+      ),
+      distinctUntilChanged(
+        (a, b) =>
+          a.state === b.state &&
+          a.progress === b.progress &&
+          a.content === b.content
+      )
+    );
+}
+
+export function simpleDownload(data: string, filename: string) {
+  const blob = new Blob([data], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.target = '_blank';
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 10000);
+}
diff --git a/src/app/shared/models/mqtt-broker-settings.model.ts b/src/app/shared/models/mqtt-broker-settings.model.ts
new file mode 100644
index 000000000..43cfc80aa
--- /dev/null
+++ b/src/app/shared/models/mqtt-broker-settings.model.ts
@@ -0,0 +1,3 @@
+import { MqttSharedSettings } from '@shared/models/mqtt-shared-settings.model';
+
+export class MqttInternalBrokerSettings extends MqttSharedSettings {}
diff --git a/src/app/shared/models/mqtt-shared-settings.model.ts b/src/app/shared/models/mqtt-shared-settings.model.ts
new file mode 100644
index 000000000..adca9abbb
--- /dev/null
+++ b/src/app/shared/models/mqtt-shared-settings.model.ts
@@ -0,0 +1,13 @@
+import { AuthenticationType } from '@shared/enums/authentication-type';
+
+export class MqttSharedSettings {
+  mqttURL: string;
+  mqttPort: number;
+  mqtttopicname: string;
+  authenticationType: AuthenticationType;
+  caCertificate: string;
+  deviceCertificate: string;
+  deviceCertificateKey: string;
+  mqttusername: string;
+  mqttpassword: string;
+}
diff --git a/src/app/shared/models/mqtt-subscriber-settings.model.ts b/src/app/shared/models/mqtt-subscriber-settings.model.ts
new file mode 100644
index 000000000..5c1d19602
--- /dev/null
+++ b/src/app/shared/models/mqtt-subscriber-settings.model.ts
@@ -0,0 +1,5 @@
+import { MqttSharedSettings } from '@shared/models/mqtt-shared-settings.model';
+
+export class MqttExternalBrokerSettings extends MqttSharedSettings {
+  invalidMqttConfig: boolean;
+}
diff --git a/src/app/shared/services/download.service.ts b/src/app/shared/services/download.service.ts
index 1768c97c7..e119386e0 100644
--- a/src/app/shared/services/download.service.ts
+++ b/src/app/shared/services/download.service.ts
@@ -1,30 +1,26 @@
-import { Injectable, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { download, Download } from '../helpers/download.helper';
-import { Observable } from 'rxjs';
-import { SAVER, Saver } from '../providers/saver.provider';
-
-@Injectable({ providedIn: 'root' })
-export class DownloadService {
-
-    constructor(
-        private http: HttpClient,
-        @Inject(SAVER) private save: Saver
-    ) {
-    }
-
-    download(url: string, filename?: string): Observable<Download> {
-        return this.http.get(url, {
-            reportProgress: true,
-            observe: 'events',
-            responseType: 'blob'
-        }).pipe(download(blob => this.save(blob, filename)));
-    }
-
-
-    blob(url: string, filename?: string): Observable<Blob> {
-        return this.http.get(url, {
-            responseType: 'blob'
-        });
-    }
-}
\ No newline at end of file
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { download, Download } from '../helpers/download.helper';
+import { Observable } from 'rxjs';
+import { SAVER, Saver } from '../providers/saver.provider';
+
+@Injectable({ providedIn: 'root' })
+export class DownloadService {
+  constructor(private http: HttpClient, @Inject(SAVER) private save: Saver) {}
+
+  download(url: string, filename?: string): Observable<Download> {
+    return this.http
+      .get(url, {
+        reportProgress: true,
+        observe: 'events',
+        responseType: 'blob',
+      })
+      .pipe(download((blob) => this.save(blob, filename)));
+  }
+
+  blob(url: string, filename?: string): Observable<Blob> {
+    return this.http.get(url, {
+      responseType: 'blob',
+    });
+  }
+}
diff --git a/src/app/shared/services/rest.service.ts b/src/app/shared/services/rest.service.ts
index 46db8f60d..8e4556411 100644
--- a/src/app/shared/services/rest.service.ts
+++ b/src/app/shared/services/rest.service.ts
@@ -1,236 +1,234 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-
-import { Observable, of, from } from 'rxjs';
-import { catchError, tap, map } from 'rxjs/operators';
-
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
 import { AlertService } from './alert.service';
-
-
-import { environment } from '../../../environments/environment';
+import { environment } from '@environments/environment';
 import { Alert } from '@shared/models/alert.model';
 
 interface IHttpOptions {
-    headers?: HttpHeaders;
-    observe?: 'body';
-    params?: HttpParams;
-    reportProgress?: boolean;
-    responseType?: 'json';
-    withCredentials?: boolean;
+  headers?: HttpHeaders;
+  observe?: 'body';
+  params?: HttpParams;
+  reportProgress?: boolean;
+  responseType?: 'json';
+  withCredentials?: boolean;
 }
 
 @Injectable({ providedIn: 'root' })
 export class RestService {
-    constructor(
-        private http: HttpClient,
-        private alertService: AlertService
-    ) {
-        this.options = {
-            responseType: 'json',
-            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-        };
-    }
-
-    private readonly options: IHttpOptions;
-    private baseUrl = environment.baseUrl;
-
-    public get(
-        url: string,
-        params?: { [index: string]: any },
-        id?: string | number
-    ): Observable<any> {
-        const resourceUrl = this.createResourceUrl(url, id);
-        const httpParams = this.buildParams(params);
-
-        return this.http
-            .get(resourceUrl, { ...this.options, params: httpParams })
-            .pipe(
-                tap((_) => this.log({ message: 'Success', type: 'success' })),
-                catchError(this.handleError<any>('get', []))
-            );
-    }
-
-    public create(
-        url: string,
-        object: any,
-        params?: { [index: string]: any }
-    ): Observable<any> {
-        const httpParams = this.buildParams(params);
-
-        return this.http
-            .post(this.baseUrl + url, object, {
-                ...this.options,
-                params: httpParams,
-                observe: 'response'
-            })
-            .pipe(
-                tap((_) =>
-                    this.log({
-                        message: 'Succesfully created',
-                        type: 'success',
-                    })
-                ),
-                catchError(this.handleError<any>('create', []))
-            );
-    }
-
-    public createAt(
-        url: string,
-        object: any,
-        params?: { [index: string]: any }
-    ): Observable<any> {
-        const httpParams = this.buildParams(params);
-        const path = this.baseUrl + url;
-
-        return this.http
-            .post(path, object, { ...this.options, params: httpParams, observe: 'response' })
-            .pipe(
-                tap((_) =>
-                    this.log({
-                        message: 'Succesfully created',
-                        type: 'success',
-                    })
-                ),
-                catchError(this.handleError<any>('createAt', []))
-            );
-    }
-
-    public update(
-        url: string,
-        object: any,
-        id?: string | number,
-        params?: { [index: string]: any }
-    ): Observable<any> {
-        const resourceUrl = this.createResourceUrl(url, id);
-        const httpParams = this.buildParams(params);
-
-        return this.http
-            .patch(resourceUrl, object, {
-                ...this.options,
-                params: httpParams,
-                observe: 'response',
-            })
-            .pipe(
-                tap((_) =>
-                    this.log({
-                        message: 'Succesfully patched',
-                        type: 'success',
-                    })
-                ),
-                catchError(this.handleError<any>('patch', []))
-            );
-    }
-
-    public delete(url: string, id: string | number): Observable<any> {
-        const resourceUrl = this.createResourceUrl(url, id);
-
-        return this.http.delete(resourceUrl, { observe: 'response' }).pipe(
-            tap((_) =>
-                this.log({
-                    message: 'Succesfully deleted',
-                    type: 'success',
-                })
-            ),
-            catchError(this.handleError<any>('delete', []))
-        );
+  constructor(private http: HttpClient, private alertService: AlertService) {
+    this.options = {
+      responseType: 'json',
+      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+    };
+  }
+
+  private readonly options: IHttpOptions;
+  private baseUrl = environment.baseUrl;
+
+  public get(
+    url: string,
+    params?: { [index: string]: any },
+    id?: string | number
+  ): Observable<any> {
+    const resourceUrl = this.createResourceUrl(url, id);
+    const httpParams = this.buildParams(params);
+
+    return this.http
+      .get(resourceUrl, {
+        ...this.options,
+        params: httpParams,
+      })
+      .pipe(
+        tap((_) => this.log({ message: 'Success', type: 'success' })),
+        catchError(this.handleError<any>('get', []))
+      );
+  }
+
+  public create(
+    url: string,
+    object: any,
+    params?: { [index: string]: any }
+  ): Observable<any> {
+    const httpParams = this.buildParams(params);
+
+    return this.http
+      .post(this.baseUrl + url, object, {
+        ...this.options,
+        params: httpParams,
+        observe: 'response',
+      })
+      .pipe(
+        tap((_) =>
+          this.log({
+            message: 'Succesfully created',
+            type: 'success',
+          })
+        ),
+        catchError(this.handleError<any>('create', []))
+      );
+  }
+
+  public createAt(
+    url: string,
+    object: any,
+    params?: { [index: string]: any }
+  ): Observable<any> {
+    const httpParams = this.buildParams(params);
+    const path = this.baseUrl + url;
+
+    return this.http
+      .post(path, object, {
+        ...this.options,
+        params: httpParams,
+        observe: 'response',
+      })
+      .pipe(
+        tap((_) =>
+          this.log({
+            message: 'Succesfully created',
+            type: 'success',
+          })
+        ),
+        catchError(this.handleError<any>('createAt', []))
+      );
+  }
+
+  public update(
+    url: string,
+    object: any,
+    id?: string | number,
+    params?: { [index: string]: any }
+  ): Observable<any> {
+    const resourceUrl = this.createResourceUrl(url, id);
+    const httpParams = this.buildParams(params);
+
+    return this.http
+      .patch(resourceUrl, object, {
+        ...this.options,
+        params: httpParams,
+        observe: 'response',
+      })
+      .pipe(
+        tap((_) =>
+          this.log({
+            message: 'Succesfully patched',
+            type: 'success',
+          })
+        ),
+        catchError(this.handleError<any>('patch', []))
+      );
+  }
+
+  public delete(url: string, id: string | number): Observable<any> {
+    const resourceUrl = this.createResourceUrl(url, id);
+
+    return this.http.delete(resourceUrl, { observe: 'response' }).pipe(
+      tap((_) =>
+        this.log({
+          message: 'Successfully deleted',
+          type: 'success',
+        })
+      ),
+      catchError(this.handleError<any>('delete', []))
+    );
+  }
+
+  public put(
+    url: string,
+    object: any,
+    id?: string | number,
+    params?: { [index: string]: any }
+  ): Observable<any> {
+    const resourceUrl = this.createResourceUrl(url, id);
+    const httpParams = this.buildParams(params);
+    return this.http
+      .put(resourceUrl, object, {
+        ...this.options,
+        params: httpParams,
+      })
+      .pipe(
+        tap((_) =>
+          this.log({
+            message: 'Succesfully updated',
+            type: 'success',
+          })
+        )
+        // catchError(this.handleError<any>('replace', []))
+      );
+  }
+
+  public post(
+    url: string,
+    body: any,
+    params?: { [index: string]: any }
+  ): Observable<any> {
+    const httpParams = this.buildParams(params);
+
+    return this.http
+      .post(this.baseUrl + url, body, {
+        ...this.options,
+        params: httpParams,
+      })
+      .pipe(
+        tap((_) => this.log({ message: 'Succesfully added', type: 'success' }))
+        // catchError(this.handleError<any>('post', []))
+      );
+  }
+
+  createResourceUrl(url: string, id?: string | number) {
+    let resourceUrl = this.baseUrl + url;
+
+    if (id != null) {
+      resourceUrl += '/' + id;
     }
 
-    public put(
-        url: string,
-        object: any,
-        id?: string | number,
-        params?: { [index: string]: any }
-    ): Observable<any> {
-        const resourceUrl = this.createResourceUrl(url, id);
-        const httpParams = this.buildParams(params);
-        return this.http
-            .put(resourceUrl, object, {
-                ...this.options,
-                params: httpParams,
-            })
-            .pipe(
-                tap((_) =>
-                    this.log({
-                        message: 'Succesfully updated',
-                        type: 'success',
-                    })
-                ),
-                // catchError(this.handleError<any>('replace', []))
-            );
-    }
+    return resourceUrl;
+  }
 
-    public post(
-        url: string,
-        body: any,
-        params?: { [index: string]: any }
-    ): Observable<any> {
-        const httpParams = this.buildParams(params);
-
-        return this.http
-            .post(this.baseUrl + url, body, {
-                ...this.options,
-                params: httpParams,
-            })
-            .pipe(
-                tap((_) =>
-                    this.log({ message: 'Succesfully added', type: 'success' })
-                ),
-                // catchError(this.handleError<any>('post', []))
-            );
+  private buildParams(params?: { [index: string]: any }): HttpParams {
+    let httpParams = new HttpParams();
+    if (!params) {
+      return httpParams;
     }
 
-    createResourceUrl(url: string, id?: string | number) {
-        let resourceUrl = this.baseUrl + url;
-
-        if (id != null) {
-            resourceUrl += '/' + id;
+    for (const param in params) {
+      if (params.hasOwnProperty(param)) {
+        if (Array.isArray(params[param])) {
+          for (const p of params[param]) {
+            httpParams = httpParams.append(param, p);
+          }
+        } else {
+          httpParams = httpParams.append(param, params[param]);
         }
-
-        return resourceUrl;
+      }
     }
 
-    private buildParams(params?: { [index: string]: any }): HttpParams {
-        let httpParams = new HttpParams();
-        if (!params) {
-            return httpParams;
-        }
-
-        for (const param in params) {
-            if (params.hasOwnProperty(param)) {
-                if (Array.isArray(params[param])) {
-                    for (const p of params[param]) {
-                        httpParams = httpParams.append(param, p);
-                    }
-                } else {
-                    httpParams = httpParams.append(param, params[param]);
-                }
-            }
-        }
-
-        return httpParams;
-    }
-
-    /**
-     * Handle Http operation that failed.
-     * Let the app continue.
-     * @param operation - name of the operation that failed
-     * @param result - optional value to return as the observable result
-     */
-    private handleError<T>(operation = 'operation', result?: T) {
-        return (error: any): Observable<T> => {
-            console.error(error);
-
-            this.log({
-                message: `${operation} failed: ${error.message}`,
-                type: 'danger',
-            });
-
-            return of(error as T);
-        };
-    }
-
-    // Use the AlertService to notify of the request
-    private log(alert: Alert) {
-        this.alertService.add(alert);
-    }
+    return httpParams;
+  }
+
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+      console.error(error);
+
+      this.log({
+        message: `${operation} failed: ${error.message}`,
+        type: 'danger',
+      });
+
+      return of(error as T);
+    };
+  }
+
+  // Use the AlertService to notify of the request
+  private log(alert: Alert) {
+    this.alertService.add(alert);
+  }
 }
diff --git a/src/assets/docs/mqtt_external_broker_sample.csv b/src/assets/docs/mqtt_external_broker_sample.csv
new file mode 100644
index 000000000..cdef894c9
--- /dev/null
+++ b/src/assets/docs/mqtt_external_broker_sample.csv
@@ -0,0 +1,3 @@
+name,id,type,longitude,latitude,commentOnLocation,comment,deviceModelId,mqttURL,mqttPort,mqtttopicname,authenticationType,mqttusername,mqttpassword,caCertificate,deviceCertificate,deviceCertificateKey
+,,MQTT_EXTERNAL_BROKER,,,,,,,,,CERTIFICATE,,,,,
+,,MQTT_EXTERNAL_BROKER,,,,,,,,,PASSWORD,,,,,
diff --git a/src/assets/docs/mqtt_internal_broker_sample.csv b/src/assets/docs/mqtt_internal_broker_sample.csv
new file mode 100644
index 000000000..879ed5cb6
--- /dev/null
+++ b/src/assets/docs/mqtt_internal_broker_sample.csv
@@ -0,0 +1,3 @@
+name,id,type,longitude,latitude,commentOnLocation,comment,deviceModelId,authenticationType,mqttusername,mqttpassword
+,,MQTT_INTERNAL_BROKER,,,,,,PASSWORD,,
+,,MQTT_INTERNAL_BROKER,,,,,,CERTIFICATE,,
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
index 8a22efb27..c4ba4abbc 100644
--- a/src/assets/i18n/da.json
+++ b/src/assets/i18n/da.json
@@ -109,7 +109,8 @@
     "DATATARGET-SHOW": "Tilknyttede data targets",
     "MULTICAST-SHOW": "Tilknyttede multicast",
     "MULTICAST-GROUPS": "Multicast-grupper",
-    "IMPORT-CSV": "Bulk import af IoT enheder",
+    "IMPORT-CSV": "Bulk import",
+    "EXPORT-CSV": "Eksport (CSV)",
     "IOT-DEVICES": "IoT-enheder",
     "BULK": {
       "TEMPLATE": {
@@ -398,6 +399,9 @@
     "GENERIC_HTTP": "Generisk HTTP",
     "LORAWAN": "LoRaWAN",
     "SIGFOX": "Sigfox",
+    "MQTT": "MQTT",
+    "MQTT_INTERNAL_BROKER": "MQTT intern broker",
+    "MQTT_EXTERNAL_BROKER": "MQTT ekstern broker",
     "OTHER": "Andet"
   },
   "ACTIVITY": {
@@ -676,7 +680,7 @@
       "TITLE": "Sigfox specifikke felter",
       "CONNECTTOEXISTINGDEVICEINBACKEND": "Er enheden allerede registreret i Sigfox backend?",
       "GROUPID": "Vælg en Sigfox gruppe",
-      "DEVICEID": "Sigfox enheds Id",
+      "DEVICEID": "Sigfox enhedsid",
       "DEVICEID-PLACEHOLDER": "Enhedens unikke id",
       "DEVICETYPEID": "Vælg en Sigfox enhedstype",
       "DEVICETYPEID-PLACEHOLDER": "Enhedstype",
@@ -690,7 +694,7 @@
       "DISCLAIMER-CLICK": "Guide til unsubscripe",
       "PROTOTYPE": "Aktiver som prototype",
       "PROTOTYPE-TITLE": "Hvis enhedstypen endnu ikke har tildelt et produkt certifikat, kan enheden oprettes som en prototype",
-      "SELECTGROUPFIRST": "Du skal vælge en gruppe før du kan udfylde kontrakt og enheds type",
+      "SELECTGROUPFIRST": "Du skal vælge en gruppe før du kan udfylde kontrakt og enhedstype",
       "DEVICETYPE": {
         "NAME": "Navngiv enhedstypen",
         "NAME-PLACEHOLDER": "XC-123",
@@ -739,6 +743,37 @@
       "HARDWARE-PLACEHOLDER": "Angiv hvad der bruges af sensorer/hardware, samt model",
       "CONTROLLED-PROPERTY-PLACEHOLDER": "Angiv hvilke datatyper der opsamles",
       "DEVICE-TYPE-PLACEHOLDER": "Angiv hvilke forbindelsesteknologier, der benyttes"
+    },
+    "MQTT": {
+      "TITLE": "MQTT specifik opsætning",
+      "SUBTYPE": "Enhedstype",
+      "SUBTYPE-HOVER": "Med en MQTT internal broker-enhed kan du sende data til OS2iots interne MQTT-broker. Med en MQTT extern broker-enhed kan du modtage data i OS2iot fra en ekstern MQTT-broker.",
+      "MQTT_INTERNAL_BROKER": "Intern broker",
+      "MQTT_EXTERNAL_BROKER": "Ekstern broker",
+      "AUTHENTICATIONTYPE": "Autentifikation",
+      "USERNAME-PLACEHOLDER": "EtBrugernavn",
+      "PASSWORD-PLACEHOLDER": "EtKodeord",
+      "CERTIFICATE": "Certifikat",
+      "CERTIFICATE-PLACEHOLDER" : "-----BEGIN CERTIFICATE-----",
+      "PASSWORD": "Brugernavn & kodeord",
+      "USERNAME-LABEL": "Brugernavn",
+      "USERNAME-HOVER": "Brugernavn som enheden sender med sine beskeder",
+      "PASSWORD-LABEL": "Kodeord",
+      "PASSWORD-HOVER": "Kodeordet som enheden sender med sine beskeder",
+      "BROKER-URL": "MQTT broker URL",
+      "BROKER-URL-PLACEHOLDER": "mqtts://someUrl",
+      "BROKER-PORT": "MQTT broker port",
+      "BROKER-PORT-PLACEHOLDER": "1883",
+      "TOPIC-PATH": "MQTT Topic",
+      "TOPIC-PATH-PLACEHOLDER": "some/topic/path",
+      "CA-CERTIFICATE": "CA Certifikat",
+      "CA-CERTIFICATE-HOVER": "Certifikatet som enhedens certifikat er lavet med",
+      "DEVICE-CERTIFICATE": "Enhedens certifikat",
+      "DEVICE-CERTIFICATE-HOVER": "Certifikatet som enheden har fået via CA'en",
+      "DEVICE-CERTIFICATE-KEY": "Enhedens certifikat nøgle",
+      "DEVICE-CERTIFICATE-KEY-PLACEHOLDER": "-----BEGIN PRIVATE KEY-----",
+      "CONFIG-HELP": "MQTT-specifikke oplysninger genereres automatisk og vises efter oprettelse af enheden",
+      "CERTIFICATE-OBS": "Der oprettes automatisk et certifikat, som skal benyttes sammen med brugernavn og kodeord for sikre forbindelsen mellem enheden og OS2iot."
     }
   },
   "QUESTION-LORA-GATEWAY": {
@@ -857,6 +892,15 @@
       "SNR": "SNR",
       "RSSI": "RSSI",
       "HISTORY-NOT-SUPPORTED": "Understøttes ikke af denne teknologi"
+    },
+    "MQTT": {
+      "URL": "URL",
+      "PORT": "Port",
+      "TOPIC_NAME": "Topic navn",
+      "CERTIFICATE": "Certifikat værdi",
+      "COPY-TO-CLIPBOARD": "Kopier",
+      "DOWNLOAD": "Download",
+      "NOCONNECTION": "Denne enhed kunne ikke forbinde til den eksterne broker. Ret indstillingerne til eller slet enheden."
     }
   },
   "MESSAGE": {
@@ -1074,6 +1118,10 @@
     },
     "WELCOME": {
       "DONT-SHOW-AGAIN": "Vis ikke igen"
+    },
+    "EXPORT-CSV": {
+      "TITLE": "Eksportér metadata",
+      "BODY": "Igangsæt eksport af metadata om alle IoT-enheder i denne applikation i en CSV-fil?"
     }
   },
   "BATTERY": {