diff --git a/SMTplugins/Calendar/calendarWidget.py b/SMTplugins/Calendar/calendarWidget.py
index 2744cf6..1de37d3 100644
--- a/SMTplugins/Calendar/calendarWidget.py
+++ b/SMTplugins/Calendar/calendarWidget.py
@@ -1,18 +1,43 @@
-# calendarWidget.py
-# Displays a monthly calendar with Google Calendar event integration (optional)
-# Falls back to a static calendar view if no credentials are provided
-
 from widget import Widget
 from datetime import datetime, date
 import calendar
 import json
+import os
+import time
+
 
 class calendarWidget(Widget):
 
     def __init__(self):
-        self._preferences = self.widgetDefaultPreferences
-        self._events = {}  # date_str -> list of event names
+        # -------- FILES --------
+        self.state_file = "calendar_state.json"
+        self.events_file = "calendar_events.json"
+
+        # -------- DEFAULT STATE --------
+        self.current_date = date.today()
+
+        # -------- LOAD MONTH STATE --------
+        if os.path.exists(self.state_file):
+            try:
+                with open(self.state_file, "r") as f:
+                    state = json.load(f)
+                    if "current_date" in state:
+                        self.current_date = date.fromisoformat(state["current_date"])
+            except:
+                print("State file corrupted, resetting")
+
+        # -------- LOAD EVENTS --------
+        if os.path.exists(self.events_file):
+            try:
+                with open(self.events_file, "r") as f:
+                    self._events = json.load(f)
+            except:
+                print("Events file corrupted, resetting")
+                self._events = {}
+        else:
+            self._events = {}
 
+    # -------- METADATA --------
     @property
     def widgetName(self):
         return "Calendar Widget"
@@ -23,17 +48,16 @@ def widgetID(self):
 
     @property
     def widgetHTML(self):
-        """Returns the HTML template name; Flask renders it via Jinja."""
         return "calendar_widget.html"
 
+    # -------- MAIN DATA --------
     @property
     def widgetData(self):
-        """Returns current calendar data as a JSON-serialisable dict."""
         today = date.today()
-        year = today.year
-        month = today.month
+        year = self.current_date.year
+        month = self.current_date.month
 
-        cal = calendar.Calendar(firstweekday=6)  # week starts Sunday
+        cal = calendar.Calendar(firstweekday=6)
         weeks = cal.monthdatescalendar(year, month)
 
         weeks_data = []
@@ -50,12 +74,13 @@ def widgetData(self):
             weeks_data.append(days)
 
         return {
-            "month_name": today.strftime("%B"),
+            "month_name": self.current_date.strftime("%B"),
             "year": year,
             "weeks": weeks_data,
             "day_headers": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
         }
 
+    # -------- PREFERENCES --------
     @property
     def widgetPreferences(self):
         return self._preferences
@@ -68,56 +93,87 @@ def widgetPreferences(self, value):
     def widgetDefaultPreferences(self):
         return {
             "show_week_numbers": False,
-            "use_google_cal": False,   # Set True + provide creds to enable
+            "use_google_cal": False,
             "google_cal_id": "primary"
         }
 
     @property
     def updateTimer(self):
-        # Refresh every 10 minutes
         return 600_000
 
+    # -------- SAVE HELPERS --------
+    def _save_state(self):
+        with open(self.state_file, "w") as f:
+            json.dump({
+                "current_date": self.current_date.isoformat()
+            }, f)
+
+    def _save_events(self):
+        with open(self.events_file, "w") as f:
+            json.dump(self._events, f)
+
+    # -------- OPTIONAL DEFAULT DATA --------
     def update(self):
-        """Called by the widget subsystem on a timer. Fetches events if enabled."""
-        if self._preferences.get("use_google_cal"):
-            self._fetch_google_events()
-        else:
-            # Placeholder: inject a couple of demo events so the UI isn't empty
+        if not self._events:
             today = date.today().isoformat()
