diff --git a/client/src/modules/Results/Components/PreviewCard.tsx b/client/src/modules/Results/Components/PreviewCard.tsx
index fb8dcd7c..5d97e91f 100644
--- a/client/src/modules/Results/Components/PreviewCard.tsx
+++ b/client/src/modules/Results/Components/PreviewCard.tsx
@@ -21,6 +21,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
   const [topReview, setTopReview] = useState<ReviewType | {}>();
   const [numReviews, setNumReviews] = useState(0);
   const [topReviewLikes, setTopReviewLikes] = useState(0);
+  const [offered, setOffered] = useState('');
 
   useEffect(() => {
     if (course) {
@@ -29,16 +30,18 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
   }, [course]);
 
   const updateGauges = () => {
-    setId(course._id);
-    setRating(course.classRating ? String(course.classRating) : '-');
-    setDiff(course.classDifficulty ? String(course.classDifficulty) : '-');
-    setWorkload(course.classWorkload ? String(course.classWorkload) : '-');
-    updateTopReview();
+    if (course) {
+      setId(course._id);
+      setRating(course.classRating ? String(course.classRating) : '-');
+      setDiff(course.classDifficulty ? String(course.classDifficulty) : '-');
+      setWorkload(course.classWorkload ? String(course.classWorkload) : '-');
+      updateTopReview();
+    }
   };
 
   const updateTopReview = () => {
     axios
-      .post(`/api/courses/get-reviews`, { courseId: course._id })
+      .post(`/api/courses/get-reviews`, { courseId: course ? course._id : id })
       .then((response) => {
         const reviews = response.data.result;
         if (reviews && reviews.length > 0) {
@@ -48,6 +51,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
           setTopReview(reviews[0]);
           setTopReviewLikes(reviews[0].likes || 0);
           setNumReviews(reviews.length);
+          setOffered(lastOfferedSems(course));
         } else {
           setTopReview({});
           setNumReviews(0);
@@ -57,10 +61,11 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
 
   if (!course) {
     // Return fallback if course is undefined
-    return <></>;
+    return (
+      <></>
+    );
   }
 
-  const offered = lastOfferedSems(course);
   return (
     <div className={styles.container}>
       <div>
@@ -108,7 +113,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
           </a>
         )}
 
-        {numReviews === 0 && (
+        {numReviews === 0 && topReview !== undefined && (
           <>
             <img src={Bear} alt="Bear Icon" className={styles.bearicon} />
             <div className={styles.noreviews}>
diff --git a/client/src/modules/Results/Components/Results.tsx b/client/src/modules/Results/Components/Results.tsx
index 65e91f10..b1e70fb9 100644
--- a/client/src/modules/Results/Components/Results.tsx
+++ b/client/src/modules/Results/Components/Results.tsx
@@ -33,8 +33,8 @@ export const Results = ({match, history}: ResultsProps) => {
     const response = await axios.post(`/api/search/get-courses`, {
       query: match.params.input.toLowerCase()
     });
-    const courseList = response.data.result.courses;
-    setCourseList(!courseList.error && courseList.length > 0 ? courseList : []);
+    const list = response.data.result.courses;
+    setCourseList(!list.error && list.length > 0 ? list : []);
     setLoading(false);
   }
 
diff --git a/client/src/modules/Results/Components/ResultsDisplay.tsx b/client/src/modules/Results/Components/ResultsDisplay.tsx
index 06750d69..19dd1059 100644
--- a/client/src/modules/Results/Components/ResultsDisplay.tsx
+++ b/client/src/modules/Results/Components/ResultsDisplay.tsx
@@ -9,6 +9,7 @@ import FilterIcon from '../../../assets/icons/filtericon.svg';
 
 import styles from '../Styles/Results.module.css';
 import { Class } from 'common';
+import Bear from '/surprised_bear.svg';
 
 /*
   ResultsDisplay Component.a
@@ -101,6 +102,7 @@ export const ResultsDisplay = ({
     fieldDefault: number,
     increasing: boolean
   ) => {
+    if (courseList.length === 0) return;
     const sorted = [...courseList].sort((a, b) => {
       const first = Number(b[sortByField]) || fieldDefault;
       const second = Number(a[sortByField]) || fieldDefault;
@@ -215,25 +217,27 @@ export const ResultsDisplay = ({
    * The original list as FilteredResult components otherwise
    */
   const renderResults = () => {
-    const items = filteredItems.length ? filteredItems : courseList;
-
-    return items.map((result, index) => (
-      <div
-        className={styles.filteredresults}
-        data-cy={`results-display-${result.classSub.toLowerCase()}-${
-          result.classNum
-        }`}
-      >
-        <FilteredResult
-          key={index}
-          index={index}
-          selected={index === activeCard}
-          course={result}
-          previewHandler={previewHandler}
-          sortBy={selected}
-        />
-      </div>
-    ));
+    if (filteredItems.length === 0) {
+      return <></>
+    } else {
+      return filteredItems.map((result, index) => (
+        <div
+          className={styles.filteredresults}
+          data-cy={`results-display-${result.classSub.toLowerCase()}-${
+            result.classNum
+          }`}
+        >
+          <FilteredResult
+            key={index}
+            index={index}
+            selected={index === activeCard}
+            course={result}
+            previewHandler={previewHandler}
+            sortBy={selected}
+          />
+        </div>
+      ));
+    }
   };
 
   const renderCheckboxes = (group: string) => {
@@ -259,23 +263,16 @@ export const ResultsDisplay = ({
 
   return (
     <div className={styles.container}>
-      {(loading || courseList.length === 0) && <h1> Search Results </h1>}
-      {/* Case where results are still being loaded */}
-      {loading && <Loading />}
-      {/* Case where no results returned */}
-      {courseList.length === 0 && !loading && (
-        <div>
-          <img
-            src="/noResults.svg"
-            className={styles.noresultimg}
-            alt="No class found"
-          />
-          <div>Sorry! No classes match your search.</div>
-        </div>
+      {loading && (
+        <>
+          <h1> Search Results </h1>
+          <Loading />
+        </>
       )}
-      {/* Case where results are returned (non-empty) */}
-      {courseList.length !== 0 && !loading && (
+      {/* Case where results are returned, even if zero */}
+      {!loading && (
         <div className={styles.layout} data-cy="results-display">
+          {/* Case where no results returned */}
           <div className={styles.leftbar}>
             <h1> Search Results </h1>
             {/*<button*/}
@@ -297,72 +294,110 @@ export const ResultsDisplay = ({
                 </div>
               </div>
 
-              <div className={styles.columns}>
-                {searchListViewEnabled && (
-                  <>
-                    <div>
-                      We found{' '}
-                      <b>
-                        {filteredItems.length === 0
-                          ? courseList.length
-                          : filteredItems.length}
-                      </b>{' '}
-                      courses for &quot;{userInput}
-                      &quot;
-                    </div>
-                    <div className={styles.filtersortbuttons}>
-                      <div className={styles.bar}>
-                        <div>
-                          <label>Sort By: </label>
-                          <select
-                            value={selected}
-                            className={styles.sortselector}
-                            onChange={(e) => handleSelect(e)}
+              {filteredItems.length !== 0 && (
+                <div className={styles.columns}>
+                  {searchListViewEnabled && (
+                    <>
+                      <div>
+                        We found <b>{filteredItems.length}</b> courses for &quot;
+                        {userInput}
+                        &quot;
+                      </div>
+                      <div className={styles.filtersortbuttons}>
+                        <div className={styles.bar}>
+                          <div>
+                            <label>Sort By: </label>
+                            <select
+                              value={selected}
+                              className={styles.sortselector}
+                              onChange={(e) => handleSelect(e)}
+                            >
+                              <option value="relevance">Relevance</option>
+                              <option value="rating">Overall Rating</option>
+                              <option value="diff">Difficulty</option>
+                              <option value="work">Workload</option>
+                            </select>
+                          </div>
+
+                          <button
+                            className={styles.filterbutton}
+                            onClick={() => setShowFilterPopup(!showFilterPopup)}
                           >
-                            <option value="relevance">Relevance</option>
-                            <option value="rating">Overall Rating</option>
-                            <option value="diff">Difficulty</option>
-                            <option value="work">Workload</option>
-                          </select>
+                            Filter <img src={FilterIcon} alt="filter-icon" />
+                          </button>
                         </div>
-
-                        <button
-                          className={styles.filterbutton}
-                          onClick={() => setShowFilterPopup(!showFilterPopup)}
-                        >
-                          Filter <img src={FilterIcon} alt="filter-icon" />
-                        </button>
+                        {showFilterPopup && (
+                          <FilterPopup
+                            renderCheckboxes={renderCheckboxes}
+                            setShowFilterPopup={() =>
+                              setShowFilterPopup(!showFilterPopup)
+                            }
+                          />
+                        )}
                       </div>
-                      {showFilterPopup && (
-                        <FilterPopup
-                          renderCheckboxes={renderCheckboxes}
-                          setShowFilterPopup={() =>
-                            setShowFilterPopup(!showFilterPopup)
-                          }
-                        />
-                      )}
-                    </div>
-                    <div className={styles.layout}>
-                      <div className={styles.list}>
-                        <div className={styles.resultslist}>
-                          <ul>{renderResults()}</ul>
+                      <div className={styles.layout}>
+                        <div className={styles.list}>
+                          <div className={styles.resultslist}>
+                            <ul>{renderResults()}</ul>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </>
-                )}
+                    </>
+                  )}
               </div>
+              )}
+              {filteredItems.length === 0 && (
+                <div className={styles.columns}>
+                  {searchListViewEnabled && (
+                    <>
+                      <div className={styles.filtersortbuttons}>
+                        <div className={styles.bar}>
+                          <button
+                            className={styles.filterbutton}
+                            onClick={() => setShowFilterPopup(!showFilterPopup)}
+                          >
+                            Filter <img src={FilterIcon} alt="filter-icon" />
+                          </button>
+                        </div>
+                        {showFilterPopup && (
+                          <FilterPopup
+                            renderCheckboxes={renderCheckboxes}
+                            setShowFilterPopup={() =>
+                              setShowFilterPopup(!showFilterPopup)
+                            }
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           </div>
 
-          <div className={styles.preview}>
-            <div className={styles.previewcard}>
-              <PreviewCard
-                course={cardCourse}
-                // transformGauges={transformGauges}
-              />
+          {filteredItems.length === 0 && (
+            <div className={styles.noitems}>
+              <img src={Bear} alt="Bear Icon" className={styles.bearicon}/>
+              <div>No classes found. Try searching something else or switching up the filters!</div>
+              {/*  <img*/}
+              {/*    src="/noResults.svg"*/}
+              {/*    className={styles.noresultimg}*/}
+              {/*    alt="No class found"*/}
+              {/*  />*/}
+              {/*  <div>Sorry! No classes match your search.</div>*/}
             </div>
-          </div>
+          )}
+
+          {filteredItems.length !== 0 && (
+            <div className={styles.preview}>
+              <div className={styles.previewcard}>
+                <PreviewCard
+                  course={cardCourse}
+                  // transformGauges={transformGauges}
+                />
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/client/src/modules/Results/Styles/CoursePreview.module.css b/client/src/modules/Results/Styles/CoursePreview.module.css
index 0b55f660..7bea978c 100644
--- a/client/src/modules/Results/Styles/CoursePreview.module.css
+++ b/client/src/modules/Results/Styles/CoursePreview.module.css
@@ -1,3 +1,10 @@
+.container {
+  padding: 16px;
+  border: 1px solid var(--clr-gray-300);
+  background-color: color-mix(in srgb, var(--clr-blue-100) 90%, var(--clr-gray-300));
+  border-radius: 8px;
+}
+
 .columns {
   display: flex;
   flex-flow: column;
@@ -70,6 +77,16 @@
   height: 50px;
 }
 
+.nocourse {
+  display: flex;
+  font-size: 1.75em;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  padding: 30px;
+}
+
 .bearicon {
   display: flex;
   justify-content: center;
diff --git a/client/src/modules/Results/Styles/Results.module.css b/client/src/modules/Results/Styles/Results.module.css
index de4be834..869cd6d4 100644
--- a/client/src/modules/Results/Styles/Results.module.css
+++ b/client/src/modules/Results/Styles/Results.module.css
@@ -1,5 +1,9 @@
-.page {
+html {
   background-color: var(--clr-blue-100);
+}
+
+.page {
+  /*background-color: var(--clr-blue-100);*/
   height: 100%;
   max-height: 100vh;
   padding-bottom: 63px;
@@ -38,7 +42,7 @@
 }
 
 .columns {
-  /*width: 100%;*/
+  width: 100%;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
@@ -71,11 +75,6 @@
   max-height: 100%; /* Prevent extra height growth */
   height: 100%;
   overflow: hidden; /* Avoid extra scrollbars */
-  padding: 16px;
-
-  border: 1px solid var(--clr-gray-300);
-  background-color: color-mix(in srgb, var(--clr-blue-100) 90%, var(--clr-gray-300));
-  border-radius: 8px;
 }
 
 .previewcard {
@@ -86,7 +85,7 @@
 .filtersearch {
   display: flex;
   flex-flow: row nowrap;
-  width: 40vw;
+  max-width: 40vw;
 }
 
 .noresultimg {
@@ -157,6 +156,32 @@
   overflow-y: auto;
 }
 
+.noitems {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 24px;
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.bearicon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  max-height: 500px;
+  padding-top: 40px;
+
+  @media only screen and (max-width: 843px) {
+    max-height: 200px;
+  }
+}
+
 @media only screen and (max-width: 843px) {
   .page {
     max-height: 100%;
@@ -171,7 +196,7 @@
   }
 
   .filtersearch {
-    width: 100vw;
+    max-width: 100vw;
   }
 
   .filtersortbuttons {