diff --git a/dist/index.css b/dist/index.css
index 2529137d..ce3ed695 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -59,7 +59,7 @@ body[theme=dark] [color]:not([color=standard]).tile {
   [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 100%;
-    background: hsl(var(--hue), var(--sat), var(--luma), 40%);
+    background: hsl(var(--hue), var(--sat), var(--luma), 20%);
   }
   body[theme=dark] [color]:not([color=standard]).background {
     --luma: var(--background-luma-dark);
@@ -469,6 +469,20 @@ body[showing-chat] #chat-page-wrapper {
   height: 100%;
   flex: 1;
 }
+.modal.task-settings > div {
+  max-width: 52rem;
+}
+@media (min-width: 640px) {
+  .modal.task-settings .column-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: var(--content-padding);
+  }
+  .modal.task-settings .column-wrapper > .flex-column {
+    width: 100%;
+    flex: 1;
+  }
+}
 
 /* src/View/ChatPages/taskPage.css */
 #chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content {
diff --git a/dist/index.js b/dist/index.js
index 2dd37936..a6e93d07 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -5379,16 +5379,7 @@
       const isSelected = entry[0] == taskViewModel.task.boardId;
       return Option(entry[1], entry[0], isSelected);
     };
-    return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
-      "select",
-      {
-        "bind:value": taskViewModel.selectedVersionId,
-        "children:append": [
-          taskViewModel.versionIds,
-          VersionIdToOption
-        ]
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal task-settings", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("div", { class: "column-wrapper" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskViewModel.name,
@@ -5409,7 +5400,7 @@
         rows: "10",
         "bind:value": taskViewModel.description
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
+    )))), /* @__PURE__ */ createElement("hr", { class: "mobile-only" }), /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskViewModel.category,
@@ -5459,7 +5450,16 @@
         type: "time",
         "bind:value": taskViewModel.time
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
+    ))))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
+      "select",
+      {
+        "bind:value": taskViewModel.selectedVersionId,
+        "children:append": [
+          taskViewModel.versionIds,
+          VersionIdToOption
+        ]
+      }
+    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
       coreViewModel2,
       coreViewModel2.translations.chatPage.task.deleteTaskButton,
       "delete_forever",
diff --git a/src/.colors.css.swp b/src/View/.chatPage.css.swp
similarity index 57%
rename from src/.colors.css.swp
rename to src/View/.chatPage.css.swp
index 7f898b83..fff4ec49 100644
Binary files a/src/.colors.css.swp and b/src/View/.chatPage.css.swp differ
diff --git a/src/View/Modals/.taskSettingsModal.tsx.swp b/src/View/Modals/.taskSettingsModal.tsx.swp
new file mode 100644
index 00000000..7a542e2b
Binary files /dev/null and b/src/View/Modals/.taskSettingsModal.tsx.swp differ
diff --git a/src/View/Modals/taskSettingsModal.tsx b/src/View/Modals/taskSettingsModal.tsx
index 5985f8ac..10d71221 100644
--- a/src/View/Modals/taskSettingsModal.tsx
+++ b/src/View/Modals/taskSettingsModal.tsx
@@ -18,226 +18,232 @@ export function TaskSettingsModal(
     const statusSuggestionId = v4();
 
     const BoardOptionConverter: React.StateItemConverter<Entry> = (
-        entry: Entry,
+	entry: Entry,
     ) => {
-        const isSelected = entry[0] == taskViewModel.task.boardId;
-        return Option(entry[1], entry[0], isSelected);
+	const isSelected = entry[0] == taskViewModel.task.boardId;
+	return Option(entry[1], entry[0], isSelected);
     };
 
     return (
-        <div class="modal" open>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.chatPage.task
-                                .taskSettingsHeadline
-                        }
-                    </h2>
+	<div class="modal task-settings" open>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.chatPage.task
+			    .taskSettingsHeadline
+			}
+		    </h2>
 
-                    <label class="tile flex-no">
-                        <span class="icon">history</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.general
-                                        .fileVersionLabel
-                                }
-                            </span>
-                            <select
-                                bind:value={taskViewModel.selectedVersionId}
-                                children:append={[
-                                    taskViewModel.versionIds,
-                                    VersionIdToOption,
-                                ]}
-                            ></select>
-                            <span class="icon">arrow_drop_down</span>
-                        </div>
-                    </label>
+		    <div class="column-wrapper">
+			<div class="flex-column">
+			    <label class="tile flex-no">
+				<span class="icon">label</span>
+				<div>
+				    <span>
+					{
+					    coreViewModel.translations.chatPage.task
+					    .taskNameLabel
+					}
+				    </span>
+				    <input
+					bind:value={taskViewModel.name}
+					id="focused"
+				    ></input>
+				</div>
+			    </label>
 
