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 6028865f0fff793c64eaac370eb165a430efcdbc..64e7f15a826f23c99b5b6ff0e326f7cfa34286ba 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
@@ -2,24 +2,24 @@
      fxLayout="row"
      fxLayout.xs="column"
      fxLayout.sm="column"
-     fxLayoutGap="15px"
+     fxLayoutGap="5px"
 >
 
-  <form [formGroup]="cloudConfigForm" fxLayout="column">
+  <form class="cloud-configuration-form" [formGroup]="cloudConfigForm" fxLayout="column">
     <h2>{{'tag-cloud-config.title' | translate}}</h2>
 
     <h3>{{'tag-cloud-config.general' | translate}}</h3>
     <div
       class="input-row"
       fxLayout="row"
-      fxLayoutGap="20px"
+      fxLayoutGap="5px"
       fxLayout.xs="column"
     >
     </div>
     <div
       class="input-row"
       fxLayout="row"
-      fxLayoutGap="20px"
+      fxLayoutGap="5px"
       fxLayout.xs="column"
     >
       <mat-slide-toggle fxFlex formControlName="realignOnResize"
@@ -29,22 +29,22 @@
     <div
       class="input-row"
       fxLayout="row"
-      fxLayoutGap="20px"
+      fxLayoutGap="5px"
       fxLayout.xs="column"
     >
       <mat-slide-toggle fxFlex formControlName="randomizeAngle"
       >{{'tag-cloud-config.random-angle' | translate}}</mat-slide-toggle
       >
     </div>
+    <div style="margin: 10px;"></div>
     <div
       class="input-row"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutGap="20px"
+      fxLayout="column"
+      fxLayoutGap="5px"
     >
-      <div fxFlex="48%" fxFlex.xs="100%">
-        <div fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="80%">
+
+        <div fxLayout="row" fxLayoutGap="5px">
+          <mat-form-field fxFlex="100%">
             <mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
             <input
               matInput
@@ -67,16 +67,15 @@
               "
           ></div>
         </div>
-      </div>
+
 
     </div>
     <div
       class="input-row"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutGap="20px"
+      fxLayout="column"
+      fxLayoutGap="5px"
     >
-      <div fxFlex="50%" fxFlex.xs="100%">
+
         <mat-label class="label-text">{{'tag-cloud-config.word-delay' | translate}}</mat-label>
         <mat-slider
           min="0"
@@ -85,21 +84,13 @@
           formControlName="delay"
           [thumbLabel]="true"
         ></mat-slider>
-      </div>
+
     </div>
     <div
       class="input-row"
-      fxLayout="row"
-      fxLayoutGap="20px"
-      fxLayout.xs="column"
+      fxLayout="column"
+      fxLayoutGap="5px"
     >
-      <div
-        class="input-row"
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutGap="20px"
-      >
-        <div fxFlex="50%" fxFlex.xs="100%">
           <mat-form-field fxFlex fxLayout.xs="column">
             <mat-label>{{'tag-cloud-config.font-size' | translate}}</mat-label>
             <input
@@ -112,20 +103,17 @@
               step="10"
             />
           </mat-form-field>
-        </div>
-      </div>
     </div>
     <h3>{{'tag-cloud-config.hover-title' | translate}}</h3>
     <div formGroupName="zoomOnHover">
       <div
         class="input-row"
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutGap="20px"
+        fxLayout="column"
+        fxLayoutGap="5px"
       >
-        <div fxFlex="48%" fxFlex.xs="100%">
-          <div fxLayout="row" fxLayoutGap="10px">
-            <mat-form-field fxFlex="80%">
+
+          <div fxLayout="row" fxLayoutGap="5px">
+            <mat-form-field fxFlex="100%">
               <mat-label>{{'tag-cloud-config.hover-color' | translate}}</mat-label>
               <input
                 matInput
@@ -149,16 +137,15 @@
                   "
             ></div>
           </div>
-        </div>
+
       </div>
 
       <div
         class="input-row"
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutGap="20px"
+        fxLayout="column"
+        fxLayoutGap="5px"
       >
-        <div fxFlex="50%" fxFlex.xs="100%">
+
           <mat-label class="label-text">{{'tag-cloud-config.hover-scale' | translate}}</mat-label>
           <mat-slider
             min="1"
@@ -167,16 +154,15 @@
             formControlName="scale"
             [thumbLabel]="true"
           ></mat-slider>
-        </div>
+
       </div>
 
       <div
         class="input-row"
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutGap="20px"
+        fxLayout="column"
+        fxLayoutGap="5px"
       >
-        <div fxFlex="50%" fxFlex.xs="100%">
+
           <mat-label class="label-text">{{'tag-cloud-config.hover-time' | translate}}</mat-label>
           <mat-slider
             min="0"
@@ -185,15 +171,13 @@
             formControlName="transitionTime"
             [thumbLabel]="true"
           ></mat-slider>
-        </div>
       </div>
       <div
         class="input-row"
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutGap="20px"
+        fxLayout="column"
+        fxLayoutGap="5px"
       >
-        <div fxFlex="50%" fxFlex.xs="100%">
+
           <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
           <mat-slider
             min="0"
@@ -202,7 +186,7 @@
             formControlName="delay"
             [thumbLabel]="true"
           ></mat-slider>
-        </div>
+
       </div>
     </div>
     <br>
@@ -211,6 +195,5 @@
       <button mat-button class="primary">{{'tag-cloud-config.save-btn' | translate}}</button>
     </div>
   </form>
-
 </div>
-i
+
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 8bf468dbbfc0e070eeedfbc14fb1c16efea5d3e8..830be70aa6da6dbc5781b32e12ee895cf9db0f9f 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
@@ -1,13 +1,21 @@
 * {
+  color: var(--on-dialog);
+}
+
+h3, h2{
   color: var(--primary);
 }
 
+h3 {
+  border-bottom: 1px solid var(--primary);
+}
+
 #commentSlider {
   width: 100%;
 }
 
 div {
-  margin: 10px;
+  margin: 4px;
 }
 
 .delete {
@@ -53,7 +61,7 @@ mat-divider {
 }
 
 .color-box{
-  flex: 1 1 85%;
+  flex: 1 1 100%;
   box-sizing: border-box;
   height: 30px;
   width: 20px;
@@ -125,5 +133,11 @@ mat-divider {
 }
 
 .button-row{
-  margin: 0 0 0 auto;
+  margin: auto auto 50px auto ;
 }
+
+.cloud-configuration-form{
+  width: 265px;
+  margin-top: 60px;
+}
+
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.html b/src/app/components/shared/tag-cloud/tag-cloud.component.html
index f9e82c74aa28b71013acfd1516a455448f547705..648f84f4ebd1159a7a6c257e4c7fc1cd7e5a9392 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.html
@@ -1,6 +1,6 @@
 <ars-screen ars-flex-box>
   <mat-drawer-container id="matDrawContainer">
-    <mat-drawer [(opened)]="configurationOpened" position="start">
+    <mat-drawer [(opened)]="configurationOpened" position="end">
       <app-cloud-configuration></app-cloud-configuration>
     </mat-drawer>
     <mat-drawer-content>
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.scss b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
index 3de8fd08245f8e33132f58a42d553e3acd6c3b31..a5558d4219eb24ad38f08b30c35d5aa0f570b177 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
@@ -3,7 +3,7 @@ mat-drawer-container {
 }
 
 mat-drawer {
-  background-color: var(--background);
+  background-color: var(--dialog);
 }
 
 .config {