diff --git a/www/css/calendar.css b/www/css/calendar.css
index 94a7a45..642ce53 100644
--- a/www/css/calendar.css
+++ b/www/css/calendar.css
@@ -35,7 +35,7 @@ figure.calendar {
 	min-height: 4.8em;
 	font-size: 0.8em;
 	color: #444;
-	
+	overflow: hidden;
 }
 
 .calendar ul li.header {
@@ -65,8 +65,26 @@ figure.calendar {
 	background-color: #fff;
 }
 
-
-.calendar ul li section::before {
-	content: "\26AB   ";
-	color: #038;
+.calendar ul li .day{
+	display: inline-block;
+	width: 1.5em;
+	height: 1.5em;
+	text-align: center;
+	line-height: 1.5em;
+	background: #038;
+	color: white;
+	border-radius: 0.75em;
+	margin-bottom: 0.1em;
+}
+
+.calendar ul li section {
+	line-height: 1.5em;
+	background: #038;
+	color: white;
+	border-radius: 0.75em;
+	text-align: center;
+	white-space: nowrap;
+}
+.calendar ul li section + section {
+	margin-top: 0.1em;
 }
diff --git a/www/kalender/index.php b/www/kalender/index.php
index b5a183e..a335e3c 100644
--- a/www/kalender/index.php
+++ b/www/kalender/index.php
@@ -69,13 +69,13 @@ $days_in_month = date('t', mktime(0, 0, 0, $month, 1, $year));
 		<?php } ?>
 		<?php if (sizeof($events)!=0) { ?>
 			<a href="../aktiviteter/?<?="year=$year&amp;month=$month&amp;day=$day"?>"><div>
-				<span class="noselect"><?= $day ?>.</span>
+				<span class="noselect day"><?= $day ?>.</span>
 				<?php foreach($events as $event) { ?>
-					<section><?=$event->getName()?></section>
+					<section style="background: <?=$event->getColor()?>"><?=$event->getName()?></section>
 				<?php } ?>
 			</div></a>
 		<?php } else { ?>
-			<span class="noselect"><?= $day ?>.</span>
+			<span class="noselect day"><?= $day ?>.</span>
 		<?php } ?>
 	<?php } ?>