diff --git a/.gitignore b/.gitignore
index 41b9cef8..38eb8297 100644
--- a/.gitignore
+++ b/.gitignore
@@ -224,7 +224,7 @@ typings/
 # NPM Built
 main.js
 main.js.LICENSE.txt
-style.min.css
+main.css
 
 # Mac OS X dir files
 .DS_Store
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..5309d53f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# ignore Django templates
+**/templates/**/*.html
diff --git a/csm_web/frontend/src/components/App.tsx b/csm_web/frontend/src/components/App.tsx
index c5da011a..167ace2d 100644
--- a/csm_web/frontend/src/components/App.tsx
+++ b/csm_web/frontend/src/components/App.tsx
@@ -10,9 +10,14 @@ import Policies from "./Policies";
 import { Resources } from "./resource_aggregation/Resources";
 import Section from "./section/Section";
 
+// Images
 import LogoNoText from "../../static/frontend/img/logo_no_text.svg";
 import LogOutIcon from "../../static/frontend/img/log_out.svg";
 
+// Styles
+import "../css/header.scss";
+import "../css/home.scss";
+
 interface ErrorType {
   message: string;
   stack: string;
@@ -113,26 +118,30 @@ function Header(): React.ReactElement {
 
   return (
     <header>
-      <Link to="/">
-        <LogoNoText id="logo" />
-      </Link>
-      <NavLink className={homeNavlinkClass} to="/">
-        <h3 className="site-title">Scheduler</h3>
-      </NavLink>
-      <NavLink to="/resources" className={navlinkClass}>
-        <h3 className="site-title">Resources</h3>
-      </NavLink>
-      {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
-        <NavLink to="/matcher" className={navlinkClass}>
-          <h3 className="site-title">Matcher</h3>
+      <div className="site-title-group">
+        <Link to="/">
+          <LogoNoText id="logo" />
+        </Link>
+        <NavLink className={homeNavlinkClass} to="/">
+          <h3 className="site-title">Scheduler</h3>
+        </NavLink>
+        <NavLink to="/resources" className={navlinkClass}>
+          <h3 className="site-title">Resources</h3>
         </NavLink>
-      ) : null}
-      <NavLink to="/policies" className={navlinkClassSubtitle}>
-        <h3 className="site-subtitle">Policies</h3>
-      </NavLink>
-      <a id="logout-btn" href="/logout" title="Log out">
-        <LogOutIcon width="1.25em" height="1.25em" />
-      </a>
+        {activeMatcherRoles["COORDINATOR"].size > 0 || activeMatcherRoles["MENTOR"].size > 0 ? (
+          <NavLink to="/matcher" className={navlinkClass}>
+            <h3 className="site-title">Matcher</h3>
+          </NavLink>
+        ) : null}
+      </div>
+      <div className="site-title-group">
+        <NavLink to="/policies" className={navlinkClassSubtitle}>
+          <h3 className="site-subtitle">Policies</h3>
+        </NavLink>
+        <a id="logout-btn" href="/logout" title="Log out">
+          <LogOutIcon width="1.25em" height="1.25em" />
+        </a>
+      </div>
     </header>
   );
 }
diff --git a/csm_web/frontend/src/components/CourseMenu.tsx b/csm_web/frontend/src/components/CourseMenu.tsx
index 4d7d6bf8..aa121ad2 100644
--- a/csm_web/frontend/src/components/CourseMenu.tsx
+++ b/csm_web/frontend/src/components/CourseMenu.tsx
@@ -8,6 +8,9 @@ import LoadingSpinner from "./LoadingSpinner";
 import { DateTime } from "luxon";
 import { DEFAULT_LONG_LOCALE_OPTIONS, DEFAULT_TIMEZONE } from "../utils/datetime";
 
