diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index 990b670c21..ea2cfa9db5 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -230,9 +230,7 @@ div.calendar_conflicts {
 	min-height: 26px;
 	justify-content: flex-end;
 }
-#calendar-toolbar #calendar-toolbar_keywords {
-	margin-right: 4px;
-}
+
 #calendar-toolbar .et2_searchbox input {
 	height: 14px;
 }
@@ -256,14 +254,16 @@ div.calendar_conflicts {
 	left: 0px;
 	right: 0px;
 }
-
+form#calendar-toolbar > div {
+	column-gap: 1ex;
+}
 #calendar-todo {
 	position: absolute;
 	width: 30%;
 	margin-top: 0px;
 	z-index: 10;
 	bottom: -10px;
-	height: calc(~"100% - 75px");
+	height: calc(~"100% - 92px");
 }
 
 #calendar-view {
@@ -1556,12 +1556,17 @@ img.calendar_print_button, img.calendar_print_appicon {
 /*weekend slideSwitch in toolbar*/
 
 #calendar-toolbar_app_header {
-	color: #616161;
+	color: #000;
 	font-size: 14px;
-    height: 16px;
-	position: absolute;
-	left:44%;
+	height: 1.7em;
+	padding: 4px 3px 3px;
+	background: #b4cee773;
+	border-radius: 3px;
+	width: 25em;
+	border: 1px solid #d4d4d8;
+	text-align: center;
 }
+
 /* Integration slide switches in toolbar */
 #calendar-toolbar_toolbar et2-switch {
 	height: var(--height);
diff --git a/calendar/templates/default/toolbar.xet b/calendar/templates/default/toolbar.xet
index 5d06545d14..2f3433bb1e 100644
--- a/calendar/templates/default/toolbar.xet
+++ b/calendar/templates/default/toolbar.xet
@@ -13,16 +13,16 @@ Egroupware
 
 <overlay>
 	<template id="calendar.toolbar">
-		<box class="et2_toolbar">
+		<box>
 			<box class="et2_toolbar_actionlist">
 				<buttononly id="add" background_image="true" image="add" onclick="app.calendar.toolbar_action(widget);"/>
 			</box>
 		</box>
+		<description id="app_header"/>
 		<searchbox id="keywords" blur="Search" overlay="false" onchange="app.calendar.update_state({view: 'listview',search: widget.getValue()});return false;"/>
 		<toolbar id="toolbar" width="100%" flat_list="false"/>
 		<!-- Fake an app header inside the toolbar -->
 		<box class="egw_fw_ui_app_header_container">
-			<description id="app_header"/>
 			<favorites app="calendar"/>
 		</box>
 	</template>
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index 8b9b511413..b4b5f49b64 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -230,9 +230,6 @@ div.calendar_conflicts {
   min-height: 26px;
   justify-content: flex-end;
 }
-#calendar-toolbar #calendar-toolbar_keywords {
-  margin-right: 4px;
-}
 #calendar-toolbar .et2_searchbox input {
   height: 14px;
 }
@@ -258,13 +255,16 @@ div.calendar_conflicts {
   left: 0px;
   right: 0px;
 }
+form#calendar-toolbar > div {
+  column-gap: 1ex;
+}
 #calendar-todo {
   position: absolute;
   width: 30%;
   margin-top: 0px;
   z-index: 10;
   bottom: -10px;
-  height: calc(100% - 75px);
+  height: calc(100% - 92px);
 }
 #calendar-view {
   width: 100%;
@@ -1512,11 +1512,15 @@ img.calendar_print_appicon {
 }
 /*weekend slideSwitch in toolbar*/
 #calendar-toolbar_app_header {
-  color: #616161;
+  color: #000;
   font-size: 14px;
-  height: 16px;
-  position: absolute;
-  left: 44%;
+  height: 1.7em;
+  padding: 4px 3px 3px;
+  background: #b4cee773;
+  border-radius: 3px;
+  width: 25em;
+  border: 1px solid #d4d4d8;
+  text-align: center;
 }
 /* Integration slide switches in toolbar */
 #calendar-toolbar_toolbar et2-switch {
@@ -2711,7 +2715,7 @@ div#calendar-container div.calendar {
 }
 div#calendar-container div.calendar table {
   background-color: #fafafa;
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 div#calendar-container div.calendar table thead .button {
   background-color: #FFDD73;