diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts
index 0d993540e..a8f507fd1 100644
--- a/apps/client/src/widgets/buttons/calendar.ts
+++ b/apps/client/src/widgets/buttons/calendar.ts
@@ -29,8 +29,6 @@ const DROPDOWN_TPL = `
 <div class="calendar-dropdown-widget">
     <div class="calendar-header">
         <div class="calendar-month-selector">
-            <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
-
             <button class="btn dropdown-toggle select-button" type="button"
                 data-bs-toggle="dropdown" data-bs-auto-close="true"
                 aria-expanded="false"
@@ -108,17 +106,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
             }
         });
 
-        this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
-        this.$next.on("click", () => {
-            this.date = this.date.add(1, 'month');
-            this.createMonth();
-        });
-        this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
-        this.$previous.on("click", () => {
-            this.date = this.date.subtract(1, 'month');
-            this.createMonth();
-        });
-
         // Year navigation
         this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
         this.$yearSelect.on("input", (e) => {
diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
index 873567b29..557d05f5e 100644
--- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
+++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
 import "./CalendarWidget.css";
 import Calendar from "./Calendar";
+import ActionButton from "../react/ActionButton";
 
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
@@ -22,10 +23,50 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
             }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
+                <CalendarHeader date={date} setDate={setDate} />
                 <Calendar date={date} />
             </div>}
         </LaunchBarDropdownButton>
     )
 }
 
+interface CalendarHeaderProps {
+    date: Dayjs;
+    setDate: Dispatch<StateUpdater<Dayjs | undefined>>;
+}
 
+function CalendarHeader(props: CalendarHeaderProps) {
+    return (
+        <div className="calendar-header">
+            <CalendarMonthSelector {...props} />
+        </div>
+    )
+}
+
+function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
+    return (
+        <div className="calendar-month-selector">
+            <AdjustDateButton date={date} setDate={setDate} direction="prev" unit="month" />
+            <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
+        </div>
+    );
+}
+
+function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
+    direction: "prev" | "next",
+    unit: "month"
+}) {
+    return (
+        <ActionButton
+            icon={direction === "prev" ? "bx bx-chevron-left" : "bx bx-chevron-right" }
+            className="calendar-btn tn-tool-button"
+            noIconActionClass
+            text=""
+            onClick={(e) => {
+                e.stopPropagation();
+                const newDate = direction === "prev" ? date.subtract(1, unit) : date.add(1, unit);
+                setDate(newDate);
+            }}
+        />
+    )
+}