diff --git a/application/views/components/company_color_style.php b/application/views/components/company_color_style.php
index 53984498..37f88f16 100644
--- a/application/views/components/company_color_style.php
+++ b/application/views/components/company_color_style.php
@@ -166,5 +166,18 @@
         .backend-page .filter-records .results .entry.selected {
             border-right-color: <?= $company_color ?> !important;
         }
+        
+        .flatpickr-calendar .flatpickr-months,
+        .flatpickr-calendar .flatpickr-months .flatpickr-month,
+        .flatpickr-calendar .flatpickr-weekdays,
+        .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
+        .flatpickr-calendar span.flatpickr-weekday {
+            background: <?= $company_color ?> !important;
+        }
+
+        .flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
+            background: <?= $company_color ?> !important;
+            border-color: <?= $company_color ?> !important;
+        }
     </style>
 <?php endif ?>
diff --git a/application/views/layouts/backend_layout.php b/application/views/layouts/backend_layout.php
index 6f4cb054..19515f66 100644
--- a/application/views/layouts/backend_layout.php
+++ b/application/views/layouts/backend_layout.php
@@ -16,6 +16,7 @@
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/trumbowyg/trumbowyg.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/select2/select2.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . setting('theme', 'default')  . '.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/backend_layout.css') ?>">
diff --git a/application/views/layouts/booking_layout.php b/application/views/layouts/booking_layout.php
index dcd20f43..b58de770 100644
--- a/application/views/layouts/booking_layout.php
+++ b/application/views/layouts/booking_layout.php
@@ -15,6 +15,7 @@
     
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme')  . '.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
diff --git a/assets/css/general.scss b/assets/css/general.scss
index 3461d2ac..6894669c 100644
--- a/assets/css/general.scss
+++ b/assets/css/general.scss
@@ -21,7 +21,7 @@ html {
 
 body .ui-widget {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 1.1em;
 }
 
@@ -180,7 +180,7 @@ body .ui-widget input,
 body .ui-widget textarea,
 body .ui-widget button {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 1rem;
 }
 
@@ -438,3 +438,41 @@ body .clearfix {
 .flatpickr-wrapper {
     width: 100%;
 }
+
+.flatpickr-calendar {
+    box-shadow: none;
+    
+    .flatpickr-months {
+        padding: 10px 0;
+        background: #449a82;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+    }
+    
+    .flatpickr-current-month {
+        padding: 3px;    
+    }
+    
+    .flatpickr-innerContainer {
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+    }
+    
+    .dayContainer {
+        padding: 10px 0;
+    }
+    
+    .flatpickr-months .flatpickr-month,
+    .flatpickr-weekdays,
+    .flatpickr-current-month .flatpickr-monthDropdown-months,
+    span.flatpickr-weekday {
+        background: #429a82;
+        color: white;
+    }
+
+    .flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
+        background: #429a82;
+        border-color: #429a82;
+        color: white;
+    }
+}
diff --git a/assets/css/layouts/booking_layout.scss b/assets/css/layouts/booking_layout.scss
index 1b754706..a7e97e56 100644
--- a/assets/css/layouts/booking_layout.scss
+++ b/assets/css/layouts/booking_layout.scss
@@ -123,14 +123,8 @@ body {
     margin-right: 0;
 }
 
-#book-appointment-wizard .wizard-frame #select-date {
-    max-width: 288px;
-    margin: auto;
-    padding: 15px 0;
-}
-
-#book-appointment-wizard .wizard-frame #select-date > .ui-datepicker {
-    margin: auto;
+#book-appointment-wizard .wizard-frame .flatpickr-calendar {
+    margin: 25px auto;
 }
 
 #book-appointment-wizard .wizard-frame #select-time {
diff --git a/gulpfile.js b/gulpfile.js
index 1d78730c..512ac924 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,6 +21,7 @@ const plumber = require('gulp-plumber');
 const rename = require('gulp-rename');
 const sass = require('gulp-sass')(require('sass'));
 const zip = require('zip-dir');
+
 // const debug = require('gulp-debug');
 
 function archive(done) {
@@ -181,6 +182,11 @@ function vendor(done) {
         gulp.dest('assets/vendor/flatpickr')
     );
 
+    gulp.src(['node_modules/flatpickr/dist/themes/material_green.css'])
+        .pipe(css())
+        .pipe(rename({suffix: '.min'}))
+        .pipe(gulp.dest('assets/vendor/flatpickr'));
+
     done();
 }