diff --git a/mail/js/app.js b/mail/js/app.js
index 65223c5562..da833b43fc 100644
--- a/mail/js/app.js
+++ b/mail/js/app.js
@@ -2040,8 +2040,8 @@ app.classes.mail = AppJS.extend(
 
 					if (filter && dates)
 					{
-						if (this.et2.getWidgetById('startdate') && this.et2.getWidgetById('startdate').get_value()) nm.activeFilters["startdate"] = this.et2.getWidgetById('startdate').date;
-						if (this.et2.getWidgetById('enddate') && this.et2.getWidgetById('enddate').get_value()) nm.activeFilters["enddate"] = this.et2.getWidgetById('enddate').date;
+						if (this.et2.getWidgetById('startdate') && this.et2.getWidgetById('startdate').get_value()) nm.activeFilters["startdate"] = this.et2.getWidgetById('startdate').value;
+						if (this.et2.getWidgetById('enddate') && this.et2.getWidgetById('enddate').get_value()) nm.activeFilters["enddate"] = this.et2.getWidgetById('enddate').value;
 					}
 			}
 		}
diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 89d5199c4c..832aca40db 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -1135,4 +1135,9 @@ et2-split#mail-index_mailSplitter.squeezed .mail-index_quotabox{
 .expanderFirstRow {
 	position: absolute;
 }
-.attachments et2-dropdown-button[id$="\[actions\]"]{display: inline}
\ No newline at end of file
+.attachments et2-dropdown-button[id$="\[actions\]"]{display: inline}
+
+et2-details.mail-index_datefilter::part(base) {
+	height: var(--sl-input-height-medium);
+	border-radius: var(--sl-border-radius-small);
+}
\ No newline at end of file
diff --git a/mail/templates/default/index.xet b/mail/templates/default/index.xet
index 2cb0ccf0c9..99bc1193f1 100644
--- a/mail/templates/default/index.xet
+++ b/mail/templates/default/index.xet
@@ -123,11 +123,11 @@
             <et2-description  id="nm[vacationnotice]" class="@nm[vacationclass]"></et2-description>
             <et2-description  id="nm[vacationrange]" class="@nm[vacationrangeclass]"></et2-description>
         </et2-details>
+        <et2-details id="mail.index.datefilter" class="mail-index_datefilter" summary="Date..." hoist="true">
+            <et2-date id="startdate" label="Start" onchange="app.mail.mail_refreshMessageGrid(false,true);"></et2-date>
+            <et2-date id="enddate" label="End" onchange="app.mail.mail_refreshMessageGrid(false,true);"></et2-date>
+        </et2-details>
 
-        <et2-hbox  id="mail.index.datefilter" class="mail-index_datefilter">
-            <et2-date  id="startdate" label="Start" onchange="app.mail.mail_refreshMessageGrid(false,true);"></et2-date>
-            <et2-date  id="enddate" label="End" onchange="app.mail.mail_refreshMessageGrid(false,true);"></et2-date>
-        </et2-hbox>
         <et2-hbox  id="mail.index.quotabox" class="mail-index_quotabox">
             <progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/>
         </et2-hbox>