diff --git a/src/gui/css-code.h b/src/gui/css-code.h
index 09e2545e..a00161ee 100644
--- a/src/gui/css-code.h
+++ b/src/gui/css-code.h
@@ -23,14 +23,11 @@
 ".color-%1$d {"\
 "  background-color: %2$s;"\
 "}"\
-".color-%1$d.horizontal.timed {"\
-"  background-color: transparent;"\
+".color-%1$d.timed {"\
+"  background-color: alpha(%2$s, 0.17);"\
 "}"\
-".color-%1$d.horizontal.timed box.icon-box{"\
+".color-%1$d.timed widget.edge{"\
 "  background-color: %2$s;"\
-"  border-radius: 2px;"\
-"  min-height: 16px;"\
-"  min-width: 16px;"\
 "}"\
 ".color-%1$d.slanted {"\
 "  background-color: transparent;"\
@@ -68,11 +65,6 @@
 "  background-repeat: no-repeat;"\
 "  background-origin: padding-box, padding-box, border-box, border-box;"\
 "  background-clip: padding-box, padding-box, border-box, border-box;"\
-"  padding-left: 24px;"\
-"  padding-right: 24px;"\
-"  padding-top: 3px;"\
-"  padding-bottom: 4px;"\
-"  border-radius: 0;"\
 "}"\
 ".color-%1$d.slanted:backdrop {"\
 "  background-image: linear-gradient(100deg, /* left edge */"\
@@ -157,7 +149,6 @@
 "  background-size: 100%% 100%%, 100%% 100%%;"\
 "  background-origin: padding-box, border-box;"\
 "  background-clip: padding-box, border-box;"\
-"  border-radius: 0 2px 2px 0;"\
 "}"\
 ".color-%1$d.slanted-start:backdrop {"\
 "  background-image: linear-gradient(100deg, /* left edge */"\
@@ -185,7 +176,6 @@
 "                                    @event_shadow_color	17px);"\
 "  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
 "  background-position: right bottom, right bottom;"\
-"  border-radius: 2px 0 0 2px;"\
 "}"\
 ".color-%1$d.slanted-start:dir(rtl):backdrop {"\
 "  background-image: linear-gradient(260deg, /* right edge */"\
@@ -217,7 +207,6 @@
 "  background-size: 100%% 100%%, 100%% 100%%;"\
 "  background-origin: padding-box, border-box;"\
 "  background-clip: padding-box, border-box;"\
-"  border-radius: 2px 0 0 2px;"\
 "}"\
 ".color-%1$d.slanted-end:backdrop {"\
 "  background-image: linear-gradient(280deg, /* right edge */"\
@@ -244,7 +233,6 @@
 "                                    transparent         16px,"\
 "                                    @event_shadow_color	17px);"\
 "  background-position: left bottom, left bottom;"\
-"  border-radius: 0 2px 2px 0;"\
 "}"\
 ".color-%1$d.slanted-end:dir(rtl):backdrop {"\
 "  background-image: linear-gradient(80deg, /* left edge */"\
@@ -254,12 +242,7 @@
 "                                    alpha(%2$s, 0) 10px,"\
 "                                    alpha(%2$s, 0) 16px,"\
 "                                    %2$s	   17px);"\
-"}"\
-".color-%1$d.slanted > stack { margin: 0 16px 0 16px; }"\
-".color-%1$d.slanted-start > stack { margin-left: 16px; }"\
-".color-%1$d.slanted-start:dir(rtl) > stack { margin-right: 16px; }"\
-".color-%1$d.slanted-end > stack { margin-right: 16px; }"\
-".color-%1$d.slanted-end:dir(rtl) > stack { margin-left: 16px; }"
+"}"
 
 #endif /* CSS_CODE_H */
 
diff --git a/src/gui/gcal-event-widget.c b/src/gui/gcal-event-widget.c
index 9b4ac8e4..447f4bab 100644
--- a/src/gui/gcal-event-widget.c
+++ b/src/gui/gcal-event-widget.c
@@ -51,7 +51,6 @@ struct _GcalEventWidget
   GDateTime          *dt_end;
 
   /* widgets */
-  GtkWidget          *color_box;
   GtkWidget          *horizontal_box;
   GtkWidget          *timestamp_label;
   GtkWidget          *squeezer;
@@ -170,8 +169,6 @@ gcal_event_widget_update_style (GcalEventWidget *self)
    */
   timed = !gcal_event_get_all_day (self->event) && !gcal_event_is_multiday (self->event);
 
-  gtk_widget_set_visible (self->color_box, timed && self->orientation == GTK_ORIENTATION_HORIZONTAL);
-
   if (timed)
     gtk_widget_add_css_class (GTK_WIDGET (self), "timed");
 }
