diff --git a/application/views/pages/calendar/calendar_page.php b/application/views/pages/calendar/calendar_page.php
index 2d5f1d4e..60ef9488 100755
--- a/application/views/pages/calendar/calendar_page.php
+++ b/application/views/pages/calendar/calendar_page.php
@@ -19,8 +19,16 @@
  */
 ?>
 
+<?php extend('layouts/backend/backend_layout') ?>
+
+<?php section('styles') ?>
+
 <link rel="stylesheet" type="text/css" href="<?= asset_url('/assets/vendor/fullcalendar/fullcalendar.min.css') ?>">
 
+<?php section('styles') ?>
+
+<?php section('scripts') ?>
+
 <script src="<?= asset_url('assets/vendor/fullcalendar/fullcalendar.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script>
@@ -60,6 +68,10 @@
     });
 </script>
 
+<?php section('scripts') ?>
+
+<?php section('content') ?>
+
 <div class="container-fluid backend-page" id="calendar-page">
     <div class="row" id="calendar-toolbar">
         <div id="calendar-filter" class="col-12 col-sm-5">
@@ -140,9 +152,11 @@
 
 <!-- Page Components -->
 
-<?= component('manage_appointment_modal') ?>
-<?= component('manage_appointment_modal') ?>
-<?= component('manage_unavailable_modal') ?>
-<?= component('select_google_calendar_modal') ?>
-<?= component('working_plan_exceptions_modal') ?>
+<?php component('manage_appointment_modal', '', ['timezones' => $timezones]) ?>
+<?php component('manage_appointment_modal') ?>
+<?php component('manage_unavailable_modal') ?>
+<?php component('select_google_calendar_modal') ?>
+<?php component('working_plan_exceptions_modal') ?>
+
+<?php section('content') ?>