-                    <hr></hr>
+			    <label class="tile flex-no">
+				<span class="icon">category</span>
+				<div>
+				    <span>
+					{
+					    coreViewModel.translations.chatPage.task
+					    .taskBoardLabel
+					}
+				    </span>
+				    <select
+					bind:value={taskViewModel.boardId}
+					children:append={[
+					    taskViewModel.chatViewModel
+					    .taskBoardSuggestions,
+					    BoardOptionConverter,
+					]}
+				    ></select>
+				    <span class="icon">arrow_drop_down</span>
+				</div>
+			    </label>
 
-                    <label class="tile flex-no">
-                        <span class="icon">label</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskNameLabel
-                                }
-                            </span>
-                            <input
-                                bind:value={taskViewModel.name}
-                                id="focused"
-                            ></input>
-                        </div>
-                    </label>
+			    <label class="tile flex-no">
+				<span class="icon">description</span>
+				<div>
+				    <span>
+					{
+					    coreViewModel.translations.chatPage.task
+					    .taskDescriptionLabel
+					}
+				    </span>
+				    <textarea
+					rows="10"
+					bind:value={taskViewModel.description}
+				    ></textarea>
+				</div>
+			    </label>
+			</div>
 
-                    <label class="tile flex-no">
-                        <span class="icon">category</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskBoardLabel
-                                }
-                            </span>
-                            <select
-                                bind:value={taskViewModel.boardId}
-                                children:append={[
-                                    taskViewModel.chatViewModel
-                                        .taskBoardSuggestions,
-                                    BoardOptionConverter,
-                                ]}
-                            ></select>
-                            <span class="icon">arrow_drop_down</span>
-                        </div>
-                    </label>
+			<hr class="mobile-only"></hr>
 
-                    <label class="tile flex-no">
-                        <span class="icon">description</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskDescriptionLabel
-                                }
-                            </span>
-                            <textarea
-                                rows="10"
-                                bind:value={taskViewModel.description}
-                            ></textarea>
-                        </div>
-                    </label>
+			<div class="flex-column">
+			    <label class="tile flex-no">
+				<span class="icon">category</span>
+				<div>
+				    <span>
+					{
+					    coreViewModel.translations.chatPage.task
+					    .taskCategoryLabel
+					}
+				    </span>
+				    <input
+					bind:value={taskViewModel.category}
+					list={categorySuggestionId}
+				    ></input>
+				</div>
+			    </label>
+			    <datalist
+				hidden
+				id={categorySuggestionId}
+				children:append={[
+				    taskViewModel.coreViewModel.taskCategorySuggestions,
+				    StringToOption,
+				]}
+			    ></datalist>
 
-                    <hr></hr>
+			<label class="tile flex-no">
+			    <span class="icon">clock_loader_40</span>
+			    <div>
+				<span>
+				    {
+					coreViewModel.translations.chatPage.task
+					.taskStatusLabel
+				    }
+				</span>
+				<input
+				    bind:value={taskViewModel.status}
+				    list={statusSuggestionId}
+				></input>
+			    </div>
+			</label>
+			<datalist
+			    hidden
+			    id={statusSuggestionId}
+			    children:append={[
+				taskViewModel.coreViewModel.taskStatusSuggestions,
+				StringToOption,
+			    ]}
+			></datalist>
 
-                    <label class="tile flex-no">
-                        <span class="icon">category</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskCategoryLabel
-                                }
-                            </span>
-                            <input
-                                bind:value={taskViewModel.category}
-                                list={categorySuggestionId}
-                            ></input>
-                        </div>
-                    </label>
-                    <datalist
-                        hidden
-                        id={categorySuggestionId}
-                        children:append={[
-                            taskViewModel.coreViewModel.taskCategorySuggestions,
-                            StringToOption,
-                        ]}
-                    ></datalist>
+		    <label class="tile flex-no">
+			<span class="icon">priority_high</span>
+			<div>
+			    <span>
+				{
+				    coreViewModel.translations.chatPage.task
+				    .taskPriorityLabel
+				}
+			    </span>
+			    <input
+				type="number"
+				bind:value={taskViewModel.priority}
+			    ></input>
+			</div>
+		    </label>
 
-                    <label class="tile flex-no">
-                        <span class="icon">clock_loader_40</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskStatusLabel
-                                }
-                            </span>
-                            <input
-                                bind:value={taskViewModel.status}
-                                list={statusSuggestionId}
-                            ></input>
-                        </div>
-                    </label>
-                    <datalist
-                        hidden
-                        id={statusSuggestionId}
-                        children:append={[
-                            taskViewModel.coreViewModel.taskStatusSuggestions,
-                            StringToOption,
-                        ]}
-                    ></datalist>
+		    <hr></hr>
 
-                    <label class="tile flex-no">
-                        <span class="icon">priority_high</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskPriorityLabel
-                                }
-                            </span>
-                            <input
-                                type="number"
-                                bind:value={taskViewModel.priority}
-                            ></input>
-                        </div>
-                    </label>
+		    <label class="tile flex-no">
+			<span class="icon">calendar_month</span>
+			<div>
+			    <span>
+				{
+				    coreViewModel.translations.chatPage.task
+				    .taskDateLabel
+				}
+			    </span>
+			    <input
+				type="date"
+				bind:value={taskViewModel.date}
+			    ></input>
+			</div>
+		    </label>
 