@@ -760,7 +757,6 @@ gcal_event_widget_class_init (GcalEventWidgetClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/calendar/ui/gui/gcal-event-widget.ui");
 
-  gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, color_box);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, drag_source);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, horizontal_box);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, timestamp_label);
diff --git a/src/gui/gcal-event-widget.ui b/src/gui/gcal-event-widget.ui
index 2a260d42..5dd9ce51 100644
--- a/src/gui/gcal-event-widget.ui
+++ b/src/gui/gcal-event-widget.ui
@@ -20,10 +20,25 @@
       </object>
     </child>
 
+    <child>
+      <object class="GtkBox">
+        <property name="hexpand">False</property>
+        <child>
+          <object class="AdwBin" id="edge">
+            <style>
+              <class name="edge" />
+            </style>
+          </object>
+        </child>
+
     <!-- Overflow Bin -->
     <child>
       <object class="GcalOverflowBin">
+        <property name="hexpand">True</property>
         <property name="request-mode">width-for-height</property>
+        <style>
+          <class name="content" />
+        </style>
 
         <!-- Main Stack -->
         <child>
@@ -72,17 +87,6 @@
             <child>
               <object class="GtkBox" id="horizontal_box">
                 <property name="spacing">4</property>
-                <child>
-                  <object class="GtkBox" id="color_box">
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="width-request">16</property>
-                    <property name="height-request">16</property>
-                    <style>
-                      <class name="icon-box" />
-                    </style>
-                  </object>
-                </child>
                 <child>
                   <object class="GtkLabel"  id="summary_label">
                     <property name="hexpand">True</property>
@@ -104,5 +108,7 @@
         </child>
       </object>
     </child>
+      </object>
+    </child>
   </template>
 </interface>
diff --git a/src/theme/style-dark.css b/src/theme/style-dark.css
new file mode 100644
index 00000000..2690aa01
--- /dev/null
+++ b/src/theme/style-dark.css
@@ -0,0 +1,8 @@
+/*
+ * Event widget
+ */
+
+event.timed {
+    color: @light_1;
+    outline-color: rgba(0, 0, 0, 0.3);
+}
diff --git a/src/theme/style.css b/src/theme/style.css
index 19ae6a2b..f53956b8 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -1,5 +1,3 @@
-@define-color event_shadow_color alpha(black, 0.2);
-
 /* Header labels */
 label.primary-label {
     font-size: 16pt;
@@ -69,47 +67,50 @@ popover.events button {
  */
 
 event {
-    border-radius: 2px;
-    margin: 0 1px 1px 2px;
+    margin: 1px;
     font-size: 0.9rem;
 }
 
-event squeezer {
-  margin: 1px 4px 1px 6px;
+event widget.content {
+    margin: 4px;
 }
 
-event.horizontal.timed squeezer {
-  margin: 1px 2px 1px 0px;
+event.timed,
+event:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: 2.5px;
 }
 
-event.vertical.timed {
-  padding: 3px 6px;
+event.timed widget.edge {
+    border-radius: 2.5px;
+    min-width: 5px;
 }
 
-event.color-dark.horizontal.timed,
-event.color-light.horizontal.timed {
-    margin-bottom: 0;
-    border-radius: 0;
-    color: inherit;
+event.slanted,
+event.slanted-start,
+event.slanted-end:dir(rtl) {
+    padding-left: 16px;
+    border-radius: 0 2.5px 2.5px 0;
 }
 
-event.color-dark {
+event.slanted,
+event.slanted-end,
+event.slanted-start:dir(rtl) {
+    padding-right: 16px;
+    border-radius: 2.5px 0 0 2.5px;
+}
+
+event:not(.timed).color-dark {
+    /* Keep in symc with the dark style's event.timed colors */
     color: @light_1;
     outline-color: rgba(0, 0, 0, 0.3);
 }
 
-event.color-dark:backdrop {
-    color: @light_3;
-}
-
-event.color-light {
+event.timed,
+event:not(.timed).color-light {
     color: alpha(@dark_5, 0.8);
     outline-color: rgba(255, 255, 255, 0.5);
 }
 
-event.color-light:backdrop {
-    color: @dark_3;
-}
 
 /* Event Popover */
 popover.event-popover,
diff --git a/src/theme/theme.gresource.xml b/src/theme/theme.gresource.xml
index b1dd91ca..ac5a0c64 100644
--- a/src/theme/theme.gresource.xml
+++ b/src/theme/theme.gresource.xml
@@ -2,5 +2,6 @@
 <gresources>
   <gresource prefix="/org/gnome/calendar">
     <file>style.css</file>
+    <file>style-dark.css</file>
   </gresource>
 </gresources>