-            self._events = {
-                today: ["Class 4PM – LC 22", "Gym 5PM"]
-            }
-        print(f"Calendar Widget updated – {date.today().strftime('%B %Y')}")
-
-    def _fetch_google_events(self):
-        """
-        Stub for Google Calendar API integration.
-        To enable: install google-auth + google-api-python-client,
-        create OAuth credentials, and fill in the logic below.
-        """
-        try:
-            # TODO: implement OAuth flow and fetch events for current month
-            # from googleapiclient.discovery import build
-            # service = build("calendar", "v3", credentials=creds)
-            # events_result = service.events().list(...).execute()
-            raise NotImplementedError("Google Calendar auth not yet configured.")
-        except Exception as e:
-            print(f"[calendarWidget] Google Calendar fetch failed: {e}")
+            self._events[today] = [
+                {"id": int(time.time()*1000), "title": "Class 4PM – LC 22"},
+                {"id": int(time.time()*1000)+1, "title": "Gym 5PM"}
+            ]
+            self._save_events()
 
+    # -------- EVENT HANDLER --------
     def handle_event(self, event, args):
-        """
-        Supported events:
-          - "prev_month"  : (future) navigate to previous month
-          - "next_month"  : (future) navigate to next month
-          - "add_event"   : args = {"date": "YYYY-MM-DD", "title": "..."}
-        """
+
+    # -------- ADD TASK --------
         if event == "add_event":
             date_str = args.get("date")
             title = args.get("title", "Event")
+
             if date_str:
                 if date_str not in self._events:
                     self._events[date_str] = []
-                self._events[date_str].append(title)
-                print(f"[calendarWidget] Added event '{title}' on {date_str}")
+
+                self._events[date_str].append({
+                    "id": int(time.time()*1000),
+                    "title": title
+                })
+
+                self._save_events()
+
+        # -------- NEXT MONTH --------
+        elif event == "next_month":
+            print("NEXT MONTH TRIGGERED")
+
+            if self.current_date.month == 12:
+                self.current_date = self.current_date.replace(
+                    year=self.current_date.year + 1,
+                    month=1
+                )
+            else:
+                self.current_date = self.current_date.replace(
+                    month=self.current_date.month + 1
+                )
+
+            self._save_state()
+            print("NEW MONTH:", self.current_date)
+
+        # -------- PREVIOUS MONTH --------
+        elif event == "prev_month":
+            print("PREV MONTH TRIGGERED")
+
+            if self.current_date.month == 1:
+                self.current_date = self.current_date.replace(
+                    year=self.current_date.year - 1,
+                    month=12
+                )
+            else:
+                self.current_date = self.current_date.replace(
+                    month=self.current_date.month - 1
+                )
+
+            self._save_state()
+            print("NEW MONTH:", self.current_date)
+
         else:
             print(f"[calendarWidget] Unhandled event: {event} args={args}")
\ No newline at end of file
diff --git a/SMTplugins/Calendar/calendar_plugin.py b/SMTplugins/Calendar/calendar_plugin.py
index 1bf0d23..72e3322 100644
--- a/SMTplugins/Calendar/calendar_plugin.py
+++ b/SMTplugins/Calendar/calendar_plugin.py
@@ -10,6 +10,7 @@
 
 @calendar_bp.route("/widget/calendar")
 def calendar_view():
+    print("RENDERING MONTH:", _widget.current_date)  # debug
     return render_template("calendar_widget.html", data=_widget.widgetData)
 
 @calendar_bp.route("/api/calendar/data")
