diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
index 6315ca17ac992ec5290544a5bee8bbcbfdfc4d74..7cb387e759fe558c26678b0192dd29a08f5fd21a 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
@@ -62,9 +62,6 @@
         <mat-action-row>
           <button mat-icon-button (click)="nextStep()"><mat-icon>expand_more</mat-icon></button>        </mat-action-row>
       </mat-expansion-panel>
-
-
-      <!--  Fonts-->
       <mat-expansion-panel [expanded]="step == 1" (opened)="setStep(1)" class="matExpansionPanel">
         <mat-expansion-panel-header>
           <mat-panel-title>
@@ -85,9 +82,9 @@
           </mat-form-field>
         </div>
         <div class="input-row special-settings automatic-spelling" fxLayout="row" fxLayoutGap="5px" fxLayout.xs="column">
-          <mat-radio-group matTooltip="{{'tag-cloud-config.notation-tooltip' | translate}}" aria-label="Notation:"> {{'tag-cloud-config.notation' | translate}}
-            <div><mat-checkbox value="italic" (change)="italicChecked($event)">{{'tag-cloud-config.font-style-italic' | translate}}</mat-checkbox> </div>
-            <div><mat-checkbox value="bold" (change)="boldChecked($event)" >{{'tag-cloud-config.font-style-bold' | translate}}</mat-checkbox> </div>
+          <mat-radio-group matTooltip="{{'tag-cloud-config.notation-tooltip' | translate}}" aria-label="Notation:"> 
+            <div><mat-slide-toggle value="italic" (change)="italicChecked($event)"[ngModelOptions]="{standalone: true}">{{'tag-cloud-config.font-style-italic' | translate}}</mat-slide-toggle> </div>
+            <div><mat-slide-toggle value="bold" (change)="boldChecked($event)" [ngModelOptions]="{standalone: true}">{{'tag-cloud-config.font-style-bold' | translate}}</mat-slide-toggle> </div>
           </mat-radio-group>
         </div>
         <div class="input-row" fxLayout="column" fxLayoutGap="5px">
@@ -106,14 +103,11 @@
               matTooltip="{{'tag-cloud-config.font-size-max-tooltip' | translate}}" />
           </mat-form-field>
         </div>
-
-
         <mat-action-row>
           <button mat-icon-button (click)="prevStep()"><mat-icon>expand_less</mat-icon></button>
           <button mat-icon-button (click)="nextStep()"><mat-icon>expand_more</mat-icon></button>
         </mat-action-row>
       </mat-expansion-panel>
-
         <mat-expansion-panel [expanded]="step == 2" (opened)="setStep(2)" class="matExpansionPanel">
           <mat-expansion-panel-header>
             <mat-panel-title>
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
index 386c2f5d8903bb838e6e3fa3b8949b0e46bd2ea8..75db57c50ef05c56ed71c4ff5a3b28165184c7aa 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
@@ -194,6 +194,8 @@ mat-divider {
 
 .weight-class-setting-content {
   border-top: 3px solid var(--primary);
+  padding-top: 20px;
+  padding-bottom: 15px;
 }
 
 .weight-class-heading {
@@ -240,3 +242,6 @@ mat-divider {
   border-top: 2px solid var(--primary);
   padding-top: 10px;
 }
+.automatic-spelling{
+  padding-bottom: 30px;
+}