diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e4b4ef9ae3d79fc0e468d2ad42f3eb2389f73b7..1a2c796bde5ea1a323e2267874334d0c1d18549f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix too small character limit on activity description
 - Added links to more games
 - Fix typos
+- Added colors to planning
 
 ## Version 1.2.0 - 2021-04-07
 
diff --git a/home/templates/_planning.html b/home/templates/_planning.html
index 81569641e3e20bce333fd41746285f9692565347..b98b4aff3a364cb151460076ab5ee8785e9d7122 100644
--- a/home/templates/_planning.html
+++ b/home/templates/_planning.html
@@ -127,7 +127,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_1_fg);
 	}
 	.vis-item.color-a:hover {
-		color: var(--color_1_hover)
+		background-color: var(--color_1_hover)
 	}
 	.vis-item.color-b {
 		background-color: var(--color_2);
@@ -136,7 +136,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_2_fg);
 	}
 	.vis-item.color-b:hover {
-		color: var(--color_2_hover)
+		background-color: var(--color_2_hover)
 	}
 	.vis-item.color-c {
 		background-color: var(--color_2);
@@ -145,7 +145,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_2_fg);
 	}
 	.vis-item.color-c:hover {
-		color: var(--color_2_hover)
+		background-color: var(--color_2_hover)
 	}
 	.vis-item.color-c {
 		background-color: var(--color_3);
@@ -154,7 +154,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_3_fg);
 	}
 	.vis-item.color-c:hover {
-		color: var(--color_3_hover)
+		background-color: var(--color_3_hover)
 	}
 	.vis-item.color-d {
 		background-color: var(--color_4);
@@ -163,9 +163,8 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_4_fg);
 	}
 	.vis-item.color-d:hover {
-		color: var(--color_4_hover)
+		background-color: var(--color_4_hover)
 	}
-
 	.vis-item.color-e {
 		background-color: var(--color_5);
 	}
@@ -173,7 +172,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_5_fg);
 	}
 	.vis-item.color-e:hover {
-		color: var(--color_5_hover)
+		background-color: var(--color_5_hover)
 	}
 	.vis-item.color-f {
 		background-color: var(--color_6);
@@ -182,7 +181,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_6_fg);
 	}
 	.vis-item.color-f:hover {
-		color: var(--color_6_hover)
+		background-color: var(--color_6_hover)
 	}
 	.vis-item.color-g {
 		background-color: var(--color_7);
@@ -191,7 +190,7 @@ I.E we set all dates to the first day (Friday) and set groups allowing vertical
 		color: var(--color_7_fg);
 	}
 	.vis-item.color-g:hover {
-		color: var(--color_7_hover)
+		background-color: var(--color_7_hover)
 	}
 
 </style>