diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css
index 49de32f52..a8935eed7 100644
--- a/src/public/stylesheets/calendar.css
+++ b/src/public/stylesheets/calendar.css
@@ -51,7 +51,7 @@
     text-align: center;
     border: 0;
     border-bottom: 1px solid var(--button-border-color);
-    background-color: var(--menu-background-color) !important;
+    background-color: var(--menu-background-color);
     outline: 0;
 }
 
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index e39771edb..ad07f9621 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1125,13 +1125,19 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
 .calendar-dropdown-widget .calendar-header input,
 .calendar-dropdown-widget .calendar-header [data-calendar-input="month"] {
     /* TODO: Provide styling for background and states */
-    background: transparent !important;
+    --input-background-color: transparent;
+    --menu-background-color: transparent;
     border: unset;
+    border-radius: var(--bs-border-radius);
     text-align: center;
     font-size: 1.4em;
     font-weight: 300;
 }
 
+.calendar-dropdown-widget .calendar-header input:not(:focus) {
+    outline: 3px solid transparent;
+}
+
 .calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
     content: unset !important;
 }