diff --git a/src/app/core/scss/partials/plugins/_ngx-color-picker.scss b/src/app/core/scss/partials/plugins/_ngx-color-picker.scss
index d103a994..aab3d8d7 100644
--- a/src/app/core/scss/partials/plugins/_ngx-color-picker.scss
+++ b/src/app/core/scss/partials/plugins/_ngx-color-picker.scss
@@ -3,20 +3,21 @@
 .color-picker {
     height: auto !important;
     border: none !important;
+
     @include mat-elevation(4);
 
     .preset-area {
-        //padding: 4px 15px;
-        padding: 0 0 12px 12px !important;
+        padding: 0 0 16px 16px !important;
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
+
         > hr {
             display: none;
         }
+
         .preset-label {
             display: none;
-
         }
 
         .preset-color {
@@ -25,7 +26,8 @@
             margin: 0 !important;
             border: none !important;
             border-radius: 0 !important;
-            &:nth-child(14n+3) {
+
+            &:nth-child(14n+1) {
                 clear: both;
             }
         }
diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss
index de3eb503..c69403da 100644
--- a/src/app/main/content/apps/calendar/calendar.component.scss
+++ b/src/app/main/content/apps/calendar/calendar.component.scss
@@ -299,7 +299,7 @@
         .add-event-button {
             position: absolute;
             right: 18px;
-            bottom: -32px;
+            bottom: -26px;
             z-index: 10;
         }
 
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.html b/src/app/main/content/apps/calendar/event-form/event-form.component.html
index 0186548b..ee73bdcb 100644
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.html
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html
@@ -32,9 +32,11 @@
                 </mat-slide-toggle>
             </div>
 
-            <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
-                <mat-form-field class="mr-24" fxFlex>
+            <div class="py-16" fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
+
+                <mat-form-field class="mr-sm-24" fxFlex>
                     <input matInput
+                           class="primary-color-input"
                            name="primary color"
                            formControlName="primary"
                            placeholder="Primary color"
@@ -44,8 +46,10 @@
                            [style.background]="event.color.primary"
                            (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
                 </mat-form-field>
+
                 <mat-form-field fxFlex>
                     <input matInput
+                           class="secondary-color-input"
                            name="secondary color"
                            formControlName="secondary"
                            placeholder="Secondary color"
@@ -55,11 +59,12 @@
                            [style.background]="event.color.secondary"
                            (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
                 </mat-form-field>
+
             </div>
 
-            <div fxFlex="1 0 auto" fxLayout="row">
+            <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
 
-                <mat-form-field class="mr-24" fxFlex>
+                <mat-form-field class="mr-sm-24" fxFlex>
                     <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
                            name="start"
                            formControlName="start">
@@ -73,9 +78,9 @@
 
             </div>
 
-            <div fxFlex="1 0 auto" fxLayout="row">
+            <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
 
-                <mat-form-field class="mr-24" fxFlex>
+                <mat-form-field class="mr-sm-24" fxFlex>
                     <input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
                            name="end"
                            formControlName="end">
@@ -98,12 +103,12 @@
 
             <mat-form-field formGroupName="meta" class="w-100-p">
 
-            <textarea matInput
-                      formControlName="notes"
-                      placeholder="Notes"
-                      mat-maxlength="250"
-                      max-rows="4">
-            </textarea>
+                <textarea matInput
+                          formControlName="notes"
+                          placeholder="Notes"
+                          mat-maxlength="250"
+                          max-rows="4">
+                </textarea>
             </mat-form-field>
 
         </form>
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.scss b/src/app/main/content/apps/calendar/event-form/event-form.component.scss
index 39481391..dd74c7b8 100644
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.scss
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.scss
@@ -1,8 +1,17 @@
+@import "src/app/core/scss/fuse";
+
 .event-form-dialog {
 
+    @include media-breakpoint('xs') {
+        width: 100%;
+    }
+
+    @include media-breakpoint-up('xs') {
+        width: 480px;
+    }
+
     .mat-dialog-container {
         padding: 0;
-        width: 480px;
     }
 
     .dialog-content-wrapper {
@@ -10,4 +19,9 @@
         display: flex;
         flex-direction: column;
     }
+
+    .primary-color-input,
+    .secondary-color-input {
+        padding: 6px 8px;
+    }
 }