diff --git a/Theme/Backend/calendar-dashboard.tpl.php b/Theme/Backend/calendar-dashboard.tpl.php
index f011427..f6da34c 100755
--- a/Theme/Backend/calendar-dashboard.tpl.php
+++ b/Theme/Backend/calendar-dashboard.tpl.php
@@ -18,17 +18,19 @@ $calendar = $this->data['calendar'];
     <div class="col-xs-12 col-md-9">
         <div class="box wf-100">
             <ul class="btns lf">
-                <li><a href="<?= $this->printHtml(\phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, -1, 0)->format('Y-m-d'))); ?>"><i class="g-icon">arrow_back</i></a>
-                <li><a href="<?= $this->printHtml(\phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, 1, 0)->format('Y-m-d'))); ?>"><i class="g-icon">arrow_forward</i></a>
+                <li><a href="<?= \phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, -1, 0)->format('Y-m-d')); ?>"><i class="g-icon">arrow_back</i></a>
+                <li><a href="<?= \phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, 1, 0)->format('Y-m-d')); ?>"><i class="g-icon">arrow_forward</i></a>
             </ul>
+            <!-- @feature implement different views
             <ul class="btns rf">
                 <li><a href=""><?= $this->getHtml('Day'); ?></a>
                 <li><a href=""><?= $this->getHtml('Week'); ?></a>
                 <li><a href=""><?= $this->getHtml('Month'); ?></a>
                 <li><a href=""><?= $this->getHtml('Year'); ?></a>
             </ul>
+            -->
         </div>
-        <div class="box wf-100">
+        <div class="portlet">
             <div id="calendar" class="m-calendar" data-action='[
                 {
                     "listener": "click", "selector": "#calendar span.tag", "action": [
@@ -36,7 +38,7 @@ $calendar = $this->data['calendar'];
                     ]
                 }
             ]'>
-                <ul class="weekdays green">
+                <ul class="weekdays">
                     <li><?= $this->getHtml('Sunday'); ?>
                     <li><?= $this->getHtml('Monday'); ?>
                     <li><?= $this->getHtml('Tuesday'); ?>
@@ -75,23 +77,18 @@ $calendar = $this->data['calendar'];
     </div>
 
     <div class="col-xs-12 col-md-3">
-        <section class="box wf-100">
-            <header><h1>Title</h1></header>
-
-            <div class="inner">
+        <!-- @feature create additional styles -->
+        <section class="portlet">
+            <div class="portlet-body">
                 <form>
-                    <table class="layout wf-100">
-                        <tr>
-                            <td><label>Layout</label>
-                        <tr>
-                            <td><select name="layout">
-                                    <option>
-                                </select>
-                    </table>
+                    <select name="layout">
+                        <option><?= $this->getHtml('Month'); ?>
+                    </select>
                 </form>
             </div>
         </section>
 
+        <!-- @todo allow multiple calendars
         <section class="box wf-100">
             <header><h1>Calendars</h1></header>
 
@@ -103,6 +100,7 @@ $calendar = $this->data['calendar'];
                 <button><i class="g-icon">calendar_add_on</i> <?= $this->getHtml('Add', '0', '0'); ?></button> <button><i class="g-icon">event_available</i> <?= $this->getHtml('Create', '0', '0'); ?></button>
             </div>
         </section>
+        -->
     </div>
 </div>
 
diff --git a/Theme/Backend/css/styles.css b/Theme/Backend/css/styles.css
index da75103..d08a575 100755
--- a/Theme/Backend/css/styles.css
+++ b/Theme/Backend/css/styles.css
@@ -1,3 +1,37 @@
+ul.btns {
+  list-style: none;
+  overflow: hidden;
+  display: flex;
+
+  li {
+      background: var(--box-bg);;
+      border-left: 1px solid var(--bborder);
+      border-top: 1px solid var(--bborder);
+      border-bottom: 1px solid var(--bborder);
+      float: left;
+      padding: 0 10px 0 10px;
+      height: 2.5rem;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      &:last-child {
+          border-right: 1px solid var(--bborder);
+      }
+
+      &:before {
+          border-left-color: var(--bborder);
+          margin-left: 1px;
+      }
+  }
+
+  .active, li:hover {
+      background: var(--btn-bg);
+      color: #fff;
+  }
+}
+
 .m-calendar {
   width: 100%; }
   .m-calendar ul {
@@ -14,6 +48,7 @@
         border: none;
         color: #fff;
         padding: 10px 6px;
+        background: var(--thead-bg);
         font-size: 13px; }
   .m-calendar li {
     display: block;
@@ -21,10 +56,10 @@
     width: 14.285%;
     padding: 5px;
     box-sizing: border-box;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc; }
+    border-right: 1px solid var(--bborder);;
+    border-bottom: 1px solid var(--bborder);; }
     .m-calendar li:first-child {
-      border-left: 1px solid #ccc; }
+      border-left: 1px solid var(--bborder);; }
   .m-calendar .days li {
     height: 150px;
     overflow-y: auto; }
@@ -44,7 +79,7 @@
     padding: 5px;
     margin-top: 5px;
     background: #e4f2f2;
-    border: 1px solid #b5dbdc;
+    border: 1px solid var(--bborder);;
     color: #009aaf;
     text-decoration: none; }
   .m-calendar .event-desc {
@@ -70,7 +105,7 @@
     display: none; }
   .m-calendar li {
     height: auto !important;
-    border: 1px solid #ededed;
+    border: 1px solid var(--bborder);;
     width: 100%;
     padding: 10px;
     margin-bottom: -1px; }
diff --git a/Theme/Backend/css/styles.scss b/Theme/Backend/css/styles.scss
index ae4e264..c19d155 100755
--- a/Theme/Backend/css/styles.scss
+++ b/Theme/Backend/css/styles.scss
@@ -1,3 +1,37 @@
+ul.btns {
+    list-style: none;
+    overflow: hidden;
+    display: flex;
+
+    li {
+        background: var(--box-bg);;
+        border-left: 1px solid var(--bborder);
+        border-top: 1px solid var(--bborder);
+        border-bottom: 1px solid var(--bborder);
+        float: left;
+        padding: 0 10px 0 10px;
+        height: 2.5rem;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+
+        &:last-child {
+            border-right: 1px solid var(--bborder);
+        }
+
+        &:before {
+            border-left-color: var(--bborder);
+            margin-left: 1px;
+        }
+    }
+
+    .active, li:hover {
+        background: var(--btn-bg);
+        color: #fff;
+    }
+}
+
 .m-calendar {
     width: 100%;
 
@@ -18,6 +52,7 @@
                 color: #fff;
                 padding: 10px 6px;
                 font-size: 13px;
+                background: var(--thead-bg);
             }
         }
     }
@@ -28,11 +63,11 @@
         width:14.285%;
         padding: 5px;
         box-sizing: border-box;
-        border-right: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
+        border-right: 1px solid var(--bborder);
+        border-bottom: 1px solid var(--bborder);
 
         &:first-child {
-            border-left: 1px solid #ccc;
+            border-left: 1px solid var(--bborder);
         }
     }
 
@@ -106,7 +141,7 @@
 
         li {
             height: auto !important;
-            border: 1px solid #ededed;
+            border: 1px solid var(--bborder);
             width: 100%;
             padding: 10px;
             margin-bottom: -1px;