+// Styles
+import "../css/course-menu.scss";
+
 const CourseMenu = () => {
   const { data: jsonCourses, isSuccess: coursesLoaded } = useCourses();
   const { data: jsonUserInfo, isSuccess: userInfoLoaded } = useUserInfo();
@@ -147,16 +150,27 @@ const CourseMenuContent = ({
 
   let sidebar = null;
   if (hasRestrictedCourses) {
+    /**
+     * Helper to get the current tab class
+     */
+    const getTabClass = (expected: CourseMenuSidebarTabs) => {
+      if (selectedTab === expected) {
+        return "tab active";
+      } else {
+        return "tab";
+      }
+    };
+
     sidebar = (
-      <div className="course-menu-sidebar">
+      <div className="tab-list">
         <button
-          className={"course-menu-sidebar-tab" + (selectedTab === CourseMenuSidebarTabs.RESTRICTED ? " active" : "")}
+          className={getTabClass(CourseMenuSidebarTabs.RESTRICTED)}
           onClick={() => setSelectedTab(CourseMenuSidebarTabs.RESTRICTED)}
         >
           Restricted
         </button>
         <button
-          className={"course-menu-sidebar-tab" + (selectedTab === CourseMenuSidebarTabs.UNRESTRICTED ? " active" : "")}
+          className={getTabClass(CourseMenuSidebarTabs.UNRESTRICTED)}
           onClick={() => setSelectedTab(CourseMenuSidebarTabs.UNRESTRICTED)}
         >
           Unrestricted
@@ -204,7 +218,7 @@ const EnrollmentMenu = ({ courses }: EnrollmentMenuProps) => {
       {courses !== null ? (
         <div id="course-menu">
           {Array.from(courses.entries()).map(([id, course]) => (
-            <Link className="csm-btn" to={`${id}`} key={id}>
+            <Link className="primary-btn" to={`${id}`} key={id}>
               {course.name}
             </Link>
           ))}
diff --git a/csm_web/frontend/src/components/Home.tsx b/csm_web/frontend/src/components/Home.tsx
index 13f0e7da..4cbbc007 100644
--- a/csm_web/frontend/src/components/Home.tsx
+++ b/csm_web/frontend/src/components/Home.tsx
@@ -8,6 +8,12 @@ import { Profile, Course } from "../utils/types";
 import LoadingSpinner from "./LoadingSpinner";
 import { formatSpacetimeInterval } from "../utils/datetime";
 
+// Images
+import PlusIcon from "../../static/frontend/img/plus.svg";
+
+// Styles
+import scssColors from "../css/base/colors-export.module.scss";
+
 const Home = () => {
   const { data: profiles, isSuccess: profilesLoaded, isError: profilesLoadError } = useProfiles();
   const { data: courses, isSuccess: coursesLoaded, isError: coursesLoadError } = useCourses();
@@ -63,8 +69,9 @@ const Home = () => {
     <div id="home-courses">
       <div id="home-courses-heading">
         <h3 className="page-title">My courses</h3>
-        <Link className="csm-btn" to="/courses">
-          <span className="inline-plus-sign">+ </span>Add Course
+        <Link className="primary-btn" to="/courses">
+          <PlusIcon className="icon inline-plus-icon" />
+          Add Course
         </Link>
       </div>
       {content}
@@ -82,8 +89,11 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
   const relation = role.toLowerCase();
 
   const Card = (): React.ReactElement => {
+    // default to black if not found
+    const courseColor = scssColors[course.toLowerCase()] ?? "black";
+    const relationColor = scssColors[relation.toLowerCase()] ?? "white";
     return (
-      <div className="course-card" style={{ borderTopColor: `var(--csm-theme-${course.toLowerCase()})` }}>
+      <div className="course-card" style={{ borderTopColor: courseColor }}>
         <div className="course-card-contents">
           <h3 className="course-card-name">{course}</h3>
           <p className="course-card-title">{courseTitle}</p>
@@ -97,7 +107,7 @@ const CourseCard = ({ profiles }: CourseCardProps): React.ReactElement => {
                 ))}
               </Link>
             ))}
-          <div className="relation-label" style={{ backgroundColor: `var(--csm-${relation})` }}>
+          <div className="relation-label" style={{ backgroundColor: relationColor }}>
             {relation}
           </div>
         </div>
diff --git a/csm_web/frontend/src/components/Modal.tsx b/csm_web/frontend/src/components/Modal.tsx
index b5f3f0d7..1957a328 100644
--- a/csm_web/frontend/src/components/Modal.tsx
+++ b/csm_web/frontend/src/components/Modal.tsx
@@ -1,5 +1,8 @@
 import React, { useContext } from "react";
 
+// Images
+import XIcon from "../../static/frontend/img/x.svg";
+
 const ModalContext = React.createContext(Function.prototype);
 
 interface ModalProps {
@@ -16,15 +19,13 @@ export default function Modal({ children, closeModal, className = "" }: ModalPro
   return (
     <ModalContext.Provider value={closeModal}>
       <div className="modal-overlay" onClick={closeModal} />
-      <div className={`modal ${className}`}>
-        <div className="modal-contents">
-          <div className="modal-close-x">
-            <button className="inline-plus-sign" aria-label="close" onClick={closeModal}>
-              <span>&times;</span>
-            </button>
-          </div>
-          {children}
+      <div className={`modal `}>
+        <div className="modal-close-container">
+          <button className="modal-close-x" aria-label="close" onClick={closeModal}>
+            <XIcon className="icon" />
+          </button>
         </div>
+        <div className={`modal-contents ${className}`}>{children}</div>
       </div>
     </ModalContext.Provider>
   );
diff --git a/csm_web/frontend/src/components/Policies.tsx b/csm_web/frontend/src/components/Policies.tsx
index 4fb2dcc2..b16fbaf4 100644
--- a/csm_web/frontend/src/components/Policies.tsx
+++ b/csm_web/frontend/src/components/Policies.tsx
@@ -1,4 +1,9 @@
 import React from "react";
+
+// Styles
+import "../css/policies.scss";
+
+// Data
 import SECTIONS from "../../static/frontend/data/enrollment_policies";
 
 export default class Policies extends React.Component {
diff --git a/csm_web/frontend/src/components/course/Course.tsx b/csm_web/frontend/src/components/course/Course.tsx
index d64ab9f9..29e936d4 100644
--- a/csm_web/frontend/src/components/course/Course.tsx
+++ b/csm_web/frontend/src/components/course/Course.tsx
@@ -11,7 +11,12 @@ import { WhitelistModal } from "./WhitelistModal";
 import { SettingsModal } from "./SettingsModal";
 import { DEFAULT_LONG_LOCALE_OPTIONS } from "../../utils/datetime";
 
+// Images
 import PencilIcon from "../../../static/frontend/img/pencil.svg";
+import PlusIcon from "../../../static/frontend/img/plus.svg";
+
+// Styles
+import "../../css/course.scss";
 
 const DAY_OF_WEEK_ABREVIATIONS: { [day: string]: string } = Object.freeze({
   Monday: "M",
@@ -156,16 +161,17 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
         {userIsCoordinator && (
           <div id="course-coord-buttons">
             <button
-              className="csm-btn create-section-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.createSection);
               }}
             >
-              <span className="inline-plus-sign">+ </span>Create Section
+              <PlusIcon className="icon" />
+              Create Section
             </button>
             <button
-              className="csm-btn export-data-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.exportData);
@@ -174,7 +180,7 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
               Export Data
             </button>
             <button
-              className="csm-btn course-settings-btn"
+              className="primary-btn"
               onClick={() => {
                 setShowModal(true);
                 setWhichModal(COURSE_MODAL_TYPE.settings);
@@ -184,7 +190,7 @@ const Course = ({ courses, priorityEnrollment, enrollmentTimes }: CourseProps):
             </button>
             {course.isRestricted && (
               <button
-                className="csm-btn edit-whitelist-btn"
+                className="primary-btn"
                 onClick={() => {
                   setShowModal(true);
                   setWhichModal(COURSE_MODAL_TYPE.whitelist);
diff --git a/csm_web/frontend/src/components/course/CreateSectionModal.tsx b/csm_web/frontend/src/components/course/CreateSectionModal.tsx
index 27d89ed8..cc614ec3 100644
--- a/csm_web/frontend/src/components/course/CreateSectionModal.tsx
+++ b/csm_web/frontend/src/components/course/CreateSectionModal.tsx
@@ -90,7 +90,7 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
   /**
    * Handle form submission.
    */
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>): void => {
     event.preventDefault();
     const data = {
       mentorEmail,
@@ -109,14 +109,15 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
   };
 
   return (
-    <Modal closeModal={closeModal}>
-      <form id="create-section-form" className="csm-form" onSubmit={handleSubmit}>
+    <Modal className="create-section-modal" closeModal={closeModal}>
+      <form id="create-section-form" className="csm-form">
         <div id="create-section-form-contents">
           <div id="non-spacetime-fields">
-            <label>
+            <label className="form-label">
               Mentor Email
               <input
                 onChange={e => handleChange(-1, "mentorEmail", e.target.value)}
+                className="form-input"
                 type="email"
                 list="user-email-list"
                 required
@@ -130,9 +131,10 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                 {userEmailsLoaded ? userEmails.map(email => <option key={email} value={email} />) : null}
               </datalist>
             </label>
-            <label>
+            <label className="form-label">
               Capacity
               <input
+                className="form-input"
                 required
                 name="capacity"
                 type="number"
@@ -143,9 +145,10 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                 onChange={e => handleChange(-1, "capacity", e.target.value)}
               />
             </label>
-            <label>
+            <label className="form-label">
               Description
               <input
+                className="form-input"
                 name="description"
                 type="text"
                 value={description}
@@ -157,9 +160,10 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
             <React.Fragment key={index}>
               <h4 className="spacetime-fields-header">Weekly occurence {index + 1}</h4>
               <div className="spacetime-fields">
-                <label>
+                <label className="form-label">
                   Location
                   <input
+                    className="form-input"
                     onChange={e => handleChange(index, "location", e.target.value)}
                     required
                     title="You cannot leave this field blank"
@@ -169,9 +173,10 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                     value={location}
                   />
                 </label>
-                <label>
+                <label className="form-label">
                   Day
                   <select
+                    className="form-select"
                     onChange={e => handleChange(index, "dayOfWeek", e.target.value)}
                     name={`dayOfWeek|${index}`}
                     value={dayOfWeek}
@@ -184,35 +189,40 @@ export const CreateSectionModal = ({ courseId, closeModal, reloadSections }: Cre
                     ))}
                   </select>
                 </label>
-                <label>
+                <label className="form-label">
                   Time
                   <TimeInput
+                    className="form-date"
                     onChange={e => handleChange(index, "startTime", e.target.value)}
                     required
                     name={`startTime|${index}`}
                     value={startTime}
                   />
                 </label>
-                <label>
+                <label className="form-label">
                   Duration (min)
                   <input
+                    className="form-input"
                     type="number"
                     name={`duration|${index}`}
                     value={duration}
+                    min={0}
                     onChange={e => handleChange(index, "duration", e.target.value)}
                   />
                 </label>
-                {index === spacetimes.length - 1 && (
-                  <button className="csm-btn" id="add-occurence-btn" onClick={appendSpacetime}>
-                    Add another occurence
-                  </button>
-                )}
               </div>
             </React.Fragment>
           ))}
-          <input type="submit" value="Create Section" />
         </div>
       </form>
+      <div className="create-section-submit-container">
+        <button className="secondary-btn" id="add-occurence-btn" onClick={appendSpacetime}>
+          Add another occurence
+        </button>
+        <button className="primary-btn" onClick={handleSubmit}>
+          Submit
+        </button>
+      </div>
     </Modal>
   );
 };
diff --git a/csm_web/frontend/src/components/course/DataExportModal.tsx b/csm_web/frontend/src/components/course/DataExportModal.tsx
index 1d1c3f18..29679e09 100644
--- a/csm_web/frontend/src/components/course/DataExportModal.tsx
+++ b/csm_web/frontend/src/components/course/DataExportModal.tsx
@@ -101,7 +101,7 @@ export const DataExportModal = ({ closeModal }: DataExportModalProps): React.Rea
           {coursesLoaded ? renderCheckGrid() : <LoadingSpinner id="course-menu-loading-spinner" />}
         </div>
         <div className="data-export-modal-download">
-          <button className="csm-btn export-data-btn" onClick={getStudentEmails}>
+          <button className="primary-btn" onClick={getStudentEmails}>
             Download
           </button>
         </div>
diff --git a/csm_web/frontend/src/components/course/SectionCard.tsx b/csm_web/frontend/src/components/course/SectionCard.tsx
index 0a93ef69..96298383 100644
--- a/csm_web/frontend/src/components/course/SectionCard.tsx
+++ b/csm_web/frontend/src/components/course/SectionCard.tsx
@@ -91,24 +91,24 @@ export const SectionCard = ({
     const iconHeight = "8em";
     if (enrollmentSuccessful) {
       return (
-        <React.Fragment>
+        <div className="enroll-confirm-modal-contents">
           <CheckCircle height={iconHeight} width={iconWidth} />
           <h3>Successfully enrolled</h3>
           <ModalCloser>
-            <button className="modal-btn">OK</button>
+            <button className="primary-btn">OK</button>
           </ModalCloser>
-        </React.Fragment>
+        </div>
       );
     }
     return (
-      <React.Fragment>
+      <div className="enroll-confirm-modal-contents">
         <XCircle color="#eb6060" height={iconHeight} width={iconWidth} />
         <h3>Enrollment failed</h3>
         <h4>{errorMessage}</h4>
         <ModalCloser>
-          <button className="modal-btn">OK</button>
+          <button className="primary-btn">OK</button>
         </ModalCloser>
-      </React.Fragment>
+      </div>
     );
   };
 
@@ -130,7 +130,7 @@ export const SectionCard = ({
 
   return (
     <React.Fragment>
-      {showModal && <Modal closeModal={closeModal}>{modalContents().props.children}</Modal>}
+      {showModal && <Modal closeModal={closeModal}>{modalContents()}</Modal>}
       <section className={`section-card ${isFull ? "full" : ""}`}>
         <div className="section-card-contents">
           {description && <span className="section-card-description">{description}</span>}
@@ -175,12 +175,12 @@ export const SectionCard = ({
           </p>
         </div>
         {userIsCoordinator ? (
-          <Link to={`/sections/${id}`} className="csm-btn section-card-footer">
+          <Link to={`/sections/${id}`} className="primary-btn section-card-footer">
             MANAGE
           </Link>
         ) : (
           <div
-            className={`csm-btn section-card-footer ${courseOpen ? "" : "disabled"}`}
+            className={`primary-btn section-card-footer ${courseOpen ? "" : "disabled"}`}
             onClick={isFull ? undefined : enroll}
           >
             ENROLL
diff --git a/csm_web/frontend/src/components/course/SettingsModal.tsx b/csm_web/frontend/src/components/course/SettingsModal.tsx
index 099c963f..3e298fb6 100644
--- a/csm_web/frontend/src/components/course/SettingsModal.tsx
+++ b/csm_web/frontend/src/components/course/SettingsModal.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from "react";
 
 import LoadingSpinner from "../LoadingSpinner";
-
 import { useCourses, useCourseSettingsMutation } from "../../utils/queries/courses";
-
-import InfoIcon from "../../../static/frontend/img/info.svg";
 import { Tooltip } from "../Tooltip";
 import Modal from "../Modal";
 
+// Images
+import InfoIcon from "../../../static/frontend/img/info.svg";
+
+// Styles
+import "../../css/course-settings.scss";
+
 interface SettingsModalProps {
   courseId: number;
   closeModal: () => void;
@@ -75,7 +78,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
   if (coursesLoaded) {
     modalContent = (
       <div className="course-settings-content">
-        <h4 className="course-settings-title">Settings</h4>
+        <h2 className="course-settings-title">Settings</h2>
         <div className="course-settings-container">
           <div className="course-settings-row">
             <div className="course-settings-label-container">
@@ -92,7 +95,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
             <div className="course-settings-input-container">
               <input
                 id="wordOfTheDayLimit"
-                className="course-settings-input"
+                className="form-input course-settings-input"
                 type="number"
                 min="0"
                 value={wordOfTheDayLimit}
@@ -103,7 +106,7 @@ export const SettingsModal = ({ courseId, closeModal }: SettingsModalProps) => {
           </div>
         </div>
         <div className="course-settings-footer">
-          <button className="csm-btn course-settings-submit" type="button" onClick={submitSettings}>
+          <button className="primary-btn course-settings-submit" type="button" onClick={submitSettings}>
             Submit
           </button>
         </div>
diff --git a/csm_web/frontend/src/components/course/WhitelistModal.tsx b/csm_web/frontend/src/components/course/WhitelistModal.tsx
index c7991c86..7ffd597e 100644
--- a/csm_web/frontend/src/components/course/WhitelistModal.tsx
+++ b/csm_web/frontend/src/components/course/WhitelistModal.tsx
@@ -9,11 +9,15 @@ import LoadingSpinner from "../LoadingSpinner";
 import Modal from "../Modal";
 import { SearchBar } from "../SearchBar";
 
+// Images
 import CheckCircleIcon from "../../../static/frontend/img/check_circle.svg";
 import ExclamationCircleIcon from "../../../static/frontend/img/exclamation-circle.svg";
 import UndoIcon from "../../../static/frontend/img/undo.svg";
 import XIcon from "../../../static/frontend/img/x.svg";
 
+// Styles
+import "../../css/whitelist_modal.scss";
+
 interface WhitelistModalProps {
   course: Course;
   closeModal: () => void;
@@ -165,7 +169,7 @@ export const WhitelistModal = ({ course, closeModal }: WhitelistModalProps) => {
         <span className="whitelist-modal-description">List of emails, one per line or separated by commas</span>
         <textarea className="whitelist-modal-add-textarea" ref={whitelistAddTextArea}></textarea>
         <div className="whitelist-modal-footer">
-          <button className="csm-btn whitelist-modal-submit" onClick={submitWhitelistAdd}>
+          <button className="primary-btn whitelist-modal-submit" onClick={submitWhitelistAdd}>
             Submit
           </button>
           <div className="whitelist-modal-submit-status">{whitelistAddStatusIcon}</div>
@@ -229,7 +233,7 @@ export const WhitelistModal = ({ course, closeModal }: WhitelistModalProps) => {
         </div>
         <div className="whitelist-modal-footer">
           <button
-            className="csm-btn whitelist-modal-submit"
+            className="primary-btn whitelist-modal-submit"
             onClick={submitWhitelistDelete}
             disabled={stagedBlacklistEmails.length === 0}
           >
@@ -244,15 +248,15 @@ export const WhitelistModal = ({ course, closeModal }: WhitelistModalProps) => {
   return (
     <Modal className="whitelist-modal-container" closeModal={closeModal}>
       <div className="whitelist-modal">
-        <div className="whitelist-modal-header">
+        <div className="tab-list">
           <button
-            className={`csm-btn whitelist-modal-tab ${modalTab === ModalTab.ADD ? "active" : ""}`}
+            className={`tab ${modalTab === ModalTab.ADD ? "active" : ""}`}
             onClick={() => setModalTab(ModalTab.ADD)}
           >
             Add
           </button>
           <button
-            className={`csm-btn whitelist-modal-tab ${modalTab === ModalTab.DELETE ? "active" : ""}`}
+            className={`tab ${modalTab === ModalTab.DELETE ? "active" : ""}`}
             onClick={() => setModalTab(ModalTab.DELETE)}
           >
             Delete
diff --git a/csm_web/frontend/src/components/enrollment_automation/EnrollmentMatcher.tsx b/csm_web/frontend/src/components/enrollment_automation/EnrollmentMatcher.tsx
index cedc6266..02d1bff2 100644
--- a/csm_web/frontend/src/components/enrollment_automation/EnrollmentMatcher.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/EnrollmentMatcher.tsx
@@ -8,6 +8,9 @@ import { emptyRoles, Roles } from "../../utils/user";
 import { CoordinatorMatcherForm } from "./coordinator/CoordinatorMatcherForm";
 import { MentorSectionPreferences } from "./MentorSectionPreferences";
 
+// Styles
+import "../../css/enrollment_matcher.scss";
+
 export interface MatcherProfile {
   courseId: number;
   courseName: string;
diff --git a/csm_web/frontend/src/components/enrollment_automation/calendar/Calendar.tsx b/csm_web/frontend/src/components/enrollment_automation/calendar/Calendar.tsx
index 02b7d92a..97f879ec 100644
--- a/csm_web/frontend/src/components/enrollment_automation/calendar/Calendar.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/calendar/Calendar.tsx
@@ -6,6 +6,9 @@ import { Time } from "../EnrollmentAutomationTypes";
 import { CalendarDay, CalendarDayHeader } from "./CalendarDay";
 import { CalendarEvent, CalendarEventSingleTime, DAYS } from "./CalendarTypes";
 
+// Styles
+import "../../../css/calendar.scss";
+
 // default start and end times for calendar
 const START = DateTime.fromObject({ hour: 8, minute: 0 }); // 8:00 AM
 const END = DateTime.fromObject({ hour: 18, minute: 0 }); // 6:00 PM
diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx
index 9ed54712..f430a605 100644
--- a/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx
+++ b/csm_web/frontend/src/components/resource_aggregation/ResourceEdit.tsx
@@ -16,12 +16,13 @@ import {
   Resource
 } from "./ResourceTypes";
 import ResourceWorksheetEdit from "./ResourceWorksheetEdit";
+import ResourceLinkEdit from "./ResourceLinkEdit";
+import { Tooltip } from "../Tooltip";
 
+// Images
 import CheckCircle from "../../../static/frontend/img/check-circle-solid.svg";
 import ExclamationCircle from "../../../static/frontend/img/exclamation-circle.svg";
-import PlusCircle from "../../../static/frontend/img/plus-circle.svg";
-import ResourceLinkEdit from "./ResourceLinkEdit";
-import { Tooltip } from "../Tooltip";
+import PlusIcon from "../../../static/frontend/img/plus.svg";
 
 interface ResourceEditProps {
   resource: Resource;
@@ -662,80 +663,87 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc
   return (
     <Modal closeModal={onCancel} className="resourceEditModal">
       <div className="resourceEditContainer">
-        <div className="resourceEditContentWrapper">
-          <div className="resourceEditContent">
-            <div id="resourceEditInner">
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Week Number</div>
-                <input
-                  type="text"
-                  defaultValue={resource.weekNum}
-                  placeholder="Week Number"
-                  onChange={e => onChange(e, "weekNum")}
-                  onBlur={() => handleBlur("weekNum")}
-                />
-                <div className="resourceValidationError">
-                  {formErrors.weekNum && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.weekNum}
-                </div>
-              </div>
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Date</div>
-                <input
-                  type="date"
-                  defaultValue={resource.date}
-                  onChange={e => onChange(e, "date")}
-                  onBlur={() => handleBlur("date")}
-                />
-                <div className="resourceValidationError">
-                  {formErrors.date && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.date}
-                </div>
-              </div>
-              <div className="resourceInfoEdit">
-                <div className="resourceEditHeadItem">Topics</div>
-                <div className="topicsTooltipWrapper">
-                  <Tooltip
-                    placement="bottom"
-                    source={
-                      <input
-                        type="text"
-                        defaultValue={resource.topics}
-                        placeholder="Topics"
-                        onChange={e => onChange(e, "topics")}
-                        onBlur={() => handleBlur("topics")}
-                      />
-                    }
-                  >
-                    Topics should be delimited by semicolons
-                  </Tooltip>
-                </div>
-                <div className="resourceValidationError">
-                  {formErrors.topics && <ExclamationCircle className="icon exclamationIcon" />}
-                  {formErrors.topics}
-                </div>
-              </div>
+        <div id="resourceEditInner">
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Week Number
+              <input
+                className="form-input"
+                type="text"
+                defaultValue={resource.weekNum}
+                placeholder="Week Number"
+                onChange={e => onChange(e, "weekNum")}
+                onBlur={() => handleBlur("weekNum")}
+              />
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.weekNum && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.weekNum}
             </div>
-            <div className="resourceEditTabContainer">
-              <button
-                onClick={() => {
-                  setIsEditingLinks(false);
-                }}
-                className="resourceEditTab"
-                disabled={!isEditingLinks}
-              >
-                Edit Worksheets
-              </button>
-              <button
-                onClick={() => {
-                  setIsEditingLinks(true);
-                }}
-                className="resourceEditTab"
-                disabled={isEditingLinks}
-              >
-                Edit Links
-              </button>
+          </div>
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Date
+              <input
+                className="form-date"
+                type="date"
+                defaultValue={resource.date}
+                onChange={e => onChange(e, "date")}
+                onBlur={() => handleBlur("date")}
+              />
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.date && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.date}
+            </div>
+          </div>
+          <div className="resourceInfoEdit">
+            <label className="form-label resourceEditHeadItem">
+              Topics
+              <div className="topicsTooltipWrapper">
+                <Tooltip
+                  placement="bottom"
+                  source={
+                    <input
+                      className="form-input"
+                      type="text"
+                      defaultValue={resource.topics}
+                      placeholder="Topics"
+                      onChange={e => onChange(e, "topics")}
+                      onBlur={() => handleBlur("topics")}
+                    />
+                  }
+                >
+                  Topics should be delimited by semicolons
+                </Tooltip>
+              </div>
+            </label>
+            <div className="resourceValidationError">
+              {formErrors.topics && <ExclamationCircle className="icon exclamationIcon" />}
+              {formErrors.topics}
             </div>
+          </div>
+        </div>
+        <div className="tab-list">
+          <button
+            onClick={() => {
+              setIsEditingLinks(false);
+            }}
+            className={`tab ${!isEditingLinks ? "active" : ""}`}
+          >
+            Edit Worksheets
+          </button>
+          <button
+            onClick={() => {
+              setIsEditingLinks(true);
+            }}
+            className={`tab ${isEditingLinks ? "active" : ""}`}
+          >
+            Edit Links
+          </button>
+        </div>
+        <div className="resourceEditContentWrapper">
+          <div className="resourceEditContent">
             {!isEditingLinks && (
               <div className="resourceWorksheetContainer">
                 {hasWorksheets && (
@@ -747,10 +755,12 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc
                 )}
                 {existingWorksheetDisplay}
                 {newWorksheetDisplay}
-                <button onClick={handleAddWorksheet} className="addResourceButton" id="addWorksheetButton">
-                  <PlusCircle className="icon" id="plusIcon" />
-                  Add Worksheet
-                </button>
+                <div className="resourceWorksheetActionsContainer">
+                  <button onClick={handleAddWorksheet} className="secondary-btn">
+                    <PlusIcon className="icon" />
+                    Add Worksheet
+                  </button>
+                </div>
               </div>
             )}
             {isEditingLinks && (
@@ -763,20 +773,24 @@ export const ResourceEdit = ({ resource, onChange, onSubmit, onCancel }: Resourc
                 )}
                 {existingLinkDisplay}
                 {newLinkDisplay}
-                <button onClick={handleAddLink} id="addLinkButton" className="addResourceButton">
-                  <PlusCircle className="icon" id="plusIcon" />
-                  Add Link
-                </button>
+                <div className="resourceWorksheetActionsContainer">
+                  <button onClick={handleAddLink} className="secondary-btn">
+                    <PlusIcon className="icon" />
+                    Add Link
+                  </button>
+                </div>
               </div>
             )}
           </div>
         </div>
-        <button onClick={handleSubmit} id="resourceButtonSubmit" disabled={!checkValid()}>
-          <CheckCircle className="icon" id="saveIcon" /> SAVE
-        </button>
-        {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) &&
-          !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) &&
-          tabErrorDisplay}
+        <div className="resourceEditFooter">
+          <button onClick={handleSubmit} className="primary-btn" disabled={!checkValid()}>
+            <CheckCircle className="icon" id="saveIcon" /> Save
+          </button>
+          {!(!isEditingLinks && formErrors["existingLinks"].size == 0 && formErrors["newLinks"].size == 0) &&
+            !(isEditingLinks && formErrors["existingWorksheets"].size == 0 && formErrors["newWorksheets"].size == 0) &&
+            tabErrorDisplay}
+        </div>
       </div>
     </Modal>
   );
diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx
index dfcd460a..43457962 100644
--- a/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx
+++ b/csm_web/frontend/src/components/resource_aggregation/ResourceLinkEdit.tsx
@@ -26,6 +26,7 @@ const ResourceLinkEdit = ({
     <React.Fragment>
       <div className="resourceLinkEdit">
         <input
+          className="form-input"
           type="text"
           defaultValue={link.name}
           placeholder="Link Name"
@@ -33,6 +34,7 @@ const ResourceLinkEdit = ({
           onBlur={() => onBlur()}
         />
         <input
+          className="form-input"
           type="text"
           defaultValue={link.url}
           placeholder="Link URL"
diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceTable.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceTable.tsx
index 1307ab73..96e84bec 100644
--- a/csm_web/frontend/src/components/resource_aggregation/ResourceTable.tsx
+++ b/csm_web/frontend/src/components/resource_aggregation/ResourceTable.tsx
@@ -8,12 +8,16 @@ import {
   useUpdateResourceMutation
 } from "../../utils/queries/resources";
 import { Roles } from "../../utils/user";
+import { DEFAULT_TIMEZONE } from "../../utils/datetime";
 import LoadingSpinner from "../LoadingSpinner";
 import ResourceRow from "./ResourceRow";
 import { emptyResource, Link, Resource, Worksheet } from "./ResourceTypes";
 
-import PlusCircle from "../../../static/frontend/img/plus-circle.svg";
-import { DEFAULT_TIMEZONE } from "../../utils/datetime";
+// Images
+import PlusIcon from "../../../static/frontend/img/plus.svg";
+
+// Styles
+import "../../css/resource_aggregation.scss";
 
 interface ResourceTableProps {
   courseID: number;
@@ -249,12 +253,12 @@ export const ResourceTable = ({ courseID, roles }: ResourceTableProps): React.Re
     <div className="resourceWrapperContainer">
       {canEdit && (
         <div className="resourceTableOptions">
-          <button onClick={handleSetAddingResource} className="addResourceButton" id="addResourceButton">
-            <PlusCircle className="icon" id="plusIcon" />
+          <button onClick={handleSetAddingResource} className="primary-outline-btn" id="addResourceButton">
+            <PlusIcon className="icon" />
             <div>Add Resource</div>
           </button>
           <div className="toggleViewEditContainer">
-            <label htmlFor="toggleViewEditInput" id="toggleViewEditLabel">
+            <label htmlFor="toggleViewEditInput" className="primary-outline-btn">
               <input type="checkbox" checked={viewEdit} id="toggleViewEditInput" onChange={handleToggleViewEdit} />
               Toggle Edit
             </label>
diff --git a/csm_web/frontend/src/components/resource_aggregation/ResourceWorksheetEdit.tsx b/csm_web/frontend/src/components/resource_aggregation/ResourceWorksheetEdit.tsx
index a6d1c15f..50ca44d4 100644
--- a/csm_web/frontend/src/components/resource_aggregation/ResourceWorksheetEdit.tsx
+++ b/csm_web/frontend/src/components/resource_aggregation/ResourceWorksheetEdit.tsx
@@ -73,6 +73,7 @@ const ResourceWorksheetEdit = ({
     <div className="resourceWorksheet">
       <div className="resourceWorksheetEditItem">
         <input
+          className="form-input"
           type="text"
           defaultValue={worksheet.name}
           placeholder="Worksheet Name"
diff --git a/csm_web/frontend/src/components/resource_aggregation/Resources.tsx b/csm_web/frontend/src/components/resource_aggregation/Resources.tsx
index 538239d1..61e4465e 100644
--- a/csm_web/frontend/src/components/resource_aggregation/Resources.tsx
+++ b/csm_web/frontend/src/components/resource_aggregation/Resources.tsx
@@ -36,24 +36,22 @@ export const Resources = (): React.ReactElement => {
   }
 
   return (
-    <div className="outer">
-      <div className="tabs">
-        <div className="tab-list">
-          {courses
-            .filter(course => !course.isRestricted)
-            .map(course => (
-              <button
-                onClick={() => handleTabClick(course.id)}
-                key={course.id}
-                className={course.id === selectedCourseID ? "active tab" : "tab"}
-              >
-                {course.name}
-              </button>
-            ))}
-        </div>
+    <>
+      <div className="tab-list">
+        {courses
+          .filter(course => !course.isRestricted)
+          .map(course => (
+            <button
+              onClick={() => handleTabClick(course.id)}
+              key={course.id}
+              className={course.id === selectedCourseID ? "active tab" : "tab"}
+            >
+              {course.name}
+            </button>
+          ))}
       </div>
       <ResourceTable courseID={selectedCourseID} roles={roles} />
-    </div>
+    </>
   );
 };
 
diff --git a/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx b/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx
index 7f6380ae..401185cd 100644
--- a/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx
+++ b/csm_web/frontend/src/components/section/CoordinatorAddStudentModal.tsx
@@ -1,13 +1,17 @@
+import { DateTime } from "luxon";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useUserEmails } from "../../utils/queries/base";
 import LoadingSpinner from "../LoadingSpinner";
 import Modal from "../Modal";
+import { useEnrollStudentMutation } from "../../utils/queries/sections";
 
+// Images
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 import ErrorCircle from "../../../static/frontend/img/error_outline.svg";
-import { useEnrollStudentMutation } from "../../utils/queries/sections";
-import { DateTime } from "luxon";
+
+// Styles
+import "../../css/coordinator-add-student.scss";
 
 enum CoordModalStates {
   INITIAL = "INITIAL",
@@ -179,7 +183,7 @@ export function CoordinatorAddStudentModal({
 
   const initial_component = (
     <React.Fragment>
-      <h4>Add new students</h4>
+      <h2>Add new students</h2>
       <div className="coordinator-email-content">
         <div className="coordinator-email-input-list">
           {emailsToAdd.map((email, index) => (
@@ -206,18 +210,20 @@ export function CoordinatorAddStudentModal({
         </div>
       </div>
       <div className="coordinator-email-input-buttons">
-        <button className="coordinator-email-input-add" type="button" onClick={() => addNewEmail()}>
-          Add email
-        </button>
-        {
-          /* Firefox doesn't support clipboard reads from sites; readText would be undefined */
-          navigator?.clipboard?.readText !== undefined && (
-            <button className="coordinator-email-input-add" type="button" onClick={() => addEmailsFromClipboard()}>
-              Add from clipboard
-            </button>
-          )
-        }
-        <button className="coordinator-email-input-submit" type="submit" onClick={() => setValidationEnabled(true)}>
+        <div className="coordinator-email-secondary-input-buttons">
+          <button className="secondary-btn" type="button" onClick={() => addNewEmail()}>
+            Add email
+          </button>
+          {
+            /* Firefox doesn't support clipboard reads from sites; readText would be undefined */
+            navigator?.clipboard?.readText !== undefined && (
+              <button className="secondary-btn" type="button" onClick={() => addEmailsFromClipboard()}>
+                Add from clipboard
+              </button>
+            )
+          }
+        </div>
+        <button className="primary-btn" type="submit" onClick={() => setValidationEnabled(true)}>
           Submit
         </button>
       </div>
@@ -226,7 +232,7 @@ export function CoordinatorAddStudentModal({
 
   const loading_component = (
     <React.Fragment>
-      <h4>Add new students</h4>
+      <h2>Add new students</h2>
       <LoadingSpinner />
       <div></div> {/* empty element to align the content */}
     </React.Fragment>
@@ -265,7 +271,7 @@ export function CoordinatorAddStudentModal({
 
   const warning_component = (
     <React.Fragment>
-      <h4>Add new students</h4>
+      <h2>Add new students</h2>
       <div className="coordinator-email-content">
         <div className="coordinator-email-response-list">
           {conflict_arr.length > 0 && (
@@ -492,7 +498,7 @@ export function CoordinatorAddStudentModal({
         </div>
       </div>
       <div className="coordinator-email-input-buttons">
-        <button className="coordinator-email-input-submit" type="submit" onClick={() => setValidationEnabled(true)}>
+        <button className="primary-btn" type="submit" onClick={() => setValidationEnabled(true)}>
           Retry
         </button>
       </div>
diff --git a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
index 594c9177..fb6e158c 100644
--- a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
+++ b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
@@ -11,8 +11,13 @@ import { dateSortISO, formatDateLocaleShort } from "./utils";
 import { Attendance } from "../../utils/types";
 import randomWords from "random-words";
 
+// Image
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 
+// Styles
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/word-of-the-day.scss";
+
 interface MentorSectionAttendanceProps {
   sectionId: number;
 }
@@ -260,42 +265,45 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                   </div>
                 ))}
               </div>
-              <table id="mentor-attendance-table">
+              <table id="csm-table mentor-attendance-table">
                 <tbody>
                   {selectedOccurrence &&
-                    stagedAttendances.map(({ id, student, presence }) => (
-                      <tr key={id}>
-                        <td>{student.name}</td>
-                        <td>
-                          <select
-                            value={presence}
-                            name={String(id)}
-                            className="select-css"
-                            style={{
-                              backgroundColor: `var(--csm-attendance-${ATTENDANCE_LABELS[presence][1]})`
-                            }}
-                            onChange={handleAttendanceChange}
-                          >
-                            {Object.entries(ATTENDANCE_LABELS).map(([value, [label]]) => (
-                              <option key={value} value={value} disabled={!value}>
-                                {label}
-                              </option>
-                            ))}
-                          </select>
-                        </td>
-                      </tr>
-                    ))}
+                    stagedAttendances.map(({ id, student, presence }) => {
+                      const cssSuffix = ATTENDANCE_LABELS[presence][1].toLowerCase();
+                      const attendanceColor = scssColors[`attendance-${cssSuffix}`];
+                      const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`];
+                      return (
+                        <tr key={id} className="csm-table-row">
+                          <td className="csm-table-item">{student.name}</td>
+                          <td className="csm-table-item">
+                            <select
+                              value={presence}
+                              name={String(id)}
+                              className="form-select mentor-attendance-input"
+                              style={{ backgroundColor: attendanceColor, color: attendanceFgColor }}
+                              onChange={handleAttendanceChange}
+                            >
+                              {Object.entries(ATTENDANCE_LABELS).map(([value, [label]]) => (
+                                <option key={value} value={value} disabled={!value}>
+                                  {label}
+                                </option>
+                              ))}
+                            </select>
+                          </td>
+                        </tr>
+                      );
+                    })}
                 </tbody>
               </table>
               <div id="mentor-attendance-controls">
-                <button className="csm-btn save-attendance-btn" onClick={handleSaveAttendance}>
-                  Save
-                </button>
-                <button className="mark-all-present-btn" onClick={handleMarkAllPresent}>
-                  Mark All As Present
-                </button>
                 {showSaveSpinner && <LoadingSpinner />}
                 {showAttendanceSaveSuccess && <CheckCircle height="2em" width="2em" />}
+                <button className="primary-link-btn" onClick={handleMarkAllPresent}>
+                  Mark All As Present
+                </button>
+                <button className="primary-btn" onClick={handleSaveAttendance}>
+                  Save
+                </button>
               </div>
               <div id="word-of-the-day-container">
                 <h4 className="word-of-the-day-title">
@@ -311,8 +319,8 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                         <span className="word-of-the-day-status unselected">Unselected</span>
                       )}
                     </p>
-                    <div className="word-of-the-day-input-container">
-                      <div>
+                    <div className="word-of-the-day-action-container">
+                      <div className="word-of-the-day-input-container">
                         <input
                           className="word-of-the-day-input"
                           type="text"
@@ -322,7 +330,7 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                             setWordOfTheDay(e.target.value);
                           }}
                         />
-                        <button className="word-of-the-day-random" onClick={handlePickRandomWord}>
+                        <button className="primary-link-btn" onClick={handlePickRandomWord}>
                           Random
                         </button>
                       </div>
@@ -333,7 +341,7 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                           <CheckCircle className="word-of-the-day-icon" />
                         ) : null}
                         <button
-                          className="csm-btn word-of-the-day-submit"
+                          className="primary-btn"
                           onClick={handleSubmitWord}
                           disabled={!wordOfTheDay || initialWordOfTheDay == wordOfTheDay}
                         >
diff --git a/csm_web/frontend/src/components/section/MentorSectionInfo.tsx b/csm_web/frontend/src/components/section/MentorSectionInfo.tsx
index ce2b9523..efbaa8a2 100644
--- a/csm_web/frontend/src/components/section/MentorSectionInfo.tsx
+++ b/csm_web/frontend/src/components/section/MentorSectionInfo.tsx
@@ -7,10 +7,14 @@ import MetaEditModal from "./MetaEditModal";
 import { InfoCard, SectionSpacetime } from "./Section";
 import SpacetimeEditModal from "./SpacetimeEditModal";
 import StudentDropper from "./StudentDropper";
+import SpacetimeDeleteModal from "./SpacetimeDeleteModal";
 
+// Images
 import XIcon from "../../../static/frontend/img/x.svg";
 import PencilIcon from "../../../static/frontend/img/pencil.svg";
-import SpacetimeDeleteModal from "./SpacetimeDeleteModal";
+
+// Styles
+import "../../css/coordinator-add-student.scss";
 
 enum ModalStates {
   NONE = "NONE",
@@ -57,21 +61,27 @@ export default function MentorSectionInfo({
         isCoordinator ? `${mentor.name || mentor.email}'s` : "My"
       } Section`}</h3>
       <div className="section-info-cards-container">
-        <InfoCard title="Students">
+        <InfoCard
+          title="Students"
+          extraPadding={
+            // add extra padding if loading, otherwise remove padding
+            !studentsLoaded
+          }
+        >
           {studentsLoaded ? (
             // done loading
             <React.Fragment>
-              <table id="students-table">
-                <thead>
-                  <tr>
-                    <th>Name</th>
+              <table id="students-table" className="csm-table">
+                <thead className="csm-table-head">
+                  <tr className="csm-table-head-row">
+                    <th className="csm-table-item">Name</th>
                   </tr>
                 </thead>
                 <tbody>
                   {(students.length === 0 ? [{ name: "No students enrolled", email: "", id: -1 }] : students).map(
                     ({ name, email, id: studentId }: Student) => (
-                      <tr key={studentId}>
-                        <td>
+                      <tr key={studentId} className="csm-table-row">
+                        <td className="csm-table-item">
                           {isCoordinator && studentId !== -1 && (
                             <StudentDropper
                               name={name ? name : email}
@@ -87,9 +97,9 @@ export default function MentorSectionInfo({
                   )}
                   {isCoordinator && (
                     <React.Fragment>
-                      <tr>
-                        <td>
-                          <button className="coordinator-email-modal-button" onClick={() => setIsAddingStudent(true)}>
+                      <tr className="csm-table-row">
+                        <td className="csm-table-item">
+                          <button className="secondary-btn" onClick={() => setIsAddingStudent(true)}>
                             Add students
                           </button>
                         </td>
@@ -118,6 +128,58 @@ export default function MentorSectionInfo({
               key={spacetime.id}
               spacetime={spacetime}
               override={override}
+              spacetimeActions={
+                <div className="info-card-actions">
+                  {spacetimes.length > 1 && isCoordinator ? (
+                    <button
+                      className="secondary-link-btn delete-spacetime-btn"
+                      onClick={() => {
+                        setShowModal(ModalStates.SPACETIME_DELETE);
+                        setFocusedSpacetimeID(spacetime.id);
+                        setDeleteType(false);
+                      }}
+                    >
+                      <XIcon className="icon" /> Delete
+                    </button>
+                  ) : (
+                    <div>{/* empty div for positioning */}</div>
+                  )}
+                  <button
+                    className="secondary-link-btn info-card-edit-btn"
+                    onClick={() => {
+                      setShowModal(ModalStates.SPACETIME_EDIT);
+                      setFocusedSpacetimeID(spacetime.id);
+                      setDeleteType(false);
+                    }}
+                  >
+                    <PencilIcon className="icon" /> Edit
+                  </button>
+                </div>
+              }
+              overrideActions={
+                <div className="info-card-actions">
+                  <button
+                    className="secondary-link-btn delete-spacetime-btn"
+                    onClick={() => {
+                      setShowModal(ModalStates.SPACETIME_DELETE);
+                      setFocusedSpacetimeID(spacetime.id);
+                      setDeleteType(true);
+                    }}
+                  >
+                    <XIcon className="icon" /> Delete
+                  </button>
+                  <button
+                    className="secondary-link-btn info-card-edit-btn"
+                    onClick={() => {
+                      setShowModal(ModalStates.SPACETIME_EDIT);
+                      setFocusedSpacetimeID(spacetime.id);
+                      setDeleteType(true);
+                    }}
+                  >
+                    <PencilIcon className="icon" /> Edit
+                  </button>
+                </div>
+              }
             >
               {showModal === ModalStates.SPACETIME_EDIT && focusedSpacetimeID === spacetime.id && (
                 <SpacetimeEditModal
@@ -136,61 +198,21 @@ export default function MentorSectionInfo({
                   overrideDelete={deleteType}
                 />
               )}
-              {spacetimes.length > 1 && isCoordinator && (
-                <button
-                  className="delete-spacetime-btn"
-                  onClick={() => {
-                    setShowModal(ModalStates.SPACETIME_DELETE);
-                    setFocusedSpacetimeID(spacetime.id);
-                    setDeleteType(false);
-                  }}
-                >
-                  <XIcon width="1em" height="1em" /> Delete
-                </button>
-              )}
-              {override && (
-                <button
-                  className="delete-override-btn"
-                  onClick={() => {
-                    setShowModal(ModalStates.SPACETIME_DELETE);
-                    setFocusedSpacetimeID(spacetime.id);
-                    setDeleteType(true);
-                  }}
-                >
-                  <XIcon width="1em" height="1em" /> Delete
-                </button>
-              )}
-              <button
-                className="info-card-edit-btn"
-                onClick={() => {
-                  setShowModal(ModalStates.SPACETIME_EDIT);
-                  setFocusedSpacetimeID(spacetime.id);
-                  setDeleteType(false);
-                }}
-              >
-                <PencilIcon width="1em" height="1em" /> Edit
-              </button>
-              {override && (
-                <button
-                  className="override-info-card-edit-btn"
-                  onClick={() => {
-                    setShowModal(ModalStates.SPACETIME_EDIT);
-                    setFocusedSpacetimeID(spacetime.id);
-                    setDeleteType(true);
-                  }}
-                >
-                  <PencilIcon width="1em" height="1em" /> Edit
-                </button>
-              )}
             </SectionSpacetime>
           ))}
 
           <InfoCard title="Meta">
             {isCoordinator && (
               <React.Fragment>
-                <button className="info-card-edit-btn" onClick={() => setShowModal(ModalStates.META_EDIT)}>
-                  <PencilIcon width="1em" height="1em" /> Edit
-                </button>
+                <div className="info-card-actions">
+                  <div>{/* empty div for positioning */}</div>
+                  <button
+                    className="secondary-link-btn info-card-edit-btn"
+                    onClick={() => setShowModal(ModalStates.META_EDIT)}
+                  >
+                    <PencilIcon className="icon" /> Edit
+                  </button>
+                </div>
                 {showModal === ModalStates.META_EDIT && (
                   <MetaEditModal
                     sectionId={sectionId}
diff --git a/csm_web/frontend/src/components/section/MentorSectionRoster.tsx b/csm_web/frontend/src/components/section/MentorSectionRoster.tsx
index 9d490380..3f874c37 100644
--- a/csm_web/frontend/src/components/section/MentorSectionRoster.tsx
+++ b/csm_web/frontend/src/components/section/MentorSectionRoster.tsx
@@ -24,12 +24,12 @@ export default function MentorSectionRoster({ id }: MentorSectionRosterProps) {
     <React.Fragment>
       <h3 className="section-detail-page-title">Roster</h3>
       {studentsLoaded ? (
-        <table className="standalone-table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Email</th>
-              <th>
+        <table className="csm-table standalone">
+          <thead className="csm-table-head">
+            <tr className="csm-table-head-row">
+              <th className="csm-table-item">Name</th>
+              <th className="csm-table-item">Email</th>
+              <th className="csm-table-item">
                 <CopyIcon id="copy-student-emails" height="1em" width="1em" onClick={handleCopyEmails} />
                 {emailsCopied && <CheckCircle id="copy-student-emails-success" height="1em" width="1em" />}
               </th>
@@ -37,9 +37,9 @@ export default function MentorSectionRoster({ id }: MentorSectionRosterProps) {
           </thead>
           <tbody>
             {students.map(({ name, email, id }) => (
-              <tr key={id}>
-                <td>{name}</td>
-                <td>{email}</td>
+              <tr key={id} className="csm-table-row">
+                <td className="csm-table-item">{name}</td>
+                <td className="csm-table-item">{email}</td>
               </tr>
             ))}
           </tbody>
diff --git a/csm_web/frontend/src/components/section/MetaEditModal.tsx b/csm_web/frontend/src/components/section/MetaEditModal.tsx
index e3bf76d7..d7eb2869 100644
--- a/csm_web/frontend/src/components/section/MetaEditModal.tsx
+++ b/csm_web/frontend/src/components/section/MetaEditModal.tsx
@@ -24,7 +24,7 @@ export default function MetaEditModal({
     setFormState(prevFormState => ({ ...prevFormState, [name]: value }));
   }
 
-  function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
+  function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
     //TODO: Handle API Failure
     sectionUpdateMutation.mutate(formState);
@@ -33,11 +33,12 @@ export default function MetaEditModal({
 
   return (
     <Modal closeModal={closeModal}>
-      <form className="csm-form" onSubmit={handleSubmit}>
-        <h4>Change Section Metadata</h4>
-        <label>
+      <div className="csm-form">
+        <h2>Change Section Metadata</h2>
+        <label className="form-label">
           Capacity
           <input
+            className="form-input"
             required
             name="capacity"
             type="number"
@@ -49,12 +50,22 @@ export default function MetaEditModal({
             autoFocus
           />
         </label>
-        <label>
+        <label className="form-label">
           Description
-          <input name="description" type="text" value={formState.description} onChange={handleChange} />
+          <input
+            className="form-input"
+            name="description"
+            type="text"
+            value={formState.description}
+            onChange={handleChange}
+          />
         </label>
-        <input type="submit" value="Save" />
-      </form>
+        <div className="form-actions">
+          <button className="primary-btn" onClick={handleSubmit}>
+            Save
+          </button>
+        </div>
+      </div>
     </Modal>
   );
 }
diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index 1936fc5b..dd735707 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -7,6 +7,10 @@ import { useSection } from "../../utils/queries/sections";
 import LoadingSpinner from "../LoadingSpinner";
 import { formatSpacetimeInterval } from "../../utils/datetime";
 
+// Styles
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/section.scss";
+
 export const ROLES = Object.freeze({ COORDINATOR: "COORDINATOR", STUDENT: "STUDENT", MENTOR: "MENTOR" });
 
 export default function Section(): React.ReactElement | null {
@@ -39,13 +43,14 @@ interface SectionHeaderProps {
 
 export function SectionHeader({ course, courseTitle, userRole }: SectionHeaderProps) {
   const relation = userRole.toLowerCase();
+  const relationColor = scssColors[relation];
   return (
     <div className="section-detail-header">
       <div className="section-detail-header-title">
         <h3>{course}</h3>
         <h4>{courseTitle}</h4>
       </div>
-      <div className="relation-label" style={{ backgroundColor: `var(--csm-${relation})` }}>
+      <div className="relation-label" style={{ backgroundColor: relationColor }}>
         {relation}
       </div>
     </div>
@@ -88,18 +93,30 @@ interface SectionSpacetimeProps {
   children?: React.ReactNode;
   spacetime: Spacetime;
   override?: Override;
+  spacetimeActions?: React.ReactNode;
+  overrideActions?: React.ReactNode;
 }
 
-export function SectionSpacetime({ manySpacetimes, index, spacetime, override, children }: SectionSpacetimeProps) {
+export function SectionSpacetime({
+  manySpacetimes,
+  index,
+  spacetime,
+  override,
+  spacetimeActions,
+  overrideActions,
+  children
+}: SectionSpacetimeProps) {
   const location = spacetime.location;
   return (
     <InfoCard title={`Time and Location${manySpacetimes ? ` ${index + 1}` : ""}`}>
+      {spacetimeActions}
       {children}
       <Location location={location} />
       <h5>{formatSpacetimeInterval(spacetime)}</h5>
       {override && (
         <React.Fragment>
           <div className="divider" />
+          {overrideActions}
           <div className="override-label">Adjusted for {override.date}</div>
           <Location location={override.spacetime.location} />
           <h5>{formatSpacetimeInterval(override.spacetime)}</h5>
@@ -113,14 +130,17 @@ interface InfoCardProps {
   title: string;
   children?: React.ReactNode;
   showTitle?: boolean;
+  extraPadding?: boolean;
 }
 
-export function InfoCard({ title, children, showTitle = true }: InfoCardProps) {
+export function InfoCard({ title, children, showTitle = true, extraPadding = true }: InfoCardProps) {
   const cssClass = title.toLowerCase().replace(/ /g, "-");
   return (
     <div className={`section-detail-info-card ${cssClass}`}>
-      {showTitle && <h4>{title}</h4>}
-      <div className={`section-detail-info-card-contents ${cssClass}`}>{children}</div>
+      {showTitle && <h2>{title}</h2>}
+      <div className={`section-detail-info-card-contents ${extraPadding ? "padded-card" : ""} ${cssClass}`}>
+        {children}
+      </div>
     </div>
   );
 }
@@ -132,7 +152,6 @@ interface SectionDetailProps {
   links: string[][];
   children?: React.ReactNode;
 }
-
 export function SectionDetail({ course, courseTitle, userRole, links, children }: SectionDetailProps) {
   return (
     <section>
@@ -147,8 +166,8 @@ export function SectionDetail({ course, courseTitle, userRole, links, children }
 
 // Values are [label, css class suffix]
 export const ATTENDANCE_LABELS: Readonly<{ [label: string]: string[] }> = Object.freeze({
-  UN: ["Unexcused Absence", "unexcused"],
   EX: ["Excused Absence", "excused"],
   PR: ["Present", "present"],
+  UN: ["Unexcused Absence", "unexcused"],
   "": ["", ""]
 });
diff --git a/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx b/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx
index 602de35c..6e717451 100644
--- a/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx
+++ b/csm_web/frontend/src/components/section/SpacetimeDeleteModal.tsx
@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import { useSpacetimeDeleteMutation, useSpacetimeOverrideDeleteMutation } from "../../utils/queries/spacetime";
 import Modal from "../Modal";
 
+// Styles
+import "../../css/spacetime_delete.scss";
+
 interface SpacetimeDeleteProps {
   spacetimeId: number;
   sectionId: number;
@@ -32,17 +35,15 @@ export default function SpacetimeDeleteModal({
   return (
     <Modal closeModal={closeModal}>
       <div className="deleteSpacetime">
+        <h2>Delete {overrideDelete ? "Override" : "Spacetime"}</h2>
         <div>
-          <h4>Delete {overrideDelete ? "Override" : "Spacetime"}</h4>
-          <div>
-            <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
-            <label className="spacetimeCheckboxLabel" htmlFor="drop">
-              I understand this {overrideDelete ? "override" : "spacetime"} will be permenantly deleted.
-            </label>
-          </div>
+          <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
+          <label className="spacetimeCheckboxLabel" htmlFor="drop">
+            I understand this {overrideDelete ? "override" : "spacetime"} will be permenantly deleted.
+          </label>
         </div>
         <div className="spacetimeDeleteDropper">
-          <button className="spacetimeDeleteSubmit" disabled={!drop} onClick={handleClickDrop}>
+          <button className="danger-btn" disabled={!drop} onClick={handleClickDrop}>
             Submit
           </button>
         </div>
diff --git a/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx b/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx
index c3960f53..272e8e3d 100644
--- a/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx
+++ b/csm_web/frontend/src/components/section/SpacetimeEditModal.tsx
@@ -7,6 +7,9 @@ import LoadingSpinner from "../LoadingSpinner";
 import Modal from "../Modal";
 import TimeInput from "../TimeInput";
 
+// Styles
+import "../../css/spacetime-edit.scss";
+
 interface SpacetimeEditModalProps {
   sectionId: number;
   closeModal: () => void;
@@ -31,7 +34,7 @@ const SpaceTimeEditModal = ({
   const spacetimeModifyMutation = useSpacetimeModifyMutation(sectionId, spacetimeId);
   const spacetimeOverrideMutation = useSpacetimeOverrideMutation(sectionId, spacetimeId);
 
-  const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     //TODO: Handle API failure
     setShowSaveSpinner(true);
@@ -53,121 +56,146 @@ const SpaceTimeEditModal = ({
 
   return (
     <Modal className="spacetime-edit-modal" closeModal={closeModal}>
-      <form className="csm-form" id="spacetime-edit-form" onSubmit={handleSubmit}>
-        <h4>Change Time and Location</h4>
-        <div className="mode-selection">
-          <label>Section is</label>
-          <div className="mode-selection-options">
-            <label>
-              <input
-                onChange={e => setMode(e.target.value)}
-                type="radio"
-                name="mode"
-                value="inperson"
-                checked={mode === "inperson"}
-              />
-              In person
-            </label>
-            <label>
-              <input
-                onChange={e => setMode(e.target.value)}
-                type="radio"
-                name="mode"
-                value="virtual"
-                checked={mode === "virtual"}
-              />
-              Virtual
-            </label>
-          </div>
-        </div>
-        <label>
-          {mode === "inperson" ? "Location" : "Video Call Link"}
-          <input
-            onChange={e => setLocation(e.target.value)}
-            required
-            title="You cannot leave this field blank"
-            pattern=".*[^\s]+.*"
-            type={mode === "inperson" ? "text" : "url"}
-            maxLength={200}
-            name="location"
-            value={location}
-            autoFocus
-          />
-        </label>
-        {/* Would use a fieldset to be semantic, but Chrome has a bug where flexbox doesn't work for fieldset */}
-        <div id="day-time-fields">
-          <label>
-            Day
-            <select
-              onChange={e => setDay(parseInt(e.target.value))}
-              required={!!isPermanent}
-              name="day"
-              disabled={!isPermanent}
-              value={isPermanent ? day : "---"}
-            >
-              {[["---", ""], ...Array.from(DAYS_OF_WEEK)].map(([label, value]) => (
-                <option key={value} value={value} disabled={value === "---"}>
-                  {label}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label>
-            Time
-            <TimeInput onChange={e => setTime(e.currentTarget.value)} required name="time" value={time} />
-          </label>
-        </div>
-        <div id="date-of-change-fields">
-          <label>Change for</label>
-          {!editingOverride && (
-            <React.Fragment>
+      <div id="spacetime-edit-form">
+        <h2 className="spacetime-edit-form-title">Change Time and Location</h2>
+        <div className="csm-form">
+          <div className="mode-selection">
+            <label className="form-label">Section is</label>
+            <div className="form-radio-group-row">
+              <label>
+                <input
+                  className="form-radio"
+                  onChange={e => setMode(e.target.value)}
+                  type="radio"
+                  name="mode"
+                  value="inperson"
+                  checked={mode === "inperson"}
+                />
+                In person
+              </label>
               <label>
                 <input
-                  onChange={e => setIsPermanent(e.target.checked)}
-                  required
+                  className="form-radio"
+                  onChange={e => setMode(e.target.value)}
                   type="radio"
-                  name="isPermanent"
-                  checked={!!isPermanent}
-                  value="true"
+                  name="mode"
+                  value="virtual"
+                  checked={mode === "virtual"}
                 />
-                All sections
+                Virtual
               </label>
-              <input
-                onChange={e => setIsPermanent(!e.target.checked)}
+            </div>
+          </div>
+          <label className="form-label">
+            {mode === "inperson" ? "Location" : "Video Call Link"}
+            <input
+              className="form-input"
+              onChange={e => setLocation(e.target.value)}
+              required
+              title="You cannot leave this field blank"
+              pattern=".*[^\s]+.*"
+              type={mode === "inperson" ? "text" : "url"}
+              maxLength={200}
+              name="location"
+              value={location}
+              autoFocus
+            />
+          </label>
+          {/* Would use a fieldset to be semantic, but Chrome has a bug where flexbox doesn't work for fieldset */}
+          <div id="day-time-fields">
+            <label className="form-label">
+              Day
+              <select
+                className="form-select"
+                onChange={e => setDay(e.target.value)}
+                required={!!isPermanent}
+                name="day"
+                disabled={!isPermanent}
+                value={isPermanent ? day : "---"}
+              >
+                {[["---", ""], ...Array.from(DAYS_OF_WEEK)].map(([label, value]) => (
+                  <option key={value} value={value} disabled={value === "---"}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="form-label">
+              Time
+              <TimeInput
+                className="form-date"
+                onChange={e => setTime(e.currentTarget.value)}
                 required
-                type="radio"
-                name="isPermanent"
-                checked={!isPermanent}
-                value=""
-              />
-              <input
-                onChange={e => setDate(e.target.value)}
-                required={!isPermanent}
-                type="date"
-                min={today}
-                name="changeDate"
-                disabled={!!isPermanent}
-                value={isPermanent ? "" : date}
-              />
-              <label></label>
-            </React.Fragment>
-          )}
-          {editingOverride && (
-            <React.Fragment>
-              <input
-                onChange={e => setDate(e.target.value)}
-                required={!isPermanent}
-                type="date"
-                min={today}
-                name="changeDate"
-                disabled={!!isPermanent}
-                value={isPermanent ? "" : date}
+                name="time"
+                value={time}
               />
-            </React.Fragment>
-          )}
+            </label>
+          </div>
+          <div id="date-of-change-fields">
+            <label className="form-label">Change for</label>
+            {!editingOverride && (
+              <div className="form-radio-group-col">
+                <label className="form-radio-item">
+                  <input
+                    className="form-radio"
+                    onChange={e => setIsPermanent(e.target.checked)}
+                    required
+                    type="radio"
+                    name="isPermanent"
+                    checked={!!isPermanent}
+                    value="true"
+                  />
+                  All sections
+                </label>
+                <label className="form-radio-item">
+                  <input
+                    className="form-radio"
+                    onChange={e => setIsPermanent(!e.target.checked)}
+                    required
+                    type="radio"
+                    name="isPermanent"
+                    checked={!isPermanent}
+                    value=""
+                  />
+                  <input
+                    className="form-date"
+                    onChange={e => setDate(e.target.value)}
+                    required={!isPermanent}
+                    type="date"
+                    min={today}
+                    name="changeDate"
+                    disabled={!!isPermanent}
+                    value={isPermanent ? "" : date}
+                  />
+                </label>
+              </div>
+            )}
+            {editingOverride && (
+              <div className="form-radio-group-col">
+                <input
+                  className="form-date"
+                  onChange={e => setDate(e.target.value)}
+                  required={!isPermanent}
+                  type="date"
+                  min={today}
+                  name="changeDate"
+                  disabled={!!isPermanent}
+                  value={isPermanent ? "" : date}
+                />
+              </div>
+            )}
+          </div>
+          <div className="form-actions">
+            {showSaveSpinner ? (
+              <LoadingSpinner />
+            ) : (
+              <button className="primary-btn" onClick={handleSubmit}>
+                Save
+              </button>
+            )}
+          </div>
         </div>
-        <div id="submit-and-status">{showSaveSpinner ? <LoadingSpinner /> : <input type="submit" value="Save" />}</div>
-      </form>
+      </div>
     </Modal>
   );
 };
diff --git a/csm_web/frontend/src/components/section/StudentDropper.tsx b/csm_web/frontend/src/components/section/StudentDropper.tsx
index 64432b6b..edf41a80 100644
--- a/csm_web/frontend/src/components/section/StudentDropper.tsx
+++ b/csm_web/frontend/src/components/section/StudentDropper.tsx
@@ -2,6 +2,12 @@ import React, { useState } from "react";
 import { useDropStudentMutation } from "../../utils/queries/sections";
 import Modal from "../Modal";
 
+// Images
+import XIcon from "../../../static/frontend/img/x.svg";
+
+// Styles
+import "../../css/student_dropper.scss";
+
 interface StudentDropperProps {
   id: number;
   sectionId: number;
@@ -25,23 +31,36 @@ export default function StudentDropper({ id, sectionId, name, courseRestricted }
     setShowDropPrompt(false);
   }
 
+  const dropDiv = (
+    <div>
+      <h2 className="student-dropper-head-item">DROP Student</h2>
+      <div className="student-dropper-checkbox-container">
+        <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
+        <label className="student-dropper-checkbox-label" htmlFor="drop">
+          I would like to DROP {name} from this section.
+        </label>
+        <br></br>
+      </div>
+    </div>
+  );
+
   const banDiv = (
-    <React.Fragment>
-      <div className="studentDropperHeadItem">BAN Student</div>
-      <div>
+    <div>
+      <h2 className="student-dropper-head-item">BAN Student</h2>
+      <div className="student-dropper-checkbox-container">
         <input type="checkbox" id="ban" name="ban" onChange={e => setBan(e.target.checked)} disabled={!drop} />
-        <label className="studentDropperCheckboxLabel" htmlFor="ban">
+        <label className="student-dropper-checkbox-label" htmlFor="ban">
           I would like to BAN {name} from this course.
         </label>
         <br></br>
       </div>
-    </React.Fragment>
+    </div>
   );
 
   const blacklistDiv = (
-    <React.Fragment>
-      <div className="studentDropperHeadItem">BLACKLIST Student</div>
-      <div>
+    <div>
+      <h2 className="student-dropper-head-item">BLACKLIST Student</h2>
+      <div className="student-dropper-checkbox-container">
         <input
           type="checkbox"
           id="blacklist"
@@ -49,41 +68,29 @@ export default function StudentDropper({ id, sectionId, name, courseRestricted }
           onChange={e => setBlacklist(e.target.checked)}
           disabled={!drop}
         />
-        <label className="studentDropperCheckboxLabel" htmlFor="blacklist">
+        <label className="student-dropper-checkbox-label" htmlFor="blacklist">
           I would like to BLACKLIST {name} from this course.
         </label>
         <br></br>
       </div>
-    </React.Fragment>
+    </div>
   );
 
   return (
     <span className={`student-dropper ${showDropPrompt ? "ban-prompt-visible" : ""}`}>
-      <span title="Drop student from section" className="inline-plus-sign" onClick={() => setShowDropPrompt(true)}>
-        &times;
-      </span>
+      <XIcon
+        className="icon inline-plus-sign"
+        title="Drop student from section"
+        onClick={() => setShowDropPrompt(true)}
+      />
       {showDropPrompt && (
-        <Modal closeModal={() => setShowDropPrompt(false)}>
-          <div className="studentDropper">
-            <div className="studentDropperHeadItem">DROP Student</div>
-            <div>
-              <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
-              <label className="studentDropperCheckboxLabel" htmlFor="drop">
-                I would like to DROP {name} from this section.
-              </label>
-              <br></br>
-            </div>
-            {courseRestricted ? blacklistDiv : banDiv}
-            <div className="studentDropperSubmitWrapper">
-              <button
-                className="studentDropperSubmit"
-                id="dropper submit button"
-                onClick={handleClickDrop}
-                disabled={!drop}
-              >
-                Submit
-              </button>
-            </div>
+        <Modal className="student-dropper-modal" closeModal={() => setShowDropPrompt(false)}>
+          {dropDiv}
+          {courseRestricted ? blacklistDiv : banDiv}
+          <div className="student-dropper-submit-wrapper">
+            <button className="danger-btn" onClick={handleClickDrop} disabled={!drop}>
+              Submit
+            </button>
           </div>
         </Modal>
       )}
diff --git a/csm_web/frontend/src/components/section/StudentSection.tsx b/csm_web/frontend/src/components/section/StudentSection.tsx
index 54ba9ea7..d5fbd160 100644
--- a/csm_web/frontend/src/components/section/StudentSection.tsx
+++ b/csm_web/frontend/src/components/section/StudentSection.tsx
@@ -10,12 +10,17 @@ import Modal from "../Modal";
 import { ATTENDANCE_LABELS, InfoCard, ROLES, SectionDetail, SectionSpacetime } from "./Section";
 import { dateSortISO, formatDateLocaleShort, formatDateAbbrevWord } from "./utils";
 
+// Images
 import XIcon from "../../../static/frontend/img/x.svg";
 import LoadingSpinner from "../LoadingSpinner";
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 import { DateTime } from "luxon";
 import { DEFAULT_TIMEZONE } from "../../utils/datetime";
 
+// Styles
+import scssColors from "../../css/base/colors-export.module.scss";
+import "../../css/word-of-the-day.scss";
+
 interface StudentSectionType {
   id: number;
   course: string;
@@ -128,19 +133,21 @@ function DropSection({ profileId }: DropSectionProps) {
         <InfoCard title="Drop Section" showTitle={false}>
           <h5>Drop Section</h5>
           <button className="danger-btn" onClick={() => setStage(DropSectionStage.CONFIRM)}>
-            <XIcon height="1.3em" width="1.3em" />
+            <XIcon className="icon" />
             Drop
           </button>
         </InfoCard>
       );
     case DropSectionStage.CONFIRM:
       return (
-        <Modal className="drop-confirmation" closeModal={() => setStage(DropSectionStage.INITIAL)}>
-          <h5>Are you sure you want to drop?</h5>
-          <p>You are not guaranteed an available spot in another section!</p>
-          <button className="danger-btn" onClick={performDrop}>
-            Confirm
-          </button>
+        <Modal closeModal={() => setStage(DropSectionStage.INITIAL)}>
+          <div className="drop-confirmation">
+            <h5>Are you sure you want to drop?</h5>
+            <p>You are not guaranteed an available spot in another section!</p>
+            <button className="danger-btn" onClick={performDrop}>
+              Confirm
+            </button>
+          </div>
         </Modal>
       );
     case DropSectionStage.DROPPED:
@@ -249,13 +256,9 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
     <React.Fragment>
       <div id="word-of-the-day-card">
         <h3 className="word-of-the-day-title">Submit Word of the Day</h3>
-        <div className="word-of-the-day-input-container">
-          <div className="word-of-the-day-select-container">
-            <select
-              value={selectedAttendanceId}
-              className="word-of-the-day-select"
-              onChange={handleSelectedAttendanceIdChange}
-            >
+        <div className="word-of-the-day-action-container">
+          <div className="word-of-the-day-input-container">
+            <select value={selectedAttendanceId} className="form-select" onChange={handleSelectedAttendanceIdChange}>
               {attendances
                 // only allow choosing from dates with blank attendances
                 .filter(attendance => attendance.presence === "")
@@ -269,7 +272,7 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
                 ))}
             </select>
             <input
-              className="word-of-the-day-input"
+              className="form-input"
               type="text"
               placeholder="Word of the Day"
               value={currentWord}
@@ -283,7 +286,7 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
               <CheckCircle className="word-of-the-day-icon" />
             ) : null}
             <button
-              className="csm-btn word-of-the-day-submit"
+              className="primary-btn"
               onClick={handleSubmitWord}
               disabled={
                 !currentWord ||
@@ -310,11 +313,11 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
           <div className="word-of-the-day-status-text">{responseText}</div>
         </div>
       </div>
-      <table id="attendance-table" className="standalone-table">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Status</th>
+      <table id="attendance-table" className="csm-table standalone">
+        <thead className="csm-table-head">
+          <tr className="csm-table-head-row">
+            <th className="csm-table-item">Date</th>
+            <th className="csm-table-item">Status</th>
           </tr>
         </thead>
         <tbody>
@@ -324,11 +327,18 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
             // convert to a table row
             .map(({ presence, date }) => {
               const [label, cssSuffix] = ATTENDANCE_LABELS[presence];
+              const attendanceColor = scssColors[`attendance-${cssSuffix}`];
+              const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`];
               return (
-                <tr key={date}>
-                  <td>{formatDateLocaleShort(date)}</td>
-                  <td className="status">
-                    <div style={{ backgroundColor: `var(--csm-attendance-${cssSuffix})` }}>{label}</div>
+                <tr key={date} className="csm-table-row">
+                  <td className="csm-table-item">{formatDateLocaleShort(date)}</td>
+                  <td className="csm-table-item">
+                    <div
+                      className="attendance-status"
+                      style={{ backgroundColor: attendanceColor, color: attendanceFgColor }}
+                    >
+                      {label}
+                    </div>
                   </td>
                 </tr>
               );
diff --git a/csm_web/frontend/src/css.d.ts b/csm_web/frontend/src/css.d.ts
new file mode 100644
index 00000000..0f3f87bd
--- /dev/null
+++ b/csm_web/frontend/src/css.d.ts
@@ -0,0 +1,4 @@
+/* Declrae additional modules to allow imports of css */
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";
diff --git a/csm_web/frontend/src/css/base/_variables.scss b/csm_web/frontend/src/css/base/_variables.scss
new file mode 100644
index 00000000..d2fc669b
--- /dev/null
+++ b/csm_web/frontend/src/css/base/_variables.scss
@@ -0,0 +1,67 @@
+/// Colors
+
+// --csm-green: rgb(124, 233, 162);
+$csm-green: #9ae0b3;
+$csm-green-darkened: #75b38a;
+$csm-green-lightened: #d7ffe5;
+$csm-theme-csm61a: $csm-green;
+$csm-theme-csm61b: #63c5ff;
+$csm-theme-csm61c: #797c99;
+$csm-theme-csm70: #ff7070;
+$csm-theme-csm88: #e46495;
+$csm-theme-csm16a: #707eff;
+$csm-theme-csm16b: #ffe070;
+$csm-theme-default: black;
+
+$csm-mentor: $csm-green;
+$csm-coordinator: #6517b3;
+$csm-student: #ffab2e;
+
+$csm-danger: #ff7272;
+$csm-danger-darkened: #eb6060;
+$csm-neutral: #c0c0c0;
+$csm-neutral-darkened: #b6b6b6;
+$csm-resources: #ededed;
+$csm-link-blue: #039be5;
+$csm-link-hover: rgba(196, 196, 196, 0.28);
+
+$csm-attendance-present: $csm-green;
+$csm-attendance-excused: #797979;
+$csm-attendance-unexcused: $csm-danger;
+$csm-attendance-present-fg: black;
+$csm-attendance-excused-fg: white;
+$csm-attendance-unexcused-fg: black;
+
+$csm-content-title-color: #646464;
+
+/// calendar colors
+$calendar-header-bg: #f5f5f5;
+$calendar-header-border: #e5e5e5;
+$calendar-border: #ddd;
+$calendar-fg: #333;
+
+$calendar-label-fg: #666;
+$calendar-day-bg: white;
+
+$calendar-dragging-event: #ffd6dd;
+$calendar-creating-event: lightpink;
+$calendar-hover-event: #d2ffd2;
+$calendar-hover-shadow: #ccc;
+$calendar-select-event: #90ee90;
+
+/// Fonts
+$default-font: "Montserrat", sans-serif;
+
+// Lengths
+
+$day-btn-size: 70px;
+$arrow-size: 8px;
+$button-icon-gap: 4px;
+
+/// Height of the top close bar.
+$modal-close-height: 2em;
+/// Total padding in the modal contents.
+$modal-padding-y: 40px;
+
+/// Table padding amount
+$table-padding: 15px;
diff --git a/csm_web/frontend/src/css/base/base.scss b/csm_web/frontend/src/css/base/base.scss
new file mode 100644
index 00000000..b5392eec
--- /dev/null
+++ b/csm_web/frontend/src/css/base/base.scss
@@ -0,0 +1,76 @@
+/* Generic global styling */
+
+@use "variables" as *;
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-family: $default-font;
+}
+
+body {
+  max-width: 100%;
+  /* Usually set by browser stylesheet, but we standardize it here to account for different browsers */
+  margin: 8px;
+  overflow-x: hidden;
+}
+
+main {
+  padding: 2rem;
+  margin-left: -8px;
+}
+
+button {
+  // use parent font instead of default button font
+  font-family: inherit;
+  // use parent font size instead of default button font size
+  font-size: inherit;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  // remove top margin for all headers;
+  // especially for the modal windows
+  margin-top: 0;
+}
+
+/// Styling for inline + or x signs, mostly used for add or close buttons.
+.inline-plus-sign {
+  font-weight: 600;
+  font-size: 1.5rem;
+  vertical-align: sub;
+}
+
+.icon {
+  display: inline-block;
+  font-size: inherit;
+  width: 1rem;
+  height: 1rem;
+  overflow: visible;
+  margin-top: -0.125em;
+
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+/// Styling for relation label; used across multiple pages
+.relation-label {
+  text-transform: capitalize;
+  padding: 8px 16px;
+  color: white;
+  min-width: 60px;
+  max-width: fit-content;
+  max-width: -moz-fit-content;
+  text-align: center;
+  border-radius: 20px;
+  margin-top: auto;
+}
diff --git a/csm_web/frontend/src/css/base/button.scss b/csm_web/frontend/src/css/base/button.scss
new file mode 100644
index 00000000..4c46ad4f
--- /dev/null
+++ b/csm_web/frontend/src/css/base/button.scss
@@ -0,0 +1,139 @@
+/* Styling for buttons and tabs. */
+
+@use "variables" as *;
+
+/** Base button styling */
+%button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: $button-icon-gap;
+
+  padding: 8px 15px;
+  // rounded corners
+  border-radius: 10px;
+  // no border around button
+  border: none;
+  outline: none;
+  // default text
+  text-decoration: none;
+  // need to respecify the font family on buttons
+  font-family: $default-font;
+  // don't allow selecting text in buttons
+  user-select: none;
+  // set cursor
+  cursor: pointer;
+
+  &:disabled,
+  &:disabled:hover {
+    background-color: $csm-neutral;
+    cursor: not-allowed;
+  }
+}
+
+.primary-btn {
+  @extend %button;
+
+  background-color: $csm-green;
+  color: white;
+
+  &:not(:disabled):hover {
+    background-color: $csm-green-darkened;
+  }
+}
+
+.secondary-btn {
+  @extend %button;
+
+  background-color: $csm-neutral;
+  color: white;
+
+  &:not(:disabled):hover {
+    background-color: $csm-neutral-darkened;
+  }
+}
+
+.danger-btn {
+  @extend %button;
+
+  background-color: $csm-danger;
+  color: white;
+
+  &:not(:disabled):hover {
+    background-color: $csm-danger-darkened;
+  }
+}
+
+.primary-link-btn {
+  @extend %button;
+
+  background-color: inherit;
+  color: $csm-green;
+
+  // bolder font
+  font-weight: bold;
+
+  &:not(:disabled):hover {
+    color: $csm-green-darkened;
+  }
+}
+
+.secondary-link-btn {
+  @extend %button;
+
+  background-color: inherit;
+  color: $csm-neutral;
+
+  &:not(:disabled):hover {
+    color: $csm-neutral-darkened;
+  }
+}
+
+.primary-outline-btn {
+  @extend %button;
+
+  background-color: inherit;
+  font-weight: bold;
+  color: $csm-green;
+  border: 3px solid $csm-green;
+
+  &:not(:disabled):hover {
+    color: $csm-green-darkened;
+    border-color: $csm-green-darkened;
+  }
+}
+
+.tab-list {
+  // flex box with centered content
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  // small gap between tabs
+  gap: 8px;
+  // extra margins on top and bottom
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.tab {
+  @extend %button;
+
+  background-color: $csm-neutral;
+  color: white;
+
+  // extra padding for tabs
+  padding: 12px 15px;
+
+  // active tab styling
+  &.active {
+    background-color: $csm-green;
+  }
+
+  // inactive hover; darken to suggest it is clickable
+  // no active hover, since an active tab cannot be clicked
+  &:not(.active):hover {
+    background-color: $csm-neutral-darkened;
+  }
+}
diff --git a/csm_web/frontend/src/css/base/colors-export.module.scss b/csm_web/frontend/src/css/base/colors-export.module.scss
new file mode 100644
index 00000000..c3ded4c3
--- /dev/null
+++ b/csm_web/frontend/src/css/base/colors-export.module.scss
@@ -0,0 +1,24 @@
+/// Variables to be exported for use in React components
+@use "variables" as *;
+
+:export {
+  csm61a: $csm-theme-csm61a;
+  csm61b: $csm-theme-csm61b;
+  csm61c: $csm-theme-csm61c;
+  csm70: $csm-theme-csm70;
+  csm88: $csm-theme-csm88;
+  csm16a: $csm-theme-csm16a;
+  csm16b: $csm-theme-csm16b;
+
+  student: $csm-student;
+  mentor: $csm-mentor;
+  coordinator: $csm-coordinator;
+
+  attendance-present: $csm-attendance-present;
+  attendance-excused: $csm-attendance-excused;
+  attendance-unexcused: $csm-attendance-unexcused;
+
+  attendance-present-fg: $csm-attendance-present-fg;
+  attendance-excused-fg: $csm-attendance-excused-fg;
+  attendance-unexcused-fg: $csm-attendance-unexcused-fg;
+}
diff --git a/csm_web/frontend/src/css/base/errors.scss b/csm_web/frontend/src/css/base/errors.scss
new file mode 100644
index 00000000..e9a3a828
--- /dev/null
+++ b/csm_web/frontend/src/css/base/errors.scss
@@ -0,0 +1,34 @@
+/// Error page styles
+
+@use "variables" as *;
+
+#fatal-error-page {
+  max-width: 38rem;
+  padding: 2rem;
+  margin: auto;
+}
+
+#fatal-error-page > h1 {
+  text-align: center;
+  color: $csm-danger;
+}
+
+#stack-trace {
+  overflow: auto;
+}
+
+#stack-trace > pre {
+  width: fit-content;
+  width: -moz-fit-content;
+  margin: auto;
+}
+
+.internal-error-title {
+  color: $csm-danger !important;
+}
+
+.internal-error-body {
+  font-size: 1.5rem;
+  text-align: center;
+  width: 80%;
+}
diff --git a/csm_web/frontend/src/css/base/form.scss b/csm_web/frontend/src/css/base/form.scss
new file mode 100644
index 00000000..7ae666da
--- /dev/null
+++ b/csm_web/frontend/src/css/base/form.scss
@@ -0,0 +1,144 @@
+/// Form styles
+
+@use "variables" as *;
+
+.csm-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  padding: 0 40px;
+}
+
+// .csm-form > * {
+//   margin-bottom: 20px;
+// }
+//
+// .csm-form label {
+//   display: block;
+//   color: #646464;
+//   font-weight: 600;
+// }
+
+.form-select,
+.form-input,
+.form-date {
+  display: block;
+
+  background-color: #f5f5f5;
+  border: none;
+  border-radius: 6px;
+
+  box-sizing: content-box;
+}
+
+.form-select:disabled,
+.form-input:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.form-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+
+  font-weight: bold;
+}
+
+// height/padding differences
+.form-input,
+.form-select {
+  height: 16px;
+  padding: 8px;
+}
+.form-date {
+  height: 20px;
+  padding: 6px 8px;
+}
+
+/// Select element
+
+.form-select {
+  max-width: 200px;
+  width: 200px;
+  border: none;
+  background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>');
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 1em auto, 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+/* Neccessary for options to be legible on Windows */
+.form-select > option {
+  background-color: white;
+  color: black;
+}
+
+/// Radio element
+
+.form-radio {
+  margin: 0 10px 0 0;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  border: 2px solid $csm-green;
+  border-radius: 8px;
+  vertical-align: middle;
+
+  &[value="true"] {
+    position: relative;
+    bottom: 1px;
+  }
+
+  &:checked {
+    background-color: $csm-green;
+  }
+}
+
+/// Radio input item (box and label)
+.form-radio-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.form-radio-group {
+  /// default should be column
+  &,
+  &-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+
+    margin: 5px;
+  }
+
+  &-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 40px;
+
+    margin: 5px;
+  }
+}
+
+/// Action buttons at bottom of form
+.form-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/csm_web/frontend/src/css/base/modal.scss b/csm_web/frontend/src/css/base/modal.scss
new file mode 100644
index 00000000..41ca2bfd
--- /dev/null
+++ b/csm_web/frontend/src/css/base/modal.scss
@@ -0,0 +1,73 @@
+/* Modal styling */
+@use "sass:math" as math;
+
+@use "variables" as *;
+@use "button";
+
+/// Overlay for the modal window; grays out the screen behind the modal.
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  max-width: unset !important;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/// Modal container; controls the positioning within the screen.
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: max-content;
+  height: max-content;
+  z-index: 1000;
+  background-color: white;
+  border-radius: 20px;
+}
+
+/// Contents of the modal; all children are put into this container.
+.modal-contents {
+  padding: math.div($modal-padding-y, 2);
+  overflow: auto;
+}
+
+/// Top bar in the modal that contains the close button.
+.modal-close-container {
+  position: sticky;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin-right: 1em;
+
+  height: $modal-close-height;
+}
+
+.modal-close-x {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: inherit;
+  color: black;
+  padding: 0;
+
+  // center the x icon vertically and horizontally
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: gray;
+  }
+
+  .icon {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+}
diff --git a/csm_web/frontend/src/css/base/searchbar.scss b/csm_web/frontend/src/css/base/searchbar.scss
new file mode 100644
index 00000000..6483d8dd
--- /dev/null
+++ b/csm_web/frontend/src/css/base/searchbar.scss
@@ -0,0 +1,35 @@
+@use "variables" as *;
+
+.search-bar {
+  min-width: 100px;
+  width: 250px;
+  max-width: 250px;
+}
+
+.search-icon {
+  display: inline-block;
+  font-size: inherit;
+
+  position: absolute;
+  z-index: 999;
+
+  width: 1.5rem;
+  height: 1.25rem;
+
+  padding: 3px;
+  margin-top: 1px;
+
+  overflow: visible;
+}
+
+.search-input {
+  width: 100%;
+  box-sizing: border-box;
+
+  border: 1px solid $csm-neutral;
+  border-radius: 3px;
+  padding: 5px;
+  padding-left: 2em;
+
+  font-family: inherit;
+}
diff --git a/csm_web/frontend/src/css/base/spinner.scss b/csm_web/frontend/src/css/base/spinner.scss
new file mode 100644
index 00000000..cd165223
--- /dev/null
+++ b/csm_web/frontend/src/css/base/spinner.scss
@@ -0,0 +1,156 @@
+/* Loading Spinner */
+
+@use "variables" as *;
+
+.spinner-centered {
+  margin: auto;
+  height: 50px;
+  width: 50px;
+}
+
+.sk-fading-circle {
+  width: 35px;
+  height: 35px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: $csm-green;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
diff --git a/csm_web/frontend/src/css/base/styles.scss b/csm_web/frontend/src/css/base/styles.scss
new file mode 100644
index 00000000..1fab79e6
--- /dev/null
+++ b/csm_web/frontend/src/css/base/styles.scss
@@ -0,0 +1,16 @@
+/// Base styling for the entire site
+
+@use "variables";
+
+/// generic styling
+@use "base";
+
+/// other styling for generic components
+@use "button";
+@use "errors";
+@use "form";
+@use "modal";
+@use "searchbar";
+@use "spinner";
+@use "table";
+@use "tooltip";
diff --git a/csm_web/frontend/src/css/base/table.scss b/csm_web/frontend/src/css/base/table.scss
new file mode 100644
index 00000000..a40c0038
--- /dev/null
+++ b/csm_web/frontend/src/css/base/table.scss
@@ -0,0 +1,30 @@
+/// Table styles
+
+@use "variables" as *;
+
+.csm-table {
+  max-width: 90vw;
+  padding: 20px;
+  border-spacing: 0;
+
+  /// additional styling if the table is standalone
+  &.standalone {
+    border: 2px solid #e7e7e7;
+    box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25);
+    border-radius: 20px;
+  }
+}
+
+.csm-table-head {
+  text-align: left;
+}
+
+.csm-table-head-row {
+  font-size: 1.5rem;
+  color: $csm-content-title-color;
+  padding: 0 $table-padding;
+}
+
+.csm-table-item {
+  padding: $table-padding;
+}
diff --git a/csm_web/frontend/src/css/base/tooltip.scss b/csm_web/frontend/src/css/base/tooltip.scss
new file mode 100644
index 00000000..eea5b40b
--- /dev/null
+++ b/csm_web/frontend/src/css/base/tooltip.scss
@@ -0,0 +1,32 @@
+.tooltip,
+.tooltip-source {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip-source {
+  position: relative;
+}
+
+.tooltip-body {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  visibility: visible;
+  background-color: #fff;
+  font-size: 0.85rem;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+
+  width: max-content;
+}
+
+.tooltip-body.open {
+  opacity: 1;
+  display: block;
+}
diff --git a/csm_web/frontend/src/css/calendar.scss b/csm_web/frontend/src/css/calendar.scss
new file mode 100644
index 00000000..4b0977d4
--- /dev/null
+++ b/csm_web/frontend/src/css/calendar.scss
@@ -0,0 +1,178 @@
+@use "base/variables" as *;
+
+$calendar-interval-height: 26px;
+
+/*
+Hierarchy:
+
+.calendar-container
+  > .calendar-header
+    > .calendar-header-left
+    > .calendar-day-header
+  > .calendar-body
+    > .calendar-day-container
+      > .calendar-labels
+        > .calendar-label
+      > .calendar-day
+        > .calendar-day-interval
+*/
+
+.calendar-container {
+  box-sizing: border-box;
+  /* width: 55vw; */
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  border-bottom: 1px solid $calendar-header-border;
+  box-sizing: border-box;
+}
+
+.calendar-day-header {
+  background-color: $calendar-header-bg;
+  border-left: 1px solid $calendar-border;
+  border-right: 1px solid $calendar-border;
+  color: $calendar-fg;
+  font-weight: bold;
+  padding: 5px 0;
+  text-align: center;
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+}
+
+.calendar-body {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.calendar-day-container {
+  width: 100%;
+  flex: 1;
+}
+
+.calendar-day {
+  background-color: $calendar-day-bg;
+  border: 1px solid $calendar-border;
+  color: $calendar-fg;
+  font-size: 14px;
+  text-align: center;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.calendar-day-interval {
+  box-sizing: border-box;
+  border-top: 1px solid $calendar-border;
+  border-bottom: 1px solid $calendar-border;
+  color: $calendar-fg;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  height: $calendar-interval-height;
+}
+
+.calendar-header-left {
+  box-sizing: border-box;
+  width: 50px;
+  text-align: right;
+  padding-right: 5px;
+  font-size: 85%;
+}
+
+.calendar-labels {
+  box-sizing: border-box;
+  width: 50px;
+  padding-right: 5px;
+}
+
+.calendar-label {
+  position: relative;
+  top: -5px;
+  height: $calendar-interval-height;
+  font-size: 75%;
+  color: $calendar-label-fg;
+  text-align: right;
+}
+
+/*
+Hierarchy:
+
+.calendar-events
+  > .calendar-event-container
+    > .calendar-event (.calendar-event-hover / .calendar-event-select)
+      > .calendar-event-detail
+*/
+
+.calendar-events {
+  width: 100%;
+}
+
+.calendar-event-container,
+.calendar-transparent-event-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+
+.calendar-event,
+.calendar-transparent-event,
+.calendar-creating-event {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 3px 3px 0;
+}
+
+.calendar-transparent-event-container {
+  pointer-events: none;
+}
+
+.calendar-event-detail {
+  width: 100%;
+  height: 100%;
+  background-color: lightblue;
+  -webkit-transition: background-color ease 100ms, box-shadow ease 100ms;
+  -o-transition: background-color ease 100ms, box-shadow ease 100ms;
+  transition: background-color ease 100ms, box-shadow ease 100ms;
+  user-select: none;
+  box-sizing: border-box;
+  padding-top: 3px;
+
+  overflow: hidden;
+}
+
+.calendar-event-detail.flush {
+  padding-top: 0;
+}
+
+.calendar-transparent-event .calendar-event-detail {
+  background-color: $calendar-dragging-event;
+}
+
+.calendar-creating-event .calendar-event-detail {
+  background-color: $calendar-creating-event;
+}
+
+.calendar-event-hover .calendar-event-detail {
+  background-color: $calendar-hover-event;
+  box-shadow: 2px 2px 2px $calendar-hover-shadow;
+}
+
+.calendar-event-select .calendar-event-detail {
+  background-color: $calendar-select-event;
+}
+
+.calendar-event-linked .calendar-event-detail {
+  filter: brightness(1.1);
+}
diff --git a/csm_web/frontend/src/css/coordinator-add-student.scss b/csm_web/frontend/src/css/coordinator-add-student.scss
new file mode 100644
index 00000000..bdfe1078
--- /dev/null
+++ b/csm_web/frontend/src/css/coordinator-add-student.scss
@@ -0,0 +1,310 @@
+/* Styles for the coordinator add student modal. */
+
+@use "base/variables" as *;
+
+$modal-width: 65vw;
+$modal-height: 75vh;
+$modal-effective-height: calc($modal-height - $modal-padding-y);
+
+.coordinator-add-student-modal {
+  overflow: hidden;
+  height: $modal-height;
+  width: $modal-width;
+}
+
+.coordinator-add-student-modal-contents {
+  height: $modal-effective-height;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+@media screen and (max-width: 800px) {
+  .coordinator-add-student-modal {
+    width: 85vw;
+  }
+}
+@media screen and (max-width: 1000px) {
+  .coordinator-add-student-modal {
+    width: 75vw;
+  }
+}
+
+.coordinator-email-content {
+  width: 95%;
+  height: 75%;
+  max-height: 75%;
+  overflow: auto;
+  margin: auto;
+}
+
+.coordinator-email-input-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.coordinator-email-input-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 5px 0;
+}
+
+.coordinator-email-input-item .inline-plus-sign,
+.coordinator-email-response-item .inline-plus-sign {
+  color: #777;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  line-height: 1.1rem;
+}
+
+.coordinator-email-input-item .inline-plus-sign:hover,
+.coordinator-email-response-item .inline-plus-sign:hover {
+  color: #aaa;
+}
+
+.coordinator-email-response-item .inline-plus-sign {
+  margin-right: 3px;
+}
+
+.coordinator-email-input {
+  max-width: 100%;
+  width: 250px;
+  margin-left: 5px;
+}
+
+.coordinator-email-input-buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  gap: 8px;
+}
+
+.coordinator-email-secondary-input-buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  gap: 4px;
+}
+
+.coordinator-email-input-buttons-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.coordinator-email-input-add,
+.coordinator-email-modal-button {
+  background-color: $csm-neutral;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  font-weight: 600;
+  justify-content: space-evenly;
+  margin: 3px auto 3px;
+  padding: 8px 20px;
+}
+
+.coordinator-email-modal-button {
+  font-weight: normal;
+  background-color: $csm-neutral;
+  padding: 8px;
+  font-size: 0.95rem;
+  margin: auto;
+}
+
+.coordinator-email-input-add:hover,
+.coordinator-email-modal-button:hover {
+  background-color: $csm-neutral-darkened;
+}
+
+.coordinator-email-input-submit {
+  background-color: $csm-green;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  font-weight: 600;
+  justify-content: space-evenly;
+  margin: 10px auto 10px;
+  padding: 10px 20px;
+}
+
+.coordinator-email-input-submit:hover {
+  background-color: $csm-green-darkened;
+}
+
+#coordinator-add-student-form input:not(.lock-validation):invalid {
+  background-color: #ffdddd;
+}
+
+.coordinator-email-response-list {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin: auto;
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+.coordinator-email-response-item {
+  display: contents;
+}
+
+.coordinator-email-response-email {
+  margin-left: 3px;
+}
+
+.coordinator-email-response-email-status {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+}
+
+.coordinator-email-response-form-info {
+  color: red;
+  font-size: 0.9rem;
+  margin-left: 20px;
+  margin-bottom: 2px;
+}
+
+.coordinator-email-response-form {
+  display: flex;
+  flex-direction: column;
+  margin-top: 5px;
+  margin-left: 40px;
+}
+
+.coordinator-email-response-form label {
+  font-size: 0.9rem;
+  margin: 5px;
+}
+
+.coordinator-email-response-status {
+  margin-left: 5px;
+}
+
+.coordinator-email-response-status-ok,
+.coordinator-email-response-status-conflict,
+.coordinator-email-response-status-banned,
+.coordinator-email-response-capacity {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.coordinator-email-response-status-ok {
+  color: green;
+}
+
+.coordinator-email-response-status-ok-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  padding-right: 6px;
+  margin: 0 !important;
+}
+
+.coordinator-email-response-status-conflict-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding-right: 6px;
+  fill: red;
+  margin: 0 !important;
+}
+
+.coordinator-email-response-status-conflict,
+.coordinator-email-response-status-banned,
+.coordinator-email-response-capacity {
+  color: red;
+}
+
+.coordinator-email-response-container {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  grid-row-gap: 12px;
+  margin: 10px 0;
+}
+
+.coordinator-email-response-capacity-container {
+  margin: 10px 0;
+}
+
+.coordinator-email-response-hr {
+  border: 1px solid #ccc;
+  margin-top: -2px;
+  margin-bottom: 10px;
+}
+
+.coordinator-email-response-head {
+  display: contents;
+}
+
+.coordinator-email-response-head-left {
+  grid-column: 1;
+}
+
+.coordinator-email-response-head-right {
+  grid-column: 2;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  column-gap: 5px;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.coordinator-email-response-head-right-item {
+  flex: 1;
+}
+
+.coordinator-email-response-item-container {
+  display: contents;
+}
+
+.coordinator-email-response-item-left {
+  grid-column: 1;
+  margin-left: 15px;
+}
+
+.coordinator-email-response-item-left-email {
+  padding-bottom: 6px;
+}
+
+.coordinator-email-response-item-left-detail {
+  margin-left: 25px;
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.coordinator-email-response-item-right {
+  grid-column: 2;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  row-gap: 3px;
+}
+
+.coordinator-email-response-item-right > * {
+  flex: 1;
+}
diff --git a/csm_web/frontend/src/css/course-menu.scss b/csm_web/frontend/src/css/course-menu.scss
new file mode 100644
index 00000000..5be1a0ce
--- /dev/null
+++ b/csm_web/frontend/src/css/course-menu.scss
@@ -0,0 +1,53 @@
+/* Course menu styles */
+@use "base/variables" as *;
+@use "base/button";
+
+#course-menu {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 10em);
+  max-width: calc((2 * 10em) + 10px);
+  grid-gap: 10px;
+  margin: 20px auto;
+  text-align: center;
+  justify-content: center;
+  font-size: 2em;
+}
+
+#course-menu-loading-spinner {
+  margin: auto;
+  height: 50px;
+  width: 50px;
+}
+
+.course-menu-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.course-menu-sidebar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.enrollment-container {
+  display: grid;
+  justify-content: center;
+}
+
+.enrollment-row {
+  display: contents;
+  font-size: 1.1em;
+}
+
+.enrollment-course {
+  grid-column: 1;
+  padding: 8px;
+  border-right: 2px solid $csm-neutral;
+}
+
+.enrollment-time {
+  grid-column: 2;
+  padding: 8px;
+}
diff --git a/csm_web/frontend/src/css/course-settings.scss b/csm_web/frontend/src/css/course-settings.scss
new file mode 100644
index 00000000..ea51c716
--- /dev/null
+++ b/csm_web/frontend/src/css/course-settings.scss
@@ -0,0 +1,80 @@
+@use "base/variables" as *;
+
+.course-settings-btn {
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  margin: 0 5px;
+  display: block;
+}
+
+.course-settings-title {
+  text-align: center;
+}
+
+.course-settings-content {
+  display: flex;
+  flex-direction: column;
+  height: 90%;
+}
+
+.course-settings-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 25px;
+}
+
+.course-settings-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.course-settings-label-container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.course-settings-tooltip-container {
+  position: relative;
+  margin-left: 5px;
+}
+
+.course-settings-tooltip-info-icon {
+  width: 1em;
+  color: #888;
+}
+
+.course-settings-tooltip-info-icon:hover {
+  color: #aaa;
+}
+
+.course-settings-input-container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.course-settings-input {
+  font-family: inherit;
+  width: 50%;
+}
+
+.course-settings-input-post {
+  margin-left: 5px;
+}
+
+.course-settings-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  margin-top: 25px;
+}
diff --git a/csm_web/frontend/src/css/course.scss b/csm_web/frontend/src/css/course.scss
new file mode 100644
index 00000000..5f3362a1
--- /dev/null
+++ b/csm_web/frontend/src/css/course.scss
@@ -0,0 +1,284 @@
+/* Section enrollment */
+
+@use "base/variables" as *;
+@use "base/button";
+
+.section-card {
+  width: 320px;
+  overflow-x: hidden;
+  box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.15);
+  border-radius: 20px;
+  margin: 0 auto 50px;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-card.full {
+  background-color: #eaeaea;
+}
+
+.section-card-contents {
+  position: relative;
+  padding: 10px 20px 0;
+  flex: 1;
+}
+
+.section-card-contents p {
+  color: #727272;
+}
+
+.section-card-contents svg,
+.section-card-icon-placeholder {
+  vertical-align: bottom;
+  margin-right: 5px;
+}
+
+.section-card-additional-times {
+  display: block;
+}
+
+.section-card-icon-placeholder {
+  display: inline-block;
+}
+
+.section-card-footer {
+  @extend %button;
+
+  border-radius: 0px !important;
+
+  padding: 5px !important;
+
+  font-size: 1.3em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/* Specify div because it's an <a> element for coordinators which links to section management page */
+.section-card.full div.section-card-footer {
+  background-color: inherit;
+  color: transparent;
+  user-select: none;
+  cursor: inherit;
+}
+
+.section-card-description {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: $csm-student;
+  color: white;
+  border-radius: 8px;
+  min-width: 50px;
+  text-align: center;
+  font-size: 12px;
+  padding: 2px 5px;
+}
+
+.enroll-confirm-modal-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+#day-selector {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, $day-btn-size);
+  grid-auto-rows: max-content;
+  grid-gap: 10px;
+  justify-content: center;
+}
+
+.data-export-modal {
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+}
+
+.data-export-modal-header {
+  display: flex;
+  flex: 0.2 0.2 0;
+  justify-content: center;
+  align-items: center;
+}
+
+.data-export-modal-selection {
+  flex: 1 1 55%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.data-export-modal-download {
+  flex: 1 1 30%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.data-export-checkbox-grid {
+  display: grid;
+  width: 100%;
+  height: 50%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(auto-fit, 30px);
+  gap: 1%;
+  align-items: center;
+  justify-items: center;
+}
+
+.data-export-checkbox {
+  justify-content: center;
+  width: 40%;
+  align-items: center;
+}
+
+#course-section-controls {
+  flex-grow: 0.5;
+  min-width: 50%;
+  top: 0;
+  align-self: flex-start;
+  margin-top: 40px;
+}
+
+#course-section-controls > * {
+  margin: 0 0 10px;
+}
+
+#course-coord-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  width: max-content;
+  margin: 0 auto;
+}
+
+#course-enrollment-open-status {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  margin: 20px 0;
+  color: #6d6d6d;
+}
+
+.course-title {
+  color: #6d6d6d;
+  font-size: 2.5em;
+  font-weight: 400;
+  text-align: center;
+}
+
+#show-unavailable-toggle {
+  display: block;
+  text-align: center;
+  color: #727272;
+}
+
+#show-unavailable-toggle > input {
+  margin-right: 5px;
+  vertical-align: top;
+}
+
+.day-btn {
+  height: $day-btn-size;
+  width: $day-btn-size;
+  border-radius: calc($day-btn-size / 2);
+  border: 2px solid $csm-green;
+  background-color: white;
+  color: #717171;
+  font-size: 1.3em;
+  cursor: pointer;
+  text-align: center;
+  outline: none;
+}
+
+.day-btn:hover {
+  background-color: #fafafa;
+}
+
+.day-btn.active {
+  background-color: $csm-green;
+  color: white;
+}
+
+#course-section-list {
+  width: 75vw;
+  margin: 40px auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 10px;
+}
+
+#course-section-list-empty {
+  color: #646464;
+  text-align: center;
+}
+
+$create-section-modal-height: 65vh;
+
+.create-section-modal {
+  height: $create-section-modal-height;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#create-section-form {
+  // form should take up all of the space
+  flex: 1;
+  overflow: auto;
+}
+
+#create-section-form #non-spacetime-fields,
+#create-section-form .spacetime-fields {
+  display: grid;
+  padding-left: 0;
+  grid-template-columns: max-content max-content;
+  grid-template-areas:
+    ". ."
+    "last last";
+  grid-gap: 20px;
+  align-items: center;
+}
+
+#create-section-form-contents > .spacetime-fields-header {
+  margin: 0 0 10px 0;
+  color: #646464;
+  min-width: 100%;
+  border-bottom: 2px solid #646464;
+}
+
+#create-section-form-contents {
+  margin: auto;
+  max-width: max-content;
+}
+
+#create-section-form-contents > * {
+  margin-bottom: 20px;
+}
+
+#create-section-form label[name="description"],
+#create-section-form label[name="time"] {
+  grid-area: last;
+}
+
+#create-section-form .create-section-submit-container {
+  grid-area: submit;
+}
+
+.create-section-submit-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  margin-top: 20px;
+}
diff --git a/csm_web/frontend/src/css/enrollment_matcher.scss b/csm_web/frontend/src/css/enrollment_matcher.scss
new file mode 100644
index 00000000..1b3f642c
--- /dev/null
+++ b/csm_web/frontend/src/css/enrollment_matcher.scss
@@ -0,0 +1,966 @@
+@use "base/variables" as *;
+
+#matcher-contents {
+  display: flex;
+}
+
+#matcher-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  padding: 40px 30px 0 20px;
+  width: fit-content;
+  gap: 10px;
+}
+
+#matcher-body {
+  width: 100%;
+}
+
+#matcher-main {
+  width: 90%;
+}
+
+#matcher-main input[type="time"]::-webkit-calendar-picker-indicator {
+  /* display: none; */
+  margin-left: 0;
+  padding: 1px;
+}
+
+/*
+#matcher-header {
+}
+*/
+
+.matcher-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.matcher-stages {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  max-width: 850px;
+  margin: 20px auto;
+  user-select: none;
+}
+
+.matcher-stages-stage {
+  width: fit-content;
+}
+
+.matcher-stages-stage.active-stage {
+  color: $csm-green;
+}
+
+.matcher-link {
+  text-decoration: none;
+  color: #000;
+  padding: 15px 20px;
+  background-color: $csm-green-lightened;
+  border-radius: 10px;
+}
+
+.matcher-link.active {
+  /* color: $csm-green; */
+  font-weight: bold;
+  background-color: $csm-green;
+}
+
+.matcher-body {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+}
+
+.matcher-body-footer,
+.matcher-body-footer-right,
+.matcher-body-footer-sticky {
+  margin-top: 20px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.matcher-body-footer {
+  justify-content: space-between;
+}
+
+.matcher-body-footer-right {
+  justify-content: flex-end;
+}
+
+.matcher-body-footer-sticky {
+  position: sticky;
+  bottom: 0;
+  margin-top: 0;
+  padding: 25px 0 15px;
+  /* fallback for gradient */
+  background-color: #ffffffcc;
+  background: linear-gradient(to bottom, #ffffff99 0%, #ffffff 50%);
+}
+
+.matcher-body-footer-status-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.matcher-body-footer-status-icon {
+  width: 2em !important;
+  height: 2em !important;
+}
+
+.mentor-sidebar-left,
+.coordinator-sidebar-left {
+  display: flex;
+  flex-direction: column;
+  /* width: 20vw; */
+  flex: 0.4;
+}
+
+.mentor-sidebar-right,
+.coordinator-sidebar-right {
+  flex: 1;
+}
+
+.matcher-sidebar-left-top {
+  flex: 1;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  padding: 15px;
+}
+
+.matcher-sidebar-left-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px;
+}
+
+.matcher-sidebar-left-bottom-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+}
+
+.matcher-submit-status-container {
+  position: relative;
+}
+
+.matcher-submit-status-icon {
+  position: absolute !important;
+  top: -0.75em;
+  left: 10px;
+  width: 1.5em !important;
+  height: 1.5em !important;
+}
+
+.matcher-submit-status-icon.error {
+  color: $csm-danger;
+}
+
+.matcher-detail-time {
+  font-size: 0.9rem;
+}
+
+.matcher-detail {
+  font-size: 0.9rem;
+}
+
+.matcher-input {
+  width: 40px;
+  margin-left: 5px;
+  outline: none;
+}
+
+/* Modal */
+
+.matcher-calendar-modal {
+  width: 800px !important;
+  height: 700px !important;
+}
+
+.matcher-calendar-modal-contents {
+  width: 100%;
+  height: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.matcher-calendar-modal-header {
+  margin: 0 20px 15px;
+  font-weight: bold;
+}
+
+/* Table */
+
+.matcher-table-sort-group {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+
+  user-select: none;
+  cursor: pointer;
+}
+
+.matcher-table-sort-icon {
+  margin-top: 2px;
+  width: 1em;
+}
+
+/* Buttons */
+
+.matcher-submit-btn {
+  background-color: $csm-green;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  user-select: none;
+  padding: 8px 15px !important;
+}
+
+.matcher-submit-btn:hover {
+  background-color: $csm-green-darkened;
+}
+
+.matcher-submit-btn:disabled {
+  background-color: $csm-neutral;
+  cursor: not-allowed;
+}
+
+.matcher-secondary-btn {
+  background-color: $csm-neutral;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  user-select: none;
+  padding: 8px 15px !important;
+}
+
+.matcher-secondary-btn:hover {
+  background-color: $csm-neutral-darkened;
+}
+
+.matcher-secondary-btn:disabled {
+  background-color: $csm-neutral;
+  cursor: not-allowed;
+}
+
+.matcher-danger-btn {
+  background-color: $csm-danger;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  user-select: none;
+  padding: 8px 15px !important;
+}
+
+.matcher-danger-btn:hover {
+  background-color: $csm-danger-darkened;
+}
+
+.matcher-toggle-btn {
+  cursor: pointer;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+/* Mentor Preferences*/
+
+.matcher-sidebar-pref-help {
+  margin: 20px 0;
+  font-style: normal;
+}
+
+/* CreateStage.tsx */
+
+.matcher-sidebar-create,
+.matcher-sidebar-selected,
+.matcher-sidebar-tiling {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.matcher-sidebar-selected-bottom,
+.matcher-sidebar-tiling-bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 15px;
+}
+
+.matcher-sidebar-create-bottom,
+.matcher-sidebar-selected-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 15px;
+}
+
+.matcher-sidebar-create-bottom-row,
+.matcher-sidebar-selected-bottom-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.matcher-sidebar-create-footer,
+.matcher-sidebar-selected-footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  font-style: italic;
+  font-size: 0.95rem;
+}
+
+.matcher-created-time-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.matcher-selected-time-container {
+  list-style: disc outside;
+}
+
+.matcher-created-times,
+.matcher-selected-times {
+  font-size: 0.95rem;
+  margin-bottom: 10px;
+  padding-left: 10px;
+}
+
+.matcher-selected-times {
+  margin-top: 0;
+  margin-left: 15px;
+}
+
+.matcher-selected-time {
+  position: relative;
+  left: -3px;
+}
+
+.matcher-created-time {
+  padding: 5px 0;
+}
+
+.matcher-created-time-remove {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  margin-right: 5px;
+}
+
+.matcher-sidebar-header {
+  padding-bottom: 15px;
+  font-weight: bold;
+}
+
+.matcher-remove-time-icon {
+  position: relative;
+  color: $csm-danger;
+  cursor: pointer;
+  top: 1px;
+}
+
+.matcher-remove-time-icon:hover {
+  color: $csm-danger-darkened;
+}
+
+.matcher-select-day-input {
+  height: 1.5rem;
+  outline: none;
+}
+
+.matcher-select-time-input {
+  outline: none;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.matcher-tiling-subheader {
+  /* font-style: italic; */
+  font-weight: 600;
+}
+
+.matcher-tiling-day-form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+
+.matcher-sidebar-tiling-body {
+  font-size: 0.95rem;
+}
+
+.matcher-tiling-range-container,
+.matcher-tiling-length-container,
+.matcher-tiling-day-container {
+  padding: 5px 0;
+}
+
+.matcher-tiling-length-input {
+  width: 75px;
+  margin-right: 5px;
+}
+
+.matcher-tiling-toggle {
+  margin-bottom: 3px;
+}
+
+.matcher-tooltip-container {
+  position: relative;
+}
+
+.matcher-tooltip-info-icon {
+  width: 1em;
+  margin-left: 3px;
+}
+
+.matcher-tooltip-info-icon:hover {
+  color: #888;
+}
+
+.matcher-tiling-link-day-label {
+  white-space: nowrap;
+}
+
+.matcher-tiling-link-day-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-top: 5px;
+}
+
+.matcher-tiling-tooltip-body {
+  width: fit-content;
+  max-width: 250px;
+}
+
+.matcher-unsaved-changes-container {
+  height: fit-content;
+  margin-right: 15px;
+}
+
+.matcher-unsaved-changes {
+  font-style: italic;
+}
+
+/* ReleaseStage.tsx */
+
+.mentor-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mentor-list-top {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mentor-list-top-search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.mentor-list-num-submitted {
+  font-size: 0.9rem;
+}
+
+.mentor-list-top-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.mentor-list-header {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 30px 10px 15px;
+  margin-top: 15px;
+
+  background-color: $csm-green;
+
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+.mentor-list {
+  display: flex;
+  flex-direction: column;
+
+  background-color: #f5f5f5;
+  padding: 15px 30px 15px 15px;
+
+  gap: 3px;
+}
+
+.mentor-list-with-preferences,
+.mentor-list-without-preferences {
+  flex: 1;
+}
+
+.mentor-list-item {
+  display: flex;
+  flex-direction: row;
+  margin: 2px 0;
+}
+
+.mentor-list-item-name {
+  flex: 0.9;
+  flex-basis: 0;
+}
+
+.mentor-list-item-email {
+  flex: 1;
+  flex-basis: 0;
+  font-size: 0.9rem;
+}
+
+.mentor-list-header .mentor-list-item-email {
+  font-size: inherit;
+}
+
+.mentor-list-item-check {
+  min-width: 3em;
+  width: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mentor-list-item-undo-remove,
+.mentor-list-item-remove,
+.mentor-list-item-view {
+  margin-top: 2px;
+  margin-right: 5px;
+}
+
+.mentor-list-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mentor-list-item-remove {
+  color: $csm-danger;
+}
+
+.mentor-list-item-remove:hover {
+  color: $csm-danger-darkened;
+  cursor: pointer;
+}
+
+.mentor-list-item-undo-remove {
+  color: black;
+}
+
+.mentor-list-item-undo-remove:hover {
+  color: #555;
+  cursor: pointer;
+}
+
+.mentor-list-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  border-radius: 5px;
+  padding: 15px;
+}
+
+.mentor-list-item-selected .mentor-list-item-view {
+  color: $csm-green-darkened;
+  user-select: none;
+}
+
+.mentor-list-item-clickable .mentor-list-item-view:hover {
+  color: $csm-green;
+  cursor: pointer;
+}
+
+.mentor-list-item-unclickable .mentor-list-item-view {
+  color: #888;
+  user-select: none;
+}
+
+.mentor-list-item-removed {
+  text-decoration: line-through;
+  color: $csm-neutral;
+}
+
+.mentor-add-textarea {
+  width: calc(min(350px, 50vw));
+  height: calc(min(200px, 50vh));
+
+  resize: none;
+
+  margin-top: 10px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.release-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.matcher-pref-color-unavailable {
+  color: #888;
+}
+
+.matcher-pref-color-best {
+  color: green;
+}
+
+.matcher-pref-modal-email {
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+/* ConfigureStage.tsx */
+
+.matcher-mentor-min-max {
+  font-size: 0.8rem;
+}
+
+.matcher-configure-sidebar-contents {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.matcher-configure-sidebar-header {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.matcher-configure-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.matcher-configure-input-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+}
+
+.matcher-configure-input {
+  font-family: inherit;
+  width: 80%;
+}
+
+.matcher-configure-sidebar-buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  margin: 15px 0;
+}
+
+.matcher-configure-sidebar-footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  font-style: italic;
+  font-size: 0.95rem;
+}
+
+.matcher-configure-error {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.matcher-configure-error-text {
+  color: $csm-danger;
+  font-size: 0.9rem;
+  font-style: italic;
+}
+
+.matcher-configure-error-icon {
+  color: $csm-danger;
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* EditStage.tsx */
+
+.matcher-assignment-above-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.matcher-assignment-search {
+  width: 50%;
+  margin-bottom: 15px;
+}
+
+.matcher-assignment-mentor-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: $csm-green;
+  padding: 10px 0;
+  margin-bottom: 5px;
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+.matcher-assignment-row {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid $csm-neutral;
+}
+
+.matcher-assignment-row.unassigned {
+  background-color: #ffdddd;
+}
+
+.matcher-assignment-mentor-empty {
+  font-style: italic;
+}
+
+.matcher-assignment-mentor-select {
+  width: 25px;
+  margin-right: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.matcher-assignment-mentor-info {
+  flex: auto;
+  width: 25%;
+  margin-right: 5px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.matcher-assignment-mentor-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.matcher-assignment-mentor-email {
+  font-size: 0.9rem;
+  font-style: italic;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  color: #888;
+}
+
+.matcher-assignment-section-times {
+  flex: auto;
+  width: 15%;
+  margin-right: 5px;
+  font-size: 0.95rem;
+
+  display: flex;
+  flex-direction: row;
+}
+
+.matcher-assignment-section-times-edit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 18px;
+  width: 18px;
+  padding-right: 5px;
+}
+
+.matcher-assignment-section-times-edit-icon {
+  user-select: none;
+  color: $csm-neutral;
+  width: 100%;
+  height: 100%;
+}
+
+.matcher-assignment-section-times-edit-icon:hover {
+  color: $csm-green;
+  cursor: pointer;
+}
+
+.matcher-assignment-section-times-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-x: hidden;
+}
+
+.matcher-assignment-section-times-input {
+  width: 100%;
+  height: 1.5rem;
+  font-family: inherit;
+  font-size: 0.95rem;
+  border: 2px solid $csm-neutral;
+  border-radius: 3px;
+  background-color: transparent;
+  outline: none;
+}
+
+.matcher-assignment-section-times-input:focus {
+  border-color: #888;
+}
+
+.matcher-assignment-section-times-option {
+  font-family: inherit;
+  font-size: 0.9rem;
+}
+
+.matcher-assignment-section-capacity {
+  width: 85px;
+  margin-right: 5px;
+}
+
+.matcher-assignment-section-description {
+  width: 25%;
+}
+
+.matcher-assignment-section-capacity,
+.matcher-assignment-section-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.matcher-assignment-section-capacity-input:focus,
+.matcher-assignment-section-description-input:focus {
+  outline-color: #888;
+}
+
+.matcher-assignment-section-capacity-input,
+.matcher-assignment-section-description-input {
+  font-family: inherit;
+  font-size: 0.95rem;
+  width: calc(100% - 10px);
+  border: 2px solid $csm-neutral;
+  border-radius: 3px;
+}
+
+.matcher-assignment-burger {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
+.matcher-assignment-group-hover {
+  background-color: #eee;
+}
+
+.matcher-assignment-mentor-dragging {
+  color: $csm-neutral;
+}
+
+.matcher-assignment-footer-help {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.matcher-assignment-footer-help-icon,
+.matcher-assignment-footer-error-icon {
+  width: 1.25em;
+  height: 1.25em;
+  margin-right: 2px;
+}
+
+.matcher-assignment-footer-help-text,
+.matcher-assignment-footer-error-text {
+  font-size: 0.9rem;
+  font-style: italic;
+}
+
+.matcher-assignment-footer-error-icon,
+.matcher-assignment-footer-error-text {
+  color: $csm-danger;
+}
+
+.matcher-assignment-button-div {
+  display: flex;
+  flex-direction: row;
+  column-gap: 15px;
+}
+
+.matcher-assignment-save-button {
+  background-color: $csm-neutral;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  padding: 8px 20px;
+  text-decoration: none;
+}
+
+.matcher-assignment-save-button:hover {
+  background-color: $csm-neutral-darkened;
+}
+
+.matcher-pref-distribution-div,
+.matcher-assignment-distribution-div {
+  height: 100%;
+}
+
+.matcher-assignment-confirm-modal-contents {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 65%;
+
+  text-align: center;
+}
+
+.matcher-assignment-confirm-modal-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 100%;
+}
diff --git a/csm_web/frontend/src/css/fontawesome-styles.scss b/csm_web/frontend/src/css/fontawesome-styles.scss
new file mode 100644
index 00000000..4ab68d66
--- /dev/null
+++ b/csm_web/frontend/src/css/fontawesome-styles.scss
@@ -0,0 +1,462 @@
+/**
+ *Stylesheet copied from node_modules/@fortawesome/fontawesome-svg-core/styles.css
+ */
+
+svg:not(:root).svg-inline--fa {
+  overflow: visible;
+}
+
+.svg-inline--fa {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}
+.svg-inline--fa.fa-lg {
+  vertical-align: -0.225em;
+}
+.svg-inline--fa.fa-w-1 {
+  width: 0.0625em;
+}
+.svg-inline--fa.fa-w-2 {
+  width: 0.125em;
+}
+.svg-inline--fa.fa-w-3 {
+  width: 0.1875em;
+}
+.svg-inline--fa.fa-w-4 {
+  width: 0.25em;
+}
+.svg-inline--fa.fa-w-5 {
+  width: 0.3125em;
+}
+.svg-inline--fa.fa-w-6 {
+  width: 0.375em;
+}
+.svg-inline--fa.fa-w-7 {
+  width: 0.4375em;
+}
+.svg-inline--fa.fa-w-8 {
+  width: 0.5em;
+}
+.svg-inline--fa.fa-w-9 {
+  width: 0.5625em;
+}
+.svg-inline--fa.fa-w-10 {
+  width: 0.625em;
+}
+.svg-inline--fa.fa-w-11 {
+  width: 0.6875em;
+}
+.svg-inline--fa.fa-w-12 {
+  width: 0.75em;
+}
+.svg-inline--fa.fa-w-13 {
+  width: 0.8125em;
+}
+.svg-inline--fa.fa-w-14 {
+  width: 0.875em;
+}
+.svg-inline--fa.fa-w-15 {
+  width: 0.9375em;
+}
+.svg-inline--fa.fa-w-16 {
+  width: 1em;
+}
+.svg-inline--fa.fa-w-17 {
+  width: 1.0625em;
+}
+.svg-inline--fa.fa-w-18 {
+  width: 1.125em;
+}
+.svg-inline--fa.fa-w-19 {
+  width: 1.1875em;
+}
+.svg-inline--fa.fa-w-20 {
+  width: 1.25em;
+}
+.svg-inline--fa.fa-pull-left {
+  margin-right: 0.3em;
+  width: auto;
+}
+.svg-inline--fa.fa-pull-right {
+  margin-left: 0.3em;
+  width: auto;
+}
+.svg-inline--fa.fa-border {
+  height: 1.5em;
+}
+.svg-inline--fa.fa-li {
+  width: 2em;
+}
+.svg-inline--fa.fa-fw {
+  width: 1.25em;
+}
+
+.fa-layers svg.svg-inline--fa {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.fa-layers {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  text-align: center;
+  vertical-align: -0.125em;
+  width: 1em;
+}
+.fa-layers svg.svg-inline--fa {
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+}
+
+.fa-layers-text,
+.fa-layers-counter {
+  display: inline-block;
+  position: absolute;
+  text-align: center;
+}
+
+.fa-layers-text {
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+}
+
+.fa-layers-counter {
+  background-color: #ff253a;
+  border-radius: 1em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #fff;
+  height: 1.5em;
+  line-height: 1;
+  max-width: 5em;
+  min-width: 1.5em;
+  overflow: hidden;
+  padding: 0.25em;
+  right: 0;
+  text-overflow: ellipsis;
+  top: 0;
+  -webkit-transform: scale(0.25);
+  transform: scale(0.25);
+  -webkit-transform-origin: top right;
+  transform-origin: top right;
+}
+
+.fa-layers-bottom-right {
+  bottom: 0;
+  right: 0;
+  top: auto;
+  -webkit-transform: scale(0.25);
+  transform: scale(0.25);
+  -webkit-transform-origin: bottom right;
+  transform-origin: bottom right;
+}
+
+.fa-layers-bottom-left {
+  bottom: 0;
+  left: 0;
+  right: auto;
+  top: auto;
+  -webkit-transform: scale(0.25);
+  transform: scale(0.25);
+  -webkit-transform-origin: bottom left;
+  transform-origin: bottom left;
+}
+
+.fa-layers-top-right {
+  right: 0;
+  top: 0;
+  -webkit-transform: scale(0.25);
+  transform: scale(0.25);
+  -webkit-transform-origin: top right;
+  transform-origin: top right;
+}
+
+.fa-layers-top-left {
+  left: 0;
+  right: auto;
+  top: 0;
+  -webkit-transform: scale(0.25);
+  transform: scale(0.25);
+  -webkit-transform-origin: top left;
+  transform-origin: top left;
+}
+
+.fa-lg {
+  font-size: 1.33333em;
+  line-height: 0.75em;
+  vertical-align: -0.0667em;
+}
+
+.fa-xs {
+  font-size: 0.75em;
+}
+
+.fa-sm {
+  font-size: 0.875em;
+}
+
+.fa-1x {
+  font-size: 1em;
+}
+
+.fa-2x {
+  font-size: 2em;
+}
+
+.fa-3x {
+  font-size: 3em;
+}
+
+.fa-4x {
+  font-size: 4em;
+}
+
+.fa-5x {
+  font-size: 5em;
+}
+
+.fa-6x {
+  font-size: 6em;
+}
+
+.fa-7x {
+  font-size: 7em;
+}
+
+.fa-8x {
+  font-size: 8em;
+}
+
+.fa-9x {
+  font-size: 9em;
+}
+
+.fa-10x {
+  font-size: 10em;
+}
+
+.fa-fw {
+  text-align: center;
+  width: 1.25em;
+}
+
+.fa-ul {
+  list-style-type: none;
+  margin-left: 2.5em;
+  padding-left: 0;
+}
+.fa-ul > li {
+  position: relative;
+}
+
+.fa-li {
+  left: -2em;
+  position: absolute;
+  text-align: center;
+  width: 2em;
+  line-height: inherit;
+}
+
+.fa-border {
+  border: solid 0.08em #eee;
+  border-radius: 0.1em;
+  padding: 0.2em 0.25em 0.15em;
+}
+
+.fa-pull-left {
+  float: left;
+}
+
+.fa-pull-right {
+  float: right;
+}
+
+.fa.fa-pull-left,
+.fas.fa-pull-left,
+.far.fa-pull-left,
+.fal.fa-pull-left,
+.fab.fa-pull-left {
+  margin-right: 0.3em;
+}
+
+.fa.fa-pull-right,
+.fas.fa-pull-right,
+.far.fa-pull-right,
+.fal.fa-pull-right,
+.fab.fa-pull-right {
+  margin-left: 0.3em;
+}
+
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+}
+
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.fa-rotate-90 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.fa-rotate-180 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.fa-rotate-270 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.fa-flip-horizontal {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+  -webkit-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.fa-flip-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+  -webkit-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+.fa-flip-both,
+.fa-flip-horizontal.fa-flip-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+  -webkit-transform: scale(-1, -1);
+  transform: scale(-1, -1);
+}
+
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical,
+:root .fa-flip-both {
+  -webkit-filter: none;
+  filter: none;
+}
+
+.fa-stack {
+  display: inline-block;
+  height: 2em;
+  position: relative;
+  width: 2.5em;
+}
+
+.fa-stack-1x,
+.fa-stack-2x {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.svg-inline--fa.fa-stack-1x {
+  height: 1em;
+  width: 1.25em;
+}
+
+.svg-inline--fa.fa-stack-2x {
+  height: 2em;
+  width: 2.5em;
+}
+
+.fa-inverse {
+  color: #fff;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+
+.svg-inline--fa .fa-primary {
+  fill: var(--fa-primary-color, currentColor);
+  opacity: 1;
+  opacity: var(--fa-primary-opacity, 1);
+}
+
+.svg-inline--fa .fa-secondary {
+  fill: var(--fa-secondary-color, currentColor);
+  opacity: 0.4;
+  opacity: var(--fa-secondary-opacity, 0.4);
+}
+
+.svg-inline--fa.fa-swap-opacity .fa-primary {
+  opacity: 0.4;
+  opacity: var(--fa-secondary-opacity, 0.4);
+}
+
+.svg-inline--fa.fa-swap-opacity .fa-secondary {
+  opacity: 1;
+  opacity: var(--fa-primary-opacity, 1);
+}
+
+.svg-inline--fa mask .fa-primary,
+.svg-inline--fa mask .fa-secondary {
+  fill: black;
+}
+
+.fad.fa-inverse {
+  color: #fff;
+}
diff --git a/csm_web/frontend/src/css/header.scss b/csm_web/frontend/src/css/header.scss
new file mode 100644
index 00000000..2f872c16
--- /dev/null
+++ b/csm_web/frontend/src/css/header.scss
@@ -0,0 +1,113 @@
+/* Header styling */
+
+@use "base/variables" as *;
+
+/// container separating left and right groups of header items
+header {
+  box-shadow: 0px 4px 4px rgba(188, 188, 188, 0.25);
+  padding: 30px 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px -8px 0 -8px;
+}
+
+/// individual groups of site title items
+.site-title-group {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+#logo {
+  height: 3em;
+  margin-top: -14px;
+}
+
+.site-title {
+  font-weight: 600;
+  font-size: 23px;
+  line-height: 18px;
+  margin-bottom: 0;
+  user-select: none;
+}
+
+.site-subtitle {
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 0;
+  user-select: none;
+}
+
+.site-title-link,
+.site-subtitle-link {
+  text-decoration: none;
+  color: #bbbbbb;
+
+  &.is-active {
+    color: #808080;
+  }
+}
+
+#user-profile-pic {
+  border: 2px solid #ffffff;
+  border-radius: 26px;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 4px rgba(136, 136, 136, 0.25);
+}
+
+#logout-btn {
+  margin: auto 5px auto 30px;
+}
+
+#logout-btn * {
+  fill: #808080;
+  vertical-align: middle;
+}
+
+#logout-btn:hover * {
+  fill: #5e5e5e;
+}
+
+/* smaller screens */
+@media screen and (max-width: 500px) {
+  header {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #logo {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .site-title {
+    margin: 10px 0;
+  }
+
+  .site-title-link {
+    margin-right: 0;
+  }
+
+  .site-subtitle-link {
+    margin: 0px auto 0px auto;
+  }
+
+  #logout-btn {
+    margin: 0px auto auto auto;
+  }
+}
+
+.page-title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  color: #646464;
+
+  // remove bottom margin; top margin removed by base style
+  margin-bottom: 0;
+}
+
+.center-title {
+  text-align: center;
+}
diff --git a/csm_web/frontend/src/css/home.scss b/csm_web/frontend/src/css/home.scss
new file mode 100644
index 00000000..99f32c4b
--- /dev/null
+++ b/csm_web/frontend/src/css/home.scss
@@ -0,0 +1,90 @@
+/* Home page styling */
+
+@use "base/variables" as *;
+
+.course-card {
+  position: relative;
+  width: 320px;
+  min-width: 320px;
+  border-radius: 16px;
+  box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.15);
+  min-height: 180px;
+  border-top: 30px solid;
+  border-top-color: $csm-theme-default;
+}
+
+.course-card-link {
+  color: unset;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.course-card-link:hover > .course-card {
+  background-color: $csm-link-hover;
+}
+
+.course-cards-container > .course-card,
+.course-card-link {
+  margin: 0 75px 50px 0;
+}
+
+.course-card-contents {
+  padding: 30px;
+  min-height: 120px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.course-card-contents > *:nth-last-child(2) {
+  /* Ensures there is space between the relation label and whatever precedes it */
+  margin-bottom: 20px;
+}
+
+.course-card-name {
+  margin: 0;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* Format course card section time lists */
+.course-card-section-time:not(:last-of-type)::after {
+  display: block;
+  content: "&";
+  font-size: 1.2em;
+}
+
+.course-card-title {
+  margin: 0 0 20px;
+  font-size: 14px;
+  color: #bfbfbf;
+}
+
+.course-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+#home-courses-heading {
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  max-width: 300px;
+  margin-bottom: 40px;
+}
+
+.section-link {
+  color: unset;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 9px;
+}
+
+.section-link:hover {
+  background-color: $csm-link-hover;
+}
diff --git a/csm_web/frontend/src/css/policies.scss b/csm_web/frontend/src/css/policies.scss
new file mode 100644
index 00000000..49522ced
--- /dev/null
+++ b/csm_web/frontend/src/css/policies.scss
@@ -0,0 +1,30 @@
+@use "base/variables" as *;
+
+.policy-sections {
+  margin: auto;
+  width: 60%;
+  font-size: 1.05em;
+  line-height: 1.5em;
+}
+
+.policy-sections div {
+  padding-bottom: 0.5rem;
+}
+
+.policy-sections h1 {
+  color: $csm-green;
+  line-height: 125%;
+}
+
+.policy-sections a {
+  color: $csm-link-blue;
+  text-decoration: none;
+}
+
+.policy-sections .divider {
+  height: 1px;
+  background-color: #e0e0e0;
+  padding: 0;
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
diff --git a/csm_web/frontend/src/css/resource_aggregation.scss b/csm_web/frontend/src/css/resource_aggregation.scss
new file mode 100644
index 00000000..6b93ff2f
--- /dev/null
+++ b/csm_web/frontend/src/css/resource_aggregation.scss
@@ -0,0 +1,465 @@
+@use "base/variables" as *;
+
+$modal-width: 80vw;
+$modal-height: 75vh;
+
+.resourceWrapperContainer {
+  margin: 20px auto;
+  max-width: 1064px;
+}
+
+.resourceTable {
+  min-width: 750px;
+}
+
+.resourceTableContainer {
+  overflow-x: auto;
+}
+
+.resourceContainer {
+  background-color: $csm-resources;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 0 -1px rgb(0 0 0 / 6%);
+  height: 100%;
+  margin: 16px auto;
+  padding: 24px 0;
+}
+
+.resourceContainer,
+.resourceWrapperHeader {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(50px, 1fr)) 2fr 2fr 1fr 40px;
+  column-gap: 10px;
+  text-align: center;
+  width: 100%;
+}
+
+.resourceEditContainer {
+  height: $modal-height;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.resourceEditContentWrapper {
+  overflow: auto;
+  // expand container of worksheets/links as much as possible
+  flex: 1;
+}
+
+.resourceEditContent {
+  min-width: 600px;
+}
+
+.resourceEditModal {
+  width: $modal-width !important;
+  height: $modal-height !important;
+}
+
+.resourceEditModal .modal-contents {
+  overflow: hidden;
+}
+
+.resourceWrapperHeader {
+  margin-bottom: 4px;
+}
+
+.resourceEditTabContainer {
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.resourceEditTab {
+  margin: 20px;
+  background-color: $csm-neutral;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  justify-content: space-evenly;
+  padding: 8px;
+  width: 200px;
+}
+
+.topicTooltip {
+  text-align: center;
+}
+
+.resourceEditTab:hover {
+  background-color: $csm-neutral-darkened;
+}
+
+.resourceEditTab:disabled {
+  background-color: $csm-green;
+}
+
+.resourceInfo,
+.resourceWrapperHeader > div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  padding: 0 8px;
+}
+
+.resourceRow {
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+}
+
+.resourceRowRender {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+}
+
+.resourceWkst {
+  display: contents;
+  margin: 6px 0;
+}
+
+.resourceWkstFilesContainer {
+  display: grid;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  grid-auto-columns: 2fr 1.5fr;
+  row-gap: 10px;
+}
+
+.resourceWkstFile,
+.resourceSoln,
+.resourceWkstFile a:link,
+.resourceSoln a:link,
+.resourceWkstFile a:visited,
+.resourceSoln a:visited,
+.resourceLink,
+.resourceLink a:link,
+.resourceLink a:visited {
+  color: $csm-green-darkened;
+}
+
+.resourceSoln a,
+.resourceLink a {
+  text-decoration: none;
+}
+
+.resourceWkstFile {
+  grid-column: 1;
+}
+
+.resourceWkstFile a:link {
+  text-decoration: underline;
+}
+
+.resourceSoln {
+  border: 2px solid $csm-green-darkened;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 2px;
+  text-align: center;
+  width: 80px;
+  height: fit-content;
+  margin-left: 10px;
+  grid-column: 2;
+}
+
+.resourceWkstFile a:hover,
+.resourceSoln a:hover,
+.resourceLink a:hover {
+  border-color: #4e7a5d;
+  color: #4e7a5d;
+  cursor: pointer;
+}
+
+.topic {
+  background-color: $csm-green;
+  border-radius: 4px;
+  margin: 4px;
+  padding: 4px 8px;
+}
+
+#resourceEditInner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.resourceInfoEdit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 4px;
+  padding: 4px;
+}
+
+.resourceInfoEdit input {
+  width: 144px;
+}
+
+.resourceEditHeadItem {
+  align-items: center;
+}
+
+.resourceWorksheetEditItem > input {
+  width: 100%;
+  max-width: 180px;
+  min-width: 100px;
+}
+
+.topicsTooltipWrapper {
+  position: relative;
+  font-weight: initial;
+}
+
+.resourceWorksheetContainer {
+  display: grid;
+  gap: 10px;
+
+  width: 70%;
+  margin: 20px auto;
+}
+
+@media screen and (max-width: 1200px) {
+  .resourceWorksheetContainer {
+    width: 90%;
+  }
+}
+
+.resourceWorksheetHead {
+  display: grid;
+  /* name, worksheet, solution, delete */
+  grid-template-columns: repeat(3, 1fr) 20px;
+  column-gap: 10px;
+  text-align: center;
+}
+
+.resourceLinkHead {
+  display: grid;
+  /* name, url, delete */
+  grid-template-columns: 1fr 1fr 20px;
+  column-gap: 10px;
+  text-align: center;
+}
+
+.resourceWorksheet {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr) 20px;
+  column-gap: 10px;
+}
+
+.resourceLink,
+.resourceLinkEdit {
+  display: grid;
+  column-gap: 10px;
+}
+
+.resourceLinkEdit {
+  grid-template-columns: 1fr 1fr 20px;
+}
+
+.resourceLinksContainer {
+  display: grid;
+  align-content: center;
+  row-gap: 10px;
+}
+
+.resourceWorksheetEditFile {
+  display: flex;
+  margin: auto 0;
+}
+
+.resourceWorksheetEditItem {
+  margin: auto;
+}
+
+.fileUpload input[type="file"] {
+  display: none;
+}
+
+.fileUpload {
+  border: 2px solid #ccc;
+  border-right-width: 1px;
+  background-color: white;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  padding: 8px 12px;
+  font-size: 90%;
+  flex: 100%;
+  /* take up as much space as possible */
+}
+
+.fileUpload .fileUploadLabel {
+  flex: 100%;
+  text-align: left;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  width: 100px;
+}
+
+.fileUpload:hover {
+  border-color: $csm-neutral-darkened;
+  color: $csm-green-darkened;
+}
+
+.fileUpload:only-child {
+  border-right-width: 2px;
+}
+
+button.clearFile {
+  display: inline-block;
+  border: none;
+  background-color: #f8f8f8;
+  border: 2px solid #ccc;
+  border-left: none;
+  padding: 0 10px;
+}
+
+button.clearFile:hover {
+  color: red;
+  background-color: #eee;
+}
+
+.deleteWorksheet {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font-size: 18px;
+  color: $csm-neutral-darkened;
+}
+
+.deleteWorksheet:hover {
+  color: red;
+}
+
+.uploadIcon {
+  width: 1em;
+  margin-right: 5px !important;
+}
+
+.resourceWrapperHeader > div {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.resourceWorksheetActionsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resourceButtonsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 16px;
+}
+
+.resourceButton {
+  border: None;
+  color: $csm-neutral;
+  font-size: 18px;
+}
+
+#editIcon:hover {
+  color: $csm-green-darkened;
+}
+
+#deleteIcon:hover {
+  color: $csm-danger-darkened;
+}
+
+.resourceTabErrorText {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  text-align: center;
+  color: red;
+}
+
+#saveIcon {
+  margin: 0 !important;
+}
+
+#resourceButtonSubmit:hover {
+  background-color: $csm-green-darkened;
+}
+
+.resourceValidationError {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  color: red;
+  font-size: 80%;
+  margin: 3px 2px 4px;
+}
+
+.resourceTableOptions {
+  display: flex;
+  flex-flow: wrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  margin-bottom: 24px;
+}
+
+#toggleViewEditLabel:hover {
+  border-color: $csm-green-darkened;
+  color: $csm-green-darkened;
+  text-decoration: underline;
+}
+
+#toggleViewEditLabel {
+  cursor: pointer;
+  background-color: white;
+  border: 4px solid $csm-green;
+  border-radius: 8px;
+  color: $csm-green;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  font-weight: 700 !important;
+  justify-content: space-evenly;
+  padding: 12px 16px;
+  margin: 5px 10px;
+}
+
+#toggleViewEditInput {
+  cursor: pointer;
+  color: $csm-green;
+}
+
+.resourceDeleteConfirmation .resourceDeleteText {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.resourceEditFooter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/csm_web/frontend/src/css/section.scss b/csm_web/frontend/src/css/section.scss
new file mode 100644
index 00000000..19d9115f
--- /dev/null
+++ b/csm_web/frontend/src/css/section.scss
@@ -0,0 +1,439 @@
+/// Styles for the section view.
+/// These styles are for both coordinators and students.
+
+@use "base/variables" as *;
+
+.override-label {
+  background-color: #ffd874;
+  color: white;
+  font-size: 15px;
+  width: fit-content;
+  width: -moz-fit-content;
+  padding: 3px 5px;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.section-detail-info-card-contents {
+  position: relative;
+  min-width: 12em;
+}
+
+.section-detail-info-card-contents,
+#mentor-attendance {
+  border: 2px solid #e7e7e7;
+  box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25);
+  border-radius: 20px;
+}
+
+/// only add padding if specified,
+/// or if it's the mentor attendance table
+.section-detail-info-card-contents.padded-card,
+#mentor-attendance {
+  padding: 40px;
+}
+
+.section-detail-info-card-contents h5 {
+  font-size: 25px;
+  color: #727070;
+  margin: 0 auto 0.5em auto;
+}
+
+.section-detail-info-card-contents .location-link {
+  font-size: 25px;
+  margin: 0 auto 0.5em auto;
+}
+
+.section-detail-info-card-contents.mentor {
+  text-align: center;
+}
+
+.section-detail-info-card-contents a {
+  word-wrap: break-word;
+}
+
+#section-detail-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+#section-detail-sidebar a {
+  font-size: 18px;
+  color: #4b4b4b;
+  margin: 0 100px 20px 0;
+  text-decoration: none;
+}
+
+#section-detail-sidebar a.active {
+  color: $csm-green;
+}
+
+#section-detail-body * {
+  max-width: 90vw;
+}
+
+.drop-confirmation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  text-align: center;
+}
+
+.drop-confirmation h5 {
+  font-size: 25px;
+  color: #727070;
+  margin: 0 auto 0.5rem;
+}
+
+.drop-confirmation p {
+  font-size: 14px;
+  color: #bfbfbf;
+  margin-top: 0;
+}
+
+#section-detail-body {
+  display: flex;
+}
+
+@media screen and (max-width: 1100px) {
+  /* only wrap for medium/small screens */
+  #section-detail-body {
+    flex-wrap: wrap;
+  }
+}
+
+#students-table .inline-plus-sign {
+  display: inline-block;
+  color: $csm-danger;
+  cursor: pointer;
+  position: relative;
+}
+
+#students-table .csm-table-item {
+  padding: 20px 30px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: $button-icon-gap;
+}
+
+.should-ban-prompt {
+  font-size: 0.8em;
+  width: 10em;
+  text-align: center;
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
+  background-color: white;
+  padding: 10px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 2rem;
+  border-radius: 8px;
+}
+
+.should-ban-prompt::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: $arrow-size solid transparent;
+  border-right: $arrow-size solid transparent;
+  border-top: $arrow-size solid white;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  bottom: calc(-1 * $arrow-size);
+}
+
+.should-ban-prompt .ban-cancel {
+  position: absolute !important;
+  top: -5px;
+  right: 3px;
+  color: #dedede !important;
+  font-size: 1.5rem;
+}
+
+.should-ban-prompt .btn-group {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 0.3em;
+}
+
+.should-ban-prompt .btn-group button {
+  border: unset;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.should-ban-prompt .btn-group button.yes {
+  background-color: $csm-danger;
+}
+
+.should-ban-prompt .btn-group button.yes:hover {
+  background-color: $csm-danger-darkened;
+}
+
+.should-ban-prompt .btn-group button.no {
+  background-color: $csm-neutral;
+}
+
+.should-ban-prompt .btn-group button.no:hover {
+  background-color: #aeaeae;
+}
+
+.newStudentErrorContainer {
+  display: flex;
+  flex-direction: column;
+  color: red;
+  font-size: 0.8rem;
+}
+
+#students-table .csm-form {
+  display: flex;
+  padding-left: 0;
+}
+
+#students-table .csm-form input[type="submit"] {
+  color: $csm-green;
+  transform: none;
+  margin: auto;
+  background-color: inherit;
+  padding: 0;
+  position: relative;
+  bottom: 3px;
+  top: unset;
+  display: inline-block;
+}
+#students-table .csm-form input[type="submit"]:hover {
+  color: $csm-green-darkened;
+}
+
+#students-table .csm-form input {
+  margin: auto;
+}
+
+#students-table .inline-plus-sign:hover {
+  color: $csm-danger-darkened;
+}
+
+#copy-student-emails {
+  cursor: pointer;
+}
+
+#copy-student-emails:hover {
+  color: #9c9c9c;
+}
+
+#copy-student-emails-success {
+  position: absolute;
+}
+
+/* Section details */
+
+.section-detail-header .relation-label {
+  border-radius: 4px;
+  padding: 5px 14px;
+  font-size: 14px;
+  margin-bottom: 40px;
+}
+
+.section-detail-header-title {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.section-detail-header-title > h3 {
+  font-size: 30px;
+  margin: 0 20px 0 0;
+  line-height: 30px;
+}
+
+.section-detail-header-title > h4 {
+  color: #bfbfbf;
+  font-size: 25px;
+  font-weight: normal;
+  margin: 0;
+}
+
+.section-detail-page-title {
+  // color: #646464;
+  font-size: 30px;
+  font-weight: bold;
+  margin: 0 0 45px;
+}
+
+.section-info-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.section-info-cards-right {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.section-detail-info-card {
+  margin: 0 50px 50px 0;
+
+  /// only direct children
+  > {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $csm-content-title-color;
+    }
+  }
+}
+
+// .section-detail-info-card h4 {
+//   color: #646464;
+//   font-size: 25px;
+//   font-weight: bold;
+//   margin: 0 0 20px;
+// }
+
+.section-detail-info-card.drop-section {
+  flex-basis: 100%;
+  display: flex;
+  text-align: center;
+}
+
+.section-detail-info-card-contents .divider {
+  margin: 40px -40px;
+  border-top: inherit;
+}
+
+.section-detail-info-card-contents.drop-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  border-color: #ffadad;
+}
+
+%info-card-action {
+  font-size: 14px;
+  // position: absolute;
+}
+
+.info-card-actions {
+  margin: -30px -30px 10px -30px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.info-card-edit-btn {
+  @extend %info-card-action;
+  top: 10px;
+  right: 10px;
+}
+
+.override-info-card-edit-btn {
+  @extend %info-card-action;
+  top: 170px;
+  right: 10px;
+}
+
+.delete-spacetime-btn {
+  @extend %info-card-action;
+  top: 10px;
+  left: 10px;
+}
+
+.delete-override-btn {
+  position: absolute;
+  top: 170px;
+  left: 10px;
+}
+
+.meta-field {
+  font-weight: 600;
+  color: #727070;
+}
+
+.spacetime-edit-modal {
+  height: 60vh;
+  padding: 0 20px;
+}
+
+/// Attendance table
+
+.mentor-attendance-page {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+#mentor-attendance {
+  max-width: 500px;
+  padding-top: 0;
+  padding-bottom: 30px;
+  overflow: hidden;
+  border-top: none;
+}
+
+#attendance-date-tabs-container {
+  display: flex;
+  margin: 0 -40px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+#attendance-date-tabs-container > div {
+  background-color: #f0f0f0;
+  border: 1px solid #e9e9e9;
+  border-radius: 10px 10px 0px 0px;
+  padding: 15px 30px;
+  color: #5e5e5e;
+  font-size: 15px;
+  cursor: pointer;
+}
+#attendance-date-tabs-container > div:hover {
+  background-color: #dedede;
+}
+
+#attendance-date-tabs-container > div.active {
+  background-color: white;
+  border-bottom-color: white;
+}
+
+#mentor-attendance-table {
+  width: 100%;
+}
+
+#mentor-attendance-controls {
+  margin-top: 25px;
+  max-width: 780px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 15px;
+}
+
+.mentor-attendance-input {
+  text-align-last: center;
+}
+
+/// student attendance table status
+.attendance-status {
+  text-align: center;
+  color: white;
+  padding: 5px 10px;
+  max-width: 200px;
+  border-radius: 6px;
+}
diff --git a/csm_web/frontend/src/css/spacetime-edit.scss b/csm_web/frontend/src/css/spacetime-edit.scss
new file mode 100644
index 00000000..f2f63167
--- /dev/null
+++ b/csm_web/frontend/src/css/spacetime-edit.scss
@@ -0,0 +1,11 @@
+.spacetime-edit-form-title {
+  text-align: center;
+}
+
+#day-time-fields {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
diff --git a/csm_web/frontend/src/css/spacetime_delete.scss b/csm_web/frontend/src/css/spacetime_delete.scss
new file mode 100644
index 00000000..64932dd2
--- /dev/null
+++ b/csm_web/frontend/src/css/spacetime_delete.scss
@@ -0,0 +1,26 @@
+@use "base/variables" as *;
+
+.deleteSpacetime {
+  margin: auto 0;
+  /* align-items: center; */
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  gap: 10px;
+}
+
+.spacetimeCheckboxLabel {
+  color: #646464;
+  font-size: 18px;
+  margin-left: 8px;
+}
+
+.spacetimeDeleteDropper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-top: 10px;
+}
diff --git a/csm_web/frontend/src/css/student_dropper.scss b/csm_web/frontend/src/css/student_dropper.scss
new file mode 100644
index 00000000..b61ff536
--- /dev/null
+++ b/csm_web/frontend/src/css/student_dropper.scss
@@ -0,0 +1,48 @@
+@use "base/variables" as *;
+
+.student-dropper {
+  /// center x icon
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /// strikethrough name if the modal is visible
+  &.ban-prompt-visible + .student-info {
+    color: #cecece;
+    text-decoration: line-through;
+  }
+}
+
+.student-dropper-modal {
+  margin: auto 0;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 40px;
+}
+
+.student-dropper-head-item {
+  text-align: center;
+}
+
+.student-dropper-checkbox-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.student-dropper-checkbox-label {
+  // color: #646464;
+  font-size: 16px;
+  // padding-top: 20px;
+  margin-left: 8px;
+}
+
+.student-dropper-submit-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
diff --git a/csm_web/frontend/src/css/whitelist_modal.scss b/csm_web/frontend/src/css/whitelist_modal.scss
new file mode 100644
index 00000000..64a7dedc
--- /dev/null
+++ b/csm_web/frontend/src/css/whitelist_modal.scss
@@ -0,0 +1,141 @@
+@use "base/variables" as *;
+
+.whitelist-modal-container {
+  width: 65vw !important;
+  height: 65vh !important;
+}
+
+.whitelist-modal {
+  height: 90%;
+}
+
+.whitelist-modal-add-container,
+.whitelist-modal-delete-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  padding: 16px;
+}
+
+.whitelist-modal-subtitle {
+  font-size: 1.1rem;
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+
+.whitelist-modal-description {
+  color: #333;
+  font-size: 0.95rem;
+}
+
+.whitelist-modal-submit-status {
+  position: relative;
+}
+
+.whitelist-modal-submit-status * {
+  position: absolute !important;
+  top: 4px;
+  left: 10px;
+  width: 1.5em !important;
+  height: 1.5em !important;
+}
+
+.whitelist-modal-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+}
+
+/* Add tab */
+
+.whitelist-modal-add-textarea {
+  margin: 8px 0;
+  width: calc(min(450px, 50vw));
+  height: calc(min(300px, 50vh));
+  resize: none;
+}
+
+/* Delete tab */
+
+.whitelist-modal-delete-search-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  gap: 4px;
+}
+
+.whitelist-modal-delete-search {
+  margin-top: 4px;
+}
+
+.whitelist-modal-delete-search-description {
+  color: #333;
+  font-size: 0.95rem;
+}
+
+.whitelist-modal-delete-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  overflow: auto;
+  max-height: 40vh;
+  min-width: 30vw;
+  max-width: 50vw;
+  margin: 8px 0;
+}
+
+.whitelist-modal-delete-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  min-width: 400px;
+  width: 50%;
+  margin: 2px 0;
+  padding: 2px 0;
+}
+
+.whitelist-modal-delete-row.deleted {
+  background-color: #eee;
+  border-radius: 3px;
+  text-decoration: line-through;
+
+  color: $csm-neutral;
+}
+
+.whitelist-modal-delete-row-content {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.whitelist-modal-delete-row-btn {
+  min-width: 24px;
+  color: $csm-danger;
+
+  cursor: pointer;
+  user-select: none;
+}
+
+.whitelist-modal-delete-row.deleted .whitelist-modal-delete-row-btn {
+  color: #aaa;
+}
+
+.whitelist-modal-delete-row-email {
+  flex: 2;
+  color: #888;
+  font-size: 0.9rem;
+}
+
+.whitelist-modal-delete-row-name {
+  flex: 1;
+}
diff --git a/csm_web/frontend/src/css/word-of-the-day.scss b/csm_web/frontend/src/css/word-of-the-day.scss
new file mode 100644
index 00000000..2844f74f
--- /dev/null
+++ b/csm_web/frontend/src/css/word-of-the-day.scss
@@ -0,0 +1,106 @@
+@use "base/variables" as *;
+
+#word-of-the-day-container {
+  border-top: 2px solid #e7e7e7;
+  padding-top: 10px;
+  margin-top: 25px;
+}
+
+#word-of-the-day-card {
+  border: 2px solid #e7e7e7;
+  box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25);
+  border-radius: 20px;
+  padding: 30px 30px 15px;
+  margin-bottom: 30px;
+}
+
+.word-of-the-day-action-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.word-of-the-day-input-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.word-of-the-day-input {
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: "Montserrat";
+  border: none;
+  background-color: #ededed;
+  padding: 10px 20px;
+  margin-right: 5px;
+}
+
+.word-of-the-day-input::placeholder {
+  opacity: 0.65;
+}
+
+.word-of-the-day-status.unselected {
+  color: $csm-danger;
+}
+
+.word-of-the-day-status.selected {
+  color: $csm-green-darkened;
+}
+
+.random-word-picker-btn {
+  color: $csm-green-darkened;
+}
+
+.word-of-the-day-select {
+  max-width: 200px;
+  width: 150px;
+  text-align-last: center;
+  padding: 6px;
+  border-radius: 6px;
+  border: none;
+  margin-right: 5px;
+  font-family: "Montserrat";
+}
+
+.word-of-the-day-select-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.word-of-the-day-submit-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 15px;
+}
+
+.word-of-the-day-status-bar {
+  padding: 10px 0;
+  font-size: 0.9rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.word-of-the-day-status-text {
+  color: $csm-danger;
+}
+
+.word-of-the-day-icon {
+  width: 2em;
+  height: 2em;
+}
+
+.word-of-the-day-deadline:not(.passed) {
+  color: $csm-green-darkened;
+}
+
+.word-of-the-day-deadline.passed {
+  color: $csm-danger-darkened;
+}
diff --git a/csm_web/frontend/src/index.tsx b/csm_web/frontend/src/index.tsx
index b98afdb3..1afb4155 100644
--- a/csm_web/frontend/src/index.tsx
+++ b/csm_web/frontend/src/index.tsx
@@ -1,3 +1,7 @@
+// Global styles (imported before any components to allow for overrides)
+import "./css/base/styles.scss";
+import "./css/fontawesome-styles.scss";
+
 import App from "./components/App";
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
diff --git a/csm_web/frontend/static/frontend/css/calendar.css b/csm_web/frontend/static/frontend/css/calendar.css
deleted file mode 100644
index a91d6ff9..00000000
--- a/csm_web/frontend/static/frontend/css/calendar.css
+++ /dev/null
@@ -1,178 +0,0 @@
-:root {
-	--calendar-interval-height: 26px;
-}
-
-/*
-Hierarchy:
-
-.calendar-container
-  > .calendar-header
-    > .calendar-header-left
-    > .calendar-day-header
-  > .calendar-body
-    > .calendar-day-container
-      > .calendar-labels
-        > .calendar-label
-      > .calendar-day
-        > .calendar-day-interval
-*/
-
-.calendar-container {
-	box-sizing: border-box;
-	/* width: 55vw; */
-}
-
-.calendar-header {
-	display: flex;
-	justify-content: stretch;
-	align-items: center;
-	border-bottom: 1px solid #e5e5e5;
-	box-sizing: border-box;
-}
-
-.calendar-day-header {
-	background-color: #f5f5f5;
-	border-left: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-	color: #333;
-	font-weight: bold;
-	padding: 5px 0;
-	text-align: center;
-	box-sizing: border-box;
-	width: 100%;
-	flex: 1;
-}
-
-.calendar-body {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	overflow: hidden;
-	touch-action: none;
-}
-
-.calendar-day-container {
-	width: 100%;
-	flex: 1;
-}
-
-.calendar-day {
-	background-color: #fff;
-	border: 1px solid #ddd;
-	color: #333;
-	font-size: 14px;
-	text-align: center;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: stretch;
-	align-items: center;
-	padding: 8px 0;
-}
-
-.calendar-day-interval {
-	box-sizing: border-box;
-	border-top: 1px solid #ddd;
-	border-bottom: 1px solid #ddd;
-	color: #333;
-	font-size: 14px;
-	font-weight: bold;
-	text-align: center;
-	width: 100%;
-	height: var(--calendar-interval-height);
-}
-
-.calendar-header-left {
-	box-sizing: border-box;
-	width: 50px;
-	text-align: right;
-	padding-right: 5px;
-	font-size: 85%;
-}
-
-.calendar-labels {
-	box-sizing: border-box;
-	width: 50px;
-	padding-right: 5px;
-}
-
-.calendar-label {
-	position: relative;
-	top: -5px;
-	height: var(--calendar-interval-height);
-	font-size: 75%;
-	color: #666;
-	text-align: right;
-}
-
-/*
-Hierarchy:
-
-.calendar-events
-  > .calendar-event-container
-    > .calendar-event (.calendar-event-hover / .calendar-event-select)
-      > .calendar-event-detail
-*/
-
-.calendar-events {
-	width: 100%;
-}
-
-.calendar-event-container,
-.calendar-transparent-event-container {
-	position: relative;
-	width: 100%;
-	height: 0;
-}
-
-.calendar-event,
-.calendar-transparent-event,
-.calendar-creating-event {
-	box-sizing: border-box;
-	position: relative;
-	padding: 0 3px 3px 0;
-}
-
-.calendar-transparent-event-container {
-	pointer-events: none;
-}
-
-.calendar-event-detail {
-	width: 100%;
-	height: 100%;
-	background-color: lightblue;
-	-webkit-transition: background-color ease 100ms, box-shadow ease 100ms;
-	-o-transition: background-color ease 100ms, box-shadow ease 100ms;
-	transition: background-color ease 100ms, box-shadow ease 100ms;
-	user-select: none;
-	box-sizing: border-box;
-	padding-top: 3px;
-
-	overflow: hidden;
-}
-
-.calendar-event-detail.flush {
-	padding-top: 0;
-}
-
-.calendar-transparent-event .calendar-event-detail {
-	background-color: #ffd6dd;
-}
-
-.calendar-creating-event .calendar-event-detail {
-	background-color: lightpink;
-}
-
-.calendar-event-hover .calendar-event-detail {
-	background-color: #d2ffd2;
-	box-shadow: 2px 2px 2px #ccc;
-}
-
-.calendar-event-select .calendar-event-detail {
-	background-color: #90ee90;
-}
-
-.calendar-event-linked .calendar-event-detail {
-	filter: brightness(1.1);
-}
diff --git a/csm_web/frontend/static/frontend/css/course-settings.css b/csm_web/frontend/static/frontend/css/course-settings.css
deleted file mode 100644
index 8dc61460..00000000
--- a/csm_web/frontend/static/frontend/css/course-settings.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.course-settings-btn {
-	font-size: 16px;
-	border: none;
-	cursor: pointer;
-	margin: 0 5px;
-	display: block;
-}
-
-.course-settings-content {
-	display: flex;
-	flex-direction: column;
-	height: 90%;
-}
-
-.course-settings-container {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	margin-top: 10px;
-	padding: 0 25px;
-}
-
-.course-settings-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.course-settings-label-container {
-	flex: 1;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-}
-
-.course-settings-tooltip-container {
-	position: relative;
-	margin-left: 5px;
-}
-
-.course-settings-tooltip-info-icon {
-	width: 1em;
-	color: #888;
-}
-
-.course-settings-tooltip-info-icon:hover {
-	color: #aaa;
-}
-
-.course-settings-input-container {
-	flex: 1;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	align-items: center;
-}
-
-.course-settings-input {
-	font-family: inherit;
-	width: 50%;
-}
-
-.course-settings-input-post {
-	margin-left: 5px;
-}
-
-.course-settings-footer {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-}
-
-.course-settings-submit {
-	background-color: var(--csm-green);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	user-select: none;
-	padding: 8px 15px !important;
-}
diff --git a/csm_web/frontend/static/frontend/css/enrollment_matcher.css b/csm_web/frontend/static/frontend/css/enrollment_matcher.css
deleted file mode 100644
index 1a96f08d..00000000
--- a/csm_web/frontend/static/frontend/css/enrollment_matcher.css
+++ /dev/null
@@ -1,964 +0,0 @@
-#matcher-contents {
-	display: flex;
-}
-
-#matcher-sidebar {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: column;
-	padding: 40px 30px 0 20px;
-	width: fit-content;
-	gap: 10px;
-}
-
-#matcher-body {
-	width: 100%;
-}
-
-#matcher-main {
-	width: 90%;
-}
-
-#matcher-main input[type="time"]::-webkit-calendar-picker-indicator {
-	/* display: none; */
-	margin-left: 0;
-	padding: 1px;
-}
-
-/*
-#matcher-header {
-}
-*/
-
-.matcher-title {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.matcher-stages {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-around;
-	max-width: 850px;
-	margin: 20px auto;
-	user-select: none;
-}
-
-.matcher-stages-stage {
-	width: fit-content;
-}
-
-.matcher-stages-stage.active-stage {
-	color: var(--csm-green);
-}
-
-.matcher-link {
-	text-decoration: none;
-	color: #000;
-	padding: 15px 20px;
-	background-color: var(--csm-green-lightened);
-	border-radius: 10px;
-}
-
-.matcher-link.active {
-	/* color: var(--csm-green); */
-	font-weight: bold;
-	background-color: var(--csm-green);
-}
-
-.matcher-body {
-	display: flex;
-	flex-direction: row;
-	overflow-x: auto;
-}
-
-.matcher-body-footer,
-.matcher-body-footer-right,
-.matcher-body-footer-sticky {
-	margin-top: 20px;
-
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.matcher-body-footer {
-	justify-content: space-between;
-}
-
-.matcher-body-footer-right {
-	justify-content: flex-end;
-}
-
-.matcher-body-footer-sticky {
-	position: sticky;
-	bottom: 0;
-	margin-top: 0;
-	padding: 25px 0 15px;
-	/* fallback for gradient */
-	background-color: #ffffffcc;
-	background: linear-gradient(to bottom, #ffffff99 0%, #ffffff 50%);
-}
-
-.matcher-body-footer-status-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-}
-
-.matcher-body-footer-status-icon {
-	width: 2em !important;
-	height: 2em !important;
-}
-
-.mentor-sidebar-left,
-.coordinator-sidebar-left {
-	display: flex;
-	flex-direction: column;
-	/* width: 20vw; */
-	flex: 0.4;
-}
-
-.mentor-sidebar-right,
-.coordinator-sidebar-right {
-	flex: 1;
-}
-
-.matcher-sidebar-left-top {
-	flex: 1;
-	background-color: #f5f5f5;
-	border-radius: 5px;
-	padding: 15px;
-}
-
-.matcher-sidebar-left-bottom {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 15px;
-}
-
-.matcher-sidebar-left-bottom-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	padding: 15px;
-}
-
-.matcher-submit-status-container {
-	position: relative;
-}
-
-.matcher-submit-status-icon {
-	position: absolute !important;
-	top: -0.75em;
-	left: 10px;
-	width: 1.5em !important;
-	height: 1.5em !important;
-}
-
-.matcher-submit-status-icon.error {
-	color: var(--csm-danger);
-}
-
-.matcher-detail-time {
-	font-size: 0.9rem;
-}
-
-.matcher-detail {
-	font-size: 0.9rem;
-}
-
-.matcher-input {
-	width: 40px;
-	margin-left: 5px;
-	outline: none;
-}
-
-/* Modal */
-
-.matcher-calendar-modal {
-	width: 800px !important;
-	height: 700px !important;
-}
-
-.matcher-calendar-modal-contents {
-	width: 100%;
-	height: calc(100% - 40px);
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	justify-content: center;
-}
-
-.matcher-calendar-modal-header {
-	margin: 0 20px 15px;
-	font-weight: bold;
-}
-
-/* Table */
-
-.matcher-table-sort-group {
-	display: flex;
-	flex-direction: row;
-	gap: 3px;
-
-	user-select: none;
-	cursor: pointer;
-}
-
-.matcher-table-sort-icon {
-	margin-top: 2px;
-	width: 1em;
-}
-
-/* Buttons */
-
-.matcher-submit-btn {
-	background-color: var(--csm-green);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	user-select: none;
-	padding: 8px 15px !important;
-}
-
-.matcher-submit-btn:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-.matcher-submit-btn:disabled {
-	background-color: var(--csm-neutral);
-	cursor: not-allowed;
-}
-
-.matcher-secondary-btn {
-	background-color: var(--csm-neutral);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	user-select: none;
-	padding: 8px 15px !important;
-}
-
-.matcher-secondary-btn:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.matcher-secondary-btn:disabled {
-	background-color: var(--csm-neutral);
-	cursor: not-allowed;
-}
-
-.matcher-danger-btn {
-	background-color: var(--csm-danger);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	user-select: none;
-	padding: 8px 15px !important;
-}
-
-.matcher-danger-btn:hover {
-	background-color: var(--csm-danger-darkened);
-}
-
-.matcher-toggle-btn {
-	cursor: pointer;
-	font-size: 0.9rem;
-	text-align: center;
-}
-
-/* Mentor Preferences*/
-
-.matcher-sidebar-pref-help {
-	margin: 20px 0;
-	font-style: normal;
-}
-
-/* CreateStage.tsx */
-
-.matcher-sidebar-create,
-.matcher-sidebar-selected,
-.matcher-sidebar-tiling {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.matcher-sidebar-selected-bottom,
-.matcher-sidebar-tiling-bottom {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding-top: 15px;
-}
-
-.matcher-sidebar-create-bottom,
-.matcher-sidebar-selected-bottom {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 20px;
-	padding-top: 15px;
-}
-
-.matcher-sidebar-create-bottom-row,
-.matcher-sidebar-selected-bottom-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-}
-
-.matcher-sidebar-create-footer,
-.matcher-sidebar-selected-footer {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-
-	font-style: italic;
-	font-size: 0.95rem;
-}
-
-.matcher-created-time-container {
-	display: flex;
-	flex-direction: row;
-}
-
-.matcher-selected-time-container {
-	list-style: disc outside;
-}
-
-.matcher-created-times,
-.matcher-selected-times {
-	font-size: 0.95rem;
-	margin-bottom: 10px;
-	padding-left: 10px;
-}
-
-.matcher-selected-times {
-	margin-top: 0;
-	margin-left: 15px;
-}
-
-.matcher-selected-time {
-	position: relative;
-	left: -3px;
-}
-
-.matcher-created-time {
-	padding: 5px 0;
-}
-
-.matcher-created-time-remove {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-
-	margin-right: 5px;
-}
-
-.matcher-sidebar-header {
-	padding-bottom: 15px;
-	font-weight: bold;
-}
-
-.matcher-remove-time-icon {
-	position: relative;
-	color: var(--csm-danger);
-	cursor: pointer;
-	top: 1px;
-}
-
-.matcher-remove-time-icon:hover {
-	color: var(--csm-danger-darkened);
-}
-
-.matcher-select-day-input {
-	height: 1.5rem;
-	outline: none;
-}
-
-.matcher-select-time-input {
-	outline: none;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-.matcher-tiling-subheader {
-	/* font-style: italic; */
-	font-weight: 600;
-}
-
-.matcher-tiling-day-form {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	margin-left: 10px;
-}
-
-.matcher-sidebar-tiling-body {
-	font-size: 0.95rem;
-}
-
-.matcher-tiling-range-container,
-.matcher-tiling-length-container,
-.matcher-tiling-day-container {
-	padding: 5px 0;
-}
-
-.matcher-tiling-length-input {
-	width: 75px;
-	margin-right: 5px;
-}
-
-.matcher-tiling-toggle {
-	margin-bottom: 3px;
-}
-
-.matcher-tooltip-container {
-	position: relative;
-}
-
-.matcher-tooltip-info-icon {
-	width: 1em;
-	margin-left: 3px;
-}
-
-.matcher-tooltip-info-icon:hover {
-	color: #888;
-}
-
-.matcher-tiling-link-day-label {
-	white-space: nowrap;
-}
-
-.matcher-tiling-link-day-container {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	margin-top: 5px;
-}
-
-.matcher-tiling-tooltip-body {
-	width: fit-content;
-	max-width: 250px;
-}
-
-.matcher-unsaved-changes-container {
-	height: fit-content;
-	margin-right: 15px;
-}
-
-.matcher-unsaved-changes {
-	font-style: italic;
-}
-
-/* ReleaseStage.tsx */
-
-.mentor-list-container {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-}
-
-.mentor-list-top {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.mentor-list-top-search {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	gap: 15px;
-}
-
-.mentor-list-num-submitted {
-	font-size: 0.9rem;
-}
-
-.mentor-list-top-buttons {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.mentor-list-header {
-	display: flex;
-	flex-direction: row;
-	padding: 10px 30px 10px 15px;
-	margin-top: 15px;
-
-	background-color: var(--csm-green);
-
-	font-size: 0.9rem;
-	font-weight: bold;
-}
-
-.mentor-list {
-	display: flex;
-	flex-direction: column;
-
-	background-color: #f5f5f5;
-	padding: 15px 30px 15px 15px;
-
-	gap: 3px;
-}
-
-.mentor-list-with-preferences,
-.mentor-list-without-preferences {
-	flex: 1;
-}
-
-.mentor-list-item {
-	display: flex;
-	flex-direction: row;
-	margin: 2px 0;
-}
-
-.mentor-list-item-name {
-	flex: 0.9;
-	flex-basis: 0;
-}
-
-.mentor-list-item-email {
-	flex: 1;
-	flex-basis: 0;
-	font-size: 0.9rem;
-}
-
-.mentor-list-header .mentor-list-item-email {
-	font-size: inherit;
-}
-
-.mentor-list-item-check {
-	min-width: 3em;
-	width: 10%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.mentor-list-item-undo-remove,
-.mentor-list-item-remove,
-.mentor-list-item-view {
-	margin-top: 2px;
-	margin-right: 5px;
-}
-
-.mentor-list-icon {
-	width: 1rem;
-	height: 1rem;
-}
-
-.mentor-list-item-remove {
-	color: var(--csm-danger);
-}
-
-.mentor-list-item-remove:hover {
-	color: var(--csm-danger-darkened);
-	cursor: pointer;
-}
-
-.mentor-list-item-undo-remove {
-	color: black;
-}
-
-.mentor-list-item-undo-remove:hover {
-	color: #555;
-	cursor: pointer;
-}
-
-.mentor-list-right {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-
-	border-radius: 5px;
-	padding: 15px;
-}
-
-.mentor-list-item-selected .mentor-list-item-view {
-	color: var(--csm-green-darkened);
-	user-select: none;
-}
-
-.mentor-list-item-clickable .mentor-list-item-view:hover {
-	color: var(--csm-green);
-	cursor: pointer;
-}
-
-.mentor-list-item-unclickable .mentor-list-item-view {
-	color: #888;
-	user-select: none;
-}
-
-.mentor-list-item-removed {
-	text-decoration: line-through;
-	color: var(--csm-neutral);
-}
-
-.mentor-add-textarea {
-	width: calc(min(350px, 50vw));
-	height: calc(min(200px, 50vh));
-
-	resize: none;
-
-	margin-top: 10px;
-	margin-left: 10px;
-	margin-bottom: 10px;
-}
-
-.release-container {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-}
-
-.matcher-pref-color-unavailable {
-	color: #888;
-}
-
-.matcher-pref-color-best {
-	color: green;
-}
-
-.matcher-pref-modal-email {
-	font-size: 0.9rem;
-	font-weight: normal;
-}
-
-/* ConfigureStage.tsx */
-
-.matcher-mentor-min-max {
-	font-size: 0.8rem;
-}
-
-.matcher-configure-sidebar-contents {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.matcher-configure-sidebar-header {
-	font-weight: bold;
-	margin-bottom: 10px;
-}
-
-.matcher-configure-input-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
-}
-
-.matcher-configure-input-group {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	margin-bottom: 8px;
-}
-
-.matcher-configure-input {
-	font-family: inherit;
-	width: 80%;
-}
-
-.matcher-configure-sidebar-buttons {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 10px;
-
-	margin: 15px 0;
-}
-
-.matcher-configure-sidebar-footer {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-
-	font-style: italic;
-	font-size: 0.95rem;
-}
-
-.matcher-configure-error {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.matcher-configure-error-text {
-	color: var(--csm-danger);
-	font-size: 0.9rem;
-	font-style: italic;
-}
-
-.matcher-configure-error-icon {
-	color: var(--csm-danger);
-	width: 1.25em;
-	height: 1.25em;
-}
-
-/* EditStage.tsx */
-
-.matcher-assignment-above-head {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.matcher-assignment-search {
-	width: 50%;
-	margin-bottom: 15px;
-}
-
-.matcher-assignment-mentor-head {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	background-color: var(--csm-green);
-	padding: 10px 0;
-	margin-bottom: 5px;
-	font-size: 0.9rem;
-	font-weight: bold;
-}
-
-.matcher-assignment-row {
-	display: flex;
-	padding: 10px 0;
-	border-bottom: 1px solid var(--csm-neutral);
-}
-
-.matcher-assignment-row.unassigned {
-	background-color: #ffdddd;
-}
-
-.matcher-assignment-mentor-empty {
-	font-style: italic;
-}
-
-.matcher-assignment-mentor-select {
-	width: 25px;
-	margin-right: 2px;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.matcher-assignment-mentor-info {
-	flex: auto;
-	width: 25%;
-	margin-right: 5px;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-.matcher-assignment-mentor-name {
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-}
-
-.matcher-assignment-mentor-email {
-	font-size: 0.9rem;
-	font-style: italic;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	color: #888;
-}
-
-.matcher-assignment-section-times {
-	flex: auto;
-	width: 15%;
-	margin-right: 5px;
-	font-size: 0.95rem;
-
-	display: flex;
-	flex-direction: row;
-}
-
-.matcher-assignment-section-times-edit {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	min-width: 18px;
-	width: 18px;
-	padding-right: 5px;
-}
-
-.matcher-assignment-section-times-edit-icon {
-	user-select: none;
-	color: var(--csm-neutral);
-	width: 100%;
-	height: 100%;
-}
-
-.matcher-assignment-section-times-edit-icon:hover {
-	color: var(--csm-green);
-	cursor: pointer;
-}
-
-.matcher-assignment-section-times-data {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	overflow-x: hidden;
-}
-
-.matcher-assignment-section-times-input {
-	width: 100%;
-	height: 1.5rem;
-	font-family: inherit;
-	font-size: 0.95rem;
-	border: 2px solid var(--csm-neutral);
-	border-radius: 3px;
-	background-color: transparent;
-	outline: none;
-}
-
-.matcher-assignment-section-times-input:focus {
-	border-color: #888;
-}
-
-.matcher-assignment-section-times-option {
-	font-family: inherit;
-	font-size: 0.9rem;
-}
-
-.matcher-assignment-section-capacity {
-	width: 85px;
-	margin-right: 5px;
-}
-
-.matcher-assignment-section-description {
-	width: 25%;
-}
-
-.matcher-assignment-section-capacity,
-.matcher-assignment-section-description {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.matcher-assignment-section-capacity-input:focus,
-.matcher-assignment-section-description-input:focus {
-	outline-color: #888;
-}
-
-.matcher-assignment-section-capacity-input,
-.matcher-assignment-section-description-input {
-	font-family: inherit;
-	font-size: 0.95rem;
-	width: calc(100% - 10px);
-	border: 2px solid var(--csm-neutral);
-	border-radius: 3px;
-}
-
-.matcher-assignment-burger {
-	width: 15px;
-	height: 15px;
-	cursor: pointer;
-}
-
-.matcher-assignment-group-hover {
-	background-color: #eee;
-}
-
-.matcher-assignment-mentor-dragging {
-	color: var(--csm-neutral);
-}
-
-.matcher-assignment-footer-help {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.matcher-assignment-footer-help-icon,
-.matcher-assignment-footer-error-icon {
-	width: 1.25em;
-	height: 1.25em;
-	margin-right: 2px;
-}
-
-.matcher-assignment-footer-help-text,
-.matcher-assignment-footer-error-text {
-	font-size: 0.9rem;
-	font-style: italic;
-}
-
-.matcher-assignment-footer-error-icon,
-.matcher-assignment-footer-error-text {
-	color: var(--csm-danger);
-}
-
-.matcher-assignment-button-div {
-	display: flex;
-	flex-direction: row;
-	column-gap: 15px;
-}
-
-.matcher-assignment-save-button {
-	background-color: var(--csm-neutral);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	padding: 8px 20px;
-	text-decoration: none;
-}
-
-.matcher-assignment-save-button:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.matcher-pref-distribution-div,
-.matcher-assignment-distribution-div {
-	height: 100%;
-}
-
-.matcher-assignment-confirm-modal-contents {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
-	height: 65%;
-
-	text-align: center;
-}
-
-.matcher-assignment-confirm-modal-footer {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	align-items: center;
-	width: 100%;
-}
diff --git a/csm_web/frontend/static/frontend/css/fontawesome-styles.css b/csm_web/frontend/static/frontend/css/fontawesome-styles.css
deleted file mode 100644
index 1eacb8bb..00000000
--- a/csm_web/frontend/static/frontend/css/fontawesome-styles.css
+++ /dev/null
@@ -1,462 +0,0 @@
-/**
- *Stylesheet copied from node_modules/@fortawesome/fontawesome-svg-core/styles.css
- */
-
-svg:not(:root).svg-inline--fa {
-	overflow: visible;
-}
-
-.svg-inline--fa {
-	display: inline-block;
-	font-size: inherit;
-	height: 1em;
-	overflow: visible;
-	vertical-align: -0.125em;
-}
-.svg-inline--fa.fa-lg {
-	vertical-align: -0.225em;
-}
-.svg-inline--fa.fa-w-1 {
-	width: 0.0625em;
-}
-.svg-inline--fa.fa-w-2 {
-	width: 0.125em;
-}
-.svg-inline--fa.fa-w-3 {
-	width: 0.1875em;
-}
-.svg-inline--fa.fa-w-4 {
-	width: 0.25em;
-}
-.svg-inline--fa.fa-w-5 {
-	width: 0.3125em;
-}
-.svg-inline--fa.fa-w-6 {
-	width: 0.375em;
-}
-.svg-inline--fa.fa-w-7 {
-	width: 0.4375em;
-}
-.svg-inline--fa.fa-w-8 {
-	width: 0.5em;
-}
-.svg-inline--fa.fa-w-9 {
-	width: 0.5625em;
-}
-.svg-inline--fa.fa-w-10 {
-	width: 0.625em;
-}
-.svg-inline--fa.fa-w-11 {
-	width: 0.6875em;
-}
-.svg-inline--fa.fa-w-12 {
-	width: 0.75em;
-}
-.svg-inline--fa.fa-w-13 {
-	width: 0.8125em;
-}
-.svg-inline--fa.fa-w-14 {
-	width: 0.875em;
-}
-.svg-inline--fa.fa-w-15 {
-	width: 0.9375em;
-}
-.svg-inline--fa.fa-w-16 {
-	width: 1em;
-}
-.svg-inline--fa.fa-w-17 {
-	width: 1.0625em;
-}
-.svg-inline--fa.fa-w-18 {
-	width: 1.125em;
-}
-.svg-inline--fa.fa-w-19 {
-	width: 1.1875em;
-}
-.svg-inline--fa.fa-w-20 {
-	width: 1.25em;
-}
-.svg-inline--fa.fa-pull-left {
-	margin-right: 0.3em;
-	width: auto;
-}
-.svg-inline--fa.fa-pull-right {
-	margin-left: 0.3em;
-	width: auto;
-}
-.svg-inline--fa.fa-border {
-	height: 1.5em;
-}
-.svg-inline--fa.fa-li {
-	width: 2em;
-}
-.svg-inline--fa.fa-fw {
-	width: 1.25em;
-}
-
-.fa-layers svg.svg-inline--fa {
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
-.fa-layers {
-	display: inline-block;
-	height: 1em;
-	position: relative;
-	text-align: center;
-	vertical-align: -0.125em;
-	width: 1em;
-}
-.fa-layers svg.svg-inline--fa {
-	-webkit-transform-origin: center center;
-	transform-origin: center center;
-}
-
-.fa-layers-text,
-.fa-layers-counter {
-	display: inline-block;
-	position: absolute;
-	text-align: center;
-}
-
-.fa-layers-text {
-	left: 50%;
-	top: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-	-webkit-transform-origin: center center;
-	transform-origin: center center;
-}
-
-.fa-layers-counter {
-	background-color: #ff253a;
-	border-radius: 1em;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	color: #fff;
-	height: 1.5em;
-	line-height: 1;
-	max-width: 5em;
-	min-width: 1.5em;
-	overflow: hidden;
-	padding: 0.25em;
-	right: 0;
-	text-overflow: ellipsis;
-	top: 0;
-	-webkit-transform: scale(0.25);
-	transform: scale(0.25);
-	-webkit-transform-origin: top right;
-	transform-origin: top right;
-}
-
-.fa-layers-bottom-right {
-	bottom: 0;
-	right: 0;
-	top: auto;
-	-webkit-transform: scale(0.25);
-	transform: scale(0.25);
-	-webkit-transform-origin: bottom right;
-	transform-origin: bottom right;
-}
-
-.fa-layers-bottom-left {
-	bottom: 0;
-	left: 0;
-	right: auto;
-	top: auto;
-	-webkit-transform: scale(0.25);
-	transform: scale(0.25);
-	-webkit-transform-origin: bottom left;
-	transform-origin: bottom left;
-}
-
-.fa-layers-top-right {
-	right: 0;
-	top: 0;
-	-webkit-transform: scale(0.25);
-	transform: scale(0.25);
-	-webkit-transform-origin: top right;
-	transform-origin: top right;
-}
-
-.fa-layers-top-left {
-	left: 0;
-	right: auto;
-	top: 0;
-	-webkit-transform: scale(0.25);
-	transform: scale(0.25);
-	-webkit-transform-origin: top left;
-	transform-origin: top left;
-}
-
-.fa-lg {
-	font-size: 1.33333em;
-	line-height: 0.75em;
-	vertical-align: -0.0667em;
-}
-
-.fa-xs {
-	font-size: 0.75em;
-}
-
-.fa-sm {
-	font-size: 0.875em;
-}
-
-.fa-1x {
-	font-size: 1em;
-}
-
-.fa-2x {
-	font-size: 2em;
-}
-
-.fa-3x {
-	font-size: 3em;
-}
-
-.fa-4x {
-	font-size: 4em;
-}
-
-.fa-5x {
-	font-size: 5em;
-}
-
-.fa-6x {
-	font-size: 6em;
-}
-
-.fa-7x {
-	font-size: 7em;
-}
-
-.fa-8x {
-	font-size: 8em;
-}
-
-.fa-9x {
-	font-size: 9em;
-}
-
-.fa-10x {
-	font-size: 10em;
-}
-
-.fa-fw {
-	text-align: center;
-	width: 1.25em;
-}
-
-.fa-ul {
-	list-style-type: none;
-	margin-left: 2.5em;
-	padding-left: 0;
-}
-.fa-ul > li {
-	position: relative;
-}
-
-.fa-li {
-	left: -2em;
-	position: absolute;
-	text-align: center;
-	width: 2em;
-	line-height: inherit;
-}
-
-.fa-border {
-	border: solid 0.08em #eee;
-	border-radius: 0.1em;
-	padding: 0.2em 0.25em 0.15em;
-}
-
-.fa-pull-left {
-	float: left;
-}
-
-.fa-pull-right {
-	float: right;
-}
-
-.fa.fa-pull-left,
-.fas.fa-pull-left,
-.far.fa-pull-left,
-.fal.fa-pull-left,
-.fab.fa-pull-left {
-	margin-right: 0.3em;
-}
-
-.fa.fa-pull-right,
-.fas.fa-pull-right,
-.far.fa-pull-right,
-.fal.fa-pull-right,
-.fab.fa-pull-right {
-	margin-left: 0.3em;
-}
-
-.fa-spin {
-	-webkit-animation: fa-spin 2s infinite linear;
-	animation: fa-spin 2s infinite linear;
-}
-
-.fa-pulse {
-	-webkit-animation: fa-spin 1s infinite steps(8);
-	animation: fa-spin 1s infinite steps(8);
-}
-
-@-webkit-keyframes fa-spin {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	100% {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes fa-spin {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	100% {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
-
-.fa-rotate-90 {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-	-webkit-transform: rotate(90deg);
-	transform: rotate(90deg);
-}
-
-.fa-rotate-180 {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-	-webkit-transform: rotate(180deg);
-	transform: rotate(180deg);
-}
-
-.fa-rotate-270 {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-	-webkit-transform: rotate(270deg);
-	transform: rotate(270deg);
-}
-
-.fa-flip-horizontal {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-	-webkit-transform: scale(-1, 1);
-	transform: scale(-1, 1);
-}
-
-.fa-flip-vertical {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-	-webkit-transform: scale(1, -1);
-	transform: scale(1, -1);
-}
-
-.fa-flip-both,
-.fa-flip-horizontal.fa-flip-vertical {
-	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-	-webkit-transform: scale(-1, -1);
-	transform: scale(-1, -1);
-}
-
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical,
-:root .fa-flip-both {
-	-webkit-filter: none;
-	filter: none;
-}
-
-.fa-stack {
-	display: inline-block;
-	height: 2em;
-	position: relative;
-	width: 2.5em;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-
-.svg-inline--fa.fa-stack-1x {
-	height: 1em;
-	width: 1.25em;
-}
-
-.svg-inline--fa.fa-stack-2x {
-	height: 2em;
-	width: 2.5em;
-}
-
-.fa-inverse {
-	color: #fff;
-}
-
-.sr-only {
-	border: 0;
-	clip: rect(0, 0, 0, 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}
-
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-	clip: auto;
-	height: auto;
-	margin: 0;
-	overflow: visible;
-	position: static;
-	width: auto;
-}
-
-.svg-inline--fa .fa-primary {
-	fill: var(--fa-primary-color, currentColor);
-	opacity: 1;
-	opacity: var(--fa-primary-opacity, 1);
-}
-
-.svg-inline--fa .fa-secondary {
-	fill: var(--fa-secondary-color, currentColor);
-	opacity: 0.4;
-	opacity: var(--fa-secondary-opacity, 0.4);
-}
-
-.svg-inline--fa.fa-swap-opacity .fa-primary {
-	opacity: 0.4;
-	opacity: var(--fa-secondary-opacity, 0.4);
-}
-
-.svg-inline--fa.fa-swap-opacity .fa-secondary {
-	opacity: 1;
-	opacity: var(--fa-primary-opacity, 1);
-}
-
-.svg-inline--fa mask .fa-primary,
-.svg-inline--fa mask .fa-secondary {
-	fill: black;
-}
-
-.fad.fa-inverse {
-	color: #fff;
-}
diff --git a/csm_web/frontend/static/frontend/css/login.css b/csm_web/frontend/static/frontend/css/login.css
new file mode 100644
index 00000000..738a41a1
--- /dev/null
+++ b/csm_web/frontend/static/frontend/css/login.css
@@ -0,0 +1,75 @@
+/*
+Login styles.
+
+Defined in CSS, since the login page is standalone.
+*/
+
+#login-container {
+	font-family: "Montserrat", sans-serif;
+
+	width: 100%;
+	height: 100%;
+	margin: auto;
+	text-align: center;
+}
+
+#login-card {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	text-align: center;
+	position: relative;
+	box-sizing: border-box;
+	transition: box-shadow 0.1s ease-in-out;
+	background: #fff;
+	color: #666;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+	display: inline-block;
+	width: 80%;
+	max-width: 25em;
+	height: 24em;
+	margin-top: 10%;
+	padding: 3em 1em 3em 1em;
+}
+
+#login-btn {
+	overflow: visible;
+	font: inherit;
+	display: inline-block;
+	box-sizing: border-box;
+	padding: 0 30px;
+	vertical-align: middle;
+	font-size: 0.875rem;
+	line-height: 38px;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	transition: 0.1s ease-in-out;
+	transition-property: color, background-color, border-color;
+	background-color: #1e87f0;
+	color: #fff;
+	border: 1px solid transparent;
+	cursor: pointer;
+	width: 35%;
+	min-width: 10em;
+	margin: auto;
+	margin-top: 4em;
+	box-shadow: 0px 4px 4px #0002;
+}
+
+#login-subtitle {
+	display: block;
+	margin: auto;
+	margin-top: 0.5em;
+	font-weight: 400;
+	font-size: 0.75em;
+	text-align: center;
+	opacity: 0.5;
+}
+
+#login-logo {
+	display: block;
+	width: 20em;
+	max-width: 75%;
+	margin: auto;
+}
diff --git a/csm_web/frontend/static/frontend/css/policies.css b/csm_web/frontend/static/frontend/css/policies.css
deleted file mode 100644
index f27873e0..00000000
--- a/csm_web/frontend/static/frontend/css/policies.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.policy-sections {
-	margin: auto;
-	width: 60%;
-	font-size: 1.05em;
-	line-height: 1.5em;
-}
-
-.policy-sections div {
-	padding-bottom: 0.5rem;
-}
-
-.policy-sections h1 {
-	color: var(--csm-green);
-	line-height: 125%;
-}
-
-.policy-sections a {
-	color: var(--csm-link-blue);
-	text-decoration: none;
-}
-
-.policy-sections .divider {
-	height: 1px;
-	background-color: #e0e0e0;
-	padding: 0;
-	margin-top: 1em;
-	margin-bottom: 2em;
-}
diff --git a/csm_web/frontend/static/frontend/css/resource_aggregation.css b/csm_web/frontend/static/frontend/css/resource_aggregation.css
deleted file mode 100644
index 34eda59a..00000000
--- a/csm_web/frontend/static/frontend/css/resource_aggregation.css
+++ /dev/null
@@ -1,545 +0,0 @@
-.tab-list {
-	margin-bottom: 24px;
-}
-
-.tab.active {
-	background-color: var(--csm-green);
-}
-
-.tab.active:hover {
-	background-color: var(--csm-green);
-}
-
-.tab {
-	background-color: var(--csm-neutral);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	font-size: 16px;
-	margin: 8px;
-	padding: 16px;
-}
-
-.tab:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.tabs {
-	margin: auto;
-	text-align: center;
-}
-
-.resourceWrapperContainer {
-	margin: auto;
-	max-width: 1064px;
-}
-
-.resourceTable {
-	min-width: 750px;
-}
-
-.resourceTableContainer {
-	overflow-x: auto;
-}
-
-.resourceContainer,
-.resourceEditContainer {
-	background-color: var(--csm-resources);
-	border-radius: 8px;
-	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 0 -1px rgb(0 0 0 / 6%);
-	height: 100%;
-	margin: 16px auto;
-	padding: 24px 0;
-}
-
-.resourceContainer,
-.resourceWrapperHeader {
-	grid-column: 1 / -1;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(50px, 1fr)) 2fr 2fr 1fr 40px;
-	column-gap: 10px;
-	text-align: center;
-	width: 100%;
-}
-
-.resourceEditContainer {
-	height: calc(75vh - 146px);
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.resourceEditContentWrapper {
-	overflow: auto;
-}
-
-.resourceEditContent {
-	min-width: 600px;
-}
-
-.resourceEditModal {
-	width: 80vw !important;
-	height: 75vh !important;
-}
-
-.resourceEditModal .modal-contents {
-	overflow: hidden;
-}
-
-.resourceWrapperHeader {
-	margin-bottom: 4px;
-}
-
-.resourceEditTabContainer {
-	display: flex;
-	flex-direction: row;
-	align-content: space-between;
-	justify-content: center;
-	margin-bottom: 20px;
-}
-
-.resourceEditTab {
-	margin: 20px;
-	background-color: var(--csm-neutral);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	font-size: 16px;
-	font-weight: 600;
-	justify-content: space-evenly;
-	padding: 8px;
-	width: 200px;
-}
-
-.topicTooltip {
-	text-align: center;
-}
-
-.resourceEditTab:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.resourceEditTab:disabled {
-	background-color: var(--csm-green);
-}
-
-.resourceInfo,
-.resourceWrapperHeader > div {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: center;
-	margin: auto;
-	padding: 0 8px;
-}
-
-.resourceRow {
-	hyphens: auto;
-	-webkit-hyphens: auto;
-	-moz-hyphens: auto;
-	-ms-hyphens: auto;
-}
-
-.resourceRowRender {
-	grid-column: 1 / -1;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(100px, 1fr));
-}
-
-.resourceWkst {
-	display: contents;
-	margin: 6px 0;
-}
-
-.resourceWkstFilesContainer {
-	display: grid;
-	align-items: center;
-	align-content: center;
-	justify-content: center;
-	grid-auto-columns: 2fr 1.5fr;
-	row-gap: 10px;
-}
-
-.resourceWkstFile,
-.resourceSoln,
-.resourceWkstFile a:link,
-.resourceSoln a:link,
-.resourceWkstFile a:visited,
-.resourceSoln a:visited,
-.resourceLink,
-.resourceLink a:link,
-.resourceLink a:visited {
-	color: var(--csm-green-darkened);
-}
-
-.resourceSoln a,
-.resourceLink a {
-	text-decoration: none;
-}
-
-.resourceWkstFile {
-	grid-column: 1;
-}
-
-.resourceWkstFile a:link {
-	text-decoration: underline;
-}
-
-.resourceSoln {
-	border: 2px solid var(--csm-green-darkened);
-	border-radius: 5px;
-	font-size: 14px;
-	font-weight: 600;
-	padding: 2px;
-	text-align: center;
-	width: 80px;
-	height: fit-content;
-	margin-left: 10px;
-	grid-column: 2;
-}
-
-.resourceWkstFile a:hover,
-.resourceSoln a:hover,
-.resourceLink a:hover {
-	border-color: #4e7a5d;
-	color: #4e7a5d;
-	cursor: pointer;
-}
-
-.topic {
-	background-color: var(--csm-green);
-	border-radius: 4px;
-	margin: 4px;
-	padding: 4px 8px;
-}
-
-#resourceEditInner {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	width: 100%;
-}
-
-.resourceInfoEdit {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin: 4px;
-	padding: 4px;
-}
-
-.resourceInfoEdit input {
-	padding: 6px;
-	width: 144px;
-	height: 1.1rem;
-}
-
-.resourceInfoEdit .resourceEditHeadItem {
-	margin: 4px 2px 10px;
-}
-
-.resourceWorksheetEditItem > input {
-	padding: 2px;
-	width: 100%;
-	max-width: 180px;
-	min-width: 100px;
-}
-
-.topicsTooltipWrapper {
-	position: relative;
-}
-
-.resourceWorksheetContainer {
-	display: grid;
-	width: 70%;
-	margin: auto;
-	row-gap: 10px;
-}
-
-@media screen and (max-width: 1200px) {
-	.resourceWorksheetContainer {
-		width: 90%;
-	}
-}
-
-.resourceWorksheetHead {
-	display: grid;
-	/* name, worksheet, solution, delete */
-	grid-template-columns: repeat(3, 1fr) 20px;
-	column-gap: 10px;
-	text-align: center;
-}
-
-.resourceLinkHead {
-	display: grid;
-	/* name, url, delete */
-	grid-template-columns: 1fr 1fr 20px;
-	column-gap: 10px;
-	text-align: center;
-}
-
-.resourceWorksheet {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr) 20px;
-	column-gap: 10px;
-}
-
-.resourceLink,
-.resourceLinkEdit {
-	display: grid;
-	column-gap: 10px;
-}
-
-.resourceLinkEdit {
-	grid-template-columns: 1fr 1fr 20px;
-}
-
-.resourceLinksContainer {
-	display: grid;
-	align-content: center;
-	row-gap: 10px;
-}
-
-.resourceWorksheetEditFile {
-	display: flex;
-	margin: auto 0;
-}
-
-.resourceWorksheetEditItem {
-	margin: auto;
-}
-
-.fileUpload input[type="file"] {
-	display: none;
-}
-
-.fileUpload {
-	border: 2px solid #ccc;
-	border-right-width: 1px;
-	background-color: white;
-	cursor: pointer;
-	display: flex;
-	flex-direction: row;
-	padding: 8px 12px;
-	font-size: 90%;
-	flex: 100%;
-	/* take up as much space as possible */
-}
-
-.fileUpload .fileUploadLabel {
-	flex: 100%;
-	text-align: left;
-	white-space: nowrap;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	width: 100px;
-}
-
-.fileUpload:hover {
-	border-color: var(--csm-neutral-darkened);
-	color: var(--csm-green-darkened);
-}
-
-.fileUpload:only-child {
-	border-right-width: 2px;
-}
-
-button.clearFile {
-	display: inline-block;
-	border: none;
-	background-color: #f8f8f8;
-	border: 2px solid #ccc;
-	border-left: none;
-	padding: 0 10px;
-}
-
-button.clearFile:hover {
-	color: red;
-	background-color: #eee;
-}
-
-.deleteWorksheet {
-	background-color: transparent;
-	border: none;
-	padding: 0;
-	font-size: 18px;
-	color: var(--csm-neutral-darkened);
-}
-
-.deleteWorksheet:hover {
-	color: red;
-}
-
-.addResourceButton {
-	background-color: white;
-	border: 2px solid #ccc;
-	border-radius: 8px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	margin: auto;
-	padding: 12px 16px;
-}
-
-.addResourceButton:hover {
-	background-color: #f8f8f8;
-}
-
-.uploadIcon {
-	width: 1em;
-	margin-right: 5px !important;
-}
-
-.resourceWrapperHeader > div {
-	font-size: 16px;
-	font-weight: 600;
-}
-
-.resourceButtonsContainer {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	margin-right: 16px;
-}
-
-.resourceButton {
-	border: None;
-	color: var(--csm-neutral);
-	font-size: 18px;
-}
-
-#editIcon:hover {
-	color: var(--csm-green-darkened);
-}
-
-#deleteIcon:hover {
-	color: var(--csm-danger-darkened);
-}
-
-#resourceButtonSubmit {
-	background-color: var(--csm-green);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	display: flex;
-	flex-direction: row;
-	font-size: 16px;
-	font-weight: 600;
-	justify-content: space-evenly;
-	margin: 40px auto 20px;
-	padding: 16px;
-	width: 120px;
-}
-
-#resourceButtonSubmit:disabled,
-#resourceButtonSubmit[disabled="disabled"],
-#resourceButtonSubmit:disabled:hover,
-#resourceButtonSubmit[disabled="disabled"]:hover {
-	background-color: #cdf3db;
-	cursor: not-allowed;
-}
-
-.resourceTabErrorText {
-	text-align: center;
-	color: red;
-}
-
-.resourceTabErrorText .icon {
-	display: inline-block;
-	padding: 0 3px;
-}
-
-#saveIcon {
-	margin: 0 !important;
-}
-
-#resourceButtonSubmit:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-.resourceValidationError .exclamationIcon {
-	display: inline-block;
-	padding: 0 3px;
-}
-
-.resourceValidationError {
-	color: red;
-	font-size: 80%;
-	margin: 3px 2px 4px;
-}
-
-.resourceTableOptions {
-	display: flex;
-	flex-flow: wrap;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 24px;
-}
-
-#addResourceButton {
-	background-color: white;
-	border: 4px solid var(--csm-green);
-	border-radius: 8px;
-	color: var(--csm-green);
-	display: flex;
-	flex-direction: row;
-	font-size: 16px;
-	font-weight: 700 !important;
-	justify-content: center;
-	padding: 12px 16px;
-	width: 180px;
-
-	margin: 5px 10px;
-}
-
-#addResourceButton:hover,
-#toggleViewEditLabel:hover {
-	border-color: var(--csm-green-darkened);
-	color: var(--csm-green-darkened);
-	text-decoration: underline;
-}
-
-#toggleViewEditLabel {
-	cursor: pointer;
-	background-color: white;
-	border: 4px solid var(--csm-green);
-	border-radius: 8px;
-	color: var(--csm-green);
-	display: flex;
-	flex-direction: row;
-	font-size: 16px;
-	font-weight: 700 !important;
-	justify-content: space-evenly;
-	padding: 12px 16px;
-	margin: 5px 10px;
-}
-
-#toggleViewEditInput {
-	cursor: pointer;
-	margin-right: 10px;
-	margin-left: 0;
-	color: var(--csm-green);
-}
-
-#plusIcon {
-	margin-right: 8px;
-}
-
-.resourceDeleteConfirmation .resourceDeleteText {
-	margin-top: 15px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-}
-
-.icon {
-	display: inline-block;
-	font-size: inherit;
-	height: 1em;
-	overflow: visible;
-	vertical-align: -0.125em;
-}
diff --git a/csm_web/frontend/static/frontend/css/searchbar.css b/csm_web/frontend/static/frontend/css/searchbar.css
deleted file mode 100644
index 7bc6f29b..00000000
--- a/csm_web/frontend/static/frontend/css/searchbar.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.search-bar {
-	min-width: 100px;
-	width: 250px;
-	max-width: 250px;
-}
-
-.search-icon {
-	display: inline-block;
-	font-size: inherit;
-
-	position: absolute;
-	z-index: 999;
-
-	width: 1.5rem;
-	height: 1.25rem;
-
-	padding: 3px;
-	margin-top: 1px;
-
-	overflow: visible;
-}
-
-.search-input {
-	width: 100%;
-	box-sizing: border-box;
-
-	border: 1px solid var(--csm-neutral);
-	border-radius: 3px;
-	padding: 5px;
-	padding-left: 2em;
-
-	font-family: inherit;
-}
diff --git a/csm_web/frontend/static/frontend/css/spacetime_delete.css b/csm_web/frontend/static/frontend/css/spacetime_delete.css
deleted file mode 100644
index 82b6a424..00000000
--- a/csm_web/frontend/static/frontend/css/spacetime_delete.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.deleteSpacetime {
-	margin: auto 0;
-	/* align-items: center; */
-	height: 90%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-}
-
-.spacetimeCheckboxLabel {
-	color: #646464;
-	font-size: 18px;
-	margin-left: 8px;
-}
-
-.spacetimeDeleteSubmit {
-	background-color: var(--csm-danger);
-	border: none;
-	color: white;
-	border-radius: 8px;
-	margin: 10px;
-	padding: 12px 16px;
-}
-
-.spacetimeDeleteSubmit:disabled {
-	background-color: var(--csm-neutral);
-}
diff --git a/csm_web/frontend/static/frontend/css/student_dropper.css b/csm_web/frontend/static/frontend/css/student_dropper.css
deleted file mode 100644
index 3ee7c923..00000000
--- a/csm_web/frontend/static/frontend/css/student_dropper.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.studentDropper {
-	margin: auto 0;
-	/* align-items: center; */
-	height: 90%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-}
-
-.studentDropperHeadItem {
-	color: #646464;
-	font-weight: 600;
-	font-size: 30px;
-	text-align: center;
-}
-
-.studentDropperCheckboxLabel {
-	color: #646464;
-	font-size: 18px;
-	padding-top: 20px;
-	margin-left: 8px;
-}
-
-.studentDropperSubmitWrapper {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-}
-
-.studentDropperSubmit {
-	background-color: var(--csm-danger);
-	border: none;
-	color: white;
-	border-radius: 8px;
-	margin: 10px;
-	padding: 12px 16px;
-}
-
-.studentDropperSubmit:hover {
-	background-color: var(--csm-danger-darkened);
-}
-
-.studentDropperSubmit:disabled {
-	background-color: var(--csm-neutral);
-}
diff --git a/csm_web/frontend/static/frontend/css/style.css b/csm_web/frontend/static/frontend/css/style.css
deleted file mode 100644
index 5a557de3..00000000
--- a/csm_web/frontend/static/frontend/css/style.css
+++ /dev/null
@@ -1,1977 +0,0 @@
-@import url("./resource_aggregation.css");
-@import url("./student_dropper.css");
-@import url("./enrollment_matcher.css");
-@import url("./fontawesome-styles.css");
-@import url("./calendar.css");
-@import url("./searchbar.css");
-@import url("./tooltip.css");
-@import url("./policies.css");
-@import url("./spacetime_delete.css");
-@import url("./whitelist_modal.css");
-@import url("./word-of-the-day.css");
-@import url("./course-settings.css");
-
-html,
-body {
-	height: 100%;
-	width: 100%;
-	font-family: "Montserrat", sans-serif;
-}
-
-body {
-	max-width: 100%;
-	margin: 8px; /* Usually set by browser stylesheet, but we standardize it here to account for different browsers */
-	overflow-x: hidden;
-}
-
-button:hover {
-	cursor: pointer;
-}
-
-button {
-	/* use parent font instead of default button font */
-	font-family: inherit;
-}
-
-:root {
-	/* --csm-green: rgb(124, 233, 162); */
-	--csm-green: #9ae0b3;
-	--csm-green-darkened: #75b38a;
-	--csm-green-lightened: #d7ffe5;
-	--csm-theme-csm61a: var(--csm-green);
-	--csm-theme-csm61b: #63c5ff;
-	--csm-theme-csm61c: #797c99;
-	--csm-theme-csm70: #ff7070;
-	--csm-theme-csm88: #e46495;
-	--csm-theme-csm16a: #707eff;
-	--csm-theme-csm16b: #ffe070;
-	--csm-mentor: var(--csm-green);
-	--csm-coordinator: #6517b3;
-	--csm-student: #ffab2e;
-	--csm-danger: #ff7272;
-	--csm-danger-darkened: #eb6060;
-	--csm-neutral: #c0c0c0;
-	--csm-neutral-darkened: #b6b6b6;
-	--csm-resources: #ededed;
-	--csm-link-blue: #039be5;
-}
-
-/* Header */
-
-header {
-	box-shadow: 0px 4px 4px rgba(188, 188, 188, 0.25);
-	padding: 30px 2rem;
-	display: flex;
-	margin: -8px -8px 0 -8px;
-}
-
-#logo {
-	height: 3em;
-	margin-right: 20px;
-}
-
-.site-title {
-	font-weight: 600;
-	font-size: 23px;
-	line-height: 18px;
-}
-
-.site-title-link {
-	text-decoration: none;
-	margin-right: 25px;
-	color: #bbbbbb;
-}
-
-.site-title-link.is-active {
-	color: #808080;
-}
-
-.site-subtitle-link {
-	color: #bbbbbb;
-	text-decoration: none;
-	margin: auto 0 auto auto;
-}
-
-.site-subtitle-link.is-active {
-	color: #808080;
-}
-
-#user-profile-pic {
-	border: 2px solid #ffffff;
-	border-radius: 26px;
-	box-sizing: border-box;
-	box-shadow: 0px 4px 4px rgba(136, 136, 136, 0.25);
-}
-
-#logout-btn {
-	margin: auto 5px auto 30px;
-}
-
-#logout-btn * {
-	fill: #808080;
-	vertical-align: middle;
-}
-
-#logout-btn:hover * {
-	fill: #5e5e5e;
-}
-
-/* smaller screens */
-@media screen and (max-width: 500px) {
-	header {
-		flex-direction: column;
-		align-items: center;
-	}
-
-	#logo {
-		margin-right: 0;
-		margin-bottom: 10px;
-	}
-
-	.site-title {
-		margin: 10px 0;
-	}
-
-	.site-title-link {
-		margin-right: 0;
-	}
-
-	.site-subtitle-link {
-		margin: 0px auto 0px auto;
-	}
-
-	#logout-btn {
-		margin: 0px auto auto auto;
-	}
-}
-
-.modal {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 600px;
-	max-width: 90vw;
-	height: 400px;
-	max-height: 90vh;
-	z-index: 1000;
-	background-color: white;
-	border-radius: 20px;
-}
-
-.modal-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	max-width: unset !important;
-	z-index: 999;
-	background: rgba(0, 0, 0, 0.6);
-}
-
-.modal-contents {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: calc(100% - 40px);
-	height: calc(100% - 40px);
-	padding: 20px;
-	overflow: auto;
-}
-
-.modal-contents svg {
-	display: block;
-	margin: auto;
-}
-
-.modal-contents h3 {
-	text-align: center;
-	color: #808080;
-	font-size: 2em;
-}
-
-.modal-contents h4 {
-	text-align: center;
-	margin: auto;
-	max-width: 75%;
-}
-
-.modal-close {
-	all: unset;
-}
-
-.modal-close-x {
-	position: sticky;
-	display: flex;
-	top: -10px;
-	margin-top: -10px;
-}
-
-.modal-close-x > button {
-	background: none;
-	border: none;
-	cursor: pointer;
-	margin-left: auto;
-}
-
-.modal-close-x > button > span {
-	display: inline-block;
-	color: #575757;
-}
-
-.modal-btn {
-	position: absolute;
-	display: block;
-	color: white;
-	margin: auto;
-	width: 80px;
-	font-size: 1.25em;
-	padding: 10px 20px;
-	background-color: #007bff;
-	border-radius: 10px;
-	cursor: pointer;
-	left: 0;
-	right: 0;
-	bottom: 20px;
-}
-
-.modal-btn:hover {
-	background-color: #0069d9;
-}
-
-/* Home page */
-
-.inline-plus-sign {
-	font-weight: 600;
-	font-size: 30px;
-	vertical-align: sub;
-}
-
-#home-courses-heading {
-	display: flex;
-	align-items: center;
-	width: 50%;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	max-width: 300px;
-	margin-bottom: 20px;
-}
-
-.csm-btn {
-	background-color: var(--csm-green);
-	border-radius: 20px;
-	color: white;
-	padding: 3px 10px;
-	text-decoration: none;
-	/* Need to manually respecify this on <buttons> for some strange reason */
-	font-family: "Montserrat", sans-serif;
-}
-
-.csm-btn:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-.csm-btn:focus {
-	outline: 0;
-}
-
-.csm-btn.disabled,
-.csm-btn.disabled:hover,
-.csm-btn.disabled:focus {
-	background-color: var(--csm-neutral-darkened);
-	pointer-events: none;
-}
-
-.course-card {
-	position: relative;
-	width: 320px;
-	min-width: 320px;
-	border-radius: 16px;
-	box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.15);
-	min-height: 180px;
-	border-top: 30px solid;
-	border-top-color: red;
-}
-
-.course-cards-container > .course-card,
-.course-card-link {
-	margin: 0 75px 50px 0;
-}
-
-.course-card-contents {
-	padding: 30px;
-	min-height: 120px;
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: column;
-}
-
-.course-card-contents > *:nth-last-child(2) {
-	/* Ensures there is space between the relation label and whatever precedes it */
-	margin-bottom: 20px;
-}
-
-.course-card-name {
-	margin: 0;
-	font-size: 24px;
-	font-weight: bold;
-}
-
-.course-card-section-time:not(:last-of-type)::after {
-	display: block;
-	content: "&";
-	font-size: 1.2em;
-}
-
-.course-card-title {
-	margin: 0 0 20px;
-	font-size: 14px;
-	color: #bfbfbf;
-}
-
-.course-cards-container {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	--csm-link-hover: rgba(196, 196, 196, 0.28);
-}
-
-.relation-label {
-	text-transform: capitalize;
-	padding: 8px 16px;
-	color: white;
-	min-width: 60px;
-	max-width: fit-content;
-	max-width: -moz-fit-content;
-	text-align: center;
-	border-radius: 20px;
-	margin-top: auto;
-}
-
-.course-card-link {
-	color: unset;
-	text-decoration: none;
-	cursor: pointer;
-}
-
-.course-card-link:hover > .course-card {
-	background-color: var(--csm-link-hover);
-}
-
-.section-link {
-	color: unset;
-	text-decoration: none;
-	cursor: pointer;
-	padding: 10px;
-	font-size: 14px;
-	border-radius: 9px;
-}
-
-.section-link:hover {
-	background-color: var(--csm-link-hover);
-}
-
-/* Course menu */
-
-#course-menu {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, 10em);
-	max-width: calc((2 * 10em) + 10px);
-	grid-gap: 10px;
-	margin: auto;
-	text-align: center;
-	justify-content: center;
-	font-size: 2em;
-}
-
-#course-menu-loading-spinner {
-	margin: auto;
-	height: 50px;
-	width: 50px;
-}
-
-.course-menu-content {
-	display: flex;
-	flex-direction: column;
-}
-
-.course-menu-sidebar {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.course-menu-sidebar-tab {
-	background-color: var(--csm-neutral);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	font-size: 1rem;
-	margin: 8px;
-	padding: 12px;
-}
-
-.course-menu-sidebar-tab.active {
-	background-color: var(--csm-green);
-}
-
-.course-menu-sidebar-tab.active:hover {
-	background-color: var(--csm-green);
-}
-
-.course-menu-sidebar-tab:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.enrollment-container {
-	display: grid;
-	justify-content: center;
-}
-
-.enrollment-row {
-	display: contents;
-	font-size: 1.1em;
-}
-
-.enrollment-course {
-	grid-column: 1;
-	padding: 8px;
-	border-right: 2px solid var(--csm-neutral);
-}
-
-.enrollment-time {
-	grid-column: 2;
-	padding: 8px;
-}
-
-/* Section enrollment */
-
-.create-section-btn {
-	font-size: 16px;
-	border: none;
-	cursor: pointer;
-	margin: 0 auto !important;
-	display: block;
-}
-
-.section-card {
-	width: 320px;
-	overflow-x: hidden;
-	box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.15);
-	border-radius: 20px;
-	margin: 0 auto 50px;
-	display: flex;
-	flex-direction: column;
-}
-
-.section-card.full {
-	background-color: #eaeaea;
-}
-
-.section-card-contents {
-	position: relative;
-	padding: 10px 20px 0;
-	flex: 1;
-}
-
-.section-card-contents p {
-	color: #727272;
-}
-
-.section-card-contents svg,
-.section-card-icon-placeholder {
-	vertical-align: bottom;
-	margin-right: 5px;
-}
-
-.section-card-additional-times {
-	display: block;
-}
-
-.section-card-icon-placeholder {
-	display: inline-block;
-}
-
-.section-card-footer {
-	display: block;
-	font-size: 1.3em;
-	border-radius: 0px;
-	text-align: center;
-	cursor: pointer;
-	text-transform: uppercase;
-}
-
-/* Specify div because it's an <a> element for coordinators which links to section management page */
-.section-card.full div.section-card-footer {
-	background-color: inherit;
-	color: transparent;
-	user-select: none;
-	cursor: inherit;
-}
-
-.section-card-description {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	background-color: var(--csm-student);
-	color: white;
-	border-radius: 8px;
-	min-width: 50px;
-	text-align: center;
-	font-size: 12px;
-	padding: 2px 5px;
-}
-
-#day-selector {
-	--day-btn-size: 70px;
-	display: grid;
-	grid-template-columns: repeat(auto-fit, var(--day-btn-size));
-	grid-auto-rows: max-content;
-	grid-gap: 10px;
-	justify-content: center;
-}
-
-.export-data-btn {
-	font-size: 18px;
-	border: none;
-	cursor: pointer;
-	display: block;
-	padding: 8px;
-	margin-left: 5px;
-}
-
-.data-export-modal {
-	height: 90%;
-	display: flex;
-	flex-direction: column;
-}
-
-.data-export-modal-header {
-	display: flex;
-	flex: 0.2 0.2 0;
-	justify-content: center;
-	align-items: center;
-}
-
-.data-export-modal-selection {
-	flex: 1 1 55%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.data-export-modal-download {
-	flex: 1 1 30%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.data-export-checkbox-grid {
-	display: grid;
-	width: 100%;
-	height: 50%;
-	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: repeat(auto-fit, 30px);
-	gap: 1%;
-	align-items: center;
-	justify-items: center;
-}
-
-.data-export-checkbox {
-	justify-content: center;
-	width: 40%;
-	align-items: center;
-}
-
-.edit-whitelist-btn {
-	font-size: 1rem;
-	border: none;
-	cursor: pointer;
-	display: block;
-	padding: 8px;
-	margin-left: 5px;
-}
-
-#edit-whitelist-icon {
-	margin: 0 4px;
-}
-
-#course-section-controls {
-	flex-grow: 0.5;
-	min-width: 50%;
-	top: 0;
-	align-self: flex-start;
-}
-
-#course-section-controls > * {
-	margin: 0 0 10px;
-}
-
-#course-coord-buttons {
-	display: flex;
-	width: max-content;
-	margin: 0 auto;
-}
-
-#course-enrollment-open-status {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-
-	margin: 20px 0;
-	color: #6d6d6d;
-}
-
-.course-title {
-	color: #6d6d6d;
-	font-size: 2.5em;
-	font-weight: 400;
-	text-align: center;
-}
-
-#show-unavailable-toggle {
-	display: block;
-	text-align: center;
-	color: #727272;
-}
-
-#show-unavailable-toggle > input {
-	margin-right: 5px;
-	vertical-align: top;
-}
-
-.day-btn {
-	height: var(--day-btn-size);
-	width: var(--day-btn-size);
-	border-radius: calc(var(--day-btn-size) / 2);
-	border: 2px solid var(--csm-green);
-	background-color: white;
-	color: #717171;
-	font-size: 1.3em;
-	cursor: pointer;
-	text-align: center;
-	outline: none;
-}
-
-.day-btn:hover {
-	background-color: #fafafa;
-}
-
-.day-btn.active {
-	background-color: var(--csm-green);
-	color: white;
-}
-
-#course-section-list {
-	width: 75vw;
-	margin: 0 auto;
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-	grid-gap: 10px;
-}
-
-#course-section-list-empty {
-	color: #646464;
-	text-align: center;
-}
-
-#course-section-selector .modal h3 {
-	margin: 0.5em auto;
-}
-
-#course-section-selector > div {
-	padding-top: 40px;
-}
-
-#create-section-form {
-	padding: unset;
-}
-
-#create-section-form #non-spacetime-fields,
-#create-section-form .spacetime-fields {
-	display: grid;
-	padding-left: 0;
-	grid-template-columns: max-content max-content;
-	grid-template-areas:
-		". ."
-		"last last";
-	grid-gap: 20px;
-}
-
-#create-section-form-contents > .spacetime-fields-header {
-	margin: 0 0 10px 0;
-	color: #646464;
-	min-width: 100%;
-	border-bottom: 2px solid #646464;
-}
-
-#create-section-form-contents {
-	margin: auto;
-	max-width: max-content;
-}
-
-#create-section-form-contents > * {
-	margin-bottom: 20px;
-}
-
-#create-section-form label[name="description"],
-#create-section-form label[name="time"] {
-	grid-area: last;
-}
-
-#create-section-form input[type="submit"] {
-	grid-area: submit;
-}
-
-#create-section-form #add-occurence-btn {
-	border: none;
-	background-color: var(--csm-neutral);
-	cursor: pointer;
-	border-radius: 4px;
-	padding: 11.5px 10px;
-	align-self: end;
-}
-
-/* login */
-
-#login-container {
-	width: 100%;
-	height: 100%;
-	margin: auto;
-	text-align: center;
-}
-
-#login-card {
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	text-align: center;
-	position: relative;
-	box-sizing: border-box;
-	transition: box-shadow 0.1s ease-in-out;
-	background: #fff;
-	color: #666;
-	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-	display: inline-block;
-	width: 80%;
-	max-width: 25em;
-	height: 24em;
-	margin-top: 10%;
-	padding: 3em 1em 3em 1em;
-}
-
-#login-btn {
-	overflow: visible;
-	font: inherit;
-	display: inline-block;
-	box-sizing: border-box;
-	padding: 0 30px;
-	vertical-align: middle;
-	font-size: 0.875rem;
-	line-height: 38px;
-	text-align: center;
-	text-decoration: none;
-	text-transform: uppercase;
-	transition: 0.1s ease-in-out;
-	transition-property: color, background-color, border-color;
-	background-color: #1e87f0;
-	color: #fff;
-	border: 1px solid transparent;
-	cursor: pointer;
-	width: 35%;
-	min-width: 10em;
-	margin: auto;
-	margin-top: 4em;
-	box-shadow: 0px 4px 4px #0002;
-}
-
-#login-subtitle {
-	display: block;
-	margin: auto;
-	margin-top: 0.5em;
-	font-weight: 400;
-	font-size: 0.75em;
-	text-align: center;
-	opacity: 0.5;
-}
-
-#login-logo {
-	display: block;
-	width: 20em;
-	max-width: 75%;
-	margin: auto;
-}
-
-.page-title {
-	font-style: normal;
-	font-weight: bold;
-	font-size: 24px;
-	color: #646464;
-}
-
-.center-title {
-	text-align: center;
-}
-
-main {
-	padding: 2rem;
-	margin-left: -8px;
-}
-
-/* Section details */
-
-.section-detail-header .relation-label {
-	border-radius: 4px;
-	padding: 5px 14px;
-	font-size: 14px;
-	margin-bottom: 40px;
-}
-
-.section-detail-header-title {
-	display: flex;
-	flex-wrap: wrap;
-	margin-bottom: 20px;
-}
-
-.section-detail-header-title > h3 {
-	font-size: 30px;
-	margin: 0 20px 0 0;
-	line-height: 30px;
-}
-
-.section-detail-header-title > h4 {
-	color: #bfbfbf;
-	font-size: 25px;
-	font-weight: normal;
-	margin: 0;
-}
-
-.section-detail-page-title {
-	color: #646464;
-	font-size: 30px;
-	font-weight: bold;
-	margin: 0 0 45px;
-}
-
-.section-info-cards-container {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.section-info-cards-right {
-	flex: 1;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.section-detail-info-card {
-	margin: 0 50px 50px 0;
-}
-
-.section-detail-info-card h4 {
-	color: #646464;
-	font-size: 25px;
-	font-weight: bold;
-	margin: 0 0 20px;
-}
-
-.section-detail-info-card.drop-section {
-	flex-basis: 100%;
-	display: flex;
-	text-align: center;
-}
-
-.section-detail-info-card-contents .divider {
-	margin: 40px -40px;
-	border-top: inherit;
-}
-
-.section-detail-info-card-contents.drop-section {
-	border-color: #ffadad;
-}
-
-.section-detail-info-card-contents.drop-section .danger-btn {
-	display: flex;
-	align-items: center;
-}
-
-.coordinator-add-student-modal {
-	overflow: hidden;
-	height: 75vh;
-	width: 65vw;
-}
-
-.coordinator-add-student-modal .modal-contents {
-	overflow: hidden;
-}
-
-.coordinator-add-student-modal-contents {
-	height: calc(75vh - 89px);
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
-	padding-bottom: 20px;
-}
-
-@media screen and (max-width: 800px) {
-	.coordinator-add-student-modal {
-		width: 85vw;
-	}
-}
-@media screen and (max-width: 1000px) {
-	.coordinator-add-student-modal {
-		width: 75vw;
-	}
-}
-
-.coordinator-email-content {
-	width: 95%;
-	height: 75%;
-	max-height: 75%;
-	overflow: auto;
-	margin: auto;
-}
-
-.coordinator-email-input-list {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
-.coordinator-email-input-item {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	margin: 5px 0;
-}
-
-.coordinator-email-input-item .inline-plus-sign,
-.coordinator-email-response-item .inline-plus-sign {
-	color: #777;
-	cursor: pointer;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	line-height: 1.1rem;
-}
-
-.coordinator-email-input-item .inline-plus-sign:hover,
-.coordinator-email-response-item .inline-plus-sign:hover {
-	color: #aaa;
-}
-
-.coordinator-email-response-item .inline-plus-sign {
-	margin-right: 3px;
-}
-
-.coordinator-email-input {
-	max-width: 100%;
-	width: 250px;
-	margin-left: 5px;
-}
-
-.coordinator-email-input-buttons {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
-.coordinator-email-input-buttons-top {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-}
-
-.coordinator-email-input-add,
-.coordinator-email-modal-button {
-	background-color: var(--csm-neutral);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	display: flex;
-	flex-direction: row;
-	font-size: 16px;
-	font-weight: 600;
-	justify-content: space-evenly;
-	margin: 3px auto 3px;
-	padding: 8px 20px;
-}
-
-.coordinator-email-modal-button {
-	font-weight: normal;
-	background-color: var(--csm-neutral);
-	padding: 8px;
-	font-size: 0.95rem;
-	margin: auto;
-}
-
-.coordinator-email-input-add:hover,
-.coordinator-email-modal-button:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.coordinator-email-input-submit {
-	background-color: var(--csm-green);
-	border: none;
-	border-radius: 8px;
-	color: white;
-	display: flex;
-	flex-direction: row;
-	font-size: 16px;
-	font-weight: 600;
-	justify-content: space-evenly;
-	margin: 10px auto 10px;
-	padding: 10px 20px;
-}
-
-.coordinator-email-input-submit:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-#coordinator-add-student-form input:not(.lock-validation):invalid {
-	background-color: #ffdddd;
-}
-
-.coordinator-email-response-list {
-	display: flex;
-	flex-direction: column;
-	text-align: left;
-	margin: auto;
-	width: fit-content;
-	width: -moz-fit-content;
-}
-
-.coordinator-email-response-item {
-	display: contents;
-}
-
-.coordinator-email-response-email {
-	margin-left: 3px;
-}
-
-.coordinator-email-response-email-status {
-	display: flex;
-	flex-direction: row;
-	justify-content: left;
-	align-items: center;
-}
-
-.coordinator-email-response-form-info {
-	color: red;
-	font-size: 0.9rem;
-	margin-left: 20px;
-	margin-bottom: 2px;
-}
-
-.coordinator-email-response-form {
-	display: flex;
-	flex-direction: column;
-	margin-top: 5px;
-	margin-left: 40px;
-}
-
-.coordinator-email-response-form label {
-	font-size: 0.9rem;
-	margin: 5px;
-}
-
-.coordinator-email-response-status {
-	margin-left: 5px;
-}
-
-.coordinator-email-response-status-ok,
-.coordinator-email-response-status-conflict,
-.coordinator-email-response-status-banned,
-.coordinator-email-response-capacity {
-	display: flex;
-	align-items: center;
-	justify-content: left;
-}
-
-.coordinator-email-response-status-ok {
-	color: green;
-}
-
-.coordinator-email-response-status-ok-icon {
-	width: 1.25rem;
-	height: 1.25rem;
-	padding-right: 6px;
-	margin: 0 !important;
-}
-
-.coordinator-email-response-status-conflict-icon {
-	width: 1.5rem;
-	height: 1.5rem;
-	padding-right: 6px;
-	fill: red;
-	margin: 0 !important;
-}
-
-.coordinator-email-response-status-conflict,
-.coordinator-email-response-status-banned,
-.coordinator-email-response-capacity {
-	color: red;
-}
-
-.coordinator-email-response-container {
-	display: grid;
-	grid-template-columns: 3fr 2fr;
-	grid-row-gap: 12px;
-	margin: 10px 0;
-}
-
-.coordinator-email-response-capacity-container {
-	margin: 10px 0;
-}
-
-.coordinator-email-response-hr {
-	border: 1px solid #ccc;
-	margin-top: -2px;
-	margin-bottom: 10px;
-}
-
-.coordinator-email-response-head {
-	display: contents;
-}
-
-.coordinator-email-response-head-left {
-	grid-column: 1;
-}
-
-.coordinator-email-response-head-right {
-	grid-column: 2;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	column-gap: 5px;
-	font-size: 0.9rem;
-	text-align: center;
-}
-
-.coordinator-email-reaponse-head-right-item {
-	flex: 1;
-}
-
-.coordinator-email-response-item-container {
-	display: contents;
-}
-
-.coordinator-email-response-item-left {
-	grid-column: 1;
-	margin-left: 15px;
-}
-
-.coordinator-email-response-item-left-email {
-	padding-bottom: 6px;
-}
-
-.coordinator-email-response-item-left-detail {
-	margin-left: 25px;
-	font-size: 0.9rem;
-	color: #555;
-}
-
-.coordinator-email-response-item-right {
-	grid-column: 2;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	row-gap: 3px;
-}
-
-.coordinator-email-response-item-right > * {
-	flex: 1;
-}
-
-.internal-error-title {
-	color: var(--csm-danger) !important;
-}
-
-.internal-error-body {
-	font-size: 1.5rem;
-	text-align: center;
-	width: 80%;
-}
-
-.danger-btn {
-	display: block;
-	border: none;
-	margin: auto;
-	cursor: pointer;
-	background-color: var(--csm-danger);
-	border-radius: 6px;
-	color: white;
-	font-size: 14px;
-	padding: 10px 27px;
-}
-
-.danger-btn:hover {
-	background-color: var(--csm-danger-darkened);
-}
-
-.override-label {
-	background-color: #ffd874;
-	color: white;
-	font-size: 15px;
-	width: fit-content;
-	width: -moz-fit-content;
-	padding: 3px 5px;
-	border-radius: 4px;
-	margin: 10px 0;
-}
-
-.section-detail-info-card-contents {
-	position: relative;
-	min-width: 12em;
-}
-
-.section-detail-info-card-contents,
-.standalone-table,
-#mentor-attendance {
-	border: 2px solid #e7e7e7;
-	box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25);
-	border-radius: 20px;
-	padding: 40px;
-}
-
-.section-detail-info-card-contents h5 {
-	font-size: 25px;
-	color: #727070;
-	margin: 0 auto 0.5em auto;
-}
-
-.section-detail-info-card-contents .location-link {
-	font-size: 25px;
-	margin: 0 auto 0.5em auto;
-}
-
-.section-detail-info-card-contents.mentor {
-	text-align: center;
-}
-
-.section-detail-info-card-contents a {
-	word-wrap: break-word;
-}
-
-.standalone-table {
-	width: 700px;
-	max-width: 90vw;
-	padding: 20px;
-	border-spacing: 0;
-}
-
-table thead {
-	text-align: left;
-}
-
-table th {
-	color: #aeaeae;
-	font-size: 20px;
-	padding: 0 30px;
-}
-
-table tbody tr > td {
-	border-bottom: 1px solid #e7e7e7;
-	padding: 30px;
-}
-
-table tbody tr:last-child > td {
-	border-bottom: none;
-}
-
-#attendance-table td.status > div {
-	text-align: center;
-	color: white;
-	padding: 5px;
-	max-width: 200px;
-	border-radius: 6px;
-}
-
-.mentor-attendance-page > div {
-	margin-bottom: 40px;
-}
-
-#section-detail-sidebar {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: column;
-	width: fit-content;
-	width: -moz-fit-content;
-}
-
-#section-detail-sidebar a {
-	font-size: 18px;
-	color: #4b4b4b;
-	margin: 0 100px 20px 0;
-	text-decoration: none;
-}
-
-#section-detail-sidebar a.active {
-	color: var(--csm-green);
-}
-
-#section-detail-body * {
-	max-width: 90vw;
-}
-
-.modal.drop-confirmation {
-	width: 500px;
-	height: 270px;
-	text-align: center;
-}
-
-.modal.drop-confirmation h5 {
-	font-size: 25px;
-	color: #727070;
-	margin: 30px auto 0.5rem;
-}
-
-.modal.drop-confirmation p {
-	font-size: 14px;
-	color: #bfbfbf;
-	margin-top: 0;
-}
-
-#section-detail-body {
-	display: flex;
-	--csm-attendance-present: var(--csm-green);
-	--csm-attendance-excused: #797979;
-	--csm-attendance-unexcused: var(--csm-danger);
-}
-
-@media screen and (max-width: 1100px) {
-	/* only wrap for medium/small screens */
-	#section-detail-body {
-		flex-wrap: wrap;
-	}
-}
-
-#students-table .inline-plus-sign {
-	display: inline-block;
-	color: var(--csm-danger);
-	cursor: pointer;
-	position: relative;
-}
-
-.student-dropper {
-	display: inline-block;
-	position: relative;
-	top: 1px;
-}
-
-.student-dropper.ban-prompt-visible + .student-info {
-	color: #cecece;
-	text-decoration: line-through;
-}
-
-.should-ban-prompt {
-	font-size: 0.8em;
-	width: 10em;
-	text-align: center;
-	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
-	background-color: white;
-	padding: 10px;
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-	bottom: 2rem;
-	border-radius: 8px;
-}
-
-.should-ban-prompt::before {
-	--arrow-size: 8px;
-	content: "";
-	display: block;
-	width: 0;
-	height: 0;
-	position: absolute;
-	border-left: var(--arrow-size) solid transparent;
-	border-right: var(--arrow-size) solid transparent;
-	border-top: var(--arrow-size) solid white;
-	left: 0;
-	right: 0;
-	margin: 0 auto;
-	bottom: calc(-1 * var(--arrow-size));
-}
-
-.should-ban-prompt .ban-cancel {
-	position: absolute !important;
-	top: -5px;
-	right: 3px;
-	color: #dedede !important;
-	font-size: 1.5rem;
-}
-
-.should-ban-prompt .btn-group {
-	display: flex;
-	justify-content: space-evenly;
-	margin-top: 0.3em;
-}
-
-.should-ban-prompt .btn-group button {
-	border: unset;
-	border-radius: 5px;
-	cursor: pointer;
-}
-
-.should-ban-prompt .btn-group button.yes {
-	background-color: var(--csm-danger);
-}
-
-.should-ban-prompt .btn-group button.yes:hover {
-	background-color: var(--csm-danger-darkened);
-}
-
-.should-ban-prompt .btn-group button.no {
-	background-color: var(--csm-neutral);
-}
-
-.should-ban-prompt .btn-group button.no:hover {
-	background-color: #aeaeae;
-}
-
-.newStudentErrorContainer {
-	display: flex;
-	flex-direction: column;
-	color: red;
-	font-size: 0.8rem;
-}
-
-#students-table .csm-form {
-	display: flex;
-	padding-left: 0;
-}
-
-#students-table .csm-form input[type="submit"] {
-	color: var(--csm-green);
-	transform: none;
-	margin: auto;
-	background-color: inherit;
-	padding: 0;
-	position: relative;
-	bottom: 3px;
-	top: unset;
-	display: inline-block;
-}
-#students-table .csm-form input[type="submit"]:hover {
-	color: var(--csm-green-darkened);
-}
-
-#students-table .csm-form input {
-	margin: auto;
-}
-
-#students-table .inline-plus-sign:hover {
-	color: var(--csm-danger-darkened);
-}
-
-#students-table tbody td {
-	padding: 20px 30px;
-}
-
-#copy-student-emails {
-	cursor: pointer;
-}
-
-#copy-student-emails:hover {
-	color: #9c9c9c;
-}
-
-#copy-student-emails-success {
-	position: absolute;
-}
-
-.info-card-edit-btn {
-	background-color: inherit;
-	color: #b3b3b3;
-	font-size: 13px;
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	border: none;
-	cursor: pointer;
-}
-
-.override-info-card-edit-btn {
-	background-color: inherit;
-	color: #b3b3b3;
-	font-size: 13px;
-	position: absolute;
-	top: 170px;
-	right: 10px;
-	border: none;
-	cursor: pointer;
-}
-
-.delete-spacetime-btn {
-	background-color: inherit;
-	color: #b3b3b3;
-	font-size: 13px;
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	border: none;
-	cursor: pointer;
-}
-
-.delete-override-btn {
-	background-color: inherit;
-	color: #b3b3b3;
-	font-size: 13px;
-	position: absolute;
-	top: 170px;
-	left: 10px;
-	border: none;
-	cursor: pointer;
-}
-
-.info-card-edit-btn:hover {
-	color: #a1a1a1;
-}
-
-.override-info-card-edit-btn:hover {
-	color: #a1a1a1;
-}
-
-.delete-spacetime-btn:hover {
-	color: #a1a1a1;
-}
-
-.delete-override-btn:hover {
-	color: #a1a1a1;
-}
-
-.meta-field {
-	font-weight: 600;
-	color: #727070;
-}
-
-.spacetime-edit-modal {
-	height: 450px;
-}
-
-.csm-form {
-	padding-left: 40px;
-}
-
-.csm-form #submit-and-status > * {
-	display: block;
-	margin: auto;
-}
-
-.csm-form h4 {
-	text-align: left;
-}
-
-.csm-form input,
-.csm-form select {
-	background-color: #f5f5f5;
-	padding: 10px 20px;
-	border: none;
-	border-radius: 4px;
-	display: block;
-	margin-top: 7px;
-}
-
-#spacetime-edit-form .mode-selection .mode-selection-options {
-	display: flex;
-	margin-top: 7px;
-}
-
-#spacetime-edit-form .mode-selection .mode-selection-options label:first-child {
-	margin-right: 1.5em;
-}
-
-#spacetime-edit-form .mode-selection .mode-selection-options label {
-	color: black;
-	font-weight: normal;
-	font-size: small;
-}
-
-#spacetime-edit-form #date-of-change-fields input:not([type="radio"]) {
-	display: inline;
-}
-
-#spacetime-edit-form input[type="radio"] {
-	margin: 0 10px 0 0;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	padding: 0;
-	width: 16px;
-	height: 16px;
-	display: inline-block;
-	border: 2px solid var(--csm-green);
-	border-radius: 8px;
-	vertical-align: middle;
-}
-
-#spacetime-edit-form input[type="radio"][value="true"] {
-	position: relative;
-	bottom: 1px;
-}
-
-#spacetime-edit-form input[type="radio"]:checked {
-	background-color: var(--csm-green);
-}
-
-.csm-form > * {
-	margin-bottom: 20px;
-}
-
-.csm-form label {
-	display: block;
-	color: #646464;
-	font-weight: 600;
-}
-
-#spacetime-edit-form #day-time-fields {
-	display: flex;
-}
-
-#spacetime-edit-form #day-time-fields > * {
-	margin-right: 10px;
-}
-
-#spacetime-edit-form #day-time-fields > *:last-child {
-	margin-right: 0;
-}
-
-#spacetime-edit-form #date-of-change-fields label:not(:first-child) {
-	color: black;
-	font-weight: normal;
-	font-size: small;
-	margin-top: 7px;
-}
-
-.csm-form select {
-	background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="gray" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>');
-	background-repeat: no-repeat, repeat;
-	background-position: right 0.7em top 50%, 0 0;
-	background-size: 1em auto, 100%;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	width: 150px;
-	font-size: small;
-}
-
-.csm-form select:disabled,
-.csm-form input:disabled {
-	cursor: not-allowed;
-	background-color: #fafafa;
-}
-
-.csm-form input[type="submit"] {
-	margin: auto;
-	background-color: var(--csm-green);
-	color: white;
-	cursor: pointer;
-	padding: 10px 40px;
-}
-
-.csm-form input[type="submit"]:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-#mentor-attendance {
-	max-width: 500px;
-	padding-top: 0;
-	padding-bottom: 30px;
-	overflow: hidden;
-	border-top: none;
-}
-
-#attendance-date-tabs-container {
-	display: flex;
-	margin: 0 -40px;
-	overflow-x: scroll;
-	overflow-y: hidden;
-}
-
-#attendance-date-tabs-container > div {
-	background-color: #f0f0f0;
-	border: 1px solid #e9e9e9;
-	border-radius: 10px 10px 0px 0px;
-	padding: 15px 30px;
-	color: #5e5e5e;
-	font-size: 15px;
-	cursor: pointer;
-}
-#attendance-date-tabs-container > div:hover {
-	background-color: #dedede;
-}
-
-#attendance-date-tabs-container > div.active {
-	background-color: white;
-	border-bottom-color: white;
-}
-
-#mentor-attendance-table {
-	width: 100%;
-	--csm-attendance-: #f4f4f4;
-}
-
-#mentor-attendance-table select {
-	max-width: 200px;
-	width: 200px;
-	text-align-last: center;
-	color: white;
-	padding: 6px;
-	border-radius: 6px;
-	border: none;
-	background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>');
-	background-repeat: no-repeat, repeat;
-	background-position: right 0.7em top 50%, 0 0;
-	background-size: 1em auto, 100%;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-}
-
-/* Neccessary for options to be legible on Windows */
-#mentor-attendance-table select > option {
-	background-color: white;
-	color: black;
-}
-
-#mentor-attendance-controls {
-	margin-top: 35px;
-	max-width: 780px;
-	display: flex;
-	flex-direction: row-reverse;
-}
-
-#mentor-attendance-controls > * {
-	margin: auto 0 auto 15px;
-}
-
-#mentor-attendance-controls > *:first-child {
-	margin-right: 0;
-}
-
-.save-attendance-btn {
-	font-size: 14px;
-	border: none;
-	border-radius: 6px;
-	padding: 10px 20px;
-	cursor: pointer;
-}
-
-.mark-all-present-btn {
-	background-color: inherit;
-	border: none;
-	outline: none;
-	color: var(--csm-green);
-	font-size: 14px;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.mark-all-present-btn:hover {
-	color: var(--csm-green-darkened);
-}
-
-.mentor-attendance-page {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-}
-
-/* Loading Spinner */
-
-.spinner-centered {
-	margin: auto;
-	height: 50px;
-	width: 50px;
-}
-
-.sk-fading-circle {
-	width: 35px;
-	height: 35px;
-	position: relative;
-}
-
-.sk-fading-circle .sk-circle {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-
-.sk-fading-circle .sk-circle:before {
-	content: "";
-	display: block;
-	margin: 0 auto;
-	width: 15%;
-	height: 15%;
-	background-color: var(--csm-green);
-	border-radius: 100%;
-	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-	animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
-}
-.sk-fading-circle .sk-circle2 {
-	-webkit-transform: rotate(30deg);
-	-ms-transform: rotate(30deg);
-	transform: rotate(30deg);
-}
-.sk-fading-circle .sk-circle3 {
-	-webkit-transform: rotate(60deg);
-	-ms-transform: rotate(60deg);
-	transform: rotate(60deg);
-}
-.sk-fading-circle .sk-circle4 {
-	-webkit-transform: rotate(90deg);
-	-ms-transform: rotate(90deg);
-	transform: rotate(90deg);
-}
-.sk-fading-circle .sk-circle5 {
-	-webkit-transform: rotate(120deg);
-	-ms-transform: rotate(120deg);
-	transform: rotate(120deg);
-}
-.sk-fading-circle .sk-circle6 {
-	-webkit-transform: rotate(150deg);
-	-ms-transform: rotate(150deg);
-	transform: rotate(150deg);
-}
-.sk-fading-circle .sk-circle7 {
-	-webkit-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
-}
-.sk-fading-circle .sk-circle8 {
-	-webkit-transform: rotate(210deg);
-	-ms-transform: rotate(210deg);
-	transform: rotate(210deg);
-}
-.sk-fading-circle .sk-circle9 {
-	-webkit-transform: rotate(240deg);
-	-ms-transform: rotate(240deg);
-	transform: rotate(240deg);
-}
-.sk-fading-circle .sk-circle10 {
-	-webkit-transform: rotate(270deg);
-	-ms-transform: rotate(270deg);
-	transform: rotate(270deg);
-}
-.sk-fading-circle .sk-circle11 {
-	-webkit-transform: rotate(300deg);
-	-ms-transform: rotate(300deg);
-	transform: rotate(300deg);
-}
-.sk-fading-circle .sk-circle12 {
-	-webkit-transform: rotate(330deg);
-	-ms-transform: rotate(330deg);
-	transform: rotate(330deg);
-}
-.sk-fading-circle .sk-circle2:before {
-	-webkit-animation-delay: -1.1s;
-	animation-delay: -1.1s;
-}
-.sk-fading-circle .sk-circle3:before {
-	-webkit-animation-delay: -1s;
-	animation-delay: -1s;
-}
-.sk-fading-circle .sk-circle4:before {
-	-webkit-animation-delay: -0.9s;
-	animation-delay: -0.9s;
-}
-.sk-fading-circle .sk-circle5:before {
-	-webkit-animation-delay: -0.8s;
-	animation-delay: -0.8s;
-}
-.sk-fading-circle .sk-circle6:before {
-	-webkit-animation-delay: -0.7s;
-	animation-delay: -0.7s;
-}
-.sk-fading-circle .sk-circle7:before {
-	-webkit-animation-delay: -0.6s;
-	animation-delay: -0.6s;
-}
-.sk-fading-circle .sk-circle8:before {
-	-webkit-animation-delay: -0.5s;
-	animation-delay: -0.5s;
-}
-.sk-fading-circle .sk-circle9:before {
-	-webkit-animation-delay: -0.4s;
-	animation-delay: -0.4s;
-}
-.sk-fading-circle .sk-circle10:before {
-	-webkit-animation-delay: -0.3s;
-	animation-delay: -0.3s;
-}
-.sk-fading-circle .sk-circle11:before {
-	-webkit-animation-delay: -0.2s;
-	animation-delay: -0.2s;
-}
-.sk-fading-circle .sk-circle12:before {
-	-webkit-animation-delay: -0.1s;
-	animation-delay: -0.1s;
-}
-
-@-webkit-keyframes sk-circleFadeDelay {
-	0%,
-	39%,
-	100% {
-		opacity: 0;
-	}
-	40% {
-		opacity: 1;
-	}
-}
-
-@keyframes sk-circleFadeDelay {
-	0%,
-	39%,
-	100% {
-		opacity: 0;
-	}
-	40% {
-		opacity: 1;
-	}
-}
-
-#fatal-error-page {
-	max-width: 38rem;
-	padding: 2rem;
-	margin: auto;
-}
-
-#fatal-error-page > h1 {
-	text-align: center;
-	color: var(--csm-danger);
-}
-
-#stack-trace {
-	overflow: auto;
-}
-
-#stack-trace > pre {
-	width: fit-content;
-	width: -moz-fit-content;
-	margin: auto;
-}
-
-.spacetimeDropperSubmit {
-	background-color: var(--csm-danger);
-	border: none;
-	color: white;
-	border-radius: 8px;
-	margin: 10px;
-	padding: 12px 16px;
-}
-
-.spacetimeDeleteDropper {
-	text-align: center;
-}
diff --git a/csm_web/frontend/static/frontend/css/tooltip.css b/csm_web/frontend/static/frontend/css/tooltip.css
deleted file mode 100644
index 3de1cf4d..00000000
--- a/csm_web/frontend/static/frontend/css/tooltip.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.tooltip,
-.tooltip-source {
-	width: 100%;
-	height: 100%;
-}
-
-.tooltip-source {
-	position: relative;
-}
-
-.tooltip-body {
-	position: absolute;
-	z-index: 1000;
-	display: none;
-	visibility: visible;
-	background-color: #fff;
-	font-size: 0.85rem;
-	border-radius: 4px;
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-	border: 1px solid #ccc;
-	padding: 5px 10px;
-	opacity: 0;
-	transition: opacity 0.2s ease-out;
-
-	width: max-content;
-}
-
-.tooltip-body.open {
-	opacity: 1;
-	display: block;
-}
diff --git a/csm_web/frontend/static/frontend/css/whitelist_modal.css b/csm_web/frontend/static/frontend/css/whitelist_modal.css
deleted file mode 100644
index 21d371c6..00000000
--- a/csm_web/frontend/static/frontend/css/whitelist_modal.css
+++ /dev/null
@@ -1,186 +0,0 @@
-.whitelist-modal-container {
-	width: 65vw !important;
-	height: 65vh !important;
-}
-
-.whitelist-modal {
-	height: 90%;
-}
-
-.whitelist-modal-header {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-}
-
-.csm-btn.whitelist-modal-tab {
-	background-color: var(--csm-neutral);
-	border: none;
-	cursor: pointer;
-	display: block;
-	padding: 8px 12px;
-	margin: 0 5px;
-	font-size: 1.2rem;
-}
-
-.csm-btn.whitelist-modal-tab:hover {
-	background-color: var(--csm-neutral-darkened);
-}
-
-.csm-btn.whitelist-modal-tab.active {
-	background-color: var(--csm-green);
-}
-
-.csm-btn.whitelist-modal-tab.active:hover {
-	background-color: var(--csm-green-darkened);
-}
-
-.whitelist-modal-add-container,
-.whitelist-modal-delete-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-
-	padding: 16px;
-}
-
-.whitelist-modal-subtitle {
-	font-size: 1.1rem;
-	font-weight: bold;
-	margin-bottom: 3px;
-}
-
-.whitelist-modal-description {
-	color: #333;
-	font-size: 0.95rem;
-}
-
-.whitelist-modal-submit {
-	background-color: var(--csm-green);
-	color: white;
-	border: none;
-	border-radius: 10px;
-	user-select: none;
-	padding: 8px 15px !important;
-	cursor: pointer;
-}
-
-.whitelist-modal-submit:disabled {
-	background-color: var(--csm-neutral);
-	cursor: not-allowed;
-}
-
-.whitelist-modal-submit:disabled:hover {
-	background-color: var(--csm-neutral);
-}
-
-.whitelist-modal-submit-status {
-	position: relative;
-}
-
-.whitelist-modal-submit-status * {
-	position: absolute !important;
-	top: 4px;
-	left: 10px;
-	width: 1.5em !important;
-	height: 1.5em !important;
-}
-
-.whitelist-modal-footer {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-content: center;
-}
-
-/* Add tab */
-
-.whitelist-modal-add-textarea {
-	margin: 8px 0;
-	width: calc(min(450px, 50vw));
-	height: calc(min(300px, 50vh));
-	resize: none;
-}
-
-/* Delete tab */
-
-.whitelist-modal-delete-search-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-
-	gap: 4px;
-}
-
-.whitelist-modal-delete-search {
-	margin-top: 4px;
-}
-
-.whitelist-modal-delete-search-description {
-	color: #333;
-	font-size: 0.95rem;
-}
-
-.whitelist-modal-delete-content {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-
-	overflow: auto;
-	max-height: 40vh;
-	min-width: 30vw;
-	max-width: 50vw;
-	margin: 8px 0;
-}
-
-.whitelist-modal-delete-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	min-width: 400px;
-	width: 50%;
-	margin: 2px 0;
-	padding: 2px 0;
-}
-
-.whitelist-modal-delete-row.deleted {
-	background-color: #eee;
-	border-radius: 3px;
-	text-decoration: line-through;
-
-	color: var(--csm-neutral);
-}
-
-.whitelist-modal-delete-row-content {
-	flex: 1;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-}
-
-.whitelist-modal-delete-row-btn {
-	min-width: 24px;
-	color: var(--csm-danger);
-
-	cursor: pointer;
-	user-select: none;
-}
-
-.whitelist-modal-delete-row.deleted .whitelist-modal-delete-row-btn {
-	color: #aaa;
-}
-
-.whitelist-modal-delete-row-email {
-	flex: 2;
-	color: #888;
-	font-size: 0.9rem;
-}
-
-.whitelist-modal-delete-row-name {
-	flex: 1;
-}
diff --git a/csm_web/frontend/static/frontend/css/word-of-the-day.css b/csm_web/frontend/static/frontend/css/word-of-the-day.css
deleted file mode 100644
index 575c3127..00000000
--- a/csm_web/frontend/static/frontend/css/word-of-the-day.css
+++ /dev/null
@@ -1,122 +0,0 @@
-#word-of-the-day-container {
-	border-top: 2px solid #e7e7e7;
-	padding-top: 10px;
-	margin-top: 25px;
-}
-
-#word-of-the-day-card {
-	border: 2px solid #e7e7e7;
-	box-shadow: 0px 4px 4px rgba(198, 198, 198, 0.25);
-	border-radius: 20px;
-	padding: 5px 30px 15px;
-	margin-bottom: 30px;
-}
-
-.word-of-the-day-input-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.word-of-the-day-input {
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 600;
-	font-family: "Montserrat";
-	border: none;
-	background-color: #ededed;
-	padding: 10px 20px;
-	margin-right: 5px;
-}
-
-.word-of-the-day-input::placeholder {
-	opacity: 0.65;
-}
-
-.word-of-the-day-status.unselected {
-	color: var(--csm-danger);
-}
-
-.word-of-the-day-status.selected {
-	color: var(--csm-green-darkened);
-}
-
-.csm-btn.word-of-the-day-submit {
-	font-size: 14px;
-	border: none;
-	border-radius: 6px;
-	padding: 10px 20px;
-	cursor: pointer;
-}
-
-.csm-btn.word-of-the-day-submit:disabled {
-	cursor: inherit;
-	background-color: var(--csm-neutral-darkened);
-}
-
-.word-of-the-day-random {
-	background-color: inherit;
-	border: none;
-	outline: none;
-	color: var(--csm-green);
-	font-size: 14px;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.word-of-the-day-random:hover {
-	color: var(--csm-green-darkened);
-}
-
-.random-word-picker-btn {
-	color: var(--csm-green-darkened);
-}
-
-.word-of-the-day-select {
-	max-width: 200px;
-	width: 150px;
-	text-align-last: center;
-	padding: 6px;
-	border-radius: 6px;
-	border: none;
-	margin-right: 5px;
-	font-family: "Montserrat";
-}
-
-.word-of-the-day-select-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.word-of-the-day-submit-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 15px;
-}
-
-.word-of-the-day-status-bar {
-	padding: 10px 0;
-	font-size: 0.9rem;
-	display: flex;
-	justify-content: space-between;
-}
-
-.word-of-the-day-status-text {
-	color: var(--csm-danger);
-}
-
-.word-of-the-day-icon {
-	width: 2em;
-	height: 2em;
-}
-
-.word-of-the-day-deadline:not(.passed) {
-	color: var(--csm-green-darkened);
-}
-
-.word-of-the-day-deadline.passed {
-	color: var(--csm-danger-darkened);
-}
diff --git a/csm_web/frontend/static/frontend/img/pencil.svg b/csm_web/frontend/static/frontend/img/pencil.svg
index 2309471b..79421853 100644
--- a/csm_web/frontend/static/frontend/img/pencil.svg
+++ b/csm_web/frontend/static/frontend/img/pencil.svg
@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>
diff --git a/csm_web/frontend/static/frontend/img/plus.svg b/csm_web/frontend/static/frontend/img/plus.svg
new file mode 100644
index 00000000..c8f2cfbd
--- /dev/null
+++ b/csm_web/frontend/static/frontend/img/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
diff --git a/csm_web/frontend/static/frontend/img/x.svg b/csm_web/frontend/static/frontend/img/x.svg
index b9b6befa..09986ebf 100644
--- a/csm_web/frontend/static/frontend/img/x.svg
+++ b/csm_web/frontend/static/frontend/img/x.svg
@@ -1 +1 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
diff --git a/csm_web/frontend/templates/frontend/base.html b/csm_web/frontend/templates/frontend/base.html
index 75bf342c..785ba319 100644
--- a/csm_web/frontend/templates/frontend/base.html
+++ b/csm_web/frontend/templates/frontend/base.html
@@ -1,30 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<meta name="description" content="Scheduler manages enrollment and attendance for UC Berkeley Computer Science Mentors' (CSM) 300+ tutoring sections for lower-division EECS courses.">
-		<meta name="google-site-verification" content="DSGGNcQKdAlxIOPXTPQlXy_f0GcCndxmYZAWyakAW5w">
-		<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
-		{% load static %}
-		{% if DJANGO_ENV == 'prod' %}
-			<title>CSM Scheduler</title>
-			<link rel="stylesheet" href="{% static 'frontend/css/style.min.css' %}"/>
-			<link rel="icon" type="image/png" sizes="32x32" href="{% static 'frontend/img/favicon-32x32.png' %}"/>
-			<link rel="icon" type="image/png" sizes="16x16" href="{% static 'frontend/img/favicon-16x16.png' %}"/>
-		{% else %}
-			<title>Development: CSM Scheduler</title>
-			<link rel="stylesheet" href="{% static 'frontend/css/style.css' %}"/>
-			<link rel="icon" type="image/png" sizes="32x32" href="{% static 'frontend/img/favicon-dev-32x32.png' %}"/>
-		{% endif %}
-		{% block extra_head %}
-		{% endblock %}
-	</head>
-	<body>
-		{% block body %}
-		{% endblock %}
-	</body>
-	{% block after_body %}
-	{% endblock %}
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Scheduler manages enrollment and attendance for UC Berkeley Computer Science Mentors' (CSM) 300+ tutoring sections for lower-division EECS courses."
+    />
+    <meta name="google-site-verification" content="DSGGNcQKdAlxIOPXTPQlXy_f0GcCndxmYZAWyakAW5w" />
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet" />
+    {% load static %} {% if DJANGO_ENV == 'prod' %}
+    <title>CSM Scheduler</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'frontend/img/favicon-32x32.png' %}" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'frontend/img/favicon-16x16.png' %}" />
+    {% else %}
+    <title>Development: CSM Scheduler</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'frontend/img/favicon-dev-32x32.png' %}" />
+    {% endif %} {% block extra_head %} {% endblock %}
+  </head>
+  <body>
+    {% block body %} {% endblock %}
+  </body>
+  {% block after_body %} {% endblock %}
 </html>
diff --git a/csm_web/frontend/templates/frontend/index.html b/csm_web/frontend/templates/frontend/index.html
index 3fdd26b1..7ee1f29f 100644
--- a/csm_web/frontend/templates/frontend/index.html
+++ b/csm_web/frontend/templates/frontend/index.html
@@ -8,6 +8,9 @@
 	<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
 	<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 	{% endif %}
+
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'frontend/main.css' %}" />
 {% endblock %}
 
 {% block body %}
@@ -16,5 +19,5 @@
 
 {% block after_body %}
 	{% load static %}
-  <script src="{% static 'frontend/main.js' %}"></script>
+    <script src="{% static 'frontend/main.js' %}"></script>
 {% endblock %}
diff --git a/csm_web/frontend/templates/frontend/login.html b/csm_web/frontend/templates/frontend/login.html
index f8cc32bd..65fa737a 100644
--- a/csm_web/frontend/templates/frontend/login.html
+++ b/csm_web/frontend/templates/frontend/login.html
@@ -1,10 +1,11 @@
-{% extends "./base.html" %}
-{% block body %}
-	<div id="login-container">
-		<div id="login-card" >
-			{% include "./LogoWithText.svg" %}
-			<a id="login-btn" href="{% url 'social:begin' 'google-oauth2' %}">Login</a>
-			<p id="login-subtitle">with your Berkeley email</p>
-		</div>
-	</div>
+{% extends "./base.html" %} {% block extra_head %} {% load static %}
+<link rel="stylesheet" href="{% static 'frontend/css/login.css' %}" />
+{% endblock %} {% block body %}
+<div id="login-container">
+  <div id="login-card">
+    {% include "./LogoWithText.svg" %}
+    <a id="login-btn" href="{% url 'social:begin' 'google-oauth2' %}">Login</a>
+    <p id="login-subtitle">with your Berkeley email</p>
+  </div>
+</div>
 {% endblock %}
diff --git a/package-lock.json b/package-lock.json
index 103c8e37..b597a285 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,8 @@
         "babel-plugin-lodash": "^3.3.4",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-polyfill": "^6.26.0",
-        "css-loader": "^6.2.0",
+        "css-loader": "^6.8.1",
+        "css-minimizer-webpack-plugin": "^5.0.1",
         "csso-cli": "^3.0.0",
         "cypress": "^12.2.0",
         "cypress-pipe": "^2.0.0",
@@ -58,9 +59,12 @@
         "jest": "^28.1.1",
         "jest-environment-jsdom": "^29.0.3",
         "lodash-webpack-plugin": "^0.11.6",
+        "mini-css-extract-plugin": "^2.7.6",
         "prettier": "^2.7.1",
         "random-words": "^1.1.2",
-        "style-loader": "^3.2.1",
+        "sass": "^1.64.2",
+        "sass-loader": "^13.3.2",
+        "style-loader": "^3.3.3",
         "typescript": "^4.8.4",
         "webpack": "^5.76.0",
         "webpack-cli": "^4.10.0"
@@ -3400,13 +3404,13 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
-      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
@@ -4881,6 +4885,45 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
@@ -5800,6 +5843,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001434",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
@@ -6074,6 +6129,12 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
     "node_modules/colorette": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
