diff --git a/packages/api-client/index.ts b/packages/api-client/index.ts
index 239ac3088..9416dfd2c 100644
--- a/packages/api-client/index.ts
+++ b/packages/api-client/index.ts
@@ -310,6 +310,7 @@ class SearchAPIClient {
   searchCourses = async (
     searchQuery: string,
     catalogYear?: number,
+    nupath?: NUPathEnum[],
     minIndex = 0,
     maxIndex = 9999
   ): Promise<ScheduleCourse2<null>[]> => {
@@ -327,7 +328,13 @@ class SearchAPIClient {
     /** Search courses from the latest terms to the older year terms. */
     const allCourses = await Promise.all(
       termsOrderedByYear.map((termId) =>
-        this.searchCoursesForTerm(searchQuery, termId, minIndex, maxIndex)
+        this.searchCoursesForTerm(
+          searchQuery,
+          termId,
+          nupath,
+          minIndex,
+          maxIndex
+        )
       )
     );
 
@@ -351,6 +358,7 @@ class SearchAPIClient {
   private searchCoursesForTerm = async (
     searchQuery: string,
     termId: string,
+    nupath: NUPathEnum[] = [],
     minIndex = 0,
     maxIndex = 9999
   ): Promise<ScheduleCourse2<null>[]> => {
@@ -360,7 +368,9 @@ class SearchAPIClient {
       data: JSON.stringify({
         query: `
         {
-          search(termId:"${termId}", query: "${searchQuery}", classIdRange: {min: ${minIndex}, max: ${maxIndex}}) {
+          search(termId:"${termId}", query: "${searchQuery}", classIdRange: {min: ${minIndex}, max: ${maxIndex}}${
+          nupath.length > 0 ? `, nupath: ${JSON.stringify(nupath)}` : ""
+        }) {
             totalCount 
             pageInfo { hasNextPage } 
             nodes { ... on ClassOccurrence { name subject maxCredits minCredits prereqs coreqs nupath classId
diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
index 2e3ddfb78..b7ac8216f 100644
--- a/packages/common/src/types.ts
+++ b/packages/common/src/types.ts
@@ -3,13 +3,13 @@
  * breadth requirements.
  */
 export enum NUPathEnum {
-  ND = "Natural and Designed World",
-  EI = "Creative Expression/Innovation",
+  ND = "Natural/Designed World",
+  EI = "Creative Express/Innov",
   IC = "Interpreting Culture",
-  FQ = "Formal and Quantitative Reasoning",
-  SI = "Societies and Institutions",
+  FQ = "Formal/Quant Reasoning",
+  SI = "Societies/Institutions",
   AD = "Analyzing/Using Data",
-  DD = "Difference and Diversity",
+  DD = "Difference/Diversity",
   ER = "Ethical Reasoning",
   WF = "1st Yr Writing",
   WD = "Adv Writ Dscpl",
diff --git a/packages/frontend/components/AddCourseModal/AddCourseModal.tsx b/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
index 8e621dec4..7d9edc399 100644
--- a/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
+++ b/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
@@ -1,30 +1,33 @@
-import { InfoIcon } from "@chakra-ui/icons";
+import { AddIcon, InfoIcon } from "@chakra-ui/icons";
 import {
+  Button,
+  Flex,
+  Grid,
   Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
   ModalBody,
+  ModalCloseButton,
+  ModalContent,
   ModalFooter,
-  Button,
-  VStack,
+  ModalHeader,
+  ModalOverlay,
   Text,
-  Flex,
+  VStack,
 } from "@chakra-ui/react";
-import { ScheduleCourse2 } from "@graduate/common";
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
 import { useState } from "react";
 import { useSearchCourses } from "../../hooks";
 import {
-  isEqualCourses,
   getCourseDisplayString,
   getRequiredCourseCoreqs,
+  isEqualCourses,
 } from "../../utils";
+import { sortCoursesByNUPath } from "../../utils/course/sortCoursesByNUPath";
+import { GraduateToolTip } from "../GraduateTooltip";
+import { HelperToolTip } from "../Help";
+import { NUPathCheckBox } from "./NUPathCheckBox";
 import { SearchCoursesInput } from "./SearchCoursesInput";
 import { SearchResult } from "./SearchResult";
 import { SelectedCourse } from "./SelectedCourse";
-import { GraduateToolTip } from "../GraduateTooltip";
-import { HelperToolTip } from "../Help";
 
 interface AddCourseModalProps {
   isOpen: boolean;
@@ -55,21 +58,20 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
     ScheduleCourse2<null>[]
   >([]);
   const [isLoadingSelectCourse, setIsLoadingSelectCourse] = useState(false);
+  const [selectedNUPaths, setSelectedNUPaths] = useState<NUPathEnum[]>([]);
 
   const {
     courses,
-    isLoading: isCoursesLoading,
+    isLoading: isCourseSearchLoading,
     error,
-  } = useSearchCourses(searchQuery, catalogYear);
+  } = useSearchCourses(searchQuery, catalogYear, selectedNUPaths);
 
   const addSelectedCourse = async (course: ScheduleCourse2<null>) => {
     // don't allow courses to be selected multiple times
     if (isCourseAlreadySelected(course)) {
       return;
     }
-
     setIsLoadingSelectCourse(true);
-    const updatedSelectedCourses = [...selectedCourses];
 
     // grab any coreqs of the course that haven't already been selected/added to the term
     const coreqs = isAutoSelectCoreqs
@@ -82,7 +84,7 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
         })
       : [];
 
-    updatedSelectedCourses.push(course, ...coreqs);
+    const updatedSelectedCourses = [...selectedCourses, course, ...coreqs];
 
     setSelectedCourses(updatedSelectedCourses);
     setIsLoadingSelectCourse(false);
@@ -106,7 +108,6 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
     if (selectedCourses.length === 0) {
       return;
     }
-
     addSelectedClasses(selectedCourses);
     onClose();
   };
@@ -118,112 +119,160 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="lg">
+    <Modal isOpen={isOpen} onClose={onClose} size="3xl" isCentered>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader color="primary.blue.dark.main">
+        <ModalHeader
+          color="primary.blue.dark.main"
+          borderBottom="2px"
+          borderColor="neutral.100"
+        >
           <Flex alignItems="center" justifyContent="center" columnGap="2xs">
             <Text>Add Courses</Text>
             <HelperToolTip label="We try our best to search for courses across as many semesters as possible. If you cannot find your course, please report a bug with your plan catalog year and we will try to solve it as soon as possible." />
           </Flex>
         </ModalHeader>
         <ModalCloseButton />
-        <ModalBody>
-          <Flex direction="column" rowGap="md">
-            <SearchCoursesInput setSearchQuery={setSearchQuery} />
-            <VStack
-              height="200px"
-              overflow="scroll"
-              alignItems="left"
-              gap="2xs"
+        <ModalBody padding="0">
+          <Grid templateColumns="1fr 2fr">
+            {/* NUPath sidebar */}
+            <Flex
+              direction="column"
+              bg="neutral.50"
+              paddingLeft="7"
+              paddingY="9"
+              borderRight="2px"
+              borderColor="neutral.100"
             >
-              {error && (
-                <GraduateToolTip label="We rely on SearchNEU to search for courses, and there may be an ongoing issue on their end. We recommend refreshing the page and trying again soon. If the issue persists, help us by clicking the Bug/Feature button to report the bug">
-                  <Flex
-                    alignItems="center"
-                    columnGap="xs"
-                    justifyContent="center"
-                  >
-                    <InfoIcon color="primary.blue.dark.main" />
-                    <Text
-                      fontSize="xs"
-                      fontWeight="semibold"
-                      textAlign="center"
-                    >
-                      Oops, sorry we couldn&apos;t search for courses... try
-                      again in a little bit!
-                    </Text>
-                  </Flex>
-                </GraduateToolTip>
-              )}
-              {courses &&
-                courses.map((searchResult) => (
-                  <SearchResult
-                    key={getCourseDisplayString(searchResult)}
-                    searchResult={searchResult}
-                    addSelectedCourse={addSelectedCourse}
-                    isResultAlreadyAdded={isCourseAlreadyAdded(searchResult)}
-                    isResultAlreadySelected={isCourseAlreadySelected(
-                      searchResult
-                    )}
-                    isSelectingAnotherCourse={isLoadingSelectCourse}
+              <Text fontSize="lg" as="b" marginBottom="5">
+                NUPath
+              </Text>
+              <Flex direction="column" gap="2">
+                {Object.keys(NUPathEnum).map((nuPath) => (
+                  <NUPathCheckBox
+                    key={nuPath}
+                    nuPath={nuPath as keyof typeof NUPathEnum}
+                    selectedNUPaths={selectedNUPaths}
+                    setSelectedNUPaths={setSelectedNUPaths}
                   />
                 ))}
-              {!error && (!courses || courses.length === 0) && (
+              </Flex>
+            </Flex>
+            {/* Course Work Area */}
+            <Flex direction="column">
+              <Flex
+                direction="column"
+                padding="4"
+                borderBottom="2px"
+                borderColor="neutral.100"
+              >
+                <SearchCoursesInput
+                  setSearchQuery={setSearchQuery}
+                  isCourseSearchLoading={isCourseSearchLoading}
+                />
                 <Flex
-                  alignItems="center"
-                  justifyContent="center"
-                  columnGap="xs"
+                  direction="column"
+                  height="300px"
+                  overflow="scroll"
+                  marginTop="4"
                 >
-                  <InfoIcon color="primary.blue.dark.main" />
-                  <Text fontSize="xs">
-                    Search for your course and press enter to see search
-                    results.
-                  </Text>
+                  {/* No course search */}
+                  {!error && (!courses || courses.length === 0) && (
+                    <Flex alignItems="center" justifyContent="center">
+                      <InfoIcon color="neutral.300" marginRight="2" />
+                      <Text fontSize="sm" color="neutral.300">
+                        Search results will show up here.
+                      </Text>
+                    </Flex>
+                  )}
+                  {/* On error */}
+                  {error && (
+                    <GraduateToolTip label="We rely on SearchNEU to search for courses, and there may be an ongoing issue on their end. We recommend refreshing the page and trying again soon. If the issue persists, help us by clicking the Bug/Feature button to report the bug">
+                      <Flex
+                        alignItems="center"
+                        columnGap="xs"
+                        justifyContent="center"
+                      >
+                        <InfoIcon color="primary.red.main" />
+                        <Text
+                          fontSize="xs"
+                          fontWeight="semibold"
+                          textAlign="center"
+                          color="primary.red.main"
+                        >
+                          Oops, sorry we couldn&apos;t search for courses... try
+                          again in a little bit!
+                        </Text>
+                      </Flex>
+                    </GraduateToolTip>
+                  )}
+                  {/* Show courses */}
+                  {courses &&
+                    sortCoursesByNUPath(courses, selectedNUPaths).map(
+                      (course) => (
+                        <SearchResult
+                          key={getCourseDisplayString(course)}
+                          course={course}
+                          addSelectedCourse={addSelectedCourse}
+                          isResultAlreadyAdded={isCourseAlreadyAdded(course)}
+                          isResultAlreadySelected={isCourseAlreadySelected(
+                            course
+                          )}
+                          isSelectingAnotherCourse={isLoadingSelectCourse}
+                          selectedNUPaths={selectedNUPaths}
+                        />
+                      )
+                    )}
                 </Flex>
-              )}
-            </VStack>
-            {courses && courses.length > 0 && selectedCourses.length === 0 && (
-              <Flex alignItems="center" justifyContent="center" columnGap="xs">
-                <InfoIcon color="primary.blue.dark.main" />
-                <Text fontSize="xs">
-                  Select the courses you wish to add to this semester using the
-                  &quot;+&quot; button.
+              </Flex>
+
+              {/* Selected Courses Area */}
+              <Flex padding="4" direction="column">
+                <Text fontSize="md" fontWeight="bold">
+                  Courses to Add:
                 </Text>
+                <VStack
+                  paddingY="2"
+                  height="130px"
+                  overflow="scroll"
+                  alignItems="stretch"
+                >
+                  {selectedCourses.map((selectedCourse) => (
+                    <SelectedCourse
+                      key={getCourseDisplayString(selectedCourse)}
+                      selectedCourse={selectedCourse}
+                      removeSelectedCourse={removeSelectedCourse}
+                      selectedNUPaths={selectedNUPaths}
+                    />
+                  ))}
+                </VStack>
               </Flex>
-            )}
-            <VStack maxHeight="200px" overflow="scroll" pb="xs">
-              {selectedCourses.map((selectedCourse) => (
-                <SelectedCourse
-                  key={getCourseDisplayString(selectedCourse)}
-                  selectedCourse={selectedCourse}
-                  removeSelectedCourse={removeSelectedCourse}
-                />
-              ))}
-            </VStack>
-          </Flex>
+              <ModalFooter justifyContent="end" gap="md">
+                <Button
+                  variant="whiteCancelOutline"
+                  size="md"
+                  borderRadius="lg"
+                  onClick={onClose}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  leftIcon={<AddIcon />}
+                  variant="solid"
+                  borderRadius="lg"
+                  size="md"
+                  backgroundColor="primary.blue.light.main"
+                  borderColor="primary.blue.light.main"
+                  colorScheme="primary.blue.light.main"
+                  onClick={addClassesOnClick}
+                  isDisabled={selectedCourses.length === 0}
+                >
+                  Add Courses
+                </Button>
+              </ModalFooter>
+            </Flex>
+          </Grid>
         </ModalBody>
-        <ModalFooter justifyContent="center">
-          <Flex columnGap="sm">
-            <Button
-              variant="solidWhite"
-              size="md"
-              borderRadius="lg"
-              onClick={onClose}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="solid"
-              borderRadius="lg"
-              size="md"
-              onClick={addClassesOnClick}
-              isLoading={isCoursesLoading}
-            >
-              Add
-            </Button>
-          </Flex>
-        </ModalFooter>
       </ModalContent>
     </Modal>
   );
diff --git a/packages/frontend/components/AddCourseModal/NUPathCheckBox.tsx b/packages/frontend/components/AddCourseModal/NUPathCheckBox.tsx
new file mode 100644
index 000000000..d6bb134fc
--- /dev/null
+++ b/packages/frontend/components/AddCourseModal/NUPathCheckBox.tsx
@@ -0,0 +1,51 @@
+import { Checkbox, Flex, Text } from "@chakra-ui/react";
+import { NUPathEnum } from "@graduate/common";
+import { useMemo } from "react";
+
+interface NUPathCheckProps {
+  nuPath: keyof typeof NUPathEnum;
+  selectedNUPaths: NUPathEnum[];
+  setSelectedNUPaths: React.Dispatch<React.SetStateAction<NUPathEnum[]>>;
+}
+
+export const NUPathCheckBox: React.FC<NUPathCheckProps> = ({
+  selectedNUPaths,
+  nuPath,
+  setSelectedNUPaths,
+}) => {
+  const isChecked = useMemo(
+    () => selectedNUPaths.includes(NUPathEnum[nuPath]),
+    [nuPath, selectedNUPaths]
+  );
+
+  const updateFilters = () => {
+    if (isChecked) {
+      setSelectedNUPaths(
+        selectedNUPaths.filter((curNUPath) => curNUPath !== NUPathEnum[nuPath])
+      );
+    } else {
+      setSelectedNUPaths([...selectedNUPaths, NUPathEnum[nuPath]]);
+    }
+  };
+
+  return (
+    <Checkbox
+      size="lg"
+      colorScheme="blue"
+      checked={isChecked}
+      onChange={updateFilters}
+    >
+      <Flex alignItems="baseline">
+        <Text
+          fontWeight="bold"
+          color="primary.blue.light.main"
+          fontSize="sm"
+          marginRight="2"
+        >
+          {nuPath}
+        </Text>
+        <Text fontSize="sm">{NUPathEnum[nuPath]}</Text>
+      </Flex>
+    </Checkbox>
+  );
+};
diff --git a/packages/frontend/components/AddCourseModal/NUPathLabel.tsx b/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
new file mode 100644
index 000000000..53de46c05
--- /dev/null
+++ b/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
@@ -0,0 +1,77 @@
+import { NUPathEnum } from "@graduate/common";
+import { Flex, Text } from "@chakra-ui/react";
+
+interface NuPathLabelProps {
+  nuPaths: NUPathEnum[];
+  filteredPaths: NUPathEnum[];
+}
+
+const pathToAbbrev = (path: NUPathEnum): string => {
+  switch (path) {
+    case NUPathEnum.AD:
+      return "AD";
+    case NUPathEnum.CE:
+      return "CE";
+    case NUPathEnum.DD:
+      return "DD";
+    case NUPathEnum.EI:
+      return "EI";
+    case NUPathEnum.ER:
+      return "ER";
+    case NUPathEnum.EX:
+      return "EX";
+    case NUPathEnum.FQ:
+      return "FQ";
+    case NUPathEnum.IC:
+      return "IC";
+    case NUPathEnum.ND:
+      return "ND";
+    case NUPathEnum.SI:
+      return "SI";
+    case NUPathEnum.WD:
+      return "WD";
+    case NUPathEnum.WF:
+      return "WF";
+    case NUPathEnum.WI:
+      return "WI";
+    default:
+      return path;
+  }
+};
+
+export const NUPathLabel: React.FC<NuPathLabelProps> = ({
+  nuPaths,
+  filteredPaths,
+}) => {
+  if (nuPaths.length === 0) {
+    return null;
+  }
+
+  return (
+    <Flex
+      justifyContent="end"
+      align="center"
+      gap="1"
+      marginRight="5"
+      wrap="wrap"
+      flex="1"
+      flexBasis="0px"
+    >
+      {nuPaths.map((nuPath) => (
+        <Flex
+          key={nuPaths.indexOf(nuPath)}
+          backgroundColor={
+            filteredPaths.includes(nuPath, 0) ? "blue.200" : "gray.200"
+          }
+          width="7"
+          height="5"
+          justifyContent="center"
+          alignItems="center"
+          borderRadius="md"
+        >
+          <Text fontSize="xs">{pathToAbbrev(nuPath)}</Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
diff --git a/packages/frontend/components/AddCourseModal/SearchCoursesInput.tsx b/packages/frontend/components/AddCourseModal/SearchCoursesInput.tsx
index 8a4b211b6..85ef321d7 100644
--- a/packages/frontend/components/AddCourseModal/SearchCoursesInput.tsx
+++ b/packages/frontend/components/AddCourseModal/SearchCoursesInput.tsx
@@ -1,5 +1,11 @@
 import { Search2Icon } from "@chakra-ui/icons";
-import { InputGroup, InputLeftElement, Input } from "@chakra-ui/react";
+import {
+  InputGroup,
+  InputLeftElement,
+  Input,
+  InputRightElement,
+  IconButton,
+} from "@chakra-ui/react";
 import {
   Dispatch,
   SetStateAction,
@@ -9,10 +15,12 @@ import {
 
 interface SearchCoursesInputProps {
   setSearchQuery: Dispatch<SetStateAction<string>>;
+  isCourseSearchLoading: boolean;
 }
 
 export const SearchCoursesInput: React.FC<SearchCoursesInputProps> = ({
   setSearchQuery,
+  isCourseSearchLoading,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -22,10 +30,14 @@ export const SearchCoursesInput: React.FC<SearchCoursesInputProps> = ({
     }
   };
 
+  const onSubmit = () => {
+    setSearchQuery(searchTerm);
+  };
+
   return (
     <InputGroup>
       <InputLeftElement pointerEvents="none">
-        <Search2Icon color="primary.blue.light.main" />
+        <Search2Icon color="neutral.300" />
       </InputLeftElement>
       <Input
         value={searchTerm}
@@ -33,12 +45,25 @@ export const SearchCoursesInput: React.FC<SearchCoursesInputProps> = ({
           setSearchTerm(e.target.value);
         }}
         onKeyDown={onKeyDown}
-        borderRadius={10}
         fontSize="sm"
         color="primary.blue.light.main"
-        backgroundColor="neutral.100"
-        placeholder="SEARCH BY NAME, CRN, ETC."
+        placeholder="Search by name or CRN..."
+        textColor="neutral.500"
       />
+      <InputRightElement>
+        <IconButton
+          aria-label="Search courses"
+          backgroundColor="primary.blue.light.main"
+          borderColor="primary.blue.light.main"
+          colorScheme="primary.blue.light.main"
+          color="white"
+          icon={<Search2Icon />}
+          onClick={onSubmit}
+          borderRadius="5"
+          borderLeftRadius="0"
+          isLoading={isCourseSearchLoading}
+        ></IconButton>
+      </InputRightElement>
     </InputGroup>
   );
 };
diff --git a/packages/frontend/components/AddCourseModal/SearchResult.tsx b/packages/frontend/components/AddCourseModal/SearchResult.tsx
index f903ae224..8d9ba63ec 100644
--- a/packages/frontend/components/AddCourseModal/SearchResult.tsx
+++ b/packages/frontend/components/AddCourseModal/SearchResult.tsx
@@ -1,24 +1,27 @@
-import { SmallAddIcon } from "@chakra-ui/icons";
-import { Flex, Box, Heading, IconButton, Text } from "@chakra-ui/react";
-import { ScheduleCourse2 } from "@graduate/common";
-import { getCourseDisplayString } from "../../utils";
+import { AddIcon } from "@chakra-ui/icons";
+import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+import { getCourseDisplayString } from "../../utils/";
 import { GraduateToolTip } from "../GraduateTooltip";
+import { NUPathLabel } from "./NUPathLabel";
 
 interface SearchResultProps {
-  searchResult: ScheduleCourse2<null>;
-  addSelectedCourse: (course: ScheduleCourse2<null>) => void;
+  course: ScheduleCourse2<null>;
+  addSelectedCourse: (course: ScheduleCourse2<null>) => Promise<void>;
   isResultAlreadySelected: boolean;
   isResultAlreadyAdded: boolean;
   /** Another course is currently in the process of being selected. */
   isSelectingAnotherCourse?: boolean;
+  selectedNUPaths: NUPathEnum[];
 }
 
 export const SearchResult: React.FC<SearchResultProps> = ({
-  searchResult,
+  course,
   addSelectedCourse,
   isResultAlreadySelected,
   isResultAlreadyAdded,
   isSelectingAnotherCourse,
+  selectedNUPaths: filteredPaths,
 }) => {
   const isAddButtonDisabled = isResultAlreadyAdded || isResultAlreadySelected;
   const addButtonTooltip = isResultAlreadyAdded
@@ -28,34 +31,44 @@ export const SearchResult: React.FC<SearchResultProps> = ({
     : undefined;
 
   return (
-    <Flex justifyContent="space-between" px="md">
-      <Box>
-        <Heading size="sm" fontWeight="normal">
-          {searchResult.name}
-        </Heading>
-        <Text fontSize="12px" fontStyle="italics">
-          {getCourseDisplayString(searchResult)}
+    <Flex
+      justifyContent="space-between"
+      alignItems="end"
+      padding="1"
+      paddingY="2"
+      borderBottom="2px"
+      borderColor="neutral.100"
+    >
+      <Box flex="2">
+        <Text>
+          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+            {getCourseDisplayString(course)}
+          </Text>
+          <Text as="span" size="sm" fontWeight="normal">
+            {course.name}
+          </Text>
         </Text>
       </Box>
+      <NUPathLabel
+        nuPaths={course.nupaths ? course.nupaths : []}
+        filteredPaths={filteredPaths}
+      />
       <GraduateToolTip
         label={addButtonTooltip}
-        shouldWrapChildren
-        mt="3"
         isDisabled={!isAddButtonDisabled}
       >
         <IconButton
           aria-label="Add class"
-          icon={<SmallAddIcon />}
-          variant="solid"
-          borderColor="primary.blue.light.main"
-          backgroundColor="primary.blue.light.200"
+          icon={<AddIcon />}
           color="primary.blue.light.main"
-          colorScheme="primary.blue.light"
-          borderRadius="3xl"
-          size="sm"
-          onClick={() => addSelectedCourse(searchResult)}
-          isDisabled={isResultAlreadyAdded || isResultAlreadySelected}
+          borderColor="primary.blue.light.main"
+          colorScheme="primary.blue.light.main"
+          isRound
+          size="xs"
+          onClick={() => addSelectedCourse(course)}
           isLoading={isSelectingAnotherCourse}
+          isDisabled={isResultAlreadyAdded || isResultAlreadySelected}
+          alignSelf="center"
         />
       </GraduateToolTip>
     </Flex>
diff --git a/packages/frontend/components/AddCourseModal/SelectedCourse.tsx b/packages/frontend/components/AddCourseModal/SelectedCourse.tsx
index 1465558a3..9d750fae8 100644
--- a/packages/frontend/components/AddCourseModal/SelectedCourse.tsx
+++ b/packages/frontend/components/AddCourseModal/SelectedCourse.tsx
@@ -1,31 +1,54 @@
-import { Flex, Text } from "@chakra-ui/react";
-import { ScheduleCourse2 } from "@graduate/common";
-import { getCourseDisplayString } from "../../utils";
-import { CourseTrashButton } from "../ScheduleCourse/CourseTrashButton";
+import { MinusIcon } from "@chakra-ui/icons";
+import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+import { getCourseDisplayString } from "../../utils/";
+import { NUPathLabel } from "./NUPathLabel";
 
 interface SelectedCourseProps {
   selectedCourse: ScheduleCourse2<null>;
+  selectedNUPaths?: NUPathEnum[];
   removeSelectedCourse: (course: ScheduleCourse2<null>) => void;
 }
 
 export const SelectedCourse: React.FC<SelectedCourseProps> = ({
   selectedCourse,
   removeSelectedCourse,
+  selectedNUPaths: filteredPaths,
 }) => {
   return (
     <Flex
-      borderRadius="md"
-      boxShadow="md"
-      backgroundColor="neutral.100"
       alignItems="center"
+      justifyContent="space-between"
+      padding="2"
+      borderRadius="xl"
+      border="1px"
+      borderColor="neutral.200"
     >
-      <Text pl="sm" pr="2xs">
-        {getCourseDisplayString(selectedCourse)}
-      </Text>
-      <Text fontSize="xs" pr="md">
-        {selectedCourse.name}
-      </Text>
-      <CourseTrashButton onClick={() => removeSelectedCourse(selectedCourse)} />
+      <Box flex="2">
+        <Text>
+          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+            {getCourseDisplayString(selectedCourse)}
+          </Text>
+          <Text as="span" size="sm" fontWeight="normal">
+            {selectedCourse.name}
+          </Text>
+        </Text>
+      </Box>
+      <NUPathLabel
+        nuPaths={selectedCourse.nupaths == null ? [] : selectedCourse.nupaths}
+        filteredPaths={filteredPaths ? filteredPaths : []}
+      />
+      <IconButton
+        aria-label="Delete course"
+        icon={<MinusIcon />}
+        color="primary.red.main"
+        borderColor="primary.red.main"
+        colorScheme="primary.red.main"
+        isRound
+        size="xs"
+        onClick={() => removeSelectedCourse(selectedCourse)}
+        alignSelf="center"
+      />
     </Flex>
   );
 };
diff --git a/packages/frontend/components/Error/ConfirmEmailWarningModal.tsx b/packages/frontend/components/Error/ConfirmEmailWarningModal.tsx
index ddc7ad897..1452867dc 100644
--- a/packages/frontend/components/Error/ConfirmEmailWarningModal.tsx
+++ b/packages/frontend/components/Error/ConfirmEmailWarningModal.tsx
@@ -31,7 +31,6 @@ export const ConfirmEmailWarningModal: React.FC<
   const { onClose, isOpen } = useDisclosure({
     defaultIsOpen: !student.isEmailConfirmed && !alreadyVisited,
   });
-  console.log(!student.isEmailConfirmed && !alreadyVisited);
 
   const closeModal = () => {
     setAlreadyVisited(true);
diff --git a/packages/frontend/hooks/useSearchCourses.ts b/packages/frontend/hooks/useSearchCourses.ts
index 25b1f2a67..fa421e7fb 100644
--- a/packages/frontend/hooks/useSearchCourses.ts
+++ b/packages/frontend/hooks/useSearchCourses.ts
@@ -1,7 +1,7 @@
 import useSWR, { KeyedMutator, SWRResponse } from "swr";
 import { SearchAPI } from "@graduate/api-client";
 import { AxiosError } from "axios";
-import { ScheduleCourse2 } from "@graduate/common";
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
 
 type SearchCoursesResponse = Omit<
   SWRResponse<ScheduleCourse2<null>[], AxiosError | Error>,
@@ -16,23 +16,26 @@ type SearchCoursesReturn = SearchCoursesResponse & {
 
 /**
  * @param searchQuery - The user query term for the class they are searching for
+ * @param nupaths     - NUPaths to filter for and search for
  * @param minIndex    - The lower bound of course ID to search by. Default 0
  * @param maxIndex    - The upper bound of course ID to search by. Default 9999
  */
 export function useSearchCourses(
   searchQuery: string,
   catalogYear?: number,
+  nupaths?: NUPathEnum[],
   minIndex = 0,
   maxIndex = 9999
 ): SearchCoursesReturn {
   const { data, mutate, ...rest } = useSWR(
     `/searchCourses/${searchQuery}/${minIndex}/${maxIndex}${
       catalogYear && `/${catalogYear}`
-    }`,
+    }${nupaths && nupaths?.length > 0 && `/${JSON.stringify(nupaths.sort())}`}`,
     async () =>
       await SearchAPI.searchCourses(
         searchQuery.trim(),
         catalogYear,
+        nupaths,
         minIndex,
         maxIndex
       )
@@ -40,7 +43,7 @@ export function useSearchCourses(
 
   return {
     ...rest,
-    courses: searchQuery ? data : [],
+    courses: data,
     isLoading: !data && !rest.error,
     mutateCourses: mutate,
   };
diff --git a/packages/frontend/utils/course/countFilteredPaths.ts b/packages/frontend/utils/course/countFilteredPaths.ts
new file mode 100644
index 000000000..58e1bcd4d
--- /dev/null
+++ b/packages/frontend/utils/course/countFilteredPaths.ts
@@ -0,0 +1,19 @@
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+
+export const countFilteredPaths = (
+  course: ScheduleCourse2<null>,
+  filteredNuPaths: NUPathEnum[]
+): number => {
+  if (!course.nupaths) {
+    return -1;
+  }
+
+  let count = 0;
+  course.nupaths.forEach((element) => {
+    if (filteredNuPaths.includes(element)) {
+      count++;
+    }
+  });
+
+  return count;
+};
diff --git a/packages/frontend/utils/course/sortCoursesByNUPath.ts b/packages/frontend/utils/course/sortCoursesByNUPath.ts
new file mode 100644
index 000000000..5e265653d
--- /dev/null
+++ b/packages/frontend/utils/course/sortCoursesByNUPath.ts
@@ -0,0 +1,19 @@
+import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
+import { countFilteredPaths } from "./countFilteredPaths";
+
+/**
+ * Sorts a list of courses by the number of NUPaths they have
+ *
+ * @param courses List of classes
+ */
+export const sortCoursesByNUPath = (
+  courses: ScheduleCourse2<null>[],
+  filteredNuPaths: NUPathEnum[]
+): ScheduleCourse2<null>[] => {
+  return courses.sort((course1, course2) => {
+    return (
+      countFilteredPaths(course2, filteredNuPaths) -
+      countFilteredPaths(course1, filteredNuPaths)
+    );
+  });
+};
diff --git a/packages/frontend/utils/theme/components/buttons.ts b/packages/frontend/utils/theme/components/buttons.ts
index f6cb4a92b..afa200fc9 100644
--- a/packages/frontend/utils/theme/components/buttons.ts
+++ b/packages/frontend/utils/theme/components/buttons.ts
@@ -46,6 +46,14 @@ export const Button: ComponentStyleConfig = {
       color: "black",
       borderRadius: "0px",
     },
+    whiteCancelOutline: {
+      border: "2px solid",
+      borderColor: "primary.blue.light.100",
+      color: "primary.blue.light.100",
+      colorScheme: "primary.blue.light.100",
+      bg: "white",
+      borderRadius: "20px",
+    },
   },
   // default size and variant values
   defaultProps: {