diff --git a/dist/index.js b/dist/index.js
index b8d47027..d8f520b7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -644,6 +644,11 @@
       const referencePath = [...monthPath, taskFileContent.fileId];
       this.storageModel.write(referencePath, "");
     };
+    deleteTaskReference = (monthString, taskId) => {
+      const monthPath = this.getMonthPath(monthString);
+      const referencePath = [...monthPath, taskId];
+      this.storageModel.write(referencePath, "");
+    };
     listTaskIds = (monthString) => {
       const monthPath = this.getMonthPath(monthString);
       return this.storageModel.list(monthPath);
@@ -667,7 +672,10 @@
         days: {}
       };
       for (let i = 0; i < daysInMonth; i++) {
-        grid.days[i + 1] = defaultValueCreator();
+        const paddedDate = _CalendarModel.padDateOrMonth(
+          (i + 1).toString()
+        );
+        grid.days[paddedDate] = defaultValueCreator();
       }
       return grid;
     };
@@ -684,18 +692,22 @@
     };
     static isoToDateString = (dateISOString) => {
       const [year, month, date, _] = dateISOString.split("-");
-      return date;
+      const paddedDate = _CalendarModel.padDateOrMonth(date ?? "");
+      return paddedDate;
     };
     static getMonthString = (year = "", month = "") => {
       const paddedYear = year.padStart(4, "0");
-      const paddedMonth = month.padStart(2, "0");
+      const paddedMonth = _CalendarModel.padDateOrMonth(month);
       return `${paddedYear}-${paddedMonth}`;
     };
     static getISODateString = (year, month, date) => {
       const monthString = _CalendarModel.getMonthString(year, month);
-      const paddedDate = date.padStart(2, "0");
+      const paddedDate = _CalendarModel.padDateOrMonth(date);
       return `${monthString}-${paddedDate}`;
     };
+    static padDateOrMonth = (input) => {
+      return input.padStart(2, "0");
+    };
   };
 
   // src/colors.ts
@@ -1684,20 +1696,33 @@
       this.selectTask(taskViewModel);
       this.updateTaskIndices();
     };
+    getEventsForDate = () => {
+      const paddedDate = CalendarModel.padDateOrMonth(
+        this.selectedDate.toString()
+      );
+      if (this.monthGrid.value == void 0) {
+        return void 0;
+      }
+      return this.monthGrid.value.days[paddedDate];
+    };
     // view
     getTaskMapState = (taskFileContent) => {
       if (this.monthGrid.value == null) return null;
-      const dateString = CalendarModel.isoToDateString(
+      const date = CalendarModel.isoToDateString(
         taskFileContent.date ?? ""
       );
-      if (dateString == void 0) return null;
-      return this.monthGrid.value.days[dateString];
+      return this.monthGrid.value.days[date];
     };
     showTask = (taskFileContent) => {
       const monthString = CalendarModel.isoToMonthString(
         taskFileContent.date ?? ""
       );
       if (monthString == void 0 || monthString != this.monthString) {
+        this.removeTaskFromView(taskFileContent);
+        this.calendarModel.deleteTaskReference(
+          this.monthString,
+          taskFileContent.fileId
+        );
         return;
       }
       const taskViewModel = new TaskViewModel(
@@ -1707,12 +1732,14 @@
         taskFileContent
       );
       const mapState = this.getTaskMapState(taskFileContent);
-      mapState?.set(taskFileContent.fileId, taskViewModel);
+      this.taskViewModels.handleRemoval(taskViewModel, () => {
+        mapState?.remove(taskFileContent.fileId);
+      });
+      this.taskViewModels.remove(taskFileContent.fileId);
       this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
+      mapState?.set(taskFileContent.fileId, taskViewModel);
     };
     removeTaskFromView = (taskFileContent) => {
-      const mapState = this.getTaskMapState(taskFileContent);
-      mapState?.remove(taskFileContent.fileId);
       this.taskViewModels.remove(taskFileContent.fileId);
     };
     showToday = () => {
@@ -2594,7 +2621,7 @@
       });
       return view;
     };
