diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index 05a8c54e73..0e03926e1e 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -297,7 +297,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	color: #626161;
 }
 #calendar-view .calendar_calBirthday, #calendar-planner .calendar_plannerHeader .calendar_calBirthdayIcon {
-	background-image: url(../../../api/templates/default/images/cake.svg);
+	background-image: url(../../../node_modules/bootstrap-icons/icons/cake2.svg);
     background-repeat: no-repeat;
     background-size: 16px;
     background-position: 10px center;
diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css
index d8fc14b37d..f770852b0c 100644
--- a/calendar/templates/mobile/app.css
+++ b/calendar/templates/mobile/app.css
@@ -8,7 +8,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Hadi Nategh <hn@stylite.de>
  * @package calendar
- * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
  */
 /**
  * EGroupware: CSS with less preprocessor
@@ -91,15 +90,19 @@
 #calendar-et2_target > div {
   position: relative;
 }
-#calendar-sidebox_cat_id {
-  margin-bottom: 5px;
-}
 #calendar-sidebox_cat_id ~ * {
   vertical-align: top;
   display: inline-block;
   border: none;
   box-shadow: none;
 }
+.flatpickr-current-month .numInputWrapper {
+  color: inherit;
+}
+/*overrides above for disabled et2-box*/
+#calendar-sidebox_cat_id ~ et2-box[disabled] {
+  display: none;
+}
 #calendar-sidebox_weekend {
   /* Special css styling goes here */
 }
@@ -303,7 +306,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 #calendar-view .calendar_calBirthday,
 #calendar-planner .calendar_plannerHeader .calendar_calBirthdayIcon {
-  background-image: url(../../../api/templates/default/images/cake.svg);
+  background-image: url(../../../node_modules/bootstrap-icons/icons/cake2.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 10px center;
@@ -1396,10 +1399,12 @@ Hide subsequent headers in week view with non-consolidated owners
 .calendar_freetime_timeframe {
   position: relative;
 }
-img.calendar_print_button,
-img.calendar_print_appicon {
+et2-image.calendar_print_button,
+et2-appicon.calendar_print_appicon,
+et2-appicon.calendar_print_appicon img {
   height: 24px;
-  width: 24px;
+  width: 26px;
+  font-size: 24px;
 }
 /*Sortable views*/
 .srotable_cal_wk_ph {
@@ -1445,7 +1450,7 @@ img.calendar_print_appicon {
 /*weekend slideSwitch in toolbar*/
 #calendar-toolbar_app_header {
   color: #000;
-  font-size: var(--sl-font-size-large);
+  font-size: 14px;
   height: 1.6em;
   padding: 4px 3px 3px;
   background: #b4cee773;
@@ -1652,7 +1657,20 @@ et2-button#calendar-toolbar_toolbar-today::part(label) {
   height: calc(100% - 78px);
 }
 #calendar_sidebox_content .egw_fw_ui_category_content {
-  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+div.flatpickr-calendar .flatpickr-months {
+  gap: 0;
+}
+div.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
+  width: 65%;
+  padding-right: 0 !important;
+}
+div.flatpickr-calendar .flatpickr-prev-month {
+  padding-right: 0;
+}
+div.flatpickr-calendar .flatpickr-next-month {
+  padding-left: 0;
 }
 img.sideboxstar {
   width: 12px;
@@ -2499,7 +2517,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /*ui-widget*/
 /*edit series*/
 button#series {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   /*.border_normal;*/
   /*.box_shadow_standard_light;*/
   /*.rounded (3px);*/
@@ -2544,7 +2562,7 @@ button#series:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
 }
 button#series:hover {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   background-color: #b3e4a6 !important;
 }
 button#series:active {
@@ -2552,7 +2570,7 @@ button#series:active {
 }
 /*edit exception*/
 button#exception {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   /*.border_normal;*/
   /*.box_shadow_standard_light;*/
   /*.rounded (3px);*/
@@ -2597,7 +2615,7 @@ button#exception:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
 }
 button#exception:hover {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   background-color: #b3e4a6 !important;
 }
 button#exception:active {
diff --git a/calendar/templates/mobile/app.less b/calendar/templates/mobile/app.less
index 0d6589063c..822e5f5e29 100644
--- a/calendar/templates/mobile/app.less
+++ b/calendar/templates/mobile/app.less
@@ -8,7 +8,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Hadi Nategh <hn@stylite.de>
  * @package calendar
- * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
  */
 @import (reference) "../../../pixelegg/less/definitions.less";
 @import (reference) "../../../pixelegg/less/app_colors.less";
@@ -129,4 +128,4 @@
 		font-size: 10pt;
 		color: #707070;
 	}
-}
+}
\ No newline at end of file
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index bf7e7ed43c..108f7a86e8 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -295,7 +295,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 }
 #calendar-view .calendar_calBirthday,
 #calendar-planner .calendar_plannerHeader .calendar_calBirthdayIcon {
-  background-image: url(../../../api/templates/default/images/cake.svg);
+  background-image: url(../../../node_modules/bootstrap-icons/icons/cake2.svg);
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 10px center;
@@ -2504,7 +2504,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /*ui-widget*/
 /*edit series*/
 button#series {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   /*.border_normal;*/
   /*.box_shadow_standard_light;*/
   /*.rounded (3px);*/
@@ -2549,7 +2549,7 @@ button#series:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
 }
 button#series:hover {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   background-color: #b3e4a6 !important;
 }
 button#series:active {
@@ -2557,7 +2557,7 @@ button#series:active {
 }
 /*edit exception*/
 button#exception {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   /*.border_normal;*/
   /*.box_shadow_standard_light;*/
   /*.rounded (3px);*/
@@ -2602,7 +2602,7 @@ button#exception:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
 }
 button#exception:hover {
-  background-image: url('../../../api/templates/default/images/edit.svg') !important;
+  background-image: url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
   background-color: #b3e4a6 !important;
 }
 button#exception:active {
diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less
index 3f81ec5fe8..b2c3a0dd2a 100755
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@@ -1009,18 +1009,18 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 /*ui-widget*/
  /*edit series*/
 button#series {
-    background-image:url('../../../api/templates/default/images/edit.svg') !important;
+    background-image:url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
     .Complete_Button_text_icon_before;
     .Complete_Button_save_apply_copy;
-    &:hover {background-image:url('../../../api/templates/default/images/edit.svg') !important; background-color: @color_positive_action_active !important;}
+    &:hover {background-image:url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important; background-color: @color_positive_action_active !important;}
     &:active {background-color: @color_positive_action_active !important;}
 }
 /*edit exception*/
 button#exception {
-        background-image:url('../../../api/templates/default/images/edit.svg') !important;
+        background-image:url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;
     .Complete_Button_text_icon_before;
     .Complete_Button_save_apply_copy;
-    &:hover {background-image:url('../../../api/templates/default/images/edit.svg') !important;background-color: @color_positive_action_active !important;}
+    &:hover {background-image:url('../../../node_modules/bootstrap-icons/icons/pencil-square.svg') !important;background-color: @color_positive_action_active !important;}
     &:active {background-color: @color_positive_action_active !important;}
 }