diff --git a/application/views/dayswithqso/index.php b/application/views/dayswithqso/index.php
index 8b0d6ca90..3b0e71a9d 100644
--- a/application/views/dayswithqso/index.php
+++ b/application/views/dayswithqso/index.php
@@ -92,10 +92,10 @@
 			<div class="glanceyear-summary">
 				<div class="glanceyear-legend">
 					<?= __("Less")?>
-					<span style="background-color: #eee"></span>
-					<span style="background-color: #c3dbda"></span>
-					<span style="background-color: #5caeaa"></span>
-					<span style="background-color: #277672"></span>
+					<span class="glanceyear-legend-1"></span>
+					<span class="glanceyear-legend-2"></span>
+					<span class="glanceyear-legend-3"></span>
+					<span class="glanceyear-legend-4"></span>
 					<?= __("More")?>
 				</div>
 				<?= __("Calendar with QSOs") ?><br>
diff --git a/assets/css/general.css b/assets/css/general.css
index 8c4c567a8..81462de5f 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -1166,3 +1166,16 @@ svg text.month { fill: #AAA; }
 	position: absolute;
 	width: 0;
 }
+
+.glanceyear-legend-1 {
+	background-color: #eee;	
+}
+.glanceyear-legend-2 {
+	background-color: #c3dbda;	
+}
+.glanceyear-legend-3 {
+	background-color: #5caeaa;	
+}
+.glanceyear-legend-4 {
+	background-color: #277672;	
+}
\ No newline at end of file
diff --git a/assets/css/superhero_wide/overrides.css b/assets/css/superhero_wide/overrides.css
index d99016ecc..32b94703d 100644
--- a/assets/css/superhero_wide/overrides.css
+++ b/assets/css/superhero_wide/overrides.css
@@ -360,6 +360,19 @@ svg rect.day[data-col='48'] {
 	fill: #237fb4;
 }
 
+.glanceyear-legend-1 {
+	background-color: #73e2ff;	
+}
+.glanceyear-legend-2 {
+	background-color: #4ab4f5;	
+}
+.glanceyear-legend-3 {
+	background-color: #349cd8;	
+}
+.glanceyear-legend-4 {
+	background-color: #237fb4;	
+}
+
 svg text {
 	fill: #9fc7e1;
 	font-size: 9px;