diff --git a/calendar/js/app.js b/calendar/js/app.js
index ce6dc71a87..de3a74d438 100644
--- a/calendar/js/app.js
+++ b/calendar/js/app.js
@@ -3177,7 +3177,19 @@ app.classes.calendar = AppJS.extend(
 			$j(window).on('resize.calendar'+date.dom_id, function() {
 				var percent = 1+(($j(date_widget.getDOMNode()).width() - preferred_width) / preferred_width);
 				percent *= font_ratio;
-				$j('#calendar-sidebox_date .ui-datepicker-inline').css('font-size',(percent*100)+'%');
+				$j('#calendar-sidebox_date .ui-datepicker-inline,#calendar-sidebox_header_today')
+					.css('font-size',(percent*100)+'%');
+				// Position today
+				var buttons = $j('#calendar-sidebox_date .ui-datepicker-header a');
+				var left = Infinity;
+				var total = 0;
+				buttons.each(function()	{
+					total += $j(this).position().left;
+				});
+				// Why doesn't this work properly?
+				var today = $j('#calendar-sidebox_header_today')
+					.position({my: 'center left', at: 'center right',of: buttons});
+				today.css('left',(total/buttons.length)/*+(today.width()/2)*/)
 			}).trigger('resize');
 			
 		}
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index 3cc153b421..183dad6531 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -36,6 +36,19 @@
 #calendar-sidebox_date_header > button {
 	width: 45%;
 }
+#calendar-sidebox_header_today {
+	position: absolute;
+	width: 2.4em;
+	height: 1.8em;
+	z-index: 1;
+	text-indent: 3em;
+	overflow: hidden;
+	border: none;
+    background-size: contain;
+	background-color: transparent;
+    background-image: url(images/today.png);
+	background-repeat: no-repeat;
+}
 #calendar-sidebox_weekend {
 	/* Special css styling goes here */
 }
diff --git a/calendar/templates/default/sidebox.xet b/calendar/templates/default/sidebox.xet
index 37a8c36df9..aa7dbf5f56 100644
--- a/calendar/templates/default/sidebox.xet
+++ b/calendar/templates/default/sidebox.xet
@@ -15,7 +15,7 @@ Egroupware
     <template id="calendar.sidebox">
 		<vbox parent_node="calendar-et2_target">
 			<textbox id="keywords" class="et2_fullWidth" blur="Search" onchange="app.calendar.update_state({view: 'listview',keywords: widget.getValue()});return false;"/>
-			<buttononly id="header_today" label="Today" onclick="
+			<buttononly id="header_today" label="Today" icon="today" statustext="Today" onclick="
 var tempDate = new Date();
 var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
 var change = {date: today.toJSON()};
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index ebb73a16a4..b31135a8a6 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -1322,6 +1322,9 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
 #calendar-sidebox_date .ui-widget-content .ui-state-hover {
   background-color: rgba(103, 159, 210, 0.2);
 }
+#calendar-sidebox_header_today {
+  background-image: url(images/today.png);
+}
 #calendar_cat_id,
 #calendar_filter,
 #uical_select_owner,
diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less
index bda3f17c56..04bbdee35a 100755
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@@ -1358,6 +1358,9 @@ div#calendar-container {
 		background-color: @color_hover_row;
 	}
 }
+#calendar-sidebox_header_today {
+    background-image: url(images/today.png);
+}
 // Select Fields in Sidemenu
 #calendar_cat_id,
 #calendar_filter,