diff --git a/dist/index.css b/dist/index.css
index 8d3644aa..f5f9d4db 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -220,6 +220,9 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div > #main {
   width: calc(100% - var(--ribbon-size));
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
 }
 #chat-page #main > div,
 #chat-page > div > #main > div > .pane,
@@ -230,6 +233,19 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div > #main > div > .pane {
   flex-direction: column;
+  scroll-snap-align: center;
+  min-width: 100%;
+}
+@media (min-width: 1024px) {
+  #chat-page > div > #main > div > .pane {
+    min-width: unset;
+  }
+  #chat-page > div > #main > div > .pane.side {
+    max-width: 18rem;
+  }
+}
+#chat-page > div > #main > div > .pane:not(:last-child) {
+  border-right: 1px solid var(--border);
 }
 #chat-page > div > #main > div > .pane > .content {
   flex-direction: column;
diff --git a/dist/index.js b/dist/index.js
index 502fce77..934ea175 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1843,7 +1843,7 @@
 
   // src/View/ChatPages/taskPage.tsx
   function TaskPage(chatViewModel) {
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }));
+    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" })), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" })));
   }
 
   // src/View/chatPage.tsx
diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx
index 50a04b3e..49e2b34d 100644
--- a/src/View/ChatPages/taskPage.tsx
+++ b/src/View/ChatPages/taskPage.tsx
@@ -7,11 +7,17 @@ import { translations } from "../translations";
 export function TaskPage(chatViewModel: ChatViewModel) {
   return (
     <div id="task-page">
-      <div class="toolbar">
-        <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+      <div class="pane side">
+        <div class="toolbar">
+          <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+        </div>
+        <div class="content"></div>
       </div>
-      <div class="content">
-       
+      <div class="pane">
+        <div class="toolbar">
+          <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+        </div>
+        <div class="content"></div>
       </div>
     </div>
   );
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index 2255095e..a7329eef 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -43,6 +43,10 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #main {
   width: calc(100% - var(--ribbon-size));
+
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
 }
 
 #chat-page #main > div,
@@ -55,6 +59,23 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #main > div > .pane {
   flex-direction: column;
+  scroll-snap-align: center;
+
+  min-width: 100%;
+}
+
+@media (min-width: 1024px) {
+  #chat-page > div > #main > div > .pane {
+    min-width: unset;
+  }
+
+  #chat-page > div > #main > div > .pane.side {
+    max-width: 18rem;
+  }
+}
+
+#chat-page > div > #main > div > .pane:not(:last-child) {
+  border-right: 1px solid var(--border);
 }
 
 #chat-page > div > #main > div > .pane > .content {