diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss
index f676d24bef..f8738f10e3 100644
--- a/res/css/views/messages/_DateSeparator.scss
+++ b/res/css/views/messages/_DateSeparator.scss
@@ -16,10 +16,21 @@ limitations under the License.
 
 .mx_DateSeparator {
     clear: both;
-    margin-top: 32px;
-    margin-bottom: 8px;
-    margin-left: 63px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid $primary-hairline-color;
+    margin: 4px 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: $roomtopic-color;
 }
 
+.mx_DateSeparator > hr {
+    flex: 1 1 0;
+    height: 0;
+    border: none;
+    border-bottom: 1px solid $panel-divider-color;
+}
+
+.mx_DateSeparator > date {
+    margin: 0 25px;
+    flex: 0 0 auto;
+}
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index a0ea704502..c72ed2517a 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component {
     }
 
     render() {
-        return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
+        return <h2 className="mx_DateSeparator"><hr/><date>{ this.getLabel() }</date><hr/></h2>;
     }
 }