From 91679061e6d9c8925785825633877b4aed680649 Mon Sep 17 00:00:00 2001
From: Anthony Tecsa <anthonytecsa@gmail.com>
Date: Tue, 1 Apr 2025 21:33:42 -0400
Subject: [PATCH 1/5] fixed color and spacing nits

---
 src/components/CalendarHeader.tsx |  2 +-
 src/components/DateOfAbsence.tsx  |  3 +++
 src/components/FileUpload.tsx     |  7 +++++--
 src/components/InputDropdown.tsx  |  4 +++-
 src/components/InputForm.tsx      |  6 ++++++
 utils/getCalendarStyles.ts        | 16 ++++++++++++++++
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx
index 13012388..b0ff6796 100644
--- a/src/components/CalendarHeader.tsx
+++ b/src/components/CalendarHeader.tsx
@@ -88,7 +88,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             variant="outline"
           />
         </HStack>
-        <Text textStyle="h1" whiteSpace="nowrap" overflow="hidden">
+        <Text textStyle="h1" whiteSpace="nowrap" overflow="hidden" pl={2}>
           {currentMonthYear}
         </Text>
       </HStack>
diff --git a/src/components/DateOfAbsence.tsx b/src/components/DateOfAbsence.tsx
index 172fae62..a4f62c11 100644
--- a/src/components/DateOfAbsence.tsx
+++ b/src/components/DateOfAbsence.tsx
@@ -8,6 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text,
+  useTheme,
 } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import MiniCalendar from './MiniCalendar';
@@ -31,6 +32,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
     dateValue ? dateValue.toLocaleDateString('en-CA') : ''
   );
   const [isOpen, setIsOpen] = useState(false);
