diff --git a/dist/index.css b/dist/index.css
index da27e477..9136ef40 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -475,6 +475,17 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
   width: 3.1rem;
 }
+@media (max-width: 1024px) {
+  #chat-page > div > #main > #calendar-page {
+    flex-direction: column;
+  }
+  #chat-page > div > #main > #calendar-page .month-grid-wrapper {
+    height: unset;
+  }
+  #chat-page > div > #main > #calendar-page .grid-pane-wrapper {
+    border-bottom: 1px solid var(--border);
+  }
+}
 
 /* src/View/Components/monthGrid.css */
 .month-grid-wrapper {
diff --git a/dist/index.js b/dist/index.js
index 71ff5134..a4118a28 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2727,7 +2727,7 @@
           return /* @__PURE__ */ createElement(
             "div",
             {
-              class: "flex-column gap",
+              class: "flex-column gap slide-up",
               "children:append": [listState, TaskViewModelToEntry]
             }
           );
@@ -2746,7 +2746,7 @@
         }
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper grid-pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",
diff --git a/dist/styles.css b/dist/styles.css
index 8e4c0c27..7653a890 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -20,12 +20,12 @@ ANIMATION
 @keyframes slide-up {
   0% {
     opacity: 0;
-    transform: translateY(1rem);
+    transform: translateY(2rem);
   }
 }
 
 :root {
-  --animation-duration: 0.4s;
+  --animation-duration: 0.5s;
 }
 
 .slide-up {
diff --git a/src/View/ChatPages/calendarPage.css b/src/View/ChatPages/calendarPage.css
index b593ae61..b36dbd62 100644
--- a/src/View/ChatPages/calendarPage.css
+++ b/src/View/ChatPages/calendarPage.css
@@ -59,3 +59,17 @@
   > .month-input {
   width: 3.1rem;
 }
+
+@media (max-width: 1024px) {
+  #chat-page > div > #main > #calendar-page {
+    flex-direction: column;
+  }
+
+  #chat-page > div > #main > #calendar-page .month-grid-wrapper {
+    height: unset;
+  }
+
+  #chat-page > div > #main > #calendar-page .grid-pane-wrapper {
+    border-bottom: 1px solid var(--border);
+  }
+}
diff --git a/src/View/ChatPages/calendarPage.tsx b/src/View/ChatPages/calendarPage.tsx
index 52630985..9fae6032 100644
--- a/src/View/ChatPages/calendarPage.tsx
+++ b/src/View/ChatPages/calendarPage.tsx
@@ -42,7 +42,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
       } else {
         return (
           <div
-            class="flex-column gap"
+            class="flex-column gap slide-up"
             children:append={[listState, TaskViewModelToEntry]}
           ></div>
         );
@@ -65,7 +65,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
 
   return (
     <div id="calendar-page">
-      <div class="pane-wrapper">
+      <div class="pane-wrapper grid-pane-wrapper">
         <div class="pane">
           <div class="toolbar">
             <span>