@@ -6200,20 +6261,32 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/css-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
-      "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.2.15",
+        "postcss": "^8.4.21",
         "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "semver": "^7.3.5"
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -6227,9 +6300,9 @@
       }
     },
     "node_modules/css-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6241,6 +6314,264 @@
         "node": ">=10"
       }
     },
+    "node_modules/css-minimizer-webpack-plugin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-5.0.1.tgz",
+      "integrity": "sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "cssnano": "^6.0.1",
+        "jest-worker": "^29.4.3",
+        "postcss": "^8.4.24",
+        "schema-utils": "^4.0.1",
+        "serialize-javascript": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/css": {
+          "optional": true
+        },
+        "@swc/css": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/@jest/schemas": {
+      "version": "29.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.0.tgz",
+      "integrity": "sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/@jest/types": {
+      "version": "29.6.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz",
+      "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.0",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/@types/yargs": {
+      "version": "17.0.24",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
+      "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/jest-util": {
+      "version": "29.6.2",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz",
+      "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.6.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/jest-worker": {
+      "version": "29.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.2.tgz",
+      "integrity": "sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "jest-util": "^29.6.2",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -6300,6 +6631,81 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssnano": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz",
+      "integrity": "sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==",
+      "dev": true,
+      "dependencies": {
+        "cssnano-preset-default": "^6.0.1",
+        "lilconfig": "^2.1.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz",
+      "integrity": "sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==",
+      "dev": true,
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^4.0.0",
+        "postcss-calc": "^9.0.0",
+        "postcss-colormin": "^6.0.0",
+        "postcss-convert-values": "^6.0.0",
+        "postcss-discard-comments": "^6.0.0",
+        "postcss-discard-duplicates": "^6.0.0",
+        "postcss-discard-empty": "^6.0.0",
+        "postcss-discard-overridden": "^6.0.0",
+        "postcss-merge-longhand": "^6.0.0",
+        "postcss-merge-rules": "^6.0.1",
+        "postcss-minify-font-values": "^6.0.0",
+        "postcss-minify-gradients": "^6.0.0",
+        "postcss-minify-params": "^6.0.0",
+        "postcss-minify-selectors": "^6.0.0",
+        "postcss-normalize-charset": "^6.0.0",
+        "postcss-normalize-display-values": "^6.0.0",
+        "postcss-normalize-positions": "^6.0.0",
+        "postcss-normalize-repeat-style": "^6.0.0",
+        "postcss-normalize-string": "^6.0.0",
+        "postcss-normalize-timing-functions": "^6.0.0",
+        "postcss-normalize-unicode": "^6.0.0",
+        "postcss-normalize-url": "^6.0.0",
+        "postcss-normalize-whitespace": "^6.0.0",
+        "postcss-ordered-values": "^6.0.0",
+        "postcss-reduce-initial": "^6.0.0",
+        "postcss-reduce-transforms": "^6.0.0",
+        "postcss-svgo": "^6.0.0",
+        "postcss-unique-selectors": "^6.0.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz",
+      "integrity": "sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
     "node_modules/csso": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
@@ -8452,6 +8858,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -12342,6 +12754,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -12445,6 +12866,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -12457,6 +12884,12 @@
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
       "dev": true
     },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -12783,6 +13216,78 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -12808,10 +13313,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -13253,21 +13764,227 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
-      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.23",
-        "source-map-js": "^0.6.2"
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz",
+      "integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz",
+      "integrity": "sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz",
+      "integrity": "sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz",
+      "integrity": "sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz",
+      "integrity": "sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz",
+      "integrity": "sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz",
+      "integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz",
+      "integrity": "sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^6.0.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz",
+      "integrity": "sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^4.0.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz",
+      "integrity": "sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz",
+      "integrity": "sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==",
+      "dev": true,
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz",
+      "integrity": "sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz",
+      "integrity": "sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-modules-extract-imports": {
@@ -13282,76 +13999,425 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz",
+      "integrity": "sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz",
+      "integrity": "sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz",
+      "integrity": "sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz",
+      "integrity": "sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz",
+      "integrity": "sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz",
+      "integrity": "sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz",
+      "integrity": "sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz",
+      "integrity": "sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz",
+      "integrity": "sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz",
+      "integrity": "sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==",
+      "dev": true,
+      "dependencies": {
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
+      "integrity": "sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz",
+      "integrity": "sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz",
+      "integrity": "sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
+    "node_modules/postcss-svgo/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/postcss-svgo/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
       "dev": true,
       "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
+        "domelementtype": "^2.3.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "node": ">= 4"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+    "node_modules/postcss-svgo/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
       "dev": true,
       "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+    "node_modules/postcss-svgo/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
+    "node_modules/postcss-svgo/node_modules/svgo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
       "dev": true,
       "dependencies": {
-        "icss-utils": "^5.0.0"
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
       },
       "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "node": ">=14.0.0"
       },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+    "node_modules/postcss-unique-selectors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz",
+      "integrity": "sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==",
       "dev": true,
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
+        "postcss-selector-parser": "^6.0.5"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
     "node_modules/prelude-ls": {
@@ -13771,6 +14837,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-package-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
@@ -13938,6 +15013,60 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.66.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.0.tgz",
+      "integrity": "sha512-C3U+RgpAAlTXULZkWwzfysgbbBBo8IZudNAOJAVBLslFbIaZv4MBPkTqhuvpK4lqgdoFiWhnOGMoV4L1FyOBag==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+      "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -13986,9 +15115,9 @@
       }
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -14119,9 +15248,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -14367,9 +15496,9 @@
       }
     },
     "node_modules/style-loader": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
-      "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
+      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "dev": true,
       "engines": {
         "node": ">= 12.13.0"
@@ -14382,6 +15511,22 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/stylehacks": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz",
+      "integrity": "sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
     "node_modules/superjson": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.11.0.tgz",
@@ -17888,13 +19033,13 @@
       "dev": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
-      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
@@ -18994,6 +20139,35 @@
         "uri-js": "^4.2.2"
       }
     },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        }