+  const theme = useTheme();
 
   useEffect(() => {
     if (dateValue) {
@@ -83,6 +85,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
               pattern={DATE_PATTERN}
               title="Enter date in YYYY-MM-DD format"
               autoComplete="off"
+              borderColor={theme.colors.outline}
             />
           </Box>
         </PopoverTrigger>
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index e13b6b33..84e485f7 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -5,6 +5,7 @@ import {
   Image,
   Input,
   Text,
+  useTheme,
   useToast,
 } from '@chakra-ui/react';
 import { useRef, useState } from 'react';
@@ -23,6 +24,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const toast = useToast();
+  const theme = useTheme();
 
   const validateAndSetFile = (file: File) => {
     if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
@@ -72,8 +74,9 @@ export const FileUpload: React.FC<FileUploadProps> = ({
       <Box
         as="label"
         htmlFor="file-upload"
-        border="1px dashed"
-        borderColor={isDragging ? 'primaryBlue.300' : 'outline'}
+        borderStyle="dashed"
+        borderWidth="1.5px"
+        borderColor={isDragging ? 'primaryBlue.300' : theme.colors.outline}
         borderRadius="10px"
         p={5}
         textAlign="center"
diff --git a/src/components/InputDropdown.tsx b/src/components/InputDropdown.tsx
index f69787a6..4b9f51f0 100644
--- a/src/components/InputDropdown.tsx
+++ b/src/components/InputDropdown.tsx
@@ -10,6 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text,
+  useTheme,
 } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
@@ -31,6 +32,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   const [selectedOption, setSelectedOption] = useState<Option | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const theme = useTheme();
 
   const fetchData = useCallback(async () => {
     try {
@@ -68,7 +70,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
       <PopoverTrigger>
         <InputGroup
           border="1px solid"
-          borderColor="neutralGray.300"
+          borderColor={theme.colors.outline}
           borderRadius="md"
         >
           <Input
diff --git a/src/components/InputForm.tsx b/src/components/InputForm.tsx
index f3587447..47d938e5 100644
--- a/src/components/InputForm.tsx
+++ b/src/components/InputForm.tsx
@@ -15,6 +15,7 @@ import {
   Textarea,
   VStack,
   useDisclosure,
+  useTheme,
   useToast,
 } from '@chakra-ui/react';
 
@@ -24,6 +25,7 @@ import { DateOfAbsence } from './DateOfAbsence';
 import { FileUpload } from './FileUpload';
 import { InputDropdown } from './InputDropdown';
 import { SearchDropdown } from './SearchDropdown';
+import { ThemeContext } from '@emotion/react';
 
 interface InputFormProps {
   onClose?: () => void;
@@ -59,6 +61,7 @@ const InputForm: React.FC<InputFormProps> = ({
   });
   const [lessonPlan, setLessonPlan] = useState<File | null>(null);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const theme = useTheme();
 
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
@@ -354,6 +357,7 @@ const InputForm: React.FC<InputFormProps> = ({
           </FormLabel>
           <Input
             name="roomNumber"
+            borderColor={theme.colors.outline}
             placeholder="e.g. 2131"
             value={formData.roomNumber}
             onChange={handleChange}
@@ -375,6 +379,7 @@ const InputForm: React.FC<InputFormProps> = ({
             value={formData.reasonOfAbsence}
             onChange={handleChange}
             minH="88px"
+            borderColor={theme.colors.outline}
           />
           <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
         </FormControl>
@@ -391,6 +396,7 @@ const InputForm: React.FC<InputFormProps> = ({
             value={formData.notes}
             onChange={handleChange}
             minH="88px"
+            borderColor={theme.colors.outline}
           />
         </FormControl>
 
diff --git a/utils/getCalendarStyles.ts b/utils/getCalendarStyles.ts
index 7707ecc5..e4c8409f 100644
--- a/utils/getCalendarStyles.ts
+++ b/utils/getCalendarStyles.ts
@@ -26,4 +26,20 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
   .fc .fc-daygrid-day-number {
     width: 100%;
   }
+  .fc .fc-scrollgrid thead .fc-col-header-cell {
+    border-left: none !important;
+    border-right: none !important;
+    border-top: none !important;
+  }
+  .fc .fc-col-header-cell {
+    height: 32px;
+  }
+  .fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
 `;

From 4dc7909ac85aec7d7ee7f9d2c9a6ebb103dbdea6 Mon Sep 17 00:00:00 2001
From: Chinemerem <chinemeremchigbo@Outlook.com>
Date: Wed, 16 Apr 2025 04:21:46 -0400
Subject: [PATCH 2/5] Squash

---
 .env.sample                                   |   3 +-
 .eslintrc.json                                |  14 -
 .github/workflows/cron-job.yml                |   8 +-
 README.md                                     |  43 +-
 app/api/colorGroups/route.ts                  |  15 +
 app/api/declareAbsence/route.ts               |  49 +-
 app/api/editAbsence/route.ts                  |  80 ++
 app/api/filter/locations/route.ts             |   2 +-
 app/api/filter/subjects/route.ts              |   2 +-
 app/api/getAbsenceDates/route.ts              |   2 +-
 app/api/locations/[id]/route.ts               |  24 +-
 app/api/locations/inUse/route.ts              |  32 +
 app/api/locations/route.ts                    |  15 +-
 app/api/reminders/route.ts                    |  27 +-
 app/api/searchDrive/route.ts                  |   2 +-
 app/api/settings/route.ts                     |   2 +-
 app/api/subjects/[id]/route.ts                |  22 +-
 app/api/subjects/inUse/route.ts               |  32 +
 app/api/subjects/route.ts                     |  12 +-
 app/api/system/batch-update/route.ts          | 145 +++
 app/api/users/[id]/route.ts                   | 100 +-
 app/api/users/email/[email]/route.ts          |   2 +-
 app/api/users/route.ts                        |   3 +-
 eslint.config.mjs                             |  25 +-
 hooks/useAbsences.ts                          |   8 +-
 hooks/useChangeManagement.ts                  | 456 +++++++++
 hooks/useUserData.ts                          |  68 +-
 hooks/useUserFiltering.ts                     |  43 +-
 prisma/seed/seed.ts                           |  21 +-
 src/components/CustomToast.tsx                | 109 +++
 src/components/EditableRoleCell.tsx           | 142 ---
 src/components/Footer.tsx                     |   5 -
 src/components/InputForm.tsx                  | 448 ---------
 .../{SistemaLogoColour.tsx => TacetLogo.tsx}  |   0
 src/components/UserManagementCard.tsx         | 136 ---
 src/components/{ => absences}/AbsenceBox.tsx  |  26 +-
 src/components/{ => absences}/FileUpload.tsx  |  78 +-
 .../{ => absences/details}/AbsenceDetails.tsx | 319 +++++--
 .../absences/details/AbsenceFillThanks.tsx    |  82 ++
 .../details}/AbsenceStatusTag.tsx             |   0
 .../absences/details/EditableNotes.tsx        | 166 ++++
 .../{ => absences/details}/LessonPlanView.tsx | 147 ++-
 .../absences/modals/AdminTeacherFields.tsx    |  85 ++
 .../{ => absences/modals}/DateOfAbsence.tsx   |   7 +-
 .../{ => absences/modals}/InputDropdown.tsx   |  27 +-
 .../{ => absences/modals}/SearchDropdown.tsx  | 124 +--
 .../modals/declare/ConfirmDeclareModal.tsx    | 123 +++
 .../modals/declare/DeclareAbsenceForm.tsx     | 322 +++++++
 .../absences/modals/edit/ConfirmEditModal.tsx |  48 +
 .../absences/modals/edit/EditAbsenceForm.tsx  | 325 +++++++
 .../{ => calendar}/CalendarIcon.tsx           |   0
 .../{ => calendar}/CalendarTabs.tsx           |   0
 .../{ => calendar}/MiniCalendar.tsx           |   0
 .../sidebar}/AbsenceStatusAccordion.tsx       |   2 +-
 .../{ => calendar/sidebar}/Accordion.tsx      |   0
 .../sidebar}/ArchivedAccordion.tsx            |  12 +-
 .../sidebar}/CalendarSidebar.tsx              |   9 +-
 .../sidebar}/LocationAccordion.tsx            |   4 +-
 .../sidebar}/SubjectAccordion.tsx             |   2 +-
 .../stats}/CircularProgress.tsx               |   0
 .../{ => dashboard/stats}/CustomTooltip.tsx   |   0
 .../{ => dashboard/stats}/DualColourBar.tsx   |   0
 .../stats}/MonthlyAbsencesCard.tsx            |   1 -
 .../stats}/TotalAbsencesCard.tsx              |   1 -
 .../dashboard/system_options/EntityTable.tsx  | 897 ++++++++++++++++++
 .../system_options/LocationsTable.tsx         |  32 +
 .../system_options/SubjectsTable.tsx          |  32 +
 .../SystemChangesConfirmationDialog.tsx       | 420 ++++++++
 .../system_options/SystemOptionsModal.tsx     | 382 ++++++++
 .../system_options/SystemSettings.tsx         | 104 ++
 .../system_options/UnsavedChangesDialog.tsx   | 107 +++
 .../user_management/EditableRoleCell.tsx      | 220 +++++
 .../EditableSubscriptionsCell.tsx             | 381 ++++++++
 .../user_management}/FilterPopup.tsx          |  16 +-
 .../user_management}/OperatorMenu.tsx         |   2 +-
 .../user_management/UserManagementCard.tsx    | 245 +++++
 .../user_management}/UserManagementTable.tsx  | 126 ++-
 .../calendar}/AdminTeacherToggle.tsx          |   0
 .../{ => header/calendar}/CalendarHeader.tsx  |  31 +-
 .../dashboard}/DashboardHeader.tsx            |  62 +-
 .../dashboard}/ExportAbsencesButton.tsx       |  25 +-
 .../{ => header/dashboard}/YearDropdown.tsx   |   0
 .../{ => header/profile}/ProfileMenu.tsx      |  51 +-
 .../{ => header/profile}/SignOutButton.tsx    |   0
 src/pages/calendar.tsx                        | 108 +--
 src/pages/dashboard.tsx                       |  53 +-
 src/pages/index.tsx                           |   4 +-
 theme/components.ts                           |  81 +-
 types/next-auth.d.ts                          |   2 +-
 utils/formatDate.ts                           |  23 +
 utils/formatMonthYear.ts                      |   6 -
 utils/getCalendarStyles.ts                    |  38 +-
 utils/getSelectedYearAbsences.ts              |  21 +
 utils/submitAbsence.ts                        |  83 ++
 utils/types.ts                                |  25 +-
 utils/uploadFile.ts                           |  18 +
 utils/validateAbsenceForm.ts                  |  34 +
 vercel.json                                   |   8 +
 98 files changed, 6259 insertions(+), 1385 deletions(-)
 delete mode 100644 .eslintrc.json
 create mode 100644 app/api/colorGroups/route.ts
 create mode 100644 app/api/editAbsence/route.ts
 create mode 100644 app/api/locations/inUse/route.ts
 create mode 100644 app/api/subjects/inUse/route.ts
 create mode 100644 app/api/system/batch-update/route.ts
 create mode 100644 hooks/useChangeManagement.ts
 create mode 100644 src/components/CustomToast.tsx
 delete mode 100644 src/components/EditableRoleCell.tsx
 delete mode 100644 src/components/Footer.tsx
 delete mode 100644 src/components/InputForm.tsx
 rename src/components/{SistemaLogoColour.tsx => TacetLogo.tsx} (100%)
 delete mode 100644 src/components/UserManagementCard.tsx
 rename src/components/{ => absences}/AbsenceBox.tsx (86%)
 rename src/components/{ => absences}/FileUpload.tsx (56%)
 rename src/components/{ => absences/details}/AbsenceDetails.tsx (55%)
 create mode 100644 src/components/absences/details/AbsenceFillThanks.tsx
 rename src/components/{ => absences/details}/AbsenceStatusTag.tsx (100%)
 create mode 100644 src/components/absences/details/EditableNotes.tsx
 rename src/components/{ => absences/details}/LessonPlanView.tsx (53%)
 create mode 100644 src/components/absences/modals/AdminTeacherFields.tsx
 rename src/components/{ => absences/modals}/DateOfAbsence.tsx (92%)
 rename src/components/{ => absences/modals}/InputDropdown.tsx (86%)
 rename src/components/{ => absences/modals}/SearchDropdown.tsx (66%)
 create mode 100644 src/components/absences/modals/declare/ConfirmDeclareModal.tsx
 create mode 100644 src/components/absences/modals/declare/DeclareAbsenceForm.tsx
 create mode 100644 src/components/absences/modals/edit/ConfirmEditModal.tsx
 create mode 100644 src/components/absences/modals/edit/EditAbsenceForm.tsx
 rename src/components/{ => calendar}/CalendarIcon.tsx (100%)
 rename src/components/{ => calendar}/CalendarTabs.tsx (100%)
 rename src/components/{ => calendar}/MiniCalendar.tsx (100%)
 rename src/components/{ => calendar/sidebar}/AbsenceStatusAccordion.tsx (96%)
 rename src/components/{ => calendar/sidebar}/Accordion.tsx (100%)
 rename src/components/{ => calendar/sidebar}/ArchivedAccordion.tsx (97%)
 rename src/components/{ => calendar/sidebar}/CalendarSidebar.tsx (95%)
 rename src/components/{ => calendar/sidebar}/LocationAccordion.tsx (96%)
 rename src/components/{ => calendar/sidebar}/SubjectAccordion.tsx (97%)
 rename src/components/{ => dashboard/stats}/CircularProgress.tsx (100%)
 rename src/components/{ => dashboard/stats}/CustomTooltip.tsx (100%)
 rename src/components/{ => dashboard/stats}/DualColourBar.tsx (100%)
 rename src/components/{ => dashboard/stats}/MonthlyAbsencesCard.tsx (99%)
 rename src/components/{ => dashboard/stats}/TotalAbsencesCard.tsx (99%)
 create mode 100644 src/components/dashboard/system_options/EntityTable.tsx
 create mode 100644 src/components/dashboard/system_options/LocationsTable.tsx
 create mode 100644 src/components/dashboard/system_options/SubjectsTable.tsx
 create mode 100644 src/components/dashboard/system_options/SystemChangesConfirmationDialog.tsx
 create mode 100644 src/components/dashboard/system_options/SystemOptionsModal.tsx
 create mode 100644 src/components/dashboard/system_options/SystemSettings.tsx
 create mode 100644 src/components/dashboard/system_options/UnsavedChangesDialog.tsx
 create mode 100644 src/components/dashboard/user_management/EditableRoleCell.tsx
 create mode 100644 src/components/dashboard/user_management/EditableSubscriptionsCell.tsx
 rename src/components/{ => dashboard/user_management}/FilterPopup.tsx (98%)
 rename src/components/{ => dashboard/user_management}/OperatorMenu.tsx (98%)
 create mode 100644 src/components/dashboard/user_management/UserManagementCard.tsx
 rename src/components/{ => dashboard/user_management}/UserManagementTable.tsx (73%)
 rename src/components/{ => header/calendar}/AdminTeacherToggle.tsx (100%)
 rename src/components/{ => header/calendar}/CalendarHeader.tsx (85%)
 rename src/components/{ => header/dashboard}/DashboardHeader.tsx (54%)
 rename src/components/{ => header/dashboard}/ExportAbsencesButton.tsx (74%)
 rename src/components/{ => header/dashboard}/YearDropdown.tsx (100%)
 rename src/components/{ => header/profile}/ProfileMenu.tsx (77%)
 rename src/components/{ => header/profile}/SignOutButton.tsx (100%)
 create mode 100644 utils/formatDate.ts
 delete mode 100644 utils/formatMonthYear.ts
 create mode 100644 utils/getSelectedYearAbsences.ts
 create mode 100644 utils/submitAbsence.ts
 create mode 100644 utils/uploadFile.ts
 create mode 100644 utils/validateAbsenceForm.ts
 create mode 100644 vercel.json

diff --git a/.env.sample b/.env.sample
index 4426b425..b5f7dba0 100644
--- a/.env.sample
+++ b/.env.sample
@@ -13,4 +13,5 @@ POSTGRES_DATABASE=
 POSTGRES_PASSWORD=
 POSTGRES_USER=
 SISTEMA_PASSWORD=
-SISTEMA_EMAIL_DOMAIN=
\ No newline at end of file
+SISTEMA_EMAIL_DOMAIN=
+CRON_SECRET=
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 7a351534..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": ["next", "next/core-web-vitals", "plugin:prettier/recommended"],
-  "plugins": ["prettier", "@typescript-eslint"],
-  "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "error"
-  }
-}
diff --git a/.github/workflows/cron-job.yml b/.github/workflows/cron-job.yml
index b5cd3e0f..d00f8917 100644
--- a/.github/workflows/cron-job.yml
+++ b/.github/workflows/cron-job.yml
@@ -2,7 +2,7 @@ name: Send Email Reminders for Missing Lessons
 
 on:
   schedule:
-    - cron: '0 0 * * *' # Runs every day at 00:00 UTC
+    - cron: '0 0 * * *'
   workflow_dispatch:
 
 jobs:
@@ -10,7 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Log current time
-        run: date -u # Logs the current UTC time
+        run: date -u
 
       - name: Call reminders API
-        run: curl -X GET "${{ secrets.NEXT_PUBLIC_PROD_URL }}/api/reminders"
+        run: |
+          curl -X GET "${{ secrets.NEXT_PUBLIC_PROD_URL }}/api/reminders" \
+            -H "Authorization: Bearer ${{ secrets.CRON_SECRET }}"
diff --git a/README.md b/README.md
index a3cd397f..2f6cf6ba 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,25 @@
 # Sistema Tacet
 
-## Absence Calendar
+## Preview
 
-<img width="1728" alt="image" src="https://github.com/user-attachments/assets/7b6022b8-48a7-4192-9916-b1c3ef912780" />
+- Absence Calendar
+  <img width="1728" alt="image"
+  src="https://github.com/user-attachments/assets/7b6022b8-48a7-4192-9916-b1c3ef912780"
+  />
 
-## Admin Dashboard
+- Admin Dashboard
+  <img width="1728" alt="image"
+  src="https://github.com/user-attachments/assets/642d3ff0-dbc0-44f0-80e0-f2fbbecaa916"
+  />
 
-<img width="1728" alt="image" src="https://github.com/user-attachments/assets/642d3ff0-dbc0-44f0-80e0-f2fbbecaa916" />
+## Prerequisites
 
-## Setup
+- If you intend to contribute to this project ensure you have been added to the [UW Blueprint Github Organization](https://github.com/uwblueprint/).
+- Install [Node.js](https://nodejs.org/en/download/) (v22 tested). It's recommended to use [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm) to manage your Node.js versions.
+- Install Docker Desktop ([MacOS](https://docs.docker.com/desktop/setup/install/mac-install/) | [Windows](https://docs.docker.com/desktop/install/windows-install/) | [Linux](https://docs.docker.com/desktop/setup/install/linux/)) and ensure that it is running.
+-
 
-- Make sure you have been added to the [UW Blueprint Github Workspace](https://github.com/uwblueprint/).
-- Install Docker Desktop ([MacOS](https://docs.docker.com/docker-for-mac/install/) | [Windows](https://docs.docker.com/desktop/install/windows-install/) | [Linux](https://docs.docker.com/engine/install/#server)) and ensure that it is running.
-- Install [Node.js](https://nodejs.org/) (v22 tested). It's recommended to use [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm) to manage your Node.js versions.
-
-  - [Node.js for MacOS](https://nodejs.org/en/download/)
-  - [Node.js for Windows](https://nodejs.org/en/download/)
-  - [Node.js for Linux](https://nodejs.org/en/download/package-manager/)
+## Clone and Install
 
 - Clone the [Sistema Github Repository](https://github.com/uwblueprint/sistema) to your local machine and `cd` into the project folder:
 
@@ -42,12 +45,12 @@ npm install
 - Build and start the Docker containers
 
 ```bash
-docker-compose up --build
+docker compose up --build
 ```
 
 ## Secrets
 
-- Create A [HashiCorp Cloud Platform Account](https://portal.cloud.hashicorp.com/sign-in?ajs_aid=9085f07d-f411-42b4-855b-72795f4fdbcc&product_intent=vault)
+- Create a [HashiCorp Cloud Platform Account](https://portal.cloud.hashicorp.com/sign-in?ajs_aid=9085f07d-f411-42b4-855b-72795f4fdbcc&product_intent=vault)
 - Make sure you have been added to the [Sistema HashiCorp Vault](https://github.com/uwblueprint/).
 - Install [HashiCorp Vault](https://developer.hashicorp.com/hcp/tutorials/get-started-hcp-vault-secrets/hcp-vault-secrets-install-cli#install-hcp-vault-secrets-cli) in order to pull secrets
 - In the folder where you cloned the Sistema repository, log into Vault
@@ -90,22 +93,22 @@ Use the arrow keys to navigate: ↓ ↑ → ←
 
 ## Docker Commands
 
-If you’re new to Docker, you can learn more about `docker-compose` commands at
+If you’re new to Docker, you can learn more about `docker compose` commands at
 this [docker compose overview](https://docs.docker.com/compose/reference/).
 
 ```bash
 # Start Docker Containers
-docker-compose up --build
+docker compose up --build
 ```
 
 ```bash
 # Stop Containers
-docker-compose down
+docker compose down
 ```
 
 ```bash
 # Remove Containers, Networks, and Volumes:
-docker-compose down --volumes
+docker compose down --volumes
 ```
 
 ```bash
@@ -165,7 +168,7 @@ This will open an interactive shell inside the container.
 ## Accessing Database
 
 ```bash
-# Open a Postgres shell in the sistema-db -1 Docker container and connect to the sistema database
+# Open a Postgres shell in the sistema-db-1 Docker container and connect to the sistema database
 docker exec -it sistema-db-1 psql -U sistema -d sistema
 # Retrieve all rows from the "Absence" table
 SELECT * FROM public."Absence";
@@ -275,7 +278,7 @@ git push -f
 ```
 
 - Commit messages and PR names are descriptive and written in **imperative tense**. The first word should be capitalized. E.g. "Create user REST endpoints", not "Created user REST endpoints"
-- PRs can contain multiple commits, they do not need to be squashed together before merging as long as each commit is atomic. Our repo is configured to only allow squash commits to `main` so the entire PR will appear as 1 commit on `main`, but the individual commits are preserved when viewing the PR.
+- PRs can contain multiple commits, they do not need to be squashed together before merging as long as each commit is atomic.
 
 ## Version Control Guide
 
diff --git a/app/api/colorGroups/route.ts b/app/api/colorGroups/route.ts
new file mode 100644
index 00000000..e9d7eeb0
--- /dev/null
+++ b/app/api/colorGroups/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { prisma } from '@utils/prisma';
+
+export async function GET() {
+  try {
+    const colorGroups = await prisma.colorGroup.findMany();
+    return NextResponse.json(colorGroups);
+  } catch (error) {
+    console.error('Error fetching color groups:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/declareAbsence/route.ts b/app/api/declareAbsence/route.ts
index 48f64072..94f363d9 100644
--- a/app/api/declareAbsence/route.ts
+++ b/app/api/declareAbsence/route.ts
@@ -1,17 +1,28 @@
-import { NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextResponse } from 'next/server';
 
 export async function POST(req: Request) {
   try {
     const body = await req.json();
-    console.log(body);
+
+    const {
+      lessonDate,
+      reasonOfAbsence,
+      notes,
+      absentTeacherId,
+      substituteTeacherId,
+      locationId,
+      subjectId,
+      roomNumber,
+      lessonPlanFile,
+    } = body;
 
     if (
-      !body.lessonDate ||
-      !body.reasonOfAbsence ||
-      !body.absentTeacherId ||
-      !body.locationId ||
-      !body.subjectId
+      !lessonDate ||
+      !reasonOfAbsence ||
+      !absentTeacherId ||
+      !locationId ||
+      !subjectId
     ) {
       console.log('Missing required fields');
       return NextResponse.json(
@@ -23,12 +34,12 @@ export async function POST(req: Request) {
     const newAbsence = await prisma.$transaction(async (prisma) => {
       let lessonPlanId: number | null = null;
 
-      if (body.lessonPlanFile) {
+      if (lessonPlanFile) {
         const lessonPlan = await prisma.lessonPlanFile.create({
           data: {
-            name: body.lessonPlanFile.name,
-            url: body.lessonPlanFile.url,
-            size: body.lessonPlanFile.size,
+            name: lessonPlanFile.name,
+            url: lessonPlanFile.url,
+            size: lessonPlanFile.size,
           },
         });
         lessonPlanId = lessonPlan.id;
@@ -36,15 +47,15 @@ export async function POST(req: Request) {
 
       const absence = await prisma.absence.create({
         data: {
-          lessonDate: new Date(body.lessonDate),
+          lessonDate: new Date(lessonDate),
           lessonPlanId,
-          reasonOfAbsence: body.reasonOfAbsence,
-          notes: body.notes || null,
-          absentTeacherId: body.absentTeacherId,
-          substituteTeacherId: body.substituteTeacherId || null,
-          locationId: body.locationId,
-          subjectId: body.subjectId,
-          roomNumber: body.roomNumber || null,
+          reasonOfAbsence: reasonOfAbsence,
+          notes: notes || null,
+          absentTeacherId: absentTeacherId,
+          substituteTeacherId: substituteTeacherId || null,
+          locationId: locationId,
+          subjectId: subjectId,
+          roomNumber: roomNumber || null,
         },
       });
 
diff --git a/app/api/editAbsence/route.ts b/app/api/editAbsence/route.ts
new file mode 100644
index 00000000..0fac7f06
--- /dev/null
+++ b/app/api/editAbsence/route.ts
@@ -0,0 +1,80 @@
+import { prisma } from '@utils/prisma';
+import { NextResponse } from 'next/server';
+
+export async function PUT(req: Request) {
+  try {
+    const body = await req.json();
+    const { id, lessonPlanFile, ...fields } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { error: 'Missing absence ID' },
+        { status: 400 }
+      );
+    }
+
+    const updatedAbsence = await prisma.$transaction(async (tx) => {
+      const existing = await tx.absence.findUnique({
+        where: { id },
+        include: { lessonPlan: true },
+      });
+
+      if (!existing) {
+        throw new Error(`Absence with ID ${id} not found.`);
+      }
+
+      const dataToUpdate: any = {};
+
+      if ('lessonDate' in fields)
+        dataToUpdate.lessonDate = new Date(fields.lessonDate);
+      if ('reasonOfAbsence' in fields)
+        dataToUpdate.reasonOfAbsence = fields.reasonOfAbsence;
+      if ('notes' in fields) dataToUpdate.notes = fields.notes || null;
+      if ('absentTeacherId' in fields)
+        dataToUpdate.absentTeacherId = fields.absentTeacherId;
+      if ('substituteTeacherId' in fields)
+        dataToUpdate.substituteTeacherId = fields.substituteTeacherId || null;
+      if ('locationId' in fields) dataToUpdate.locationId = fields.locationId;
+      if ('subjectId' in fields) dataToUpdate.subjectId = fields.subjectId;
+      if ('roomNumber' in fields)
+        dataToUpdate.roomNumber = fields.roomNumber || null;
+
+      if (lessonPlanFile) {
+        if (existing.lessonPlanId) {
+          await tx.absence.update({
+            where: { id },
+            data: { lessonPlanId: null },
+          });
+          await tx.lessonPlanFile.delete({
+            where: { id: existing.lessonPlanId },
+          });
+        }
+
+        const newLessonPlan = await tx.lessonPlanFile.create({
+          data: {
+            name: lessonPlanFile.name,
+            url: lessonPlanFile.url,
+            size: lessonPlanFile.size,
+          },
+        });
+
+        dataToUpdate.lessonPlanId = newLessonPlan.id;
+      }
+
+      const updated = await tx.absence.update({
+        where: { id },
+        data: dataToUpdate,
+      });
+
+      return updated;
+    });
+
+    return NextResponse.json(updatedAbsence, { status: 200 });
+  } catch (err) {
+    console.error('Error in PUT /api/editAbsence:', err.message || err);
+    return NextResponse.json(
+      { error: 'Internal Server Error', details: err.message },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/filter/locations/route.ts b/app/api/filter/locations/route.ts
index 0935ad0e..ebc3f5d4 100644
--- a/app/api/filter/locations/route.ts
+++ b/app/api/filter/locations/route.ts
@@ -1,6 +1,6 @@
 import { prisma } from '@utils/prisma';
-import { NextRequest, NextResponse } from 'next/server';
 import { Location } from '@utils/types';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(req: NextRequest) {
   try {
diff --git a/app/api/filter/subjects/route.ts b/app/api/filter/subjects/route.ts
index 16ff4766..be4ecfd2 100644
--- a/app/api/filter/subjects/route.ts
+++ b/app/api/filter/subjects/route.ts
@@ -1,6 +1,6 @@
 import { prisma } from '@utils/prisma';
-import { NextRequest, NextResponse } from 'next/server';
 import { SubjectAPI } from '@utils/types';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(req: NextRequest) {
   try {
diff --git a/app/api/getAbsenceDates/route.ts b/app/api/getAbsenceDates/route.ts
index 7f4be61b..d808f3ea 100644
--- a/app/api/getAbsenceDates/route.ts
+++ b/app/api/getAbsenceDates/route.ts
@@ -1,6 +1,6 @@
+import { YearlyAbsenceData } from '@utils/types';
 import { NextResponse } from 'next/server';
 import { getAbsenceYearRanges } from './absenceDates';
-import { YearlyAbsenceData } from '@utils/types';
 
 export async function GET() {
   try {
diff --git a/app/api/locations/[id]/route.ts b/app/api/locations/[id]/route.ts
index 3ee096ea..36b7df93 100644
--- a/app/api/locations/[id]/route.ts
+++ b/app/api/locations/[id]/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function PATCH(
   request: NextRequest,
@@ -8,6 +8,13 @@ export async function PATCH(
   const params = await props.params;
   try {
     const id = parseInt(params.id);
+    if (isNaN(id)) {
+      return NextResponse.json(
+        { error: 'Invalid location ID' },
+        { status: 400 }
+      );
+    }
+
     const data = await request.json();
     const { name, abbreviation, archived } = data;
 
@@ -20,7 +27,9 @@ export async function PATCH(
   } catch (error) {
     console.error('Error updating location:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to update location.',
+      },
       { status: 500 }
     );
   }
@@ -34,7 +43,10 @@ export async function DELETE(
   try {
     const id = parseInt(params.id, 10);
     if (isNaN(id)) {
-      return NextResponse.json({ error: 'Invalid ID' }, { status: 400 });
+      return NextResponse.json(
+        { error: 'Invalid location ID' },
+        { status: 400 }
+      );
     }
 
     // Check if the location is used in any absences
@@ -47,7 +59,7 @@ export async function DELETE(
       return NextResponse.json(
         {
           error:
-            'Cannot delete location because it is used in existing absences',
+            'This location cannot be deleted because it is used in existing absences',
         },
         { status: 409 }
       );
@@ -58,7 +70,9 @@ export async function DELETE(
   } catch (error) {
     console.error('Error deleting location:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to delete location.',
+      },
       { status: 500 }
     );
   }
diff --git a/app/api/locations/inUse/route.ts b/app/api/locations/inUse/route.ts
new file mode 100644
index 00000000..ad7d4610
--- /dev/null
+++ b/app/api/locations/inUse/route.ts
@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { prisma } from '@utils/prisma';
+
+export async function GET() {
+  try {
+    // Find all locations that are used in any absences
+    const locationsInUse = await prisma.absence.findMany({
+      select: {
+        locationId: true,
+      },
+      distinct: ['locationId'],
+      where: {
+        locationId: {
+          not: undefined,
+        },
+      },
+    });
+
+    // Extract the location IDs and filter out any null values
+    const locationIds = locationsInUse
+      .map((absence) => absence.locationId)
+      .filter((id): id is number => id !== null && id !== undefined);
+
+    return NextResponse.json({ locationsInUse: locationIds });
+  } catch (error) {
+    console.error('Error checking locations in use:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/locations/route.ts b/app/api/locations/route.ts
index b09747f3..2acd2cd5 100644
--- a/app/api/locations/route.ts
+++ b/app/api/locations/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET() {
   try {
@@ -18,21 +18,26 @@ export async function POST(request: NextRequest) {
   try {
     const { name, abbreviation } = (await request.json()) ?? {};
 
-    if (!name || !abbreviation) {
+    if (!name) {
       return NextResponse.json(
-        { error: 'name and abbreviation are required' },
+        { error: 'Location name is required' },
         { status: 400 }
       );
     }
 
     const location = await prisma.location.create({
-      data: { name, abbreviation },
+      data: {
+        name,
+        abbreviation: abbreviation || '',
+      },
     });
     return NextResponse.json(location);
   } catch (error) {
     console.error('Error creating location:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to create location.',
+      },
       { status: 500 }
     );
   }
diff --git a/app/api/reminders/route.ts b/app/api/reminders/route.ts
index 6b58affa..7b22e8ab 100644
--- a/app/api/reminders/route.ts
+++ b/app/api/reminders/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
 import { sendEmail } from '@utils/sendEmail';
+import { NextResponse } from 'next/server';
 
 const UPLOAD_LINK = `${process.env.NEXT_PUBLIC_PROD_URL!}/calendar`;
 
@@ -23,13 +23,16 @@ function getUTCDateWithoutTime(baseDate: Date, daysToAdd: number): Date {
   );
 }
 
-async function getAdminEmails() {
+async function getAdminEmails(allowedDomain: string): Promise<string[]> {
   try {
     const adminUsers = await prisma.user.findMany({
       where: { role: 'ADMIN' },
       select: { email: true },
     });
-    return adminUsers.map((user) => user.email);
+
+    return adminUsers
+      .map((user) => user.email)
+      .filter((email) => email.endsWith(`@${allowedDomain}`));
   } catch (error) {
     console.error('Error fetching admin emails:', error);
     return [];
@@ -106,6 +109,7 @@ async function sendReminders(
   const today = new Date();
   const targetDate = getUTCDateWithoutTime(today, daysBefore);
   const nextDay = new Date(targetDate.getTime() + 86400000);
+  const allowedDomain = process.env.SISTEMA_EMAIL_DOMAIN!;
 
   const users = await getUsersWithPendingLessonPlans(targetDate, nextDay);
 
@@ -114,10 +118,17 @@ async function sendReminders(
     return 0;
   }
 
-  const adminEmails = await getAdminEmails();
+  const adminEmails = await getAdminEmails(allowedDomain);
 
   const emailPromises = users.flatMap((user) =>
     user.absences.map(async (absence) => {
+      if (!user.email.endsWith(`@${allowedDomain}`)) {
+        console.warn(
+          `Skipped email to ${user.email} due to domain restriction`
+        );
+        return false;
+      }
+
       const emailBody = createEmailBody(user, absence, isUrgent);
       const emailContent = {
         to: user.email,
@@ -141,7 +152,13 @@ async function sendReminders(
   return successfulEmails;
 }
 
-export async function GET() {
+export async function GET(req: Request) {
+  if (
+    req.headers.get('Authorization') !== `Bearer ${process.env.CRON_SECRET}`
+  ) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
   try {
     const [sevenDayCount, twoDayCount] = await Promise.all([
       sendReminders(7, false),
diff --git a/app/api/searchDrive/route.ts b/app/api/searchDrive/route.ts
index a4d2c011..b4f1d061 100644
--- a/app/api/searchDrive/route.ts
+++ b/app/api/searchDrive/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { google } from 'googleapis';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(req: NextRequest) {
   const newHeaders = new Headers(req.headers);
diff --git a/app/api/settings/route.ts b/app/api/settings/route.ts
index 25c94a72..a4ad3405 100644
--- a/app/api/settings/route.ts
+++ b/app/api/settings/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET() {
   try {
diff --git a/app/api/subjects/[id]/route.ts b/app/api/subjects/[id]/route.ts
index 4cc26b57..200095ca 100644
--- a/app/api/subjects/[id]/route.ts
+++ b/app/api/subjects/[id]/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function PATCH(
   request: NextRequest,
@@ -9,7 +9,10 @@ export async function PATCH(
   try {
     const id = parseInt(params.id);
     if (isNaN(id)) {
-      return NextResponse.json({ error: 'Invalid ID' }, { status: 400 });
+      return NextResponse.json(
+        { error: 'Invalid subject ID' },
+        { status: 400 }
+      );
     }
 
     const data = await request.json();
@@ -27,7 +30,9 @@ export async function PATCH(
   } catch (error) {
     console.error('Error updating subject:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to update subject.',
+      },
       { status: 500 }
     );
   }
@@ -41,7 +46,10 @@ export async function DELETE(
   try {
     const id = parseInt(params.id);
     if (isNaN(id)) {
-      return NextResponse.json({ error: 'Invalid ID' }, { status: 400 });
+      return NextResponse.json(
+        { error: 'Invalid subject ID' },
+        { status: 400 }
+      );
     }
 
     // Check if the subject is used in any absences
@@ -54,7 +62,7 @@ export async function DELETE(
       return NextResponse.json(
         {
           error:
-            'Cannot delete subject because it is used in existing absences',
+            'This subject cannot be deleted because it is used in existing absences',
         },
         { status: 409 }
       );
@@ -65,7 +73,9 @@ export async function DELETE(
   } catch (error) {
     console.error('Error deleting subject:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to delete subject.',
+      },
       { status: 500 }
     );
   }
diff --git a/app/api/subjects/inUse/route.ts b/app/api/subjects/inUse/route.ts
new file mode 100644
index 00000000..4dd28a5d
--- /dev/null
+++ b/app/api/subjects/inUse/route.ts
@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { prisma } from '@utils/prisma';
+
+export async function GET() {
+  try {
+    // Find all subjects that are used in any absences
+    const subjectsInUse = await prisma.absence.findMany({
+      select: {
+        subjectId: true,
+      },
+      distinct: ['subjectId'],
+      where: {
+        subjectId: {
+          not: undefined,
+        },
+      },
+    });
+
+    // Extract the subject IDs and filter out any null values
+    const subjectIds = subjectsInUse
+      .map((absence) => absence.subjectId)
+      .filter((id): id is number => id !== null && id !== undefined);
+
+    return NextResponse.json({ subjectsInUse: subjectIds });
+  } catch (error) {
+    console.error('Error checking subjects in use:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/subjects/route.ts b/app/api/subjects/route.ts
index b0bb5688..88d49bbc 100644
--- a/app/api/subjects/route.ts
+++ b/app/api/subjects/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET() {
   try {
@@ -21,9 +21,9 @@ export async function GET() {
 export async function POST(request: NextRequest) {
   try {
     const { name, abbreviation, colorGroupId } = await request.json();
-    if (!name || !abbreviation || !colorGroupId) {
+    if (!name || colorGroupId === undefined) {
       return NextResponse.json(
-        { error: 'name, abbreviation, and colorGroupId are required' },
+        { error: 'Subject name and color group are required' },
         { status: 400 }
       );
     }
@@ -31,7 +31,7 @@ export async function POST(request: NextRequest) {
     const subject = await prisma.subject.create({
       data: {
         name,
-        abbreviation,
+        abbreviation: abbreviation || '',
         colorGroupId,
       },
       include: {
@@ -43,7 +43,9 @@ export async function POST(request: NextRequest) {
   } catch (error) {
     console.error('Error creating subject:', error);
     return NextResponse.json(
-      { error: 'Internal server error' },
+      {
+        error: 'Unable to create subject.',
+      },
       { status: 500 }
     );
   }
diff --git a/app/api/system/batch-update/route.ts b/app/api/system/batch-update/route.ts
new file mode 100644
index 00000000..54003b67
--- /dev/null
+++ b/app/api/system/batch-update/route.ts
@@ -0,0 +1,145 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@utils/prisma';
+
+export async function POST(req: NextRequest) {
+  try {
+    // Parse the request body
+    const body = await req.json();
+    const { subjects, locations, settings } = body;
+
+    // Validate request data
+    if (!subjects && !locations && !settings) {
+      return NextResponse.json(
+        { error: 'No changes provided' },
+        { status: 400 }
+      );
+    }
+
+    // Use prisma transaction to ensure atomicity
+    const result = await prisma.$transaction(async (tx) => {
+      // Process subject changes
+      if (subjects) {
+        // Create new subjects
+        if (subjects.create && subjects.create.length > 0) {
+          for (const subject of subjects.create) {
+            await tx.subject.create({
+              data: {
+                name: subject.name,
+                abbreviation: subject.abbreviation,
+                colorGroupId: subject.colorGroupId,
+              },
+            });
+          }
+        }
+
+        // Update existing subjects
+        if (subjects.update && subjects.update.length > 0) {
+          for (const { id, changes } of subjects.update) {
+            await tx.subject.update({
+              where: { id },
+              data: changes,
+            });
+          }
+        }
+
+        // Delete subjects
+        if (subjects.delete && subjects.delete.length > 0) {
+          for (const id of subjects.delete) {
+            // Check if subject is in use
+            const absenceCount = await tx.absence.count({
+              where: { subjectId: id },
+            });
+
+            if (absenceCount > 0) {
+              throw new Error(
+                `Cannot delete subject with ID ${id} as it is used in ${absenceCount} absences`
+              );
+            }
+
+            await tx.subject.delete({
+              where: { id },
+            });
+          }
+        }
+      }
+
+      // Process location changes
+      if (locations) {
+        // Create new locations
+        if (locations.create && locations.create.length > 0) {
+          for (const location of locations.create) {
+            await tx.location.create({
+              data: {
+                name: location.name,
+                abbreviation: location.abbreviation,
+              },
+            });
+          }
+        }
+
+        // Update existing locations
+        if (locations.update && locations.update.length > 0) {
+          for (const { id, changes } of locations.update) {
+            await tx.location.update({
+              where: { id },
+              data: changes,
+            });
+          }
+        }
+
+        // Delete locations
+        if (locations.delete && locations.delete.length > 0) {
+          for (const id of locations.delete) {
+            // Check if location is in use
+            const absenceCount = await tx.absence.count({
+              where: { locationId: id },
+            });
+
+            if (absenceCount > 0) {
+              throw new Error(
+                `Cannot delete location with ID ${id} as it is used in ${absenceCount} absences`
+              );
+            }
+
+            await tx.location.delete({
+              where: { id },
+            });
+          }
+        }
+      }
+
+      // Process settings changes
+      if (settings && settings.absenceCap !== undefined) {
+        // Update the global absence cap setting
+        const existingSettings = await tx.globalSettings.findFirst();
+
+        if (existingSettings) {
+          // Update existing settings
+          await tx.globalSettings.update({
+            where: { id: existingSettings.id },
+            data: { absenceCap: settings.absenceCap },
+          });
+        } else {
+          // Create new settings if none exist
+          await tx.globalSettings.create({
+            data: { absenceCap: settings.absenceCap },
+          });
+        }
+      }
+
+      return { success: true };
+    });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('Error in batch update:', error);
+
+    // Extract readable error message
+    let errorMessage = 'Internal server error';
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    }
+
+    return NextResponse.json({ error: errorMessage }, { status: 500 });
+  }
+}
diff --git a/app/api/users/[id]/route.ts b/app/api/users/[id]/route.ts
index 6d5aac75..3b2f733c 100644
--- a/app/api/users/[id]/route.ts
+++ b/app/api/users/[id]/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 function validateId(id: string): number | null {
   const parsedId = Number(id);
@@ -18,11 +18,30 @@ export async function GET(
 
   const searchParams = request.nextUrl.searchParams;
   const getAbsences = searchParams.get('getAbsences') === 'true';
+  const getMailingLists = searchParams.get('getMailingLists') === 'true';
 
   try {
     const user = await prisma.user.findUnique({
       where: { id: validatedId },
-      include: { absences: getAbsences },
+      include: {
+        absences: getAbsences,
+        mailingLists: getMailingLists
+          ? {
+              include: {
+                subject: {
+                  select: {
+                    id: true,
+                    name: true,
+                    abbreviation: true,
+                    colorGroup: {
+                      select: { colorCodes: true },
+                    },
+                  },
+                },
+              },
+            }
+          : false,
+      },
     });
 
     if (!user) {
@@ -50,12 +69,79 @@ export async function PATCH(
   }
 
   try {
-    const { email, firstName, lastName, role } = await request.json();
+    const { email, firstName, lastName, role, mailingListSubjectIds } =
+      await request.json();
 
-    const updatedUser = await prisma.user.update({
-      where: { id: validatedId },
-      data: { email, firstName, lastName, role },
-    });
+    // Update basic user data if provided
+    const userData: any = {};
+    if (email !== undefined) userData.email = email;
+    if (firstName !== undefined) userData.firstName = firstName;
+    if (lastName !== undefined) userData.lastName = lastName;
+    if (role !== undefined) userData.role = role;
+
+    let updatedUser;
+
+    // If mailingListSubjectIds is provided, we need to update the mailing lists
+    if (mailingListSubjectIds !== undefined) {
+      if (!Array.isArray(mailingListSubjectIds)) {
+        return NextResponse.json(
+          { error: 'mailingListSubjectIds must be an array' },
+          { status: 400 }
+        );
+      }
+
+      // First update the user data
+      updatedUser = await prisma.user.update({
+        where: { id: validatedId },
+        data: userData,
+      });
+
+      // Then delete all existing mailing lists for this user
+      await prisma.mailingList.deleteMany({
+        where: { userId: validatedId },
+      });
+
+      // Then create new entries for each subject ID
+      if (mailingListSubjectIds.length > 0) {
+        const mailingListData = mailingListSubjectIds.map((subjectId) => ({
+          userId: validatedId,
+          subjectId,
+        }));
+
+        await prisma.mailingList.createMany({
+          data: mailingListData,
+        });
+      }
+
+      // Return the updated user with mailing lists
+      updatedUser = await prisma.user.findUnique({
+        where: { id: validatedId },
+        include: {
+          mailingLists: {
+            include: {
+              subject: {
+                select: {
+                  id: true,
+                  name: true,
+                  abbreviation: true,
+                  colorGroup: {
+                    select: {
+                      colorCodes: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+    } else {
+      // Just update user data without touching mailing lists
+      updatedUser = await prisma.user.update({
+        where: { id: validatedId },
+        data: userData,
+      });
+    }
 
     return NextResponse.json(updatedUser);
   } catch (error) {
diff --git a/app/api/users/email/[email]/route.ts b/app/api/users/email/[email]/route.ts
index 22b8060d..d3301254 100644
--- a/app/api/users/email/[email]/route.ts
+++ b/app/api/users/email/[email]/route.ts
@@ -1,6 +1,6 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { Prisma } from '@prisma/client';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 async function getRandomUser() {
   const user = await prisma.user.findFirstOrThrow({
diff --git a/app/api/users/route.ts b/app/api/users/route.ts
index 2092af13..b8f5ef72 100644
--- a/app/api/users/route.ts
+++ b/app/api/users/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@utils/prisma';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
@@ -16,6 +16,7 @@ export async function GET(request: NextRequest) {
                   select: {
                     name: true,
                     abbreviation: true,
+                    archived: true,
                     colorGroup: {
                       select: { colorCodes: true },
                     },
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 528cfc8b..a74218ac 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,7 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
-import prettier from 'eslint-plugin-prettier';
+import tseslintPlugin from '@typescript-eslint/eslint-plugin';
+import tseslintParser from '@typescript-eslint/parser';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -9,17 +10,11 @@ const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
 });
 
 const eslintConfig = [
   ...compat.config({
     extends: ['next', 'next/core-web-vitals', 'plugin:prettier/recommended'],
-    settings: {
-      plugins: {
-        prettier,
-      },
-    },
     rules: {
       'prettier/prettier': [
         'error',
@@ -31,6 +26,22 @@ const eslintConfig = [
     },
     ignorePatterns: ['.next/'],
   }),
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tseslintParser,
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslintPlugin,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['error'],
+    },
+  },
 ];
 
 export default eslintConfig;
diff --git a/hooks/useAbsences.ts b/hooks/useAbsences.ts
index 6ffa1d3c..ae2cdb85 100644
--- a/hooks/useAbsences.ts
+++ b/hooks/useAbsences.ts
@@ -33,7 +33,7 @@ const convertAbsenceToEvent = (absenceData: AbsenceAPI): EventInput => ({
   absenceId: absenceData.id,
 });
 
-export const useAbsences = () => {
+export const useAbsences = (refetchUserData?: () => void) => {
   const [events, setEvents] = useState<EventInput[]>([]);
   const toast = useToast();
 
@@ -46,6 +46,10 @@ export const useAbsences = () => {
       const data = await res.json();
       const formattedEvents = data.events.map(convertAbsenceToEvent);
       setEvents(formattedEvents);
+
+      if (refetchUserData) {
+        refetchUserData();
+      }
     } catch (error) {
       console.error('Error fetching absences:', error);
       toast({
@@ -57,7 +61,7 @@ export const useAbsences = () => {
         isClosable: true,
       });
     }
-  }, [toast]);
+  }, [refetchUserData, toast]);
 
   useEffect(() => {
     fetchAbsences();
diff --git a/hooks/useChangeManagement.ts b/hooks/useChangeManagement.ts
new file mode 100644
index 00000000..bdf482eb
--- /dev/null
+++ b/hooks/useChangeManagement.ts
@@ -0,0 +1,456 @@
+import { Location, SubjectAPI } from '@utils/types';
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * This hook manages pending changes to system entities using an entity-based tracking approach.
+ * Instead of tracking individual atomic changes, it stores the final state of each modified entity.
+ *
+ * Key features:
+ * - Stores maps of entities (by ID) for subjects, locations, and settings
+ * - Uses negative IDs for new entities
+ * - Represents deleted entities with null values
+ * - Simple update process: just update the entity in the appropriate map
+ * - Generates change display information by comparing original and current entities
+ */
+
+interface UseChangeManagementProps {
+  subjects: SubjectAPI[];
+  locations: Location[];
+  absenceCap: number;
+  onRefresh?: () => void;
+  showToast?: any;
+}
+
+interface UseChangeManagementReturn {
+  pendingEntities: {
+    subjects: Map<number, SubjectAPI | null>;
+    locations: Map<number, Location | null>;
+    settings: { absenceCap?: number };
+  };
+  handleUpdateSubject: (subject: SubjectAPI | null, id?: number) => void;
+  handleUpdateLocation: (location: Location | null, id?: number) => void;
+  handleUpdateAbsenceCap: (absenceCap: number) => void;
+  applyChanges: () => Promise<boolean>;
+  clearChanges: () => void;
+  updatedSubjects: SubjectAPI[];
+  updatedLocations: Location[];
+  updatedAbsenceCap: number;
+}
+
+export const useChangeManagement = ({
+  subjects: initialSubjects,
+  locations: initialLocations,
+  absenceCap: initialAbsenceCap,
+  onRefresh,
+  showToast,
+}: UseChangeManagementProps): UseChangeManagementReturn => {
+  // Store maps of pending entity changes
+  const [pendingSubjects, setPendingSubjects] = useState<
+    Map<number, SubjectAPI | null>
+  >(new Map());
+  const [pendingLocations, setPendingLocations] = useState<
+    Map<number, Location | null>
+  >(new Map());
+  const [pendingSettings, setPendingSettings] = useState<{
+    absenceCap?: number;
+  }>({});
+
+  // Store local computed versions of entities with changes applied
+  const [updatedSubjectsList, setUpdatedSubjectsList] = useState<SubjectAPI[]>([
+    ...initialSubjects,
+  ]);
+  const [updatedLocationsList, setUpdatedLocationsList] = useState<Location[]>([
+    ...initialLocations,
+  ]);
+  const [updatedAbsenceCap, setUpdatedAbsenceCap] =
+    useState<number>(initialAbsenceCap);
+
+  // Generate a unique negative ID for new entities
+  const generateTempId = useCallback(() => {
+    return -Date.now();
+  }, []);
+
+  // Reset local state when props change (e.g. after a refresh)
+  useEffect(() => {
+    setUpdatedSubjectsList([...initialSubjects]);
+    setUpdatedLocationsList([...initialLocations]);
+    setUpdatedAbsenceCap(initialAbsenceCap);
+    // Don't reset the pending changes here to preserve during refresh
+  }, [initialSubjects, initialLocations, initialAbsenceCap]);
+
+  /**
+   * Handle updates to a subject
+   * @param subject The updated subject or null if deleted
+   */
+  const handleUpdateSubject = useCallback(
+    (subject: SubjectAPI | null, id?: number) => {
+      setPendingSubjects((prev) => {
+        const newMap = new Map(prev);
+        if (subject) {
+          // If this is a new subject without an ID, generate a temporary negative ID
+          const subjectId = subject.id || generateTempId();
+
+          // Check if the subject is being reverted to its original state
+          if (subjectId > 0) {
+            // Only check for existing subjects (positive IDs)
+            const originalSubject = initialSubjects.find(
+              (s) => s.id === subjectId
+            );
+            if (
+              originalSubject &&
+              originalSubject.name === subject.name &&
+              originalSubject.abbreviation === subject.abbreviation &&
+              originalSubject.colorGroupId === subject.colorGroupId &&
+              originalSubject.archived === subject.archived
+            ) {
+              // If equal to original, remove from pending changes instead of adding
+              newMap.delete(subjectId);
+              return newMap;
+            }
+          }
+
+          newMap.set(subjectId, { ...subject, id: subjectId });
+        } else if (subject === null && id !== undefined) {
+          // Delete case
+          if (id < 0) {
+            // If deleting a newly added entity (negative ID), remove it from pending changes completely
+            newMap.delete(id);
+          } else {
+            // If deleting an existing entity (positive ID), mark for deletion
+            newMap.set(id, null);
+          }
+        }
+        return newMap;
+      });
+    },
+    [generateTempId, initialSubjects]
+  );
+
+  /**
+   * Handle updates to a location
+   * @param location The updated location or null if deleted
+   */
+  const handleUpdateLocation = useCallback(
+    (location: Location | null, id?: number) => {
+      setPendingLocations((prev) => {
+        const newMap = new Map(prev);
+        if (location) {
+          // If this is a new location without an ID, generate a temporary negative ID
+          const locationId = location.id || generateTempId();
+
+          // Check if the location is being reverted to its original state
+          if (locationId > 0) {
+            // Only check for existing locations (positive IDs)
+            const originalLocation = initialLocations.find(
+              (l) => l.id === locationId
+            );
+            if (
+              originalLocation &&
+              originalLocation.name === location.name &&
+              originalLocation.abbreviation === location.abbreviation &&
+              originalLocation.archived === location.archived
+            ) {
+              // If equal to original, remove from pending changes instead of adding
+              newMap.delete(locationId);
+              return newMap;
+            }
+          }
+
+          newMap.set(locationId, { ...location, id: locationId });
+        } else if (location === null && id !== undefined) {
+          // Delete case
+          if (id < 0) {
+            // If deleting a newly added entity (negative ID), remove it from pending changes completely
+            newMap.delete(id);
+          } else {
+            // If deleting an existing entity (positive ID), mark for deletion
+            newMap.set(id, null);
+          }
+        }
+        return newMap;
+      });
+    },
+    [generateTempId, initialLocations]
+  );
+
+  /**
+   * Handle updates to absence cap setting
+   */
+  const handleUpdateAbsenceCap = useCallback(
+    (newAbsenceCap: number) => {
+      setPendingSettings((prev) => {
+        // If new absence cap equals original, remove it from pending settings
+        if (newAbsenceCap === initialAbsenceCap) {
+          const { ...rest } = prev;
+          return rest;
+        }
+
+        return {
+          ...prev,
+          absenceCap: newAbsenceCap,
+        };
+      });
+    },
+    [initialAbsenceCap]
+  );
+
+  // Update local state based on pending entity changes
+  useEffect(() => {
+    // Process subject changes
+    const newSubjectsList = [...initialSubjects];
+
+    // Add/update pending subjects
+    pendingSubjects.forEach((pendingSubject, id) => {
+      if (pendingSubject === null) {
+        // Remove deleted subjects
+        const index = newSubjectsList.findIndex((s) => s.id === id);
+        if (index !== -1) {
+          newSubjectsList.splice(index, 1);
+        }
+      } else if (id < 0) {
+        // Add new subjects with negative IDs
+        newSubjectsList.push(pendingSubject);
+      } else {
+        // Update existing subjects
+        const index = newSubjectsList.findIndex((s) => s.id === id);
+        if (index !== -1) {
+          newSubjectsList[index] = pendingSubject;
+        }
+      }
+    });
+
+    setUpdatedSubjectsList(newSubjectsList);
+
+    // Process location changes
+    const newLocationsList = [...initialLocations];
+
+    // Add/update pending locations
+    pendingLocations.forEach((pendingLocation, id) => {
+      if (pendingLocation === null) {
+        // Remove deleted locations
+        const index = newLocationsList.findIndex((l) => l.id === id);
+        if (index !== -1) {
+          newLocationsList.splice(index, 1);
+        }
+      } else if (id < 0) {
+        // Add new locations with negative IDs
+        newLocationsList.push(pendingLocation);
+      } else {
+        // Update existing locations
+        const index = newLocationsList.findIndex((l) => l.id === id);
+        if (index !== -1) {
+          newLocationsList[index] = pendingLocation;
+        }
+      }
+    });
+
+    setUpdatedLocationsList(newLocationsList);
+
+    // Process settings changes
+    if (pendingSettings.absenceCap !== undefined) {
+      setUpdatedAbsenceCap(pendingSettings.absenceCap);
+    }
+  }, [
+    pendingSubjects,
+    pendingLocations,
+    pendingSettings,
+    initialSubjects,
+    initialLocations,
+  ]);
+
+  /**
+   * Applies all pending changes to the backend via a single API call
+   * Implements an "all or nothing" approach where either all changes are applied
+   * or none are (transaction-like behavior)
+   */
+  const applyChanges = async (): Promise<boolean> => {
+    let hasChanges =
+      pendingSubjects.size > 0 ||
+      pendingLocations.size > 0 ||
+      Object.keys(pendingSettings).length > 0;
+    if (!hasChanges) return true;
+
+    let success = true;
+    let errorMessage = '';
+
+    try {
+      // Prepare subject changes
+      const subjectChanges = {
+        create: [] as Partial<SubjectAPI>[],
+        update: [] as { id: number; changes: Partial<SubjectAPI> }[],
+        delete: [] as number[],
+      };
+
+      // Process subject changes
+      for (const [id, subject] of Array.from(pendingSubjects.entries())) {
+        if (subject === null) {
+          // Handle deletion
+          subjectChanges.delete.push(id);
+        } else if (id < 0) {
+          // Handle new subject
+          subjectChanges.create.push({
+            name: subject.name,
+            abbreviation: subject.abbreviation,
+            colorGroupId: subject.colorGroupId,
+          });
+        } else {
+          // Handle update
+          const originalSubject = initialSubjects.find((s) => s.id === id);
+          if (!originalSubject) continue;
+
+          const updates: Partial<SubjectAPI> = {};
+          if (subject.name !== originalSubject.name) {
+            updates.name = subject.name;
+          }
+          if (subject.abbreviation !== originalSubject.abbreviation) {
+            updates.abbreviation = subject.abbreviation;
+          }
+          if (subject.archived !== originalSubject.archived) {
+            updates.archived = subject.archived;
+          }
+          if (subject.colorGroupId !== originalSubject.colorGroupId) {
+            updates.colorGroupId = subject.colorGroupId;
+          }
+
+          // Only include if there are actual changes
+          if (Object.keys(updates).length > 0) {
+            subjectChanges.update.push({ id, changes: updates });
+          }
+        }
+      }
+
+      // Prepare location changes
+      const locationChanges = {
+        create: [] as Partial<Location>[],
+        update: [] as { id: number; changes: Partial<Location> }[],
+        delete: [] as number[],
+      };
+
+      // Process location changes
+      for (const [id, location] of Array.from(pendingLocations.entries())) {
+        if (location === null) {
+          // Handle deletion
+          locationChanges.delete.push(id);
+        } else if (id < 0) {
+          // Handle new location
+          locationChanges.create.push({
+            name: location.name,
+            abbreviation: location.abbreviation,
+          });
+        } else {
+          // Handle update
+          const originalLocation = initialLocations.find((l) => l.id === id);
+          if (!originalLocation) continue;
+
+          const updates: Partial<Location> = {};
+          if (location.name !== originalLocation.name) {
+            updates.name = location.name;
+          }
+          if (location.abbreviation !== originalLocation.abbreviation) {
+            updates.abbreviation = location.abbreviation;
+          }
+          if (location.archived !== originalLocation.archived) {
+            updates.archived = location.archived;
+          }
+
+          // Only include if there are actual changes
+          if (Object.keys(updates).length > 0) {
+            locationChanges.update.push({ id, changes: updates });
+          }
+        }
+      }
+
+      // Prepare settings changes
+      const settingsChanges = {
+        absenceCap:
+          pendingSettings.absenceCap !== undefined &&
+          pendingSettings.absenceCap !== initialAbsenceCap
+            ? pendingSettings.absenceCap
+            : undefined,
+      };
+
+      // Send all changes in a single transaction-like request
+      const response = await fetch('/api/system/batch-update', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          subjects: subjectChanges,
+          locations: locationChanges,
+          settings: settingsChanges,
+        }),
+      });
+
+      if (!response.ok) {
+        success = false;
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.error || 'Failed to save changes';
+        } catch {
+          errorMessage = 'Failed to save changes';
+        }
+        console.error('Error applying changes:', errorMessage);
+      } else {
+        // Refresh data after all changes have been applied
+        if (onRefresh) {
+          onRefresh();
+        }
+
+        // Show success toast
+        if (showToast) {
+          showToast({
+            title: 'Changes saved',
+            status: 'success',
+            duration: 3000,
+          });
+        }
+
+        // Clear pending changes after successful application
+        clearChanges();
+      }
+    } catch (error) {
+      console.error('Error applying changes:', error);
+      success = false;
+      errorMessage =
+        error instanceof Error ? error.message : 'Failed to save changes';
+    }
+
+    // Show error toast if there was a problem
+    if (!success && showToast) {
+      showToast({
+        title: 'Error',
+        description: errorMessage || 'Failed to save changes',
+        status: 'error',
+      });
+    }
+
+    return success;
+  };
+
+  /**
+   * Clears all pending changes
+   */
+  const clearChanges = useCallback(() => {
+    setPendingSubjects(new Map());
+    setPendingLocations(new Map());
+    setPendingSettings({});
+  }, []);
+
+  // Bundle all pending entity maps for easier access
+  const pendingEntities = {
+    subjects: pendingSubjects,
+    locations: pendingLocations,
+    settings: pendingSettings,
+  };
+
+  return {
+    pendingEntities,
+    handleUpdateSubject,
+    handleUpdateLocation,
+    handleUpdateAbsenceCap,
+    applyChanges,
+    clearChanges,
+    updatedSubjects: updatedSubjectsList,
+    updatedLocations: updatedLocationsList,
+    updatedAbsenceCap,
+  };
+};
diff --git a/hooks/useUserData.ts b/hooks/useUserData.ts
index 761fd94f..e1a63c2a 100644
--- a/hooks/useUserData.ts
+++ b/hooks/useUserData.ts
@@ -1,13 +1,16 @@
 import { Role, UserData } from '@utils/types';
 import { useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { getSelectedYearAbsences } from '@utils/getSelectedYearAbsences';
 
 interface UseUserDataReturn extends UserData {
   isAuthenticated: boolean;
   isLoading: boolean;
 }
 
-export const useUserData = (): UseUserDataReturn => {
+export const useUserData = (): UseUserDataReturn & {
+  refetchUserData: () => void;
+} => {
   const { data: session, status } = useSession();
   const [fetchedUserData, setFetchedUserData] = useState<null | {
     id: number;
@@ -19,45 +22,54 @@ export const useUserData = (): UseUserDataReturn => {
   }>(null);
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const fetchUser = async () => {
-      if (status === 'authenticated' && session?.user?.id) {
-        try {
-          const res = await fetch(
-            `/api/users/${session.user.id}?getAbsences=true`
-          );
-          if (!res.ok) throw new Error('Failed to fetch user');
-          const user = await res.json();
+  const fetchUser = useCallback(async () => {
+    if (status === 'authenticated' && session?.user?.id) {
+      try {
+        const res = await fetch(
+          `/api/users/${session.user.id}?getAbsences=true`
+        );
+        if (!res.ok) throw new Error('Failed to fetch user');
+        const user = await res.json();
+
+        const today = new Date();
+        const currentYear =
+          today.getMonth() >= 8 ? today.getFullYear() : today.getFullYear() - 1;
+        const selectedYearRange = `${currentYear} - ${currentYear + 1}`;
 
-          setFetchedUserData({
-            id: user.id,
-            name: `${user.firstName} ${user.lastName}`,
-            email: user.email,
-            image: user.profilePicture ?? undefined,
-            role: user.role as Role,
-            usedAbsences: user.absences.length,
-          });
-        } catch (error) {
-          console.error('Failed to fetch user data:', error);
-        } finally {
-          setIsLoading(false);
-        }
-      } else if (status !== 'loading') {
+        setFetchedUserData({
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+          email: user.email,
+          image: user.profilePicture ?? undefined,
+          role: user.role as Role,
+          usedAbsences: getSelectedYearAbsences(
+            user.absences,
+            selectedYearRange
+          ),
+        });
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+      } finally {
         setIsLoading(false);
       }
-    };
+    } else if (status !== 'loading') {
+      setIsLoading(false);
+    }
+  }, [session?.user?.id, status]);
 
+  useEffect(() => {
     fetchUser();
-  }, [status, session?.user?.id]);
+  }, [fetchUser]);
 
   return {
     id: fetchedUserData?.id ?? 0,
     name: fetchedUserData?.name ?? '',
     email: fetchedUserData?.email ?? '',
     image: fetchedUserData?.image,
-    role: fetchedUserData?.role ?? (Role.TEACHER as Role),
+    role: fetchedUserData?.role ?? Role.TEACHER,
     usedAbsences: fetchedUserData?.usedAbsences ?? 0,
     isAuthenticated: status === 'authenticated',
     isLoading,
+    refetchUserData: fetchUser,
   };
 };
diff --git a/hooks/useUserFiltering.ts b/hooks/useUserFiltering.ts
index 80272206..2bba4f2f 100644
--- a/hooks/useUserFiltering.ts
+++ b/hooks/useUserFiltering.ts
@@ -1,31 +1,26 @@
 import { FilterOptions, UserAPI } from '@utils/types';
 import { useMemo } from 'react';
-import { NO_EMAIL_TAGS } from '../src/components/FilterPopup';
+import { NO_EMAIL_TAGS } from '../src/components/dashboard/user_management/FilterPopup';
+
 const useUserFiltering = (
   users: UserAPI[],
   filters: FilterOptions,
   searchTerm: string,
   sortField: string,
-  sortDirection: 'asc' | 'desc'
+  sortDirection: 'asc' | 'desc',
+  getSelectedYearAbsences: (absences?: any[]) => number
 ) => {
   const filteredUsers = useMemo(() => {
-    // We need to know how many tags exist in total
-    const allAvailableTags = new Set<string>();
-    users.forEach((user) => {
-      user.mailingLists?.forEach((list) => {
-        allAvailableTags.add(list.subject.name);
-      });
-    });
-    const totalTagCount = allAvailableTags.size;
-    const areAllTagsDisabled = filters.disabledTags?.length === totalTagCount;
-
     return users.filter((user: UserAPI) => {
       const { role, absencesOperator, absencesValue, disabledTags } = filters;
 
       if (searchTerm) {
         const fullName = `${user.firstName} ${user.lastName}`.toLowerCase();
         const searchLower = searchTerm.toLowerCase();
-        if (!fullName.includes(searchLower)) {
+        if (
+          !fullName.includes(searchLower) &&
+          !user.email.toLowerCase().includes(searchLower)
+        ) {
           return false;
         }
       }
@@ -34,18 +29,18 @@ const useUserFiltering = (
         return false;
       }
 
-      if (absencesValue !== null && absencesValue !== undefined) {
-        const userAbsences = user.absences?.length || 0;
+      const filteredAbsences = getSelectedYearAbsences(user.absences);
 
+      if (absencesValue !== null && absencesValue !== undefined) {
         switch (absencesOperator) {
           case 'greater_than':
-            if (userAbsences <= absencesValue) return false;
+            if (filteredAbsences <= absencesValue) return false;
             break;
           case 'less_than':
-            if (userAbsences >= absencesValue) return false;
+            if (filteredAbsences >= absencesValue) return false;
             break;
           case 'equal_to':
-            if (userAbsences !== absencesValue) return false;
+            if (filteredAbsences !== absencesValue) return false;
             break;
         }
       }
@@ -54,19 +49,17 @@ const useUserFiltering = (
         const userTags =
           user.mailingLists?.map((list) => list.subject.name) || [];
 
-        // Check if user has no subscriptions
         if (userTags.length === 0) {
-          // Only show users with no subscriptions if the "No Email Tags" option is enabled
           return !disabledTags.includes(NO_EMAIL_TAGS);
         }
 
-        // For users with subscriptions, check if they have any enabled tag
+        // Include users who have at least one allowed tag
         return userTags.some((tag) => !disabledTags.includes(tag));
       }
 
       return true;
     });
-  }, [users, filters, searchTerm]);
+  }, [users, filters, searchTerm, getSelectedYearAbsences]);
 
   const sortedUsers = useMemo(() => {
     return [...filteredUsers].sort((a, b) => {
@@ -82,14 +75,16 @@ const useUserFiltering = (
         case 'email':
           return a.email.localeCompare(b.email) * modifier;
         case 'absences':
-          return (a.absences.length - b.absences.length) * modifier;
+          const aCount = getSelectedYearAbsences(a.absences);
+          const bCount = getSelectedYearAbsences(b.absences);
+          return (aCount - bCount) * modifier;
         case 'role':
           return a.role.localeCompare(b.role) * modifier;
         default:
           return 0;
       }
     });
-  }, [filteredUsers, sortField, sortDirection]);
+  }, [filteredUsers, sortField, sortDirection, getSelectedYearAbsences]);
 
   return { sortedUsers };
 };
diff --git a/prisma/seed/seed.ts b/prisma/seed/seed.ts
index 95983c0c..dc3302a8 100644
--- a/prisma/seed/seed.ts
+++ b/prisma/seed/seed.ts
@@ -69,10 +69,10 @@ const main = async () => {
   );
 
   const schools = [
-    { name: 'Lambton Park Community School', abbreviation: 'LP' },
-    { name: 'St Martin de Porres Catholic School', abbreviation: 'SC' },
-    { name: 'Yorkwoods Public School', abbreviation: 'YW' },
-    { name: 'Parkdale Junior Senior Public School', abbreviation: 'PD' },
+    { name: 'Lambton Park Community School', abbreviation: 'Lambton' },
+    { name: 'St Martin de Porres Catholic School', abbreviation: 'St Martin' },
+    { name: 'Yorkwoods Public School', abbreviation: 'Yorkwoods' },
+    { name: 'Parkdale Junior Senior Public School', abbreviation: 'Parkdale' },
     {
       name: 'St Gertrude Elementary School',
       abbreviation: 'SG',
@@ -151,11 +151,20 @@ const main = async () => {
     }))
   );
 
+  const isESTWeekday = (date: Date): boolean => {
+    const weekdayInEST = new Intl.DateTimeFormat('en-US', {
+      timeZone: 'America/New_York',
+      weekday: 'short',
+    }).format(date);
+
+    return !['Sat', 'Sun'].includes(weekdayInEST);
+  };
+
   const generateWeekdayFutureDate = (): Date => {
     let date: Date;
     do {
       date = faker.date.future({ years: 2 });
-    } while (date.getDay() === 0 || date.getDay() === 6);
+    } while (!isESTWeekday(date));
     return date;
   };
 
@@ -163,7 +172,7 @@ const main = async () => {
     let date: Date;
     do {
       date = faker.date.past({ years: 2 });
-    } while (date.getDay() === 0 || date.getDay() === 6);
+    } while (!isESTWeekday(date));
     return date;
   };
 
diff --git a/src/components/CustomToast.tsx b/src/components/CustomToast.tsx
new file mode 100644
index 00000000..1b29341f
--- /dev/null
+++ b/src/components/CustomToast.tsx
@@ -0,0 +1,109 @@
+import {
+  CheckCircleIcon,
+  CloseIcon,
+  InfoIcon,
+  WarningIcon,
+} from '@chakra-ui/icons';
+import { Box, Text, useTheme, useToast } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+const iconMap = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: CloseIcon,
+  info: InfoIcon,
+};
+
+const colorMap = (theme) => ({
+  success: theme.colors.positiveGreen[200],
+  warning: theme.colors.warningOrange[300],
+  error: theme.colors.errorRed[200],
+  info: theme.colors.primaryBlue[300],
+});
+
+interface CustomToastProps {
+  title?: string;
+  description?: string | ReactNode;
+  status?: 'success' | 'warning' | 'error' | 'info';
+}
+
+export const CustomToast: React.FC<CustomToastProps> = ({
+  title,
+  description,
+  status = 'info',
+}) => {
+  const theme = useTheme();
+  const Icon = iconMap[status] || InfoIcon;
+  const color = colorMap(theme)[status];
+
+  return (
+    <Box
+      bg="white"
+      width="360px"
+      border="1px solid"
+      borderColor={color}
+      borderRadius="md"
+      px={3}
+      py={3}
+      display="flex"
+      alignItems="center"
+      boxShadow="md"
+    >
+      <Box mr={3} display="flex" alignItems="center">
+        <Icon boxSize="30px" color={color} />
+      </Box>
+      <Box>
+        {title && (
+          <Text fontWeight="bold" fontSize="14px" mb="2px" color="black">
+            {title}
+          </Text>
+        )}
+        {description &&
+          (typeof description === 'string' ? (
+            <Text fontSize="14px" color="black">
+              {description}
+            </Text>
+          ) : (
+            <Box fontSize="14px" color="black">
+              {description}
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+};
+
+const allowedStatuses = ['success', 'warning', 'error', 'info'] as const;
+type ToastStatus = (typeof allowedStatuses)[number];
+
+function isToastStatus(value: any): value is ToastStatus {
+  return allowedStatuses.includes(value);
+}
+
+export const useCustomToast = () => {
+  const toast = useToast();
+
+  return ({
+    title,
+    description,
+    status = 'info',
+  }: {
+    title?: string;
+    description?: string | ReactNode;
+    status?: string;
+  }) => {
+    const safeStatus: ToastStatus = isToastStatus(status) ? status : 'info';
+
+    toast({
+      isClosable: true,
+      position: 'bottom-left',
+      render: () => (
+        <CustomToast
+          title={title}
+          description={description}
+          status={safeStatus}
+        />
+      ),
+    });
+  };
+};
diff --git a/src/components/EditableRoleCell.tsx b/src/components/EditableRoleCell.tsx
deleted file mode 100644
index 115e27cb..00000000
--- a/src/components/EditableRoleCell.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Box, Button, Icon, Text, useTheme } from '@chakra-ui/react';
-import React, { useState } from 'react';
-import { FiChevronDown, FiChevronUp, FiEdit2 } from 'react-icons/fi';
-import { IoCheckmark, IoCloseOutline } from 'react-icons/io5';
-
-type EditableRoleCellProps = {
-  role: string;
-  onRoleChange: (newRole: string) => void;
-};
-
-const EditableRoleCell = ({ role, onRoleChange }: EditableRoleCellProps) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [newRole, setNewRole] = useState(role);
-  const [isHovered, setIsHovered] = useState(false);
-  const theme = useTheme();
-
-  const handleEditClick = () => {
-    setIsEditing(true);
-    setIsDropdownOpen(false);
-    setIsHovered(false);
-  };
-
-  const toggleDropdown = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsDropdownOpen((prev) => !prev);
-  };
-
-  const handleRoleChange = (selectedRole: string) => {
-    setNewRole(selectedRole);
-    setIsDropdownOpen(false);
-  };
-
-  const handleConfirmClick = () => {
-    onRoleChange(newRole);
-    setIsEditing(false);
-  };
-
-  const handleCancelClick = () => {
-    setNewRole(role);
-    setIsEditing(false);
-    setIsHovered(false);
-    setIsDropdownOpen(false);
-  };
-
-  const oppositeRole = newRole === 'TEACHER' ? 'ADMIN' : 'TEACHER';
-
-  return (
-    <Box
-      position="relative"
-      display="inline-flex"
-      alignItems="center"
-      onMouseEnter={() => !isEditing && setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        cursor="pointer"
-        onClick={handleEditClick}
-        bg={isEditing ? 'primaryBlue.50' : 'transparent'}
-        p={2}
-        borderRadius="md"
-        width="100px"
-      >
-        <Text textStyle="cellBody" flexGrow={1}>
-          {newRole === 'TEACHER' ? 'Teacher' : 'Admin'}
-        </Text>
-
-        <Box display="flex" alignItems="center">
-          {isEditing ? (
-            <Icon
-              as={isDropdownOpen ? FiChevronUp : FiChevronDown}
-              color="neutralGray.600"
-              onClick={toggleDropdown}
-            />
-          ) : (
-            isHovered && <Icon as={FiEdit2} color="neutralGray.600" />
-          )}
-        </Box>
-      </Box>
-
-      {isDropdownOpen && (
-        <Box
-          position="absolute"
-          top="38px"
-          left="0"
-          bg="white"
-          border="1px solid"
-          borderColor="neutralGray.300"
-          borderRadius="md"
-          shadow="md"
-          zIndex="10"
-          width="100px"
-        >
-          <Box
-            p={2}
-            cursor="pointer"
-            borderRadius="md"
-            _hover={{ bg: 'primaryBlue.50' }}
-            onClick={() => handleRoleChange(oppositeRole)}
-          >
-            <Text textStyle="cellBody" flexGrow={1}>
-              {oppositeRole === 'TEACHER' ? 'Teacher' : 'Admin'}
-            </Text>
-          </Box>
-        </Box>
-      )}
-
-      {isEditing && newRole !== role && (
-        <Button
-          variant="outline"
-          onClick={handleConfirmClick}
-          position="absolute"
-          right={'-70px'}
-          size="sm"
-          borderRadius="md"
-          p={0}
-        >
-          <IoCheckmark size={20} color={theme.colors.neutralGray[600]} />
-        </Button>
-      )}
-
-      {isEditing && (
-        <Button
-          variant="outline"
-          onClick={handleCancelClick}
-          position="absolute"
-          right={'-35px'}
-          size="sm"
-          borderRadius="md"
-          p={0}
-        >
-          <IoCloseOutline size={20} color={theme.colors.neutralGray[600]} />
-        </Button>
-      )}
-    </Box>
-  );
-};
-
-export default EditableRoleCell;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 6e2c5534..00000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Flex, FlexProps } from '@chakra-ui/react';
-
-export const Footer = (props: FlexProps) => (
-  <Flex as="footer" py="8rem" {...props} />
-);
diff --git a/src/components/InputForm.tsx b/src/components/InputForm.tsx
deleted file mode 100644
index 47d938e5..00000000
--- a/src/components/InputForm.tsx
+++ /dev/null
@@ -1,448 +0,0 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  Textarea,
-  VStack,
-  useDisclosure,
-  useTheme,
-  useToast,
-} from '@chakra-ui/react';
-
-import { Absence, Prisma } from '@prisma/client';
-import { useState } from 'react';
-import { DateOfAbsence } from './DateOfAbsence';
-import { FileUpload } from './FileUpload';
-import { InputDropdown } from './InputDropdown';
-import { SearchDropdown } from './SearchDropdown';
-import { ThemeContext } from '@emotion/react';
-
-interface InputFormProps {
-  onClose?: () => void;
-  onDeclareAbsence: (
-    absence: Prisma.AbsenceCreateManyInput
-  ) => Promise<Absence | null>;
-  userId: number;
-  onTabChange: (tab: 'explore' | 'declared') => void;
-  initialDate: Date;
-  isAdminMode: boolean;
-}
-
-const InputForm: React.FC<InputFormProps> = ({
-  onClose,
-  onDeclareAbsence,
-  userId,
-  onTabChange,
-  initialDate,
-  isAdminMode,
-}) => {
-  const toast = useToast();
-  const { isOpen, onOpen, onClose: closeModal } = useDisclosure();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [formData, setFormData] = useState({
-    reasonOfAbsence: '',
-    absentTeacherId: isAdminMode ? '' : String(userId),
-    substituteTeacherId: '',
-    locationId: '',
-    subjectId: '',
-    roomNumber: '',
-    lessonDate: initialDate.toLocaleDateString('en-CA'),
-    notes: '',
-  });
-  const [lessonPlan, setLessonPlan] = useState<File | null>(null);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const theme = useTheme();
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.absentTeacherId) {
-      newErrors.absentTeacherId = 'Absent teacher ID is required';
-    }
-    if (!formData.locationId) {
-      newErrors.locationId = 'Location ID is required';
-    }
-    if (!formData.subjectId) {
-      newErrors.subjectId = 'Subject ID is required';
-    }
-    if (!formData.reasonOfAbsence) {
-      newErrors.reasonOfAbsence = 'Reason of absence is required';
-    }
-    if (!formData.lessonDate) {
-      newErrors.lessonDate = 'Date is required';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    if (errors[name]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: '',
-      }));
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validateForm()) {
-      toast({
-        title: 'Validation Error',
-        description: 'Please fill in all required fields correctly.',
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-      });
-      return;
-    }
-    onOpen();
-  };
-
-  const handleConfirmSubmit = async () => {
-    closeModal();
-    setIsSubmitting(true);
-
-    try {
-      const lessonDate = new Date(formData.lessonDate + 'T00:00:00');
-
-      let lessonPlanData: { url: string; name: string; size: number } | null =
-        null;
-      if (lessonPlan) {
-        const lessonPlanUrl = await uploadFile(lessonPlan);
-
-        if (lessonPlanUrl === null) {
-          toast({
-            title: 'Error',
-            description: 'Failed to upload the lesson plan file',
-            status: 'error',
-            duration: 5000,
-            isClosable: true,
-          });
-          return;
-        }
-
-        lessonPlanData = {
-          url: lessonPlanUrl,
-          name: lessonPlan.name,
-          size: lessonPlan.size,
-        };
-      }
-
-      const absenceData = {
-        lessonDate: lessonDate,
-        reasonOfAbsence: formData.reasonOfAbsence,
-        absentTeacherId: parseInt(formData.absentTeacherId, 10),
-        substituteTeacherId: formData.substituteTeacherId
-          ? parseInt(formData.substituteTeacherId, 10)
-          : null,
-        locationId: parseInt(formData.locationId, 10),
-        subjectId: parseInt(formData.subjectId, 10),
-        notes: formData.notes,
-        roomNumber: formData.roomNumber || null,
-        lessonPlanFile: lessonPlanData,
-      };
-
-      const response = await onDeclareAbsence(absenceData);
-
-      if (response) {
-        const options: Intl.DateTimeFormatOptions = {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric',
-        };
-        const formattedLessonDate = lessonDate.toLocaleDateString(
-          'en-US',
-          options
-        );
-
-        toast({
-          title: 'Success',
-          description: `You have successfully declared an absence on ${formattedLessonDate}.`,
-          status: 'success',
-          duration: 5000,
-          isClosable: true,
-        });
-
-        if (
-          parseInt(formData.substituteTeacherId, 10) === userId ||
-          parseInt(formData.absentTeacherId, 10) === userId
-        ) {
-          onTabChange('declared');
-        }
-
-        if (onClose) {
-          onClose();
-        }
-      } else {
-        toast({
-          title: 'Error',
-          description: 'Failed to declare absence',
-          status: 'error',
-          duration: 5000,
-          isClosable: true,
-        });
-      }
-    } catch (error) {
-      toast({
-        title: 'Error',
-        description:
-          error instanceof Error ? error.message : 'Failed to declare absence',
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const uploadFile = async (file: File): Promise<string | null> => {
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('fileName', file.name);
-
-    const res = await fetch('/api/uploadFile/', {
-      method: 'POST',
-      body: formData,
-    });
-
-    if (!res.ok) {
-      const data = await res.json();
-      throw new Error(data.message || 'Failed to upload file');
-    }
-
-    const data = await res.json();
-    return `https://drive.google.com/file/d/${data.fileId}/view`;
-  };
-
-  const handleDateSelect = (date: Date) => {
-    setFormData((prev) => ({
-      ...prev,
-      lessonDate: date.toISOString().split('T')[0],
-    }));
-  };
-
-  return (
-    <Box
-      as="form"
-      onSubmit={handleSubmit}
-      sx={{
-        label: { fontSize: '14px', fontWeight: '400' },
-      }}
-    >
-      <VStack sx={{ gap: '24px' }}>
-        {isAdminMode && (
-          <>
-            <FormControl isRequired isInvalid={!!errors.absentTeacherId}>
-              <FormLabel sx={{ display: 'flex' }}>
-                <Text textStyle="h4">Teacher Absent</Text>
-              </FormLabel>
-              <SearchDropdown
-                label="Teacher"
-                type="user"
-                excludedId={formData.substituteTeacherId}
-                onChange={(value) => {
-                  // Handle selected subject
-                  setFormData((prev) => ({
-                    ...prev,
-                    absentTeacherId: value ? String(value.id) : '',
-                  }));
-                  // Clear error when user selects a value
-                  if (errors.absentTeacherId) {
-                    setErrors((prev) => ({
-                      ...prev,
-                      absentTeacherId: '',
-                    }));
-                  }
-                }}
-              />
-              <FormErrorMessage>{errors.absentTeacherId}</FormErrorMessage>
-            </FormControl>
-
-            <FormControl>
-              <FormLabel sx={{ display: 'flex' }}>
-                <Text textStyle="h4">Substitute Teacher</Text>
-              </FormLabel>
-              <SearchDropdown
-                label="Teacher"
-                type="user"
-                excludedId={formData.absentTeacherId}
-                onChange={(value) => {
-                  // Handle selected subject
-                  setFormData((prev) => ({
-                    ...prev,
-                    substituteTeacherId: value ? String(value.id) : '',
-                  }));
-                  // Clear error when user selects a value
-                  if (errors.substituteTeacherId) {
-                    setErrors((prev) => ({
-                      ...prev,
-                      substituteTeacherId: '',
-                    }));
-                  }
-                }}
-              />
-            </FormControl>
-          </>
-        )}
-
-        <FormControl isRequired isInvalid={!!errors.subjectId}>
-          <FormLabel sx={{ display: 'flex' }}>
-            <Text textStyle="h4">Subject</Text>
-          </FormLabel>
-          <InputDropdown
-            label="class type"
-            type="subject"
-            onChange={(value) => {
-              setFormData((prev) => ({
-                ...prev,
-                subjectId: value ? String(value.id) : '',
-              }));
-              if (errors.subjectId) {
-                setErrors((prev) => ({
-                  ...prev,
-                  subjectId: '',
-                }));
-              }
-            }}
-          />
-          <FormErrorMessage>{errors.subjectId}</FormErrorMessage>
-        </FormControl>
-
-        <FormControl isRequired isInvalid={!!errors.locationId}>
-          <FormLabel sx={{ display: 'flex' }}>
-            <Text textStyle="h4">Location</Text>
-          </FormLabel>
-          <InputDropdown
-            label="class location"
-            type="location"
-            onChange={(value) => {
-              setFormData((prev) => ({
-                ...prev,
-                locationId: value ? String(value.id) : '',
-              }));
-              if (errors.locationId) {
-                setErrors((prev) => ({
-                  ...prev,
-                  locationId: '',
-                }));
-              }
-            }}
-          />
-          <FormErrorMessage>{errors.locationId}</FormErrorMessage>
-        </FormControl>
-        <FormControl>
-          <FormLabel sx={{ display: 'flex' }}>
-            <Text textStyle="h4">Room Number</Text>
-          </FormLabel>
-          <Input
-            name="roomNumber"
-            borderColor={theme.colors.outline}
-            placeholder="e.g. 2131"
-            value={formData.roomNumber}
-            onChange={handleChange}
-          />
-        </FormControl>
-        <DateOfAbsence
-          dateValue={initialDate}
-          onDateSelect={handleDateSelect}
-          error={errors.lessonDate}
-        />
-
-        <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
-          <FormLabel sx={{ display: 'flex' }}>
-            <Text textStyle="h4">Reason of Absence</Text>
-          </FormLabel>
-          <Textarea
-            name="reasonOfAbsence"
-            placeholder="Only visible to admin"
-            value={formData.reasonOfAbsence}
-            onChange={handleChange}
-            minH="88px"
-            borderColor={theme.colors.outline}
-          />
-          <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
-        </FormControl>
-
-        <FileUpload lessonPlan={lessonPlan} setLessonPlan={setLessonPlan} />
-
-        <FormControl>
-          <FormLabel sx={{ display: 'flex' }}>
-            <Text textStyle="h4">Notes</Text>
-          </FormLabel>
-          <Textarea
-            name="notes"
-            placeholder="Additional relevant info..."
-            value={formData.notes}
-            onChange={handleChange}
-            minH="88px"
-            borderColor={theme.colors.outline}
-          />
-        </FormControl>
-
-        <Button
-          type="submit"
-          isLoading={isSubmitting}
-          loadingText="Submitting"
-          width="full"
-          height="44px"
-        >
-          Declare Absence
-        </Button>
-      </VStack>
-
-      <Modal isOpen={isOpen} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Confirm Absence</ModalHeader>
-          <ModalBody>
-            <Text>
-              Please confirm your absence on{' '}
-              <strong>
-                {new Date(formData.lessonDate + 'T00:00:00').toLocaleDateString(
-                  'en-CA',
-                  {
-                    weekday: 'long',
-                    month: 'long',
-                    day: 'numeric',
-                  }
-                )}
-              </strong>
-              .
-            </Text>
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={closeModal} mr={3}>
-              Cancel
-            </Button>
-            <Button onClick={handleConfirmSubmit} isLoading={isSubmitting}>
-              Confirm
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Box>
-  );
-};
-
-export default InputForm;
diff --git a/src/components/SistemaLogoColour.tsx b/src/components/TacetLogo.tsx
similarity index 100%
rename from src/components/SistemaLogoColour.tsx
rename to src/components/TacetLogo.tsx
diff --git a/src/components/UserManagementCard.tsx b/src/components/UserManagementCard.tsx
deleted file mode 100644
index d1ef207f..00000000
--- a/src/components/UserManagementCard.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  Box,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { Role, UserAPI } from '@utils/types';
-import { useEffect, useState } from 'react';
-import { UserManagementTable } from './UserManagementTable';
-
-const UserManagementCard = () => {
-  const [users, setUsers] = useState<UserAPI[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [absenceCap, setAbsenceCap] = useState<number>(10);
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [pendingUser, setPendingUser] = useState<UserAPI | null>(null);
-  const [pendingRole, setPendingRole] = useState<Role | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const usersResponse = await fetch(
-          '/api/users?getAbsences=true&getMailingLists=true'
-        );
-        if (!usersResponse.ok) throw new Error('Failed to fetch users');
-        const usersData = await usersResponse.json();
-        setUsers(usersData);
-
-        const settingsResponse = await fetch('/api/settings');
-        if (!settingsResponse.ok) throw new Error('Failed to fetch settings');
-        const settings = await settingsResponse.json();
-        setAbsenceCap(settings.absenceCap);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  const handleConfirmRoleChange = (userId: number, newRole: Role) => {
-    const user = users.find((u) => u.id === userId);
-    if (!user) return;
-
-    setPendingUser(user);
-    setPendingRole(newRole);
-    onOpen();
-  };
-
-  const confirmUpdateUserRole = async () => {
-    if (!pendingUser || !pendingRole) return;
-
-    const apiUrl = `/api/users/${pendingUser.id}`;
-    const originalUsers = [...users];
-
-    setUsers((prevUsers) =>
-      prevUsers.map((user) =>
-        user.id === pendingUser.id ? { ...user, role: pendingRole } : user
-      )
-    );
-
-    try {
-      const response = await fetch(apiUrl, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ role: pendingRole }),
-      });
-
-      if (!response.ok) {
-        setUsers(originalUsers);
-        throw new Error(response.statusText);
-      }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        console.error('Error updating user:', error.message);
-      }
-    } finally {
-      onClose();
-      setPendingUser(null);
-      setPendingRole(null);
-    }
-  };
-
-  return loading ? null : (
-    <Box
-      height="100%"
-      display="flex"
-      flexDirection="column"
-      flex="1"
-      minHeight="0"
-    >
-      <UserManagementTable
-        users={users}
-        updateUserRole={handleConfirmRoleChange}
-        absenceCap={absenceCap}
-      />
-
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Confirm Role Change</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Text>
-              Are you sure you want to change{' '}
-              <strong>
-                {pendingUser?.firstName} {pendingUser?.lastName}
-              </strong>
-              &rsquo;s role to <strong>{pendingRole}</strong>?{' '}
-            </Text>
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={onClose} mr={3}>
-              Cancel
-            </Button>
-            <Button onClick={confirmUpdateUserRole}>Confirm</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Box>
-  );
-};
-
-export default UserManagementCard;
diff --git a/src/components/AbsenceBox.tsx b/src/components/absences/AbsenceBox.tsx
similarity index 86%
rename from src/components/AbsenceBox.tsx
rename to src/components/absences/AbsenceBox.tsx
index 8a8c4fb3..cccda778 100644
--- a/src/components/AbsenceBox.tsx
+++ b/src/components/absences/AbsenceBox.tsx
@@ -48,13 +48,12 @@ const AbsenceBox: React.FC<AbsenceBoxProps> = ({
   return (
     <Box
       sx={{
-        padding: (theme) => `${theme.space[1]} ${theme.space[1]}`,
-        margin: `4px 4px`,
+        padding: '2px 3px 4px 3px',
         borderRadius: (theme) => `${theme.radii.md}`,
         backgroundColor,
         textColor,
-        border: '0.1rem solid',
-        borderLeft: '5px solid',
+        border: '1px solid',
+        borderLeft: '7px solid',
         borderColor,
         position: 'relative',
         opacity,
@@ -70,14 +69,29 @@ const AbsenceBox: React.FC<AbsenceBoxProps> = ({
             color: textColor,
             transform: 'rotate(180deg)',
           }}
+          size={18}
         />
       )}
       <Box className="fc-event-title-container">
-        <Box className="fc-event-title fc-sticky" sx={{ fontWeight: 'bold' }}>
+        <Box
+          className="fc-event-title fc-sticky"
+          sx={{
+            textStyle: 'h3',
+            color: 'inherit',
+            fontSize: '16px !important',
+          }}
+        >
           {title}
         </Box>
       </Box>
-      <Box className="fc-event-title fc-sticky" sx={{ fontSize: 'xs' }}>
+      <Box
+        className="fc-event-title fc-sticky"
+        sx={{
+          textStyle: 'subtitle',
+          color: 'inherit',
+          fontSize: '13px !important',
+        }}
+      >
         {location}
       </Box>
       {highlightText && (
diff --git a/src/components/FileUpload.tsx b/src/components/absences/FileUpload.tsx
similarity index 56%
rename from src/components/FileUpload.tsx
rename to src/components/absences/FileUpload.tsx
index 84e485f7..6729691a 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/absences/FileUpload.tsx
@@ -1,86 +1,88 @@
-import {
-  Box,
-  FormControl,
-  FormLabel,
-  Image,
-  Input,
-  Text,
-  useTheme,
-  useToast,
-} from '@chakra-ui/react';
+import { Box, Image, Input, Text } from '@chakra-ui/react';
+import { LessonPlanFile } from '@utils/types';
 import { useRef, useState } from 'react';
+import { useCustomToast } from '../CustomToast';
 
 interface FileUploadProps {
   lessonPlan: File | null;
-  setLessonPlan: (lessonPlan: File | null) => void;
-  label?: string;
+  setLessonPlan: (file: File | null) => void;
+  existingFile?: LessonPlanFile | null;
+  isDisabled?: boolean;
 }
 
 export const FileUpload: React.FC<FileUploadProps> = ({
   lessonPlan,
   setLessonPlan,
-  label = 'Lesson Plan',
+  existingFile,
+  isDisabled,
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const toast = useToast();
-  const theme = useTheme();
+  const showToast = useCustomToast();
 
   const validateAndSetFile = (file: File) => {
     if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
       setLessonPlan(file);
     } else {
-      toast({
+      showToast({
         title: 'Invalid File Type',
         description: 'Please upload a valid PDF file.',
         status: 'error',
-        duration: 4000,
-        isClosable: true,
       });
     }
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const file = e.target.files[0];
+    if (isDisabled) return;
+
+    const file = e.target.files?.[0];
+    if (file) {
       validateAndSetFile(file);
     }
   };
 
   const handleDragOver = (e: React.DragEvent) => {
+    if (isDisabled) return;
     e.preventDefault();
     setIsDragging(true);
   };
 
   const handleDragLeave = () => {
+    if (isDisabled) return;
     setIsDragging(false);
   };
 
   const handleDrop = (e: React.DragEvent) => {
+    if (isDisabled) return;
     e.preventDefault();
     setIsDragging(false);
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      const file = e.dataTransfer.files[0];
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
       validateAndSetFile(file);
     }
   };
 
   return (
-    <FormControl>
-      <FormLabel>
-        <Text textStyle="h4">{label}</Text>
-      </FormLabel>
-
+    <>
       <Box
         as="label"
-        htmlFor="file-upload"
-        borderStyle="dashed"
-        borderWidth="1.5px"
-        borderColor={isDragging ? 'primaryBlue.300' : theme.colors.outline}
+        htmlFor="fileUpload"
+        border="1px dashed"
+        borderColor={
+          isDisabled
+            ? 'neutralGray.300'
+            : isDragging
+              ? 'primaryBlue.300'
+              : 'outline'
+        }
+        bg={isDisabled ? 'neutralGray.50' : 'transparent'}
+        opacity={isDisabled ? 0.6 : 1}
+        pointerEvents={isDisabled ? 'none' : 'auto'}
         borderRadius="10px"
         p={5}
         textAlign="center"
-        cursor="pointer"
+        cursor={isDisabled ? 'not-allowed' : 'pointer'}
         display="flex"
         flexDirection="column"
         alignItems="center"
@@ -91,18 +93,24 @@ export const FileUpload: React.FC<FileUploadProps> = ({
       >
         <Image src="/images/upload.svg" alt="Upload" width={10} height={10} />
         <Text textStyle="subtitle">
-          {lessonPlan ? `Selected file: ${lessonPlan.name}` : 'Upload PDF'}
+          {lessonPlan
+            ? `Selected file: ${lessonPlan.name}`
+            : existingFile
+              ? `Selected file: ${existingFile.name}`
+              : 'Upload PDF'}
         </Text>
       </Box>
 
       <Input
-        id="file-upload"
+        id="fileUpload"
+        name="fileUpload"
         ref={inputRef}
         type="file"
         onChange={handleFileChange}
         accept="application/pdf"
         display="none"
+        disabled={isDisabled}
       />
-    </FormControl>
+    </>
   );
 };
diff --git a/src/components/AbsenceDetails.tsx b/src/components/absences/details/AbsenceDetails.tsx
similarity index 55%
rename from src/components/AbsenceDetails.tsx
rename to src/components/absences/details/AbsenceDetails.tsx
index 89925cd8..041f004c 100644
--- a/src/components/AbsenceDetails.tsx
+++ b/src/components/absences/details/AbsenceDetails.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Flex,
+  Icon,
   IconButton,
   Modal,
   ModalBody,
@@ -10,28 +11,59 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
   Text,
-  VStack,
   useTheme,
-  useToast,
+  VStack,
 } from '@chakra-ui/react';
 import { useUserData } from '@hooks/useUserData';
-import { Role } from '@utils/types';
+import { formatFullDate } from '@utils/formatDate';
+import { EventDetails, Role } from '@utils/types';
 import { Buildings, Calendar } from 'iconsax-react';
-import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { BiSolidErrorCircle } from 'react-icons/bi';
 import { FiEdit2, FiMapPin, FiTrash2, FiUser } from 'react-icons/fi';
 import { IoEyeOutline } from 'react-icons/io5';
+import { useCustomToast } from '../../CustomToast';
+import EditAbsenceForm from '../modals/edit/EditAbsenceForm';
+import AbsenceFillThanks from './AbsenceFillThanks';
 import AbsenceStatusTag from './AbsenceStatusTag';
+import EditableNotes from './EditableNotes';
 import LessonPlanView from './LessonPlanView';
 
-const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
+interface AbsenceDetailsProps {
+  isOpen: boolean;
+  onClose: () => void;
+  event: EventDetails;
+  onDelete?: (absenceId: number) => void;
+  isAdminMode: boolean;
+  fetchAbsences: () => Promise<void>;
+  hasConflictingEvent: boolean;
+}
+
+const AbsenceDetails: React.FC<AbsenceDetailsProps> = ({
+  isOpen,
+  onClose,
+  event,
+  onDelete,
+  isAdminMode,
+  fetchAbsences,
+  hasConflictingEvent,
+}) => {
   const theme = useTheme();
   const userData = useUserData();
   const [isDeleting, setIsDeleting] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const toast = useToast();
-  const router = useRouter();
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isFilling, setIsFilling] = useState(false);
+  const [isFillDialogOpen, setIsFillDialogOpen] = useState(false);
+  const [isFillThanksOpen, setIsFillThanksOpen] = useState(false);
+
+  const showToast = useCustomToast();
 
   if (!event) return null;
 
@@ -40,6 +72,94 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
   const isUserSubstituteTeacher = userId === event.substituteTeacher?.id;
   const isUserAdmin = userData.role === Role.ADMIN;
 
+  const absenceDate = formatFullDate(event.start!!);
+
+  const handleFillThanksDone = () => {
+    setIsFillThanksOpen(false);
+  };
+
+  const handleFillAbsenceClick = () => {
+    setIsFillDialogOpen(true);
+  };
+
+  const handleFillCancel = () => {
+    setIsFillDialogOpen(false);
+  };
+
+  const handleFillConfirm = async () => {
+    setIsFilling(true);
+
+    try {
+      const response = await fetch('/api/editAbsence', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: event.absenceId,
+          lessonDate: event.start,
+          reasonOfAbsence: event.reasonOfAbsence,
+          notes: event.notes,
+          absentTeacherId: event.absentTeacher.id,
+          substituteTeacherId: userData.id,
+          locationId: event.locationId,
+          subjectId: event.subjectId,
+          roomNumber: event.roomNumber,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fill absence');
+      }
+
+      const formattedDate = formatFullDate(event.start);
+
+      showToast({
+        status: 'success',
+        description: (
+          <Text>
+            You have successfully filled{' '}
+            <Text as="span" fontWeight="bold">
+              {event.absentTeacher.firstName}&apos;s
+            </Text>{' '}
+            absence on{' '}
+            <Text as="span" fontWeight="bold">
+              {formattedDate}.
+            </Text>
+          </Text>
+        ),
+      });
+
+      await fetchAbsences();
+      setIsFillDialogOpen(false);
+      setIsFillThanksOpen(true);
+    } catch {
+      const formattedDate = formatFullDate(event.start);
+
+      showToast({
+        status: 'error',
+        description: (
+          <Text>
+            There was an error in filling{' '}
+            <Text as="span" fontWeight="bold">
+              {event.absentTeacher.firstName}&apos;s
+            </Text>{' '}
+            absence on{' '}
+            <Text as="span" fontWeight="bold">
+              {formattedDate}.
+            </Text>
+          </Text>
+        ),
+      });
+    } finally {
+      setIsFilling(false);
+      onClose();
+    }
+  };
+
+  const handleEditClick = () => {
+    onClose();
+    setIsEditModalOpen(true);
+  };
+
   const handleDeleteClick = () => {
     setIsDeleteDialogOpen(true);
   };
@@ -57,7 +177,7 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          isUserAdmin: isUserAdmin,
+          isUserAdmin,
           absenceId: event.absenceId,
         }),
       });
@@ -66,29 +186,23 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
         throw new Error('Failed to delete absence');
       }
 
-      toast({
-        title: 'Absence deleted',
+      showToast({
         description: 'The absence has been successfully deleted.',
         status: 'success',
-        duration: 5000,
-        isClosable: true,
       });
 
+      await fetchAbsences();
       setIsDeleteDialogOpen(false);
       onClose();
 
       if (onDelete) {
         onDelete(event.absenceId);
-      } else {
-        router.reload();
       }
     } catch (error) {
-      toast({
+      showToast({
         title: 'Error',
         description: error.message || 'Failed to delete absence',
         status: 'error',
-        duration: 5000,
-        isClosable: true,
       });
     } finally {
       setIsDeleting(false);
@@ -105,12 +219,35 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
         >
           <ModalHeader p="0">
             <Flex justify="space-between" align="center" position="relative">
-              <AbsenceStatusTag
-                isUserAbsentTeacher={isUserAbsentTeacher}
-                isUserSubstituteTeacher={isUserSubstituteTeacher}
-                isAdminMode={isAdminMode}
-                substituteTeacherFullName={event.substituteTeacherFullName}
-              />
+              <Flex gap="8px" align="center">
+                <AbsenceStatusTag
+                  isUserAbsentTeacher={isUserAbsentTeacher}
+                  isUserSubstituteTeacher={isUserSubstituteTeacher}
+                  isAdminMode={isAdminMode}
+                />
+                {hasConflictingEvent &&
+                  !event.substituteTeacherFullName &&
+                  !isUserAbsentTeacher &&
+                  !isAdminMode && (
+                    <Popover placement="top" trigger="hover">
+                      <PopoverTrigger>
+                        <Box display="flex" alignItems="center" height="100%">
+                          <Icon
+                            as={BiSolidErrorCircle}
+                            color={theme.colors.errorRed['200']}
+                            boxSize={6}
+                          />
+                        </Box>
+                      </PopoverTrigger>
+                      <PopoverContent bg="white" width="fit-content">
+                        <PopoverArrow />
+                        <PopoverBody textStyle="caption" maxW="190px">
+                          You have already filled an absence on this date.
+                        </PopoverBody>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+              </Flex>
               <Flex position="absolute" right="0">
                 {isAdminMode && (
                   <IconButton
@@ -120,6 +257,7 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                     }
                     size="sm"
                     variant="ghost"
+                    onClick={handleEditClick}
                   />
                 )}
 
@@ -155,13 +293,7 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
               <Flex gap="13px" mt="-8px">
                 <Calendar size="20px" color={theme.colors.primaryBlue[300]} />
                 <Text textStyle="subtitle" color={theme.colors.text.body}>
-                  {event.start
-                    ? new Date(event.start).toLocaleDateString('en-CA', {
-                        weekday: 'long',
-                        month: 'long',
-                        day: 'numeric',
-                      })
-                    : 'N/A'}
+                  {absenceDate}
                 </Text>
               </Flex>
               <Flex gap="13px" mt="-8px">
@@ -187,10 +319,12 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                 </Text>
                 <LessonPlanView
                   lessonPlan={event.lessonPlan}
+                  absenceId={event.absenceId}
                   absentTeacherFirstName={event.absentTeacher.firstName}
                   isUserAbsentTeacher={isUserAbsentTeacher}
                   isUserSubstituteTeacher={isUserSubstituteTeacher}
                   isAdminMode={isAdminMode}
+                  fetchAbsences={fetchAbsences}
                 />
               </Box>
               {(isAdminMode || isUserAbsentTeacher) && (
@@ -211,36 +345,11 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                 </Box>
               )}
               {isUserAbsentTeacher && !isAdminMode && (
-                <Box position="relative">
-                  <Text textStyle="h4" mb="9px">
-                    Notes
-                  </Text>
-                  <Box
-                    fontSize="12px"
-                    sx={{
-                      padding: '15px 15px 33px 15px',
-                      borderRadius: '10px',
-                    }}
-                    background={theme.colors.neutralGray[50]}
-                  >
-                    {event.notes}
-                  </Box>
-
-                  <IconButton
-                    aria-label="Edit Notes"
-                    icon={
-                      <FiEdit2
-                        size="15px"
-                        color={theme.colors.neutralGray[600]}
-                      />
-                    }
-                    size="sm"
-                    variant="ghost"
-                    position="absolute"
-                    bottom="8px"
-                    right="16px"
-                  />
-                </Box>
+                <EditableNotes
+                  notes={event.notes}
+                  absenceId={event.absenceId}
+                  fetchAbsences={fetchAbsences}
+                />
               )}
               {event.notes && (!isUserAbsentTeacher || isAdminMode) && (
                 <Box position="relative">
@@ -277,9 +386,8 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                           </Text>{' '}
                           and{' '}
                           <Text as="span" fontWeight={700}>
-                            {event.substituteTeacher.firstName}
+                            {event.substituteTeacher.firstName}.
                           </Text>
-                          .
                         </Text>
                       </>
                     ) : isUserSubstituteTeacher ? (
@@ -293,16 +401,14 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                           </Text>{' '}
                           and{' '}
                           <Text as="span" fontWeight={700}>
-                            {event.absentTeacher.firstName}
+                            {event.absentTeacher.firstName}.
                           </Text>
-                          .
                         </Text>
                       </>
                     ) : null}
                   </Flex>
                 )}
 
-              {/* Fill Absence Button*/}
               {!event.substituteTeacher &&
                 !isUserAbsentTeacher &&
                 !isAdminMode && (
@@ -311,6 +417,8 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
                     height="44px"
                     fontSize="16px"
                     fontWeight="500"
+                    onClick={handleFillAbsenceClick}
+                    disabled={hasConflictingEvent}
                   >
                     Fill this Absence
                   </Button>
@@ -319,6 +427,60 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
           </ModalBody>
         </ModalContent>
       </Modal>
+      <Modal isOpen={isFillDialogOpen} onClose={handleFillCancel} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          width="300px"
+          padding="25px"
+          sx={{
+            alignItems: 'center',
+          }}
+        >
+          <ModalHeader
+            textStyle="h3"
+            fontSize="16px"
+            padding="0"
+            textAlign="center"
+          >
+            Are you sure you want to fill this absence?
+          </ModalHeader>
+          <ModalBody
+            textStyle="subtitle"
+            color="text"
+            padding="0"
+            mt="12px"
+            mb="16px"
+          >
+            <Text>{"You won't be able to undo."}</Text>
+          </ModalBody>
+          <ModalFooter padding="0">
+            <Button
+              onClick={handleFillCancel}
+              variant="outline"
+              textStyle="button"
+              fontWeight="500"
+              mr="10px"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleFillConfirm}
+              textStyle="button"
+              fontWeight="500"
+              isLoading={isFilling}
+              ml="10px"
+            >
+              Confirm
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <AbsenceFillThanks
+        isOpen={isFillThanksOpen}
+        onClose={handleFillThanksDone}
+        event={event}
+        absenceDate={absenceDate}
+      />
       <Modal
         isOpen={isDeleteDialogOpen}
         onClose={handleDeleteCancel}
@@ -341,6 +503,33 @@ const AbsenceDetails = ({ isOpen, onClose, event, isAdminMode, onDelete }) => {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      {isEditModalOpen && (
+        <Modal
+          isOpen={isEditModalOpen}
+          onClose={() => setIsEditModalOpen(false)}
+          isCentered
+        >
+          <ModalOverlay />
+          <ModalContent
+            width={362}
+            sx={{ padding: '33px 31px' }}
+            borderRadius="16px"
+          >
+            <ModalHeader fontSize={22} p="0 0 28px 0">
+              Edit Absence
+            </ModalHeader>
+            <ModalCloseButton top="33px" right="28px" color="text.header" />
+            <ModalBody p={0}>
+              <EditAbsenceForm
+                initialData={event}
+                isAdminMode={isAdminMode}
+                fetchAbsences={fetchAbsences}
+                onClose={() => setIsEditModalOpen(false)}
+              />
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
     </>
   );
 };
diff --git a/src/components/absences/details/AbsenceFillThanks.tsx b/src/components/absences/details/AbsenceFillThanks.tsx
new file mode 100644
index 00000000..df289324
--- /dev/null
+++ b/src/components/absences/details/AbsenceFillThanks.tsx
@@ -0,0 +1,82 @@
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useTheme,
+} from '@chakra-ui/react';
+import { FiCheckCircle } from 'react-icons/fi';
+
+const AbsenceFillThanks = ({ isOpen, onClose, event, absenceDate }) => {
+  const theme = useTheme();
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        width="319px"
+        padding="25px"
+        sx={{
+          alignItems: 'center',
+        }}
+      >
+        <ModalHeader
+          textStyle="h3"
+          fontSize="16px"
+          padding="0"
+          textAlign="center"
+        >
+          <Flex align="center" justify="center" gap={2}>
+            <FiCheckCircle
+              size="20px"
+              color={theme.colors.positiveGreen[200]}
+            />
+            <Text>Thank you!</Text>
+          </Flex>
+        </ModalHeader>
+
+        <ModalBody
+          textStyle="subtitle"
+          color="text"
+          padding="0"
+          my="30px"
+          textAlign="center"
+        >
+          <Text as="span">You have successfully filled </Text>
+          <Text as="span" fontWeight="bold">
+            {event?.absentTeacher?.firstName + "'s"}
+          </Text>
+          {' absence on '}
+          <Text as="span" fontWeight="bold">
+            {absenceDate}.
+          </Text>
+
+          <Text my="12px">Make sure to review the lesson plan!</Text>
+
+          <Text as="span" fontWeight="bold">
+            Note:
+          </Text>
+          <Text as="span"> Please contact admin for any modifications.</Text>
+        </ModalBody>
+
+        <ModalFooter padding="0" width="full" justifyContent="center">
+          <Button
+            onClick={onClose}
+            textStyle="button"
+            fontWeight="500"
+            width="235px"
+          >
+            Got it!
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AbsenceFillThanks;
diff --git a/src/components/AbsenceStatusTag.tsx b/src/components/absences/details/AbsenceStatusTag.tsx
similarity index 100%
rename from src/components/AbsenceStatusTag.tsx
rename to src/components/absences/details/AbsenceStatusTag.tsx
diff --git a/src/components/absences/details/EditableNotes.tsx b/src/components/absences/details/EditableNotes.tsx
new file mode 100644
index 00000000..d2ea2ed7
--- /dev/null
+++ b/src/components/absences/details/EditableNotes.tsx
@@ -0,0 +1,166 @@
+import {
+  Box,
+  Button,
+  HStack,
+  IconButton,
+  Spacer,
+  Text,
+  Textarea,
+  useTheme,
+} from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
+import { FiEdit2 } from 'react-icons/fi';
+import { useCustomToast } from '../../CustomToast';
+
+interface EditableNotesProps {
+  notes: string;
+  absenceId: number;
+  fetchAbsences: () => Promise<void>;
+}
+
+function EditableNotes({
+  notes,
+  absenceId,
+  fetchAbsences,
+}: EditableNotesProps) {
+  const theme = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const [savedNotes, setSavedNotes] = useState(notes);
+  const [tempNotes, setTempNotes] = useState(notes);
+  const [isSaving, setIsSaving] = useState(false);
+  const noteBoxRef = useRef<HTMLDivElement | null>(null);
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [initialHeight, setInitialHeight] = useState<number | undefined>(
+    undefined
+  );
+  const showToast = useCustomToast();
+
+  const emptyNotesSpace = 41;
+  const spaceAfterNotes = 33;
+  const minHeight = emptyNotesSpace + spaceAfterNotes;
+
+  const handleEditClick = () => {
+    const height = noteBoxRef.current?.offsetHeight ?? minHeight;
+    setInitialHeight(Math.max(height, minHeight));
+    setTempNotes(savedNotes);
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setTempNotes(savedNotes);
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+
+    try {
+      const response = await fetch('/api/editAbsence', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: absenceId,
+          notes: tempNotes || null,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to save notes');
+      }
+
+      setSavedNotes(tempNotes);
+      showToast({
+        description: 'Your notes were successfully updated.',
+        status: 'success',
+      });
+
+      setIsEditing(false);
+    } catch (err) {
+      showToast({
+        title: 'Error',
+        description:
+          err instanceof Error ? err.message : 'Failed to save notes',
+        status: 'error',
+      });
+    } finally {
+      setIsSaving(false);
+      fetchAbsences();
+    }
+  };
+
+  useEffect(() => {
+    if (isEditing && textAreaRef.current) {
+      const textLength = textAreaRef.current.value.length;
+      textAreaRef.current.setSelectionRange(textLength, textLength);
+    }
+  }, [isEditing]);
+
+  return (
+    <Box position="relative">
+      <Text textStyle="h4" mb="9px">
+        Notes
+      </Text>
+
+      {isEditing ? (
+        <>
+          <Textarea
+            ref={textAreaRef}
+            value={tempNotes}
+            onChange={(e) => setTempNotes(e.target.value)}
+            fontSize="12px"
+            borderColor={theme.colors.primaryBlue[300]}
+            borderRadius="10px"
+            padding="15px"
+            minH={`${initialHeight}px`}
+          />
+          <HStack mt="20px" mb="9px">
+            <Button
+              width="143px"
+              height="35.174px"
+              fontSize="16px"
+              fontWeight="500"
+              variant="outline"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>
+            <Spacer />
+            <Button
+              width="143px"
+              height="35.174px"
+              fontSize="16px"
+              fontWeight="500"
+              onClick={handleSave}
+              isLoading={isSaving}
+              loadingText="Saving"
+            >
+              Save Changes
+            </Button>
+          </HStack>
+        </>
+      ) : (
+        <Box
+          ref={noteBoxRef}
+          fontSize="12px"
+          padding="15px 15px 33px 15px"
+          borderRadius="10px"
+          background={theme.colors.neutralGray[50]}
+        >
+          {savedNotes || ''}
+          <IconButton
+            aria-label="Edit Notes"
+            icon={<FiEdit2 size="15px" color={theme.colors.neutralGray[600]} />}
+            size="sm"
+            variant="ghost"
+            position="absolute"
+            bottom="8px"
+            right="16px"
+            onClick={handleEditClick}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default EditableNotes;
diff --git a/src/components/LessonPlanView.tsx b/src/components/absences/details/LessonPlanView.tsx
similarity index 53%
rename from src/components/LessonPlanView.tsx
rename to src/components/absences/details/LessonPlanView.tsx
index b7d6c6e8..840eaff8 100644
--- a/src/components/LessonPlanView.tsx
+++ b/src/components/absences/details/LessonPlanView.tsx
@@ -3,11 +3,17 @@ import {
   Flex,
   IconButton,
   Image,
+  Input,
   Link,
   Text,
   useTheme,
 } from '@chakra-ui/react';
+import { LessonPlanFile } from '@utils/types';
+import { uploadFile } from '@utils/uploadFile';
+import { useEffect, useRef, useState } from 'react';
 import { FiFileText } from 'react-icons/fi';
+import { useCustomToast } from '../../CustomToast';
+import { FileUpload } from '../FileUpload';
 
 const formatFileSize = (sizeInBytes: number) => {
   if (sizeInBytes === 0) return '0 B';
@@ -30,14 +36,11 @@ const LessonPlanDisplay = ({
   fileSize,
   isUserAbsentTeacher,
   isAdminMode,
+  onSwap,
+  isDisabled,
 }) => {
   const theme = useTheme();
 
-  const handleSwap = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
   return (
     <Link href={href} isExternal width="100%">
       <Flex
@@ -79,7 +82,8 @@ const LessonPlanDisplay = ({
             }
             size="sm"
             variant="ghost"
-            onClick={handleSwap}
+            onClick={onSwap}
+            isDisabled={isDisabled}
           />
         )}
       </Flex>
@@ -124,38 +128,121 @@ const NoLessonPlanViewingDisplay = ({
   );
 };
 
-const NoLessonPlanDeclaredDisplay = () => {
-  const theme = useTheme();
-
-  return (
-    <Flex width="100%">
-      <Text
-        fontSize={theme.textStyles.body.fontSize}
-        color={theme.colors.neutralGray[500]}
-      >
-        Upload PDF component
-      </Text>
-    </Flex>
-  );
-};
-
 const LessonPlanView = ({
   lessonPlan,
   absentTeacherFirstName,
   isUserAbsentTeacher,
   isUserSubstituteTeacher,
   isAdminMode,
+  absenceId,
+  fetchAbsences,
 }) => {
-  return lessonPlan ? (
-    <LessonPlanDisplay
-      href={lessonPlan.url}
-      fileName={lessonPlan.name}
-      fileSize={lessonPlan.size}
-      isUserAbsentTeacher={isUserAbsentTeacher}
-      isAdminMode={isAdminMode}
-    />
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const showToast = useCustomToast();
+  const [isUploading, setIsUploading] = useState(false);
+  const [localLessonPlan, setLocalLessonPlan] = useState<LessonPlanFile | null>(
+    lessonPlan
+  );
+
+  useEffect(() => {
+    setLocalLessonPlan(lessonPlan);
+  }, [lessonPlan]);
+
+  const handleSwap = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = async (file: File) => {
+    if (!file || file.type !== 'application/pdf') return;
+
+    setIsUploading(true);
+
+    const fileUrl = await uploadFile(file);
+    if (!fileUrl) {
+      showToast({
+        title: 'Upload Failed',
+        description: 'Could not upload the lesson plan file.',
+        status: 'error',
+      });
+
+      setIsUploading(false);
+      return;
+    }
+
+    const res = await fetch('/api/editAbsence', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        id: absenceId,
+        lessonPlanFile: {
+          name: file.name,
+          size: file.size,
+          url: fileUrl,
+        },
+      }),
+    });
+
+    if (res.ok) {
+      const updatedPlan: LessonPlanFile = {
+        id: -1,
+        name: file.name,
+        size: file.size,
+        url: fileUrl,
+      };
+
+      setLocalLessonPlan(updatedPlan);
+
+      showToast({
+        title: 'Lesson Plan Updated',
+        description: 'Your lesson plan was successfully swapped.',
+        status: 'success',
+      });
+
+      await fetchAbsences?.();
+    } else {
+      showToast({
+        title: 'Update Failed',
+        description: 'There was a problem updating the lesson plan.',
+        status: 'error',
+      });
+    }
+
+    setIsUploading(false);
+  };
+
+  return localLessonPlan ? (
+    <>
+      <LessonPlanDisplay
+        href={localLessonPlan.url}
+        fileName={localLessonPlan.name}
+        fileSize={localLessonPlan.size}
+        isUserAbsentTeacher={isUserAbsentTeacher}
+        isAdminMode={isAdminMode}
+        onSwap={handleSwap}
+        isDisabled={isUploading}
+      />
+      <Input
+        type="file"
+        ref={fileInputRef}
+        display="none"
+        accept="application/pdf"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            handleFileUpload(file);
+          }
+        }}
+      />
+    </>
   ) : isUserAbsentTeacher && !isAdminMode ? (
-    <NoLessonPlanDeclaredDisplay />
+    <FileUpload
+      lessonPlan={null}
+      setLessonPlan={handleFileUpload}
+      existingFile={null}
+      isDisabled={isUploading}
+    />
   ) : (
     <NoLessonPlanViewingDisplay
       absentTeacherFirstName={absentTeacherFirstName}
diff --git a/src/components/absences/modals/AdminTeacherFields.tsx b/src/components/absences/modals/AdminTeacherFields.tsx
new file mode 100644
index 00000000..628fc872
--- /dev/null
+++ b/src/components/absences/modals/AdminTeacherFields.tsx
@@ -0,0 +1,85 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Text,
+} from '@chakra-ui/react';
+import { SearchDropdown } from './SearchDropdown';
+
+interface AdminTeacherFieldsProps {
+  formData: {
+    absentTeacherId: string;
+    substituteTeacherId: string;
+  };
+  errors: Record<string, string>;
+  setFormData: React.Dispatch<
+    React.SetStateAction<{
+      absentTeacherId: string;
+      substituteTeacherId: string;
+      [key: string]: string;
+    }>
+  >;
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+
+export const AdminTeacherFields: React.FC<AdminTeacherFieldsProps> = ({
+  formData,
+  errors,
+  setFormData,
+  setErrors,
+}) => {
+  return (
+    <>
+      <FormControl isRequired isInvalid={!!errors.absentTeacherId}>
+        <FormLabel htmlFor="absentTeacher" sx={{ display: 'flex' }}>
+          <Text textStyle="h4">Teacher Absent</Text>
+        </FormLabel>
+        <SearchDropdown
+          id="absentTeacher"
+          excludedId={formData.substituteTeacherId}
+          defaultValueId={Number(formData.absentTeacherId)}
+          onChange={(value) => {
+            setFormData((prev) => ({
+              ...prev,
+              absentTeacherId: value ? String(value.id) : '',
+            }));
+            if (errors.absentTeacherId) {
+              setErrors((prev) => ({
+                ...prev,
+                absentTeacherId: '',
+              }));
+            }
+          }}
+        />
+        <FormErrorMessage>{errors.absentTeacherId}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl>
+        <FormLabel htmlFor="substituteTeacher" sx={{ display: 'flex' }}>
+          <Text textStyle="h4">Substitute Teacher</Text>
+        </FormLabel>
+        <SearchDropdown
+          id="substituteTeacher"
+          excludedId={formData.absentTeacherId}
+          defaultValueId={
+            formData.substituteTeacherId
+              ? Number(formData.substituteTeacherId)
+              : undefined
+          }
+          onChange={(value) => {
+            setFormData((prev) => ({
+              ...prev,
+              substituteTeacherId: value ? String(value.id) : '',
+            }));
+            if (errors.substituteTeacherId) {
+              setErrors((prev) => ({
+                ...prev,
+                substituteTeacherId: '',
+              }));
+            }
+          }}
+        />
+      </FormControl>
+    </>
+  );
+};
diff --git a/src/components/DateOfAbsence.tsx b/src/components/absences/modals/DateOfAbsence.tsx
similarity index 92%
rename from src/components/DateOfAbsence.tsx
rename to src/components/absences/modals/DateOfAbsence.tsx
index a4f62c11..a8de0791 100644
--- a/src/components/DateOfAbsence.tsx
+++ b/src/components/absences/modals/DateOfAbsence.tsx
@@ -8,10 +8,9 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text,
-  useTheme,
 } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useState } from 'react';
-import MiniCalendar from './MiniCalendar';
+import { useCallback, useEffect, useState } from 'react';
+import MiniCalendar from '../../calendar/MiniCalendar';
 
 interface DateOfAbsenceProps {
   dateValue: Date;
@@ -32,7 +31,6 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
     dateValue ? dateValue.toLocaleDateString('en-CA') : ''
   );
   const [isOpen, setIsOpen] = useState(false);
-  const theme = useTheme();
 
   useEffect(() => {
     if (dateValue) {
@@ -85,7 +83,6 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
               pattern={DATE_PATTERN}
               title="Enter date in YYYY-MM-DD format"
               autoComplete="off"
-              borderColor={theme.colors.outline}
             />
           </Box>
         </PopoverTrigger>
diff --git a/src/components/InputDropdown.tsx b/src/components/absences/modals/InputDropdown.tsx
similarity index 86%
rename from src/components/InputDropdown.tsx
rename to src/components/absences/modals/InputDropdown.tsx
index 4b9f51f0..1abec4d1 100644
--- a/src/components/InputDropdown.tsx
+++ b/src/components/absences/modals/InputDropdown.tsx
@@ -10,9 +10,8 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text,
-  useTheme,
 } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 
 export type Option = { name: string; id: number };
@@ -21,18 +20,19 @@ interface InputDropdownProps {
   label: string;
   type: 'location' | 'subject';
   onChange: (value: Option | null) => void;
+  defaultValueId?: number;
 }
 
 export const InputDropdown: React.FC<InputDropdownProps> = ({
   label,
   type,
   onChange,
+  defaultValueId,
 }) => {
   const [options, setOptions] = useState<Option[]>([]);
   const [selectedOption, setSelectedOption] = useState<Option | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const theme = useTheme();
 
   const fetchData = useCallback(async () => {
     try {
@@ -52,6 +52,16 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
     fetchData();
   }, [fetchData]);
 
+  useEffect(() => {
+    if (options.length > 0 && defaultValueId) {
+      const match = options.find((opt) => opt.id === defaultValueId);
+      if (match) {
+        setSelectedOption(match);
+        onChange(match);
+      }
+    }
+  }, [options, defaultValueId, onChange]);
+
   const handleOptionSelect = (option: Option) => {
     setSelectedOption(option);
     onChange(option);
@@ -68,11 +78,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
       onClose={() => setIsOpen(false)}
     >
       <PopoverTrigger>
-        <InputGroup
-          border="1px solid"
-          borderColor={theme.colors.outline}
-          borderRadius="md"
-        >
+        <InputGroup>
           <Input
             ref={inputRef}
             cursor="pointer"
@@ -81,7 +87,6 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
             placeholder={`Please select ${label}`}
             value={selectedOption ? selectedOption.name : ''}
             readOnly
-            border="none"
             _focusVisible={{ outline: 'none' }}
           />
           <InputRightElement pointerEvents="none">
@@ -101,7 +106,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
         <PopoverArrow />
         <PopoverBody p={0}>
           {options.map((option, index) => (
-            <React.Fragment key={option.id}>
+            <Fragment key={option.id}>
               <Box
                 onClick={() => handleOptionSelect(option)}
                 sx={{
@@ -120,7 +125,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
               {index < options.length - 1 && (
                 <Divider borderColor="neutralGray.300" opacity={1} />
               )}
-            </React.Fragment>
+            </Fragment>
           ))}
         </PopoverBody>
       </PopoverContent>
diff --git a/src/components/SearchDropdown.tsx b/src/components/absences/modals/SearchDropdown.tsx
similarity index 66%
rename from src/components/SearchDropdown.tsx
rename to src/components/absences/modals/SearchDropdown.tsx
index 75542990..72aacd6f 100644
--- a/src/components/SearchDropdown.tsx
+++ b/src/components/absences/modals/SearchDropdown.tsx
@@ -1,8 +1,8 @@
 import {
   Avatar,
   Box,
-  Divider,
   CloseButton,
+  Divider,
   Input,
   InputGroup,
   InputLeftElement,
@@ -14,21 +14,21 @@ import {
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 
 export type Option = { name: string; id: number; profilePicture: string };
 
 interface SearchDropdownProps {
-  label: string;
-  type: 'user';
+  id: string;
   excludedId?: string;
+  defaultValueId?: number;
   onChange: (value: Option | null) => void;
 }
 
 export const SearchDropdown: React.FC<SearchDropdownProps> = ({
-  label,
-  type,
+  id,
   excludedId,
+  defaultValueId,
   onChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option | null>(null);
@@ -46,23 +46,33 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
       if (res.ok) {
         const data = await res.json();
 
-        if (type === 'user') {
-          const sortedOptions = data.userOptions.sort((a: Option, b: Option) =>
-            a.name.localeCompare(b.name)
-          );
-          setOptions(sortedOptions);
-          setFilteredOptions(sortedOptions);
-        }
+        const sortedOptions = data.userOptions.sort((a: Option, b: Option) =>
+          a.name.localeCompare(b.name)
+        );
+        setOptions(sortedOptions);
+        setFilteredOptions(sortedOptions);
       }
     } catch (error) {
-      console.error(`Failed to fetch ${type} options:`, error);
+      console.error(`Failed to fetch options:`, error);
     }
-  }, [type]);
+  }, []);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
+  useEffect(() => {
+    if (defaultValueId && options.length > 0) {
+      const match = options.find((opt) => opt.id === defaultValueId);
+      if (match) {
+        setSelectedOption(match);
+        setSearchQuery(match.name);
+        setIsSelected(true);
+        onChange(match);
+      }
+    }
+  }, [defaultValueId, options, onChange]);
+
   const handleSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value;
@@ -114,51 +124,49 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
         placement="bottom-start"
         autoFocus={false}
       >
-        {isSelected ? (
-          <InputGroup
-            border="1px solid"
-            borderColor="neutralGray.300"
-            borderRadius="md"
-          >
-            <InputLeftElement>
-              <Avatar
-                name={selectedOption?.name || searchQuery}
-                src={selectedOption?.profilePicture}
-                size="sm"
-                p="4px"
-              />
-            </InputLeftElement>
+        <PopoverTrigger>
+          <InputGroup>
+            {isSelected && (
+              <InputLeftElement>
+                <Avatar
+                  name={selectedOption?.name || searchQuery}
+                  src={selectedOption?.profilePicture}
+                  size="sm"
+                  p="4px"
+                  loading="eager"
+                  ignoreFallback
+                />
+              </InputLeftElement>
+            )}
             <Input
+              id={id}
+              name={id}
               ref={inputRef}
               value={searchQuery}
-              isReadOnly
-              cursor="default"
-              fontWeight="600"
-              border="none"
-              _focusVisible={{ outline: 'none' }}
+              onChange={isSelected ? undefined : handleSearchChange}
+              onClick={() => {
+                if (!isSelected) {
+                  handleSearchChange({
+                    target: { value: searchQuery },
+                  } as React.ChangeEvent<HTMLInputElement>);
+                }
+              }}
+              isReadOnly={isSelected}
+              cursor={isSelected ? 'default' : undefined}
+              fontWeight={isSelected ? '600' : undefined}
+              placeholder={isSelected ? undefined : 'Search for Teacher'}
+              _focusVisible={isSelected ? { outline: 'none' } : undefined}
             />
-            <InputRightElement>
-              <CloseButton
-                onClick={handleClearSelection}
-                color="neutralGray.600"
-              />
-            </InputRightElement>
+            {isSelected && (
+              <InputRightElement>
+                <CloseButton
+                  onClick={handleClearSelection}
+                  color="neutralGray.600"
+                />
+              </InputRightElement>
+            )}
           </InputGroup>
-        ) : (
-          <PopoverTrigger>
-            <Input
-              ref={inputRef}
-              value={searchQuery}
-              onChange={handleSearchChange}
-              onClick={() =>
-                handleSearchChange({
-                  target: { value: searchQuery },
-                } as React.ChangeEvent<HTMLInputElement>)
-              }
-              placeholder={`Search for ${label}`}
-            />
-          </PopoverTrigger>
-        )}
+        </PopoverTrigger>
 
         <PopoverContent
           width="300px"
@@ -171,7 +179,7 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
           <VStack align="stretch" spacing={0}>
             {filteredOptions.length > 0 ? (
               filteredOptions.map((option, index) => (
-                <React.Fragment key={option.id}>
+                <Fragment key={option.id}>
                   <Box
                     sx={{
                       borderRadius:
@@ -198,13 +206,15 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
                       size="sm"
                       m="4px"
                       p="4px"
+                      loading="eager"
+                      ignoreFallback
                     />
                     <Text textStyle="subtitle">{option.name}</Text>
                   </Box>
                   {index < filteredOptions.length - 1 && (
                     <Divider borderColor="neutralGray.300" opacity={1} />
                   )}
-                </React.Fragment>
+                </Fragment>
               ))
             ) : (
               <Box p="6px" m="6px">
diff --git a/src/components/absences/modals/declare/ConfirmDeclareModal.tsx b/src/components/absences/modals/declare/ConfirmDeclareModal.tsx
new file mode 100644
index 00000000..c99178cb
--- /dev/null
+++ b/src/components/absences/modals/declare/ConfirmDeclareModal.tsx
@@ -0,0 +1,123 @@
+import { WarningTwoIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useTheme,
+  VStack,
+} from '@chakra-ui/react';
+
+interface ConfirmDeclareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isSubmitting: boolean;
+  lessonDate: string;
+  hasLessonPlan: boolean;
+  isWithin14Days: boolean;
+}
+
+export const ConfirmDeclareModal: React.FC<ConfirmDeclareModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  isSubmitting,
+  lessonDate,
+  hasLessonPlan,
+  isWithin14Days,
+}) => {
+  const theme = useTheme();
+
+  const formattedDate = new Date(lessonDate + 'T00:00:00').toLocaleDateString(
+    'en-CA',
+    {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    }
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent maxW="300px" borderRadius="lg">
+        <ModalHeader textAlign="center" fontSize="16px" pb={0} pt={5}>
+          <Text textStyle="h3">
+            {hasLessonPlan ? 'Confirm Absence' : 'No Lesson Plan Added'}
+          </Text>
+        </ModalHeader>
+        <ModalBody display="flex" justifyContent="center" mb={2}>
+          <Box maxW="224px" w="100%">
+            <VStack align="start" pl={1}>
+              <Text textStyle="subtitle" color="black">
+                {hasLessonPlan ? (
+                  <>
+                    Please confirm your absence on{' '}
+                    <strong>{formattedDate}.</strong>
+                  </>
+                ) : (
+                  <>
+                    Declare absence on <strong>{formattedDate}</strong> without
+                    adding a lesson plan?
+                  </>
+                )}
+              </Text>
+              {isWithin14Days && (
+                <HStack align="center" spacing={3}>
+                  <Icon
+                    as={WarningTwoIcon}
+                    boxSize="20px"
+                    color={theme.colors.warningOrange[300]}
+                  />
+                  <Text
+                    textStyle="body"
+                    color={theme.colors.warningOrange[300]}
+                  >
+                    You are submitting a late report. Please aim to report
+                    absences at least 14 days in advance.
+                  </Text>
+                </HStack>
+              )}
+            </VStack>
+          </Box>
+        </ModalBody>
+
+        <ModalFooter
+          display="flex"
+          justifyContent="center"
+          gap={5}
+          px={0}
+          pt={0}
+        >
+          <Button
+            onClick={onClose}
+            flex="1"
+            maxW="104px"
+            h="40px"
+            variant="outline"
+          >
+            Back
+          </Button>
+          <Button
+            colorScheme="blue"
+            onClick={onConfirm}
+            isLoading={isSubmitting}
+            flex="1"
+            maxW="104px"
+            h="40px"
+          >
+            Confirm
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/src/components/absences/modals/declare/DeclareAbsenceForm.tsx b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
new file mode 100644
index 00000000..23212586
--- /dev/null
+++ b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
@@ -0,0 +1,322 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Text,
+  Textarea,
+  VStack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { Absence, Prisma } from '@prisma/client';
+import { submitAbsence } from '@utils/submitAbsence';
+import { validateAbsenceForm } from '@utils/validateAbsenceForm';
+import { useState } from 'react';
+import { useCustomToast } from '../../../CustomToast';
+import { FileUpload } from '../../FileUpload';
+import { AdminTeacherFields } from '../AdminTeacherFields';
+import { DateOfAbsence } from '../DateOfAbsence';
+import { InputDropdown } from '../InputDropdown';
+import { ConfirmDeclareModal } from './ConfirmDeclareModal';
+
+interface DeclareAbsenceFormProps {
+  onClose?: () => void;
+  userId: number;
+  onTabChange: (tab: 'explore' | 'declared') => void;
+  initialDate: Date;
+  isAdminMode: boolean;
+  fetchAbsences: () => Promise<void>;
+}
+
+const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
+  onClose,
+  userId,
+  onTabChange,
+  initialDate,
+  isAdminMode,
+  fetchAbsences,
+}) => {
+  const showToast = useCustomToast();
+  const { isOpen, onOpen, onClose: closeModal } = useDisclosure();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    reasonOfAbsence: '',
+    absentTeacherId: isAdminMode ? '' : String(userId),
+    substituteTeacherId: '',
+    locationId: '',
+    subjectId: '',
+    roomNumber: '',
+    lessonDate: initialDate.toLocaleDateString('en-CA'),
+    notes: '',
+  });
+  const [lessonPlan, setLessonPlan] = useState<File | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = () => {
+    const newErrors = validateAbsenceForm(formData);
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validateForm()) {
+      showToast({
+        title: 'Validation Error',
+        description: 'Please fill in all required fields correctly.',
+        status: 'error',
+      });
+      return;
+    }
+    onOpen();
+  };
+
+  const handleConfirmSubmit = async () => {
+    closeModal();
+    setIsSubmitting(true);
+
+    try {
+      const result = await submitAbsence({
+        formData,
+        lessonPlan,
+        onDeclareAbsence: handleDeclareAbsence,
+      });
+
+      if (result.success) {
+        showToast({
+          status: 'success',
+          description: (
+            <Text>
+              You have successfully declared an absence on{' '}
+              <Text as="span" fontWeight="bold">
+                {result.message}.
+              </Text>
+            </Text>
+          ),
+        });
+
+        const userIsInvolved =
+          parseInt(formData.substituteTeacherId, 10) === userId ||
+          parseInt(formData.absentTeacherId, 10) === userId;
+
+        if (userIsInvolved) {
+          onTabChange('declared');
+        }
+
+        onClose?.();
+      } else {
+        showToast({
+          title: 'Error',
+          description: result.message,
+          status: 'error',
+        });
+      }
+    } catch (error) {
+      showToast({
+        title: 'Error',
+        description:
+          error instanceof Error ? error.message : 'Failed to declare absence',
+        status: 'error',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeclareAbsence = async (
+    absence: Prisma.AbsenceCreateManyInput
+  ): Promise<Absence | null> => {
+    try {
+      const res = await fetch('/api/declareAbsence', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(absence),
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to add absence: ${res.statusText}`);
+      }
+
+      const addedAbsence = await res.json();
+      await fetchAbsences();
+      return addedAbsence;
+    } catch (error) {
+      console.error('Error adding absence:', error);
+      return null;
+    }
+  };
+
+  const handleDateSelect = (date: Date) => {
+    setFormData((prev) => ({
+      ...prev,
+      lessonDate: date.toISOString().split('T')[0],
+    }));
+  };
+
+  const selectedDate = new Date(formData.lessonDate + 'T00:00:00');
+  const now = new Date();
+  const isWithin14Days =
+    (selectedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24) <= 14;
+
+  return (
+    <Box
+      as="form"
+      onSubmit={handleSubmit}
+      sx={{
+        label: { fontSize: '14px', fontWeight: '400' },
+      }}
+    >
+      <VStack sx={{ gap: '24px' }}>
+        {isAdminMode && (
+          <AdminTeacherFields
+            formData={formData}
+            errors={errors}
+            setFormData={setFormData}
+            setErrors={setErrors}
+          />
+        )}
+
+        <FormControl isRequired isInvalid={!!errors.subjectId}>
+          <FormLabel sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Subject</Text>
+          </FormLabel>
+          <InputDropdown
+            label="subject"
+            type="subject"
+            onChange={(value) => {
+              setFormData((prev) => ({
+                ...prev,
+                subjectId: value ? String(value.id) : '',
+              }));
+              if (errors.subjectId) {
+                setErrors((prev) => ({
+                  ...prev,
+                  subjectId: '',
+                }));
+              }
+            }}
+          />
+          <FormErrorMessage>{errors.subjectId}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isRequired isInvalid={!!errors.locationId}>
+          <FormLabel sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Location</Text>
+          </FormLabel>
+          <InputDropdown
+            label="location"
+            type="location"
+            onChange={(value) => {
+              setFormData((prev) => ({
+                ...prev,
+                locationId: value ? String(value.id) : '',
+              }));
+              if (errors.locationId) {
+                setErrors((prev) => ({
+                  ...prev,
+                  locationId: '',
+                }));
+              }
+            }}
+          />
+          <FormErrorMessage>{errors.locationId}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Room Number</Text>
+          </FormLabel>
+          <Input
+            id="roomNumber"
+            name="roomNumber"
+            placeholder="e.g. 2131"
+            value={formData.roomNumber}
+            onChange={handleChange}
+          />
+        </FormControl>
+        <DateOfAbsence
+          dateValue={initialDate}
+          onDateSelect={handleDateSelect}
+          error={errors.lessonDate}
+        />
+
+        <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
+          <FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Reason of Absence</Text>
+          </FormLabel>
+          <Textarea
+            id="reasonOfAbsence"
+            name="reasonOfAbsence"
+            placeholder="Only visible to admin"
+            value={formData.reasonOfAbsence}
+            onChange={handleChange}
+            minH="88px"
+            borderColor="outline"
+          />
+          <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl>
+          <Text textStyle="h4" mb={2}>
+            Lesson Plan
+          </Text>
+          <FileUpload lessonPlan={lessonPlan} setLessonPlan={setLessonPlan} />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Notes</Text>
+          </FormLabel>
+          <Textarea
+            id="notes"
+            name="notes"
+            placeholder="Visible to everyone"
+            value={formData.notes}
+            onChange={handleChange}
+            minH="88px"
+            borderColor="outline"
+          />
+        </FormControl>
+
+        <Button
+          type="submit"
+          isLoading={isSubmitting}
+          loadingText="Submitting"
+          width="full"
+          height="44px"
+        >
+          Declare Absence
+        </Button>
+      </VStack>
+      <ConfirmDeclareModal
+        isOpen={isOpen}
+        onClose={closeModal}
+        onConfirm={handleConfirmSubmit}
+        isSubmitting={isSubmitting}
+        lessonDate={formData.lessonDate}
+        hasLessonPlan={!!lessonPlan}
+        isWithin14Days={isWithin14Days}
+      />
+    </Box>
+  );
+};
+
+export default DeclareAbsenceForm;
diff --git a/src/components/absences/modals/edit/ConfirmEditModal.tsx b/src/components/absences/modals/edit/ConfirmEditModal.tsx
new file mode 100644
index 00000000..214fee57
--- /dev/null
+++ b/src/components/absences/modals/edit/ConfirmEditModal.tsx
@@ -0,0 +1,48 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from '@chakra-ui/react';
+
+interface ConfirmEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isSubmitting?: boolean;
+}
+
+export const ConfirmEditModal: React.FC<ConfirmEditModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  isSubmitting = false,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Save Changes?</ModalHeader>
+        <ModalBody>
+          <Text>Would you like to save the changes you&apos;ve made?</Text>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={onClose} mr={3}>
+            Back
+          </Button>
+          <Button
+            onClick={onConfirm}
+            isLoading={isSubmitting}
+            colorScheme="blue"
+          >
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/src/components/absences/modals/edit/EditAbsenceForm.tsx b/src/components/absences/modals/edit/EditAbsenceForm.tsx
new file mode 100644
index 00000000..bcecfd4f
--- /dev/null
+++ b/src/components/absences/modals/edit/EditAbsenceForm.tsx
@@ -0,0 +1,325 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Text,
+  Textarea,
+  VStack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { Absence } from '@prisma/client';
+import { formatFullDate } from '@utils/formatDate';
+import { submitAbsence } from '@utils/submitAbsence';
+import { EventDetails } from '@utils/types';
+import { validateAbsenceForm } from '@utils/validateAbsenceForm';
+import { useState } from 'react';
+import { useCustomToast } from '../../../CustomToast';
+import { FileUpload } from '../../FileUpload';
+import { AdminTeacherFields } from '../AdminTeacherFields';
+import { DateOfAbsence } from '../DateOfAbsence';
+import { InputDropdown } from '../InputDropdown';
+import { ConfirmEditModal } from './ConfirmEditModal';
+
+interface EditAbsenceFormProps {
+  onClose?: () => void;
+  initialData: EventDetails;
+  isAdminMode: boolean;
+  fetchAbsences: () => Promise<void>;
+}
+
+const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
+  onClose,
+  initialData,
+  isAdminMode,
+  fetchAbsences,
+}) => {
+  const showToast = useCustomToast();
+  const { isOpen, onOpen, onClose: closeModal } = useDisclosure();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    reasonOfAbsence: initialData.reasonOfAbsence,
+    absentTeacherId: String(initialData.absentTeacher.id),
+    substituteTeacherId: initialData.substituteTeacher
+      ? String(initialData.substituteTeacher.id)
+      : '',
+    locationId: String(initialData.locationId),
+    subjectId: String(initialData.subjectId),
+    roomNumber: initialData.roomNumber || '',
+    lessonDate: initialData.start.toLocaleDateString('en-CA'),
+    notes: initialData.notes || '',
+  });
+
+  const [lessonPlan, setLessonPlan] = useState<File | null>(null);
+  const existingLessonPlan = initialData.lessonPlan || null;
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = () => {
+    const newErrors = validateAbsenceForm(formData);
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      showToast({
+        title: 'Validation Error',
+        description: 'Please fill in all required fields correctly.',
+        status: 'error',
+      });
+      return;
+    }
+
+    onOpen();
+  };
+
+  const handleConfirmSubmit = async () => {
+    closeModal();
+    setIsSubmitting(true);
+
+    try {
+      const formattedDate = formatFullDate(initialData.start);
+
+      const result = await submitAbsence({
+        formData: { ...formData, id: initialData.absenceId },
+        lessonPlan,
+        onEditAbsence: handleEditAbsence,
+      });
+
+      if (result.success) {
+        showToast({
+          status: 'success',
+          description: (
+            <Text>
+              You have successfully edited{' '}
+              <Text as="span" fontWeight="bold">
+                {initialData.absentTeacher.firstName}&apos;s
+              </Text>{' '}
+              absence on{' '}
+              <Text as="span" fontWeight="bold">
+                {formattedDate}.
+              </Text>
+            </Text>
+          ),
+        });
+
+        fetchAbsences();
+        onClose?.();
+      } else {
+        showToast({
+          title: 'Error',
+          description: result.message,
+          status: 'error',
+        });
+      }
+    } catch (error) {
+      showToast({
+        title: 'Error',
+        description:
+          error instanceof Error ? error.message : 'Failed to update absence',
+        status: 'error',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEditAbsence = async (
+    absence: Partial<Absence> & { id: number }
+  ): Promise<boolean> => {
+    try {
+      const res = await fetch('/api/editAbsence', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(absence),
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to update absence: ${res.statusText}`);
+      }
+
+      await fetchAbsences();
+      return true;
+    } catch (error) {
+      console.error('Error editing absence:', error);
+      return false;
+    }
+  };
+
+  const handleDateSelect = (date: Date) => {
+    setFormData((prev) => ({
+      ...prev,
+      lessonDate: date.toISOString().split('T')[0],
+    }));
+  };
+
+  return (
+    <Box
+      as="form"
+      onSubmit={handleSubmit}
+      sx={{
+        label: { fontSize: '14px', fontWeight: '400' },
+      }}
+    >
+      <VStack sx={{ gap: '24px' }}>
+        {isAdminMode && (
+          <AdminTeacherFields
+            formData={formData}
+            errors={errors}
+            setFormData={setFormData}
+            setErrors={setErrors}
+          />
+        )}
+
+        <FormControl isRequired isInvalid={!!errors.subjectId}>
+          <FormLabel sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Subject</Text>
+          </FormLabel>
+          <InputDropdown
+            label="subject"
+            type="subject"
+            onChange={(value) => {
+              setFormData((prev) => ({
+                ...prev,
+                subjectId: value ? String(value.id) : '',
+              }));
+              if (errors.subjectId) {
+                setErrors((prev) => ({
+                  ...prev,
+                  subjectId: '',
+                }));
+              }
+            }}
+            defaultValueId={Number(formData.subjectId)}
+          />
+          <FormErrorMessage>{errors.subjectId}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isRequired isInvalid={!!errors.locationId}>
+          <FormLabel sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Location</Text>
+          </FormLabel>
+          <InputDropdown
+            label="location"
+            type="location"
+            onChange={(value) => {
+              setFormData((prev) => ({
+                ...prev,
+                locationId: value ? String(value.id) : '',
+              }));
+              if (errors.locationId) {
+                setErrors((prev) => ({
+                  ...prev,
+                  locationId: '',
+                }));
+              }
+            }}
+            defaultValueId={Number(formData.locationId)}
+          />
+          <FormErrorMessage>{errors.locationId}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl>
+          <FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Room Number</Text>
+          </FormLabel>
+          <Input
+            id="roomNumber"
+            name="roomNumber"
+            placeholder="e.g. 2131"
+            value={formData.roomNumber}
+            onChange={handleChange}
+          />
+        </FormControl>
+
+        <DateOfAbsence
+          dateValue={initialData.start}
+          onDateSelect={handleDateSelect}
+          error={errors.lessonDate}
+        />
+
+        <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
+          <FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Reason of Absence</Text>
+          </FormLabel>
+          <Textarea
+            id="reasonOfAbsence"
+            name="reasonOfAbsence"
+            placeholder="Only visible to admin"
+            value={formData.reasonOfAbsence}
+            onChange={handleChange}
+            minH="88px"
+            borderColor="outline"
+          />
+          <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl>
+          <Text textStyle="h4" mb={2}>
+            Lesson Plan
+          </Text>
+          <FileUpload
+            lessonPlan={lessonPlan}
+            setLessonPlan={setLessonPlan}
+            existingFile={existingLessonPlan}
+          />
+        </FormControl>
+
+        <FormControl>
+          <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
+            <Text textStyle="h4">Notes</Text>
+          </FormLabel>
+          <Textarea
+            id="notes"
+            name="notes"
+            placeholder="Visible to everyone"
+            value={formData.notes}
+            onChange={handleChange}
+            minH="88px"
+            borderColor="outline"
+          />
+        </FormControl>
+
+        <Button
+          type="submit"
+          isLoading={isSubmitting}
+          loadingText="Updating"
+          width="full"
+          height="44px"
+        >
+          Save Changes
+        </Button>
+      </VStack>
+      <ConfirmEditModal
+        isOpen={isOpen}
+        onClose={closeModal}
+        onConfirm={handleConfirmSubmit}
+        isSubmitting={isSubmitting}
+      />
+    </Box>
+  );
+};
+
+export default EditAbsenceForm;
diff --git a/src/components/CalendarIcon.tsx b/src/components/calendar/CalendarIcon.tsx
similarity index 100%
rename from src/components/CalendarIcon.tsx
rename to src/components/calendar/CalendarIcon.tsx
diff --git a/src/components/CalendarTabs.tsx b/src/components/calendar/CalendarTabs.tsx
similarity index 100%
rename from src/components/CalendarTabs.tsx
rename to src/components/calendar/CalendarTabs.tsx
diff --git a/src/components/MiniCalendar.tsx b/src/components/calendar/MiniCalendar.tsx
similarity index 100%
rename from src/components/MiniCalendar.tsx
rename to src/components/calendar/MiniCalendar.tsx
diff --git a/src/components/AbsenceStatusAccordion.tsx b/src/components/calendar/sidebar/AbsenceStatusAccordion.tsx
similarity index 96%
rename from src/components/AbsenceStatusAccordion.tsx
rename to src/components/calendar/sidebar/AbsenceStatusAccordion.tsx
index 9bdbb50e..4b960d57 100644
--- a/src/components/AbsenceStatusAccordion.tsx
+++ b/src/components/calendar/sidebar/AbsenceStatusAccordion.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from '@chakra-ui/react';
-import { useEffect, useState, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Accordion, { AccordionItem } from './Accordion';
 
 interface AbsenceStatusAccordionProps {
diff --git a/src/components/Accordion.tsx b/src/components/calendar/sidebar/Accordion.tsx
similarity index 100%
rename from src/components/Accordion.tsx
rename to src/components/calendar/sidebar/Accordion.tsx
diff --git a/src/components/ArchivedAccordion.tsx b/src/components/calendar/sidebar/ArchivedAccordion.tsx
similarity index 97%
rename from src/components/ArchivedAccordion.tsx
rename to src/components/calendar/sidebar/ArchivedAccordion.tsx
index 26db9893..a2ee9d84 100644
--- a/src/components/ArchivedAccordion.tsx
+++ b/src/components/calendar/sidebar/ArchivedAccordion.tsx
@@ -5,15 +5,13 @@ import {
   Collapse,
   Flex,
   Icon,
-  Spacer,
   Stack,
   Text,
+  useTheme,
 } from '@chakra-ui/react';
-import { useTheme } from '@chakra-ui/react';
-
-import { useEffect, useState, useCallback } from 'react';
-import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 import type { Location, SubjectAPI } from '@utils/types';
+import { useCallback, useEffect, useState } from 'react';
+import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 
 interface ArchivedAccordionProps {
   setSubjectFilter: (subjectIds: number[]) => void;
@@ -134,7 +132,7 @@ export default function ArchivedAccordion({
                 color={theme.colors.text.subtitle}
                 mb={2}
               >
-                Subject
+                Subjects
               </Text>
               <Stack spacing={2} mt={0} mb={3}>
                 {subjects.map((subject) => (
@@ -184,7 +182,7 @@ export default function ArchivedAccordion({
                 color={theme.colors.text.subtitle}
                 mb={2}
               >
-                Location
+                Locations
               </Text>
               <Stack spacing={2} mt={0}>
                 {locations.map((location) => (
diff --git a/src/components/CalendarSidebar.tsx b/src/components/calendar/sidebar/CalendarSidebar.tsx
similarity index 95%
rename from src/components/CalendarSidebar.tsx
rename to src/components/calendar/sidebar/CalendarSidebar.tsx
index 4ce2eb6c..ba1e9c7e 100644
--- a/src/components/CalendarSidebar.tsx
+++ b/src/components/calendar/sidebar/CalendarSidebar.tsx
@@ -1,12 +1,12 @@
 import { AddIcon } from '@chakra-ui/icons';
 import { Box, Button, Flex, HStack, useTheme } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { TacetLogo } from '../components/SistemaLogoColour';
+import { useCallback, useEffect, useState } from 'react';
+import { TacetLogo } from '../../TacetLogo';
+import MiniCalendar from '../MiniCalendar';
 import AbsenceStatusAccordion from './AbsenceStatusAccordion';
+import ArchivedAccordion from './ArchivedAccordion';
 import LocationAccordion from './LocationAccordion';
-import MiniCalendar from './MiniCalendar';
 import SubjectAccordion from './SubjectAccordion';
-import ArchivedAccordion from './ArchivedAccordion';
 
 interface CalendarSidebarProps {
   setSearchQuery;
@@ -100,6 +100,7 @@ const CalendarSidebar: React.FC<CalendarSidebarProps> = ({
 
   return (
     <Flex
+      minWidth="280px"
       width="280px"
       padding={theme.space[4]}
       flexDirection="column"
diff --git a/src/components/LocationAccordion.tsx b/src/components/calendar/sidebar/LocationAccordion.tsx
similarity index 96%
rename from src/components/LocationAccordion.tsx
rename to src/components/calendar/sidebar/LocationAccordion.tsx
index 780b4e94..6b465452 100644
--- a/src/components/LocationAccordion.tsx
+++ b/src/components/calendar/sidebar/LocationAccordion.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@chakra-ui/react';
 import type { Location } from '@utils/types';
-import { useEffect, useState, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Accordion, { AccordionItem } from './Accordion';
 
 interface LocationAccordionProps {
@@ -77,7 +77,7 @@ export default function LocationAccordion({
 
   return (
     <Accordion
-      title="Location"
+      title="Locations"
       items={accordionItems}
       selectedItems={selectedLocationIds}
       isOpen={isOpen}
diff --git a/src/components/SubjectAccordion.tsx b/src/components/calendar/sidebar/SubjectAccordion.tsx
similarity index 97%
rename from src/components/SubjectAccordion.tsx
rename to src/components/calendar/sidebar/SubjectAccordion.tsx
index 85f84db1..58ec73a9 100644
--- a/src/components/SubjectAccordion.tsx
+++ b/src/components/calendar/sidebar/SubjectAccordion.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@chakra-ui/react';
 import type { SubjectAPI } from '@utils/types';
-import { useEffect, useState, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Accordion, { AccordionItem } from './Accordion';
 
 interface SubjectAccordionProps {
diff --git a/src/components/CircularProgress.tsx b/src/components/dashboard/stats/CircularProgress.tsx
similarity index 100%
rename from src/components/CircularProgress.tsx
rename to src/components/dashboard/stats/CircularProgress.tsx
diff --git a/src/components/CustomTooltip.tsx b/src/components/dashboard/stats/CustomTooltip.tsx
similarity index 100%
rename from src/components/CustomTooltip.tsx
rename to src/components/dashboard/stats/CustomTooltip.tsx
diff --git a/src/components/DualColourBar.tsx b/src/components/dashboard/stats/DualColourBar.tsx
similarity index 100%
rename from src/components/DualColourBar.tsx
rename to src/components/dashboard/stats/DualColourBar.tsx
diff --git a/src/components/MonthlyAbsencesCard.tsx b/src/components/dashboard/stats/MonthlyAbsencesCard.tsx
similarity index 99%
rename from src/components/MonthlyAbsencesCard.tsx
rename to src/components/dashboard/stats/MonthlyAbsencesCard.tsx
index aecc0f29..8fca4238 100644
--- a/src/components/MonthlyAbsencesCard.tsx
+++ b/src/components/dashboard/stats/MonthlyAbsencesCard.tsx
@@ -4,7 +4,6 @@ import {
   CardBody,
   CardHeader,
   Divider,
-  Heading,
   HStack,
   Text,
   useTheme,
diff --git a/src/components/TotalAbsencesCard.tsx b/src/components/dashboard/stats/TotalAbsencesCard.tsx
similarity index 99%
rename from src/components/TotalAbsencesCard.tsx
rename to src/components/dashboard/stats/TotalAbsencesCard.tsx
index 6104469f..d1bfe50d 100644
--- a/src/components/TotalAbsencesCard.tsx
+++ b/src/components/dashboard/stats/TotalAbsencesCard.tsx
@@ -4,7 +4,6 @@ import {
   CardBody,
   CardHeader,
   Divider,
-  Heading,
   HStack,
   Text,
   useTheme,
diff --git a/src/components/dashboard/system_options/EntityTable.tsx b/src/components/dashboard/system_options/EntityTable.tsx
new file mode 100644
index 00000000..330a9c72
--- /dev/null
+++ b/src/components/dashboard/system_options/EntityTable.tsx
@@ -0,0 +1,897 @@
+import {
+  Box,
+  Button,
+  Circle,
+  HStack,
+  Icon,
+  IconButton,
+  Input,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Spacer,
+  Text,
+  Tooltip,
+  useTheme,
+  VStack,
+} from '@chakra-ui/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FiArchive, FiEdit2, FiMapPin, FiTrash2, FiType } from 'react-icons/fi';
+import {
+  IoAdd,
+  IoBookOutline,
+  IoCheckmark,
+  IoCloseOutline,
+  IoEllipsisHorizontal,
+} from 'react-icons/io5';
+import { LuInfo } from 'react-icons/lu';
+import AbsenceBox from '../../absences/AbsenceBox';
+
+export interface EntityTableItem {
+  id: number;
+  name: string;
+  abbreviation: string;
+  archived: boolean;
+  colorGroup?: {
+    name: string;
+    colorCodes: string[];
+  };
+  colorGroupId?: number;
+}
+
+interface ColorGroup {
+  id: number;
+  name: string;
+  colorCodes: string[];
+}
+
+export interface EntityTableProps {
+  title: string;
+  entityType: 'subject' | 'location';
+  items: EntityTableItem[];
+  colorGroups: ColorGroup[];
+  itemsInUse: number[];
+  handleUpdateEntity: (entity: EntityTableItem | null, id?: number) => void;
+  maxAbbreviationLength: number;
+  maxFullNameLength?: number; // Optional max length for full names
+  leftColumnWidth?: string; // Make column width configurable
+}
+
+const EntityTable: React.FC<EntityTableProps> = ({
+  title,
+  entityType,
+  items,
+  colorGroups,
+  itemsInUse,
+  handleUpdateEntity,
+  maxAbbreviationLength,
+  maxFullNameLength,
+  leftColumnWidth = '60%', // Default to 60% if not specified
+}) => {
+  const COLOR_CODE_INDEX = 1;
+  const ROW_HEIGHT = '50px'; // Use fixed row height as per design
+  const theme = useTheme();
+  const editingRowRef = useRef<HTMLDivElement>(null);
+  const rightColumnWidth = `${100 - parseInt(leftColumnWidth)}%`; // Calculate right column width
+
+  const [editingItem, setEditingItem] = useState<EntityTableItem | null>(null);
+  const [isAddingItem, setIsAddingItem] = useState(false);
+  const [colorPickerOpen, setColorPickerOpen] = useState<number | null>(null);
+  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+  const [newItem, setNewItem] = useState<EntityTableItem>({
+    id: 0,
+    name: '',
+    abbreviation: '',
+    archived: false,
+    ...(entityType === 'subject' && colorGroups.length > 0
+      ? {
+          colorGroup: colorGroups[0],
+          colorGroupId: colorGroups[0].id,
+        }
+      : {}),
+  });
+
+  // Ensure newItem always has a valid color group for subjects
+  useEffect(() => {
+    if (
+      entityType === 'subject' &&
+      colorGroups.length > 0 &&
+      (!newItem.colorGroup || !newItem.colorGroupId)
+    ) {
+      setNewItem((prev) => ({
+        ...prev,
+        colorGroup: colorGroups[0],
+        colorGroupId: colorGroups[0].id,
+      }));
+    }
+  }, [entityType, colorGroups, newItem.colorGroup, newItem.colorGroupId]);
+
+  // Sort items: non-archived first (by ID), then archived (by ID)
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => {
+      // First sort by archived status
+      if (a.archived !== b.archived) {
+        return a.archived ? 1 : -1;
+      }
+      // Then sort by ID
+      if (a.id >= 0 && b.id >= 0) {
+        return a.id - b.id; // Normal order for existing entities (smaller IDs first)
+      } else if (a.id < 0 && b.id < 0) {
+        return b.id - a.id; // Reverse order for temp entities (more negative = newer = lower)
+      } else {
+        return a.id < 0 ? 1 : -1; // Temp entities (negative IDs) go to the bottom
+      }
+    });
+  }, [items]);
+
+  const handleEditItem = (item: EntityTableItem) => {
+    setEditingItem(item);
+    setOpenMenuId(null);
+  };
+
+  const handleSaveEditedItem = () => {
+    // Only require name to be present, abbreviation is now optional
+    if (!editingItem || !editingItem.name) return;
+
+    // Validate abbreviation length if it exists
+    if (
+      editingItem.abbreviation &&
+      editingItem.abbreviation.length > maxAbbreviationLength
+    ) {
+      // Toast handling would go here
+      return;
+    }
+
+    // Validate full name length if maxFullNameLength is defined
+    if (maxFullNameLength && editingItem.name.length > maxFullNameLength) {
+      // Toast handling would go here
+      return;
+    }
+
+    // Store the current editing state
+    const currentEditingItem = { ...editingItem };
+
+    // Reset the editing state
+    setEditingItem(null);
+    setColorPickerOpen(null);
+    setOpenMenuId(null);
+
+    // Find the original item to compare changes
+    const originalItem = items.find((i) => i.id === currentEditingItem.id);
+    if (!originalItem) return;
+
+    // Check if anything has changed
+    const hasChanges =
+      originalItem.name !== currentEditingItem.name ||
+      originalItem.abbreviation !== currentEditingItem.abbreviation ||
+      (entityType === 'subject' &&
+        originalItem.colorGroupId !== currentEditingItem.colorGroupId);
+
+    // Only update if something has changed
+    if (hasChanges) {
+      handleUpdateEntity(currentEditingItem);
+    }
+  };
+
+  const handleAddItem = () => {
+    // Only require name to be present, abbreviation is now optional
+    if (!newItem.name) return;
+
+    // Validate abbreviation length if it exists
+    if (
+      newItem.abbreviation &&
+      newItem.abbreviation.length > maxAbbreviationLength
+    ) {
+      // Toast handling would go here
+      return;
+    }
+
+    // Validate full name length if maxFullNameLength is defined
+    if (maxFullNameLength && newItem.name.length > maxFullNameLength) {
+      // Toast handling would go here
+      return;
+    }
+
+    // Create a temporary item with the new data
+    const itemToAdd = {
+      ...newItem,
+      id: 0, // This will be replaced with a negative ID by the change management hook
+    };
+
+    // Reset form and close it
+    handleUpdateEntity(itemToAdd);
+
+    setNewItem({
+      id: 0,
+      name: '',
+      abbreviation: '',
+      archived: false,
+      ...(entityType === 'subject' && colorGroups.length > 0
+        ? {
+            colorGroup: colorGroups[0],
+            colorGroupId: colorGroups[0].id,
+          }
+        : {}),
+    });
+    setIsAddingItem(false);
+    setColorPickerOpen(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingItem(null);
+    setIsAddingItem(false);
+    setColorPickerOpen(null);
+  };
+
+  const handleArchiveItem = (item: EntityTableItem) => {
+    // Create a modified item with the archive status toggled
+    const updatedItem = {
+      ...item,
+      archived: !item.archived,
+    };
+
+    setOpenMenuId(null);
+    handleUpdateEntity(updatedItem);
+  };
+
+  const handleDeleteItem = (item: EntityTableItem) => {
+    setOpenMenuId(null);
+    handleUpdateEntity(null, item.id);
+  };
+
+  // Tooltip component for showing the abbreviation preview
+  const AbbreviationPreview = ({
+    subject,
+    location,
+    colorCodes,
+  }: {
+    subject: string;
+    location: string;
+    colorCodes: string[];
+  }) => {
+    return (
+      <AbsenceBox
+        title={subject}
+        location={location}
+        backgroundColor={colorCodes[3]}
+        borderColor={colorCodes[1]}
+        textColor={colorCodes[0]}
+        opacity={1}
+      />
+    );
+  };
+
+  return (
+    <Box borderWidth="1px" borderRadius="md" overflow="hidden">
+      {/* Table Header */}
+      <Box
+        p={4}
+        bg="gray.50"
+        borderBottomWidth="1px"
+        display="flex"
+        width="100%"
+      >
+        <Box width={leftColumnWidth} pr={4}>
+          <HStack spacing={2}>
+            {entityType === 'subject' ? (
+              <IoBookOutline size={18} color={theme.colors.text.subtitle} />
+            ) : (
+              <FiMapPin size={18} color={theme.colors.text.subtitle} />
+            )}
+            <Text
+              textStyle="h4"
+              fontWeight="500"
+              color={theme.colors.text.subtitle}
+            >
+              {title}
+            </Text>
+            <Spacer />
+            <Tooltip
+              label={
+                <Box>
+                  <Text>
+                    The{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      full
+                    </Text>{' '}
+                    {entityType} name; shown
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      {' '}
+                      everywhere except
+                    </Text>{' '}
+                    widget titles.
+                    {maxFullNameLength && (
+                      <>
+                        {' '}
+                        Max{' '}
+                        <Text
+                          as="span"
+                          color="primaryBlue.300"
+                          fontWeight="bold"
+                        >
+                          {maxFullNameLength}
+                        </Text>{' '}
+                        characters.
+                      </>
+                    )}
+                  </Text>
+                </Box>
+              }
+              placement="top"
+              hasArrow
+              width="300px"
+            >
+              <Box as="span" ml={1} color="primaryBlue.300" cursor="help">
+                <LuInfo />
+              </Box>
+            </Tooltip>
+          </HStack>
+        </Box>
+        <Box width={rightColumnWidth} pl={4}>
+          <HStack spacing={2}>
+            <FiType size={18} color={theme.colors.text.subtitle} />
+            <Text
+              textStyle="h4"
+              fontWeight="500"
+              color={theme.colors.text.subtitle}
+            >
+              Display
+            </Text>
+            <Spacer />
+            <Tooltip
+              label={
+                <Box>
+                  <Text>
+                    An{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      abbreviated
+                    </Text>{' '}
+                    version of the {entityType} name; shown in{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      widget titles
+                    </Text>
+                    . Max{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      {maxAbbreviationLength}
+                    </Text>{' '}
+                    characters.
+                  </Text>
+                  <AbbreviationPreview
+                    subject="STR"
+                    location="Lambton"
+                    colorCodes={colorGroups[0].colorCodes}
+                  />
+                </Box>
+              }
+              placement="top"
+              hasArrow
+              width="300px"
+            >
+              <Box as="span" ml={1} color="primaryBlue.300" cursor="help">
+                <LuInfo />
+              </Box>
+            </Tooltip>
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Table Rows */}
+      {sortedItems.map((item) => (
+        <Box
+          px={4}
+          py={2}
+          borderBottomWidth="1px"
+          _last={{ borderBottomWidth: 0 }}
+          ref={editingItem?.id === item.id ? editingRowRef : undefined}
+          bg={item.archived ? 'neutralGray.100' : 'white'}
+          display="flex"
+          width="100%"
+          role="group"
+          alignItems="center"
+          key={item.id}
+          transition="background-color 0.3s ease"
+          height={ROW_HEIGHT}
+        >
+          {editingItem && editingItem.id === item.id ? (
+            <>
+              <Box width={leftColumnWidth} pr={4}>
+                <HStack spacing={5}>
+                  {entityType === 'subject' && (
+                    <Box position="relative">
+                      <Circle
+                        size="20px"
+                        bg={
+                          editingItem.colorGroup?.colorCodes[COLOR_CODE_INDEX]
+                        }
+                        cursor="pointer"
+                        onClick={() => setColorPickerOpen(item.id)}
+                        transition="transform 0.2s ease"
+                        _hover={{ transform: 'scale(1.1)' }}
+                      />
+                      {colorPickerOpen === item.id && (
+                        <Box
+                          position="absolute"
+                          top="100%"
+                          left="0"
+                          zIndex={10}
+                          bg="white"
+                          borderWidth="1px"
+                          borderRadius="md"
+                          boxShadow="md"
+                          p={2}
+                          width="auto"
+                          opacity={1}
+                          transform="translateY(0)"
+                          transition="opacity 0.3s ease, transform 0.3s ease"
+                        >
+                          <Box
+                            display="grid"
+                            gridTemplateColumns="repeat(4, 1fr)"
+                            gap={2}
+                          >
+                            {colorGroups.map((group) => (
+                              <Circle
+                                key={group.id}
+                                size="20px"
+                                bg={group.colorCodes[COLOR_CODE_INDEX]}
+                                border="2px solid"
+                                borderColor={
+                                  editingItem?.colorGroup?.name === group.name
+                                    ? `${group.colorCodes[0]}`
+                                    : 'transparent'
+                                }
+                                cursor="pointer"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setEditingItem({
+                                    ...editingItem,
+                                    colorGroup: group,
+                                    colorGroupId: group.id,
+                                  });
+                                  setColorPickerOpen(null);
+                                }}
+                                transition="transform 0.2s ease"
+                                _hover={{ transform: 'scale(1.1)' }}
+                              />
+                            ))}
+                          </Box>
+                        </Box>
+                      )}
+                    </Box>
+                  )}
+                  <Input
+                    value={editingItem.name}
+                    onChange={(e) =>
+                      setEditingItem({
+                        ...editingItem,
+                        name: e.target.value,
+                      })
+                    }
+                    size="sm"
+                    flex="1"
+                    maxLength={maxFullNameLength}
+                  />
+                </HStack>
+              </Box>
+              <Box
+                width={rightColumnWidth}
+                pl={4}
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Input
+                  value={editingItem.abbreviation}
+                  onChange={(e) =>
+                    setEditingItem({
+                      ...editingItem,
+                      abbreviation: e.target.value,
+                    })
+                  }
+                  size="sm"
+                  maxW="60px"
+                  maxLength={maxAbbreviationLength}
+                />
+                <HStack>
+                  <Button
+                    variant="outline"
+                    onClick={handleSaveEditedItem}
+                    size="sm"
+                    borderRadius="md"
+                    p={0}
+                    transition="background-color 0.2s ease"
+                  >
+                    <IoCheckmark size={20} color={theme.colors.gray[600]} />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={handleCancelEdit}
+                    size="sm"
+                    borderRadius="md"
+                    p={0}
+                    transition="background-color 0.2s ease"
+                  >
+                    <IoCloseOutline size={20} color={theme.colors.gray[600]} />
+                  </Button>
+                </HStack>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box
+                width={leftColumnWidth}
+                pr={4}
+                alignItems="center"
+                flexShrink={0}
+              >
+                <HStack spacing={2}>
+                  {entityType === 'subject' && (
+                    <>
+                      <Circle
+                        size="20px"
+                        bg={item.colorGroup?.colorCodes[COLOR_CODE_INDEX]}
+                      />
+                      <Box width={3} />
+                    </>
+                  )}
+                  {item.archived && (
+                    <FiArchive
+                      color={theme.colors.text.inactiveButtonText}
+                      size={15}
+                    />
+                  )}
+                  <Tooltip
+                    label={item.name}
+                    placement="top"
+                    openDelay={300}
+                    isDisabled={item.name.length <= 20}
+                    hasArrow
+                  >
+                    <Box
+                      position="relative"
+                      width="100%"
+                      overflow="hidden"
+                      flex={1}
+                    >
+                      <Text
+                        color={
+                          item.archived ? 'text.inactiveButtonText' : 'inherit'
+                        }
+                        noOfLines={1}
+                        overflow="hidden"
+                        textOverflow="ellipsis"
+                        whiteSpace="nowrap"
+                        position="relative"
+                        pr="30px"
+                        textStyle="cellBody"
+                        transition="color 0.3s ease"
+                      >
+                        {item.name}
+                      </Text>
+                      <Box
+                        position="absolute"
+                        right="0"
+                        top="0"
+                        height="100%"
+                        width="30px"
+                        background={`linear-gradient(to right, transparent, ${item.archived ? 'var(--chakra-colors-neutralGray-100)' : 'white'})`}
+                        zIndex="1"
+                        pointerEvents="none"
+                        transition="background 0.3s ease"
+                      />
+                    </Box>
+                  </Tooltip>
+                </HStack>
+              </Box>
+              <Box
+                width={rightColumnWidth}
+                pl={4}
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Text
+                  color={item.archived ? 'text.inactiveButtonText' : 'inherit'}
+                  textStyle="cellBody"
+                  transition="color 0.3s ease"
+                >
+                  {item.abbreviation}
+                </Text>
+                <Box
+                  className="action-button"
+                  opacity={openMenuId === item.id ? '1' : '0'}
+                  _groupHover={{ opacity: '1' }}
+                  transition="opacity 0.3s ease"
+                >
+                  <Popover
+                    isOpen={openMenuId === item.id}
+                    onOpen={() => setOpenMenuId(item.id)}
+                    onClose={() => setOpenMenuId(null)}
+                    placement="bottom-end"
+                  >
+                    <PopoverTrigger>
+                      <IconButton
+                        aria-label="Options"
+                        icon={<IoEllipsisHorizontal />}
+                        variant="ghost"
+                        size="sm"
+                        transition="opacity 0.2s ease"
+                      />
+                    </PopoverTrigger>
+                    <Portal>
+                      <PopoverContent width="auto" boxShadow="md">
+                        <PopoverBody p={0}>
+                          <VStack align="stretch" spacing={0}>
+                            <Button
+                              leftIcon={
+                                <FiEdit2
+                                  color={theme.colors.neutralGray[600]}
+                                  size={15}
+                                />
+                              }
+                              onClick={() => handleEditItem(item)}
+                              variant="ghost"
+                              justifyContent="flex-start"
+                              width="100%"
+                              textStyle="label"
+                              fontSize={12}
+                              color="body"
+                              borderRadius={0}
+                              py={2}
+                            >
+                              Edit
+                            </Button>
+                            <Button
+                              leftIcon={
+                                <FiArchive
+                                  color={theme.colors.neutralGray[600]}
+                                  size={15}
+                                />
+                              }
+                              onClick={() => handleArchiveItem(item)}
+                              variant="ghost"
+                              justifyContent="flex-start"
+                              width="100%"
+                              textStyle="label"
+                              fontSize={12}
+                              color="body"
+                              borderRadius={0}
+                              py={2}
+                            >
+                              {item.archived ? 'Unarchive' : 'Archive'}
+                            </Button>
+                            <Tooltip
+                              label={
+                                itemsInUse.includes(item.id)
+                                  ? `Cannot delete ${entityType} because it is used in existing absences`
+                                  : ''
+                              }
+                              isDisabled={!itemsInUse.includes(item.id)}
+                              hasArrow
+                            >
+                              <Button
+                                leftIcon={
+                                  <FiTrash2
+                                    color={theme.colors.neutralGray[600]}
+                                    size={15}
+                                  />
+                                }
+                                onClick={() => handleDeleteItem(item)}
+                                isDisabled={itemsInUse.includes(item.id)}
+                                variant="ghost"
+                                justifyContent="flex-start"
+                                width="100%"
+                                textStyle="label"
+                                fontSize={12}
+                                color="body"
+                                py={2}
+                                borderRadius={0}
+                                bg={
+                                  itemsInUse.includes(item.id)
+                                    ? 'neutralGray.100'
+                                    : undefined
+                                }
+                                _hover={
+                                  itemsInUse.includes(item.id)
+                                    ? { bg: 'neutralGray.100' }
+                                    : undefined
+                                }
+                                cursor={
+                                  itemsInUse.includes(item.id)
+                                    ? 'not-allowed'
+                                    : 'pointer'
+                                }
+                              >
+                                Delete
+                              </Button>
+                            </Tooltip>
+                          </VStack>
+                        </PopoverBody>
+                      </PopoverContent>
+                    </Portal>
+                  </Popover>
+                </Box>
+              </Box>
+            </>
+          )}
+        </Box>
+      ))}
+
+      {/* Add New Item Row */}
+      {isAddingItem ? (
+        <Box
+          px={4}
+          py={2}
+          borderBottomWidth="1px"
+          display="flex"
+          width="100%"
+          ref={editingRowRef}
+          animation="fadeIn 0.3s ease"
+          sx={{
+            '@keyframes fadeIn': {
+              '0%': { opacity: 0, transform: 'translateY(-10px)' },
+              '100%': { opacity: 1, transform: 'translateY(0)' },
+            },
+          }}
+          height={ROW_HEIGHT}
+        >
+          <Box width={leftColumnWidth} pr={4}>
+            <HStack spacing={5}>
+              {entityType === 'subject' && (
+                <Box position="relative">
+                  <Circle
+                    size="20px"
+                    bg={
+                      newItem.colorGroupId
+                        ? colorGroups.find(
+                            (cg) => cg.id === newItem.colorGroupId
+                          )?.colorCodes[COLOR_CODE_INDEX]
+                        : colorGroups[0]?.colorCodes[COLOR_CODE_INDEX] ||
+                          '#CBD5E0'
+                    }
+                    cursor="pointer"
+                    onClick={() => setColorPickerOpen(-1)}
+                    transition="transform 0.2s ease"
+                    _hover={{ transform: 'scale(1.1)' }}
+                  />
+                  {colorPickerOpen === -1 && (
+                    <Box
+                      position="absolute"
+                      top="100%"
+                      left="0"
+                      zIndex={10}
+                      bg="white"
+                      borderWidth="1px"
+                      borderRadius="md"
+                      boxShadow="md"
+                      p={2}
+                      width="auto"
+                      opacity={1}
+                      transform="translateY(0)"
+                      transition="opacity 0.3s ease, transform 0.3s ease"
+                    >
+                      <Box
+                        display="grid"
+                        gridTemplateColumns="repeat(4, 1fr)"
+                        gap={2}
+                      >
+                        {colorGroups.map((group) => (
+                          <Circle
+                            key={group.id}
+                            size="20px"
+                            bg={group.colorCodes[COLOR_CODE_INDEX]}
+                            border="2px solid"
+                            borderColor={
+                              newItem?.colorGroup?.name === group.name
+                                ? `${group.colorCodes[0]}`
+                                : 'transparent'
+                            }
+                            cursor="pointer"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setNewItem({
+                                ...newItem,
+                                colorGroup: group,
+                                colorGroupId: group.id,
+                              });
+                              setColorPickerOpen(null);
+                            }}
+                            transition="transform 0.2s ease"
+                            _hover={{ transform: 'scale(1.1)' }}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+              )}
+              <Input
+                value={newItem.name}
+                onChange={(e) =>
+                  setNewItem({
+                    ...newItem,
+                    name: e.target.value,
+                  })
+                }
+                placeholder={`${title} name`}
+                size="sm"
+                flex="1"
+                maxLength={maxFullNameLength}
+              />
+            </HStack>
+          </Box>
+          <Box
+            width={rightColumnWidth}
+            pl={4}
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Input
+              value={newItem.abbreviation}
+              onChange={(e) =>
+                setNewItem({
+                  ...newItem,
+                  abbreviation: e.target.value,
+                })
+              }
+              placeholder="Abbr."
+              size="sm"
+              maxW="60px"
+              maxLength={maxAbbreviationLength}
+            />
+            <HStack>
+              <Button
+                variant="outline"
+                onClick={handleAddItem}
+                size="sm"
+                borderRadius="md"
+                p={0}
+                transition="background-color 0.2s ease"
+              >
+                <IoCheckmark size={20} color={theme.colors.gray[600]} />
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleCancelEdit}
+                size="sm"
+                borderRadius="md"
+                p={0}
+                transition="background-color 0.2s ease"
+              >
+                <IoCloseOutline size={20} color={theme.colors.gray[600]} />
+              </Button>
+            </HStack>
+          </Box>
+        </Box>
+      ) : null}
+
+      {/* Add Button */}
+      <Box
+        as="button"
+        width="100%"
+        onClick={() => setIsAddingItem(true)}
+        _hover={{ bg: 'neutralGray.100' }}
+        transition="background-color 0.2s ease"
+        textAlign="left"
+        borderTopWidth={items.length > 0 ? '1px' : '0'}
+        height={ROW_HEIGHT}
+      >
+        <HStack px={4} py={2} spacing={2} justify="flex-start">
+          <Icon as={IoAdd} size={20} color={theme.colors.text.subtitle} />
+          <Text
+            textStyle="h4"
+            fontWeight="500"
+            color={theme.colors.text.subtitle}
+          >
+            Add
+          </Text>
+        </HStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default EntityTable;
diff --git a/src/components/dashboard/system_options/LocationsTable.tsx b/src/components/dashboard/system_options/LocationsTable.tsx
new file mode 100644
index 00000000..92b04152
--- /dev/null
+++ b/src/components/dashboard/system_options/LocationsTable.tsx
@@ -0,0 +1,32 @@
+import { ColorGroup, Location } from '@utils/types';
+import EntityTable from './EntityTable';
+
+interface LocationsTableProps {
+  locations: Location[];
+  locationsInUse: number[];
+  handleUpdateLocation: (location: Location | null, id?: number) => void;
+  maxAbbreviationLength: number;
+  colorGroups: ColorGroup[];
+}
+
+const LocationsTable: React.FC<LocationsTableProps> = ({
+  locations,
+  locationsInUse,
+  handleUpdateLocation,
+  maxAbbreviationLength,
+  colorGroups,
+}) => {
+  return (
+    <EntityTable
+      title="Location"
+      entityType="location"
+      items={locations}
+      itemsInUse={locationsInUse}
+      handleUpdateEntity={handleUpdateLocation}
+      maxAbbreviationLength={maxAbbreviationLength}
+      colorGroups={colorGroups}
+    />
+  );
+};
+
+export default LocationsTable;
diff --git a/src/components/dashboard/system_options/SubjectsTable.tsx b/src/components/dashboard/system_options/SubjectsTable.tsx
new file mode 100644
index 00000000..c3fcfdab
--- /dev/null
+++ b/src/components/dashboard/system_options/SubjectsTable.tsx
@@ -0,0 +1,32 @@
+import { SubjectAPI } from '@utils/types';
+import EntityTable from './EntityTable';
+
+interface SubjectsTableProps {
+  subjects: SubjectAPI[];
+  colorGroups: { id: number; name: string; colorCodes: string[] }[];
+  subjectsInUse: number[];
+  handleUpdateSubject: (subject: SubjectAPI | null, id?: number) => void;
+  maxAbbreviationLength: number;
+}
+
+const SubjectsTable: React.FC<SubjectsTableProps> = ({
+  subjects,
+  colorGroups,
+  subjectsInUse,
+  handleUpdateSubject,
+  maxAbbreviationLength,
+}) => {
+  return (
+    <EntityTable
+      title="Subject"
+      entityType="subject"
+      items={subjects}
+      colorGroups={colorGroups}
+      itemsInUse={subjectsInUse}
+      handleUpdateEntity={handleUpdateSubject}
+      maxAbbreviationLength={maxAbbreviationLength}
+    />
+  );
+};
+
+export default SubjectsTable;
diff --git a/src/components/dashboard/system_options/SystemChangesConfirmationDialog.tsx b/src/components/dashboard/system_options/SystemChangesConfirmationDialog.tsx
new file mode 100644
index 00000000..676c94cc
--- /dev/null
+++ b/src/components/dashboard/system_options/SystemChangesConfirmationDialog.tsx
@@ -0,0 +1,420 @@
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { Location, SubjectAPI } from '@utils/types';
+import { useRef } from 'react';
+import { FiArchive, FiEdit2, FiTrash2 } from 'react-icons/fi';
+import { IoAdd, IoAlertCircleSharp, IoWarning } from 'react-icons/io5';
+
+// Entity-based pending changes structure
+export interface PendingEntities {
+  subjects: Map<number, SubjectAPI | null>;
+  locations: Map<number, Location | null>;
+  settings: { absenceCap?: number };
+}
+
+interface SystemChangesConfirmationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  pendingEntities: PendingEntities;
+  subjects: SubjectAPI[];
+  locations: Location[];
+  colorGroups: any[];
+  absenceCap: number;
+}
+
+const SystemChangesConfirmationDialog: React.FC<
+  SystemChangesConfirmationDialogProps
+> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  pendingEntities,
+  subjects,
+  locations,
+  colorGroups,
+  absenceCap,
+}) => {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  // Icons for different change types
+  const getChangeIcon = (changeType: string) => {
+    if (changeType === 'delete') {
+      return <Icon as={FiTrash2} color="red.500" boxSize="21px" />;
+    } else if (changeType === 'archive' || changeType === 'unarchive') {
+      return <Icon as={FiArchive} color="blue.500" boxSize="21px" />;
+    } else if (changeType === 'update') {
+      return <Icon as={FiEdit2} color="blue.500" boxSize="21px" />;
+    } else if (changeType === 'add') {
+      return <Icon as={IoAdd} color="blue.500" boxSize="21px" />;
+    }
+    return null;
+  };
+
+  // Convert pending entities to displayable changes
+  const getDisplayableChanges = (): {
+    icon: React.ReactNode;
+    label: string;
+    color: string;
+    details: React.ReactNode;
+  }[] => {
+    const displayChanges: {
+      icon: React.ReactNode;
+      label: string;
+      color: string;
+      details: React.ReactNode;
+    }[] = [];
+
+    // Check if there are any pending changes
+    const hasSubjectChanges = pendingEntities.subjects.size > 0;
+    const hasLocationChanges = pendingEntities.locations.size > 0;
+    const hasSettingChanges = pendingEntities.settings.absenceCap !== undefined;
+
+    if (!hasSubjectChanges && !hasLocationChanges && !hasSettingChanges) {
+      return [
+        {
+          icon: null,
+          label: 'No changes to apply',
+          color: 'gray.700',
+          details: '',
+        },
+      ];
+    }
+
+    // Process subject changes
+    pendingEntities.subjects.forEach((updatedSubject, id) => {
+      if (updatedSubject === null) {
+        // Handle deleted subject
+        const originalSubject = subjects.find((s) => s.id === id);
+        if (originalSubject) {
+          displayChanges.push({
+            icon: getChangeIcon('delete'),
+            label: `Deleted Subject`,
+            color: 'red.500',
+            details: `"${originalSubject.name}"`,
+          });
+        }
+      } else if (id < 0) {
+        // Handle new subject
+        displayChanges.push({
+          icon: getChangeIcon('add'),
+          label: `Added Subject`,
+          color: 'blue.500',
+          details: `"${updatedSubject.name}"`,
+        });
+      } else {
+        // Handle updated subject
+        const originalSubject = subjects.find((s) => s.id === id);
+        if (!originalSubject) return;
+
+        // Check for name changes
+        if (originalSubject.name !== updatedSubject.name) {
+          displayChanges.push({
+            icon: getChangeIcon('update'),
+            label: `Updated Subject Name`,
+            color: 'blue.500',
+            details: `"${originalSubject.name}" → "${updatedSubject.name}"`,
+          });
+        }
+
+        // Check for abbreviation changes
+        if (originalSubject.abbreviation !== updatedSubject.abbreviation) {
+          let label = 'Updated Display';
+          let details = `"${originalSubject.abbreviation}" → "${updatedSubject.abbreviation}"`;
+
+          // Handle empty to value case: "Added Display"
+          if (originalSubject.abbreviation === '') {
+            label = 'Added Display';
+            details = `"${updatedSubject.abbreviation}" to "${updatedSubject.name}"`;
+          }
+          // Handle value to empty case: "Removed Display"
+          else if (updatedSubject.abbreviation === '') {
+            label = 'Removed Display';
+            details = `"${originalSubject.abbreviation}" from "${updatedSubject.name}"`;
+          }
+
+          displayChanges.push({
+            icon: getChangeIcon('update'),
+            label,
+            color: 'blue.500',
+            details,
+          });
+        }
+
+        // Check for archived status changes
+        if (originalSubject.archived !== updatedSubject.archived) {
+          displayChanges.push({
+            icon: getChangeIcon(
+              updatedSubject.archived ? 'archive' : 'unarchive'
+            ),
+            label: updatedSubject.archived
+              ? 'Archived Subject'
+              : 'Unarchived Subject',
+            color: 'blue.500',
+            details: `"${updatedSubject.name}"`,
+          });
+        }
+
+        // Check for color group changes
+        if (originalSubject.colorGroupId !== updatedSubject.colorGroupId) {
+          const originalColorGroup = colorGroups.find(
+            (cg) => cg.id === originalSubject.colorGroupId
+          );
+          const newColorGroup = colorGroups.find(
+            (cg) => cg.id === updatedSubject.colorGroupId
+          );
+
+          displayChanges.push({
+            icon: getChangeIcon('update'),
+            label: `Updated Subject Colour`,
+            color: 'blue.500',
+            details: (
+              <Text textStyle="caption" mt="2px">
+                {updatedSubject.name}:{' '}
+                <Box as="span" display="inline-block" whiteSpace="nowrap">
+                  <Box
+                    as="span"
+                    display="inline-block"
+                    w="1em"
+                    h="1em"
+                    borderRadius="full"
+                    bg={originalColorGroup?.colorCodes[1] || 'gray.300'}
+                    verticalAlign="middle"
+                    mx="1px"
+                  />{' '}
+                  →{' '}
+                  <Box
+                    as="span"
+                    display="inline-block"
+                    w="1em"
+                    h="1em"
+                    borderRadius="full"
+                    bg={newColorGroup?.colorCodes[1] || 'gray.300'}
+                    verticalAlign="middle"
+                    mx="1px"
+                  />
+                </Box>
+              </Text>
+            ),
+          });
+        }
+      }
+    });
+
+    // Process location changes
+    pendingEntities.locations.forEach((updatedLocation, id) => {
+      if (updatedLocation === null) {
+        // Handle deleted location
+        const originalLocation = locations.find((l) => l.id === id);
+        if (originalLocation) {
+          displayChanges.push({
+            icon: getChangeIcon('delete'),
+            label: `Deleted Location`,
+            color: 'red.500',
+            details: `"${originalLocation.name}"`,
+          });
+        }
+      } else if (id < 0) {
+        // Handle new location
+        displayChanges.push({
+          icon: getChangeIcon('add'),
+          label: `Added Location`,
+          color: 'blue.500',
+          details: `"${updatedLocation.name}"`,
+        });
+      } else {
+        // Handle updated location
+        const originalLocation = locations.find((l) => l.id === id);
+        if (!originalLocation) return;
+
+        // Check for name changes
+        if (originalLocation.name !== updatedLocation.name) {
+          displayChanges.push({
+            icon: getChangeIcon('update'),
+            label: `Updated Location Name`,
+            color: 'blue.500',
+            details: `"${originalLocation.name}" → "${updatedLocation.name}"`,
+          });
+        }
+
+        // Check for abbreviation changes
+        if (originalLocation.abbreviation !== updatedLocation.abbreviation) {
+          let label = 'Updated Display';
+          let details = `"${originalLocation.abbreviation}" → "${updatedLocation.abbreviation}"`;
+
+          // Handle empty to value case: "Added Display"
+          if (originalLocation.abbreviation === '') {
+            label = 'Added Display';
+            details = `"${updatedLocation.abbreviation}" to "${updatedLocation.name}"`;
+          }
+          // Handle value to empty case: "Removed Display"
+          else if (updatedLocation.abbreviation === '') {
+            label = 'Removed Display';
+            details = `"${originalLocation.abbreviation}" from "${updatedLocation.name}"`;
+          }
+
+          displayChanges.push({
+            icon: getChangeIcon('update'),
+            label,
+            color: 'blue.500',
+            details,
+          });
+        }
+
+        // Check for archived status changes
+        if (originalLocation.archived !== updatedLocation.archived) {
+          displayChanges.push({
+            icon: getChangeIcon(
+              updatedLocation.archived ? 'archive' : 'unarchive'
+            ),
+            label: updatedLocation.archived
+              ? 'Archived Location'
+              : 'Unarchived Location',
+            color: 'blue.500',
+            details: `"${updatedLocation.name}"`,
+          });
+        }
+      }
+    });
+
+    // Process settings changes
+    if (pendingEntities.settings.absenceCap !== undefined) {
+      const newAbsenceCap = pendingEntities.settings.absenceCap;
+      if (newAbsenceCap !== absenceCap) {
+        displayChanges.push({
+          icon: getChangeIcon('update'),
+          label: `Updated Allowed Absences`,
+          color: 'blue.500',
+          details: `${absenceCap} → ${newAbsenceCap}`,
+        });
+      }
+    }
+
+    return displayChanges;
+  };
+
+  // Check if there are any delete operations
+  const hasDeletedItems =
+    Array.from(pendingEntities.subjects.values()).some((s) => s === null) ||
+    Array.from(pendingEntities.locations.values()).some((l) => l === null);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      isCentered
+      blockScrollOnMount={false}
+      motionPreset="scale"
+      closeOnOverlayClick={false}
+      preserveScrollBarGap
+    >
+      <ModalOverlay bg="rgba(0, 0, 0, 0.4)" />
+      <ModalContent
+        p={8}
+        width="sm"
+        maxHeight="80vh"
+        boxShadow="2xl"
+        zIndex={1500}
+      >
+        <ModalHeader fontSize="lg" fontWeight="bold" pb={4} pt={0} px={0}>
+          <Box>
+            <HStack spacing={2} alignItems="center" mb={1}>
+              <Icon as={IoAlertCircleSharp} color="orange.400" boxSize={6} />
+              <Text textStyle="h4" fontWeight="500">
+                You are making the following changes.
+              </Text>
+            </HStack>
+            <Text textStyle="h3" fontWeight="600" ml="32px">
+              Do you wish to proceed?
+            </Text>
+          </Box>
+        </ModalHeader>
+
+        <ModalBody pb={2} px={0}>
+          <VStack
+            spacing={3}
+            align="stretch"
+            p={4}
+            borderWidth="1px"
+            borderRadius="5px"
+            borderColor="neutralGray.300"
+            mb={4}
+            maxH="236px"
+            overflowY="auto"
+          >
+            {getDisplayableChanges().map((change, index) => (
+              <HStack key={index} spacing={3} align="center">
+                <Box minW="40px" textAlign="center">
+                  {change.icon}
+                </Box>
+                <VStack align="start" spacing={0}>
+                  <Text fontWeight="bold" color={change.color} textStyle="h4">
+                    {change.label}
+                  </Text>
+                  {typeof change.details === 'string' ? (
+                    <Text textStyle="caption">{change.details}</Text>
+                  ) : (
+                    change.details
+                  )}
+                </VStack>
+              </HStack>
+            ))}
+          </VStack>
+
+          {hasDeletedItems && (
+            <HStack spacing={3} color="errorRed.200" mb={2} alignItems="center">
+              <Icon as={IoWarning} boxSize={5} />
+              <Text
+                textStyle="subtitle"
+                fontWeight="600"
+                textColor="errorRed.200"
+              >
+                Deleted subjects/locations cannot be restored.
+              </Text>
+            </HStack>
+          )}
+        </ModalBody>
+
+        <ModalFooter p={0}>
+          <Button
+            ref={cancelRef}
+            onClick={onClose}
+            flex="1"
+            size="lg"
+            colorScheme="blue"
+            variant="outline"
+            height="35px"
+            textStyle="button"
+          >
+            Back
+          </Button>
+          <Button
+            colorScheme="blue"
+            onClick={onConfirm}
+            ml={3}
+            flex="1"
+            size="lg"
+            height="35px"
+            textStyle="button"
+          >
+            Proceed
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default SystemChangesConfirmationDialog;
diff --git a/src/components/dashboard/system_options/SystemOptionsModal.tsx b/src/components/dashboard/system_options/SystemOptionsModal.tsx
new file mode 100644
index 00000000..28f3fa8c
--- /dev/null
+++ b/src/components/dashboard/system_options/SystemOptionsModal.tsx
@@ -0,0 +1,382 @@
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  IconButton,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Spacer,
+  Text,
+  useDisclosure,
+  useTheme,
+  VStack,
+} from '@chakra-ui/react';
+import { Location, SubjectAPI } from '@utils/types';
+import { useCallback, useEffect, useState } from 'react';
+import { IoCloseOutline, IoSettingsOutline } from 'react-icons/io5';
+import { useChangeManagement } from '../../../../hooks/useChangeManagement';
+import { useCustomToast } from '../../CustomToast';
+import LocationsTable from './LocationsTable';
+import SubjectsTable from './SubjectsTable';
+import SystemChangesConfirmationDialog from './SystemChangesConfirmationDialog';
+import SystemSettings from './SystemSettings';
+import UnsavedChangesDialog from './UnsavedChangesDialog';
+
+interface SystemOptionsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  absenceCap: number;
+  onUpdateComplete?: () => void;
+}
+
+const SystemOptionsModal: React.FC<SystemOptionsModalProps> = ({
+  isOpen,
+  onClose,
+  absenceCap,
+  onUpdateComplete,
+}) => {
+  // Constants for character limits
+  const MAX_SUBJECT_ABBREVIATION_LENGTH = 9;
+  const MAX_LOCATION_ABBREVIATION_LENGTH = 12;
+
+  const [subjects, setSubjects] = useState<SubjectAPI[]>([]);
+  const [locations, setLocations] = useState<Location[]>([]);
+  const [subjectsInUse, setSubjectsInUse] = useState<number[]>([]);
+  const [locationsInUse, setLocationsInUse] = useState<number[]>([]);
+  const confirmationDialog = useDisclosure();
+  const unsavedChangesDialog = useDisclosure();
+  const showToast = useCustomToast();
+  const theme = useTheme();
+
+  // Default color group to ensure we always have at least one color group
+  // for the preview object in EntityTable.tsx
+  // This will be replaced with the actual color group from the API
+  const defaultColorGroup = {
+    id: 0,
+    name: 'Default',
+    colorCodes: ['#000000', '#1E88E5', '#64B5F6', '#E3F2FD'],
+  };
+
+  const [colorGroups, setColorGroups] = useState<
+    {
+      id: number;
+      name: string;
+      colorCodes: string[];
+    }[]
+  >([defaultColorGroup]);
+
+  const fetchSubjects = useCallback(async () => {
+    try {
+      const response = await fetch('/api/subjects');
+      if (!response.ok) throw new Error('Failed to fetch subjects');
+      const data = await response.json();
+      setSubjects(data);
+    } catch (error) {
+      console.error('Error fetching subjects:', error);
+      showToast({
+        title: 'Error',
+        description: 'Failed to load subjects',
+        status: 'error',
+      });
+    }
+  }, [showToast]);
+
+  const fetchLocations = useCallback(async () => {
+    try {
+      const response = await fetch('/api/locations');
+      if (!response.ok) throw new Error('Failed to fetch locations');
+      const data = await response.json();
+      setLocations(data);
+    } catch (error) {
+      console.error('Error fetching locations:', error);
+      showToast({
+        title: 'Error',
+        description: 'Failed to load locations',
+        status: 'error',
+      });
+    }
+  }, [showToast]);
+
+  const fetchColorGroups = useCallback(async () => {
+    try {
+      const response = await fetch('/api/colorGroups');
+      if (!response.ok) throw new Error('Failed to fetch color groups');
+      const data = await response.json();
+      setColorGroups(data);
+    } catch (error) {
+      console.error('Error fetching color groups:', error);
+      showToast({
+        title: 'Error',
+        description: 'Failed to load color groups',
+        status: 'error',
+      });
+    }
+  }, [showToast]);
+
+  const checkSubjectsInUse = useCallback(async () => {
+    try {
+      const response = await fetch('/api/subjects/inUse');
+      if (!response.ok) throw new Error('Failed to check subjects in use');
+      const data = await response.json();
+      setSubjectsInUse(data.subjectsInUse || []);
+    } catch (error) {
+      console.error('Error checking subjects in use:', error);
+    }
+  }, []);
+
+  const checkLocationsInUse = useCallback(async () => {
+    try {
+      const response = await fetch('/api/locations/inUse');
+      if (!response.ok) throw new Error('Failed to check locations in use');
+      const data = await response.json();
+      setLocationsInUse(data.locationsInUse || []);
+    } catch (error) {
+      console.error('Error checking locations in use:', error);
+    }
+  }, []);
+
+  const refreshData = useCallback(() => {
+    fetchSubjects();
+    fetchLocations();
+  }, [fetchSubjects, fetchLocations]);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchSubjects();
+      fetchLocations();
+      fetchColorGroups();
+      checkSubjectsInUse();
+      checkLocationsInUse();
+    }
+  }, [
+    isOpen,
+    fetchSubjects,
+    fetchLocations,
+    fetchColorGroups,
+    checkSubjectsInUse,
+    checkLocationsInUse,
+    absenceCap,
+  ]);
+
+  // Use our change management hook
+  const {
+    pendingEntities,
+    handleUpdateSubject,
+    handleUpdateLocation,
+    handleUpdateAbsenceCap,
+    applyChanges: applyChangesOriginal,
+    clearChanges,
+    updatedSubjects,
+    updatedLocations,
+    updatedAbsenceCap,
+  } = useChangeManagement({
+    subjects,
+    locations,
+    absenceCap,
+    onRefresh: refreshData,
+    showToast,
+  });
+
+  // Create a wrapper for applyChanges that also closes the modal
+  const applyChanges = async () => {
+    try {
+      const result = await applyChangesOriginal();
+      if (result) {
+        // Call the callback to notify parent components that changes have been applied
+        if (onUpdateComplete) {
+          onUpdateComplete();
+        }
+
+        confirmationDialog.onClose();
+        onClose();
+      }
+    } catch (error) {
+      console.error('Error applying changes:', error);
+    }
+  };
+
+  const handleClose = () => {
+    // Check if there are any pending changes
+    const hasChanges =
+      pendingEntities.subjects.size > 0 ||
+      pendingEntities.locations.size > 0 ||
+      pendingEntities.settings.absenceCap !== undefined;
+
+    if (hasChanges) {
+      unsavedChangesDialog.onOpen();
+    } else {
+      onClose();
+    }
+  };
+
+  const handleCloseConfirmed = () => {
+    unsavedChangesDialog.onClose();
+    // Clear any pending changes
+    clearChanges();
+    onClose();
+  };
+
+  const handleSave = () => {
+    // Check if there are any pending changes
+    const hasChanges =
+      pendingEntities.subjects.size > 0 ||
+      pendingEntities.locations.size > 0 ||
+      pendingEntities.settings.absenceCap !== undefined;
+
+    if (hasChanges) {
+      confirmationDialog.onOpen();
+    } else {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      size="md"
+      scrollBehavior="outside"
+      isCentered={false}
+      motionPreset="slideInBottom"
+    >
+      <ModalOverlay bg="rgba(0, 0, 0, 0.4)" transition="all 0.3s ease" />
+      <ModalContent
+        height="auto"
+        minHeight="min-content"
+        width="100%"
+        maxWidth="lg"
+        position="relative"
+        overflow="visible"
+        paddingX="43px"
+        paddingY="42px"
+        transform={isOpen ? 'translateY(0)' : 'translateY(20px)'}
+        opacity={isOpen ? 1 : 0}
+        transition="transform 0.3s ease, opacity 0.3s ease, height 0.3s ease"
+        marginY="2.5vh"
+      >
+        <Flex direction="column" width="100%">
+          <ModalHeader padding={0}>
+            <HStack spacing={0} width="100%">
+              <IoSettingsOutline
+                size={29}
+                color={theme.colors.neutralGray[600]}
+              />
+              <Box width="16px" />
+              <Box>
+                <Text textStyle="h2">System Options</Text>
+              </Box>
+              <Spacer />
+              <IconButton
+                aria-label="Close"
+                icon={<IoCloseOutline size={40} />}
+                variant="ghost"
+                onClick={handleClose}
+                size="sm"
+                transition="background-color 0.2s ease"
+              />
+            </HStack>
+          </ModalHeader>
+          <ModalBody
+            position="relative"
+            width="100%"
+            overflow="visible"
+            padding={0}
+          >
+            <VStack
+              align="stretch"
+              spacing="37px"
+              width="100%"
+              marginTop="37px"
+            >
+              {/* Subjects Section */}
+              <Box>
+                <SubjectsTable
+                  subjects={updatedSubjects}
+                  colorGroups={colorGroups}
+                  subjectsInUse={subjectsInUse}
+                  handleUpdateSubject={handleUpdateSubject}
+                  maxAbbreviationLength={MAX_SUBJECT_ABBREVIATION_LENGTH}
+                />
+              </Box>
+
+              {/* Locations Section */}
+              <Box>
+                <LocationsTable
+                  locations={updatedLocations}
+                  locationsInUse={locationsInUse}
+                  handleUpdateLocation={handleUpdateLocation}
+                  maxAbbreviationLength={MAX_LOCATION_ABBREVIATION_LENGTH}
+                  colorGroups={colorGroups}
+                />
+              </Box>
+
+              {/* Settings Section */}
+              <Box>
+                <SystemSettings
+                  allowedAbsences={updatedAbsenceCap}
+                  originalAbsenceCap={absenceCap}
+                  handleUpdateAbsenceCap={handleUpdateAbsenceCap}
+                />
+              </Box>
+            </VStack>
+          </ModalBody>
+
+          {/* SystemChangesConfirmationDialog */}
+          <SystemChangesConfirmationDialog
+            isOpen={confirmationDialog.isOpen}
+            onClose={confirmationDialog.onClose}
+            onConfirm={applyChanges}
+            pendingEntities={pendingEntities}
+            subjects={subjects}
+            locations={locations}
+            colorGroups={colorGroups}
+            absenceCap={absenceCap}
+          />
+
+          {/* UnsavedChangesDialog for confirming closing with unsaved changes */}
+          <UnsavedChangesDialog
+            isOpen={unsavedChangesDialog.isOpen}
+            onClose={unsavedChangesDialog.onClose}
+            onConfirm={handleCloseConfirmed}
+          />
+
+          <ModalFooter width="100%" padding={0} marginTop="37px">
+            <HStack spacing={4} width="100%">
+              <Button
+                variant="outline"
+                size="lg"
+                flex="1"
+                height="35px"
+                borderRadius="md"
+                textStyle="button"
+                onClick={handleClose}
+                transition="background-color 0.2s ease"
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="blue"
+                size="lg"
+                flex="1"
+                height="35px"
+                borderRadius="md"
+                textStyle="button"
+                onClick={handleSave}
+                transition="background-color 0.2s ease"
+              >
+                Save
+              </Button>
+            </HStack>
+          </ModalFooter>
+        </Flex>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default SystemOptionsModal;
diff --git a/src/components/dashboard/system_options/SystemSettings.tsx b/src/components/dashboard/system_options/SystemSettings.tsx
new file mode 100644
index 00000000..b2e43f62
--- /dev/null
+++ b/src/components/dashboard/system_options/SystemSettings.tsx
@@ -0,0 +1,104 @@
+import {
+  Box,
+  HStack,
+  Icon,
+  NumberInput,
+  NumberInputField,
+  Text,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react';
+import { useState, useEffect } from 'react';
+import { LuInfo } from 'react-icons/lu';
+
+interface SystemSettingsProps {
+  allowedAbsences: number;
+  originalAbsenceCap: number;
+  handleUpdateAbsenceCap: (value: number) => void;
+}
+
+const SystemSettings: React.FC<SystemSettingsProps> = ({
+  allowedAbsences,
+  originalAbsenceCap,
+  handleUpdateAbsenceCap,
+}) => {
+  const [inputValue, setInputValue] = useState<string>(
+    allowedAbsences.toString()
+  );
+
+  const handleChange = (valueAsString: string, valueAsNumber: number) => {
+    // Update the displayed input value
+    setInputValue(valueAsString);
+
+    // Only update the actual value if it's a valid number and different from original
+    if (!isNaN(valueAsNumber) && valueAsNumber !== originalAbsenceCap) {
+      handleUpdateAbsenceCap(valueAsNumber);
+    }
+  };
+
+  // Keep input value in sync with allowedAbsences
+  useEffect(() => {
+    setInputValue(allowedAbsences.toString());
+  }, [allowedAbsences]);
+
+  return (
+    <Box py={0}>
+      <HStack justify="space-between" alignItems="flex-start">
+        <VStack align="start" spacing={1}>
+          <HStack spacing={2} alignItems="center">
+            <Text textStyle="h4">Allowed Absences</Text>
+            <Tooltip
+              hasArrow
+              placement="top"
+              label={
+                <Box>
+                  <Text>
+                    The{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      recommended
+                    </Text>{' '}
+                    maximum absences for teachers. Appears in a teacher&apos;s{' '}
+                    <Text as="span" color="primaryBlue.300" fontWeight="bold">
+                      user profile
+                    </Text>{' '}
+                    and acts as a guideline.
+                  </Text>
+                </Box>
+              }
+              width="300px"
+            >
+              <span style={{ display: 'flex', alignItems: 'center' }}>
+                <Icon as={LuInfo} color="blue.500" />
+              </span>
+            </Tooltip>
+          </HStack>
+          <Text textStyle="subtitle" color="text.subtitle">
+            Per teacher per school year
+          </Text>
+        </VStack>
+        <NumberInput
+          value={inputValue}
+          onChange={handleChange}
+          width="83px"
+          variant="unstyled"
+          keepWithinRange={true}
+          min={0}
+        >
+          <NumberInputField
+            textAlign="left"
+            borderRadius="md"
+            border="1px solid"
+            borderColor="gray.200"
+            textStyle="subtitle"
+            fontSize="13px"
+            color="text.body"
+            paddingX={3}
+            paddingY={3}
+          />
+        </NumberInput>
+      </HStack>
+    </Box>
+  );
+};
+
+export default SystemSettings;
diff --git a/src/components/dashboard/system_options/UnsavedChangesDialog.tsx b/src/components/dashboard/system_options/UnsavedChangesDialog.tsx
new file mode 100644
index 00000000..438890a0
--- /dev/null
+++ b/src/components/dashboard/system_options/UnsavedChangesDialog.tsx
@@ -0,0 +1,107 @@
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { useRef } from 'react';
+import { IoWarning } from 'react-icons/io5';
+
+interface UnsavedChangesDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+const UnsavedChangesDialog: React.FC<UnsavedChangesDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+}) => {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      isCentered
+      blockScrollOnMount={false}
+      motionPreset="scale"
+      closeOnOverlayClick={false}
+      preserveScrollBarGap
+    >
+      <ModalOverlay bg="rgba(0, 0, 0, 0.4)" transition="all 0.3s ease" />
+      <ModalContent
+        p={8}
+        width="sm"
+        maxHeight="80vh"
+        boxShadow="2xl"
+        zIndex={1500}
+      >
+        <ModalHeader fontSize="lg" fontWeight="bold" pb={4} pt={0} px={0}>
+          <Text textStyle="h3" fontWeight="600">
+            Discard Changes?
+          </Text>
+        </ModalHeader>
+
+        <ModalBody pb={2} px={0}>
+          <VStack
+            spacing={4}
+            align="stretch"
+            p={4}
+            borderWidth="1px"
+            borderRadius="md"
+            borderStyle="dotted"
+            mb={2}
+          >
+            <HStack spacing={3} align="center">
+              <Box w="40px" textAlign="center">
+                <Icon as={IoWarning} color="orange.400" boxSize={5} />
+              </Box>
+              <Text textStyle="cellBody">
+                You have unsaved changes. Are you sure you want to close without
+                saving?
+              </Text>
+            </HStack>
+          </VStack>
+        </ModalBody>
+
+        <ModalFooter p={0}>
+          <Button
+            ref={cancelRef}
+            onClick={onClose}
+            flex="1"
+            size="lg"
+            colorScheme="blue"
+            variant="outline"
+            height="35px"
+            textStyle="button"
+          >
+            Keep Editing
+          </Button>
+          <Button
+            colorScheme="blue"
+            onClick={onConfirm}
+            ml={3}
+            flex="1"
+            size="lg"
+            height="35px"
+            textStyle="button"
+          >
+            Discard
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default UnsavedChangesDialog;
diff --git a/src/components/dashboard/user_management/EditableRoleCell.tsx b/src/components/dashboard/user_management/EditableRoleCell.tsx
new file mode 100644
index 00000000..11bca409
--- /dev/null
+++ b/src/components/dashboard/user_management/EditableRoleCell.tsx
@@ -0,0 +1,220 @@
+import {
+  Box,
+  HStack,
+  Icon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure,
+  useOutsideClick,
+  useTheme,
+} from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
+import { FiChevronDown, FiChevronUp, FiEdit2 } from 'react-icons/fi';
+import { IoCheckmark, IoCloseOutline } from 'react-icons/io5';
+
+type EditableRoleCellProps = {
+  role: string;
+  onRoleChange: (newRole: string) => void;
+};
+
+const EditableRoleCell = ({ role, onRoleChange }: EditableRoleCellProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [newRole, setNewRole] = useState(role);
+  const [isHovered, setIsHovered] = useState(false);
+  const theme = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const {
+    isOpen: isButtonsOpen,
+    onOpen: onButtonsOpen,
+    onClose: onButtonsClose,
+  } = useDisclosure();
+
+  useOutsideClick({
+    ref: containerRef,
+    handler: () => {
+      if (isEditing) {
+        setIsEditing(false);
+        setIsDropdownOpen(false);
+        setNewRole(role);
+        onButtonsClose();
+      }
+    },
+  });
+
+  // Synchronize the popovers
+  useEffect(() => {
+    if (isEditing) {
+      onButtonsOpen();
+    } else {
+      onButtonsClose();
+    }
+  }, [isEditing, onButtonsOpen, onButtonsClose]);
+
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setIsHovered(false);
+  };
+
+  const handleDropdownToggle = () => {
+    if (isEditing) {
+      setIsDropdownOpen(!isDropdownOpen);
+    }
+  };
+
+  const handleRoleChange = (selectedRole: string) => {
+    setNewRole(selectedRole);
+    setIsDropdownOpen(false);
+  };
+
+  const handleConfirmClick = () => {
+    onRoleChange(newRole);
+    setIsEditing(false);
+    setIsDropdownOpen(false);
+  };
+
+  const handleCancelClick = () => {
+    setNewRole(role);
+    setIsEditing(false);
+    setIsDropdownOpen(false);
+  };
+
+  const oppositeRole = newRole === 'TEACHER' ? 'ADMIN' : 'TEACHER';
+
+  return (
+    <Box
+      position="relative"
+      display="inline-flex"
+      alignItems="center"
+      onMouseEnter={() => !isEditing && setIsHovered(true)}
+      onMouseLeave={() => !isEditing && setIsHovered(false)}
+      ref={containerRef}
+    >
+      <Popover
+        isOpen={isDropdownOpen}
+        onClose={() => {
+          // Prevent auto-closing the popovers when buttons are clicked
+          if (!isButtonsOpen) {
+            setIsDropdownOpen(false);
+          }
+        }}
+        closeOnBlur={false}
+        placement="bottom"
+        gutter={1}
+      >
+        <PopoverTrigger>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            cursor="pointer"
+            onClick={isEditing ? handleDropdownToggle : handleEditClick}
+            bg={
+              isEditing
+                ? 'primaryBlue.50'
+                : isHovered
+                  ? 'neutralGray.100'
+                  : 'transparent'
+            }
+            p={2}
+            borderRadius="5px"
+            width="100px"
+          >
+            <Text textStyle="cellBody" flexGrow={1}>
+              {newRole === 'TEACHER' ? 'Teacher' : 'Admin'}
+            </Text>
+
+            <Box display="flex" alignItems="center">
+              {isEditing ? (
+                <Icon
+                  as={isDropdownOpen ? FiChevronUp : FiChevronDown}
+                  color="neutralGray.600"
+                />
+              ) : (
+                <Icon
+                  as={FiEdit2}
+                  color="neutralGray.600"
+                  opacity={isHovered ? 1 : 0}
+                  transition="opacity 0.3s ease-in-out"
+                />
+              )}
+            </Box>
+          </Box>
+        </PopoverTrigger>
+
+        <PopoverContent
+          width="100px"
+          p={0}
+          borderRadius="5px"
+          shadow="md"
+          border="1px solid"
+          borderColor="neutralGray.300"
+          _focus={{ boxShadow: 'none', outline: 'none' }}
+        >
+          <Box
+            p={2}
+            cursor="pointer"
+            borderRadius="5px"
+            _hover={{ bg: 'neutralGray.100' }}
+            _active={{ bg: 'neutralGray.300' }}
+            onClick={() => handleRoleChange(oppositeRole)}
+          >
+            <Text textStyle="cellBody" flexGrow={1}>
+              {oppositeRole === 'TEACHER' ? 'Teacher' : 'Admin'}
+            </Text>
+          </Box>
+        </PopoverContent>
+      </Popover>
+
+      {isEditing && (
+        <Popover isOpen={isButtonsOpen} placement="right" closeOnBlur={false}>
+          <PopoverTrigger>
+            <Box position="absolute" right="0" opacity="0" />
+          </PopoverTrigger>
+          <PopoverContent
+            width="auto"
+            p={0}
+            shadow="md"
+            borderColor="neutralGray.300"
+            _focus={{ boxShadow: 'none', outline: 'none' }}
+          >
+            <HStack spacing={0}>
+              <Box
+                p={1}
+                cursor="pointer"
+                _hover={{ bg: 'neutralGray.100' }}
+                _active={{ bg: 'neutralGray.300' }}
+                borderRadius={newRole !== role ? '5px 0 0 5px' : '5px'}
+                onClick={handleCancelClick}
+              >
+                <IoCloseOutline
+                  size={24}
+                  color={theme.colors.neutralGray[600]}
+                />
+              </Box>
+              {newRole !== role && (
+                <Box
+                  p={1}
+                  cursor="pointer"
+                  _hover={{ bg: 'neutralGray.100' }}
+                  _active={{ bg: 'neutralGray.300' }}
+                  borderRadius="0 5px 5px 0"
+                  onClick={handleConfirmClick}
+                >
+                  <IoCheckmark
+                    size={24}
+                    color={theme.colors.neutralGray[600]}
+                  />
+                </Box>
+              )}
+            </HStack>
+          </PopoverContent>
+        </Popover>
+      )}
+    </Box>
+  );
+};
+
+export default EditableRoleCell;
diff --git a/src/components/dashboard/user_management/EditableSubscriptionsCell.tsx b/src/components/dashboard/user_management/EditableSubscriptionsCell.tsx
new file mode 100644
index 00000000..75233083
--- /dev/null
+++ b/src/components/dashboard/user_management/EditableSubscriptionsCell.tsx
@@ -0,0 +1,381 @@
+import {
+  Box,
+  Checkbox,
+  Flex,
+  Icon,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Tag,
+  TagLabel,
+  Text,
+  WrapItem,
+} from '@chakra-ui/react';
+import { MailingList, SubjectAPI } from '@utils/types';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FiChevronDown, FiChevronUp, FiEdit2 } from 'react-icons/fi';
+
+interface SubjectTagProps {
+  subject: {
+    id: number;
+    name: string;
+    colorGroup: {
+      colorCodes: string[];
+    };
+  };
+}
+
+const SubjectTag: React.FC<SubjectTagProps> = ({ subject }) => (
+  <Tag height="28px" variant="subtle" bg={subject.colorGroup.colorCodes[3]}>
+    <TagLabel>
+      <Text
+        color={subject.colorGroup.colorCodes[0]}
+        textStyle="label"
+        whiteSpace="nowrap"
+        overflow="hidden"
+      >
+        {subject.name}
+      </Text>
+    </TagLabel>
+  </Tag>
+);
+
+interface EditableSubscriptionsCellProps {
+  mailingLists: MailingList[];
+  allSubjects: SubjectAPI[];
+  onSubscriptionsChange: (subjectIds: number[]) => void;
+}
+
+const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
+  mailingLists,
+  allSubjects,
+  onSubscriptionsChange,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [selectedSubjectIds, setSelectedSubjectIds] = useState<number[]>([]);
+  const [localMailingLists, setLocalMailingLists] =
+    useState<MailingList[]>(mailingLists);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [closeTriggeredByTriggerClick, setCloseTriggeredByTriggerClick] =
+    useState(false);
+  const [popoverClosingByOutsideClick, setPopoverClosingByOutsideClick] =
+    useState(false);
+
+  // Create a map of subjects by ID for quick lookup
+  const subjectsById = useMemo(() => {
+    const map: Record<number, SubjectAPI> = {};
+    allSubjects.forEach((subject) => {
+      map[subject.id] = subject;
+    });
+    return map;
+  }, [allSubjects]);
+
+  // Get sorted subjects for dropdown display
+  const sortedSubjects = useMemo(() => {
+    return [...allSubjects].sort((a, b) => {
+      // First sort by archived status (unarchived first)
+      if (a.archived !== b.archived) {
+        return a.archived ? 1 : -1;
+      }
+      // Then sort by ID
+      return a.id - b.id;
+    });
+  }, [allSubjects]);
+
+  // Define saveSubscriptions with useCallback so it can be used in dependency arrays
+  const saveSubscriptions = useCallback(() => {
+    // Don't save if nothing has changed
+    const currentIds = new Set(mailingLists.map((list) => list.subjectId));
+    const selectedIds = new Set(selectedSubjectIds);
+
+    // Check if the sets are identical - converted to arrays to avoid linter error
+    const currentIdsArray = Array.from(currentIds);
+    if (
+      currentIds.size === selectedIds.size &&
+      currentIdsArray.every((id) => selectedIds.has(id))
+    ) {
+      return;
+    }
+
+    setIsSaving(true);
+    // Initiate the save but don't wait for it to complete
+    Promise.resolve(onSubscriptionsChange(selectedSubjectIds)).finally(() => {
+      setIsSaving(false);
+    });
+  }, [mailingLists, selectedSubjectIds, onSubscriptionsChange]);
+
+  // Initialize selected subjects from current mailing lists
+  useEffect(() => {
+    if (!isSaving) {
+      setSelectedSubjectIds(mailingLists.map((list) => list.subjectId));
+      setLocalMailingLists(mailingLists);
+    }
+  }, [mailingLists, isSaving]);
+
+  // Update local mailing lists when selection changes
+  useEffect(() => {
+    // Create new mailing lists based on selected subject IDs
+    const newMailingListsUnsorted = selectedSubjectIds
+      .map((id) => {
+        // Try to find existing mailing list first
+        const existingList = mailingLists.find((list) => list.subjectId === id);
+        if (existingList) return existingList;
+
+        // If not, create a new one based on the subject from our full subjects list
+        const subject = subjectsById[id];
+
+        if (!subject) return null;
+
+        return {
+          subjectId: subject.id,
+          subject: subject,
+        } as MailingList;
+      })
+      .filter(Boolean) as MailingList[];
+
+    // Sort the new mailing lists by archived status and ID
+    const sortedMailingLists = [...newMailingListsUnsorted].sort((a, b) => {
+      // First sort by archived status (unarchived first)
+      if (a.subject.archived !== b.subject.archived) {
+        return a.subject.archived ? 1 : -1;
+      }
+      // Then sort by ID
+      return a.subjectId - b.subjectId;
+    });
+
+    setLocalMailingLists(sortedMailingLists);
+  }, [selectedSubjectIds, mailingLists, subjectsById]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // If popover is open, the popover's onClose handler will handle it
+      // Only handle clicks outside when popover is already closed and we're in edit mode
+      if (
+        isEditing &&
+        !isPopoverOpen &&
+        !popoverClosingByOutsideClick && // Ignore clicks when popover is being closed
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsEditing(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isEditing, isPopoverOpen, popoverClosingByOutsideClick]);
+
+  // Separate edit icon click handler
+  const handleEditIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // Only trigger if not already in edit mode
+    if (!isEditing) {
+      setIsEditing(true);
+      setIsHovered(false);
+    }
+  };
+
+  // Main cell area click handler
+  const handleEditAreaClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    // If already in edit mode, toggle popover
+    if (isEditing) {
+      if (isPopoverOpen) {
+        // Close the popover but keep edit mode active
+        setCloseTriggeredByTriggerClick(true);
+        setIsPopoverOpen(false);
+      } else {
+        // Open the popover
+        setIsPopoverOpen(true);
+      }
+    } else {
+      // First click on cell, just enter edit mode
+      setIsEditing(true);
+      setIsHovered(false);
+    }
+  };
+
+  const handleSubjectChange = (subjectId: number, e?: React.MouseEvent) => {
+    // Prevent this click from triggering document clicks
+    e?.stopPropagation();
+
+    setSelectedSubjectIds((prev) => {
+      if (prev.includes(subjectId)) {
+        return prev.filter((id) => id !== subjectId);
+      } else {
+        return [...prev, subjectId];
+      }
+    });
+  };
+
+  const handleClose = () => {
+    // Track that popover is being closed
+    const wasPopoverOpen = isPopoverOpen;
+
+    if (wasPopoverOpen && !closeTriggeredByTriggerClick) {
+      // This is a close from clicking outside - set flag
+      setPopoverClosingByOutsideClick(true);
+
+      // Clear the flag after a short delay to allow the click event to propagate
+      setTimeout(() => {
+        setPopoverClosingByOutsideClick(false);
+      }, 500);
+    }
+
+    setIsPopoverOpen(false);
+
+    setTimeout(() => {
+      // Save the subscriptions after the popover has closed
+      saveSubscriptions();
+    }, 300);
+
+    // If the close wasn't triggered by clicking on the trigger area,
+    // exit editing mode (outside click)
+    if (!closeTriggeredByTriggerClick) {
+      setIsEditing(false);
+    }
+
+    // Reset the flag for next time
+    setCloseTriggeredByTriggerClick(false);
+  };
+
+  return (
+    <Box
+      position="relative"
+      display="inline-flex"
+      alignItems="center"
+      width="100%"
+      onMouseEnter={() => !isEditing && setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      ref={containerRef}
+    >
+      <Popover
+        isOpen={isPopoverOpen}
+        onClose={handleClose}
+        placement="bottom-start"
+        autoFocus={false}
+        closeOnBlur={true}
+        gutter={0}
+      >
+        <PopoverTrigger>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            cursor="pointer"
+            onClick={handleEditAreaClick}
+            bg={
+              isEditing
+                ? 'primaryBlue.50'
+                : isHovered
+                  ? 'neutralGray.100'
+                  : 'transparent'
+            }
+            p={2}
+            borderRadius="md"
+            width="100%"
+            transition="background-color 0.3s ease-in-out"
+            ref={triggerRef}
+          >
+            <Flex gap={2} wrap="nowrap">
+              {localMailingLists.map((list, index) => (
+                <WrapItem key={`${list.subjectId}-${index}`}>
+                  <SubjectTag subject={list.subject} />
+                </WrapItem>
+              ))}
+            </Flex>
+
+            <Box
+              display="flex"
+              alignItems="center"
+              ml={2}
+              onClick={isEditing ? handleEditAreaClick : handleEditIconClick}
+            >
+              {isEditing ? (
+                <Icon
+                  as={isPopoverOpen ? FiChevronUp : FiChevronDown}
+                  color="neutralGray.600"
+                />
+              ) : (
+                <Icon
+                  as={FiEdit2}
+                  color="neutralGray.600"
+                  opacity={isHovered ? 1 : 0}
+                  transition="opacity 0.3s ease-in-out"
+                />
+              )}
+            </Box>
+          </Box>
+        </PopoverTrigger>
+
+        <PopoverContent
+          width={
+            triggerRef.current?.offsetWidth
+              ? `${triggerRef.current.offsetWidth}px`
+              : '100%'
+          }
+          borderColor="neutralGray.300"
+          ref={popoverRef}
+          zIndex={1}
+          mt="2px"
+        >
+          <PopoverBody p={0} maxHeight="300px" overflowY="auto" zIndex={1}>
+            {sortedSubjects.map((subject) => {
+              const isSelected = selectedSubjectIds.includes(subject.id);
+              const bgColor = subject.colorGroup.colorCodes[1];
+              const borderColor = subject.colorGroup.colorCodes[1];
+
+              return (
+                <Box
+                  key={subject.id}
+                  p={2.5}
+                  pl={4}
+                  display="flex"
+                  alignItems="center"
+                  _hover={{ bg: 'neutralGray.100' }}
+                  onClick={(e) => handleSubjectChange(subject.id, e)}
+                  cursor="pointer"
+                >
+                  <Checkbox
+                    isChecked={isSelected}
+                    onChange={(e) => {
+                      e.nativeEvent.stopPropagation();
+                      handleSubjectChange(subject.id);
+                    }}
+                    mr={2}
+                    _checked={{
+                      '& .chakra-checkbox__control': {
+                        bg: bgColor,
+                        borderColor: borderColor,
+                      },
+                    }}
+                    _hover={{
+                      '& .chakra-checkbox__control': {
+                        borderColor: borderColor,
+                        bg: bgColor,
+                        opacity: 0.7,
+                      },
+                    }}
+                    borderColor={borderColor}
+                  />
+                  <Text textStyle="label">{subject.name}</Text>
+                </Box>
+              );
+            })}
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+};
+
+export default EditableSubscriptionsCell;
diff --git a/src/components/FilterPopup.tsx b/src/components/dashboard/user_management/FilterPopup.tsx
similarity index 98%
rename from src/components/FilterPopup.tsx
rename to src/components/dashboard/user_management/FilterPopup.tsx
index ed85c11c..77cf3910 100644
--- a/src/components/FilterPopup.tsx
+++ b/src/components/dashboard/user_management/FilterPopup.tsx
@@ -6,30 +6,28 @@ import {
   Icon,
   NumberInput,
   NumberInputField,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Spacer,
   Tag,
   TagLabel,
   Text,
   VStack,
   useDisclosure,
-  useOutsideClick,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverArrow,
 } from '@chakra-ui/react';
-import { FilterOptions, Role } from '@utils/types';
-import React, { useMemo, useRef } from 'react';
+import { ComparisonOperator, FilterOptions, Role } from '@utils/types';
+import { useMemo } from 'react';
 import { BiRevision } from 'react-icons/bi';
 import { IoFilterOutline } from 'react-icons/io5';
 import OperatorMenu from './OperatorMenu';
-import { ComparisonOperator } from '@utils/types';
 
 interface FilterPopupProps {
   filters: FilterOptions;
   setFilters: (filters: FilterOptions) => void;
   availableTags: string[];
   tagColors?: Record<string, string[]>;
+  isDisabled?: boolean;
 }
 
 // Special tag identifier for users with no email tags
@@ -40,6 +38,7 @@ export const FilterPopup: React.FC<FilterPopupProps> = ({
   setFilters,
   availableTags,
   tagColors = {},
+  isDisabled = false,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -128,6 +127,7 @@ export const FilterPopup: React.FC<FilterPopupProps> = ({
           justifyContent="space-between"
           px={3}
           transition="all 0.3s ease-in-out"
+          isDisabled={isDisabled}
         >
           <HStack
             spacing={activeFilterCount > 0 ? 2 : 1}
diff --git a/src/components/OperatorMenu.tsx b/src/components/dashboard/user_management/OperatorMenu.tsx
similarity index 98%
rename from src/components/OperatorMenu.tsx
rename to src/components/dashboard/user_management/OperatorMenu.tsx
index f65b74a3..1153db70 100644
--- a/src/components/OperatorMenu.tsx
+++ b/src/components/dashboard/user_management/OperatorMenu.tsx
@@ -84,7 +84,7 @@ const OperatorMenu: React.FC<OperatorMenuProps> = ({
                   'less_than',
                   'equal_to',
                 ] as ComparisonOperator[]
-              ).map((operator, index, arr) => (
+              ).map((operator) => (
                 <Box
                   key={operator}
                   p={2}
diff --git a/src/components/dashboard/user_management/UserManagementCard.tsx b/src/components/dashboard/user_management/UserManagementCard.tsx
new file mode 100644
index 00000000..55dffe2c
--- /dev/null
+++ b/src/components/dashboard/user_management/UserManagementCard.tsx
@@ -0,0 +1,245 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { MailingList, Role, SubjectAPI, UserAPI } from '@utils/types';
+import { useCallback, useEffect, useState } from 'react';
+import { UserManagementTable } from './UserManagementTable';
+
+interface UserManagementCardProps {
+  setRefreshFunction?: (refreshFn: () => void) => void;
+  selectedYearRange: string;
+}
+
+const UserManagementCard: React.FC<UserManagementCardProps> = ({
+  setRefreshFunction,
+  selectedYearRange,
+}) => {
+  const [users, setUsers] = useState<UserAPI[]>([]);
+  const [subjects, setSubjects] = useState<SubjectAPI[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [absenceCap, setAbsenceCap] = useState<number>(10);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [pendingUser, setPendingUser] = useState<UserAPI | null>(null);
+  const [pendingRole, setPendingRole] = useState<Role | null>(null);
+
+  // Define fetchData function with useCallback to allow it to be stable
+  const fetchData = useCallback(async () => {
+    try {
+      // Fetch all subjects first
+      const subjectsResponse = await fetch('/api/subjects');
+      if (!subjectsResponse.ok) throw new Error('Failed to fetch subjects');
+      const subjectsData = await subjectsResponse.json();
+      setSubjects(subjectsData);
+
+      const usersResponse = await fetch(
+        '/api/users?getAbsences=true&getMailingLists=true'
+      );
+      if (!usersResponse.ok) throw new Error('Failed to fetch users');
+      const usersData = await usersResponse.json();
+      setUsers(usersData);
+
+      const settingsResponse = await fetch('/api/settings');
+      if (!settingsResponse.ok) throw new Error('Failed to fetch settings');
+      const settings = await settingsResponse.json();
+      setAbsenceCap(settings.absenceCap);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Initial data loading
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Register our fetchData function with the parent component
+  useEffect(() => {
+    if (setRefreshFunction) {
+      setRefreshFunction(fetchData);
+    }
+  }, [setRefreshFunction, fetchData]);
+
+  const handleConfirmRoleChange = (userId: number, newRole: Role) => {
+    const user = users.find((u) => u.id === userId);
+    if (!user) return;
+
+    setPendingUser(user);
+    setPendingRole(newRole);
+    onOpen();
+  };
+
+  const confirmUpdateUserRole = async () => {
+    if (!pendingUser || !pendingRole) return;
+
+    const apiUrl = `/api/users/${pendingUser.id}`;
+    const originalUsers = [...users];
+
+    setUsers((prevUsers) =>
+      prevUsers.map((user) =>
+        user.id === pendingUser.id ? { ...user, role: pendingRole } : user
+      )
+    );
+
+    try {
+      const response = await fetch(apiUrl, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ role: pendingRole }),
+      });
+
+      if (!response.ok) {
+        setUsers(originalUsers);
+        throw new Error(response.statusText);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error('Error updating user:', error.message);
+      }
+    } finally {
+      onClose();
+      setPendingUser(null);
+      setPendingRole(null);
+    }
+  };
+
+  // Utility function to sort mailing lists
+  const sortMailingLists = (lists: MailingList[]) => {
+    return [...lists].sort((a, b) => {
+      // First sort by archived status (unarchived first)
+      if (a.subject.archived !== b.subject.archived) {
+        return a.subject.archived ? 1 : -1;
+      }
+      // Then sort by ID
+      return a.subject.id - b.subject.id;
+    });
+  };
+
+  const updateUserSubscriptions = async (
+    userId: number,
+    subjectIds: number[]
+  ) => {
+    const originalUsers = [...users];
+    const user = users.find((u) => u.id === userId);
+
+    if (!user) return;
+
+    // Get the complete subject objects for all selected subject IDs
+    const unsortedMailingLists = subjectIds.map((subjectId) => {
+      // Find this subject in our subjects list
+      const subjectData = subjects.find((s) => s.id === subjectId);
+
+      // Find existing mailing list for this subject if it exists
+      const existingMailingList = user.mailingLists?.find(
+        (ml) => ml.subject.id === subjectId
+      );
+
+      // If it exists, keep its data
+      if (existingMailingList) {
+        return existingMailingList;
+      }
+
+      // Otherwise create a new entry with full subject data
+      return {
+        userId: userId,
+        subjectId: subjectId,
+        user: user,
+        subject: subjectData || user.mailingLists?.[0]?.subject || null,
+      };
+    });
+
+    // Sort the mailing lists by archived status and ID
+    const updatedMailingLists = sortMailingLists(unsortedMailingLists);
+
+    // Optimistically update UI with complete data
+    setUsers((prevUsers) =>
+      prevUsers.map((u) =>
+        u.id === userId ? { ...u, mailingLists: updatedMailingLists } : u
+      )
+    );
+
+    // Make the API call in the background
+    try {
+      const response = await fetch(`/api/users/${userId}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ mailingListSubjectIds: subjectIds }),
+      });
+
+      if (!response.ok) {
+        // Restore original state on error
+        setUsers(originalUsers);
+        throw new Error(response.statusText);
+      }
+
+      // Skip refreshing data - our optimistic update is already using complete data
+      // The server response should match what we've already rendered
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error('Error updating user subscriptions:', error.message);
+      }
+      setUsers(originalUsers);
+    }
+  };
+
+  return (
+    <Box
+      height="100%"
+      display="flex"
+      flexDirection="column"
+      flex="1"
+      minHeight="0"
+    >
+      <UserManagementTable
+        users={users}
+        updateUserRole={handleConfirmRoleChange}
+        updateUserSubscriptions={updateUserSubscriptions}
+        absenceCap={absenceCap}
+        allSubjects={subjects}
+        selectedYearRange={selectedYearRange}
+        isLoading={loading}
+      />
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Confirm Role Change</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>
+              Are you sure you want to change{' '}
+              <strong>
+                {pendingUser?.firstName} {pendingUser?.lastName}
+              </strong>
+              &rsquo;s role to <strong>{pendingRole}</strong>?
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose} mr={3}>
+              Cancel
+            </Button>
+            <Button onClick={confirmUpdateUserRole}>Confirm</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+};
+
+export default UserManagementCard;
diff --git a/src/components/UserManagementTable.tsx b/src/components/dashboard/user_management/UserManagementTable.tsx
similarity index 73%
rename from src/components/UserManagementTable.tsx
rename to src/components/dashboard/user_management/UserManagementTable.tsx
index c4f09418..a7c49ff8 100644
--- a/src/components/UserManagementTable.tsx
+++ b/src/components/dashboard/user_management/UserManagementTable.tsx
@@ -4,15 +4,12 @@ import {
   Avatar,
   Box,
   Divider,
-  Flex,
   HStack,
   Icon,
   Input,
   InputGroup,
   InputLeftElement,
   Table,
-  Tag,
-  TagLabel,
   Tbody,
   Td,
   Text,
@@ -20,11 +17,11 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react';
-
-import { getAbsenceColor } from '@utils/getAbsenceColor';
-import { FilterOptions, Role, UserAPI } from '@utils/types';
 import useUserFiltering from '@hooks/useUserFiltering';
-import React, { useEffect, useState } from 'react';
+import { getAbsenceColor } from '@utils/getAbsenceColor';
+import { getSelectedYearAbsences as computeYearlyAbsences } from '@utils/getSelectedYearAbsences';
+import { FilterOptions, Role, SubjectAPI, UserAPI } from '@utils/types';
+import { useEffect, useState } from 'react';
 import {
   FiClock,
   FiLock,
@@ -34,7 +31,8 @@ import {
   FiUser,
 } from 'react-icons/fi';
 import EditableRoleCell from './EditableRoleCell';
-import FilterPopup, { NO_EMAIL_TAGS } from './FilterPopup';
+import EditableSubscriptionsCell from './EditableSubscriptionsCell';
+import FilterPopup from './FilterPopup';
 
 type SortField = 'name' | 'email' | 'absences' | 'role';
 
@@ -43,13 +41,21 @@ type SortDirection = 'asc' | 'desc';
 interface UserManagementTableProps {
   users: UserAPI[];
   updateUserRole: (userId: number, newRole: Role) => void;
+  updateUserSubscriptions: (userId: number, subjectIds: number[]) => void;
   absenceCap: number;
+  allSubjects?: SubjectAPI[];
+  isLoading?: boolean;
+  selectedYearRange: string;
 }
 
 export const UserManagementTable: React.FC<UserManagementTableProps> = ({
   users,
   updateUserRole,
+  updateUserSubscriptions,
   absenceCap,
+  allSubjects: propSubjects,
+  isLoading = false,
+  selectedYearRange,
 }) => {
   const [sortField, setSortField] = useState<SortField>('name');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
@@ -62,6 +68,34 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [availableTags, setAvailableTags] = useState<string[]>([]);
   const [tagColors, setTagColors] = useState<Record<string, string[]>>({});
+  const [allSubjects, setAllSubjects] = useState<SubjectAPI[]>([]);
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const getSelectedYearAbsences = (absences?: any[]) =>
+    computeYearlyAbsences(absences, selectedYearRange);
+
+  useEffect(() => {
+    // Use subjects from props if available, otherwise fetch them
+    if (propSubjects && propSubjects.length > 0) {
+      setAllSubjects(propSubjects);
+    } else {
+      // Fetch all available subjects
+      const fetchSubjects = async () => {
+        try {
+          const response = await fetch('/api/subjects');
+          if (response.ok) {
+            const data = await response.json();
+            setAllSubjects(data);
+          } else {
+            console.error('Failed to fetch subjects');
+          }
+        } catch (error) {
+          console.error('Error fetching subjects:', error);
+        }
+      };
+
+      fetchSubjects();
+    }
+  }, [propSubjects]);
 
   // Extract unique tags and their colors from users' mailing lists
   useEffect(() => {
@@ -106,7 +140,8 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
     filters,
     searchTerm,
     sortField,
-    sortDirection
+    sortDirection,
+    getSelectedYearAbsences
   );
 
   const SortIcon = ({ field }: { field: SortField }) => {
@@ -194,23 +229,20 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
               <Icon as={FiSearch} color="neutralGray.600" boxSize={6} />
             </InputLeftElement>
             <Input
-              borderColor={'neutralGray.300'}
+              borderColor="neutralGray.300"
               paddingRight={0}
               color="black"
               value={searchTerm}
               onChange={handleSearchChange}
-              onFocus={(e) => {
-                e.target.style.width = '270px';
-                e.target.style.flex = '1';
-              }}
-              onBlur={(e) => {
-                if (!e.target.value) {
-                  e.target.style.width = '0px';
-                  e.target.style.flex = '0';
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => {
+                if (!searchTerm) {
+                  setIsSearchFocused(false);
                 }
               }}
+              width={isSearchFocused || searchTerm ? '270px' : '0px'}
               transition="width 0.3s ease"
-              width={searchTerm ? '270px' : '0px'}
+              isDisabled={isLoading}
               margin={0}
             />
           </InputGroup>
@@ -220,6 +252,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
             setFilters={setFilters}
             availableTags={availableTags}
             tagColors={tagColors}
+            isDisabled={isLoading}
           />
         </HStack>
       </HStack>
@@ -230,16 +263,16 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
           <Thead
             position="sticky"
             top={0}
-            zIndex={1}
+            zIndex={1000} // Make sure it's above the popover for editing email subscriptions
             bg="white"
             boxShadow="0 1px 1px rgba(227, 227, 227, 1)"
           >
-            <Tr borderColor={'red'}>
+            <Tr>
               <SortableHeader field="name" label="Name" icon={FiUser} />
               <SortableHeader field="email" label="Email" icon={FiMail} />
               <SortableHeader
                 field="absences"
-                label="Absent"
+                label="Abs."
                 icon={FiClock}
                 centered
               />
@@ -261,8 +294,9 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
           </Thead>
 
           <Tbody>
-            {sortedUsers.length > 0
-              ? sortedUsers.map((user, index) => (
+            {isLoading
+              ? null
+              : sortedUsers.map((user, index) => (
                   <Tr
                     key={index}
                     sx={{
@@ -275,8 +309,13 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
                           size="sm"
                           name={`${user.firstName} ${user.lastName}`}
                           src={user.profilePicture || undefined}
+                          loading="eager"
+                          ignoreFallback
                         />
-                        <Text textStyle="cellBold">{`${user.firstName} ${user.lastName}`}</Text>
+
+                        <Text textStyle="cellBold" whiteSpace="nowrap">
+                          {`${user.firstName} ${user.lastName}`}
+                        </Text>
                       </HStack>
                     </Td>
                     <Td color="gray.600">
@@ -286,11 +325,11 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
                       <Text
                         textStyle="cellBold"
                         color={getAbsenceColor(
-                          user.absences?.length || 0,
+                          getSelectedYearAbsences(user.absences),
                           absenceCap
                         )}
                       >
-                        {user.absences?.length || 0}
+                        {getSelectedYearAbsences(user.absences)}{' '}
                       </Text>
                     </Td>
                     <Td py="6px">
@@ -303,33 +342,16 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
                       />
                     </Td>
                     <Td py="6px">
-                      <Flex gap={2} wrap="nowrap">
-                        {user.mailingLists?.map((mailingList, index) => (
-                          <Tag
-                            height="28px"
-                            variant="subtle"
-                            bg={mailingList.subject.colorGroup.colorCodes[3]}
-                            key={index}
-                          >
-                            <TagLabel>
-                              <Text
-                                color={
-                                  mailingList.subject.colorGroup.colorCodes[0]
-                                }
-                                textStyle="label"
-                                whiteSpace="nowrap"
-                                overflow="hidden"
-                              >
-                                {mailingList.subject.name}
-                              </Text>
-                            </TagLabel>
-                          </Tag>
-                        ))}
-                      </Flex>
+                      <EditableSubscriptionsCell
+                        mailingLists={user.mailingLists || []}
+                        allSubjects={allSubjects}
+                        onSubscriptionsChange={(subjectIds) =>
+                          updateUserSubscriptions(user.id, subjectIds)
+                        }
+                      />
                     </Td>
                   </Tr>
-                ))
-              : null}
+                ))}
           </Tbody>
         </Table>
       </Box>
diff --git a/src/components/AdminTeacherToggle.tsx b/src/components/header/calendar/AdminTeacherToggle.tsx
similarity index 100%
rename from src/components/AdminTeacherToggle.tsx
rename to src/components/header/calendar/AdminTeacherToggle.tsx
diff --git a/src/components/CalendarHeader.tsx b/src/components/header/calendar/CalendarHeader.tsx
similarity index 85%
rename from src/components/CalendarHeader.tsx
rename to src/components/header/calendar/CalendarHeader.tsx
index b0ff6796..3d1859cb 100644
--- a/src/components/CalendarHeader.tsx
+++ b/src/components/header/calendar/CalendarHeader.tsx
@@ -7,13 +7,12 @@ import {
   Text,
   useTheme,
 } from '@chakra-ui/react';
-
 import { UserData } from '@utils/types';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { IoChevronBack, IoChevronForward, IoStatsChart } from 'react-icons/io5';
+import ProfileMenu from '../profile/ProfileMenu';
 import { AdminTeacherToggle } from './AdminTeacherToggle';
-import ProfileMenu from './ProfileMenu';
 
 interface CalendarHeaderProps {
   currentMonthYear: string;
@@ -38,20 +37,20 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   const router = useRouter();
   const [absenceCap, setAbsenceCap] = useState<number>(10);
 
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const response = await fetch('/api/settings');
-        if (!response.ok) throw new Error('Failed to fetch settings');
-        const data = await response.json();
-        setAbsenceCap(data.absenceCap);
-      } catch (error) {
-        console.error('Error fetching settings:', error);
-      }
-    };
+  const fetchSettings = useCallback(async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (!response.ok) throw new Error('Failed to fetch settings');
+      const data = await response.json();
+      setAbsenceCap(data.absenceCap);
+    } catch (error) {
+      console.error('Error fetching settings:', error);
+    }
+  }, []);
 
+  useEffect(() => {
     fetchSettings();
-  }, []);
+  }, [fetchSettings]);
 
   const isAdmin = userData?.role === 'ADMIN';
 
@@ -88,7 +87,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             variant="outline"
           />
         </HStack>
-        <Text textStyle="h1" whiteSpace="nowrap" overflow="hidden" pl={2}>
+        <Text textStyle="h1" whiteSpace="nowrap" overflow="hidden">
           {currentMonthYear}
         </Text>
       </HStack>
diff --git a/src/components/DashboardHeader.tsx b/src/components/header/dashboard/DashboardHeader.tsx
similarity index 54%
rename from src/components/DashboardHeader.tsx
rename to src/components/header/dashboard/DashboardHeader.tsx
index d9a198c6..42d29272 100644
--- a/src/components/DashboardHeader.tsx
+++ b/src/components/header/dashboard/DashboardHeader.tsx
@@ -4,14 +4,16 @@ import {
   IconButton,
   Spacer,
   Text,
+  useDisclosure,
   useTheme,
 } from '@chakra-ui/react';
 import { UserData } from '@utils/types';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { IoChevronBack } from 'react-icons/io5';
+import { useCallback, useEffect, useState } from 'react';
+import { IoChevronBack, IoSettingsOutline } from 'react-icons/io5';
+import SystemOptionsModal from '../../dashboard/system_options/SystemOptionsModal';
+import ProfileMenu from '../profile/ProfileMenu';
 import ExportAbsencesButton from './ExportAbsencesButton';
-import ProfileMenu from './ProfileMenu';
 import YearDropdown from './YearDropdown';
 
 interface DashboardHeaderProps {
@@ -20,6 +22,8 @@ interface DashboardHeaderProps {
   setSelectedYearRange: (yearRange: string) => void;
   yearRanges: string[];
   hasData: boolean;
+  onSystemOptionsUpdate: () => void;
+  setRefreshFunction?: (refreshFn: () => void) => void;
 }
 
 const DashboardHeader: React.FC<DashboardHeaderProps> = ({
@@ -28,25 +32,35 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
   setSelectedYearRange,
   yearRanges,
   hasData,
+  onSystemOptionsUpdate,
+  setRefreshFunction,
 }) => {
   const theme = useTheme();
   const router = useRouter();
   const [absenceCap, setAbsenceCap] = useState<number>(10);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const fetchSettings = useCallback(async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (!response.ok) throw new Error('Failed to fetch settings');
+      const data = await response.json();
+      setAbsenceCap(data.absenceCap);
+    } catch (error) {
+      console.error('Error fetching settings:', error);
+    }
+  }, []);
+
+  // Register our fetchSettings function with the parent component if needed
   useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const response = await fetch('/api/settings');
-        if (!response.ok) throw new Error('Failed to fetch settings');
-        const data = await response.json();
-        setAbsenceCap(data.absenceCap);
-      } catch (error) {
-        console.error('Error fetching settings:', error);
-      }
-    };
+    if (setRefreshFunction) {
+      setRefreshFunction(fetchSettings);
+    }
+  }, [setRefreshFunction, fetchSettings]);
 
+  useEffect(() => {
     fetchSettings();
-  }, []);
+  }, [fetchSettings, onSystemOptionsUpdate]);
 
   return (
     <Flex
@@ -87,9 +101,27 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
           />
         )}
 
-        <ExportAbsencesButton />
+        <IconButton
+          aria-label="System Options"
+          icon={
+            <IoSettingsOutline
+              size={24}
+              color={theme.colors.neutralGray[600]}
+            />
+          }
+          variant="outline"
+          onClick={onOpen}
+        />
+        {hasData && <ExportAbsencesButton selectedRange={selectedYearRange} />}
         <ProfileMenu userData={userData} absenceCap={absenceCap} />
       </HStack>
+
+      <SystemOptionsModal
+        isOpen={isOpen}
+        onClose={onClose}
+        absenceCap={absenceCap}
+        onUpdateComplete={onSystemOptionsUpdate}
+      />
     </Flex>
   );
 };
diff --git a/src/components/ExportAbsencesButton.tsx b/src/components/header/dashboard/ExportAbsencesButton.tsx
similarity index 74%
rename from src/components/ExportAbsencesButton.tsx
rename to src/components/header/dashboard/ExportAbsencesButton.tsx
index 099147be..296cc0f7 100644
--- a/src/components/ExportAbsencesButton.tsx
+++ b/src/components/header/dashboard/ExportAbsencesButton.tsx
@@ -1,8 +1,9 @@
 import { Box, Button, Text } from '@chakra-ui/react';
+import { getSelectedYearAbsences } from '@utils/getSelectedYearAbsences';
 import { useState } from 'react';
 import { FiDownload } from 'react-icons/fi';
 
-const ExportAbsencesButton = () => {
+const ExportAbsencesButton = ({ selectedRange }: { selectedRange: string }) => {
   const [error, setError] = useState<string | null>(null);
 
   const convertToCSV = (data: any[]) => {
@@ -42,6 +43,20 @@ const ExportAbsencesButton = () => {
     return headers + rows;
   };
 
+  const getFilteredAbsences = (
+    absences: { lessonDate: string }[],
+    selectedRange: string
+  ) => {
+    return absences
+      .filter(
+        (absence) => getSelectedYearAbsences([absence], selectedRange) > 0
+      )
+      .sort(
+        (a, b) =>
+          new Date(a.lessonDate).getTime() - new Date(b.lessonDate).getTime()
+      );
+  };
+
   const handleDownload = async () => {
     try {
       setError(null);
@@ -52,7 +67,9 @@ const ExportAbsencesButton = () => {
       }
 
       const data = await response.json();
-      const csvData = convertToCSV(data.events);
+      const filteredAbsences = getFilteredAbsences(data.events, selectedRange);
+
+      const csvData = convertToCSV(filteredAbsences);
       const blob = new Blob([csvData], { type: 'text/csv' });
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
@@ -64,8 +81,10 @@ const ExportAbsencesButton = () => {
         .replace(/:/g, '-')
         .split('.')[0];
 
+      const sanitizedRange = selectedRange.replace(/ /g, '').replace('-', '_');
+
       link.href = url;
-      link.download = `absences_${timestamp}.csv`;
+      link.download = `absences_${sanitizedRange}_generated_at_${timestamp}.csv`;
       link.click();
       URL.revokeObjectURL(url);
     } catch (err) {
diff --git a/src/components/YearDropdown.tsx b/src/components/header/dashboard/YearDropdown.tsx
similarity index 100%
rename from src/components/YearDropdown.tsx
rename to src/components/header/dashboard/YearDropdown.tsx
diff --git a/src/components/ProfileMenu.tsx b/src/components/header/profile/ProfileMenu.tsx
similarity index 77%
rename from src/components/ProfileMenu.tsx
rename to src/components/header/profile/ProfileMenu.tsx
index f2af26f7..72ce5ddb 100644
--- a/src/components/ProfileMenu.tsx
+++ b/src/components/header/profile/ProfileMenu.tsx
@@ -8,15 +8,13 @@ import {
   MenuButton,
   MenuList,
   Text,
-  useTheme,
-  useToast,
 } from '@chakra-ui/react';
 import { NEXT_PUBLIC_PROD_URL } from '@utils/config';
 import { getAbsenceColor } from '@utils/getAbsenceColor';
 import { Role, UserData } from '@utils/types';
 import { signOut } from 'next-auth/react';
-import React from 'react';
 import { IoLinkOutline } from 'react-icons/io5';
+import { useCustomToast } from '../../CustomToast';
 
 interface ProfileMenuProps {
   userData?: UserData;
@@ -27,19 +25,15 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData, absenceCap }) => {
   const absenceColor = userData
     ? getAbsenceColor(userData.usedAbsences, absenceCap)
     : getAbsenceColor(0, absenceCap);
-  const theme = useTheme();
-  const toast = useToast();
+  const showToast = useCustomToast();
 
   const handleCopyICal = async () => {
     const iCalURL = `${NEXT_PUBLIC_PROD_URL}/api/ics/calendar.ics`;
     try {
       await navigator.clipboard.writeText(iCalURL);
-      toast({
-        title: 'Copied!',
+      showToast({
         description: 'Sistema iCal URL has been copied to your clipboard.',
         status: 'success',
-        duration: 3000,
-        isClosable: true,
       });
     } catch (error) {
       console.error('Failed to copy:', error);
@@ -52,12 +46,9 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData, absenceCap }) => {
     const iCalURL = `${NEXT_PUBLIC_PROD_URL}/api/ics/user-${userData.id}.ics`;
     try {
       await navigator.clipboard.writeText(iCalURL);
-      toast({
-        title: 'Copied!',
+      showToast({
         description: 'Personal iCal URL has been copied to your clipboard.',
         status: 'success',
-        duration: 3000,
-        isClosable: true,
       });
     } catch (error) {
       console.error('Failed to copy:', error);
@@ -72,6 +63,8 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData, absenceCap }) => {
           src={userData?.image}
           width="40px"
           height="40px"
+          loading="eager"
+          ignoreFallback
         />
       </MenuButton>
       <MenuList width="280px" p={4} textAlign="center" boxShadow="lg">
@@ -81,12 +74,22 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData, absenceCap }) => {
           width="80px"
           height="80px"
           mb={3}
+          loading="eager"
+          ignoreFallback
         />
         <Text textStyle="h3">Hi, {userData?.name}!</Text>
         <Text textStyle="caption" color="text.subtitle" mb={4}>
           {userData?.email}
         </Text>
-        <Box bg="neutralGray.50" p={3} textAlign="center" mb={3}>
+        <Box
+          bg="neutralGray.50"
+          p={3}
+          textAlign="center"
+          mb={3}
+          borderRadius="md"
+          maxW="210px"
+          mx="auto"
+        >
           <Flex justify="center" align="center" gap={2} wrap="wrap">
             <Text textStyle="h4" color={absenceColor}>
               {userData?.usedAbsences}/{absenceCap}
@@ -94,38 +97,40 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData, absenceCap }) => {
             <Text textStyle="h4">Absences Taken</Text>
           </Flex>
         </Box>
-
-        <HStack spacing={2} align="center" justifyContent="center" mb={4}>
+        <HStack spacing={5} align="center" justifyContent="center" mb={4}>
           {userData?.id && (
             <Flex
               alignItems="center"
-              gap={2}
+              gap={1}
               justifyContent="center"
               cursor="pointer"
+              color="text.subtitle"
+              _hover={{ color: 'primaryBlue.300' }}
               onClick={handleCopyPersonalICal}
             >
-              <Text textStyle="caption" color="text.subtitle">
+              <Text textStyle="caption" color="inherit">
                 Personal iCal
               </Text>
-              <IoLinkOutline size={16} color={theme.colors.neutralGray[600]} />
+              <IoLinkOutline size={16} color="currentColor" />
             </Flex>
           )}
           {userData?.role === Role.ADMIN && (
             <Flex
               alignItems="center"
-              gap={2}
+              gap={1}
               justifyContent="center"
               cursor="pointer"
+              color="text.subtitle"
+              _hover={{ color: 'primaryBlue.300' }}
               onClick={handleCopyICal}
             >
-              <Text textStyle="caption" color="text.subtitle">
+              <Text textStyle="caption" color="inherit">
                 Sistema iCal
               </Text>
-              <IoLinkOutline size={16} color={theme.colors.neutralGray[600]} />
+              <IoLinkOutline size={16} color="currentColor" />
             </Flex>
           )}
         </HStack>
-
         <Button
           onClick={() => signOut()}
           variant="outline"
diff --git a/src/components/SignOutButton.tsx b/src/components/header/profile/SignOutButton.tsx
similarity index 100%
rename from src/components/SignOutButton.tsx
rename to src/components/header/profile/SignOutButton.tsx
diff --git a/src/pages/calendar.tsx b/src/pages/calendar.tsx
index b4d64cef..2353a2f4 100644
--- a/src/pages/calendar.tsx
+++ b/src/pages/calendar.tsx
@@ -20,22 +20,21 @@ import interactionPlugin from '@fullcalendar/interaction';
 import FullCalendar from '@fullcalendar/react';
 import { useAbsences } from '@hooks/useAbsences';
 import { useUserData } from '@hooks/useUserData';
-import { Absence, Prisma } from '@prisma/client';
-import { formatMonthYear } from '@utils/formatMonthYear';
+import { formatMonthYear } from '@utils/formatDate';
 import { getCalendarStyles } from '@utils/getCalendarStyles';
 import { getDayCellClassNames } from '@utils/getDayCellClassNames';
 import { EventDetails } from '@utils/types';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import AbsenceBox from '../components/AbsenceBox';
-import AbsenceDetails from '../components/AbsenceDetails';
-import CalendarHeader from '../components/CalendarHeader';
-import CalendarSidebar from '../components/CalendarSidebar';
-import { CalendarTabs } from '../components/CalendarTabs';
-import InputForm from '../components/InputForm';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import AbsenceBox from '../components/absences/AbsenceBox';
+import AbsenceDetails from '../components/absences/details/AbsenceDetails';
+import DeclareAbsenceForm from '../components/absences/modals/declare/DeclareAbsenceForm';
+import { CalendarTabs } from '../components/calendar/CalendarTabs';
+import CalendarSidebar from '../components/calendar/sidebar/CalendarSidebar';
+import CalendarHeader from '../components/header/calendar/CalendarHeader';
 
 const Calendar: React.FC = () => {
-  const userData = useUserData();
+  const { refetchUserData, ...userData } = useUserData();
   const router = useRouter();
 
   const searchParams = useSearchParams();
@@ -57,8 +56,8 @@ const Calendar: React.FC = () => {
     }
   }, [searchParams]);
 
-  const { events, fetchAbsences } = useAbsences();
-  const [claimedDays, setClaimedDays] = useState<Set<string>>(new Set());
+  const { events, fetchAbsences } = useAbsences(refetchUserData);
+  const [filledDays, setFilledDays] = useState<Set<string>>(new Set());
 
   const calendarRef = useRef<FullCalendar>(null);
   const [filteredEvents, setFilteredEvents] = useState<EventInput[]>([]);
@@ -78,9 +77,7 @@ const Calendar: React.FC = () => {
   const [currentMonthYear, setCurrentMonthYear] = useState(
     formatMonthYear(new Date())
   );
-  const [activeTab, setActiveTab] = React.useState<'explore' | 'declared'>(
-    'explore'
-  );
+  const [activeTab, setActiveTab] = useState<'explore' | 'declared'>('explore');
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<EventDetails | null>(null);
   const [isAdminMode, setIsAdminMode] = useState<boolean>(false);
@@ -109,9 +106,15 @@ const Calendar: React.FC = () => {
         lessonPlan,
       } = eventInfo.event.extendedProps;
 
-      const eventDate = new Date(eventInfo.event.startStr);
-      const isPastEvent = eventDate < new Date();
-      const opacity = isPastEvent ? 0.7 : 1;
+      const eventDate = new Date(eventInfo.event.start!!);
+      const now = new Date();
+      const isSameDay =
+        eventDate.getFullYear() === now.getFullYear() &&
+        eventDate.getMonth() === now.getMonth() &&
+        eventDate.getDate() === now.getDate();
+      const isPastEvent = eventDate < now && !isSameDay;
+
+      const opacity = isPastEvent ? 0.6 : 1;
       const createdByUser = absentTeacher.id === userData?.id;
 
       const highlightText = createdByUser
@@ -142,7 +145,7 @@ const Calendar: React.FC = () => {
   );
 
   useEffect(() => {
-    const claimedAbsences = new Set<string>();
+    const filledAbsences = new Set<string>();
 
     events.forEach((event) => {
       if (event.start) {
@@ -157,37 +160,14 @@ const Calendar: React.FC = () => {
         const eventDateString = `${eventDate.getFullYear()}-${(eventDate.getMonth() + 1).toString().padStart(2, '0')}-${eventDate.getDate().toString().padStart(2, '0')}`;
 
         if (event.substituteTeacher?.id === userData?.id) {
-          claimedAbsences.add(eventDateString);
+          filledAbsences.add(eventDateString);
         }
       }
     });
 
-    setClaimedDays(claimedAbsences);
+    setFilledDays(filledAbsences);
   }, [events, userData?.id]);
 
-  const handleDeclareAbsence = async (
-    absence: Prisma.AbsenceCreateManyInput
-  ): Promise<Absence | null> => {
-    try {
-      const res = await fetch('/api/declareAbsence', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(absence),
-      });
-
-      if (!res.ok) {
-        throw new Error(`Failed to add absence: ${res.statusText}`);
-      }
-
-      const addedAbsence = await res.json();
-      await fetchAbsences();
-      return addedAbsence;
-    } catch (error) {
-      console.error('Error adding absence:', error);
-      return null;
-    }
-  };
-
   useEffect(() => {
     fetchAbsences();
   }, [fetchAbsences]);
@@ -243,22 +223,36 @@ const Calendar: React.FC = () => {
     updateMonthYearTitle();
   }, [updateMonthYearTitle]);
 
+  const formatDateForFilledDays = (date: Date) => {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const hasConflictingEvent = (event: EventDetails) => {
+    if (!event?.start) return false;
+    const dateString = formatDateForFilledDays(new Date(event.start));
+    return filledDays.has(dateString);
+  };
+
   const handleAbsenceClick = (clickInfo: EventClickArg) => {
     setSelectedEvent({
-      title: clickInfo.event.title || 'Untitled Event',
-      start: clickInfo.event.start,
-      absentTeacher: clickInfo.event.extendedProps.absentTeacher || null,
+      title: clickInfo.event.title,
+      start: clickInfo.event.start!!,
+      absentTeacher: clickInfo.event.extendedProps.absentTeacher,
       absentTeacherFullName:
-        clickInfo.event.extendedProps.absentTeacherFullName || '',
+        clickInfo.event.extendedProps.absentTeacherFullName,
       substituteTeacher:
         clickInfo.event.extendedProps.substituteTeacher || null,
       substituteTeacherFullName:
         clickInfo.event.extendedProps.substituteTeacherFullName || '',
-      location: clickInfo.event.extendedProps.location || '',
-      classType: clickInfo.event.extendedProps.classType || '',
+      location: clickInfo.event.extendedProps.location,
+      locationId: clickInfo.event.extendedProps.locationId,
+      subjectId: clickInfo.event.extendedProps.subjectId,
       lessonPlan: clickInfo.event.extendedProps.lessonPlan || null,
       roomNumber: clickInfo.event.extendedProps.roomNumber || '',
-      reasonOfAbsence: clickInfo.event.extendedProps.reasonOfAbsence || '',
+      reasonOfAbsence: clickInfo.event.extendedProps.reasonOfAbsence,
       notes: clickInfo.event.extendedProps.notes || '',
       absenceId: clickInfo.event.extendedProps.absenceId,
     });
@@ -357,8 +351,6 @@ const Calendar: React.FC = () => {
         height="100%"
         display="flex"
         alignItems="center"
-        pt={1}
-        pr={1}
       >
         <Box
           width="26px"
@@ -387,7 +379,7 @@ const Calendar: React.FC = () => {
 
         {!isAdminMode &&
           activeTab === 'explore' &&
-          claimedDays.has(eventDateString) && (
+          filledDays.has(eventDateString) && (
             <Badge
               border="1px solid"
               borderColor="neutralGray.300"
@@ -474,9 +466,11 @@ const Calendar: React.FC = () => {
       <AbsenceDetails
         isOpen={isAbsenceDetailsOpen}
         onClose={onAbsenceDetailsClose}
-        event={selectedEvent}
+        event={selectedEvent!!}
+        fetchAbsences={fetchAbsences}
         onDelete={handleDeleteAbsence}
         isAdminMode={isAdminMode}
+        hasConflictingEvent={hasConflictingEvent(selectedEvent!!)}
       />
 
       <Modal isOpen={isInputFormOpen} onClose={onInputFormClose} isCentered>
@@ -491,13 +485,13 @@ const Calendar: React.FC = () => {
           </ModalHeader>
           <ModalCloseButton top="33px" right="28px" color="text.header" />
           <ModalBody p={0}>
-            <InputForm
+            <DeclareAbsenceForm
               onClose={onInputFormClose}
-              onDeclareAbsence={handleDeclareAbsence}
               initialDate={selectedDate!!}
               userId={userData.id}
               onTabChange={setActiveTab}
               isAdminMode={isAdminMode}
+              fetchAbsences={fetchAbsences}
             />
           </ModalBody>
         </ModalContent>
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index b42095b4..69f3e062 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -2,11 +2,11 @@ import { Box, HStack, useTheme } from '@chakra-ui/react';
 import { useUserData } from '@hooks/useUserData';
 import { Role, YearlyAbsenceData } from '@utils/types';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import DashboardHeader from '../components/DashboardHeader';
-import MonthlyAbsencesCard from '../components/MonthlyAbsencesCard';
-import TotalAbsencesCard from '../components/TotalAbsencesCard';
-import UserManagementCard from '../components/UserManagementCard';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import MonthlyAbsencesCard from '../components/dashboard/stats/MonthlyAbsencesCard';
+import TotalAbsencesCard from '../components/dashboard/stats/TotalAbsencesCard';
+import UserManagementCard from '../components/dashboard/user_management/UserManagementCard';
+import DashboardHeader from '../components/header/dashboard/DashboardHeader';
 export default function DashboardPage() {
   const theme = useTheme();
   const userData = useUserData();
@@ -17,9 +17,36 @@ export default function DashboardPage() {
     `${currentYear - 1} - ${currentYear}`
   );
   const [absenceData, setAbsenceData] = useState<YearlyAbsenceData[]>([]);
-  const [loading, setLoading] = useState(true);
   const [startYear, endYear] = selectedYearRange.split(' - ');
 
+  // We'll use a ref to store the refresh function that will be created in UserManagementCard
+  const userManagementRefreshRef = useRef<() => void>(() => {
+    console.error('UserManagement refresh function not set yet');
+  });
+
+  // To handle header refreshes (for absenceCap updates)
+  const dashboardHeaderRefreshRef = useRef<() => void>(() => {
+    console.error('DashboardHeader refresh function not set yet');
+  });
+
+  // Function to refresh user management data - called when system options are updated
+  const handleSystemOptionsUpdate = useCallback(() => {
+    // Call the refresh function stored in the ref to refresh user data
+    userManagementRefreshRef.current();
+    // Also refresh the dashboard header data
+    dashboardHeaderRefreshRef.current();
+  }, []);
+
+  // Function to set the refresh function from UserManagementCard
+  const setUserManagementRefresh = useCallback((refreshFn: () => void) => {
+    userManagementRefreshRef.current = refreshFn;
+  }, []);
+
+  // Function to set the refresh function from DashboardHeader
+  const setDashboardHeaderRefresh = useCallback((refreshFn: () => void) => {
+    dashboardHeaderRefreshRef.current = refreshFn;
+  }, []);
+
   useEffect(() => {
     if (!userData.isLoading && !userData.isAuthenticated) {
       router.push('/');
@@ -36,13 +63,14 @@ export default function DashboardPage() {
         const events = data.events || [];
         setAbsenceData(events);
 
-        if (events.length > 0 && !selectedYearRange) {
+        if (
+          events.length > 0 &&
+          !events.some((e) => e.yearRange === selectedYearRange)
+        ) {
           setSelectedYearRange(events[0].yearRange);
         }
       } catch (err) {
         console.error('Error fetching absences:', err);
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -126,6 +154,8 @@ export default function DashboardPage() {
         setSelectedYearRange={setSelectedYearRange}
         yearRanges={sortedYearRanges}
         hasData={hasAbsenceData}
+        onSystemOptionsUpdate={handleSystemOptionsUpdate}
+        setRefreshFunction={setDashboardHeaderRefresh}
       />
       <Box
         px={14}
@@ -150,7 +180,10 @@ export default function DashboardPage() {
             highestMonthlyAbsence={highestMonthlyAbsence}
           />
         </HStack>
-        <UserManagementCard />
+        <UserManagementCard
+          selectedYearRange={selectedYearRange}
+          setRefreshFunction={setUserManagementRefresh}
+        />
       </Box>
     </Box>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f02a8efa..c3f8ec7b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,11 +2,11 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { TacetLogo } from '../components/TacetLogo';
 import { SignInButton } from '../components/SignInButton';
-import { TacetLogo } from '../components/SistemaLogoColour';
 
 export default function Index(): JSX.Element | null {
-  const { data: session, status } = useSession();
+  const { status } = useSession();
   const router = useRouter();
 
   useEffect(() => {
diff --git a/theme/components.ts b/theme/components.ts
index db3c6a4a..1c3f25ed 100644
--- a/theme/components.ts
+++ b/theme/components.ts
@@ -65,55 +65,52 @@ export const components = {
     },
   },
   Input: {
-    baseStyle: {
-      field: {
-        border: '1px solid',
-        borderColor: 'outline',
-        borderRadius: '10px',
-        fontSize: '13px',
-        fontWeight: 400,
-        lineHeight: '15.73px',
-        fontFamily: 'body',
-        _placeholder: {
-          color: 'text.subtitle',
-        },
-        _hover: {
+    defaultProps: {
+      variant: 'outline',
+    },
+    variants: {
+      outline: {
+        field: {
+          border: '1px solid',
           borderColor: 'outline',
-        },
-        _focus: {
-          borderColor: 'primaryBlue.300',
-          boxShadow: '0 0 0 1px primaryBlue.300',
-        },
-        _active: {
-          borderColor: 'primaryBlue.300',
-          boxShadow: '0 0 0 1px primaryBlue.300',
+          borderRadius: '10px',
+          fontSize: '13px',
+          fontWeight: 400,
+          lineHeight: '15.73px',
+          fontFamily: 'body',
+          _placeholder: {
+            color: 'text.subtitle',
+          },
+          _hover: {
+            borderColor: 'outline',
+          },
+          _focus: {
+            borderColor: 'primaryBlue.300',
+            boxShadow: '0 0 0 1px primaryBlue.300',
+          },
+          _active: {
+            borderColor: 'primaryBlue.300',
+            boxShadow: '0 0 0 1px primaryBlue.300',
+          },
         },
       },
     },
   },
-  Textarea: {
+  borderColor: 'outline',
+
+  Tooltip: {
     baseStyle: {
+      bg: 'white',
+      color: 'text.body',
+      borderRadius: 'md',
+      px: 3,
+      py: 2,
+      fontSize: 'sm',
+      maxWidth: '320px',
+      '--popper-arrow-bg': 'white',
+      boxShadow: 'md',
       border: '1px solid',
-      borderColor: 'outline',
-      borderRadius: '10px',
-      fontSize: '13px',
-      fontWeight: 400,
-      lineHeight: '15.73px',
-      fontFamily: 'body',
-      _placeholder: {
-        color: 'text.subtitle',
-      },
-      _hover: {
-        borderColor: 'outline',
-      },
-      _focus: {
-        borderColor: 'primaryBlue.300',
-        boxShadow: '0 0 0 1px primaryBlue.300',
-      },
-      _active: {
-        borderColor: 'primaryBlue.300',
-        boxShadow: '0 0 0 1px primaryBlue.300',
-      },
+      borderColor: 'neutralGray.200',
     },
   },
 };
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index b9c48117..e9a4ce40 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -1,5 +1,5 @@
-import NextAuth from 'next-auth';
 import { Role } from '@prisma/client';
+import 'next-auth';
 
 declare module 'next-auth' {
   interface Session {
diff --git a/utils/formatDate.ts b/utils/formatDate.ts
new file mode 100644
index 00000000..3387b91a
--- /dev/null
+++ b/utils/formatDate.ts
@@ -0,0 +1,23 @@
+export const formatMonthYear = (date: Date): string => {
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'long',
+    year: 'numeric',
+  }).format(date);
+};
+
+const getOrdinalNum = (number: number): string => {
+  const suffixes = ['th', 'st', 'nd', 'rd'];
+  const v = number % 100;
+  return number + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
+};
+
+export const formatFullDate = (input: string | Date): string => {
+  const date =
+    typeof input === 'string' ? new Date(input + 'T00:00:00') : input;
+
+  const weekday = date.toLocaleDateString('en-CA', { weekday: 'long' });
+  const month = date.toLocaleDateString('en-CA', { month: 'long' });
+  const day = getOrdinalNum(date.getDate());
+
+  return `${weekday}, ${month} ${day}`;
+};
diff --git a/utils/formatMonthYear.ts b/utils/formatMonthYear.ts
deleted file mode 100644
index 25a0f398..00000000
--- a/utils/formatMonthYear.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const formatMonthYear = (date: Date): string => {
-  return new Intl.DateTimeFormat('en-US', {
-    month: 'long',
-    year: 'numeric',
-  }).format(date);
-};
diff --git a/utils/getCalendarStyles.ts b/utils/getCalendarStyles.ts
index e4c8409f..36fcad7c 100644
--- a/utils/getCalendarStyles.ts
+++ b/utils/getCalendarStyles.ts
@@ -5,10 +5,10 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
   .fc-event {
     border: 0px;
     background-color: transparent;
+    margin: 0 !important;
   }
   .fc th {
     text-transform: uppercase;
-    font-size: ${theme.fontSizes.sm};
     font-weight: ${theme.fontWeights[600]};
   }
   .fc-day-today {
@@ -23,23 +23,29 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
     font-size: ${theme.fontSizes.sm};
     font-weight: ${theme.fontWeights[400]};
   }
+  .fc .fc-daygrid-day {
+    padding: 8px 5px !important;
+  }
+  .fc .fc-daygrid-day-top {
+    padding: 0 !important;
+    height: 30px;
+  }
   .fc .fc-daygrid-day-number {
     width: 100%;
+    padding: 0 !important;
+  }
+  .fc-daygrid-day-events {
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .fc-daygrid-day-events:not(:empty) {
+    margin-bottom: 65px !important;
+  }
+  .fc-daygrid-event-harness {
+    margin-top: 4px !important;
   }
-  .fc .fc-scrollgrid thead .fc-col-header-cell {
-    border-left: none !important;
-    border-right: none !important;
-    border-top: none !important;
-  }
-  .fc .fc-col-header-cell {
-    height: 32px;
-  }
-  .fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 500;
+  .fc-daygrid-event-harness:first-of-type {
+    margin-top: 0 !important;
   }
 `;
diff --git a/utils/getSelectedYearAbsences.ts b/utils/getSelectedYearAbsences.ts
new file mode 100644
index 00000000..2857e7a3
--- /dev/null
+++ b/utils/getSelectedYearAbsences.ts
@@ -0,0 +1,21 @@
+export const getSelectedYearAbsences = (
+  absences: { lessonDate: string }[] = [],
+  selectedYearRange: string
+): number => {
+  if (!absences || !selectedYearRange) return 0;
+
+  const [startYear] = selectedYearRange
+    .split(' - ')
+    .map((year) => parseInt(year, 10));
+  const endYear = startYear + 1;
+
+  return absences.filter((absence) => {
+    const absenceDate = new Date(absence.lessonDate);
+    const month = absenceDate.getMonth();
+    const year = absenceDate.getFullYear();
+
+    return (
+      (year === startYear && month >= 8) || (year === endYear && month < 8)
+    );
+  }).length;
+};
diff --git a/utils/submitAbsence.ts b/utils/submitAbsence.ts
new file mode 100644
index 00000000..f19a389d
--- /dev/null
+++ b/utils/submitAbsence.ts
@@ -0,0 +1,83 @@
+import { Prisma } from '@prisma/client';
+import { uploadFile } from './uploadFile';
+
+type SubmitAbsenceBase = {
+  formData: any;
+  lessonPlan: File | null;
+};
+
+type DeclareAbsenceParams = SubmitAbsenceBase & {
+  onDeclareAbsence: (absence: Prisma.AbsenceCreateManyInput) => Promise<any>;
+  onEditAbsence?: never;
+};
+
+type EditAbsenceParams = SubmitAbsenceBase & {
+  onEditAbsence: (
+    absence: Partial<Prisma.AbsenceUpdateInput> & { id: number }
+  ) => Promise<any>;
+  onDeclareAbsence?: never;
+};
+
+type SubmitAbsenceParams = DeclareAbsenceParams | EditAbsenceParams;
+
+export async function submitAbsence({
+  formData,
+  lessonPlan,
+  onDeclareAbsence,
+  onEditAbsence,
+}: SubmitAbsenceParams): Promise<{ success: boolean; message: string }> {
+  const lessonDate = new Date(formData.lessonDate + 'T00:00:00');
+
+  let lessonPlanData: { url: string; name: string; size: number } | null = null;
+  if (lessonPlan) {
+    const lessonPlanUrl = await uploadFile(lessonPlan);
+    if (!lessonPlanUrl) {
+      return {
+        success: false,
+        message: 'Failed to upload the lesson plan file',
+      };
+    }
+    lessonPlanData = {
+      url: lessonPlanUrl,
+      name: lessonPlan.name,
+      size: lessonPlan.size,
+    };
+  }
+
+  const absenceData = {
+    lessonDate,
+    reasonOfAbsence: formData.reasonOfAbsence,
+    absentTeacherId: parseInt(formData.absentTeacherId, 10),
+    substituteTeacherId: formData.substituteTeacherId
+      ? parseInt(formData.substituteTeacherId, 10)
+      : null,
+    locationId: parseInt(formData.locationId, 10),
+    subjectId: parseInt(formData.subjectId, 10),
+    notes: formData.notes,
+    roomNumber: formData.roomNumber || null,
+    lessonPlanFile: lessonPlanData,
+  };
+
+  if (onEditAbsence && formData.id) {
+    const response = await onEditAbsence({ ...absenceData, id: formData.id });
+    return response
+      ? { success: true, message: 'Absence updated successfully.' }
+      : { success: false, message: 'Failed to update absence' };
+  }
+
+  if (onDeclareAbsence) {
+    const response = await onDeclareAbsence(absenceData);
+    return response
+      ? {
+          success: true,
+          message: lessonDate.toLocaleDateString('en-US', {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric',
+          }),
+        }
+      : { success: false, message: 'Failed to declare absence' };
+  }
+
+  throw new Error('submitAbsence called without a valid action handler');
+}
diff --git a/utils/types.ts b/utils/types.ts
index f83fdc87..8f316eb2 100644
--- a/utils/types.ts
+++ b/utils/types.ts
@@ -20,13 +20,14 @@ export interface LessonPlanFile {
 
 export interface EventDetails {
   title: string;
-  start: Date | null;
-  absentTeacher: { id: number; firstName: string; lastName: string } | null;
+  start: Date;
+  absentTeacher: { id: number; firstName: string; lastName: string };
   absentTeacherFullName: string;
   substituteTeacher: { id: number; firstName: string; lastName: string } | null;
   substituteTeacherFullName: string | null;
   location: string;
-  classType: string;
+  locationId: number;
+  subjectId: number;
   lessonPlan: LessonPlanFile | null;
   roomNumber: string | null;
   reasonOfAbsence: string;
@@ -77,6 +78,13 @@ export interface User {
   role: Role;
 }
 
+export interface MailingList {
+  userId: number;
+  subjectId: number;
+  user: UserAPI;
+  subject: SubjectAPI;
+}
+
 export interface UserAPI {
   id: number;
   email: string;
@@ -85,14 +93,7 @@ export interface UserAPI {
   profilePicture?: string;
   role: Role;
   absences: { id: number }[];
-  mailingLists: {
-    subject: {
-      name: string;
-      colorGroup: {
-        colorCodes: string[];
-      };
-    };
-  }[];
+  mailingLists: MailingList[];
 }
 
 export interface Location {
@@ -121,8 +122,8 @@ export interface SubjectAPI {
   id: number;
   name: string;
   abbreviation: string;
-  colorGroupId: number;
   archived: boolean;
+  colorGroupId: number;
   colorGroup: {
     name: string;
     colorCodes: string[];
diff --git a/utils/uploadFile.ts b/utils/uploadFile.ts
new file mode 100644
index 00000000..8d853d99
--- /dev/null
+++ b/utils/uploadFile.ts
@@ -0,0 +1,18 @@
+export const uploadFile = async (file: File): Promise<string | null> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('fileName', file.name);
+
+  const res = await fetch('/api/uploadFile/', {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const data = await res.json();
+    throw new Error(data.message || 'Failed to upload file');
+  }
+
+  const data = await res.json();
+  return `https://drive.google.com/file/d/${data.fileId}/view`;
+};
diff --git a/utils/validateAbsenceForm.ts b/utils/validateAbsenceForm.ts
new file mode 100644
index 00000000..ac79c6f4
--- /dev/null
+++ b/utils/validateAbsenceForm.ts
@@ -0,0 +1,34 @@
+interface AbsenceFormData {
+  reasonOfAbsence: string;
+  absentTeacherId: string;
+  substituteTeacherId: string;
+  locationId: string;
+  subjectId: string;
+  roomNumber: string;
+  lessonDate: string;
+  notes: string;
+}
+
+export function validateAbsenceForm(
+  formData: AbsenceFormData
+): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  if (!formData.absentTeacherId) {
+    errors.absentTeacherId = 'Absent teacher ID is required';
+  }
+  if (!formData.locationId) {
+    errors.locationId = 'Location ID is required';
+  }
+  if (!formData.subjectId) {
+    errors.subjectId = 'Subject ID is required';
+  }
+  if (!formData.reasonOfAbsence) {
+    errors.reasonOfAbsence = 'Reason of absence is required';
+  }
+  if (!formData.lessonDate) {
+    errors.lessonDate = 'Date is required';
+  }
+
+  return errors;
+}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..25cf6f82
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+  "crons": [
+    {
+      "path": "/api/reminders",
+      "schedule": "0 0 * * *"
+    }
+  ]
+}

From 0def7971c5981c67fa079af6459be49f58350e4e Mon Sep 17 00:00:00 2001
From: Chinemerem <chinemeremchigbo@Outlook.com>
Date: Wed, 16 Apr 2025 04:24:07 -0400
Subject: [PATCH 3/5] Update components.ts

---
 theme/components.ts | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/theme/components.ts b/theme/components.ts
index c075cda3..e9f664f7 100644
--- a/theme/components.ts
+++ b/theme/components.ts
@@ -96,21 +96,29 @@ export const components = {
       },
     },
   },
-  borderColor: 'outline',
-
-  Tooltip: {
+  Textarea: {
     baseStyle: {
-      bg: 'white',
-      color: 'text.body',
-      borderRadius: 'md',
-      px: 3,
-      py: 2,
-      fontSize: 'sm',
-      maxWidth: '320px',
-      '--popper-arrow-bg': 'white',
-      boxShadow: 'md',
       border: '1px solid',
-      borderColor: 'neutralGray.200',
+      borderColor: 'outline',
+      borderRadius: '10px',
+      fontSize: '13px',
+      fontWeight: 400,
+      lineHeight: '15.73px',
+      fontFamily: 'body',
+      _placeholder: {
+        color: 'text.subtitle',
+      },
+      _hover: {
+        borderColor: 'outline',
+      },
+      _focus: {
+        borderColor: 'primaryBlue.300',
+        boxShadow: '0 0 0 1px primaryBlue.300',
+      },
+      _active: {
+        borderColor: 'primaryBlue.300',
+        boxShadow: '0 0 0 1px primaryBlue.300',
+      },
     },
   },
   Tooltip: {

From 0e4cf5e74fe2525af73929ea49e806c8da6c5115 Mon Sep 17 00:00:00 2001
From: Chinemerem <chinemeremchigbo@Outlook.com>
Date: Wed, 16 Apr 2025 04:27:31 -0400
Subject: [PATCH 4/5] Update TextArea borderColor

---
 .../modals/declare/DeclareAbsenceForm.tsx     |  2 -
 .../absences/modals/edit/EditAbsenceForm.tsx  |  2 -
 theme/components.ts                           | 45 ++++++++++---------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/absences/modals/declare/DeclareAbsenceForm.tsx b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
index 23212586..aa1483f4 100644
--- a/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
+++ b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
@@ -269,7 +269,6 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
             value={formData.reasonOfAbsence}
             onChange={handleChange}
             minH="88px"
-            borderColor="outline"
           />
           <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
         </FormControl>
@@ -292,7 +291,6 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
             value={formData.notes}
             onChange={handleChange}
             minH="88px"
-            borderColor="outline"
           />
         </FormControl>
 
diff --git a/src/components/absences/modals/edit/EditAbsenceForm.tsx b/src/components/absences/modals/edit/EditAbsenceForm.tsx
index bcecfd4f..0e71b0e5 100644
--- a/src/components/absences/modals/edit/EditAbsenceForm.tsx
+++ b/src/components/absences/modals/edit/EditAbsenceForm.tsx
@@ -271,7 +271,6 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
             value={formData.reasonOfAbsence}
             onChange={handleChange}
             minH="88px"
-            borderColor="outline"
           />
           <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
         </FormControl>
@@ -298,7 +297,6 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
             value={formData.notes}
             onChange={handleChange}
             minH="88px"
-            borderColor="outline"
           />
         </FormControl>
 
diff --git a/theme/components.ts b/theme/components.ts
index e9f664f7..a331a39e 100644
--- a/theme/components.ts
+++ b/theme/components.ts
@@ -97,27 +97,32 @@ export const components = {
     },
   },
   Textarea: {
-    baseStyle: {
-      border: '1px solid',
-      borderColor: 'outline',
-      borderRadius: '10px',
-      fontSize: '13px',
-      fontWeight: 400,
-      lineHeight: '15.73px',
-      fontFamily: 'body',
-      _placeholder: {
-        color: 'text.subtitle',
-      },
-      _hover: {
+    defaultProps: {
+      variant: 'outline',
+    },
+    variants: {
+      outline: {
+        border: '1px solid',
         borderColor: 'outline',
-      },
-      _focus: {
-        borderColor: 'primaryBlue.300',
-        boxShadow: '0 0 0 1px primaryBlue.300',
-      },
-      _active: {
-        borderColor: 'primaryBlue.300',
-        boxShadow: '0 0 0 1px primaryBlue.300',
+        borderRadius: '10px',
+        fontSize: '13px',
+        fontWeight: 400,
+        lineHeight: '15.73px',
+        fontFamily: 'body',
+        _placeholder: {
+          color: 'text.subtitle',
+        },
+        _hover: {
+          borderColor: 'outline',
+        },
+        _focus: {
+          borderColor: 'primaryBlue.300',
+          boxShadow: '0 0 0 1px primaryBlue.300',
+        },
+        _active: {
+          borderColor: 'primaryBlue.300',
+          boxShadow: '0 0 0 1px primaryBlue.300',
+        },
       },
     },
   },

From 9d84fb08b19bcdad8f8b5dc69ed65465bab14db6 Mon Sep 17 00:00:00 2001
From: Chinemerem <chinemeremchigbo@Outlook.com>
Date: Wed, 16 Apr 2025 09:06:35 -0400
Subject: [PATCH 5/5] Update getCalendarStyles.ts

---
 utils/getCalendarStyles.ts | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/utils/getCalendarStyles.ts b/utils/getCalendarStyles.ts
index 36fcad7c..73693519 100644
--- a/utils/getCalendarStyles.ts
+++ b/utils/getCalendarStyles.ts
@@ -7,22 +7,12 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
     background-color: transparent;
     margin: 0 !important;
   }
-  .fc th {
-    text-transform: uppercase;
-    font-weight: ${theme.fontWeights[600]};
-  }
   .fc-day-today {
     background-color: inherit !important;
   }
   .fc-weekend {
     background-color: rgba(0, 0, 0, 0.05) !important;
   }
-  .fc-event-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: ${theme.fontSizes.sm};
-    font-weight: ${theme.fontWeights[400]};
-  }
   .fc .fc-daygrid-day {
     padding: 8px 5px !important;
   }
@@ -40,7 +30,7 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
     padding: 0 !important;
   }
   .fc-daygrid-day-events:not(:empty) {
-    margin-bottom: 65px !important;
+    margin-bottom: 30px !important;
   }
   .fc-daygrid-event-harness {
     margin-top: 4px !important;
@@ -48,4 +38,20 @@ export const getCalendarStyles = (theme: CustomTheme) => css`
   .fc-daygrid-event-harness:first-of-type {
     margin-top: 0 !important;
   }
+  .fc .fc-scrollgrid thead .fc-col-header-cell {
+    border-left: none !important;
+    border-right: none !important;
+  }
+  .fc .fc-col-header-cell {
+    height: 32px;
+  }
+  .fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: ${theme.fontWeights[600]};
+    text-transform: uppercase;
+    font-size: 14px;
+  }
 `;