diff --git a/dist/index.css b/dist/index.css
index c966c2a2..15abe386 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -236,10 +236,12 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div,
 #chat-page > div > #ribbon,
+#chat-page > div > #ribbon > span,
 #chat-page > div > #main,
 #chat-page > div > #main > div,
 #chat-page > div > #main > div > .pane-wrapper > .pane,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   display: flex;
 }
@@ -297,33 +299,30 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
 }
 #chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-  padding: var(--gap-between-tiles);
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
   gap: var(--gap-between-tiles);
 }
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
+  justify-content: start;
+  justify-content: space-between;
+}
 #chat-page > div > #ribbon {
   width: var(--ribbon-size);
   border-right: 1px solid var(--border);
-  justify-content: space-between;
   padding-bottom: var(--safe-area-bottom);
 }
 #chat-page > div > #ribbon > span {
   height: 100%;
   flex: 1;
   overflow-y: auto;
-  justify-content: flex-end;
-}
-#chat-page > div > #ribbon > span {
   flex-direction: column;
+  justify-content: end;
+  padding: var(--gap-between-tiles);
 }
 #chat-page > div > #ribbon button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
   padding: 0px;
-  width: 100%;
+  width: var(--control-height);
   max-width: var(--control-height);
   height: var(--control-height);
   min-height: var(--control-height);
@@ -332,6 +331,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div > #ribbon button.ribbon-button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
+  width: 100%;
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
@@ -350,7 +350,7 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
   border-top: 1px solid var(--border);
 }
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
diff --git a/dist/index.js b/dist/index.js
index 43d8d3db..1b091f4d 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1935,7 +1935,7 @@
       scrollDownIfApplicable
     );
     setTimeout(() => scrollDown(), 100);
-    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { class: "title" }, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": messagePageViewModel.composingMessage,
@@ -2032,7 +2032,7 @@
         settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
       });
     };
-    return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { class: "title" }, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": settingsPageViewModel.primaryChannelInput,
@@ -2143,7 +2143,7 @@
 
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(boardViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",
@@ -2159,7 +2159,7 @@
         "on:click": boardViewModel.showSettings
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "settings")
-    )), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
+    )), /* @__PURE__ */ createElement("span", null, "a"), /* @__PURE__ */ createElement("span", null, "b")), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
   }
 
   // src/View/ChatPages/taskPage.tsx
diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx
index 4f2c8571..914cecd5 100644
--- a/src/View/ChatPages/boardPage.tsx
+++ b/src/View/ChatPages/boardPage.tsx
@@ -8,20 +8,24 @@ export function BoardPage(boardViewModel: BoardViewModel) {
   return (
     <div class="pane">
       <div class="toolbar">
-        <button
-          class="ghost"
-          aria-label={translations.chatPage.task.closeBoard}
-          on:click={boardViewModel.close}
-        >
-          <span class="icon">arrow_back</span>
-        </button>
-        <button
-          class="ghost"
-          aria-label={translations.chatPage.task.boardSettingsHeadline}
-          on:click={boardViewModel.showSettings}
-        >
-          <span class="icon">settings</span>
-        </button>
+        <span>
+          <button
+            class="ghost"
+            aria-label={translations.chatPage.task.closeBoard}
+            on:click={boardViewModel.close}
+          >
+            <span class="icon">arrow_back</span>
+          </button>
+          <button
+            class="ghost"
+            aria-label={translations.chatPage.task.boardSettingsHeadline}
+            on:click={boardViewModel.showSettings}
+          >
+            <span class="icon">settings</span>
+          </button>
+        </span>
+        <span>a</span>
+        <span>b</span>
       </div>
       <div class="content"></div>
 
diff --git a/src/View/ChatPages/messagePage.tsx b/src/View/ChatPages/messagePage.tsx
index d8f7ceff..6e467ed1 100644
--- a/src/View/ChatPages/messagePage.tsx
+++ b/src/View/ChatPages/messagePage.tsx
@@ -40,7 +40,7 @@ export function MessagePage(messagePageViewModel: MessagePageViewModel) {
       <div class="pane-wrapper">
         <div class="pane">
           <div class="toolbar">
-            <span>{translations.chatPage.message.messagesHeadline}</span>
+            <span class="title">{translations.chatPage.message.messagesHeadline}</span>
           </div>
           <div class="content">
             {messageContainer}
diff --git a/src/View/ChatPages/settingsPage.tsx b/src/View/ChatPages/settingsPage.tsx
index 7e827ea2..62a83065 100644
--- a/src/View/ChatPages/settingsPage.tsx
+++ b/src/View/ChatPages/settingsPage.tsx
@@ -23,7 +23,9 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
       <div class="pane-wrapper">
         <div class="pane">
           <div class="toolbar">
-            <span>{translations.chatPage.settings.settingsHeadline}</span>
+            <span class="title">
+              {translations.chatPage.settings.settingsHeadline}
+            </span>
           </div>
           <div class="content">
             <label class="tile flex-no">
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index 46784f18..2833d64f 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -28,10 +28,12 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div,
 #chat-page > div > #ribbon,
+#chat-page > div > #ribbon > span,
 #chat-page > div > #main,
 #chat-page > div > #main > div,
 #chat-page > div > #main > div > .pane-wrapper > .pane,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   display: flex;
 }
@@ -104,22 +106,19 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-
-  padding: var(--gap-between-tiles);
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
   gap: var(--gap-between-tiles);
 }
 
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
+  justify-content: start;
+  justify-content: space-between;
+}
+
 #chat-page > div > #ribbon {
   width: var(--ribbon-size);
   border-right: 1px solid var(--border);
 
-  justify-content: space-between;
-
   padding-bottom: var(--safe-area-bottom);
 }
 
@@ -129,18 +128,17 @@ body[showing-chat] #chat-page-wrapper {
   flex: 1;
   overflow-y: auto;
 
-  justify-content: flex-end;
-}
-
-#chat-page > div > #ribbon > span {
   flex-direction: column;
+  justify-content: end;
+
+  padding: var(--gap-between-tiles);
 }
 
 #chat-page > div > #ribbon button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
   padding: 0px;
 
-  width: 100%;
+  width: var(--control-height);
   max-width: var(--control-height);
   height: var(--control-height);
   min-height: var(--control-height);
@@ -158,6 +156,7 @@ body[showing-chat] #chat-page-wrapper {
   > .pane
   > .toolbar
   button.ribbon-button {
+  width: 100%;
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
@@ -190,7 +189,7 @@ body[showing-chat] #chat-page-wrapper {
   border-top: 1px solid var(--border);
 }
 
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }