diff --git a/frontend/src/components/CalendarView.css b/frontend/src/components/CalendarView.css
deleted file mode 100644
index c1c31e38..00000000
--- a/frontend/src/components/CalendarView.css
+++ /dev/null
@@ -1,226 +0,0 @@
-/*
- * CalendarView.css
- * Styles for the calendar view component, including event colors and non-business hours.
- *
- * Author: Cliff Hill
- * Last updated: 2025-09-05
- */
-/* Non-business hours styling for FullCalendar */
-.fc-timegrid-col-bg .fc-non-business,
-.fc-non-business {
-  background: #888 !important;
-  opacity: 0.5 !important;
-}
-
-/* Room color classes for calendar events */
-.room-color-0 {
-  background: #1976d2 !important;
-  color: #fff !important;
-}
-.room-color-1 {
-  background: #388e3c !important;
-  color: #fff !important;
-}
-.room-color-2 {
-  background: #fbc02d !important;
-  color: #fff !important;
-}
-.room-color-3 {
-  background: #d32f2f !important;
-  color: #fff !important;
-}
-.room-color-4 {
-  background: #7b1fa2 !important;
-  color: #fff !important;
-}
-.room-color-5 {
-  background: #0288d1 !important;
-  color: #fff !important;
-}
-.room-color-6 {
-  background: #c2185b !important;
-  color: #fff !important;
-}
-.room-color-7 {
-  background: #ffa000 !important;
-  color: #fff !important;
-}
-/* Truncate and ellipsis for event content and titles */
-.fc-event-title-ellipsis,
-.fc-event .fc-event-main > div,
-.fc-event-title,
-.fc-event-main,
-.fc-event .fc-event-main-frame,
-.fc-event .fc-event-title,
-.fc-event .fc-event-title-container,
-.fc-event .fc-event-time,
-.fc-event .fc-event-title,
-.fc-event .fc-event-title-container,
-.fc-event .fc-event-main {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  max-width: 100% !important;
-  display: block !important;
-  width: 100%;
-  min-width: 0;
-}
-
-/* Weekend all-day and time slots: unified non-business color, lighter border */
-.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame,
-.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame,
-.fc .fc-timegrid-col.fc-day-sat,
-.fc .fc-timegrid-col.fc-day-sun {
-  background: #888 !important; /* unified non-business color */
-  border-color: #bbb !important;
-}
-
-.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-number,
-.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-number {
-  color: #e0e0e0 !important;
-  font-weight: 500 !important;
-  opacity: 0.7 !important;
-}
-
-/* Weekday non-business hours: same as weekend background */
-.fc .fc-non-business {
-  background: #888 !important;
-  opacity: 0.5 !important;
-}
-
-/* Workday all-day and time slots: match all-day workday background */
-.fc .fc-daygrid-day .fc-daygrid-day-frame,
-.fc .fc-timegrid-col {
-  background: #c0c0c0 !important;
-}
-
-/* Lighter border for all-day row on weekends */
-.fc .fc-daygrid-day.fc-day-sat,
-.fc .fc-daygrid-day.fc-day-sun {
-  border-color: #bbb !important;
-}
-
-/* Out-of-month days: distinct but not too dark */
-.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
-  background: #aaa !important;
-  opacity: 1 !important;
-}
-/* Calendar cell backgrounds use CSS variables */
-:root {
-  --fc-page-bg-color: #a0a0a0;
-  --fc-neutral-bg-color: #e3f2fd;
-  --fc-today-bg-color: #e3f2fd;
-  --fc-event-bg-color: #1976d2;
-  --fc-border-color: #707070;
-}
-
-.calendarContainer {
-  padding: 2rem;
-  background: #f8fafc !important;
-  border-radius: 16px !important;
-  box-shadow: 0 4px 24px rgba(30, 64, 175, 0.08) !important;
-  /* Responsive container, no fixed height */
-}
-
-.calendar-scroll-area {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-.fc {
-  font-family: "Inter", "Roboto", Arial, sans-serif !important;
-  box-shadow: none !important;
-}
-
-.fc .fc-toolbar {
-  background: #1976d2 !important;
-  color: #fff !important;
-  border-radius: 12px 12px 0 0 !important;
-  padding: 0.5rem 1rem !important;
-}
-
-.fc .fc-toolbar-title {
-  font-size: 1.5rem !important;
-  font-weight: 600 !important;
-}
-
-.fc .fc-button {
-  background: #1976d2 !important;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 6px !important;
-  padding: 0.3rem 0.8rem !important;
-  margin: 0 0.2rem !important;
-  font-weight: 500 !important;
-  transition: background 0.2s !important;
-}
-
-.fc .fc-button:hover,
-.fc .fc-button:focus {
-  background: #1565c0 !important;
-}
-
-.fc .fc-daygrid-day {
-  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
-  transition: box-shadow 0.2s !important;
-}
-
-.fc .fc-daygrid-day:hover {
-  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
-  background: #e3f2fd !important;
-}
-
-.fc .fc-daygrid-day-number {
-  font-weight: 600 !important;
-  color: #1976d2 !important;
-}
-
-.fc .fc-event {
-  background: #1976d2 !important;
-  color: #fff !important;
-  padding: 2px 6px !important;
-  font-size: 0.95rem !important;
-  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.12) !important;
-}
-
-.fc .fc-event:hover {
-  background: #1565c0 !important;
-}
-
-.fc .fc-day-today {
-  background: #e3f2fd !important;
-  border-radius: 8px !important;
-}
-
-.fc .fc-daygrid-day .fc-daygrid-day-frame {
-  background: #c0c0c0 !important;
-  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
-  transition: box-shadow 0.2s !important;
-}
-
-.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
-  background: #d0d0d0 !important;
-  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
-}
-
-.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
-  background: #aaa !important;
-  opacity: 1 !important;
-}
-
-.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
-  color: #fff !important;
-  opacity: 1 !important;
-  font-weight: 600 !important;
-}
-
-.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
-  background: #e3f2fd !important;
-  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
-}
-
-.fc,
-.fc-toolbar.fc-header-toolbar {
-  margin-bottom: 0px !important;
-}
diff --git a/frontend/src/components/CalendarView.tsx b/frontend/src/components/CalendarView.tsx
index 46235d52..deb00bcf 100644
--- a/frontend/src/components/CalendarView.tsx
+++ b/frontend/src/components/CalendarView.tsx
@@ -18,7 +18,7 @@ import interactionPlugin from "@fullcalendar/interaction";
 import { EventInput } from "@fullcalendar/core";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import "./CalendarView.css";
+import "../styles/CalendarView.css";
 import { getEventDisplayText, getRoomClass } from "../helpers/calendar";
 
 /**