diff --git a/apps/antalmanac/src/components/Header/Header.tsx b/apps/antalmanac/src/components/Header/Header.tsx
index c6a06278b..c62b6ce2d 100644
--- a/apps/antalmanac/src/components/Header/Header.tsx
+++ b/apps/antalmanac/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ import { useState, type MouseEventHandler } from 'react';
 
 import AboutPage from './AboutPage';
 import Feedback from './Feedback';
-import ImportStudyList from './ImportStudyList';
+import Import from './Import';
 import LoadSaveScheduleFunctionality from './LoadSaveFunctionality';
 import SettingsMenu from './SettingsMenu';
 import Export from './Export';
@@ -42,7 +42,7 @@ interface CustomAppBarProps {
 }
 
 const components = [
-    <ImportStudyList key="studylist" />,
+    <Import key="studylist" />,
     <Export key="export" />,
     <Feedback key="feedback" />,
     <AboutPage key="about" />,
diff --git a/apps/antalmanac/src/components/Header/Import.tsx b/apps/antalmanac/src/components/Header/Import.tsx
new file mode 100644
index 000000000..405a6fd5f
--- /dev/null
+++ b/apps/antalmanac/src/components/Header/Import.tsx
@@ -0,0 +1,247 @@
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    FormControl,
+    FormControlLabel,
+    Radio,
+    RadioGroup,
+    TextField,
+    Tooltip,
+} from '@material-ui/core';
+import InputLabel from '@material-ui/core/InputLabel';
+import { PostAdd } from '@material-ui/icons';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+
+import TermSelector from '../RightPane/CoursePane/SearchForm/TermSelector';
+import RightPaneStore from '../RightPane/RightPaneStore';
+import { addCustomEvent, openSnackbar } from '$actions/AppStoreActions';
+import analyticsEnum, { logAnalytics } from '$lib/analytics';
+import { warnMultipleTerms } from '$lib/helpers';
+import AppStore from '$stores/AppStore';
+import WebSOC from '$lib/websoc';
+import { CourseInfo } from '$lib/course_data.types';
+import { addCourse } from '$actions/AppStoreActions';
+import { ZotCourseResponse, queryZotCourse } from '$lib/zotcourse';
+
+function Import() {
+    const [open, setOpen] = useState(false);
+    const [term, setTerm] = useState(RightPaneStore.getFormData().term);
+    const [importSource, setImportSource] = useState('studylist');
+    const [studyListText, setStudyListText] = useState('');
+    const [zotcourseScheduleName, setZotcourseScheduleName] = useState('');
+
+    const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
+
+    const handleOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const handleSubmit = async () => {
+        const currentSchedule = AppStore.getCurrentScheduleIndex();
+
+        let zotcourseImport: ZotCourseResponse | null = null;
+        if (importSource === 'zotcourse') {
+            try {
+                zotcourseImport = await queryZotCourse(zotcourseScheduleName);
+            } catch (e) {
+                openSnackbar('error', 'Could not import from Zotcourse.');
+                console.error(e);
+                handleClose();
+                return;
+            }
+        }
+
+        const sectionCodes = zotcourseImport ? zotcourseImport.codes : studyListText.match(/\d{5}/g);
+
+        if (!sectionCodes) {
+            openSnackbar('error', 'Cannot import an empty/invalid Study List/Zotcourse.');
+            handleClose();
+            return;
+        }
+
+        // Import Custom Events from Zotcourse
+        if (zotcourseImport) {
+            const events = zotcourseImport.customEvents;
+            for (const event of events) {
+                addCustomEvent(event, [currentSchedule]);
+            }
+        }
+
+        try {
+            const sectionsAdded = addCoursesMultiple(
+                await WebSOC.getCourseInfo({
+                    term: term,
+                    sectionCodes: sectionCodes.join(','),
+                }),
+                term,
+                currentSchedule
+            );
+
+            logAnalytics({
+                category: analyticsEnum.nav.title,
+                action: analyticsEnum.nav.actions.IMPORT_STUDY_LIST,
+                value: sectionsAdded / (sectionCodes.length || 1),
+            });
+
+            if (sectionsAdded === sectionCodes.length) {
+                openSnackbar('success', `Successfully imported ${sectionsAdded} of ${sectionsAdded} classes!`);
+            } else if (sectionsAdded !== 0) {
+                openSnackbar(
+                    'warning',
+                    `Only successfully imported ${sectionsAdded} of ${sectionCodes.length} classes. 
+                        Please make sure that you selected the correct term and that none of your classes are missing.`
+                );
+            } else {
+                openSnackbar(
+                    'error',
+                    'Failed to import any classes! Please make sure that you pasted the correct Study List.'
+                );
+            }
+        } catch (e) {
+            openSnackbar('error', 'An error occurred while trying to import the Study List.');
+            console.error(e);
+        }
+
+        setStudyListText('');
+        handleClose();
+    };
+
+    const addCoursesMultiple = (
+        courseInfo: { [sectionCode: string]: CourseInfo },
+        term: string,
+        scheduleIndex: number
+    ) => {
+        for (const section of Object.values(courseInfo)) {
+            addCourse(section.section, section.courseDetails, term, scheduleIndex, true);
+        }
+
+        const terms = AppStore.termsInSchedule(term);
+        if (terms.size > 1) {
+            warnMultipleTerms(terms);
+        }
+
+        return Object.values(courseInfo).length;
+    };
+
+    const handleImportSourceChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+        setImportSource(event.currentTarget.value);
+    }, []);
+
+    const handleStudyListTextChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setStudyListText(event.currentTarget.value);
+    }, []);
+
+    const handleZotcourseScheduleNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setZotcourseScheduleName(event.currentTarget.value);
+    }, []);
+
+    useEffect(() => {
+        const handleSkeletonModeChange = () => {
+            setSkeletonMode(AppStore.getSkeletonMode());
+        };
+
+        AppStore.on('skeletonModeChange', handleSkeletonModeChange);
+
+        return () => {
+            AppStore.off('skeletonModeChange', handleSkeletonModeChange);
+        };
+    }, []);
+
+    return (
+        <>
+            {/* TODO after mui v5 migration: change icon to ContentPasteGo */}
+            <Tooltip title="Import a schedule from your Study List">
+                <Button onClick={handleOpen} color="inherit" startIcon={<PostAdd />} disabled={skeletonMode}>
+                    Import
+                </Button>
+            </Tooltip>
+            <Dialog open={open} onClose={handleClose}>
+                <DialogTitle>Import Schedule</DialogTitle>
+                <DialogContent>
+                    <FormControl>
+                        <RadioGroup
+                            name="changeImportSource"
+                            aria-label="changeImportSource"
+                            value={importSource}
+                            onChange={handleImportSourceChange}
+                        >
+                            <FormControlLabel
+                                value="studylist"
+                                control={<Radio color="primary" />}
+                                label="From Study List"
+                            />
+                            <FormControlLabel
+                                value="zotcourse"
+                                control={<Radio color="primary" />}
+                                label="From Zotcourse"
+                            />
+                        </RadioGroup>
+                    </FormControl>
+                    {importSource === 'studylist' ? (
+                        <Box>
+                            <DialogContentText>
+                                Paste the contents of your Study List below to import it into AntAlmanac.
+                                <br />
+                                To find your Study List, go to{' '}
+                                <a href={'https://www.reg.uci.edu/cgi-bin/webreg-redirect.sh'}>WebReg</a> or{' '}
+                                <a href={'https://www.reg.uci.edu/access/student/welcome/'}>StudentAccess</a>, and click
+                                on Study List once you&apos;ve logged in. Copy everything below the column names (Code,
+                                Dept, etc.) under the Enrolled Classes section.
+                            </DialogContentText>
+                            <InputLabel style={{ fontSize: '9px' }}>Study List</InputLabel>
+                            <TextField
+                                fullWidth
+                                multiline
+                                margin="dense"
+                                type="text"
+                                placeholder="Paste here"
+                                value={studyListText}
+                                onChange={handleStudyListTextChange}
+                            />
+                            <br />
+                        </Box>
+                    ) : (
+                        <Box>
+                            <DialogContentText>
+                                Paste your Zotcourse schedule name below to import it into AntAlmanac.
+                            </DialogContentText>
+                            <InputLabel style={{ fontSize: '9px' }}>Zotcourse Schedule</InputLabel>
+                            <TextField
+                                fullWidth
+                                multiline
+                                margin="dense"
+                                type="text"
+                                placeholder="Paste here"
+                                value={zotcourseScheduleName}
+                                onChange={handleZotcourseScheduleNameChange}
+                            />
+                            <br />
+                        </Box>
+                    )}
+
+                    <DialogContentText>Make sure you also have the right term selected.</DialogContentText>
+                    <TermSelector changeTerm={setTerm} fieldName={'selectedTerm'} />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} color="primary">
+                        Import
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}
+
+export default Import;
diff --git a/apps/antalmanac/src/components/Header/ImportStudyList.tsx b/apps/antalmanac/src/components/Header/ImportStudyList.tsx
deleted file mode 100644
index 7a611cfda..000000000
--- a/apps/antalmanac/src/components/Header/ImportStudyList.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    FormControl,
-    FormControlLabel,
-    Radio,
-    RadioGroup,
-    TextField,
-    Tooltip,
-} from '@material-ui/core';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
-import { PostAdd } from '@material-ui/icons';
-import { PureComponent } from 'react';
-
-import TermSelector from '../RightPane/CoursePane/SearchForm/TermSelector';
-import RightPaneStore from '../RightPane/RightPaneStore';
-import { addCustomEvent, openSnackbar } from '$actions/AppStoreActions';
-import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { warnMultipleTerms } from '$lib/helpers';
-import AppStore from '$stores/AppStore';
-import WebSOC from '$lib/websoc';
-import { CourseInfo } from '$lib/course_data.types';
-import { addCourse } from '$actions/AppStoreActions';
-import { ZotCourseResponse, queryZotCourse } from '$lib/zotcourse';
-
-const styles = {
-    inputLabel: {
-        'font-size': '9px',
-    },
-};
-
-interface ImportStudyListProps {
-    classes: ClassNameMap;
-}
-
-interface ImportStudyListState {
-    isOpen: boolean;
-    selectedTerm: string;
-    studyListText: string;
-    zotcourseScheduleName: string;
-    importSource: string;
-}
-
-class ImportStudyList extends PureComponent<ImportStudyListProps, ImportStudyListState> {
-    state: ImportStudyListState = {
-        isOpen: false,
-        selectedTerm: RightPaneStore.getFormData().term,
-        studyListText: '',
-        zotcourseScheduleName: '',
-        importSource: 'studylist',
-    };
-
-    onTermSelectorChange = (field: string, value: string) => {
-        this.setState({ selectedTerm: value });
-    };
-
-    handleError = (error: Error) => {
-        openSnackbar('error', 'An error occurred while trying to import the Study List.');
-        console.error(error);
-    };
-
-    handleOpen = () => {
-        this.setState({ isOpen: true });
-    };
-
-    addCoursesMultiple = (courseInfo: { [sectionCode: string]: CourseInfo }, term: string, scheduleIndex: number) => {
-        for (const section of Object.values(courseInfo)) {
-            addCourse(section.section, section.courseDetails, term, scheduleIndex, true);
-        }
-        const terms = AppStore.termsInSchedule(term);
-        if (terms.size > 1) warnMultipleTerms(terms);
-        return Object.values(courseInfo).length;
-    };
-
-    handleClose = (doImport: boolean) => {
-        this.setState({ isOpen: false }, async () => {
-            document.removeEventListener('keydown', this.enterEvent, false);
-            if (doImport) {
-                const currSchedule = AppStore.getCurrentScheduleIndex();
-                let zotcourseImport: ZotCourseResponse | null = null;
-                if (this.state.importSource === 'zotcourse') {
-                    try {
-                        zotcourseImport = await queryZotCourse(this.state.zotcourseScheduleName);
-                    } catch (e) {
-                        /* empty */
-                    }
-                }
-                const sectionCodes = zotcourseImport ? zotcourseImport.codes : this.state.studyListText.match(/\d{5}/g);
-                if (!sectionCodes) {
-                    openSnackbar('error', 'Cannot import an empty/invalid Study List/Zotcourse.');
-                    return;
-                }
-                // Import Custom Events from zotcourse
-                if (zotcourseImport) {
-                    const events = zotcourseImport.customEvents;
-                    for (const event of events) {
-                        addCustomEvent(event, [currSchedule]);
-                    }
-                }
-
-                try {
-                    const sectionsAdded = this.addCoursesMultiple(
-                        await WebSOC.getCourseInfo({
-                            term: this.state.selectedTerm,
-                            sectionCodes: sectionCodes.join(','),
-                        }),
-                        this.state.selectedTerm,
-                        currSchedule
-                    );
-                    logAnalytics({
-                        category: analyticsEnum.nav.title,
-                        action: analyticsEnum.nav.actions.IMPORT_STUDY_LIST,
-                        value: sectionsAdded / (sectionCodes.length || 1),
-                    });
-                    if (sectionsAdded === sectionCodes.length) {
-                        openSnackbar('success', `Successfully imported ${sectionsAdded} of ${sectionsAdded} classes!`);
-                    } else if (sectionsAdded !== 0) {
-                        openSnackbar(
-                            'warning',
-                            `Successfully imported ${sectionsAdded} of ${sectionCodes.length} classes. 
-                        Please make sure that you selected the correct term and that none of your classes are missing.`
-                        );
-                    } else {
-                        openSnackbar(
-                            'error',
-                            'Failed to import any classes! Please make sure that you pasted the correct Study List.'
-                        );
-                    }
-                } catch (e) {
-                    if (e instanceof Error) this.handleError(e);
-                }
-            }
-            this.setState({ studyListText: '' });
-        });
-    };
-
-    enterEvent = (event: KeyboardEvent) => {
-        const charCode = event.which ? event.which : event.keyCode;
-        // enter (13) or newline (10)
-        if (charCode === 13 || charCode === 10) {
-            event.preventDefault();
-            this.handleClose(true);
-        }
-    };
-
-    componentDidUpdate(prevProps: ImportStudyListProps, prevState: ImportStudyListState) {
-        if (!prevState.isOpen && this.state.isOpen) {
-            document.addEventListener('keydown', this.enterEvent, false);
-        } else if (prevState.isOpen && !this.state.isOpen) {
-            document.removeEventListener('keydown', this.enterEvent, false);
-        }
-    }
-
-    toggleImportSource(radioGroupEvent: React.ChangeEvent<HTMLInputElement>) {
-        this.setState({ importSource: radioGroupEvent.target.value });
-    }
-
-    render() {
-        const { classes } = this.props;
-
-        return (
-            <>
-                {/* TODO after mui v5 migration: change icon to ContentPasteGo */}
-                <Tooltip title="Import a schedule from your Study List">
-                    <Button onClick={this.handleOpen} color="inherit" startIcon={<PostAdd />}>
-                        Import
-                    </Button>
-                </Tooltip>
-                <Dialog
-                    open={this.state.isOpen}
-                    onClose={() =>
-                        this.setState({ isOpen: false, studyListText: '' }, async () => {
-                            document.removeEventListener('keydown', this.enterEvent, false);
-                        })
-                    }
-                >
-                    <DialogTitle>Import Schedule</DialogTitle>
-                    <DialogContent>
-                        <FormControl>
-                            <RadioGroup
-                                name="changeImportSource"
-                                aria-label="changeImportSource"
-                                value={this.state.importSource}
-                                onChange={(event) => {
-                                    this.toggleImportSource(event);
-                                }}
-                            >
-                                <FormControlLabel
-                                    value="studylist"
-                                    control={<Radio color="primary" />}
-                                    label="From Study List"
-                                />
-                                <FormControlLabel
-                                    value="zotcourse"
-                                    control={<Radio color="primary" />}
-                                    label="From Zotcourse"
-                                />
-                            </RadioGroup>
-                        </FormControl>
-                        {this.state.importSource === 'studylist' ? (
-                            <div>
-                                <DialogContentText>
-                                    Paste the contents of your Study List below to import it into AntAlmanac.
-                                    <br />
-                                    To find your Study List, go to{' '}
-                                    <a href={'https://www.reg.uci.edu/cgi-bin/webreg-redirect.sh'}>WebReg</a> or{' '}
-                                    <a href={'https://www.reg.uci.edu/access/student/welcome/'}>StudentAccess</a>, and
-                                    click on Study List once you&apos;ve logged in. Copy everything below the column
-                                    names (Code, Dept, etc.) under the Enrolled Classes section.
-                                    {/* &apos; is an apostrophe (') */}
-                                </DialogContentText>
-                                <InputLabel className={classes.inputLabel}>Study List</InputLabel>
-                                <TextField
-                                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                                    autoFocus
-                                    fullWidth
-                                    multiline
-                                    margin="dense"
-                                    type="text"
-                                    placeholder="Paste here"
-                                    value={this.state.studyListText}
-                                    onChange={(event) => this.setState({ studyListText: event.target.value })}
-                                />
-                                <br />
-                            </div>
-                        ) : (
-                            <div>
-                                <DialogContentText>
-                                    Paste your Zotcourse schedule name below to import it into AntAlmanac.
-                                    {/* &apos; is an apostrophe (') */}
-                                </DialogContentText>
-                                <InputLabel className={classes.inputLabel}>Zotcourse Schedule</InputLabel>
-                                <TextField
-                                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                                    autoFocus
-                                    fullWidth
-                                    multiline
-                                    margin="dense"
-                                    type="text"
-                                    placeholder="Paste here"
-                                    value={this.state.zotcourseScheduleName}
-                                    onChange={(event) => this.setState({ zotcourseScheduleName: event.target.value })}
-                                />
-                                <br />
-                            </div>
-                        )}
-
-                        <DialogContentText>Make sure you also have the right term selected.</DialogContentText>
-                        <TermSelector changeState={this.onTermSelectorChange} fieldName={'selectedTerm'} />
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => this.handleClose(false)} color="primary">
-                            Cancel
-                        </Button>
-                        <Button onClick={() => this.handleClose(true)} color="primary">
-                            Import
-                        </Button>
-                    </DialogActions>
-                </Dialog>
-            </>
-        );
-    }
-}
-
-export default withStyles(styles)(ImportStudyList);
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/SearchForm.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/SearchForm.tsx
index e0049dda2..74ccfe216 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/SearchForm.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/SearchForm.tsx
@@ -80,7 +80,7 @@ const SearchForm = (props: { classes: ClassNameMap; toggleSearch: () => void })
                 <div className={classes.container}>
                     <div className={classes.margin}>
                         <TermSelector
