diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
index 03b0f7a28b..692289b753 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.html
@@ -26,18 +26,19 @@
             matTooltip="{{ 'device.generate-client-id' | translate }}"
             matTooltipPosition="above"
             (click)="generate('clientId')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('clientId').value; else copyClientId">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('clientId').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
-      tooltipText="{{ 'device.copy-client-id' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyClientId>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"
+        tooltipText="{{ 'device.copy-client-id' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('clientId').hasError('pattern')">
       {{ 'device.client-id-pattern' | translate }}
     </mat-error>
@@ -52,18 +53,20 @@
             matTooltip="{{ 'device.generate-user-name' | translate }}"
             matTooltipPosition="above"
             (click)="generate('userName')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('userName').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('userName').value; else copyUserName">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
-      tooltipText="{{ 'device.copy-user-name' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyUserName>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        *ngIf="deviceCredentialsMqttFormGroup.get('userName').value"
+        [copyText]="deviceCredentialsMqttFormGroup.get('userName').value"
+        tooltipText="{{ 'device.copy-user-name' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
     <mat-error *ngIf="deviceCredentialsMqttFormGroup.get('userName').hasError('required')">
       {{ 'device.user-name-required' | translate }}
     </mat-error>
@@ -82,18 +85,20 @@
             matTooltip="{{ 'device.generate-password' | translate }}"
             matTooltipPosition="above"
             (click)="generate('password')"
-            *ngIf="!deviceCredentialsMqttFormGroup.get('password').value">
+            *ngIf="!deviceCredentialsMqttFormGroup.get('password').value; else copyPassword">
       <mat-icon>autorenew</mat-icon>
     </button>
-    <tb-copy-button
-      matSuffix
-      inputAction
-      *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
-      [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
-      tooltipText="{{ 'device.copy-password' | translate }}"
-      tooltipPosition="above"
-      icon="content_copy">
-    </tb-copy-button>
+    <ng-template #copyPassword>
+      <tb-copy-button
+        matSuffix
+        [miniButton]="false"
+        *ngIf="deviceCredentialsMqttFormGroup.get('password').value"
+        [copyText]="deviceCredentialsMqttFormGroup.get('password').value"
+        tooltipText="{{ 'device.copy-password' | translate }}"
+        tooltipPosition="above"
+        icon="content_copy">
+      </tb-copy-button>
+    </ng-template>
   </mat-form-field>
   <tb-error style="margin-top: -12px; display: block;"
             [error]="deviceCredentialsMqttFormGroup.hasError('atLeastOne') ?
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
index 6a98e9969e..4904aab324 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-mqtt-basic.component.ts
@@ -130,6 +130,6 @@ export class DeviceCredentialsMqttBasicComponent implements ControlValueAccessor
   }
 
   public generate(formControlName: string) {
-    this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(12));
+    this.deviceCredentialsMqttFormGroup.get(formControlName).patchValue(generateSecret(20));
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index 2433af82f2..c8dc23b733 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -36,18 +36,19 @@
                 matTooltip="{{ 'device.generate-access-token' | translate }}"
                 matTooltipPosition="above"
                 (click)="generate('credentialsId')"
-                *ngIf="!deviceCredentialsFormGroup.get('credentialsId').value">
+                *ngIf="!deviceCredentialsFormGroup.get('credentialsId').value; else copyAccessToken">
           <mat-icon>autorenew</mat-icon>
         </button>
-        <tb-copy-button
-          matSuffix
-          inputAction
-          *ngIf="deviceCredentialsFormGroup.get('credentialsId').value"
-          [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
-          tooltipText="{{ 'device.copy-access-token' | translate }}"
-          tooltipPosition="above"
-          icon="content_copy">
-        </tb-copy-button>
+        <ng-template #copyAccessToken>
+          <tb-copy-button
+            matSuffix
+            [miniButton]="false"
+            [copyText]="deviceCredentialsFormGroup.get('credentialsId').value"
+            tooltipText="{{ 'device.copy-access-token' | translate }}"
+            tooltipPosition="above"
+            icon="content_copy">
+          </tb-copy-button>
+        </ng-template>
         <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsId').hasError('required')">
           {{ 'device.access-token-required' | translate }}
         </mat-error>
@@ -62,7 +63,7 @@
         <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
         <tb-copy-button
           matSuffix
-          inputAction
+          [miniButton]="false"
           *ngIf="deviceCredentialsFormGroup.get('credentialsValue').value"
           [copyText]="deviceCredentialsFormGroup.get('credentialsValue').value"
           tooltipText="{{ 'device.copy-certificate' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
index 6e61e13064..bc9af3867e 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.ts
@@ -183,6 +183,6 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   }
 
   public generate(formControlName: string) {
-    this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(12));
+    this.deviceCredentialsFormGroup.get(formControlName).patchValue(generateSecret(20));
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index 00492970dc..dd1ae38c47 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -95,7 +95,7 @@
                                         <input matInput [value]="redirectURI(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="redirectURI(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -107,7 +107,7 @@
                                         <input matInput [value]="redirectURIMixed(domainInfo)" readonly>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="redirectURIMixed(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
@@ -166,7 +166,7 @@
                                         <textarea matInput formControlName="appSecret" rows="1" required></textarea>
                                         <tb-copy-button
                                           matSuffix
-                                          inputAction
+                                          [miniButton]="false"
                                           color="primary"
                                           [copyText]="mobileInfo.get('appSecret').value"
                                           tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 77dc8a1378..640d467998 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -17,7 +17,7 @@
 -->
 <button mat-icon-button
         type="button"
-        [ngClass]="{'table-cell-action': !inputAction}"
+        [ngClass]="{'mini-button': miniButton}"
         [color]="color"
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index b53d65c407..0818466a38 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -16,7 +16,7 @@
 @import "../../../../theme";
 
 :host {
-  .table-cell-action {
+  .mini-button {
     height: 32px;
     width: 32px;
     line-height: 32px;
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
index 96b9376105..0b815a6ff9 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@@ -36,6 +36,7 @@ export class CopyButtonComponent {
   copyText: string;
 
   @Input()
+  @coerceBoolean()
   disabled = false;
 
   @Input()
@@ -58,7 +59,7 @@ export class CopyButtonComponent {
 
   @Input()
   @coerceBoolean()
-  inputAction = false;
+  miniButton = true;
 
   @Output()
   successCopied = new EventEmitter<string>();