+      }
+    },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
@@ -19710,6 +20884,18 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
     "caniuse-lite": {
       "version": "1.0.30001434",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
@@ -19919,6 +21105,12 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
     "colorette": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
@@ -20021,29 +21213,215 @@
         "which": "^2.0.1"
       }
     },
+    "css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "requires": {}
+    },
     "css-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
-      "integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.2.15",
+        "postcss": "^8.4.21",
         "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "semver": "^7.3.5"
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
       },
       "dependencies": {
         "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "css-minimizer-webpack-plugin": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-5.0.1.tgz",
+      "integrity": "sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "cssnano": "^6.0.1",
+        "jest-worker": "^29.4.3",
+        "postcss": "^8.4.24",
+        "schema-utils": "^4.0.1",
+        "serialize-javascript": "^6.0.1"
+      },
+      "dependencies": {
+        "@jest/schemas": {
+          "version": "29.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.0.tgz",
+          "integrity": "sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==",
+          "dev": true,
+          "requires": {
+            "@sinclair/typebox": "^0.27.8"
+          }
+        },
+        "@jest/types": {
+          "version": "29.6.1",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz",
+          "integrity": "sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==",
+          "dev": true,
+          "requires": {
+            "@jest/schemas": "^29.6.0",
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^17.0.8",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@sinclair/typebox": {
+          "version": "0.27.8",
+          "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+          "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+          "dev": true
+        },
+        "@types/yargs": {
+          "version": "17.0.24",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
+          "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-util": {
+          "version": "29.6.2",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz",
+          "integrity": "sha512-3eX1qb6L88lJNCFlEADKOkjpXJQyZRiavX1INZ4tRnrBVr2COd3RgcTLyUiEXMNBlDU/cgYq6taUS0fExrWW4w==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^29.6.1",
+            "@types/node": "*",
+            "chalk": "^4.0.0",
+            "ci-info": "^3.2.0",
+            "graceful-fs": "^4.2.9",
+            "picomatch": "^2.2.3"
+          }
+        },
+        "jest-worker": {
+          "version": "29.6.2",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.6.2.tgz",
+          "integrity": "sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*",
+            "jest-util": "^29.6.2",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^8.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
           "dev": true,
           "requires": {
-            "lru-cache": "^6.0.0"
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -20089,6 +21467,60 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssnano": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz",
+      "integrity": "sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==",
+      "dev": true,
+      "requires": {
+        "cssnano-preset-default": "^6.0.1",
+        "lilconfig": "^2.1.0"
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz",
+      "integrity": "sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^4.0.0",
+        "postcss-calc": "^9.0.0",
+        "postcss-colormin": "^6.0.0",
+        "postcss-convert-values": "^6.0.0",
+        "postcss-discard-comments": "^6.0.0",
+        "postcss-discard-duplicates": "^6.0.0",
+        "postcss-discard-empty": "^6.0.0",
+        "postcss-discard-overridden": "^6.0.0",
+        "postcss-merge-longhand": "^6.0.0",
+        "postcss-merge-rules": "^6.0.1",
+        "postcss-minify-font-values": "^6.0.0",
+        "postcss-minify-gradients": "^6.0.0",
+        "postcss-minify-params": "^6.0.0",
+        "postcss-minify-selectors": "^6.0.0",
+        "postcss-normalize-charset": "^6.0.0",
+        "postcss-normalize-display-values": "^6.0.0",
+        "postcss-normalize-positions": "^6.0.0",
+        "postcss-normalize-repeat-style": "^6.0.0",
+        "postcss-normalize-string": "^6.0.0",
+        "postcss-normalize-timing-functions": "^6.0.0",
+        "postcss-normalize-unicode": "^6.0.0",
+        "postcss-normalize-url": "^6.0.0",
+        "postcss-normalize-whitespace": "^6.0.0",
+        "postcss-ordered-values": "^6.0.0",
+        "postcss-reduce-initial": "^6.0.0",
+        "postcss-reduce-transforms": "^6.0.0",
+        "postcss-svgo": "^6.0.0",
+        "postcss-unique-selectors": "^6.0.0"
+      }
+    },
+    "cssnano-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz",
+      "integrity": "sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==",
+      "dev": true,
+      "requires": {}
+    },
     "csso": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
@@ -21691,6 +23123,12 @@
       "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24617,6 +26055,12 @@
         "type-check": "~0.4.0"
       }
     },
+    "lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -24696,6 +26140,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -24708,6 +26158,12 @@
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
       "dev": true
     },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true
