diff --git a/docs/prune-simulator/index.html b/docs/prune-simulator/index.html
index 22fa66f6..b4ea5370 100644
--- a/docs/prune-simulator/index.html
+++ b/docs/prune-simulator/index.html
@@ -6,6 +6,31 @@
     <title>PBS Prune Simulator</title>
 
     <link rel="stylesheet" type="text/css" href="extjs/theme-crisp/resources/theme-crisp-all.css">
+    <style>
+        .cal-day {
+            vertical-align: top;
+            width: 150px;
+            border: #939393 1px solid;
+            color: #454545;
+        }
+        .cal-day-date {
+            border-bottom: #444 1px solid;
+            color: #000;
+        }
+        .strikethrough {
+            text-decoration: line-through;
+        }
+        .black {
+            color: #000;
+        }
+        .sun {
+            background-color: #ededed;
+        }
+        .first-of-month {
+            border-right: dashed black 4px;
+        }
+    </style>
+
     <script type="text/javascript" src="extjs/ext-all.js"></script>
     <script type="text/javascript" src="prune-simulator.js"></script>
 </head>
diff --git a/docs/prune-simulator/prune-simulator.js b/docs/prune-simulator/prune-simulator.js
index 53da49df..2e13f03b 100644
--- a/docs/prune-simulator/prune-simulator.js
+++ b/docs/prune-simulator/prune-simulator.js
@@ -175,7 +175,7 @@ Ext.onReady(function() {
 	    let me = this;
 	    let backups = me.store.data.items;
 
-	    let html = '<table>';
+	    let html = '<table class="cal">';
 
 	    let now = new Date(NOW.getTime());
 	    let skip = 7 - parseInt(Ext.Date.format(now, 'N'), 10);
@@ -187,38 +187,39 @@ Ext.onReady(function() {
 		html += '<tr>';
 
 		for (let j = 0; j < 7; j++) {
-		    html += '<td style="vertical-align: top;' +
-				       'width: 150px;' +
-				       'border: black 1px solid;' +
-				       '">';
-
 		    let date = Ext.Date.subtract(tableStartDate, Ext.Date.DAY, j + 7 * i);
 		    let currentDay = Ext.Date.format(date, 'd/m/Y');
 
-		    let isBackupOnDay = function(backup, day) {
+		    let dayOfWeekCls = Ext.Date.format(date, 'D').toLowerCase();
+		    let firstOfMonthCls = Ext.Date.format(date, 'd') === '01'
+		        ? 'first-of-month'
+		        : '';
+		    html += `<td class="cal-day ${dayOfWeekCls} ${firstOfMonthCls}">`;
+
+		    const isBackupOnDay = function(backup, day) {
 			return backup && Ext.Date.format(backup.data.backuptime, 'd/m/Y') === day;
 		    };
 
 		    let backup = backups[bIndex];
 
-		    html += '<table><tr><th style="border-bottom: black 1px solid;">' +
-			    Ext.Date.format(date, 'D, d M Y') + '</th>';
+		    html += '<table><tr>';
+		    html += `<th class="cal-day-date">${Ext.Date.format(date, 'D, d M Y')}</th>`;
 
 		    while (isBackupOnDay(backup, currentDay)) {
 			html += '<tr><td>';
 
 			let text = Ext.Date.format(backup.data.backuptime, 'H:i');
 			if (backup.data.mark === 'remove') {
-			    html += '<div style="text-decoration: line-through;">' + text + '</div>';
+			    html += `<span class="strikethrough">${text}</span>`;
 			} else {
-			    text += ' (' + backup.data.keepName + ')';
+			    text += ` (${backup.data.keepName})`;
 			    if (me.useColors) {
 				let bgColor = COLORS[backup.data.keepName];
 				let textColor = TEXT_COLORS[backup.data.keepName];
-				html += '<div style="background-color: ' + bgColor + '; ' +
-						    'color: ' + textColor + ';">' + text + '</div>';
+				html += `<span style="background-color: ${bgColor};
+				    color: ${textColor};">${text}</span>`;
 			    } else {
-				html += '<div>' + text + '</div>';
+				html += `<span class="black">${text}</span>`;
 			    }
 			}
 			html += '</td></tr>';