diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 600665ff7..c31d1ee62 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
         working-directory: ./backend
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
       - run: npm ci
@@ -33,7 +33,7 @@ jobs:
         working-directory: ./frontend
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci
@@ -46,7 +46,7 @@ jobs:
         working-directory: ./migration
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci
diff --git a/frontend/src/components/CourseCard/CourseCard.tsx b/frontend/src/components/CourseCard/CourseCard.tsx
index 1711a594b..b9e871131 100644
--- a/frontend/src/components/CourseCard/CourseCard.tsx
+++ b/frontend/src/components/CourseCard/CourseCard.tsx
@@ -19,7 +19,7 @@ export default function CourseCard({
   terms,
 }: CourseCardProps) {
   return (
-    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-gray-100 dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
+    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-[#eff0f2] dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
       {/* Course courseCode + Ratings */}
       <div className='flex flex-wrap justify-between text-2xl gap-x-4'>
         <h2 className='font-bold w-[8ch] text-black dark:text-white'>
diff --git a/frontend/src/components/FilterModal/FilterModal.tsx b/frontend/src/components/FilterModal/FilterModal.tsx
index ce40b02b2..ae27301d0 100644
--- a/frontend/src/components/FilterModal/FilterModal.tsx
+++ b/frontend/src/components/FilterModal/FilterModal.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Dropdown from "../Dropdown/Dropdown";
 import { useState } from "react";
 import { Dialog } from "@headlessui/react";
+import { Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";
 import { Course } from "@/types/api";
@@ -105,15 +106,6 @@ export default function FilterModal({
       }
     });
 
-    // Show secret message if specific filters are selected
-    if (
-      selectedFaculties.includes("Arts") &&
-      selectedTerms.includes("-1") &&
-      selectedTerms.includes("-2")
-    ) {
-      alert("Alss aol zlhyjo ihy...");
-    }
-
     setFilters({ faculties: selectedFaculties, terms: selectedTerms });
 
     setOpen(false);
@@ -157,93 +149,108 @@ export default function FilterModal({
 
   return (
     <>
-      {/* filter button */}
-      <div className="mt-4 min-w-[140px] xs:min-w-1/2">
-        <button
-          className="relative flex items-center dark:text-white dark:bg-gray-900 justify-between gap-2 w-full cursor-pointer py-2 px-4 text-left text-[#989898] border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none"
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          Filter
-          <AdjustmentsHorizontalIcon className="w-4 h-4 rounded-full dark:text-white text-black" />
-        </button>
-      </div>
-
-      {/* filter dialog */}
-      <Dialog open={open} onClose={handleClose}>
-        {/* the blurred backdrop */}
-        <div
-          className="fixed inset-0 bg-black/30 backdrop-blur-sm z-10"
-          aria-hidden="true"
-        />
-
-        {/* Full-screen container to center the panel */}
-        <div className="fixed inset-0 flex w-screen items-center justify-center pl-20 z-10 ">
-          {/* The actual dialog panel  */}
-          <Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full">
-            <button className="w-6 h-6 place-self-end" onClick={handleClose}>
-              <XMarkIcon />
-            </button>
-            <Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
-              Filter by:
-            </Dialog.Title>
-            <Dialog.Description className="text-xl font-semibold mb-2 ">
-              Faculty
-            </Dialog.Description>
-            {/* display the faculty tags */}
-            <div className="flex flex-wrap mb-4">
-              {faculties.map((faculty, index) => {
-                return styledFilterButton(
-                  "faculty",
-                  index,
-                  facultiesCheckedState[index],
-                  faculty,
-                );
-              })}
-            </div>
-            <Dialog.Description className="text-xl font-semibold mb-2">
-              Term
-            </Dialog.Description>
-            {/* display the term tags */}
-            <div className="sm:hidden flex flex-wrap mb-4">
-              {terms.map((term, index) => {
-                return styledFilterButton(
-                  "term",
-                  index,
-                  termsCheckedState[index],
-                  term,
-                );
-              })}
-            </div>
-            <div className="sm:flex hidden flex-wrap mb-4 ">
-              {termsShortened.map((term, index) => {
-                return styledFilterButton(
-                  "term",
-                  index,
-                  termsCheckedState[index],
-                  term,
-                );
-              })}
-            </div>
+      <div>
+        {/* filter button */}
+        <div className="mt-4 min-w-[140px] xs:min-w-1/2">
+          <button
+            className="relative flex items-center dark:text-white dark:bg-gray-900 justify-between gap-2 w-full cursor-pointer py-2 px-4 text-left text-[#989898] border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none"
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            Filter
+            <AdjustmentsHorizontalIcon className="w-4 h-4 rounded-full dark:text-white text-black" />
+          </button>
+        </div>
 
-            <div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
-              <button
-                className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
-                onClick={handleClearAll}
-              >
-                Clear All
-              </button>
-              <button
-                className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
-                onClick={handleApply}
+        {/* filter dialog */}
+        <Transition show={open}>
+          <Dialog
+            open={open}
+            onClose={handleClose}
+            className="fixed inset-0 z-10"
+          >
+            {/* Backdrop */}
+            <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
+            {/* Modal content wrapper */}
+            <div className="fixed left-20 right-0 top-0 bottom-0 flex items-center justify-center p-4">
+              <Transition.Child
+                enter="transition-transform ease-out duration-700"
+                enterFrom="opacity-0 scale-90"
+                enterTo="opacity-100 scale-100"
+                leave="transition-transform ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
               >
-                Apply
-              </button>
+                <Dialog.Panel className="mx-auto w-full max-w-[350px] p-6 rounded dark:bg-gray-900 bg-white flex flex-col">
+                  <button
+                    className="w-6 h-6 place-self-end"
+                    onClick={handleClose}
+                  >
+                    <XMarkIcon />
+                  </button>
+                  <Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
+                    Filter by:
+                  </Dialog.Title>
+                  <Dialog.Description className="text-xl font-semibold mb-2 ">
+                    Faculty
+                  </Dialog.Description>
+                  {/* display the faculty tags */}
+                  <div className="flex flex-wrap mb-4">
+                    {faculties.map((faculty, index) => {
+                      return styledFilterButton(
+                        "faculty",
+                        index,
+                        facultiesCheckedState[index],
+                        faculty,
+                      );
+                    })}
+                  </div>
+                  <Dialog.Description className="text-xl font-semibold mb-2">
+                    Term
+                  </Dialog.Description>
+                  {/* display the term tags */}
+                  <div className="sm:hidden flex flex-wrap mb-4">
+                    {terms.map((term, index) => {
+                      return styledFilterButton(
+                        "term",
+                        index,
+                        termsCheckedState[index],
+                        term,
+                      );
+                    })}
+                  </div>
+                  <div className="sm:flex hidden flex-wrap mb-4 ">
+                    {termsShortened.map((term, index) => {
+                      return styledFilterButton(
+                        "term",
+                        index,
+                        termsCheckedState[index],
+                        term,
+                      );
+                    })}
+                  </div>
+
+                  <div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
+                    <button
+                      className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
+                      onClick={handleClearAll}
+                    >
+                      Clear All
+                    </button>
+                    <button
+                      className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
+                      onClick={handleApply}
+                    >
+                      Apply
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
-          </Dialog.Panel>
-        </div>
-      </Dialog>
+          </Dialog>
+        </Transition>
+      </div>
     </>
   );
 }
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index aa4860d6a..7351fb7e4 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -67,7 +67,7 @@ export default function Navbar({ userZid }: NavbarProps) {
       ref={ref}
       className={
         collapsed
-          ? "fixed flex flex-col items-center w-20 h-screen gap-4 p-4 duration-150 bg-gray-50 dark:bg-slate-700 z-50 xs:p-2 xs:w-15 xs:gap-2"
+          ? "fixed flex flex-col items-center w-20 h-screen gap-4 p-4 duration-150 bg-gray-100 dark:bg-slate-700 z-50 xs:p-2 xs:w-15 xs:gap-2"
           : "fixed flex flex-col w-72 h-screen gap-4 p-4 bg-gray-50 dark:bg-slate-700 z-40 duration-150"
       }
     >
diff --git a/frontend/src/components/ReviewCard/ReviewCard.tsx b/frontend/src/components/ReviewCard/ReviewCard.tsx
index 8cd966f7d..5b40c653d 100644
--- a/frontend/src/components/ReviewCard/ReviewCard.tsx
+++ b/frontend/src/components/ReviewCard/ReviewCard.tsx
@@ -88,7 +88,7 @@ export default function ReviewCard({
   };
 
   return (
-    <div className='px-10 py-5 space-y-2 shadow-review-card rounded-md bg-white dark:bg-slate-800 dark:shadow-slate-700/90 duration-150 isolate'>
+    <div className='px-10 py-5 space-y-2 shadow-review-card rounded-md bg-[#fafafa] dark:bg-[#273346] dark:shadow-slate-700/90 duration-150 isolate'>
       {/* Title + Date */}
       <div className='flex items-center gap-2 flex-wrap justify-between'>
         <h2 className='font-bold'>{review.title ? review.title : "-"}</h2>
diff --git a/frontend/src/components/ReviewsBar/ReviewsBar.tsx b/frontend/src/components/ReviewsBar/ReviewsBar.tsx
index 7b2f8ccc0..60c05bd5c 100644
--- a/frontend/src/components/ReviewsBar/ReviewsBar.tsx
+++ b/frontend/src/components/ReviewsBar/ReviewsBar.tsx
@@ -21,7 +21,6 @@ export default function ReviewsBar({
   const [currentReviews, setCurrentReviews] = useState(reviews ? reviews : []);
   const [allBookmarkedReviews, setAllBookmarkedReviews] =
     useState(bookmarkedReviews);
-  const [displayTextReview, setDisplayTextReview] = useState(false);
   const [selected, setSelected] = useState("Most Recent");
 
   // Change review sorting based on dropdown
@@ -51,14 +50,10 @@ export default function ReviewsBar({
         break;
     }
 
-    if (!displayTextReview) {
-      return setCurrentReviews(sortedReviews);
-    }
-
     setCurrentReviews(
       sortedReviews.filter((r: Review) => r.title || r.description)
     );
-  }, [displayTextReview, selected]);
+  }, [selected]);
 
   return (
     <div className="space-y-5 isolate">
@@ -90,14 +85,6 @@ export default function ReviewsBar({
       {/* Switch */}
       {currentReviewRef.current && currentReviewRef.current.length !== 0 && (
         <>
-          <div className="flex items-center flex-wrap gap-1">
-            <ToggleSwitch
-              defaultValue={displayTextReview}
-              onChange={setDisplayTextReview}
-              accessibleTitle="Text only reviews"
-            />
-            <span>Text only reviews</span>
-          </div>
           {/* Reviews */}
           {currentReviews.map((review: Review, index: number) => (
             <ReviewCard
diff --git a/frontend/src/components/UserBookmarkedReviews/UserBookmarkedReviews.tsx b/frontend/src/components/UserBookmarkedReviews/UserBookmarkedReviews.tsx
index 5a33e5399..c83a1afc6 100644
--- a/frontend/src/components/UserBookmarkedReviews/UserBookmarkedReviews.tsx
+++ b/frontend/src/components/UserBookmarkedReviews/UserBookmarkedReviews.tsx
@@ -4,7 +4,7 @@ import { Review, Reviews, TabsType } from "@/types/api";
 import Dropdown from "../Dropdown/Dropdown";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Rating from "../Rating/Rating";
-import { BookmarkIcon } from "@heroicons/react/24/solid";
+import { BookmarkIcon, LinkIcon } from "@heroicons/react/24/solid";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 import Pagination from "../Pagination/Pagination";
 import { validatedReq } from "@/utils/request";
@@ -105,17 +105,19 @@ export default function UserBookmarkedReviews({
           />
         </div>
         {/* Toggle Switch */}
-        <div className='flex ml-auto gap-2'>
-          <span>Card</span>
-          <div className='-scale-1'>
-            <ToggleSwitch
-              accessibleTitle='card-list-view'
-              defaultValue={cardView}
-              onChange={setCardView}
-            />
+        {reviews.length > 0 && (
+          <div className='flex ml-auto gap-2'>
+            <span>Card</span>
+            <div className='-scale-1'>
+              <ToggleSwitch
+                accessibleTitle='card-list-view'
+                defaultValue={cardView}
+                onChange={setCardView}
+              />
+            </div>
+            <span>List</span>
           </div>
-          <span>List</span>
-        </div>
+        )}
       </div>
       {/* Reviews */}
       {/* List view */}
@@ -130,7 +132,14 @@ export default function UserBookmarkedReviews({
               >
                 <div className='flex w-1/2 sm:w-full sm:flex-col sm:items-start items-center gap-2'>
                   {/* Title */}
-                  <h1 className='font-bold text-xl'>{review.courseCode}</h1>
+                  <a
+                    href={`/course/${review.courseCode}`}
+                    className='flex items-center gap-2 font-bold hover:text-unilectives-blue/75 duration-150'
+                  >
+                    <LinkIcon className='w-5 h-5' />
+                    <span className='truncate'>{review.courseCode}</span>
+                  </a>
+
                   {/* Description */}
                   <p className='text-unilectives-headings dark:text-gray-100 w-full truncate'>
                     {!review.description ? "-" : review.description}
@@ -157,13 +166,19 @@ export default function UserBookmarkedReviews({
             .map((review: Review, index: number) => (
               <div
                 key={index}
-                className='box-border isolate px-6 py-7 bg-unilectives-card dark:bg-slate-700 shadow-lg shadow-gray-600 rounded-xl space-y-4'
+                className='box-border isolate px-6 py-7 bg-unilectives-card dark:bg-slate-700 hover:bg-[#eff0f2] dark:hover:bg-slate-700/10 shadow-lg shadow-gray-600 rounded-xl space-y-4'
               >
                 {/* Course courseCode + Ratings */}
                 <div className='flex flex-wrap justify-between text-2xl'>
-                  <h1 className='font-bold block truncate'>
-                    {review.courseCode}
-                  </h1>
+                <a
+                  href={`/course/${review.courseCode}`}
+                  className='font-bold hover:text-unilectives-blue/75 duration-150 truncate'
+                >
+                  <div className='flex items-center gap-2'>
+                    <span className='block truncate'>{review.courseCode}</span>
+                    <LinkIcon className='w-4 h-4' />
+                  </div>
+                </a>
                   <div className='text-right'>
                     {/* StarRating */}
                     <div className='text-2xl inline'>
diff --git a/frontend/src/components/UserReports/UserReports.tsx b/frontend/src/components/UserReports/UserReports.tsx
index 6141e827f..50c1cd78c 100644
--- a/frontend/src/components/UserReports/UserReports.tsx
+++ b/frontend/src/components/UserReports/UserReports.tsx
@@ -10,7 +10,6 @@ import {
 } from "react";
 import Dropdown from "../Dropdown/Dropdown";
 import Pagination from "../Pagination/Pagination";
-import ReviewCard from "../ReviewCard/ReviewCard";
 
 type STATUS = {
   UNSEEN: boolean;
diff --git a/frontend/src/components/UserReviews/UserReviews.tsx b/frontend/src/components/UserReviews/UserReviews.tsx
index 9638d3193..0a592d849 100644
--- a/frontend/src/components/UserReviews/UserReviews.tsx
+++ b/frontend/src/components/UserReviews/UserReviews.tsx
@@ -105,17 +105,19 @@ export default function UserReviews({
           />
         </div>
         {/* Toggle Switch */}
-        <div className='flex ml-auto gap-2'>
-          <span>Card</span>
-          <div className='-scale-1'>
-            <ToggleSwitch
-              accessibleTitle='card-list-view'
-              defaultValue={cardView}
-              onChange={setCardView}
-            />
+        {reviews.length > 0 && (
+          <div className='flex ml-auto gap-2'>
+            <span>Card</span>
+            <div className='-scale-1'>
+              <ToggleSwitch
+                accessibleTitle='card-list-view'
+                defaultValue={cardView}
+                onChange={setCardView}
+              />
+            </div>
+            <span>List</span>
           </div>
-          <span>List</span>
-        </div>
+        )}
       </div>
       {/* Reviews */}
       {/* List view */}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ee037cf01..83718bcf9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,7 +25,7 @@ module.exports = {
         "unilectives-subheadings": "#989898",
         "unilectives-placeholder": "#606060",
         "unilectives-tags": "#CCEBF6",
-        "unilectives-card": "#FAFAFA",
+        "unilectives-card": "#f6f6f6",
         "unilectives-light-blue": "#84CEE7",
         "unilectives-purple": "#B789E5",
         "unilectives-indigo": "#9BADE8",