diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index a02bedc2c..28f42c218 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -270,6 +270,11 @@
     --ck-editor-toolbar-button-on-color: white;
     --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
     --ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
+
+    --calendar-coll-event-background-saturation: 12%;
+    --calendar-coll-event-background-lightness: 21%;
+    --calendar-coll-event-text-color: white;
+    --calendar-cell-event-hover-filter: brightness(1.25);
 }
 
 /*
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 780d519f7..9fe9b53fe 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -268,6 +268,11 @@
     --ck-editor-toolbar-button-on-color: black;
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
+
+    --calendar-coll-event-background-lightness: 95%;
+    --calendar-coll-event-background-saturation: 80%;
+    --calendar-coll-event-text-color: black;
+    --calendar-cell-event-hover-filter: brightness(.95) saturate(1.25);
 }
 
 #left-pane .fancytree-node.tinted {
diff --git a/apps/client/src/widgets/collections/calendar/event_builder.ts b/apps/client/src/widgets/collections/calendar/event_builder.ts
index 8687dc6d9..2d884f8fe 100644
--- a/apps/client/src/widgets/collections/calendar/event_builder.ts
+++ b/apps/client/src/widgets/collections/calendar/event_builder.ts
@@ -3,6 +3,7 @@ import froca from "../../../services/froca";
 import { formatDateToLocalISO, getCustomisableLabel, getMonthsInDateRange, offsetDate } from "./utils";
 import FNote from "../../../entities/fnote";
 import server from "../../../services/server";
+import clsx from "clsx";
 
 interface Event {
     startDate: string,
@@ -81,6 +82,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
     const customTitleAttributeName = note.getLabelValue("calendar:title");
     const titles = await parseCustomTitle(customTitleAttributeName, note);
     const color = note.getLabelValue("calendar:color") ?? note.getLabelValue("color");
+    const colorClass = note.getColorClass();
     const events: EventInput[] = [];
 
     const calendarDisplayedAttributes = note.getLabelValue("calendar:displayedAttributes")?.split(",");
@@ -111,7 +113,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
             color: color ?? undefined,
             iconClass: note.getLabelValue("iconClass"),
             promotedAttributes: displayedAttributesData,
-            className: isArchived ? "archived" : ""
+            className: clsx({archived: isArchived}, colorClass)
         };
         if (endDate) {
             eventData.end = endDate;
diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css
index 5dd836fe6..b950cd8d4 100644
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -75,4 +75,30 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
 .search-result-widget-content .calendar-view .calendar-header {
     padding-inline-end: unset !important;
 }
-/* #endregion */
\ No newline at end of file
+/* #endregion */
+
+.calendar-view {
+    --fc-event-text-color: var(--calendar-coll-event-text-color);
+}
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event {
+    font-weight: 500;
+}
+
+.calendar-view a.fc-timegrid-event:hover,
+.calendar-view a.fc-daygrid-event:hover {
+    text-decoration: none;    
+    filter: var(--calendar-cell-event-hover-filter);
+}
+
+.fc-timegrid-event.with-hue, .fc-daygrid-event:not(.fc-daygrid-dot-event).with-hue {
+    --fc-event-text-color: var(--custom-color);
+
+    border: unset;
+    border-left: 4px solid;
+    padding-left: 8px;
+    background: hsl(var(--custom-color-hue),
+                    var(--calendar-coll-event-background-saturation),
+                    var(--calendar-coll-event-background-lightness)) !important;
+}
\ No newline at end of file