+    },
     "log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -24945,6 +26401,56 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        }
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -24967,9 +26473,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true
     },
     "natural-compare": {
@@ -25292,22 +26798,136 @@
       }
     },
     "postcss": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
-      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "requires": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.23",
-        "source-map-js": "^0.6.2"
-      },
-      "dependencies": {
-        "colorette": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-          "dev": true
-        }
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-calc": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz",
+      "integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz",
+      "integrity": "sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz",
+      "integrity": "sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz",
+      "integrity": "sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-duplicates": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz",
+      "integrity": "sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-empty": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz",
+      "integrity": "sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-overridden": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz",
+      "integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-merge-longhand": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz",
+      "integrity": "sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^6.0.0"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz",
+      "integrity": "sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^4.0.0",
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz",
+      "integrity": "sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz",
+      "integrity": "sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==",
+      "dev": true,
+      "requires": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz",
+      "integrity": "sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz",
+      "integrity": "sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
       }
     },
     "postcss-modules-extract-imports": {
@@ -25318,9 +26938,9 @@
       "requires": {}
     },
     "postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.0.0",
@@ -25346,20 +26966,257 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-normalize-charset": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz",
+      "integrity": "sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-normalize-display-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz",
+      "integrity": "sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz",
+      "integrity": "sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz",
+      "integrity": "sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz",
+      "integrity": "sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz",
+      "integrity": "sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz",
+      "integrity": "sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz",
+      "integrity": "sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz",
+      "integrity": "sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz",
+      "integrity": "sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^4.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
+      "integrity": "sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz",
+      "integrity": "sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
     "postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-svgo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz",