diff --git a/calendar_events.json b/calendar_events.json
new file mode 100644
index 0000000..f5bcd5f
--- /dev/null
+++ b/calendar_events.json
@@ -0,0 +1 @@
+{"2026-04-29": ["Class 4PM \u2013 LC 22", "Gym 5PM"], "2026-04-30": []}
\ No newline at end of file
diff --git a/calendar_state.json b/calendar_state.json
new file mode 100644
index 0000000..7593051
--- /dev/null
+++ b/calendar_state.json
@@ -0,0 +1 @@
+{"current_date": "2026-04-29"}
\ No newline at end of file
diff --git a/flaskServer.py b/flaskServer.py
index 77d379e..a27a1a0 100644
--- a/flaskServer.py
+++ b/flaskServer.py
@@ -29,7 +29,7 @@
 
 #allows for easier starting of flask from start file
 def run_flask():
-    app.run(debug=True, port=5000, use_reloader=False)
+    app.run(debug=True, port=8000, use_reloader=False)
 
 
 
diff --git a/layout_client.json b/layout_client.json
index 6411891..9bc30f2 100644
--- a/layout_client.json
+++ b/layout_client.json
@@ -33,10 +33,10 @@
       "col": 3
     },
     {
-      "id": "bj-container",
-      "name": "Blackjack",
-      "class": "blackjack-widget",
-      "css_name": "blackjack_widget.css",
+      "id": "calendar",
+      "name": "Calendar",
+      "class": "calendar-widget",
+      "css_name": "calendar_widget.css",
       "row": 2,
       "col": 2
     },
diff --git a/static/js/plugins/calendar_script.js b/static/js/plugins/calendar_script.js
index 60e78db..ed333b2 100644
--- a/static/js/plugins/calendar_script.js
+++ b/static/js/plugins/calendar_script.js
@@ -1,15 +1,208 @@
+let selectedDate = null;
+let calendarInitialized = false;
+
+function attachCalendarListeners() {
+    const container = document.getElementById("calendar");
+
+    if (!container) return;
+
+    calendarInitialized = true; //  mark as initialized
+
+    container.addEventListener("click", (e) => {
+        const day = e.target.closest(".cal-day");
+        if (!day) return;
+
+        selectedDate = day.dataset.date;
+
+        console.log("Calendar data:", window.calendarEvents);
+        // SHOW TASKS FOR SELECTED DATE
+        const eventsContainer = document.getElementById("selectedEventsContainer");
+        const title = document.getElementById("eventsTitle");
+
+        if (eventsContainer && title && window.calendarEvents) {
+            let events = [];
+
+            window.calendarEvents.forEach(week => {
+                week.forEach(dayData => {
+                    if (dayData.date_str === selectedDate) {
+                        events = dayData.events;
+                    }
+                });
+            });
+
+            title.innerText = new Date(selectedDate).toDateString();
+            eventsContainer.innerHTML = "";
+
+            if (events.length > 0) {
+                events.forEach(e => {
+                    const div = document.createElement("div");
+                    div.className = "cal-event-item";
+                    div.innerHTML = `
+                        <span>${e.title || e}</span>
+                        <div style="margin-left:auto; display:flex; gap:6px;">
+                            <button onclick="editTask(${e.id || 0}, '${selectedDate}', '${e.title || e}')">✎</button>
+                            <button onclick="deleteTask(${e.id || 0}, '${selectedDate}')">✕</button>
+                        </div>
+                        `;
+                    eventsContainer.appendChild(div);
+                });
+            } else {
+                eventsContainer.innerHTML = `<div class="cal-no-events">No tasks</div>`;
+            }
+        }
+
+        // highlight
+        document.querySelectorAll(".cal-day").forEach(d => d.style.outline = "none");
+        day.style.outline = "2px solid #c084fc";
+
+        // show input
+        const taskSection = document.getElementById("taskSection");
+        if (taskSection) taskSection.style.display = "block";
+
+        // label
+        const label = document.getElementById("selectedDateLabel");
+        if (label) {
+            label.innerText = "Editing tasks for: " + new Date(selectedDate).toDateString();
+        }
+
+        console.log("Selected date:", selectedDate);
+    });
+}
+
+function addTask() {
+    const input = document.getElementById("taskInput");
+    const task = input.value;
+
+    if (!selectedDate || !task) {
+        alert("Select a date and enter a task");
+        return;
+    }
+
+    fetch("/api/calendar/event", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            event: "add_event",
+            args: {
+                date: selectedDate,
+                title: task
+            }
+        })
+    })
+    .then(() => {
+        input.value = "";
+
+        updateCalendar().then(() => {
+        });
+    });
+}
+
+
+function deleteTask(id, date) {
+    fetch("/api/calendar/event", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            event: "delete_event",
+            args: { id, date }
+        })
+    }).then(() => {
+    updateCalendar().then(() => {
+        setTimeout(() => {
+            const day = document.querySelector(`[data-date="${date}"]`);
+            if (day) day.click();
+        }, 50);
+    });
+});
+}
+
+function editTask(id, date, oldTitle) {
+    const newTitle = prompt("Edit task:", oldTitle);
+    if (!newTitle) return;
+
+    fetch("/api/calendar/event", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            event: "edit_event",
+            args: { id, date, title: newTitle }
+        })
+    }).then(() => {
+    updateCalendar().then(() => {
+        setTimeout(() => {
+            const day = document.querySelector(`[data-date="${date}"]`);
+            if (day) day.click();
+        }, 50);
+    });
+});
+}
+
+function changeMonth(direction) {
+    console.log("CLICKED:", direction);
+
+    fetch("/api/calendar/event", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            event: direction === "next" ? "next_month" : "prev_month"
+        })
+    })
+    .then(res => res.json())
+    .then(() => {
+        console.log("UPDATED MONTH");
+        return updateCalendar();
+    })
+    .catch(err => console.error("ERROR:", err));
+}
+
+window.changeMonth = changeMonth;
+
+//  ONLY ONE FUNCTION
 export async function updateCalendar() {
     try {
         const response = await fetch('/widget/calendar');
         const html = await response.text();
         const container = document.getElementById('calendar');
-        if (container) container.innerHTML = html;
+
+        if (container) {
+            container.innerHTML = html;
+
+            //  IMPORTANT: re-read fresh data from HTML
+            const scriptTag = container.querySelector("script");
+            if (scriptTag) {
+                eval(scriptTag.innerText); // updates window.calendarEvents
+            }
+
+            attachCalendarListeners();
+        }
+        
+
     } catch (error) {
         console.error('Calendar update failed:', error);
     }
 }
 
