diff --git a/src/components/CourseAddCatalog/index.js b/src/components/CourseAddCatalog/index.js
new file mode 100644
index 00000000..39e2f311
--- /dev/null
+++ b/src/components/CourseAddCatalog/index.js
@@ -0,0 +1,275 @@
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { Course, CourseFilter, CourseFilterNested } from '..';
+import { classes, getRandomColor } from '../../utils';
+import './stylesheet.scss';
+import {
+  ASYNC_DELIVERY_MODE,
+  CAMPUSES,
+  DELIVERY_MODES,
+  CREDIT_HOURS_CLASS_TIME
+} from '../../constants';
+import { TermContext } from '../../contexts';
+
+export default function CourseAddCatalog({ className }) {
+  const [
+    { oscar, desiredCourses, excludedCrns, colorMap },
+    { patchTermData }
+  ] = useContext(TermContext);
+  const [keyword, setKeyword] = useState('');
+  const [filter, setFilter] = useState({
+    deliveryMode: [],
+    campus: []
+  });
+  const [chctFilter, setChctFilter] = useState({
+    credits: [],
+    days: [],
+    courseLevel: [],
+    startsAfter: 'Any time',
+    endsBefore: 'Any time'
+  });
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef(null);
+
+  const handleChangeKeyword = useCallback((e) => {
+    let input = e.target.value.trim();
+    const results = input.match(/^([A-Z]+)(\d.*)$/i);
+    if (results) {
+      const [, subject, number] = results;
+      input = `${subject} ${number}`;
+    }
+    setKeyword(input);
+  }, []);
+
+  const courses = useMemo(() => {
+    const results = /^([A-Z]+) ?((\d.*)?)$/i.exec(keyword.toUpperCase());
+    if (!results) {
+      return [];
+    }
+    const [, subject, number] = results;
+
+    setActiveIndex(0);
+
+    const arrayFilters = Object.entries(chctFilter)
+      .concat(Object.entries(filter))
+      .reduce((o, [k, v]) => {
+        if (typeof v === 'object' && k !== 'courseLevel') {
+          if (k === 'credits') {
+            o[k] = v.map((str) => parseInt(str, 10));
+            if (o[k].includes(4)) {
+              o[k] = o[k].concat([5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
+            }
+          } else {
+            o[k] = v;
+          }
+        }
+        return o;
+      }, {});
+
+    let classNumberLowerLimit = 0;
+    let classNumberUpperLimit = 10000;
+    if (chctFilter.courseLevel.length === 1) {
+      if (chctFilter.courseLevel[0] === 'Undergraduate') {
+        classNumberUpperLimit = 6000;
+      } else {
+        classNumberLowerLimit = 5999;
+      }
+    }
+
+    let classStartsAfter = 0;
+    let classEndsBefore = 2000;
+    if (chctFilter.startsAfter !== 'Any time') {
+      classStartsAfter = parseInt(chctFilter.startsAfter, 10);
+    }
+    if (chctFilter.endsBefore !== 'Any time') {
+      classEndsBefore = parseInt(chctFilter.endsBefore, 10);
+    }
+
+    return oscar.courses
+      .filter((course) => {
+        const keywordMatch =
+          course.subject === subject && course.number.startsWith(number);
+        const courseLevelMatch =
+          course.number < classNumberUpperLimit &&
+          course.number > classNumberLowerLimit;
+        const timeMatch = course.sections.some((section) => {
+          return section.meetings.some((m) => {
+            if (m.period && m.period.start && m.period.end) {
+              return (
+                m.period.start >= classStartsAfter &&
+                m.period.end <= classEndsBefore
+              );
+            }
+            return false;
+          });
+        });
+        const filterMatch = Object.entries(arrayFilters).every(
+          ([key, tags]) =>
+            tags.length === 0 ||
+            course.sections.some((section) => {
+              return (
+                tags.includes(section[key]) ||
+                section.meetings.some((m) => {
+                  if (m[key]) {
+                    return m[key].every((d) => tags.includes(d));
+                  }
+                  return false;
+                })
+              );
+            })
+        );
+        return keywordMatch && filterMatch && courseLevelMatch && timeMatch;
+      })
+      .filter((course) => !desiredCourses.includes(course.id));
+  }, [oscar, keyword, filter, chctFilter, desiredCourses]);
+
+  const handleAddCourse = useCallback(
+    (course) => {
+      if (desiredCourses.includes(course.id)) return;
+      const toBeExcludedCrns = course.sections
+        .filter((section) => {
+          const timeDecided =
+            section.deliveryMode === ASYNC_DELIVERY_MODE ||
+            (section.meetings.length &&
+              section.meetings.every(
+                (meeting) => meeting.days.length && meeting.period
+              ));
+          const filterMatch = Object.entries(filter).every(
+            ([key, tags]) => tags.length === 0 || tags.includes(section[key])
+          );
+          return !timeDecided || !filterMatch;
+        })
+        .map((section) => section.crn);
+      patchTermData({
+        desiredCourses: [...desiredCourses, course.id],
+        excludedCrns: [...excludedCrns, ...toBeExcludedCrns],
+        colorMap: { ...colorMap, [course.id]: getRandomColor() }
+      });
+      setKeyword('');
+      inputRef.current.focus();
+    },
+    [filter, desiredCourses, excludedCrns, colorMap, inputRef, patchTermData]
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case 'Enter':
+          if (courses[activeIndex]) {
+            handleAddCourse(courses[activeIndex]);
+          }
+          break;
+        case 'ArrowDown':
+          setActiveIndex(Math.min(activeIndex + 1, courses.length - 1));
+          break;
+        case 'ArrowUp':
+          setActiveIndex(Math.max(activeIndex - 1, 0));
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+    },
+    [courses, handleAddCourse, activeIndex]
+  );
+
+  const handleToggleFilter = useCallback(
+    (key, tag) => {
+      const tags = filter[key];
+      setFilter({
+        ...filter,
+        [key]: tags.includes(tag)
+          ? tags.filter((v) => v !== tag)
+          : [...tags, tag]
+      });
+    },
+    [filter]
+  );
+
+  const handleResetFilter = useCallback(
+    (key) => {
+      setFilter({
+        ...filter,
+        [key]: []
+      });
+    },
+    [filter]
+  );
+
+  const activeCourse = courses[activeIndex];
+
+  return (
+    <div className={classes('CourseAddCatalog', className)}>
+      <div className="add">
+        <div className="primary">
+          <FontAwesomeIcon
+            className={classes('icon', courses.length && 'active')}
+            fixedWidth
+            icon={faSearch}
+          />
+          <div className="keyword-wrapper">
+            {activeCourse && (
+              <div className={classes('keyword', 'autocomplete')}>
+                {activeCourse.id}
+              </div>
+            )}
+            <input
+              type="text"
+              ref={inputRef}
+              value={keyword}
+              onChange={handleChangeKeyword}
+              className="keyword"
+              placeholder="Subject or course number"
+              onKeyDown={handleKeyDown}
+            />
+          </div>
+        </div>
+        <CourseFilterNested
+          key="creditHoursClassTime"
+          name="Credit Hours & Class Time"
+          data={CREDIT_HOURS_CLASS_TIME}
+          filters={chctFilter}
+          setFilters={setChctFilter}
+        />
+        {[
+          ['Delivery Mode', 'deliveryMode', DELIVERY_MODES],
+          ['Campus', 'campus', CAMPUSES]
+        ].map(([name, property, labels]) => (
+          <CourseFilter
+            key={property}
+            name={name}
+            labels={labels}
+            selectedTags={filter[property]}
+            onReset={() => handleResetFilter(property)}
+            onToggle={(tag) => handleToggleFilter(property, tag)}
+          />
+        ))}
+      </div>
+      {courses.length > 0 ? (
+        courses.map((course) => (
+          <Course
+            key={course.id}
+            className={course === activeCourse && 'active'}
+            courseId={course.id}
+            pinnedCrns={[]}
+            onAddCourse={() => handleAddCourse(course)}
+          />
+        ))
+      ) : (
+        <div className="disclaimer">
+          Disclaimer: GT Scheduler should be used as general reference only, and
+          users are solely responsible for ensuring any information including
+          registration restrictions.
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/CourseAddCatalog/stylesheet.scss b/src/components/CourseAddCatalog/stylesheet.scss
new file mode 100644
index 00000000..dbfda38a
--- /dev/null
+++ b/src/components/CourseAddCatalog/stylesheet.scss
@@ -0,0 +1,77 @@
+@import "../../variables";
+
+.CourseAddCatalog {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+
+  .add {
+    @include card;
+    background-color: $color-border;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .primary {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-left: 8px;
+        color: $color-neutral;
+        transition: color .2s;
+
+        &.active {
+          color: inherit;
+        }
+      }
+
+      .keyword-wrapper {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .keyword {
+          position: relative;
+          flex: 1;
+          background: none;
+          border: none;
+          outline: none;
+          font-size: inherit;
+          font-weight: bold;
+          padding: 12px 8px;
+          text-transform: uppercase;
+
+          &::placeholder {
+            font-weight: normal;
+            color: $color-neutral;
+            text-transform: initial;
+          }
+
+          &.autocomplete {
+            position: absolute;
+            opacity: .5;
+          }
+        }
+      }
+    }
+  }
+
+  .Course {
+    background-color: $color-border;
+    opacity: .6;
+    transition: opacity .2s;
+
+    &:hover,
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  .disclaimer {
+    color: $color-neutral;
+    padding: 4px;
+    font-size: .8em;
+  }
+}
diff --git a/src/components/CourseFilter/index.js b/src/components/CourseFilter/index.js
index 27c71d65..9cd4c822 100644
--- a/src/components/CourseFilter/index.js
+++ b/src/components/CourseFilter/index.js
@@ -9,50 +9,93 @@ export default function CourseFilter({
   labels,
   selectedTags,
   onReset,
-  onToggle
+  onToggle,
+  alwaysExpand = false
 }) {
   const [expanded, setExpanded] = useState(false);
 
   return (
     <div className="CourseFilter">
-      <div
-        className={classes('header', selectedTags.length > 0 && 'active')}
-        onClick={() => setExpanded(!expanded)}
-      >
-        {!expanded && selectedTags.length > 0 ? (
+      {alwaysExpand ? (
+        <div>
           <div
-            className="name"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: humanizeArray(
-                selectedTags.map((tag) => labels[tag]),
-                '<span class="or">or</span>'
-              )
-            }}
-          />
-        ) : (
-          <div className="name">{name}</div>
-        )}
-        <FontAwesomeIcon fixedWidth icon={expanded ? faAngleUp : faAngleDown} />
-      </div>
-      {expanded && (
-        <div className="tag-container">
-          <div
-            className={classes('tag', selectedTags.length === 0 && 'active')}
-            onClick={onReset}
+            className={classes('header', selectedTags.length > 0 && 'active')}
           >
-            All
+            <div className="nameNonBold">{name}</div>
           </div>
-          {Object.keys(labels).map((tag) => (
+          <div className="tag-container">
             <div
-              key={tag}
-              className={classes('tag', selectedTags.includes(tag) && 'active')}
-              property={tag}
-              onClick={() => onToggle(tag)}
+              className={classes('tag', selectedTags.length === 0 && 'active')}
+              onClick={onReset}
             >
-              {labels[tag]}
+              All
+            </div>
+            {Object.keys(labels).map((tag) => (
+              <div
+                key={tag}
+                className={classes(
+                  'tag',
+                  selectedTags.includes(tag) && 'active'
+                )}
+                property={tag}
+                onClick={() => onToggle(tag)}
+              >
+                {labels[tag]}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div
+            className={classes('header', selectedTags.length > 0 && 'active')}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {!expanded && selectedTags.length > 0 ? (
+              <div
+                className="name"
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: humanizeArray(
+                    selectedTags.map((tag) => labels[tag]),
+                    '<span class="or">or</span>'
+                  )
+                }}
+              />
+            ) : (
+              <div className="name">{name}</div>
+            )}
+            <FontAwesomeIcon
+              fixedWidth
+              icon={expanded ? faAngleUp : faAngleDown}
+            />
+          </div>
+          {expanded && (
+            <div className="tag-container">
+              <div
+                className={classes(
+                  'tag',
+                  selectedTags.length === 0 && 'active'
+                )}
+                onClick={onReset}
+              >
+                All
+              </div>
+              {Object.keys(labels).map((tag) => (
+                <div
+                  key={tag}
+                  className={classes(
+                    'tag',
+                    selectedTags.includes(tag) && 'active'
+                  )}
+                  property={tag}
+                  onClick={() => onToggle(tag)}
+                >
+                  {labels[tag]}
+                </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/CourseFilter/stylesheet.scss b/src/components/CourseFilter/stylesheet.scss
index 1c9aed47..bab036d8 100644
--- a/src/components/CourseFilter/stylesheet.scss
+++ b/src/components/CourseFilter/stylesheet.scss
@@ -22,6 +22,11 @@
       opacity: 1;
     }
 
+    .nameNonBold {
+      font-weight: normal;
+      flex: 1;
+      margin-right: 8px;
+    }
     .name {
       font-weight: bold;
       flex: 1;
diff --git a/src/components/CourseFilterDropDown/index.js b/src/components/CourseFilterDropDown/index.js
new file mode 100644
index 00000000..f67b3758
--- /dev/null
+++ b/src/components/CourseFilterDropDown/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { classes } from '../../utils';
+import './stylesheet.scss';
+import { Select } from '../index';
+
+export default function CourseFilterDropDown({
+  name,
+  labels,
+  selectedTag,
+  onToggle
+}) {
+  return (
+    <div className="CourseFilterDropDown">
+      <div>
+        <div
+          className={classes(
+            'header',
+            selectedTag !== Object.values(labels)[0] && 'active'
+          )}
+        >
+          <div className="nameNonBold">{name}</div>
+        </div>
+        <div className="select-container">
+          <Select
+            onChange={onToggle}
+            value={selectedTag}
+            options={Object.keys(labels).map((tag) => ({
+              value: tag,
+              label: labels[tag]
+            }))}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CourseFilterDropDown/stylesheet.scss b/src/components/CourseFilterDropDown/stylesheet.scss
new file mode 100644
index 00000000..29dd3e58
--- /dev/null
+++ b/src/components/CourseFilterDropDown/stylesheet.scss
@@ -0,0 +1,51 @@
+@import "../../variables";
+
+.CourseFilterDropDown {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-top: 1px solid $color-border;
+
+  .header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: .8em;
+    cursor: pointer;
+    padding: 12px;
+    opacity: .5;
+    transition: opacity .2s;
+
+    &.active,
+    &:hover {
+      opacity: 1;
+    }
+
+    .nameNonBold {
+      font-weight: normal;
+      flex: 1;
+      margin-right: 8px;
+    }
+    .name {
+      font-weight: bold;
+      flex: 1;
+      margin-right: 8px;
+
+      .or {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .select-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: -12px;
+    padding: 8px;
+    font-size: .8em;
+    .text{
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/src/components/CourseFilterNested/index.js b/src/components/CourseFilterNested/index.js
new file mode 100644
index 00000000..58aff604
--- /dev/null
+++ b/src/components/CourseFilterNested/index.js
@@ -0,0 +1,115 @@
+import React, { useCallback, useState } from 'react';
+import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { classes } from '../../utils';
+import './stylesheet.scss';
+import { CourseFilter, CourseFilterDropDown } from '..';
+
+export default function CourseFilterNested({
+  name,
+  data,
+  filters,
+  setFilters
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [activeList, setActiveList] = useState(
+    Object.keys(filters).reduce((o, key) => ({ ...o, [key]: false }), {})
+  );
+  const [active, setActive] = useState(false);
+  const checkIfActive = (li) => {
+    setActive(Object.values(li).includes(true));
+  };
+  const handleToggleFilter = useCallback(
+    (key, tag) => {
+      const tags = filters[key];
+      const newFilters = {
+        ...filters,
+        [key]: tags.includes(tag)
+          ? tags.filter((v) => v !== tag)
+          : [...tags, tag]
+      };
+      setFilters(newFilters);
+      const newActiveList = {
+        ...activeList,
+        [key]: newFilters[key].length > 0
+      };
+      setActiveList(newActiveList);
+      checkIfActive(newActiveList);
+    },
+    [filters, setFilters]
+  );
+
+  const handleResetFilter = useCallback(
+    (key) => {
+      setFilters({
+        ...filters,
+        [key]: []
+      });
+      const newActiveList = {
+        ...activeList,
+        [key]: false
+      };
+      setActiveList(newActiveList);
+      checkIfActive(newActiveList);
+    },
+    [filters, setFilters]
+  );
+
+  return (
+    <div className="CourseFilterNested">
+      <div
+        className={classes('header', active && 'active')}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <div className="name">{name}</div>
+        <FontAwesomeIcon fixedWidth icon={expanded ? faAngleUp : faAngleDown} />
+      </div>
+      {expanded && (
+        <div>
+          {Object.keys(data).map((key) =>
+            data[key].type !== 'dropdown' ? (
+              <CourseFilter
+                key={data[key].property}
+                name={key}
+                labels={Object.keys(data[key])
+                  .filter((k) => k !== 'property' && k !== 'type')
+                  .reduce((obj, k) => {
+                    obj[k] = data[key][k];
+                    return obj;
+                  }, {})}
+                selectedTags={filters[data[key].property]}
+                onReset={() => handleResetFilter(data[key].property)}
+                onToggle={(tag) => handleToggleFilter(data[key].property, tag)}
+                alwaysExpand
+              />
+            ) : (
+              <CourseFilterDropDown
+                key={data[key].property}
+                name={key}
+                labels={Object.keys(data[key])
+                  .filter((k) => k !== 'property' && k !== 'type')
+                  .reduce((obj, k) => {
+                    obj[k] = data[key][k];
+                    return obj;
+                  }, {})}
+                selectedTag={filters[data[key].property]}
+                onToggle={(tag) => {
+                  setFilters({
+                    ...filters,
+                    [data[key].property]: tag
+                  });
+                  const newActiveList = {
+                    ...activeList,
+                    [key]: tag !== Object.values(data[key])[2]
+                  };
+                  setActiveList(newActiveList);
+                  checkIfActive(newActiveList);
+                }}
+              />
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/CourseFilterNested/stylesheet.scss b/src/components/CourseFilterNested/stylesheet.scss
new file mode 100644
index 00000000..b65905b4
--- /dev/null
+++ b/src/components/CourseFilterNested/stylesheet.scss
@@ -0,0 +1,61 @@
+@import "../../variables";
+
+.CourseFilterNested {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-top: 1px solid $color-border;
+
+  .header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: .8em;
+    cursor: pointer;
+    padding: 12px;
+    opacity: .5;
+    transition: opacity .2s;
+
+    &.active,
+    &:hover {
+      opacity: 1;
+    }
+
+    .name {
+      font-weight: bold;
+      flex: 1;
+      margin-right: 8px;
+
+      .or {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: -12px;
+    padding: 8px;
+
+    .tag {
+      @include card;
+      background-color: rgba($color-neutral, .5);
+      padding: 4px 8px;
+      opacity: .5;
+      transition: opacity .2s;
+      font-size: .8em;
+      cursor: pointer;
+
+      &.active {
+        opacity: 1;
+        font-weight: bold;
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 260e1d15..9ac200dd 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -6,8 +6,11 @@ export { default as CombinationContainer } from './CombinationContainer';
 export { default as Comparison } from './Comparison';
 export { default as Course } from './Course';
 export { default as CourseAdd } from './CourseAdd';
+export { default as CourseAddCatalog } from './CourseAddCatalog';
 export { default as CourseContainer } from './CourseContainer';
 export { default as CourseFilter } from './CourseFilter';
+export { default as CourseFilterDropDown } from './CourseFilterDropDown';
+export { default as CourseFilterNested } from './CourseFilterNested';
 export { default as Header } from './Header';
 export { default as Instructor } from './Instructor';
 export { default as Map } from './Map';
diff --git a/src/constants.ts b/src/constants.ts
index c2ebd751..a079737b 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -68,6 +68,71 @@ const CAMPUSES = {
   'MBA Evening Program': 'MBA Evening'
 };
 
+const CREDIT_HOURS_CLASS_TIME = {
+  'Credit Hours': {
+    type: 'list',
+    property: 'credits',
+    0: '0.0',
+    1: '1.0',
+    2: '2.0',
+    3: '3.0',
+    4: '4.0+'
+  },
+  Days: {
+    type: 'list',
+    property: 'days',
+    M: 'Mon',
+    T: 'Tues',
+    W: 'Wed',
+    R: 'Thu',
+    F: 'Fri'
+  },
+  'Starts After': {
+    type: 'dropdown',
+    property: 'startsAfter',
+    'Any time': 'Any time',
+    480: '8:00 am',
+    540: '9:00 am',
+    600: '10:00 am',
+    660: '11:00 am',
+    720: '12:00 pm',
+    780: '1:00 pm',
+    840: '2:00 pm',
+    900: '3:00 pm',
+    960: '4:00 pm',
+    1020: '5:00 pm',
+    1080: '6:00 pm',
+    1140: '7:00 pm',
+    1200: '8:00 pm',
+    1260: '9:00 pm'
+  },
+  'Ends Before': {
+    type: 'dropdown',
+    property: 'endsBefore',
+    'Any time': 'Any time',
+    480: '8:00 am',
+    540: '9:00 am',
+    600: '10:00 am',
+    660: '11:00 am',
+    720: '12:00 pm',
+    780: '1:00 pm',
+    840: '2:00 pm',
+    900: '3:00 pm',
+    960: '4:00 pm',
+    1020: '5:00 pm',
+    1080: '6:00 pm',
+    1140: '7:00 pm',
+    1200: '8:00 pm',
+    1260: '9:00 pm'
+  },
+  'Course Level': {
+    type: 'list',
+    property: 'courseLevel',
+    Undergraduate: 'Undergraduate',
+    Graduate: 'Graduate'
+  }
+};
+
 const BACKEND_BASE_URL = 'https://gt-scheduler.azurewebsites.net';
 
 export {
@@ -79,5 +144,6 @@ export {
   ASYNC_DELIVERY_MODE,
   DELIVERY_MODES,
   CAMPUSES,
+  CREDIT_HOURS_CLASS_TIME,
   BACKEND_BASE_URL
 };
diff --git a/tsconfig.json b/tsconfig.json
index f2850b71..d47a2388 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,26 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": [
-    "src"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}