diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css
index 4ed19c35..827b3b1b 100644
--- a/src/ui/web/css/room.css
+++ b/src/ui/web/css/room.css
@@ -24,13 +24,8 @@ limitations under the License.
     align-items: center;
 }
 
-.RoomHeader > *:last-child {
-    margin-right: 0;
-}
-
-.RoomHeader > * {
-    margin-right: 10px;
-    flex: 0 0 auto;
+.RoomHeader h2 {
+    flex: 1;
 }
 
 .RoomHeader button {
diff --git a/src/ui/web/css/themes/element/icons/chevron-left.svg b/src/ui/web/css/themes/element/icons/chevron-left.svg
new file mode 100644
index 00000000..c686cf88
--- /dev/null
+++ b/src/ui/web/css/themes/element/icons/chevron-left.svg
@@ -0,0 +1,10 @@
+<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css
index b099d83b..f347fc46 100644
--- a/src/ui/web/css/themes/element/theme.css
+++ b/src/ui/web/css/themes/element/theme.css
@@ -352,8 +352,11 @@ a {
 }
 
 .RoomHeader {
-    background: rgba(245, 245, 245, 0.90);
-    padding: 10px;
+    box-sizing: border-box;
+    height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
+    background: white;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
 .RoomHeader h2 {
@@ -361,23 +364,13 @@ a {
     font-weight: 600;
 }
 
-.RoomHeader button {
-    width: 40px;
-    height: 40px;
-    font-size: 1.5em;
-    padding: 0;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
+.RoomHeader > :not(:first-child) {
+    margin-left: 8px;
 }
 
-.back::before {
-    content: "☰";
-}
-
-.more::before {
-    content: "⋮";
+button.back {
+    background-image: url('icons/chevron-left.svg');
+    background-position-x: 10px;
 }
 
 .RoomHeader .topic {
diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js
index 3f9b9bce..9eeeb554 100644
--- a/src/ui/web/session/room/RoomView.js
+++ b/src/ui/web/session/room/RoomView.js
@@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "back", onClick: () => vm.close()}),
+                    t.button({className: "utility back", onClick: () => vm.close()}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),