diff --git a/css/search.css b/css/search.css
new file mode 100644
index 000000000..7633f9c83
--- /dev/null
+++ b/css/search.css
@@ -0,0 +1,169 @@
+#searchTitle {
+    font-size: 2rem;
+    position: relative;
+    display: block;
+    width: 100vw;
+    height: fit-content;
+    left: 0vw;
+    text-align: center;
+    margin-top: 2.5vmin;
+    color: var(--quacs-yellow);
+    font-weight: 500;
+}
+
+#searchTerm {
+    color: var(--quacs-midtone);
+}
+
+#searchResultsContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2vmin;
+}
+
+:root {
+    --entry-width: 70vw;
+    --hover-expand-width: 0.5vw;
+    --transition-time: 0.1s;
+}
+
+#searchResultsContainer tr {
+    width: var(--entry-width);
+    background: var(--mid-dark-purple);
+    margin-bottom: 2vmin;
+    margin-left: var(--hover-expand-width);
+    margin-right: var(--hover-expand-width);
+    color: var(--quacs-white);
+    border-radius: 0.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    transition-property: all;
+    transition-duration: var(--transition-time);
+    /* border-bottom: solid 1vmin var(--mid-purple); /* */
+}
+
+#searchResultsContainer a {
+    text-decoration: none;
+}
+
+#searchResultsContainer tr:hover {
+    background: var(--mid-purple);
+    /* border-bottom: solid 1vmin var(--mid-light-purple); */
+    margin-left: 0;
+    margin-right: 0;
+    width: calc(var(--entry-width) + 2*var(--hover-expand-width));
+    border-radius: calc(2vmin + 0.5vw);
+}
+
+#searchResultsContainer tr:hover p,
+#searchResultsContainer tr:hover div {
+    margin-left: var(--hover-expand-width);
+    margin-right: var(--hover-expand-width);
+}
+
+#searchResultsContainer tr p,
+#searchResultsContainer tr div {
+    transition-property: all;
+    transition-duration: var(--transition-time);
+}
+
+#searchResultsContainer h3 {
+    margin: 0;
+    padding: 1vmin;
+    padding-left: 1.5vmin;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    /* width: 100%; */
+    font-size: 1.25rem;
+    color: var(--quacs-midtone);
+    border-bottom: solid;
+    border-bottom-width: 0.2vmin;
+    flex-wrap: wrap;
+}
+
+.sattr {
+    margin-right: 1vmin;
+    display: flex;
+    margin-bottom: 0.25vmin;
+    margin-top: 0.25vmin;
+    font-size: 1rem;
+}
+
+.sattr-pill {
+    background: var(--quacs-yellow);
+    color: var(--deep-purple);
+    padding-left: 1.5vmin;
+    padding-right: 1.5vmin;
+    border-radius: 3vmin;
+}
+
+.sattr svg {
+    /* display: inline-block; */
+    /* vertical-align:-webkit-baseline-middle; */
+    align-self: center;
+    width: 1rem;
+    max-height: 1rem;
+    padding-left: 0.5vmin;
+    fill: var(--deep-purple);
+}
+
+.CI-pill {
+    background: var(--green);
+}
+
+.WI-pill {
+    background: var(--quacs-yellow);
+}
+
+.PD-pill {
+    background: var(--red);
+}
+
+.HI-pill {
+    background: var(--pink);
+    color: var(--deep-purple);
+}
+
+.HI-pill svg {
+    fill: var(--deep-purple);
+}
+
+.courseName {
+    color: var(--quacs-yellow);
+    font-size: 1.45rem;
+    margin-left: 0.5vmin;
+}
+
+.courseCode {
+    color: var(--quacs-midtone);
+    font-weight: 400;
+}
+
+#searchResultsContainer p {
+    padding: 1.5vmin;
+    font-size: 1rem;
+}
+
+#searchResultsContainer h3 span {
+    margin-right: 1vmin;
+}
+
+#searchResultsContainer h3:hover p {
+    padding-left: calc(1.5vmin + var(--hover-expand-width));
+    padding-right: calc(1.5vmin + var(--hover-expand-width));
+}
+
+@media (orientation: portrait) {
+    #searchResultsContainer tr {
+        width: 90vw;
+    }
+    #searchResultsContainer tr:hover {
+        width: 91vw;
+    }
+}
diff --git a/index.html b/index.html
index 3561ed84c..aa7fa7988 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
         </head>
         <body>
                 <svg id="home-title"><use href="./images/quatalogVWordmark.svg#QuatalogVWordmark"></use></svg>
-                <form onsubmit="search_helper(event)">
+                <form onsubmit="search_helper(event,false)">
                         <input type="text" class="home-search" id="search" placeholder="Search...">
                 </form>
                 <p id="home-footer">
diff --git a/js/search_helper.js b/js/search_helper.js
index a7d7c85f6..34c5e3168 100644
--- a/js/search_helper.js
+++ b/js/search_helper.js
@@ -1,5 +1,5 @@
 "use strict";
-const search_helper = async function(event) {
+const search_helper = async function(event,from_course_page = true) {
         event.preventDefault();
         // "a     b   cde 12" => "a b cde 12"
         const input = document.getElementById("search").value.split(" ").join(" ");
@@ -13,7 +13,7 @@ const search_helper = async function(event) {
                 const arr = input.split(/(?:-| )+/);
                 if(arr.length == 2) course_code = arr;
         }
-
+        
         // only do this logic if the string might be a course code
         // avoid having to fetch the courses_list if it definitely isn't one
         if(course_code) {
@@ -22,21 +22,26 @@ const search_helper = async function(event) {
                 const code_str = course_code.join("-");
 
                 // check if "ABCD-1345" is a real course code
-                const course_exists = await fetch("../courses_list.json")
+                const course_exists = await fetch(
+                                from_course_page ? "../courses_list.json" : "courses_list.json"
+                        )
                         .then(list => list.json())
                         .then(list => list.includes(code_str));
                 
                 // if it is, redirect to it
                 if(course_exists) {
-                        // handle both homepage and courses pages (which are in a directory)
-                        if(window.location.pathname.split("/").slice(-2,-1)[0] != "courses") {
-                                location.href = "courses/"+code_str + ".html";
+                        if(from_course_page) {
+                                location.href = code_str;
                         } else {
-                                location.href = code_str + ".html";
+                                location.href = "courses/" + code_str;
                         }
                         return;
                 }
         }
 
-        location.href = "../search" + ".html" + "?search=" + encodeURIComponent(input);
+        if(from_course_page) {
+                location.href = "../search?search=" + encodeURIComponent(input);
+        } else {
+                location.href = "search?search=" + encodeURIComponent(input);
+        }
 }
diff --git a/search.html b/search.html
index bf27d0ab0..42da00c1c 100644
--- a/search.html
+++ b/search.html
@@ -27,7 +27,7 @@
 <body>
     <div id="qlog-header">
         <a id="qlog-wordmark" href="./"><svg><use href="./images/quatalogHWordmark.svg#QuatalogHWordmark"></use></svg></a>
-        <form onsubmit="search_helper(event)">
+        <form onsubmit="search_helper(event,false)">
             <input type="text" id="search" class="header-search" placeholder="Search...">
         </form>
     </div>
