diff --git a/app/src/components/MultipleScheduleDisplay.tsx b/app/src/components/MultipleScheduleDisplay.tsx
index 13472c4..7ea4d82 100644
--- a/app/src/components/MultipleScheduleDisplay.tsx
+++ b/app/src/components/MultipleScheduleDisplay.tsx
@@ -7,6 +7,7 @@ const NUM_PER_PAGE = 25;
 interface Props {
     schedules: Schedule[];
     numPerPage?: number;
+    pin: (sch: Schedule) => void;
 }
 
 export default function MultipleScheduleDisplay(props: Props) {
@@ -26,7 +27,7 @@ export default function MultipleScheduleDisplay(props: Props) {
             {schedulesToShow.map((schedule: Schedule, s) => (
                 <div key={s}>
                     <u>Schedule #{s + 1}</u>
-                    <ScheduleDisplay schedule={schedule} />
+                    <ScheduleDisplay schedule={schedule} pin={props.pin}/>
                 </div>
             ))}
 
diff --git a/app/src/components/MultipleSelectionDisplay.tsx b/app/src/components/MultipleSelectionDisplay.tsx
index f0037f9..7f781d4 100644
--- a/app/src/components/MultipleSelectionDisplay.tsx
+++ b/app/src/components/MultipleSelectionDisplay.tsx
@@ -8,6 +8,7 @@ interface Props {
     newSelection: () => void;
     handleRemove: (sectionToRemove: Section) => void;
     handleDeleteSelection: (ind: number) => void;
+
 }
 
 export default function MultipleSelectionDisplay(props: Props) {
diff --git a/app/src/components/ScheduleBuilder.tsx b/app/src/components/ScheduleBuilder.tsx
index c3f97d5..db33df0 100644
--- a/app/src/components/ScheduleBuilder.tsx
+++ b/app/src/components/ScheduleBuilder.tsx
@@ -1,269 +1,217 @@
-import { Component } from "react";
-import { Course, Section, SOC_API, SOC_Generic } from "@scripts/soc";
+//Importing React, necessary components, other class files, and any dependencies - used ChatGPT for proper syntax with the 'from ""'. 
+import React, { useState, useEffect } from "react";
 import {
-    Schedule,
-    ScheduleGenerator,
-    Selection,
-} from "@scripts/scheduleGenerator";
-import SectionPicker from "@components/SectionPicker";
-import MultipleSelectionDisplay from "@components/MultipleSelectionDisplay";
-import MultipleScheduleDisplay from "@components/MultipleScheduleDisplay";
+  SOC_API,
+  SOC_Generic,
+  Course,
+  Section
+} from "@scripts/soc";
+import {
+  Selection,
+  Schedule,
+  ScheduleGenerator,
+} 
+from "@scripts/scheduleGenerator";
 import { UF_SOC_API } from "@scripts/api";
 import { API_Filters } from "@scripts/apiTypes";
 import { arrayEquals, notEmpty, take } from "@scripts/utils";
 import { LIMIT_VALUES, LIMITS } from "@constants/scheduleGenerator";
+import SectionPicker from "@components/SectionPicker";
+import MultipleSelectionDisplay from "@components/MultipleSelectionDisplay";
+import MultipleScheduleDisplay from "@components/MultipleScheduleDisplay";
+
 
+//getDefaultSelections: returns an array of schedules selected
+//defaultProgram: default program value (this was already specified in the original code file)
 const getDefaultSelections = () => [new Selection()];
 const defaultProgram = "CWSP";
 
-interface Props {}
-
-interface States {
-    filters: API_Filters | null;
-    soc: SOC_Generic | null;
-    generator: ScheduleGenerator | null;
-    limit: number;
-    selections: Selection[];
-    schedules: Schedule[];
-    showAddCourse: boolean;
-}
-
-const defaultState: States = {
-    filters: null,
-    soc: null,
-    generator: null,
-    limit: LIMIT_VALUES[0],
-    selections: getDefaultSelections(),
-    schedules: [],
-    showAddCourse: false,
-};
-
-export default class ScheduleBuilder extends Component<Props, States> {
-    constructor(props: Props) {
-        super(props);
-        this.state = defaultState;
+//function to build schedules and accomplish what the ScheduleBuilder class had to achieve before
+const ScheduleBuilder = () => {
+  //filters: API Filters fetched from the UF_SOC_API and are set to null at this time
+  const [filters, setFilters] = useState<API_Filters | null>(null);
+  //generator: generation of schedules through user usage of the website
+  const [generator, setGenerator] = useState<ScheduleGenerator | null>(null);
+  //soc: Schedule of Courses and is set to null to start off with (since no schedules yet built)
+  const [soc, setSOCState] = useState<SOC_Generic | null>(null);
+  //limit: maximum limit of schedules that can be generated; set initially to LIMIT_VALUES[0]
+  const [limit, setLimit] = useState(LIMIT_VALUES[0]);
+  //schedules: initial list of schedules with no schedules at the beginning
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  //pinnedSchedules: if a course wants to be pinned by the user, it will be added to the Schedule array
+  const [pinnedSchedules, setPinnedSchedules] = useState<Schedule[]>([]);
+  //showAddCourse: if a course needs to be added to a schedule, the AddCourse button would be implemented
+  const [showAddCourse, setShowAddCourse] = useState(false);
+   //selections: user-selected course sections
+   const [selections, setSelections] = useState<Selection[]>(
+    getDefaultSelections()
+  );
+  
+  useEffect(() => {
+    //fetch filters from UF_SOC_API and set the SOCState with the default program
+    UF_SOC_API.fetchFilters().then(async (fetchedFilters) => {
+      setFilters(fetchedFilters);
+      await setSOCState(fetchedFilters.terms[0].CODE, defaultProgram);
+    });
+  }, []);
+  //allows for loading selected courses into the schedule generator
+  useEffect(() => {
+    if (generator) {
+      generator.loadSelections(
+        selections.filter((sel: Selection) => sel.length > 0)
+      );
+
+      const newSchedules: Schedule[] = take(
+        limit,
+        generator.yieldSchedules()
+      );
+      setSchedules(newSchedules);
+      //output whether the schedule was changed or not changed
+      if (schedules === newSchedules) {
+        console.log("Same schedules");
+      } else {
+        console.log("New schedules", newSchedules);
+      }
     }
-
-    reset() {
-        console.log("Resetting Schedule Builder");
-        this.setState({
-            selections: getDefaultSelections(),
-            schedules: [],
-        });
-    }
-
-    componentDidMount() {
-        // TODO: implement retry upon fetch error
-        UF_SOC_API.fetchFilters().then(async (filters) => {
-            this.setState({ filters });
-            await this.setSOC(filters.terms[0].CODE, defaultProgram);
-        });
-    }
-
-    componentDidUpdate(
-        _prevProps: Readonly<Props>,
-        prevState: Readonly<States>,
-    ) {
-        // If limit was changed or a section was added/removed from a section, generate new schedules
-        if (
-            this.state.limit != prevState.limit ||
-            !arrayEquals(
-                this.state.selections.filter(notEmpty),
-                prevState.selections.filter(notEmpty),
-            )
-        ) {
-            if (this.state.generator) {
-                // Make sure generator is not null
-                this.state.generator.loadSelections(
-                    // Generate schedules from non-empty selections
-                    this.state.selections.filter(
-                        (sel: Selection) => sel.length > 0,
-                    ),
-                );
-
-                const newSchedules: Schedule[] = [
-                    ...take(
-                        this.state.limit,
-                        this.state.generator.yieldSchedules(),
-                    ),
-                ];
-                this.setState({ schedules: newSchedules });
-                console.log(
-                    "Selections were changed, so schedules have been regenerated",
-                    newSchedules,
-                );
-
-                // If schedules changed, log schedules
-                if (prevState.schedules != newSchedules)
-                    console.log("New schedules", newSchedules);
-                else console.log("Same schedules");
-            }
-        }
-    }
-
-    async setSOC(termStr: string, programStr: string) {
-        console.log(`Setting SOC to "${termStr}" for "${programStr}"`);
-        await SOC_API.initialize({ termStr, programStr }).then((soc) =>
-            this.setState({
-                soc: soc,
-                generator: new ScheduleGenerator(soc),
-            }),
+  }, [limit, selections, generator, schedules]);
+  //reset the schedule building system
+  const reset = () => {
+    setSelections(getDefaultSelections());
+    setSchedules([]);
+    console.log("Reset Schedule Builder");
+  };
+  //initialize soc variable
+  const setSOC = async (termStr: string, programStr: string) => {
+    console.log(`Setting SOC to "${termStr}" for "${programStr}"`);
+    const socInstance = await SOC_API.initialize({ termStr, programStr });
+    setSOCState(socInstance);
+  };
+  //manages dropping (removing of) a course or schedule 
+  const handleDrop = (ind: number, uid: string) => {
+    if (soc) {
+      const item: Section | Course | null = soc.get(uid);
+      if (item) {
+        let sectionsToTryAdd: Section[];
+        if (item instanceof Course) sectionsToTryAdd = item.sections;
+        else sectionsToTryAdd = [item];
+
+        const sectionsToAdd: Section[] = sectionsToTryAdd.filter(
+          (section) =>
+            !selections.some((sel) => sel.includes(section))
         );
-        this.reset(); // Make sure to only show info from the current SOC
+        newSelection(ind, sectionsToAdd);
+      }
     }
-
-    async handleDrop(ind: number, uid: string) {
-        if (this.state.soc) {
-            // Make sure SOC exists
-            const item: Section | Course | null = this.state.soc.get(uid);
-            console.log("Handling drop; will try to add", item);
-
-            if (item) {
-                // Make sure a match was found (not null)
-                // Get the section(s) to try to add to selection
-                let sectionsToTryAdd: Section[];
-                if (item instanceof Course) sectionsToTryAdd = item.sections;
-                else sectionsToTryAdd = [item];
-
-                // Get the sections that have not been added to a selection
-                const sectionsToAdd: Section[] = sectionsToTryAdd.filter(
-                    (section) =>
-                        !this.state.selections.some(
-                            // TODO: extract to a Selections class
-                            (sel) => sel.includes(section),
-                        ),
-                );
-                this.newSelection(ind, sectionsToAdd); // Add the section that have not been added
-            }
-        }
-    }
-
-    // TODO: make separate functions
-    newSelection(ind: number = -1, sectionsToAdd: Section[] = []) {
-        if (ind == -1) {
-            this.setState({
-                selections: [...this.state.selections, new Selection()],
-            });
-            return;
-        }
-
-        const newSelections = this.state.selections.map((sel, i) => {
-            if (i == ind) return [...sel, ...sectionsToAdd];
+  };
+  
+  //handles adding of new courses or schedules
+  const newSelection = (ind: number = -1, sectionsToAdd: Section[] = []) => {
+    if (ind !== -1) {
+        const newSelections = selections.map((sel, i) => {
+        if (i === ind) return [...sel, ...sectionsToAdd];
             return sel;
         });
-        this.setState({ selections: newSelections });
     }
-
-    handleDeleteSelection(ind: number) {
-        let newSelections = this.state.selections.filter((_sel, i) => i != ind);
-        if (newSelections.length == 0) newSelections = getDefaultSelections();
-
-        this.setState({ selections: newSelections });
+    else{
+        setSelections([...selections, new Selection()]);
+        return;
     }
-
-    handleRemove(sectionToRemove: Section) {
-        const newSelections = this.state.selections.map((sel) =>
-            sel.filter((sec) => sec != sectionToRemove),
-        );
-        this.setState({ selections: newSelections });
+    setSelections(newSelections);
+  };
+  //manages removal of a course selection
+  const handleRemove = (sectionToRemove: Section) => {
+    const newSelections = selections.map((sel) =>
+      sel.filter((sec) => sec !== sectionToRemove)
+    );
+    setSelections(newSelections);
+  };
+  //manages deletion of a course selection
+  const handleDeleteSelection = (ind: number) => {
+    let newSelections = selections.filter((_sel, i) => i !== ind);
+    if (newSelections.length === 0) 
+        newSelections = getDefaultSelections();
+    setSelections(newSelections);
+  };
+  //manages the pin status of a schedule
+  const togglePin = (sch: Schedule) => {
+    const pinned = pinnedSchedules;
+    if (pinned.some((s) => arrayEquals(s, sch))) {
+      setPinnedSchedules(pinned.filter((s) => !arrayEquals(s, sch)));
+    } else {
+      setPinnedSchedules([...pinned, sch]);
     }
-
-    render() {
-        // Show loading screen if filters/terms haven't been fetched yet
-        if (this.state.filters === null)
-            return (
-                <div>
-                    <h1>Fetching latest semester information...</h1>
-                </div>
-            );
-        if (this.state.soc === null)
-            // Make sure SOC is set
+  };
+  //sample loading messages - used ChatGPT for assistance with this section
+  return (
+    <div className="min-h-screen flex flex-col h-screen p-3">
+      <div className="flex">
+        <p className="text-2xl text-slate-700 inline-block">
+          🐊 Swamp Scheduler 📆
+        </p>
+
+        <div className="grow"></div>
+
+        <select
+          id="term"
+          className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+          defaultValue={soc?.info.termStr}
+          onChange={(e) => setSOC(e.target.value, defaultProgram)}
+          disabled={false}
+        >
+          {filters?.terms.map((t) => {
+            const { term, year } = SOC_Generic.decodeTermString(t.CODE);
             return (
-                <div>
-                    <h1>Setting latest Schedule of Courses...</h1>
-                </div>
+              <option value={t.CODE} key={t.CODE}>
+                {term} {year}
+              </option>
             );
-
-        return (
-            <div className="min-h-screen flex flex-col h-screen p-3">
-                {/* Title & Term Selector */}
-                <div className="flex">
-                    <p className="text-2xl text-slate-700 inline-block">
-                        🐊 Swamp Scheduler 📆
-                    </p>
-
-                    <div className="grow"></div>
-
-                    <select
-                        id="term"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
-                        defaultValue={this.state.soc.info.termStr}
-                        onChange={(e) =>
-                            this.setSOC(e.target.value, defaultProgram)
-                        }
-                        disabled={false}
-                    >
-                        {this.state.filters?.terms.map((t) => {
-                            const { term, year } = SOC_Generic.decodeTermString(
-                                t.CODE,
-                            );
-                            return (
-                                <option value={t.CODE} key={t.CODE}>
-                                    {term} {year}
-                                </option>
-                            );
-                        })}
-                    </select>
-
-                    <select
-                        id="limit"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
-                        defaultValue={this.state.limit}
-                        onChange={(e) =>
-                            this.setState({ limit: Number(e.target.value) })
-                        }
-                        disabled={false}
-                    >
-                        {LIMITS.map(([num, str]) => (
-                            <option value={num} key={num}>
-                                Generate ≤{str}
-                            </option>
-                        ))}
-                    </select>
-                </div>
-
-                <hr className="my-1.5"></hr>
-
-                {/* Main of Builder */}
-                <main className="flex flex-row overflow-y-hidden h-full p-1">
-                    {/* Picker */}
-                    <div className="overflow-y-auto w-full">
-                        <SectionPicker soc={this.state.soc} />
-                    </div>
-
-                    {/* Selected */}
-                    <div className="overflow-y-auto w-full p-1">
-                        <MultipleSelectionDisplay
-                            selections={this.state.selections}
-                            handleDrop={this.handleDrop.bind(this)}
-                            newSelection={this.newSelection.bind(this)}
-                            handleRemove={this.handleRemove.bind(this)}
-                            handleDeleteSelection={this.handleDeleteSelection.bind(
-                                this,
-                            )}
-                            key={new Date().getTime()}
-                        />
-                    </div>
-
-                    {/* Generated Schedules */}
-                    <div className="overflow-y-auto w-full p-1">
-                        <MultipleScheduleDisplay
-                            schedules={this.state.schedules}
-                            key={new Date().getTime()}
-                        />
-                    </div>
-                </main>
-            </div>
-        );
-    }
-}
+          })}
+        </select>
+
+        <select
+          id="limit"
+          className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+          defaultValue={limit}
+          onChange={(e) => setLimit(Number(e.target.value))}
+          disabled={false}
+        >
+          {LIMITS.map(([num, str]) => (
+            <option value={num} key={num}>
+              Generate ≤{str}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <hr className="my-1.5"></hr>
+
+      <main className="flex flex-row overflow-y-hidden h-full p-1">
+        <div className="overflow-y-auto w-full">
+          <SectionPicker soc={soc} />
+        </div>
+
+        <div className="overflow-y-auto w-full p-1">
+          <MultipleSelectionDisplay
+            selections={selections}
+            newSelection={newSelection}
+            handleDrop={handleDrop}
+            handleRemove={handleRemove}
+            handleDeleteSelection={handleDeleteSelection}
+            pinnedSchedules={togglePin}
+            key={new Date().getTime()}
+          />
+        </div>
+
+        <div className="overflow-y-auto w-full p-1">
+          <MultipleScheduleDisplay
+            schedules={schedules}
+            pin={togglePin}
+            key={new Date().getTime()}
+          />
+        </div>
+      </main>
+    </div>
+  );
+};
+//export the function in other parts - the key purpose behind this task
+export default ScheduleBuilder;
diff --git a/app/src/components/ScheduleDisplay.tsx b/app/src/components/ScheduleDisplay.tsx
index cd6ccc7..5b0ecd5 100644
--- a/app/src/components/ScheduleDisplay.tsx
+++ b/app/src/components/ScheduleDisplay.tsx
@@ -12,10 +12,9 @@ import { GrPersonalComputer } from "react-icons/gr";
 
 interface Props {
     schedule: Schedule;
+    pin: (sch: Schedule) => void;
 }
 
-interface States {}
-
 // TODO: reconsider what to store
 type MeetTimeInfo = {
     meetTime: MeetTime;
@@ -24,7 +23,7 @@ type MeetTimeInfo = {
     sectionIsOnline: boolean;
 };
 
-export default class ScheduleDisplay extends Component<Props, States> {
+export default class ScheduleDisplay extends Component<Props> {
     // TODO: redo this (it is *disgusting*); maybe there is a library that does the work
     render() {
         const schedule = this.props.schedule,
@@ -179,103 +178,105 @@ export default class ScheduleDisplay extends Component<Props, States> {
 
         const onlineSections: Section[] = schedule.filter((s) => s.isOnline);
         return (
-            <div className={"text-sm"}>
-                <div className={"min-w-full w-5/12 my-1"}>
-                    <div className={"flex gap-1"}>
-                        {schedule.map((sec: Section, s: number) => (
-                            <div
-                                className={classNames([
-                                    "border-solid",
-                                    "border-2",
-                                    "border-gray-400",
-                                    getSectionColor(s),
-                                    "rounded",
-                                    "text-center",
-                                    "grow",
-                                ])}
-                            >
-                                <b>({s + 1})</b> Sec. {sec.number} [
-                                {sec.courseCode}]
-                            </div>
-                        ))}
+            <>
+                <div className={"text-sm"}>
+                    <div className={"min-w-full w-5/12 my-1"}>
+                        <div className={"flex gap-1"}>
+                            {schedule.map((sec: Section, s: number) => (
+                                <div
+                                    className={classNames([
+                                        "border-solid",
+                                        "border-2",
+                                        "border-gray-400",
+                                        getSectionColor(s),
+                                        "rounded",
+                                        "text-center",
+                                        "grow",
+                                    ])}
+                                >
+                                    <b>({s + 1})</b> Sec. {sec.number} [
+                                    {sec.courseCode}]
+                                </div>
+                            ))}
+                        </div>
                     </div>
-                </div>
 
-                <div className={"min-w-full w-5/12 my-1 flex gap-1"}>
-                    <div className={"inline-block h-max"}>
-                        <div className={"grid grid-cols-1 gap-y-1"}>
-                            {[...Array(periodCounts.all).keys()]
-                                .map((p) => p + 1)
-                                .map((p) => (
-                                    <div
-                                        className={
-                                            "border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"
-                                        }
-                                    >
-                                        <b>
-                                            {MeetTime.formatPeriod(
-                                                p,
-                                                schedule.term,
-                                            )}
-                                        </b>
-                                    </div>
-                                ))}
+                    <div className={"min-w-full w-5/12 my-1 flex gap-1"}>
+                        <div className={"inline-block h-max"}>
+                            <div className={"grid grid-cols-1 gap-y-1"}>
+                                {[...Array(periodCounts.all).keys()]
+                                    .map((p) => p + 1)
+                                    .map((p) => (
+                                        <div
+                                            className={"border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"}
+                                        >
+                                            <b>
+                                                {MeetTime.formatPeriod(
+                                                    p,
+                                                    schedule.term
+                                                )}
+                                            </b>
+                                        </div>
+                                    ))}
 
-                            {onlineSections.length > 0 && (
-                                <div
-                                    className={
-                                        "border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"
-                                    }
-                                >
+                                {onlineSections.length > 0 && (
                                     <div
-                                        className={
-                                            "flex items-center justify-center"
-                                        }
+                                        className={"border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"}
                                     >
-                                        <GrPersonalComputer />️
+                                        <div
+                                            className={"flex items-center justify-center"}
+                                        >
+                                            <GrPersonalComputer/>️
+                                        </div>
                                     </div>
-                                </div>
-                            )}
+                                )}
+                            </div>
                         </div>
-                    </div>
 
-                    <div className={"inline-block grow"}>
-                        <div className={"grid grid-cols-5 grid-rows-11 gap-1"}>
-                            {divs}
-                            {onlineSections.length > 0 && (
-                                <div className={"col-span-5"}>
-                                    <div className={"min-w-full w-5/12 h-full"}>
-                                        <div className={"flex gap-1"}>
-                                            {onlineSections.map(
-                                                (sec: Section, ind: number) => (
-                                                    <div
-                                                        className={classNames([
-                                                            "border-solid",
-                                                            "border-2",
-                                                            "border-gray-400",
-                                                            getSectionColor(
-                                                                ind,
-                                                            ),
-                                                            "rounded",
-                                                            "text-center",
-                                                            "grow",
-                                                        ])}
-                                                    >
-                                                        {sec.displayName}
-                                                        <sup>
-                                                            <b>{1 + ind}</b>
-                                                        </sup>
-                                                    </div>
-                                                ),
-                                            )}
+                        <div className={"inline-block grow"}>
+                            <div className={"grid grid-cols-5 grid-rows-11 gap-1"}>
+                                {divs}
+                                {onlineSections.length > 0 && (
+                                    <div className={"col-span-5"}>
+                                        <div className={"min-w-full w-5/12 h-full"}>
+                                            <div className={"flex gap-1"}>
+                                                {onlineSections.map(
+                                                    (sec: Section, ind: number) => (
+                                                        <div
+                                                            className={classNames([
+                                                                "border-solid",
+                                                                "border-2",
+                                                                "border-gray-400",
+                                                                getSectionColor(
+                                                                    ind
+                                                                ),
+                                                                "rounded",
+                                                                "text-center",
+                                                                "grow",
+                                                            ])}
+                                                        >
+                                                            {sec.displayName}
+                                                            <sup>
+                                                                <b>{1 + ind}</b>
+                                                            </sup>
+                                                        </div>
+                                                    )
+                                                )}
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            )}
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+                <button onClick={() => {
+                    //console.log(this.props.pin);
+                    this.props.pin(this.props.schedule)
+                }}>
+                    Pin Me
+                </button>
+            </>
         );
     }
 }
diff --git a/app/src/constants/frontend.ts b/app/src/constants/frontend.ts
index 0667c10..14dcfbf 100644
--- a/app/src/constants/frontend.ts
+++ b/app/src/constants/frontend.ts
@@ -15,6 +15,7 @@ export function getSectionColor(sectionInd: number): string {
 const SearchByStringExampleMap = new Map([
     ["course-code", "MAS3114"],
     ["course-title", "Linear Algebra"],
+    ["instructor", "Huang"],
 ]);
 
 export function getSearchByStringExample(searchByStr: string): string {
diff --git a/app/src/constants/soc.ts b/app/src/constants/soc.ts
index 3c3d3cf..e5227cf 100644
--- a/app/src/constants/soc.ts
+++ b/app/src/constants/soc.ts
@@ -64,13 +64,19 @@ export function getProgramString(program: Program): string {
 export enum SearchBy {
     COURSE_CODE = "Course Code",
     COURSE_TITLE = "Course Title",
+    INSTRUCTOR = "Instructor",
 }
 
-export const SearchBys = [SearchBy.COURSE_CODE, SearchBy.COURSE_TITLE];
+export const SearchBys = [
+    SearchBy.COURSE_CODE,
+    SearchBy.COURSE_TITLE,
+    SearchBy.INSTRUCTOR,
+];
 
 const SearchByStringMap = new Map([
     ["course-code", SearchBy.COURSE_CODE],
     ["course-title", SearchBy.COURSE_TITLE],
+    ["instructor", SearchBy.INSTRUCTOR],
 ]);
 
 export function getSearchBy(searchByStr: string): SearchBy {
diff --git a/app/src/scripts/soc/soc.tsx b/app/src/scripts/soc/soc.tsx
index 7ed305d..30084a7 100644
--- a/app/src/scripts/soc/soc.tsx
+++ b/app/src/scripts/soc/soc.tsx
@@ -131,6 +131,14 @@ export abstract class SOC_Generic {
             return this.courses.filter((c) =>
                 c.name.toUpperCase().includes(upperPhrase),
             );
+        } else if (searchBy === SearchBy.INSTRUCTOR) {
+            return this.courses.filter((c) =>
+                c.sections.some((s) =>
+                    s.instructors.some((inst) =>
+                        inst.toUpperCase().includes(upperPhrase),
+                    ),
+                ),
+            );
         }
         throw new Error("Unhandled SearchBy.");
     }