diff --git a/package-lock.json b/package-lock.json
index 8885b7c73..4dac6c3aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "thecourseforum",
       "version": "2.0.0",
       "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "thecourseforum": "file:"
+      },
       "devDependencies": {
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
@@ -2503,6 +2506,10 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thecourseforum": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
diff --git a/package.json b/package.json
index d4d2f3540..fae7dd867 100644
--- a/package.json
+++ b/package.json
@@ -25,5 +25,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "prettier": "^3.2.5"
+  },
+  "dependencies": {
+    "thecourseforum": "file:"
   }
 }
diff --git a/tcf_core/context_processors.py b/tcf_core/context_processors.py
index 063cf550b..704013068 100644
--- a/tcf_core/context_processors.py
+++ b/tcf_core/context_processors.py
@@ -46,9 +46,16 @@ def history_cookies(request):
 def searchbar_context(request):
     """Provide context for the search bar."""
     latest_semester = Semester.latest()
-    recent_semesters = Semester.objects.filter(
-        number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
-    ).order_by("-number")
+    # recent_semesters = Semester.objects.filter(
+    #     number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
+    # ).order_by("-number")
+
+    if latest_semester:
+        recent_semesters = Semester.objects.filter(
+            number__gte=latest_semester.number - 50  # 50 = 5 years * 10 semesters
+        ).order_by("-number")
+    else:
+        recent_semesters = Semester.objects.none()
 
     # Get saved filters from the session (or use defaults)
     saved_filters = request.session.get("search_filters", {})
diff --git a/tcf_website/static/about/about.css b/tcf_website/static/about/about.css
index 353588fc5..fd9a3c05f 100644
--- a/tcf_website/static/about/about.css
+++ b/tcf_website/static/about/about.css
@@ -55,3 +55,15 @@
   overflow: hidden;
   opacity: 0.8;
 }
+
+.jumbotron {
+  background-color: var(--input-background-color) !important;
+}
+
+.text-muted {
+  color: var(--basic-text-color) !important;
+}
+
+.card-text {
+  color: var(--basic-text-color) !important;
+}
\ No newline at end of file
diff --git a/tcf_website/static/base/navbar.css b/tcf_website/static/base/navbar.css
index add3b3892..bd2369ef0 100644
--- a/tcf_website/static/base/navbar.css
+++ b/tcf_website/static/base/navbar.css
@@ -1,7 +1,7 @@
 /*
     Any css that involves the navbar should go in this file!
-    This way things are kept insolated and de-coupled from one
-    another, making components more maliable and maintainable.
+    This way things are kept isolated and de-coupled from one
+    another, making components more malleable and maintainable.
 */
 
 .navbar {
@@ -25,14 +25,8 @@
   transition-timing-function: ease;
 }
 
-.logo-container:hover {
-  transform: scale(1.05);
-}
-
-.logo-container:active {
-  transform: scale(1.05);
-}
-
+.logo-container:hover,
+.logo-container:active,
 .logo-container:focus {
   transform: scale(1.05);
 }
@@ -41,7 +35,6 @@
   .logo-container {
     width: calc(var(--sidebar-width) - 16px);
     height: auto;
-
     /* Animation */
     padding-left: 0.55rem; /* centers logo in logo-container */
     padding-right: 0rem;
@@ -85,6 +78,32 @@
   background-color: rgb(190, 190, 190);
 }
 
+.dark-mode .navbar {
+  flex-wrap: nowrap;
+  background-color: var(--card-background-color);
+  color: var(--basic-text-color);
+}
+.navbar {
+  background-color: white;
+}
+
+.dark-mode .navbar-toggler.menu {
+  border-color: var(--input-border-color);
+  background-color: var(--button-bg-color);
+}
+
+.dark-mode .navbar-toggler.menu:hover {
+  background-color: #2a2a2a;
+}
+
+.dark-mode .navbar-toggler.menu:active {
+  background-color: #333333;
+}
+
+.dark-mode .navbar-toggler.menu:focus {
+  background-color: #2a2a2a;
+}
+
 @media (max-width: 768px) {
   .account-settings {
     display: none;
@@ -95,4 +114,4 @@
   .dropdown-menu.settings {
     min-width: 140px !important;
   }
-}
+}
\ No newline at end of file
diff --git a/tcf_website/static/base/sidebar.css b/tcf_website/static/base/sidebar.css
index a1d2e44d3..1c2a601a7 100644
--- a/tcf_website/static/base/sidebar.css
+++ b/tcf_website/static/base/sidebar.css
@@ -84,3 +84,8 @@ body {
 .modal {
   z-index: 10000;
 }
+
+/* styles the right border of sidebar */
+.border-right { 
+  border-right: 1px solid var(--input-border-color) !important;
+}
diff --git a/tcf_website/static/base/tcf-style.css b/tcf_website/static/base/tcf-style.css
index f7d5f577a..0c943e83c 100644
--- a/tcf_website/static/base/tcf-style.css
+++ b/tcf_website/static/base/tcf-style.css
@@ -11,9 +11,45 @@
   --shadow-color: #a6a6a6; /* Medium grey, used for shadows */
   --shaded-color: #cfcfcf; /* Medium light grey, used for shading */
   --background-color: #ebebeb; /* Light grey, used for backgrounds */
+  --landing-page-background-color: #F8F9FA;
+  --card-background-color: #ffffff; 
+  --navbar-color: #ffffff;
+  /* newly added */
+  --basic-text-color: #212529;
+  --accent-text-white: #ffffff; /* White text color */
+  /* changes the border color of the search bar on landing page */
+  --input-border-color: #DEE2E6;
+  /* changes the color of the title and icons on the landing page */
+  --title-color: #274f97;
+  --filter-input-background-color: white;
+  --icon-color-white: #ffffff; /* White icon color */
+  --input-background-color: #EBEBEB;
+  --landing-page-input-background-color: white;
+  --filter-background-color: white;
+
+  /* #f8f9fa is the og background color styled by .bg-light in _background_variant.scss */
   /* Note: Can use Bootstrap "light" color and white color */
 }
 
+/* only main-color (tcf blue) and accent-color (tcf organge) are being utilized by the landing page */
+body.dark-mode {
+
+/* Added updated variables names */
+  --background-color: black; /* Dark background color */
+  --card-background-color: #333333;  /* Dark card background */
+  --input-background-color: #545454;  /* Dark input background */
+  --filter-input-background-color: #545454;  /* Dark input background */
+  --input-text-color: #a6a6a6;   /* Light text in inputs */
+  --accent-text-color: #d75626; /* Accent color for dark mode */
+  --basic-text-color: white;    /* White text color */
+  --icon-color: white; /* Light icon color */
+  --input-border-color: #5a5c5d; /* Lighter border color for inputs */
+  --button-bg-color: #1e1e1e; /* Darker button background */
+  --landing-page-background-color: black; /* replace tcf-blue as tcf logo text color */
+  --title-color: white; /* make title and icons on landing page white */
+  --filter-background-color: #333333;
+}
+
 /*************DEFAULT STYLES**************/
 h1,
 h2,
