diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 3417a072c3..18e5527870 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -4031,15 +4031,19 @@ div.flatpickr-calendar.inline .dayContainer {
 
 div.flatpickr-calendar.inline .flatpickr-months .flatpickr-month {
     flex: 1 1 auto;
+    padding-top: 4px;
+    padding-bottom: 5px;
 }
 
 div.flatpickr-calendar.inline .flatpickr-months {
     background-color: #eceef1;
+    gap: 4px;
 }
 
 div.flatpickr-calendar.inline .flatpickr-months .flatpickr-prev-month,
 div.flatpickr-calendar.inline .flatpickr-months .flatpickr-next-month {
     position: relative;
+    padding: 3px 5px;
 }
 
 div.flatpickr-calendar.inline .flatpickr-current-month .flatpickr-monthDropdown-months {
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index 21f1251c24..45c87817ed 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -100,7 +100,6 @@
 	top: 28px;
 	z-index: 1;
 	overflow: hidden;
-	margin: 0.5em;
 	font-size: 10px;
 	line-height: 50%;
 	color: white;
@@ -109,24 +108,13 @@
 	border:none;
 	border-radius: 100%;
 }
-#calendar-sidebox_header_today {
-	right: 35px;
-}
 #calendar-sidebox_header_go {
-	right: 80px;
 	text-indent: -1px;
 }
 #calendar-sidebox_header_go:hover, #calendar-sidebox_header_today:hover {
 	background-color: #0c5da5;
 	box-shadow: none;
 }
-
-#calendar-sidebox_date .ui-datepicker-header a {
-	top: 3px;
-}
-#calendar-sidebox_date .ui-datepicker-prev {
-	right: 3em;
-}
 #calendar-sidebox_weekend {
 	/* Special css styling goes here */
 }
@@ -145,12 +133,24 @@
 }
 
 #calendar-sidebox_date .flatpickr-months > * {
-    padding: 3px;
     height: 20px;
 }
 #calendar-sidebox_date .flatpickr-current-month {
-    height: 20px;
-    font-size: 110%
+    height: 25px;
+    font-size: 110%;
+    width: 100%;
+    min-width: 16ch;
+    left: 0;
+    display: flex;
+    align-items: stretch;
+    padding: 0px;
+}
+#calendar-sidebox_date .flatpickr-current-month .numInputWrapper {
+    width: 7ch;
+    min-width: 7ch;
+}
+#calendar-sidebox_date .flatpickr-current-month input.cur-year {
+    padding-top: 3px;
 }
 #calendar-sidebox_date div.flatpickr-calendar.inline .flatpickr-current-month .flatpickr-monthDropdown-months {
     width: 70%;
diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css
index 33a5eee708..f10c7565ba 100644
--- a/calendar/templates/mobile/app.css
+++ b/calendar/templates/mobile/app.css
@@ -99,7 +99,6 @@
   display: inline-block;
 }
 #calendar-sidebox_cat_id {
-  width: 90%;
   margin-bottom: 10px;
 }
 #calendar-sidebox_cat_id ~ * {
@@ -121,7 +120,6 @@
   top: 28px;
   z-index: 1;
   overflow: hidden;
-  margin: 0.5em;
   font-size: 10px;
   line-height: 50%;
   color: white;
@@ -130,11 +128,7 @@
   border: none;
   border-radius: 100%;
 }
-#calendar-sidebox_header_today {
-  right: 35px;
-}
 #calendar-sidebox_header_go {
-  right: 80px;
   text-indent: -1px;
 }
 #calendar-sidebox_header_go:hover,
@@ -142,12 +136,6 @@
   background-color: #0c5da5;
   box-shadow: none;
 }
-#calendar-sidebox_date .ui-datepicker-header a {
-  top: 3px;
-}
-#calendar-sidebox_date .ui-datepicker-prev {
-  right: 3em;
-}
 #calendar-sidebox_weekend {
   /* Special css styling goes here */
 }
@@ -165,12 +153,24 @@
   background-color: white;
 }
 #calendar-sidebox_date .flatpickr-months > * {
-  padding: 3px;
   height: 20px;
 }
 #calendar-sidebox_date .flatpickr-current-month {
-  height: 20px;
+  height: 25px;
   font-size: 110%;
+  width: 100%;
+  min-width: 16ch;
+  left: 0;
+  display: flex;
+  align-items: stretch;
+  padding: 0px;
+}
+#calendar-sidebox_date .flatpickr-current-month .numInputWrapper {
+  width: 7ch;
+  min-width: 7ch;
+}
+#calendar-sidebox_date .flatpickr-current-month input.cur-year {
+  padding-top: 3px;
 }
 #calendar-sidebox_date div.flatpickr-calendar.inline .flatpickr-current-month .flatpickr-monthDropdown-months {
   width: 70%;
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index 46603c728e..9698481de5 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -108,7 +108,6 @@
   top: 28px;
   z-index: 1;
   overflow: hidden;
-  margin: 0.5em;
   font-size: 10px;
   line-height: 50%;
   color: white;
@@ -117,11 +116,7 @@
   border: none;
   border-radius: 100%;
 }
-#calendar-sidebox_header_today {
-  right: 35px;
-}
 #calendar-sidebox_header_go {
-  right: 80px;
   text-indent: -1px;
 }
 #calendar-sidebox_header_go:hover,
@@ -129,12 +124,6 @@
   background-color: #0c5da5;
   box-shadow: none;
 }
-#calendar-sidebox_date .ui-datepicker-header a {
-  top: 3px;
-}
-#calendar-sidebox_date .ui-datepicker-prev {
-  right: 3em;
-}
 #calendar-sidebox_weekend {
   /* Special css styling goes here */
 }
@@ -152,12 +141,24 @@
   background-color: white;
 }
 #calendar-sidebox_date .flatpickr-months > * {
-  padding: 3px;
   height: 20px;
 }
 #calendar-sidebox_date .flatpickr-current-month {
-  height: 20px;
+  height: 25px;
   font-size: 110%;
+  width: 100%;
+  min-width: 16ch;
+  left: 0;
+  display: flex;
+  align-items: stretch;
+  padding: 0px;
+}
+#calendar-sidebox_date .flatpickr-current-month .numInputWrapper {
+  width: 7ch;
+  min-width: 7ch;
+}
+#calendar-sidebox_date .flatpickr-current-month input.cur-year {
+  padding-top: 3px;
 }
 #calendar-sidebox_date div.flatpickr-calendar.inline .flatpickr-current-month .flatpickr-monthDropdown-months {
   width: 70%;