-                    <hr></hr>
+		    <label class="tile flex-no">
+			<span class="icon">schedule</span>
+			<div>
+			    <span>
+				{
+				    coreViewModel.translations.chatPage.task
+				    .taskTimeLabel
+				}
+			    </span>
+			    <input
+				type="time"
+				bind:value={taskViewModel.time}
+			    ></input>
+			</div>
+		    </label>
+		</div>
+	    </div>
+	    
+	    <hr></hr>
 
-                    <label class="tile flex-no">
-                        <span class="icon">calendar_month</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskDateLabel
-                                }
-                            </span>
-                            <input
-                                type="date"
-                                bind:value={taskViewModel.date}
-                            ></input>
-                        </div>
-                    </label>
+	    <label class="tile flex-no">
+		<span class="icon">history</span>
+		<div>
+		    <span>
+			{
+			    coreViewModel.translations.general
+			    .fileVersionLabel
+			}
+		    </span>
+		    <select
+			bind:value={taskViewModel.selectedVersionId}
+			children:append={[
+			    taskViewModel.versionIds,
+			    VersionIdToOption,
+			]}
+		    ></select>
+		    <span class="icon">arrow_drop_down</span>
+		</div>
+	    </label>
 
-                    <label class="tile flex-no">
-                        <span class="icon">schedule</span>
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.chatPage.task
-                                        .taskTimeLabel
-                                }
-                            </span>
-                            <input
-                                type="time"
-                                bind:value={taskViewModel.time}
-                            ></input>
-                        </div>
-                    </label>
+	    <hr></hr>
 
-                    <hr></hr>
-
-                    <div class="width-input">
-                        {DangerousActionButton(
-                            coreViewModel,
-                            coreViewModel.translations.chatPage.task
-                                .deleteTaskButton,
-                            "delete_forever",
-                            taskViewModel.deleteTask,
-                        )}
-                    </div>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={taskViewModel.closeAndDiscard}
-                    >
-                        {coreViewModel.translations.general.closeButton}
-                    </button>
-                    <button
-                        class="flex primary"
-                        on:click={taskViewModel.closeAndSave}
-                    >
-                        {coreViewModel.translations.general.saveButton}
-                        <span class="icon">save</span>
-                    </button>
-                </div>
-            </div>
-        </div>
+	    <div class="width-input">
+		{DangerousActionButton(
+		    coreViewModel,
+		    coreViewModel.translations.chatPage.task
+		    .deleteTaskButton,
+		    "delete_forever",
+		    taskViewModel.deleteTask,
+		)}
+	    </div>
+	</main>
+	<div class="flex-row width-100">
+	    <button
+		class="flex"
+		on:click={taskViewModel.closeAndDiscard}
+	    >
+		{coreViewModel.translations.general.closeButton}
+	    </button>
+	    <button
+		class="flex primary"
+		on:click={taskViewModel.closeAndSave}
+	    >
+		{coreViewModel.translations.general.saveButton}
+		<span class="icon">save</span>
+	    </button>
+	</div>
+    </div>
+</div>
     );
 }
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index db56dfe5..ccfdc8fa 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -72,13 +72,13 @@ body[showing-chat] #chat-page-wrapper {
 
 @media (min-width: 1024px) {
     #chat-page > div > #main > div > .pane-wrapper {
-        min-width: unset;
+	min-width: unset;
     }
 
     #chat-page > div > #main > div > .pane-wrapper.side {
-        width: 18rem;
-        min-width: 18rem;
-        max-width: 18rem;
+	width: 18rem;
+	min-width: 18rem;
+	max-width: 18rem;
     }
 }
 
@@ -108,13 +108,13 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #ribbon > span,
 #chat-page
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    > span.ribbon {
+> div
+> #main
+> div
+> .pane-wrapper
+> .pane
+> .toolbar
+> span.ribbon {
     gap: var(--gap-between-tiles);
     padding: var(--gap-between-tiles);
 }
@@ -180,13 +180,13 @@ 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 {
+> div
+> #main
+> div
+> .pane-wrapper
+> .pane
+> .toolbar
+button.ribbon-button {
     min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -199,14 +199,14 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #ribbon button > .icon,
 #chat-page
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    button
-    > .icon {
+> div
+> #main
+> div
+> .pane-wrapper
+> .pane
+> .toolbar
+button
+> .icon {
     font-size: 1.1rem;
 }
 
@@ -232,13 +232,31 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    :is(input, select, button) {
+> div
+> #main
+> div
+> .pane-wrapper
+> .pane
+> .toolbar
+:is(input, select, button) {
     height: 100%;
     flex: 1;
 }
+
+/* task settings */
+.modal.task-settings > div {
+    max-width: 52rem;
+}
+
+@media (min-width: 640px) {
+    .modal.task-settings .column-wrapper {
+	display: flex;
+	flex-direction: row;
+	gap: var(--content-padding);
+    }
+
+    .modal.task-settings .column-wrapper > .flex-column{
+	width: 100%;
+	flex: 1;
+    }
+}