-                            changeState={(field: string, value: string) => RightPaneStore.updateFormValue(field, value)}
+                            changeTerm={(field: string, value: string) => RightPaneStore.updateFormValue(field, value)}
                             fieldName={'term'}
                         />
                         <Tooltip title="Toggle Manual Search">
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/TermSelector.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/TermSelector.tsx
index 344839614..0efc8ed68 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/TermSelector.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/TermSelector.tsx
@@ -1,71 +1,64 @@
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import { ChangeEvent, PureComponent } from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import { ChangeEvent, useEffect, useState } from 'react';
 
 import RightPaneStore from '../../RightPaneStore';
 import { termData } from '$lib/termData';
 
 interface TermSelectorProps {
-    changeState: (field: string, value: string) => void;
+    changeTerm: (field: string, value: string) => void;
     fieldName: string;
 }
 
-class TermSelector extends PureComponent<TermSelectorProps> {
-    updateTermAndGetFormData() {
-        RightPaneStore.updateFormValue('term', RightPaneStore.getUrlTermValue());
-        return RightPaneStore.getFormData().term;
-    }
+function TermSelector(props: TermSelectorProps) {
+    const { changeTerm, fieldName } = props;
 
-    getTerm() {
-        return RightPaneStore.getUrlTermValue() ? this.updateTermAndGetFormData() : RightPaneStore.getFormData().term;
-    }
+    const getTerm = () => {
+        const urlTerm = RightPaneStore.getUrlTermValue();
 
-    state = {
-        term: this.getTerm(),
-    };
+        if (urlTerm) {
+            RightPaneStore.updateFormValue('term', urlTerm);
+        }
 
-    resetField = () => {
-        this.setState({ term: RightPaneStore.getFormData().term });
+        return RightPaneStore.getFormData().term;
     };
 
-    componentDidMount = () => {
-        RightPaneStore.on('formReset', this.resetField);
-    };
+    const [term, setTerm] = useState(getTerm());
 
-    componentWillUnmount() {
-        RightPaneStore.removeListener('formReset', this.resetField);
-    }
+    const handleChange = (event: ChangeEvent<{ name?: string | undefined; value: unknown }>) => {
+        const newValue = event.target.value as string;
 
-    handleChange = (event: ChangeEvent<{ name?: string | undefined; value: unknown }>) => {
-        this.setState({ term: event.target.value });
-        this.props.changeState(this.props.fieldName, event.target.value as string);
+        setTerm(newValue);
+        changeTerm(fieldName, newValue);
 
-        const stateObj = { url: 'url' };
-        const url = new URL(window.location.href);
-        const urlParam = new URLSearchParams(url.search);
-        urlParam.delete('term');
-        urlParam.append('term', event.target.value as string);
-        const param = urlParam.toString();
-        const new_url = `${param && param !== 'null' ? '?' : ''}${param}`;
-        history.replaceState(stateObj, 'url', '/' + new_url);
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.set('term', newValue);
+        history.replaceState({ url: 'url' }, 'url', `/?${urlParams}`);
     };
 
-    render() {
-        return (
-            <FormControl fullWidth>
-                <InputLabel>Term</InputLabel>
-                <Select value={this.state.term} onChange={this.handleChange}>
-                    {termData.map((term, index) => (
-                        <MenuItem key={index} value={term.shortName}>
-                            {term.longName}
-                        </MenuItem>
-                    ))}
-                </Select>
-            </FormControl>
-        );
-    }
+    const resetField = () => {
+        setTerm(RightPaneStore.getFormData().term);
+    };
+
+    useEffect(() => {
+        RightPaneStore.on('formReset', resetField);
+
+        return () => {
+            RightPaneStore.off('formReset', resetField);
+        };
+    });
+
+    return (
+        <FormControl fullWidth>
+            <InputLabel>Term</InputLabel>
+            <Select value={term} onChange={handleChange}>
+                {termData.map((term, index) => (
+                    <MenuItem key={index} value={term.shortName}>
+                        {term.longName}
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    );
 }
 
 export default TermSelector;
diff --git a/apps/antalmanac/src/lib/websoc.ts b/apps/antalmanac/src/lib/websoc.ts
index 5bed3e793..c79b1c3a1 100644
--- a/apps/antalmanac/src/lib/websoc.ts
+++ b/apps/antalmanac/src/lib/websoc.ts
@@ -58,6 +58,7 @@ class _WebSOC {
 
     async getCourseInfo(websoc_params: Record<string, string>) {
         const SOCObject = await this.query(websoc_params);
+
         const courseInfo: { [sectionCode: string]: CourseInfo } = {};
         for (const school of SOCObject.schools) {
             for (const department of school.departments) {