diff --git a/components/common/SearchBar/searchBar.tsx b/components/common/SearchBar/searchBar.tsx
index 96725f01..65f020d7 100644
--- a/components/common/SearchBar/searchBar.tsx
+++ b/components/common/SearchBar/searchBar.tsx
@@ -7,6 +7,8 @@ import {
   Paper,
 } from '@mui/material';
 import Popper from '@mui/material/Popper';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
 import * as React from 'react';
 import { useEffect } from 'react';
 
@@ -124,19 +126,49 @@ export const SearchBar = (props: SearchProps) => {
               }
             />
           )}
-          renderOption={(props, option) => (
-            <li
-              {...props}
-              className="bg-white/25 active:bg-white/50 focus:bg-white/50 hover:bg-white/50 my-4 mx-8 font-sans"
-            >
-              <Box className="cursor-pointer text-lg text-gray-600 pl-5 py-5">
-                {searchQueryLabel(option)}
-              </Box>
-            </li>
-          )}
-          isOptionEqualToValue={(option, value) =>
-            searchQueryEqual(option, value)
-          }
+          renderOption={(props, option, { inputValue }) => {
+            const text = searchQueryLabel(option);
+            //add spaces between prefix and course number
+            const matches = match(
+              text,
+              inputValue.replace(
+                /([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/,
+                '$1 $2',
+              ),
+            );
+            const parts = parse(text, matches);
+            console.log(parts);
+            return (
+              <li {...props}>
+                {parts.map((part, index) => (
+                  <span
+                    key={index}
+                    className={
+                      'whitespace-pre-wrap' +
+                      (part.highlight ? ' font-bold' : '')
+                    }
+                  >
+                    {part.text}
+                  </span>
+                ))}
+              </li>
+            );
+          }}
+          isOptionEqualToValue={(option, value) => {
+            if (option.prefix !== value.prefix) {
+              return false;
+            }
+            if (option.professorName !== value.professorName) {
+              return false;
+            }
+            if (option.number !== value.number) {
+              return false;
+            }
+            if (option.sectionNumber !== value.sectionNumber) {
+              return false;
+            }
+            return true;
+          }}
           PopperComponent={(props) => {
             return (
               <Popper {...props} className="rounded-none" placement="bottom" />
diff --git a/components/common/SplashPageSearchBar/splashPageSearchBar.tsx b/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
index 87a4ca0f..1a60bc72 100644
--- a/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
+++ b/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
@@ -1,5 +1,7 @@
 import { Search } from '@mui/icons-material';
 import { Autocomplete, InputAdornment, InputBase } from '@mui/material';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
 import * as React from 'react';
 import { useEffect } from 'react';
 
@@ -97,6 +99,32 @@ export const SplashPageSearchBar = (props: SearchProps) => {
               }
             />
           )}
+          renderOption={(props, option, { inputValue }) => {
+            const text = searchQueryLabel(option);
+            //add spaces between prefix and course number
+            const matches = match(
+              text,
+              inputValue
+                .replace(/([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/, '$1 $2')
+                .replace(/([0-9][0-9V]?[0-9]{0,2})([a-zA-Z]{2,4})/, '$1 $2'),
+            );
+            const parts = parse(text, matches);
+            return (
+              <li {...props}>
+                {parts.map((part, index) => (
+                  <span
+                    key={index}
+                    className={
+                      'whitespace-pre-wrap' +
+                      (part.highlight ? ' font-bold' : '')
+                    }
+                  >
+                    {part.text}
+                  </span>
+                ))}
+              </li>
+            );
+          }}
           defaultValue={[]}
         />
       </div>
diff --git a/package-lock.json b/package-lock.json
index 04badf05..0e054170 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "next": "^13.3.1",
         "dotenv": "^16.0.0",
         "@vercel/analytics": "^1.0.0",
+        "autosuggest-highlight": "^3.3.4",
         "webpack": "^5.72.0",
         "markdown-loader": "^8.0.0",
         "@babel/runtime": "^7.17.9",
@@ -61,6 +62,7 @@
         "husky": "^8.0.3",
         "eslint-config-next": "^13.3.1",
         "eslint-plugin-jsx-a11y": "^6.5.1",
+        "@types/autosuggest-highlight": "^3.2.0",
         "@types/react": "^18.2.0"
       },
       "engines": {
@@ -2576,19 +2578,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -4433,21 +4422,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.1.tgz",
-      "integrity": "sha512-6mgkLmwlyWlomQmpl21I3hxgqE5INoW4owTlcLpNsd1V4wP+J46BlI/5zV5KWWbzjfncIqzXoeGs5Eg+1GHODA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/pkg-up/node_modules/find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -4857,21 +4831,6 @@
       "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
       "dev": true
     },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.1.tgz",
-      "integrity": "sha512-M+PoH+0+q658wRUbs285RIaSTYnGBSTdweH/0CdzDgA6Q4rBM0sQs4DHmO3BPP0ltCO/vViIoyG7ks66XmCA5g==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/spdx-expression-parse": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
@@ -5959,6 +5918,14 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/autosuggest-highlight": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz",
+      "integrity": "sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==",
+      "dependencies": {
+        "remove-accents": "^0.4.2"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
@@ -7131,21 +7098,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.1.tgz",
-      "integrity": "sha512-WomIiTj/v3LevltlibNQKmvrOymNRYL+a0dp5R73IwPWN5FvXWwSELN/kiNALig/+T3luc4qHNTyvMCp9L6U5Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -7996,21 +7948,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.1.tgz",
-      "integrity": "sha512-UXPtriEc/pBP8luSLSCZBcbzPeVv+SSjs9cH/KygTbhmACye8/OOXRZO13Z2Wq1G0gLmEAIHQAOuF+vafPd2lw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -10186,21 +10123,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.1.tgz",
-      "integrity": "sha512-wRb76nLWJhonH8s3kxC/1tFguEkeOPayIwe9mkaz1G/yeS3OrjeyKMJsb4+Kdg0zbTo53bNCOl59NNtDM7yyyw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
       "version": "7.20.11",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
@@ -11316,21 +11238,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.1.tgz",
-      "integrity": "sha512-lT36yYxosCfLtplFzJWgo0hrPu6/do8+msgM7oQkPeohDNdhjtjFUgOOwdSnPublLR6Mo2Ym4P/wl5OANuD2bw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -12775,6 +12682,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/@types/autosuggest-highlight": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/autosuggest-highlight/-/autosuggest-highlight-3.2.0.tgz",
+      "integrity": "sha512-bTcsL4YYypjhKfPaImxuoMPiTyiUp7VGKytMr15/413IoazrOIfV/gca2ysI/IW0ftZYCPI5xppRm6IVX1Efqw==",
+      "dev": true
+    },
     "node_modules/express/node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -13984,21 +13897,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.1.tgz",
-      "integrity": "sha512-qz3BzjJRZ16Iq/jrp+pjiYOc0jTjHlfmxQmZk9x/+5uhRP6/eWQSTAPVJ33BMo6oK5O5N4644OgTAbzXzorecg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
@@ -14821,6 +14719,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz",
+      "integrity": "sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg=="
+    },
     "node_modules/read-pkg-up/node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -15249,21 +15152,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.1.tgz",
-      "integrity": "sha512-uqm5sielhQmKJM+qayIhgZv1KlS5pqTdQ99b+Z7hMWryXS96qE0DftTmMZowBcUL6x7s2vSXyH5wPtO1ON7LBg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/react-styleguidist/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index b9534ab8..e86c8381 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@vercel/analytics": "^1.0.0",
     "apexcharts": "^3.33.2",
     "autoprefixer": "^10.4.2",
+    "autosuggest-highlight": "^3.3.4",
     "css-loader": "^6.7.1",
     "dotenv": "^16.0.0",
     "framer-motion": "^10.12.4",
@@ -52,6 +53,7 @@
     "@babel/preset-typescript": "^7.21.4",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
+    "@types/autosuggest-highlight": "^3.2.0",
     "@types/node": "^18.16.1",
     "@types/react": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",