@@ -29,6 +65,36 @@ h6,
 .h6 {
   /* Default heading font: Lato (others are fallbacks) */
   font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  /* Chai: initially didn't have a color element, this color element overrides color in _reboot.cscc */
+  /* color: var(--h4-card-title-color);  */
+}
+
+h1, .h1 {
+  color: var(--basic-text-color);
+}
+
+h2, .h2 {
+  color: var(--basic-text-color);
+}
+
+h4, .h4 {
+  color: var(--basic-text-color);
+}
+
+h3, .h3 {
+  color: var(--basic-text-color);
+}
+
+h5, .h5 {
+  color: var(--basic-text-color);
+}
+
+h6, .h6 {
+  color: var(--basic-text-color);
+}
+
+label {
+  color: var(--basic-text-color);
 }
 
 body {
@@ -68,13 +134,16 @@ ul {
 
 /* Main color: Indigo/Dark blue */
 .text-tcf-indigo {
-  color: var(--main-color);
+  color: var(--title-color);
 }
+
 .bg-tcf-indigo {
-  background-color: var(--main-color);
+  /* background-color: var(--main-color); */
+  /* Chai: this banner color should be tcf blue no matter if theme is light or dark */
+  background-color: #274f97;
 }
 .border-tcf-indigo {
-  border-color: var(--main-color);
+  border-color: var(--title-color);
 }
 
 /* Secondary color: Light blue */
@@ -89,6 +158,7 @@ ul {
 .text-tcf-orange {
   color: var(--accent-color);
 }
+/* colors specifically the 'Meet the full team' button */
 .bg-tcf-orange {
   background-color: var(--accent-color);
 }
@@ -124,8 +194,114 @@ ul {
   border-color: var(--background-color);
 }
 
-/* Note: Can use Bootstrap "light" color
-  .text-light
-  .bg-light
-  .border-light
-*/
+/* OVERRIDES scss stylings */
+/* Chai: background color on landing page is being styled by .bg-light in _background-variant.scss, has to have !important to override the !important in the scss */
+.bg-light {
+  background-color: var(--landing-page-background-color) !important;
+}
+
+/* Chai: card background color is being styled by .card in _card.scss; color will be card-background-color when in dark-mode */
+.card {
+  background-color: var(--card-background-color) !important;
+  /* border: 1px solid var(--input-border-color); */
+}
+.card.bg-tcf-orange {
+  background-color: var(--accent-color) !important;
+}
+
+
+p {
+  color: var(--basic-text-color);
+}
+
+.form-control {
+  background-color: var(--input-background-color);
+  color: var(--input-text-color);
+  border: 1px solid var(--input-border-color);
+}
+
+.form-control:focus {
+  background-color: var(--input-background-color);
+  color: var(--basic-text-color);
+}
+
+.form-control::placeholder {
+  color: var(--input-text-color);
+}
+
+/* overrides the input:-internal-autofill-selected setting from User Agent Stylesheet */
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px var(--input-background-color) inset !important;
+  -webkit-text-fill-color: white !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.forcontrol:disabled {
+  background-color: var(--background-color);
+}
+
+/* originally in borders.scss */
+.border {
+  border: 0.5px solid var(--input-border-color) !important;
+}
+
+.modal-body {
+  background-color: var(--background-color);
+}
+
+.modal-header {
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--input-border-color);
+}
+
+.modal-footer {
+  background-color: var(--background-color);
+  border-top: 1px solid var(--input-border-color);
+}
+
+.dropdown-menu {
+  background-color: var(--filter-background-color);
+}
+
+.dropdown-item {
+  color: var(--basic-text-color);
+}
+
+.dropdown-divider {
+  border-top: 1px solid var(--input-border-color);
+}
+
+/* styles the input range bar on the write review page */
+input[type="range"] {
+  width: 100%;
+  height: 6px;
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 6px;
+  background: var(--input-background-color); /* Track color */
+  border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  background: var(--accent-color);
+  border-radius: 50%;
+  margin-top: -5px; /* aligns thumb with the track */
+  cursor: pointer;
+}
+
+#darkModeToggle {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--icon-color, #212529); /* Customizable */
+}
+
+#sunIcon {
+  vertical-align: middle;
+}
diff --git a/tcf_website/static/browse/browse.css b/tcf_website/static/browse/browse.css
index 7ececb17e..ccaa7022c 100644
--- a/tcf_website/static/browse/browse.css
+++ b/tcf_website/static/browse/browse.css
@@ -1,3 +1,7 @@
+body.dark-mode {
+  color: var(--basic-text-color);
+}
+
 .schools {
   margin-top: 30px;
 }
@@ -19,9 +23,14 @@
 
 .school > .card-header {
   background-color: var(--secondary-color);
-  color: white;
+}
+
+.school .card-header,
+.school .card-header .card-title {
+    color: var(--accent-text-white) !important;
 }
 
 .school-body {
   padding: 1.25rem;
 }
+
diff --git a/tcf_website/static/course/course.css b/tcf_website/static/course/course.css
new file mode 100644
index 000000000..7eef883a3
--- /dev/null
+++ b/tcf_website/static/course/course.css
@@ -0,0 +1,16 @@
+/* Global override: force all text to white */
+body {
+  color: var(--basic-text-color);
+}
+
+.breadcrumb {
+    background-color: var(--card-background-color) !important;
+}
+
+.bg-white {
+    background-color: var(--card-background-color) !important;
+}
+
+#title {
+    color: var(--accent-text-white) !important;
+}
\ No newline at end of file
diff --git a/tcf_website/static/course/course_professor.css b/tcf_website/static/course/course_professor.css
index bc109ed04..0b907306e 100644
--- a/tcf_website/static/course/course_professor.css
+++ b/tcf_website/static/course/course_professor.css
@@ -7,9 +7,10 @@
     font-size: 22px;
   }
 }
-.course-instructor-header .instructor-menu {
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
-}
+/*.course-instructor-header .instructor-menu {
+  box-shadow: 1px 1px 10px rgba(255, 0, 0, 0.2);
+}*/
+
 /* Change tooltip alignment */
 @media (min-width: 768px) {
   .tooltip-inner {
@@ -26,6 +27,11 @@
   row-gap: 10px;
 }
 
+body {
+  background-color: var(--background-color);
+  color: var(--basic-text-color);
+}
+
 .times-info-container {
   width: 100%;
   display: flex;
@@ -46,7 +52,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: white;
+  background-color: var(--card-background-color);
   z-index: 0;
 }
 
@@ -79,7 +85,7 @@
 
 .rating-card {
   height: 100%;
-  background-color: white;
+  background-color: var(--card-background-color);
   width: 200px;
   display: flex;
   align-items: center;
@@ -89,7 +95,7 @@
 
 .rating-card-num {
   font-size: 42px;
-  color: #d75626;
+  color: var(--accent-color);
 }
 
 .rating-card-desc {
@@ -100,7 +106,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  background-color: white;
+  background-color: var(--card-background-color);
   height: 100%;
   margin-left: 10px;
   padding-top: 6px;
@@ -141,17 +147,22 @@
 }
 
 .gpa-text {
-  color: #384676;
+  color: var(--main-color);
   font-size: 28px;
   margin: 0;
 }
 
 .students-text {
-  color: #56679d;
+  color: var(--secondary-color);
   font-size: 16px;
   margin: 0;
 }
 
+body.dark-mode .gpa-text,
+body.dark-mode .students-text {
+  color: var(--basic-text-color) !important;
+}
+
 .info-row {
   display: flex;
   align-items: center;
@@ -170,8 +181,10 @@
 .info-bar .progress {
   margin: 0;
   padding: 0;
+  background-color: var(--input-background-color);
 }
 .info-bar .progress-bar {
+  background-color: var(--secondary-color);
   margin: 0;
   padding: 0;
 }
@@ -316,6 +329,26 @@
   }
 }
 
+.breadcrumb {
+  background-color: var(--card-background-color) !important;
+  color: var(--basic-text-color) !important;
+}
+
+.bg-white {
+  background-color: var(--card-background-color) !important;
+}
+
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+  color: var(--basic-text-color) !important; 
+  background-color: var(--card-background-color) !important;
+  border-color: var(--card-background-color);
+  border-bottom: 1px solid var(--background-color);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--background-color) !important;
+}
+
 .rotated {
   transform: rotateZ(90deg);
 }
@@ -389,6 +422,7 @@
   width: 100px;
   height: 8px;
   margin: 0;