+      "integrity": "sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^3.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "css-select": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+          "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^6.1.0",
+            "domhandler": "^5.0.2",
+            "domutils": "^3.0.1",
+            "nth-check": "^2.0.1"
+          }
+        },
+        "css-tree": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+          "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.30",
+            "source-map-js": "^1.0.1"
+          }
+        },
+        "csso": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+          "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+          "dev": true,
+          "requires": {
+            "css-tree": "~2.2.0"
+          },
+          "dependencies": {
+            "css-tree": {
+              "version": "2.2.1",
+              "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+              "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+              "dev": true,
+              "requires": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+              }
+            },
+            "mdn-data": {
+              "version": "2.0.28",
+              "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+              "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+              "dev": true
+            }
+          }
+        },
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+          "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.3"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.30",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+          "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+          "dev": true
+        },
+        "svgo": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+          "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+          "dev": true,
+          "requires": {
+            "@trysound/sax": "0.2.0",
+            "commander": "^7.2.0",
+            "css-select": "^5.1.0",
+            "css-tree": "^2.2.1",
+            "csso": "^5.0.5",
+            "picocolors": "^1.0.0"
+          }
+        }
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz",
+      "integrity": "sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
     "postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
     "prelude-ls": {
@@ -25678,6 +27535,12 @@
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
     "require-package-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
@@ -25802,6 +27665,26 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.66.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.0.tgz",
+      "integrity": "sha512-C3U+RgpAAlTXULZkWwzfysgbbBBo8IZudNAOJAVBLslFbIaZv4MBPkTqhuvpK4lqgdoFiWhnOGMoV4L1FyOBag==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+      "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
+      "dev": true,
+      "requires": {
+        "neo-async": "^2.6.2"
+      }
+    },
     "saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -25837,9 +27720,9 @@
       "dev": true
     },
     "serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dev": true,
       "requires": {
         "randombytes": "^2.1.0"
@@ -25942,9 +27825,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true
     },
     "source-map-support": {
@@ -26133,12 +28016,22 @@
       "dev": true
     },
     "style-loader": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
-      "integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
+      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "dev": true,
       "requires": {}
     },
+    "stylehacks": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz",
+      "integrity": "sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
     "superjson": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.11.0.tgz",
diff --git a/package.json b/package.json
index 2b4f651d..d1aee9b3 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
   "scripts": {
     "dev": "webpack --mode development",
     "build:js": "webpack --mode production",
-    "build:css": "csso ./csm_web/frontend/static/frontend/css/style.css --output ./csm_web/frontend/static/frontend/css/style.min.css",
-    "build": "npm run build:js && npm run build:css",
+    "build": "npm run build:js",
     "watch": "webpack --mode development --watch",
     "test": "jest",
     "cypress:open": "cypress open --env DOCKER_PREFIX='docker compose exec django'",
@@ -49,7 +48,8 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-polyfill": "^6.26.0",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "csso-cli": "^3.0.0",
     "cypress": "^12.2.0",
     "cypress-pipe": "^2.0.0",
@@ -61,9 +61,12 @@
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^29.0.3",
     "lodash-webpack-plugin": "^0.11.6",
+    "mini-css-extract-plugin": "^2.7.6",
     "prettier": "^2.7.1",
     "random-words": "^1.1.2",
-    "style-loader": "^3.2.1",
+    "sass": "^1.64.2",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
     "typescript": "^4.8.4",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.10.0"
diff --git a/tsconfig.json b/tsconfig.json
index 23221160..f01b1490 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -63,5 +63,9 @@
     /* Advanced Options */
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": ["./csm_web/frontend/src/**/*.tsx", "./csm_web/frontend/src/images.d.ts"]
+  "include": [
+    "./csm_web/frontend/src/**/*.tsx",
+    "./csm_web/frontend/src/images.d.ts",
+    "./csm_web/frontend/src/css.d.ts"
+  ]
 }
diff --git a/webpack.config.js b/webpack.config.js
index ba3da7fc..21f0b611 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const path = require("path");
-const plugins = [new LodashModuleReplacementPlugin()];
 
 module.exports = (env, argv) => {
   const config = {
@@ -9,7 +10,7 @@ module.exports = (env, argv) => {
       path: path.resolve(__dirname, "./csm_web/frontend/static/frontend/")
     },
     resolve: {
-      extensions: [".tsx", ".ts", ".js", ".json"]
+      extensions: [".tsx", ".ts", ".js", ".json", ".css", ".scss", ".sass"]
     },
     module: {
       rules: [
@@ -55,14 +56,36 @@ module.exports = (env, argv) => {
               }
             }
           ]
+        },
+        {
+          // scss, sass, css
+          test: /\.s[ac]ss$|\.css$/i,
+          include: [
+            path.resolve(__dirname, "./csm_web/frontend/src/css/"),
+            path.resolve(__dirname, "./csm_web/frontend/templates/frontend/")
+          ],
+          sideEffects: true,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: "./csm_web/frontend/static/frontend/css/"
+              }
+            },
+            "css-loader",
+            "sass-loader"
+          ]
         }
       ]
     },
+    optimization: {
+      minimizer: ["...", new CssMinimizerPlugin()]
+    },
     watchOptions: {
       poll: 1000,
       ignored: /node_modules/
     },
-    plugins: plugins,
+    plugins: [new LodashModuleReplacementPlugin(), new MiniCssExtractPlugin()],
     externals: { react: "React", "react-dom": "ReactDOM" }
   };
   if (argv.mode === "development") {