diff --git a/src/application/views/backend/calendar.php b/src/application/views/backend/calendar.php
index 9b80e0b1..22e96ccc 100644
--- a/src/application/views/backend/calendar.php
+++ b/src/application/views/backend/calendar.php
@@ -34,18 +34,20 @@
     });
 </script>
 
-<div id="calendar-page">
+<div id="calendar-page" class="container-fluid">
     <div id="calendar-toolbar">
-        <div id="calendar-filter" class="form-group form-inline">
-            <label for="select-filter-item">
-                <?php echo $this->lang->line('display_calendar'); ?>
-            </label>
-            <select id="select-filter-item" class="form-control">
-                    title="<?php echo $this->lang->line('select_filter_item_hint'); ?>">
-            </select>
+        <div id="calendar-filter" class="form-inline col-xs-12 col-md-5">
+            <div class="form-group">
+                <label for="select-filter-item">
+                    <?php echo $this->lang->line('display_calendar'); ?>
+                </label>
+                <select id="select-filter-item" class="form-control">
+                        title="<?php echo $this->lang->line('select_filter_item_hint'); ?>">
+                </select>
+            </div>
         </div>
 
-        <div id="calendar-actions">
+        <div id="calendar-actions" class="col-xs-12 col-md-7">
             <div class="btn-group">
                 <?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER)
                         && Config::GOOGLE_SYNC_FEATURE == TRUE) { ?>
@@ -69,7 +71,7 @@
                 </button>
             </div>
 
-            <?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE) { ?>
+            <?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
             <div class="btn-group">
                 <button id="insert-appointment" class="btn btn-primary"
                         title="<?php echo $this->lang->line('new_appointment_hint'); ?>">
@@ -83,7 +85,7 @@
                     <?php echo $this->lang->line('unavailable'); ?>
                 </button>
             </div>
-            <?php } ?>
+            <?php endif ?>
         </div>
     </div>
 
diff --git a/src/application/views/backend/header.php b/src/application/views/backend/header.php
index a954c355..ba119577 100755
--- a/src/application/views/backend/header.php
+++ b/src/application/views/backend/header.php
@@ -3,6 +3,7 @@
 <head>
     <title><?php echo $company_name; ?> | Easy!Appointments</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     <link rel="icon" type="image/x-icon"
           href="<?php echo $base_url; ?>/assets/img/favicon.ico">
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css
index 809fb995..2cbe01bd 100644
--- a/src/assets/css/backend.css
+++ b/src/assets/css/backend.css
@@ -24,6 +24,7 @@ root {
     border-bottom: 4px solid #c0f1d6;
     box-shadow: none;
     border-radius: 0;
+    margin-bottom: 15px;
 }
 
 #header #header-logo {
@@ -135,13 +136,13 @@ body .modal .modal-title {
 body .modal-header {
     padding: 12px 15px;
     background: #35B66F;
-    border-bottom: 4px solid #2B995D;
+    border-bottom: 4px solid #c0f1d6;
 }
 
 body .modal-header h3 {
     color: #FFF;
     font-size: 20px;
-    font-weight: bold;
+    font-weight: lighter;
 }
 
 body .modal-header .close {
@@ -246,24 +247,26 @@ body .jspTrack {
    -------------------------------------------------------------------- */
 #calendar-page #calendar-toolbar {
     border-bottom: 1px solid #D6D6D6;
+    border-radius: 3px; 
     background: #3A3A3A;
     padding: 10px;
+    margin-bottom: 15px;
     overflow: auto;
     color: white;
 }
 
-#calendar-page #calendar-filter {
-    float: left;
-    margin-bottom: 0;
+#calendar-page #calendar-filter > div {
+    margin: 5px 0;
 }
 
 #calendar-page #calendar-filter label {
     float: left;
     display: inline-block;
-    margin: 2px 10px 0 0;
+    margin: 0 10px 0 0;
     margin-right: 7px;
     margin-bottom: 0;
     font-size: 18px;
+    font-weight: lighter;
 }
 
 #calendar-page #calendar-filter select {
@@ -271,7 +274,6 @@ body .jspTrack {
     padding: 0 10px;
     background-position-x: 95%;
     height: 36px;
-    min-width: 270px;
 }
 
 #calendar-page #calendar-filter select:disabled {
@@ -279,12 +281,12 @@ body .jspTrack {
     cursor: auto;
 }
 
-#calendar-page #calendar-actions {
-    float: right;
+#calendar-page #calendar-actions > div {
+    margin: 5px 0;
 }
 
 #calendar-page #calendar {
-    margin: 6px 12px;
+    margin-bottom: 15px;
 }
 
 #calendar-page #calendar .fc-unavailable {
@@ -311,9 +313,9 @@ body .jspTrack {
 }
 
 #calendar .fc-header-title h2 {
-    font-size: 18px;
+    font-size: 16px;
     margin: 0px;
-    line-height: 32px;
+    line-height: 26px;
 }
 
 #calendar .fc-header .fc-button {
@@ -764,3 +766,7 @@ body .form-horizontal .controls {
     margin-left: 12px;
 }
 
+
+@media(max-width: 468px) {
+    #calendar .fc-header-title
+}
diff --git a/src/assets/js/backend_calendar.js b/src/assets/js/backend_calendar.js
index 16ac1909..c9a1d2c8 100644
--- a/src/assets/js/backend_calendar.js
+++ b/src/assets/js/backend_calendar.js
@@ -1927,9 +1927,12 @@ window.BackendCalendar = window.BackendCalendar || {};
         }
 
 
+        var defaultView = window.innerWidth < 468 ? 'agendaDay' : 'agendaWeek';
+
+
         // Initialize page calendar
         $('#calendar').fullCalendar({
-            defaultView: 'agendaWeek',
+            defaultView: defaultView,
             height: _getCalendarHeight(),
             editable: true,
             firstDay: 1, // Monday