+  background-color: var(--input-background-color);
 }
 
 .metric-text {
@@ -413,14 +447,14 @@
 }
 
 .sections-toggle {
-  display: flex;
-  align-items: stretch;
-  height: 34px;
-  border-radius: 6px;
-  overflow: hidden;
-  background-color: #f8f9fa;
-  position: relative;
-  padding: 2px;
+    display: flex;
+    align-items: stretch;
+    height: 34px;
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: var(--input-background-color);
+    position: relative;
+    padding: 2px;
 }
 
 .section-count {
@@ -445,7 +479,6 @@
   margin-bottom: 4px;
   align-items: center;
   padding: 12px 16px;
-  background-color: white;
   border-radius: 6px;
   transition: all 0.2s ease;
   border: 1px solid transparent;
@@ -476,8 +509,8 @@
 }
 
 .section-row > div:last-child {
-  text-align: right;
-  color: #666;
+    text-align: right;
+    color: var(--basic-text-color);
 }
 
 .hidden-section {
@@ -507,20 +540,21 @@
 
 /* Section toggle */
 .toggle-option {
-  padding: 0 20px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  color: #666;
-  position: relative;
-  z-index: 1;
-  border-radius: 4px;
-  min-width: 90px;
+    padding: 0 20px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    color: var(--basic-text-color);
+    position: relative;
+    z-index: 1;
+    border-radius: 4px;
+    min-width: 90px;
+    /* background-color: var(---input-background-color); */
 }
 
 .toggle-option:hover:not(.active) {
diff --git a/tcf_website/static/course/javascript/course_data.js b/tcf_website/static/course/javascript/course_data.js
index e898f0a60..df2d4305f 100644
--- a/tcf_website/static/course/javascript/course_data.js
+++ b/tcf_website/static/course/javascript/course_data.js
@@ -141,6 +141,10 @@ const loadData = (data) => {
 };
 
 const createChart = (gradesData) => {
+  const cardBgColor = getComputedStyle(document.body)
+    .getPropertyValue("--card-background-color")
+    .trim();
+
   const chartData = {
     datasets: [
       {
@@ -157,6 +161,8 @@ const createChart = (gradesData) => {
           "#D75626", // C-
           "#BE4B20", // DFW
         ],
+        borderColor: cardBgColor,
+        borderWidth: 2,
       },
     ],
     labels: ["A+", "A", "A-", "B+", "B", "B-", "C+", "C", "C-", "DFW"],
@@ -167,6 +173,7 @@ const createChart = (gradesData) => {
     type: "bar",
     data: chartData,
     options: {
+      animation: { duration: 0 },
       layout: {
         padding: {
           bottom: 20,
@@ -240,10 +247,31 @@ const createChart = (gradesData) => {
   // eslint-disable-next-line no-new,no-undef
   Chart.register(ChartDataLabels);
 
+  // Set up a MutationObserver to update chart borderColor when the body class changes.
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.attributeName === "class") {
+        updateChartBorderColor();
+      }
+    }
+  });
+  observer.observe(document.body, { attributes: true });
+
+  function updateChartBorderColor() {
+    const newCardBgColor = getComputedStyle(document.body)
+      .getPropertyValue("--card-background-color")
+      .trim();
+    if (myChart && myChart.config.data.datasets[0]) {
+      myChart.config.data.datasets[0].borderColor = newCardBgColor;
+      myChart.update({ duration: 0 });
+    }
+  }
+  // Generate configuration for Pie Chart
   pieConfig = {
     type: "doughnut",
     data: chartData,
     options: {
+      animation: { duration: 0 },
       maintainAspectRatio: false,
       plugins: {
         legend: {
diff --git a/tcf_website/static/department/department.css b/tcf_website/static/department/department.css
index e69de29bb..a0acac3c5 100644
--- a/tcf_website/static/department/department.css
+++ b/tcf_website/static/department/department.css
@@ -0,0 +1,11 @@
+body.dark-mode {
+    color: var(--basic-text-color);
+  }
+
+.bg-white {
+    background-color: var(--card-background-color) !important;
+}
+
+.main-text {
+  color: var(--accent-text-white) !important;
+}
diff --git a/tcf_website/static/icons/icons.css b/tcf_website/static/icons/icons.css
index 261a94203..ddd979ce3 100644
--- a/tcf_website/static/icons/icons.css
+++ b/tcf_website/static/icons/icons.css
@@ -1,338 +1,57 @@
-.fa {
-  display: inline-block;
-  font-style: normal; /* Reset any inherited styles */
-  line-height: 1; /* Match text line height */
-  /* vertical-align: middle;   */
-  width: 1em;
-  height: 1em;
-}
-
+.fa,
 .fas {
   display: inline-block;
-  font-style: normal; /* Reset any inherited styles */
-  line-height: 1; /* Match text line height */
-  /* vertical-align: middle;   */
-  width: 1em;
-  height: 1em;
-}
-
-.fa-clock {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-clock.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  vertical-align: middle;
-}
-
-.fa-arrow-right {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-arrow-right.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-search {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-search.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  vertical-align: middle;
-}
-
-.fa-book {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-book.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
-  filter: invert(100%) brightness(150%);
-}
-
-.fa-users {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-user.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
-  filter: invert(100%) brightness(150%);
-}
-
-.fa-graduation-cap {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-graduation-cap.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
-  filter: invert(100%) brightness(150%);
-}
-
-.fa-handshake {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-handshake.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
+  font-style: normal;
+  line-height: 1;
+  width: 1em;
+  height: 1em;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.fa-clock            { background-image: url("../icons/img/fa-clock.svg"); }
+.fa-arrow-right      { background-image: url("../icons/img/fa-arrow-right.svg"); }
+.fa-search           { background-image: url("../icons/img/fa-search.svg"); vertical-align: middle;}
+.fa-book             { background-image: url("../icons/img/fa-book.svg"); vertical-align: middle;}
+.fa-history-book     { background-image: url("../icons/img/fa-book.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-users            { background-image: url("../icons/img/fa-user.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-graduation-cap   { background-image: url("../icons/img/fa-graduation-cap.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-handshake        { background-image: url("../icons/img/fa-handshake.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-github           { background-image: url("../icons/img/fa-github.svg"); }
+.fa-user             { background-image: url("../icons/img/fa-user.svg"); }
+.fa-dumbbell         { background-image: url("../icons/img/fa-dumbbell.svg"); }
+.fa-chart-bar        { background-image: url("../icons/img/fa-chart-bar.svg"); }
+.fa-star             { background-image: url("../icons/img/fa-star.svg"); }
+.fa-calendar         { background-image: url("../icons/img/fa-calendar.svg"); }
+.fa-plus             { background-image: url("../icons/img/fa-plus.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-chevron-up       { background-image: url("../icons/img/fa-chevron-up.svg"); }
+.fa-chevron-down     { background-image: url("../icons/img/fa-chevron-down.svg"); }
+.fa-thumbs-up        { background-image: url("../icons/img/fa-thumbs-up.svg"); }
+.fa-thumbs-down      { background-image: url("../icons/img/fa-thumbs-down.svg"); }
+.fa-trash-o          { background-image: url("../icons/img/fa-trash-o.svg"); }
+.fa-hourglass-half   { background-image: url("../icons/img/fa-hourglass-half.svg"); }
+.fa-pencil           { background-image: url("../icons/img/fa-pencil.svg"); }
+.fa-instagram        { background-image: url("../icons/img/fa-instagram.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-discord          { background-image: url("../icons/img/fa-discord.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-facebook         { background-image: url("../icons/img/fa-facebook.svg"); filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-instagram-lg     { background-image: url("../icons/img/fa-instagram.svg"); width: 1.5em; height: 1.5em; filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-discord-lg       { background-image: url("../icons/img/fa-discord.svg"); width: 1.5em; height: 1.5em; filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-facebook-lg      { background-image: url("../icons/img/fa-facebook.svg"); width: 1.5em; height: 1.5em; filter: invert(100%) brightness(150%); vertical-align: middle;}
+.fa-code             { background-image: url("../icons/img/fa-code.svg"); }
+.fa-list             { background-image: url("../icons/img/fa-list.svg"); vertical-align: middle;}
+.fa-user-friends     { background-image: url("../icons/img/fa-user-friends.svg"); }
+.fa-smile-beam       { background-image: url("../icons/img/fa-smile-beam.svg"); }
+.fa-frown-open       { background-image: url("../icons/img/fa-frown-open.svg"); }
+.fa-heart            { background-image: url("../icons/img/fa-heart.svg"); }
+.fa-copy             { background-image: url("../icons/img/fa-copy.svg"); filter: invert(100%) brightness(150%);}
+.fa-flask            { background-image: url("../icons/img/fa-flask.svg"); }
+
+body.dark-mode .fa,
+body.dark-mode .fas {
   filter: invert(100%) brightness(150%);
 }
 
-.fa-github {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-github.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-user {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-user.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-dumbbell {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-dumbbell.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-chart-bar {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-chart-bar.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-star {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-star.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-calendar {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-calendar.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-plus {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-plus.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-chevron-up {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-chevron-up.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-chevron-down {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-chevron-down.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-chevron-up-white {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-chevron-up.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  filter: invert(1);
-}
-
-.fa-chevron-down-white {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-chevron-down.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  filter: invert(1);
-}
-
-.fa-thumbs-up {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-thumbs-up.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-thumbs-down {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-thumbs-down.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-trash-o {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-trash-o.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-hourglass-half {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-hourglass-half.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-pencil {
-  width: 1em;
-  height: 1em;
-  background-image: url("../icons/img/fa-pencil.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-instagram {
-  background-image: url("../icons/img/fa-instagram.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-discord {
-  background-image: url("../icons/img/fa-discord.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-facebook {
-  background-image: url("../icons/img/fa-facebook.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-code {
-  background-image: url("../icons/img/fa-code.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-list {
-  background-image: url("../icons/img/fa-list.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
+#search-button:hover .fa-search {
   filter: invert(100%) brightness(150%);
-}
-
-.fa-user-friends {
-  background-image: url("../icons/img/fa-user-friends.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-smile-beam {
-  background-image: url("../icons/img/fa-smile-beam.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-frown-open {
-  background-image: url("../icons/img/fa-frown-open.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-heart {
-  background-image: url("../icons/img/fa-heart.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-copy {
-  background-image: url("../icons/img/fa-copy.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.fa-flask {
-  background-image: url("../icons/img/fa-flask.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.invert-to-light {
-  filter: invert(1);
-}
-
-.invert-to-dark {
-  filter: invert(0);
-}
+}
\ No newline at end of file
diff --git a/tcf_website/static/landing/landing.css b/tcf_website/static/landing/landing.css
index c7e250cdc..d0f5f82f3 100644
--- a/tcf_website/static/landing/landing.css
+++ b/tcf_website/static/landing/landing.css
@@ -1,12 +1,22 @@
 /* Html Classes */
 
+body {
+  background-color: var(--card-background-color);
+  color: var(--basic-text-color);
+}
+
+body.dark-mode {
+  background-color: var(--background-color);
+  color: var(--basic-text-color);
+}
+
 .container-fluid {
   overflow: hidden;
 }
 
 /* Navbar */
 nav.navbar {
-  background-color: white;
+  background-color: var(--navbar-color);
 }
 
 nav.navbar img.logo {
@@ -50,11 +60,11 @@ header.masthead h1 {
 
 /* Features */
 .features-icons .card {
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: 1px 1px 2px var(--input-border-color);
 }
 
 .features-icons .card:hover {
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+  box-shadow: 1px 1px 4px var(--input-border-color);
 }
 
 .features-icons .features-icons-item {
@@ -63,7 +73,7 @@ header.masthead h1 {
 
 .features-icons .features-icons-item .features-icons-icon {
   height: 7rem;
-  color: var(--main-color);
+  color: var(--title-color);
 }
 
 .features-icons .features-icons-item .features-icons-icon i {
@@ -96,6 +106,14 @@ header.masthead h1 {
   overflow: hidden;
 }
 
+.dark-mode .about-team .about-pfp {
+  background-color: var(--background-color);
+  overflow: hidden;
+}
+
+.border {
+  border: 1px solid var(--input-border-color) !important;
+}
 .about-team .about-pfp img {
   transition: all 0.5s ease;
   box-shadow: 5px 5px 0px var(--accent-color);
@@ -109,14 +127,23 @@ header.masthead h1 {
   border: 0px;
 }
 
+.dark-mode .about-member.card {
+  background-color: var(--background-color) !important;
+  color: var(--basic-text-color);
+}
+
 .about-team .about-link:hover {
-  box-shadow: 2px 2px 5px var(--main-color);
+  box-shadow: 2px 2px 5px var(--accent-color);
 }
 
 .about-link {
   font-size: 1.25rem;
 }
 
+.about-link.card {
+  background-color: var(--accent-color) !important;
+  color: var(--basic-text-color) !important;}
+
 /* About info box */
 .about-team .about-info {
   /* border: 3px solid var(--accent-color); */
diff --git a/tcf_website/static/profile/profile.css b/tcf_website/static/profile/profile.css
index e9ea58161..9f76368a1 100644
--- a/tcf_website/static/profile/profile.css
+++ b/tcf_website/static/profile/profile.css
@@ -1,3 +1,8 @@
+
+.container-fluid {
+  background-color: var(--background-color);
+}
+
 .user_delete {
   align-items: end;
 }
@@ -6,3 +11,21 @@
   display: flex;
   justify-content: space-between;
 }
+
+h2, h4 {
+  color: var(--basic-text-color);
+  /*explicitly written to override scss file*/
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  font-size: 26px;
+}
+
+.form-row {
+  color: var(--basic-text-color); 
+}
+
+.card {
+  background-color: var(--card-background-color);
+}
diff --git a/tcf_website/static/reviews/new_review.css b/tcf_website/static/reviews/new_review.css
index cbe0fa7ea..5a1d5d5b8 100644
--- a/tcf_website/static/reviews/new_review.css
+++ b/tcf_website/static/reviews/new_review.css
@@ -5,8 +5,8 @@
 }
 
 .new-review select:disabled {
-  color: var(--shadow-color);
-  background-color: var(--shaded-color);
+  color: var(--input-text-color);
+  background-color: var(--background-color);
 }
 
 .required-field::after {
@@ -27,3 +27,8 @@
 #progressbar-message {
   margin-bottom: 0px;
 }
+
+h1, label, p {
+  color: var(--basic-text-color);
+}
+
diff --git a/tcf_website/static/reviews/pagination.css b/tcf_website/static/reviews/pagination.css
index 1819e7431..1afd6d60b 100644
--- a/tcf_website/static/reviews/pagination.css
+++ b/tcf_website/static/reviews/pagination.css
@@ -12,13 +12,13 @@
   padding: 8px 12px;
   margin: 0 5px;
   text-decoration: none;
-  color: var(--main-color);
-  border: 1px solid #ddd;
+  color: var(--basic-text-color);
+  border: 1px solid var(--input-border-color);
   border-radius: 5px;
   transition:
     background-color 0.3s,
     color 0.3s;
-  background-color: white;
+  background-color: var(--card-background-color);
 }
 
 .pagination a:hover {
diff --git a/tcf_website/static/reviews/review.css b/tcf_website/static/reviews/review.css
index 43566f1bd..34e380fbf 100644
--- a/tcf_website/static/reviews/review.css
+++ b/tcf_website/static/reviews/review.css
@@ -24,20 +24,36 @@
 .review .upvote,
 .review .downvote {
   font-size: 1.3rem;
-  color: #aaa;
+  color: var(--shadow-color);
   cursor: pointer;
 }
 
 .review .upvote.active,
 .review .upvote:hover {
-  color: dodgerblue;
+  color: var(--main-color);
 }
 
 .review .downvote.active,
 .review .downvote:hover {
-  color: rgb(215, 86, 38);
+  color: var(--accent-color);
 }
 
 .tooltip-inner {
   margin: 0;
 }
+
+.review-text-body {
+  color: var(--basic-text-color);
+}
+
+.btn {
+  color: var(--basic-text-color);
+}
+
+body.dark-mode .text-muted {
+  color: var(--basic-text-color) !important;
+}
+
+body.dark-mode .text-dark {
+  color: var(--basic-text-color) !important;
+}
\ No newline at end of file
diff --git a/tcf_website/static/reviews/review_stats.css b/tcf_website/static/reviews/review_stats.css
index 000dc351d..683f6886b 100644
--- a/tcf_website/static/reviews/review_stats.css
+++ b/tcf_website/static/reviews/review_stats.css
@@ -11,3 +11,7 @@
     font-size: 20px;
   }
 }
+
+h1, h2 {
+  color: var(--basic-text-color);
+}
\ No newline at end of file
diff --git a/tcf_website/static/schedule/schedule_editor.css b/tcf_website/static/schedule/schedule_editor.css
index cee7d0adb..f65006d5f 100644
--- a/tcf_website/static/schedule/schedule_editor.css
+++ b/tcf_website/static/schedule/schedule_editor.css
@@ -34,10 +34,12 @@
 
 .schedule_name_input_group > input {
   padding: 8px 12px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--input-border-color);
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(39, 79, 151, 0.1);
   transition: all 0.3s ease;
+  background-color: var(--input-background-color);
+  color: var(--basic-text-color);
 }
 
 .schedule_name_input_group > input:focus {
@@ -54,6 +56,7 @@
 .table td {
   padding: 10px 15px;
   text-align: left;
+  color: var(--basic-text-color);
 }
 
 .table th:last-child,
diff --git a/tcf_website/static/search/search.css b/tcf_website/static/search/search.css
index f44462c5c..b33108eee 100644
--- a/tcf_website/static/search/search.css
+++ b/tcf_website/static/search/search.css
@@ -1,5 +1,9 @@
 .search .search-results {
-  background-color: white;
+  background-color: var(--card-background-color);
+}
+
+.text-muted {
+  color: var(--basic-text-color) !important;
 }
 
 .result-nav .btn-group {
@@ -14,3 +18,15 @@
 .search-course-description {
   color: var(--accent-color);
 }
+
+body.dark-mode{
+  color: var(--basic-text-color) !important;
+}
+
+body.dark-mode .list-group-item-light,
+body.dark-mode .btn-light {
+  background-color: transparent !important;
+  color: var(--basic-text-color) !important;
+  border: none;
+  outline: none;
+}
\ No newline at end of file
diff --git a/tcf_website/templates/about/about.html b/tcf_website/templates/about/about.html
index 30c8105c1..c35fd94a8 100644
--- a/tcf_website/templates/about/about.html
+++ b/tcf_website/templates/about/about.html
@@ -37,7 +37,7 @@ <h1>theCourseForum</h1>
         <div class="about-tab col">
           <a href="#history" id="history-tab" class="btn collapsed" role="button"
              data-toggle="collapse" aria-expanded="true" aria-controls="history">
-             <h4><i class="fa fa-book"></i></h4>
+             <h4><i class="fa fa-history-book"></i></h4>
              History
           </a>
         </div>
diff --git a/tcf_website/templates/base/base.html b/tcf_website/templates/base/base.html
index f62c4c8b2..4b0799863 100644
--- a/tcf_website/templates/base/base.html
+++ b/tcf_website/templates/base/base.html
@@ -9,6 +9,7 @@
 {% endblock %}
 
 {% block body %}
+  
 <div class="d-flex" id="wrapper">
 
   {% include "base/sidebar.html" %}
diff --git a/tcf_website/templates/base/navbar.html b/tcf_website/templates/base/navbar.html
index 106d7ffda..53233ecc7 100644
--- a/tcf_website/templates/base/navbar.html
+++ b/tcf_website/templates/base/navbar.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 <header>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
 
     <!-- tCF logo -->
     <a class="navbar-brand logo-container mx-auto" href="/">
@@ -47,13 +47,65 @@
         </div>
       {% endif %}
     </div>
+    
+    <!-- Dark Mode Toggle Button -->
+    <button id="darkModeToggle" class="nav-link" style="top: 10px; right: 10px; z-index: 1000;">
+      <!-- <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 580" width="1.5em" height="1.5em" fill="currentColor"> -->
+        <!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
+        <!-- <path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/> -->
+      <!-- </svg> -->
+      <svg id="sunIcon" viewBox="0 0 24 24" width="1.3em" height="1.3em" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="5"/>
+        <line x1="12" y1="1" x2="12" y2="3"/>
+        <line x1="12" y1="21" x2="12" y2="23"/>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+        <line x1="1" y1="12" x2="3" y2="12"/>
+        <line x1="21" y1="12" x2="23" y2="12"/>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+      </svg>      
+      <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.3em" height="1.3em" fill="currentColor">
+        <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+        <path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/>
+      </svg>
+    </button>  
+
   </nav>
 </header>
 
 <script>
-// When the user clicks on <div>, open the popup
-function myFunction() {
-  var popup = document.getElementById("myPopup");
-  popup.classList.toggle("show");
-}
+  // When the user clicks on <div>, open the popup
+  function myFunction() {
+    var popup = document.getElementById("myPopup");
+    popup.classList.toggle("show");
+  }
+
+  (function () {
+    const toggleButton = document.getElementById('darkModeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const body = document.body;
+
+    function updateIcons() {
+      const isDark = body.classList.contains('dark-mode');
+      sunIcon.style.display = isDark ? 'none' : 'inline';
+      moonIcon.style.display = isDark ? 'inline' : 'none';
+    }
+
+    // Initialize on load
+    if (localStorage.getItem('dark-mode') === 'enabled') {
+      body.classList.add('dark-mode');
+    }
+    updateIcons();
+
+    // Toggle on click
+    toggleButton.addEventListener('click', function () {
+      body.classList.toggle('dark-mode');
+      const isDark = body.classList.contains('dark-mode');
+      localStorage.setItem('dark-mode', isDark ? 'enabled' : 'disabled');
+      updateIcons();
+    });
+  })();
+
 </script>
\ No newline at end of file
diff --git a/tcf_website/templates/base/sidebar.html b/tcf_website/templates/base/sidebar.html
index 5a50bd131..39ea12e2f 100644
--- a/tcf_website/templates/base/sidebar.html
+++ b/tcf_website/templates/base/sidebar.html
@@ -11,7 +11,7 @@
         <h4>
           <i class="fa fa-list" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
         </h4>
-         <p>Browse</p>
+         <p style="color: white">Browse</p>
          <hr>
       </a>
     </li>
@@ -23,7 +23,7 @@ <h4>
          <h4>
           <i class="fa fa-pencil" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
         </h4>
-        <p>Review</p>
+        <p style="color: white">Review</p>
         <hr>
       </a>
       {% else %}
@@ -33,7 +33,7 @@ <h4>
       <h4>
         <i class="fa fa-pencil" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
       </h4>
-      <p>Review</p>
+      <p style="color: white">Review</p>
       <hr>
       </a>
       {% endif %}
@@ -46,7 +46,7 @@ <h4>
          {% if request.resolver_match.url_name == 'schedule' %}active{% endif %}">
          <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-info" style="top: 12px; left: 80px; transform: translate(-50%, -50%);">New</span>
         <h4><i class="fa fa-calendar fa-fw" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i></h4>
-        <p>Schedule</p>
+        <p style="color: white">Schedule</p>
         <hr>
       </a>
       {% else %}
@@ -55,7 +55,7 @@ <h4><i class="fa fa-calendar fa-fw" aria-hidden="true" style="width: 1em; height
           {% if request.resolver_match.url_name == 'schedule' %}active{% endif %}">
         <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-info" style="top: 12px; left: 80px; transform: translate(-50%, -50%);">New</span>
         <h4><i class="fa fa-calendar fa-fw" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i></h4>
-        <p>Schedule</p>
+        <p style="color: white">Schedule</p>
         <hr>
       </a>
       {% endif %}
@@ -67,7 +67,7 @@ <h4><i class="fa fa-calendar fa-fw" aria-hidden="true" style="width: 1em; height
         <h4>
           <i class="fa fa-code" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
         </h4>
-        <p>About</p>
+        <p style="color: white">About</p>
         <hr>
       </a>
     </li>
@@ -88,7 +88,7 @@ <h4>
           <h4>
             <i class="fa fa-user" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
           </h4>
-          <p class="mb-0">Account</p>
+          <p class="mb-0" style="color: white">Account</p>
         </div>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="{% url 'profile' %}">Profile</a>
@@ -104,7 +104,7 @@ <h4>
         <h4>
           <i class="fa fa-user" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
         </h4>
-        <p>Sign In</p>
+        <p style="color: white">Sign In</p>
       </a>
     {% endif %}
     </li>
@@ -114,24 +114,24 @@ <h4>
     <ul class="icon-section">
       <li class="icon-wrapper left-icon">
         <a href="https://discord.gg/tAjzH7eyvW" aria-label="theCourseForum Discord">
-          <i class="fa fa-discord" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+          <i class="fa fa-discord" aria-hidden="true"></i>
         </a>
       </li>
       <li class="icon-wrapper left-icon">
           <a href="https://www.facebook.com/thecourseforum" aria-label="theCourseForum Facebook">
-            <i class="fa fa-facebook" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+            <i class="fa fa-facebook" aria-hidden="true"></i>
           </a>
       </li>
       <li class="icon-wrapper right-icon">
           <a href="https://www.instagram.com/thecourseforum_uva/" aria-label="theCourseForum Instagram">
-            <i class="fa fa-instagram" aria-hidden="true" style="width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+            <i class="fa fa-instagram" aria-hidden="true"></i>
           </a>
       </li>
     </ul>
 
     <a style="padding-top: 0rem;" href="{% url 'privacy' %}">Privacy</a> |
     <a style="padding-top: 0rem;" href="{% url 'terms' %}">Terms</a>
-    <p>theCourseForum <br> &copy; <span class="year"></span> v1.3.0</p>
+    <p style="color: white">theCourseForum <br> &copy; <span class="year"></span> v1.3.0</p>
     {% if DEBUG %}
     <div class="bg-tcf-blue pb-3">
       <hr class="border-white">
diff --git a/tcf_website/templates/course/course.html b/tcf_website/templates/course/course.html
index 2f3a2d8ae..19dfba39c 100644
--- a/tcf_website/templates/course/course.html
+++ b/tcf_website/templates/course/course.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="{% static 'common/rating_card.css' %}"/>
     <link rel="stylesheet" href="{% static 'common/show-hide.css' %}"/>
     <link rel="stylesheet" href="{% static 'schedule/schedule.css' %}" />
-
+    <link rel="stylesheet" href="{% static 'course/course.css' %}"/>
     <link rel="stylesheet" href="{% static 'schedule/schedule.css' %}" />
 
 {% endblock %}
diff --git a/tcf_website/templates/department/department_course.html b/tcf_website/templates/department/department_course.html
index 895f422c6..a4c6a28f1 100644
--- a/tcf_website/templates/department/department_course.html
+++ b/tcf_website/templates/department/department_course.html
@@ -6,8 +6,8 @@
         href="{% url 'course' course.subdepartment.mnemonic course.number %}"
       >
         <div class="text-center text-lg-left">
-          <h3 id="title">{{ course.subdepartment.mnemonic }} {{ course.number }}</h3>
-          <h5>{{ course.title }}</h5>
+          <h3 id="title" class="main-text">{{ course.subdepartment.mnemonic }} {{ course.number }}</h3>
+          <h5 class="main-text">{{ course.title }}</h5>
         </div>
       </a>
       <div class="col-md-8">
diff --git a/tcf_website/templates/landing/landing.html b/tcf_website/templates/landing/landing.html
index ee8e5d8b5..d3ec87ce9 100644
--- a/tcf_website/templates/landing/landing.html
+++ b/tcf_website/templates/landing/landing.html
@@ -12,6 +12,7 @@
 <!-- Custom styles for this template -->
 <link rel="stylesheet" href="{% static 'base/navbar.css' %}" />
 <link rel="stylesheet" href="{% static 'landing/landing.css' %}" />
+<link rel="stylesheet" href="{% static 'icons/icons.css' %}" />
 {% endblock %}
 
 
@@ -29,9 +30,13 @@ <h4 class="text-tcf-indigo ml-2">theCourseForum</h4>
 
             <!-- tCF History Popup -->
             <a class="ml-auto nav-link d-flex align-items-center" href="#historyPage" data-toggle="modal">
-                <a class="nav-link d-flex align-items-center" href="#historyPage" data-toggle="modal">
+                <!-- <a class="nav-link d-flex align-items-center" href="#historyPage" data-toggle="modal">
                     <img src="{% static 'icons/img/fa-clock.svg' %}" style="width: 1.2em; height: auto; vertical-align: middle; horizontal" alt="Clock Icon">
-                </a>
+                </a> -->
+                
+                <a class="nav-link d-flex align-items-center" href="#historyPage" data-toggle="modal">
+                    <i class="fas fa-clock" aria-hidden="true"></i>
+                </a> 
             </a>
 
             <!-- tCF profile dropdown -->
@@ -54,6 +59,29 @@ <h4 class="text-tcf-indigo ml-2">theCourseForum</h4>
                 </div>
                 {% endif %}
             </div>
+
+            <!-- Dark Mode Toggle Button -->
+            <button id="darkModeToggle" style="top: 10px; right: 10px; z-index: 1000;">
+                <!-- <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24" fill="currentColor"> -->
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <!-- <path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/> -->
+                <!-- </svg> -->
+                <svg id="sunIcon" viewBox="0 0 24 24" width="1.3em" height="1.3em" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="5"/>
+                    <line x1="12" y1="1" x2="12" y2="3"/>
+                    <line x1="12" y1="21" x2="12" y2="23"/>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                    <line x1="1" y1="12" x2="3" y2="12"/>
+                    <line x1="21" y1="12" x2="23" y2="12"/>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                </svg>
+                <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.3em" height="1.3em" fill="currentColor">
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/>
+                </svg>
+            </button>
         </div>
     </nav>
 
@@ -155,7 +183,7 @@ <h4 class="card-title">Write a Review</h4>
     <section class="about-team py-5 my-5">
         <div class="about-header row">
             <div class="col-lg-8 p-4 bg-tcf-indigo text-white text-right">
-                <p class="font-weight-light px-4">We'll connect you to courses you'll love, and make enrollment stress
+                <p style="color: white" class="font-weight-light px-4">We'll connect you to courses you'll love, and make enrollment stress
                     free.</p>
             </div>
             <div class="col-lg-4">
@@ -187,7 +215,7 @@ <h6 class="card-text">{{ member.name }}</h6>
                             <a href="{% url 'about' %}" class="link-unstyled">
                                 <div class="about-link card bg-tcf-orange mx-1">
                                     <div class="card-body mx-auto">
-                                        <p class="card-text text-white text-left">
+                                        <p class="card-text text-left" style="color: white">
                                             Meet the full team
                                             <i class="fa fa-arrow-right" aria-hidden="true" style = "width: 1em; height: 1em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
                                         </p>
@@ -329,25 +357,25 @@ <h2 class="mb-4">Tell us about your experience</h2>
                     <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
                         <ul class="list-inline mb-0">
                             <li class="list-inline-item mr-3">
-                                <h5>Follow
+                                <h5 style="color: white">Follow
                                     theCourseForum!</h5>
                             </li>
                             <li class="list-inline-item mr-3"
                                 style="display: inline-block; vertical-align: middle; transform: translateY(0.00rem);">
                                 <a href="https://discord.gg/tAjzH7eyvW">
-                                    <i class="fab fa-discord fa-2x fa-fw" style="width: 1.5em; height: 1.5em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+                                    <i class="fa fa-discord-lg" aria-hidden="true"></i>
                                 </a>
                             </li>
                             <li class="list-inline-item mr-3"
                                 style="display: inline-block; vertical-align: middle; transform: translateY(0.00rem);">
                                 <a href="https://www.facebook.com/thecourseforum">
-                                    <i class="fab fa-facebook fa-2x fa-fw" style="width: 1.5em; height: 1.5em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+                                    <i class="fa fa-facebook-lg" aria-hidden="true"></i>
                                 </a>
                             </li>
                             <li class="list-inline-item mr-3"
                                 style="display: inline-block; vertical-align: middle; transform: translateY(0.00rem);">
                                 <a href="https://www.instagram.com/thecourseforum_uva/">
-                                    <i class="fab fa-instagram fa-2x fa-fw" style="width: 1.5em; height: 1.5em; vertical-align: middle; display: inline-block; filter: invert(100%) brightness(150%);"></i>
+                                    <i class="fa fa-instagram-lg" aria-hidden="true"></i>
                                 </a>
                             </li>
                             <li class="list-inline-item"
@@ -387,5 +415,33 @@ <h5>Follow
             
             // Update copyright year at the bottom of landing page
             $(".year").text(new Date().getFullYear());
+
+
+            (function () {
+                const toggleButton = document.getElementById('darkModeToggle');
+                const sunIcon = document.getElementById('sunIcon');
+                const moonIcon = document.getElementById('moonIcon');
+                const body = document.body;
+
+                function updateIcons() {
+                    const isDark = body.classList.contains('dark-mode');
+                    sunIcon.style.display = isDark ? 'none' : 'inline';
+                    moonIcon.style.display = isDark ? 'inline' : 'none';
+                }
+
+                // Initialize on load
+                if (localStorage.getItem('dark-mode') === 'enabled') {
+                    body.classList.add('dark-mode');
+                }
+                updateIcons();
+
+                // Toggle on click
+                toggleButton.addEventListener('click', function () {
+                    body.classList.toggle('dark-mode');
+                    const isDark = body.classList.contains('dark-mode');
+                    localStorage.setItem('dark-mode', isDark ? 'enabled' : 'disabled');
+                    updateIcons();
+                });
+            })();
         </script>
         {% endblock %}
diff --git a/tcf_website/templates/profile/delete_confirm_modal.html b/tcf_website/templates/profile/delete_confirm_modal.html
index 1489d4a52..6e871455f 100644
--- a/tcf_website/templates/profile/delete_confirm_modal.html
+++ b/tcf_website/templates/profile/delete_confirm_modal.html
@@ -9,9 +9,9 @@ <h5 class="modal-title">Delete Profile</h5>
           </button>
         </div>
         <div class="modal-body">
-          Are you sure you want to delete your account?
+          <p>Are you sure you want to delete your account?</p>
           <br><br>
-          Deleting your account will remove any data associated with your profile (reviews, votes, etc.)
+          <p>Deleting your account will remove any data associated with your profile (reviews, votes, etc.)</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
diff --git a/tcf_website/templates/qa/delete_answer_confirm_modal.html b/tcf_website/templates/qa/delete_answer_confirm_modal.html
index 05a5a7af6..1b1ed5ac7 100644
--- a/tcf_website/templates/qa/delete_answer_confirm_modal.html
+++ b/tcf_website/templates/qa/delete_answer_confirm_modal.html
@@ -9,7 +9,7 @@ <h5 class="modal-title">Delete Answer</h5>
           </button>
         </div>
         <div class="modal-body">
-          Are you sure you want to delete this answer?
+          <p>Are you sure you want to delete this answer?</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
diff --git a/tcf_website/templates/qa/delete_question_confirm_modal.html b/tcf_website/templates/qa/delete_question_confirm_modal.html
index a006235e3..e764a9dcd 100644
--- a/tcf_website/templates/qa/delete_question_confirm_modal.html
+++ b/tcf_website/templates/qa/delete_question_confirm_modal.html
@@ -9,7 +9,7 @@ <h5 class="modal-title">Delete Question</h5>
           </button>
         </div>
         <div class="modal-body">
-          Are you sure you want to delete this question?
+          <p>Are you sure you want to delete this question?</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
diff --git a/tcf_website/templates/reviews/delete_confirm_modal.html b/tcf_website/templates/reviews/delete_confirm_modal.html
index 2ffedb15a..755d197e2 100644
--- a/tcf_website/templates/reviews/delete_confirm_modal.html
+++ b/tcf_website/templates/reviews/delete_confirm_modal.html
@@ -9,7 +9,7 @@ <h5 class="modal-title">Delete Review</h5>
         </button>
       </div>
       <div class="modal-body">
-        Are you sure you want to delete this review?
+        <p>Are you sure you want to delete this review?</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
diff --git a/tcf_website/templates/reviews/review_form_content.html b/tcf_website/templates/reviews/review_form_content.html
index 09a432ea2..9e16d36a5 100644
--- a/tcf_website/templates/reviews/review_form_content.html
+++ b/tcf_website/templates/reviews/review_form_content.html
@@ -78,7 +78,7 @@ <h2 class="h4 review-form-header col-12 p-0 my-4">
       </div>
       <div class="mt-3">
           <label for="enjoyability" class="m-0">
-            <i class="far fa-smile-beam"></i> Enjoyability
+            <i class="fas fa-smile-beam"></i> Enjoyability
           </label>
           <div class="row">
               <div class="col-xl-9 col-8 py-2">
@@ -149,7 +149,7 @@ <h2 class="h4 review-form-header p-0 my-4">
       <div class="row py-3">
         <div class="col-8">
           <label for="amount_writing">
-            <i class="fas fa-pencil-alt"></i> Writing
+            <i class="fas fa-pencil"></i> Writing
           </label>
         </div>
         <div class="col-4">
diff --git a/tcf_website/templates/reviews/user_reviews.html b/tcf_website/templates/reviews/user_reviews.html
index 994ac27f9..fa679d794 100644
--- a/tcf_website/templates/reviews/user_reviews.html
+++ b/tcf_website/templates/reviews/user_reviews.html
@@ -12,7 +12,7 @@
     <div class="my-reviews-header d-flex flex-sm-row flex-column mb-4">
         <h1 class="h2 mt-2 mb-0">My reviews</h1>
         <a class="ml-sm-auto mt-2 btn bg-tcf-orange text-white" href="{% url 'new_review' %}" >
-            <i class="fa fa-pencil" aria-hidden="true"></i> New review
+            <i class="fa fa-plus" aria-hidden="true"></i> New review
         </a>
     </div>
     {% include "reviews/review_stats.html" with total_reviews_written=total_reviews_written total_review_upvotes=total_review_upvotes average_review_rating=average_review_rating %}
diff --git a/tcf_website/templates/schedule/delete_schedule_modal.html b/tcf_website/templates/schedule/delete_schedule_modal.html
index 9caf02ed6..894c00b97 100644
--- a/tcf_website/templates/schedule/delete_schedule_modal.html
+++ b/tcf_website/templates/schedule/delete_schedule_modal.html
@@ -38,7 +38,7 @@ <h5 class="modal-title">Delete Schedule</h5>
                     </label>
                 </div>
                 {% empty %}
-                <div>You haven't made any schedules yet!</div>
+                <p>You haven't made any schedules yet!</p>
                 {% endfor %}
                 <div class="ml-sm-auto d-flex justify-content-end">
                     <button id="delete_schedule_select_btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmDeleteModal" disabled>
@@ -62,7 +62,7 @@ <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
                 </button>
             </div>
             <div class="modal-body border-0">
-                Are you sure you want to delete the selected schedules?
+                <p>Are you sure you want to delete the selected schedules?</p>
             </div>
             <div class="modal-footer border-0 d-flex justify-content-center">
                 <button type="button" class="btn btn-secondary" id="cancelDeleteBtn">Cancel</button>
diff --git a/tcf_website/templates/schedule/schedule.html b/tcf_website/templates/schedule/schedule.html
index 57fa6efdc..e03be6d93 100644
--- a/tcf_website/templates/schedule/schedule.html
+++ b/tcf_website/templates/schedule/schedule.html
@@ -157,7 +157,7 @@ <h6>{{ course.instructor|remove_email }}</h6>
 
                     </li>
                     {% empty %}
-                        <span id="no_courses_span">Schedule has no courses!</span>
+                        <span id="no_courses_span" style="color: var(--basic-text-color)">Schedule has no courses!</span>
                     {% endfor %}
 
                 </ul>
diff --git a/tcf_website/templates/schedule/schedule_editor.html b/tcf_website/templates/schedule/schedule_editor.html
index 16cbc6956..b313f62c7 100644
--- a/tcf_website/templates/schedule/schedule_editor.html
+++ b/tcf_website/templates/schedule/schedule_editor.html
@@ -11,7 +11,7 @@
         
         <input type="hidden" id="schedule_id_input" name="schedule_id" value="{{schedule.id}}">
         <div class="schedule_name_input_group">
-            <span for="schedule_name_input">Schedule Name: </span>
+            <p for="schedule_name_input">Schedule Name: </p>
             <input type="text" id="schedule_name_input" name="schedule_name" value="{{schedule.name}}" maxlength="15">
         </div>
         <table class="table">
diff --git a/tcf_website/templates/schedule/select_schedule_modal.html b/tcf_website/templates/schedule/select_schedule_modal.html
index e3b34cb47..b6a56a43c 100644
--- a/tcf_website/templates/schedule/select_schedule_modal.html
+++ b/tcf_website/templates/schedule/select_schedule_modal.html
@@ -37,7 +37,7 @@ <h5 class="modal-title">Select Schedule</h5>
               </div>
             {% empty %}
             <!-- TODO: either present a link to the user to make a schedule or allow them to make one here in the modal -->
-            <div>You haven't made any schedules yet!</div>
+            <p>You haven't made any schedules yet!</p>
             {% endfor %}
             <div class="ml-sm-auto d-flex justify-content-end">
               <button id="schedule_select_btn"  type="submit" value="Submit" class="btn btn-primary" disabled>
diff --git a/tcf_website/templates/schedule/user_schedules.html b/tcf_website/templates/schedule/user_schedules.html
index 8ad2968fd..3b0427747 100644
--- a/tcf_website/templates/schedule/user_schedules.html
+++ b/tcf_website/templates/schedule/user_schedules.html
@@ -38,14 +38,14 @@ <h1 class="h2 mt-2 mb-0" id="schedule_header">My Schedules</h1>
                 {% include "schedule/schedule.html" with courses=courses|get_item:s.id gpa=schedules_gpa|get_item:s.id rating=ratings|get_item:s.id difficulty=difficulty|get_item:s.id schedule=s credits=credits|get_item:s.id %}
                 <div class="d-flex justify-content-center mt-1 mb-2">
                     <a href="{% url 'duplicate_schedule' s.id %}" class=" btn bg-tcf-orange text-white" type="button">
-                        <i class="fa fa-copy invert-to-light" aria-hidden="true"></i> Make a Copy 
+                        <i class="fa fa-copy" aria-hidden="true"></i> Make a Copy 
                     </a>
                 </div>
 
             </div>
         </li>
         {% empty %}
-        <div>You haven't made any schedules yet!</div>
+        <p>You haven't made any schedules yet!</p>
         {% endfor %}
     </ul>
 </div>
diff --git a/tcf_website/templates/search/search.html b/tcf_website/templates/search/search.html
index f077d0bae..7218290c3 100644
--- a/tcf_website/templates/search/search.html
+++ b/tcf_website/templates/search/search.html
@@ -66,7 +66,7 @@ <h5><a href="{% url 'department' dept_id=dept_data.dept_id %}">{{ dept }} / {{ d
                       {% for c in dept_data.courses %}
                         {% if c != dept_data.courses.0 %}
                         {% endif %}
-                        <div class="list-group-item list-group-item-light text-dark p-2">
+                        <div class="list-group-item list-group-item-light text-dark p-2" style="border: 1px solid var(--input-border-color)">
                           <div class="row">
                             <div class="col-md-11 align-self-center">
                                 <a href="{% url 'course' mnemonic=c.mnemonic course_number=c.number %}">
@@ -85,7 +85,7 @@ <h5><a href="{% url 'department' dept_id=dept_data.dept_id %}">{{ dept }} / {{ d
                             </div>
                           </div>
                           <div class="collapse" id="description_container_{{forloop.parentloop.counter}}_{{forloop.counter}}">
-                            <hr>
+                            <hr style="border-top: 1px solid var(--input-border-color)">
                             <p>
                               <small class="text-uppercase search-course-description" style="font-size: 15px;">
                                 Course Description:
diff --git a/tcf_website/templates/search/searchbar.html b/tcf_website/templates/search/searchbar.html
index 3e4c1ef8b..d30af92ca 100644
--- a/tcf_website/templates/search/searchbar.html
+++ b/tcf_website/templates/search/searchbar.html
@@ -98,7 +98,7 @@ <h6 class="filter-header">
               <h6 class="filter-header">
                 Availability
               </h6>
-              <div class="form-check d-inline-flex align-items-center" style="background: white; border: 1px solid #cbd5e0; border-radius: 6px; padding: 0.55rem 0.67rem;">
+              <div class="form-check d-inline-flex align-items-center custom-form-check">
                 <input 
                   class="form-check-input me-2" 
                   type="checkbox" 
@@ -516,15 +516,20 @@ <h6 class="filter-header">
   }
 
   .time-selection {
-    background: white;
-    border: 1px solid #cbd5e0;
+    background: var(--filter-input-background-color);
+    border: 1px solid var(--input-border-color);
     border-radius: 6px;
     padding: 0.4rem 0.4rem;
+    color: var(--basic-text-color);
+  }
+
+  .time-selection::-webkit-calendar-picker-indicator {
+    filter: invert(1);
   }
 
   .day-toggles .form-check-inline {
-    background: white;
-    border: 1px solid #cbd5e0;
+    background: var(--filter-input-background-color);
+    border: 1px solid var(--input-border-color);
     border-radius: 6px;
     padding: 0.55rem 0.67rem;
     transition: all 0.15s ease;
@@ -536,10 +541,17 @@ <h6 class="filter-header">
   }
 
   .day-toggles .form-check-inline:hover {
-    background: #f7fafc;
+    background: var(--filter-input-background-color);
     border-color: #90cdf4;
   }
 
+  .custom-form-check {
+    background: var(--filter-input-background-color);
+    border: 1px solid var(--input-border-color);
+    border-radius: 6px;
+    padding: 0.55rem 0.67rem;
+  }
+
   .form-check-input:checked {
     accent-color: #d75626;
   }
@@ -561,11 +573,11 @@ <h6 class="filter-header">
   .subject-list, .discipline-list {
     max-height: 150px;
     overflow-y: auto;
-    border: 1px solid #cbd5e0;
+    border: 1px solid var(--input-border-color);
     border-radius: 8px;
     padding: 0.75rem;
     margin-top: 0.5rem;
-    background: #fff;
+    background: var(--filter-input-background-color);
     min-height: 200px;
   }
 
@@ -602,10 +614,9 @@ <h6 class="filter-header">
   }
 
   .form-check:hover {
-    background-color: #f7fafc;
+    background-color: var(--filter-input-background-color);
     border-radius: 4px;
   }
-  
 
   .form-check-label {
     display: flex;
@@ -629,6 +640,11 @@ <h6 class="filter-header">
     outline: none !important;
   }
 
+  .btn-outline-secondary {
+    color: var(--basic-text-color);
+    border-color: var(--input-border-color);
+  }
+
   .btn-custom:hover {
       background-color: #b4441d; 
       border-color: #b4441d;