-    return /* @__PURE__ */ createElement("div", { class: "month-grid-wrapper" }, /* @__PURE__ */ createElement("div", { class: "day-labels" }, ...dayLabels), /* @__PURE__ */ createElement("div", { class: "month-grid" }, ...offsetElements, ...Object.entries(monthGrid.days).map((entry) => {
+    return /* @__PURE__ */ createElement("div", { class: "month-grid-wrapper" }, /* @__PURE__ */ createElement("div", { class: "day-labels" }, ...dayLabels), /* @__PURE__ */ createElement("div", { class: "month-grid" }, ...offsetElements, ...Object.entries(monthGrid.days).sort((a, b) => localeCompare(a[0], b[0])).map((entry) => {
       const [date, mapState] = entry;
       const isSelected = createProxyState(
         [selectedDate],
@@ -2770,7 +2797,7 @@
         calendarPageViewModel.selectedDate
       ],
       () => {
-        const listState = calendarPageViewModel.monthGrid.value?.days[calendarPageViewModel.selectedDate.toString()];
+        const listState = calendarPageViewModel.getEventsForDate();
         if (listState == void 0) {
           return /* @__PURE__ */ createElement("div", null);
         } else if (listState.value.size == 0) {
diff --git a/src/Model/Files/calendarModel.ts b/src/Model/Files/calendarModel.ts
index b0ed9401..ec4938f5 100644
--- a/src/Model/Files/calendarModel.ts
+++ b/src/Model/Files/calendarModel.ts
@@ -42,6 +42,13 @@ export default class CalendarModel {
     this.storageModel.write(referencePath, "");
   };
 
+  deleteTaskReference = (monthString: string, taskId: string): void => {
+    const monthPath: string[] = this.getMonthPath(monthString);
+    const referencePath: string[] = [...monthPath, taskId];
+
+    this.storageModel.write(referencePath, "");
+  };
+
   listTaskIds = (monthString: string): string[] => {
     const monthPath: string[] = this.getMonthPath(monthString);
     return this.storageModel.list(monthPath);
@@ -81,7 +88,10 @@ export default class CalendarModel {
     };
 
     for (let i = 0; i < daysInMonth; i++) {
-      grid.days[i + 1] = defaultValueCreator();
+      const paddedDate: string = CalendarModel.padDateOrMonth(
+        (i + 1).toString()
+      );
+      grid.days[paddedDate] = defaultValueCreator();
     }
 
     return grid;
@@ -104,14 +114,15 @@ export default class CalendarModel {
     return CalendarModel.getMonthString(year, month);
   };
 
-  static isoToDateString = (dateISOString: string): string | undefined => {
+  static isoToDateString = (dateISOString: string): string => {
     const [year, month, date, _] = dateISOString.split("-");
-    return date;
+    const paddedDate = CalendarModel.padDateOrMonth(date ?? "");
+    return paddedDate;
   };
 
   static getMonthString = (year: string = "", month: string = ""): string => {
     const paddedYear: string = year.padStart(4, "0");
-    const paddedMonth: string = month.padStart(2, "0");
+    const paddedMonth: string = CalendarModel.padDateOrMonth(month);
     return `${paddedYear}-${paddedMonth}`;
   };
 
@@ -121,9 +132,13 @@ export default class CalendarModel {
     date: string
   ): string => {
     const monthString: string = CalendarModel.getMonthString(year, month);
-    const paddedDate: string = date.padStart(2, "0");
+    const paddedDate: string = CalendarModel.padDateOrMonth(date);
     return `${monthString}-${paddedDate}`;
   };
+
+  static padDateOrMonth = (input: string): string => {
+    return input.padStart(2, "0");
+  };
 }
 
 export enum CalendarModelSubPaths {
diff --git a/src/View/ChatPages/calendarPage.tsx b/src/View/ChatPages/calendarPage.tsx
index 9ba78f95..ed76b6cd 100644
--- a/src/View/ChatPages/calendarPage.tsx
+++ b/src/View/ChatPages/calendarPage.tsx
@@ -40,10 +40,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
       calendarPageViewModel.selectedDate,
     ],
     () => {
-      const listState =
-        calendarPageViewModel.monthGrid.value?.days[
-          calendarPageViewModel.selectedDate.toString()
-        ];
+      const listState = calendarPageViewModel.getEventsForDate();
 
       if (listState == undefined) {
         return <div></div>;
diff --git a/src/View/Components/monthGrid.tsx b/src/View/Components/monthGrid.tsx
index 925672a7..d858f646 100644
--- a/src/View/Components/monthGrid.tsx
+++ b/src/View/Components/monthGrid.tsx
@@ -5,6 +5,7 @@ import { MonthGrid } from "../../Model/Files/calendarModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
 import { allowDrop } from "../utility";
+import { localeCompare } from "../../Model/Utility/utility";
 
 export function MonthGrid<T>(
   monthGrid: MonthGrid<React.MapState<T>>,
@@ -47,45 +48,47 @@ export function MonthGrid<T>(
       <div class="day-labels">{...dayLabels}</div>
       <div class="month-grid">
         {...offsetElements}
-        {...Object.entries(monthGrid.days).map((entry) => {
-          const [date, mapState] = entry;
+        {...Object.entries(monthGrid.days)
+          .sort((a, b) => localeCompare(a[0], b[0]))
+          .map((entry) => {
+            const [date, mapState] = entry;
 
-          const isSelected = React.createProxyState(
-            [selectedDate],
-            () => selectedDate.value == parseInt(date)
-          );
+            const isSelected = React.createProxyState(
+              [selectedDate],
+              () => selectedDate.value == parseInt(date)
+            );
 
-          const isToday: boolean =
-            monthGrid.isCurrentMonth == true &&
-            parseInt(date) == new Date().getDate();
+            const isToday: boolean =
+              monthGrid.isCurrentMonth == true &&
+              parseInt(date) == new Date().getDate();
 
-          function select() {
-            selectedDate.value = parseInt(date);
-          }
+            function select() {
+              selectedDate.value = parseInt(date);
+            }
 
-          function drop() {
-            handleDrop(date);
-          }
+            function drop() {
+              handleDrop(date);
+            }
 
-          return (
-            <button
-              class="tile"
-              on:click={select}
-              toggle:selected={isSelected}
-              toggle:today={isToday}
-              on:dragover={allowDrop}
-              on:drop={drop}
-            >
-              <div>
-                <b>{date}</b>
-                <div
-                  class="flex-column gap clip"
-                  children:append={[mapState, converter]}
-                ></div>
-              </div>
-            </button>
-          );
-        })}
+            return (
+              <button
+                class="tile"
+                on:click={select}
+                toggle:selected={isSelected}
+                toggle:today={isToday}
+                on:dragover={allowDrop}
+                on:drop={drop}
+              >
+                <div>
+                  <b>{date}</b>
+                  <div
+                    class="flex-column gap clip"
+                    children:append={[mapState, converter]}
+                  ></div>
+                </div>
+              </button>
+            );
+          })}
       </div>
     </div>
   );
diff --git a/src/ViewModel/Pages/calendarPageViewModel.ts b/src/ViewModel/Pages/calendarPageViewModel.ts
index ea7a6e85..faa5c75b 100644
--- a/src/ViewModel/Pages/calendarPageViewModel.ts
+++ b/src/ViewModel/Pages/calendarPageViewModel.ts
@@ -60,17 +60,28 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     this.updateTaskIndices();
   };
 
+  getEventsForDate = (): React.MapState<TaskViewModel> | undefined => {
+    const paddedDate: string = CalendarModel.padDateOrMonth(
+      this.selectedDate.toString()
+    );
+
+    if (this.monthGrid.value == undefined) {
+      return undefined;
+    }
+
+    return this.monthGrid.value.days[paddedDate];
+  };
+
   // view
   getTaskMapState = (
     taskFileContent: TaskFileContent
   ): React.MapState<TaskViewModel> | null => {
     if (this.monthGrid.value == null) return null;
 
-    const dateString: string | undefined = CalendarModel.isoToDateString(
+    const date: string = CalendarModel.isoToDateString(
       taskFileContent.date ?? ""
     );
-    if (dateString == undefined) return null;
-    return this.monthGrid.value.days[dateString];
+    return this.monthGrid.value.days[date];
   };
 
   showTask = (taskFileContent: TaskFileContent): void => {
@@ -78,7 +89,11 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
       taskFileContent.date ?? ""
     );
     if (monthString == undefined || monthString != this.monthString) {
-      // TODO remove
+      this.removeTaskFromView(taskFileContent);
+      this.calendarModel.deleteTaskReference(
+        this.monthString,
+        taskFileContent.fileId
+      );
       return;
     }
 
@@ -90,16 +105,18 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     );
     const mapState: React.MapState<TaskViewModel> | null =
       this.getTaskMapState(taskFileContent);
-    mapState?.set(taskFileContent.fileId, taskViewModel);
 
+    this.taskViewModels.handleRemoval(taskViewModel, () => {
+      mapState?.remove(taskFileContent.fileId);
+    });
+
+    this.taskViewModels.remove(taskFileContent.fileId);
     this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
+
+    mapState?.set(taskFileContent.fileId, taskViewModel);
   };
 
   removeTaskFromView = (taskFileContent: TaskFileContent): void => {
-    const mapState: React.MapState<TaskViewModel> | null =
-      this.getTaskMapState(taskFileContent);
-    mapState?.remove(taskFileContent.fileId);
-
     this.taskViewModels.remove(taskFileContent.fileId);
   };
 
diff --git a/src/ViewModel/Pages/taskViewModel.ts b/src/ViewModel/Pages/taskViewModel.ts
index 05684544..2ddcdc07 100644
--- a/src/ViewModel/Pages/taskViewModel.ts
+++ b/src/ViewModel/Pages/taskViewModel.ts
@@ -78,7 +78,7 @@ export default class TaskViewModel {
   setDate = (dateISOString: string): void => {
     this.date.value = dateISOString;
     this.save();
-  }
+  };
 
   // view
   open = (): void => {