diff --git a/src/Calendar.js b/src/Calendar.js
index c05bc3e..d2ea9dd 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -172,14 +172,21 @@ export default class Calendar extends Component {
         const { value, month, hoverWeek, hoverDate } = this.state;
 
         const classes = ['cell', 'day'];
+        
+        const now = DateTime.local().startOf('day');
 
         if (i === 0) {
             classes.push('first');
         }
 
+        if (now && +date === +now) {
+            classes.push('current');
+        }
+
         if (value && +date === +value) {
             classes.push('selected');
         }
+
         if (
             highlightStart &&
             highlightEnd &&
diff --git a/src/daycy.css b/src/daycy.css
index 56274d0..b0b0f32 100644
--- a/src/daycy.css
+++ b/src/daycy.css
@@ -105,7 +105,6 @@
     text-align: center;
     line-height: 2.3rem;
     color: rgb(34, 36, 38);
-    border-color: rgba(34, 36, 38, 0.2);
     cursor: pointer;
     border-radius: 0.3rem;
 }
@@ -115,6 +114,13 @@
     border-color: rgba(34, 36, 38, 0.3);
 }
 
+.daycy.calendar > .grid > .row > .cell.current {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #2185d0;
+    line-height: calc(2.3rem - 2px);
+}
+
 .daycy.calendar > .grid > .row > .cell.selected {
     background-color: #2185d0;
     color: #FFF;
@@ -157,6 +163,7 @@
 }
 
 .daycy.calendar > .grid > .row > .cell.hover {
+    border-color: rgba(34, 36, 38, 0.2);
     border-width: 1px;
     border-style: solid;
     line-height: calc(2.3rem - 2px);