diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html
index 8bd3809c..1bd22ab2 100644
--- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html
+++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html
@@ -1,4 +1,2 @@
-<div>
-  <div>{{ day }}</div>
-  <span>{{ (day + 100) * day }}$</span>
-</div>
+<div>{{ day }}</div>
+<span class="caption">{{ (day + 100) * day }}$</span>
diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
index 61449068..4054a847 100644
--- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
+++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
@@ -2,9 +2,18 @@
 
 @include nb-install-component() {
   text-align: center;
+  flex-direction: column;
 
-  span {
-    font-size: 75%;
-    opacity: 0.75;
+  .caption {
+    display: block;
+  }
+
+  &.selected .caption,
+  &:hover .caption {
+    color: nb-theme(text-control-color);
+  }
+
+  &.bounding-month .caption {
+    color: inherit;
   }
 }