-// Update every 60 seconds
+
+
+updateCalendar().then(() => {
+    setTimeout(() => {
+        const today = document.querySelector(".cal-day.today");
+        if (today) today.click();
+    }, 50);
+});
+
+// update every 60s
 setInterval(updateCalendar, 60000);
-// Run once immediately
-updateCalendar(); 
\ No newline at end of file
+
+// make button work globally
+window.addTask = addTask;
+window.deleteTask = deleteTask;
+window.editTask = editTask;
\ No newline at end of file
diff --git a/static/widgetCSS/calendar_widget.css b/static/widgetCSS/calendar_widget.css
index 10a0ef0..bf80d41 100644
--- a/static/widgetCSS/calendar_widget.css
+++ b/static/widgetCSS/calendar_widget.css
@@ -131,4 +131,107 @@
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.3);
     font-style: italic;
+}
+
+.task-section {
+  margin-top: 12px;
+  display: none;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+
+.task-label {
+  font-size: 0.7rem;
+  color: #c084fc;
+  margin-bottom: 6px;
+  letter-spacing: 0.04em;
+}
+
+.task-input-row {
+  display: flex;
+  gap: 6px;
+}
+
+/* INPUT */
+.task-input-row input {
+  flex: 1;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.1);
+  background: #1a1a24;
+  color: #e8e6f0;
+  font-size: 0.7rem;
+  outline: none;
+  transition: 0.2s;
+}
+
+.task-input-row input::placeholder {
+  color: #5a5870;
+}
+
+.task-input-row input:focus {
+  border-color: #7c6af7;
+  box-shadow: 0 0 6px rgba(124,106,247,0.4);
+}
+
+/* BUTTON */
+.task-input-row button {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  background: linear-gradient(135deg, #7c6af7, #c084fc);
+  color: white;
+  font-size: 0.7rem;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.task-input-row button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px rgba(124,106,247,0.4);
+}
+
+.task-input-row button:active {
+  transform: scale(0.96);
+}
+
+.cal-event-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cal-event-item button {
+  background: none;
+  border: none;
+  color: #c084fc;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.cal-event-item button:hover {
+  color: white;
+}
+
+.cal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cal-nav-btn {
+  background: transparent;
+  border: none;
+  color: #c084fc; /* purple */
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.cal-nav-btn:hover {
+  background: rgba(192, 132, 252, 0.15);
+  color: white;
+  transform: scale(1.2);
 }
\ No newline at end of file
diff --git a/templates/calendar_widget.html b/templates/calendar_widget.html
index 978a441..7baf5d7 100644
--- a/templates/calendar_widget.html
+++ b/templates/calendar_widget.html
@@ -187,10 +187,21 @@
 
 <div class="cal-widget">
   <div class="cal-header">
-    <span class="cal-month-name">{{ data.month_name }}</span>
+
+  <!-- LEFT ARROW -->
+  <button class="cal-nav-btn" onclick="changeMonth('prev')">←</button>
+
+  <!-- MONTH + YEAR -->
+  <div style="text-align:center;">
+    <span class="cal-month-name">{{ data.month_name }}</span><br>
     <span class="cal-year">{{ data.year }}</span>
   </div>
 
+  <!-- RIGHT ARROW -->
+  <button class="cal-nav-btn" onclick="changeMonth('next')">→</button>
+
+</div>
+
   <div class="cal-grid">
     <!-- Day-of-week headers -->
     {% for header in data.day_headers %}
@@ -203,38 +214,40 @@
         <div class="cal-day
           {% if not day.in_month %}out-of-month{% endif %}
           {% if day.is_today %}today{% endif %}"
+            data-date="{{ day.date_str }}"
           title="{{ day.date_str }}{% if day.events %}: {{ day.events | join(', ') }}{% endif %}">
           <span class="cal-day-num">{{ day.day }}</span>
-          {% if day.events %}
-            <div class="cal-event-dot"></div>
+          {% if day.is_today and day.events %}
+          <div class="cal-event-dot"></div>
           {% endif %}
         </div>
       {% endfor %}
     {% endfor %}
   </div>
 
-  <!-- Today's events -->
-  <div class="cal-events-section">
-    <div class="cal-events-title">Today</div>
-    {% set today_events = [] %}
-    {% for week in data.weeks %}
-      {% for day in week %}
-        {% if day.is_today and day.events %}
-          {% for e in day.events %}
-            {% set _ = today_events.append(e) %}
-          {% endfor %}
-        {% endif %}
-      {% endfor %}
-    {% endfor %}
+  
+   <div class="cal-events-section">
+    <div class="cal-events-title" id="eventsTitle">Select a day</div>
 
-    {% if today_events %}
-      {% for event in today_events %}
-        <div class="cal-event-item">
-          <span>{{ event }}</span>
-        </div>
-      {% endfor %}
-    {% else %}
-      <div class="cal-no-events">No events today</div>
-    {% endif %}
+    <div id="selectedEventsContainer">
+     <div class="cal-no-events">Click a date to see tasks</div>
+  </div>
+  </div>
+
+<div id="taskSection" class="task-section" style="display:none;"></div>
+  
+  <div id="selectedDateLabel" class="task-label"></div>
+
+  <div class="task-input-row">
+    <input id="taskInput" placeholder="Add task..." />
+    <button onclick="addTask()">Add</button>
   </div>
-</div>
\ No newline at end of file
+
+</div>
+
+<script>
+      window.calendarEvents = {{ data.weeks | tojson }};
+</script>
+
+</div>
+