diff --git a/client/src/components/CourseTerms.tsx b/client/src/components/CourseTerms.tsx
index f4b7bf92..76c68b4d 100644
--- a/client/src/components/CourseTerms.tsx
+++ b/client/src/components/CourseTerms.tsx
@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
 import {
+  compareTerms,
   getCurrentTerms,
   groupCurrentCourseTermInstructors,
 } from '../lib/utils';
@@ -59,7 +60,8 @@ type CourseTermsProps = {
 export const CourseTerms = ({ course, variant, query }: CourseTermsProps) => {
   const instructorGroups = groupCurrentCourseTermInstructors(course);
 
-  const initialExpandedState = () => instructorGroups.map(() => false);
+  const initialExpandedState = () =>
+    Object.entries(instructorGroups).map(() => false);
 
   const [expandedState, setExpandedState] = useState(initialExpandedState());
 
@@ -98,69 +100,71 @@ export const CourseTerms = ({ course, variant, query }: CourseTermsProps) => {
 
   return (
     <div className='mr-auto flex flex-wrap gap-x-2'>
-      {instructorGroups.map(([term, instructors], i) => {
-        const season = term.split(' ')[0].toLowerCase();
-        return (
-          <div className='relative' key={term}>
-            <div
-              className={twMerge(
-                'my-1.5 flex text-sm dark:bg-neutral-700',
-                variant === 'small' ? 'px-2 py-1' : 'max-w-fit px-2 py-1',
-                termColorMap[season],
-                expandedState[i] ? 'rounded-xl' : 'rounded-full'
-              )}
-            >
-              {instructors.length > 0 ? (
-                <div className='flex flex-col gap-y-1'>
-                  {(expandedState[i]
-                    ? instructors
-                    : instructors.slice(0, 1)
-                  ).map((ins) => (
-                    <Link
-                      key={ins.name}
-                      to={`/instructor/${encodeURIComponent(ins.name)}`}
-                    >
-                      <div className='flex items-center space-x-1.5 whitespace-nowrap'>
-                        <SeasonIcon term={term} variant={variant} />
-                        <div className='pr-1 font-medium dark:text-gray-200'>
-                          <Highlight
-                            text={ins.name}
-                            query={query || undefined}
-                          />
+      {Object.entries(instructorGroups)
+        .sort((a, b) => compareTerms(a[0], b[0]))
+        .map(([term, instructors], i) => {
+          const season = term.split(' ')[0].toLowerCase();
+          return (
+            <div className='relative' key={term}>
+              <div
+                className={twMerge(
+                  'my-1.5 flex text-sm dark:bg-neutral-700',
+                  variant === 'small' ? 'px-2 py-1' : 'max-w-fit px-2 py-1',
+                  termColorMap[season],
+                  expandedState[i] ? 'rounded-xl' : 'rounded-full'
+                )}
+              >
+                {instructors.length > 0 ? (
+                  <div className='flex flex-col gap-y-1'>
+                    {(expandedState[i]
+                      ? instructors
+                      : instructors.slice(0, 1)
+                    ).map((ins) => (
+                      <Link
+                        key={ins.name}
+                        to={`/instructor/${encodeURIComponent(ins.name)}`}
+                      >
+                        <div className='flex items-center space-x-1.5 whitespace-nowrap'>
+                          <SeasonIcon term={term} variant={variant} />
+                          <div className='pr-1 font-medium dark:text-gray-200'>
+                            <Highlight
+                              text={ins.name}
+                              query={query || undefined}
+                            />
+                          </div>
                         </div>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              ) : (
-                <div className='flex items-center space-x-1.5 whitespace-nowrap'>
-                  <SeasonIcon term={term} variant={variant} />
-                  <div className={'pr-1 font-medium dark:text-gray-200'}>
-                    No Instructor Assigned
+                      </Link>
+                    ))}
                   </div>
-                </div>
-              )}
-              {instructors.length > 1 && (
-                <span
-                  className='cursor-pointer font-semibold dark:text-gray-200'
-                  onClick={() => handleToggle(i)}
-                >
-                  +{instructors.length - 1}
-                  {variant === 'large' && (
-                    <ChevronDown
-                      className={twMerge(
-                        'ml-1 inline-block',
-                        expandedState[i] ? 'rotate-180' : 'rotate-0'
-                      )}
-                      size={16}
-                    />
-                  )}
-                </span>
-              )}
+                ) : (
+                  <div className='flex items-center space-x-1.5 whitespace-nowrap'>
+                    <SeasonIcon term={term} variant={variant} />
+                    <div className={'pr-1 font-medium dark:text-gray-200'}>
+                      No Instructor Assigned
+                    </div>
+                  </div>
+                )}
+                {instructors.length > 1 && (
+                  <span
+                    className='cursor-pointer font-semibold dark:text-gray-200'
+                    onClick={() => handleToggle(i)}
+                  >
+                    +{instructors.length - 1}
+                    {variant === 'large' && (
+                      <ChevronDown
+                        className={twMerge(
+                          'ml-1 inline-block',
+                          expandedState[i] ? 'rotate-180' : 'rotate-0'
+                        )}
+                        size={16}
+                      />
+                    )}
+                  </span>
+                )}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
     </div>
   );
 };
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index ce32f9cd..54825733 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -4,14 +4,13 @@ import { Course } from '../model/Course';
 import { Instructor } from '../model/Instructor';
 import type { Schedule } from '../model/Schedule';
 
-const COURSE_TERM_ORDER = ['Fall', 'Winter', 'Summer'];
-
 export const groupCurrentCourseTermInstructors = (course: Course) => {
   const currentTerms = getCurrentTerms();
 
   const currentInstructors = course.instructors.filter((i) =>
     currentTerms.includes(i.term)
   );
+
   const termGroups = _.groupBy(currentInstructors, (i: Instructor) => i.term);
 
   for (const term of course.terms) {
@@ -19,12 +18,7 @@ export const groupCurrentCourseTermInstructors = (course: Course) => {
     termGroups[term] = [];
   }
 
-  const entries = Object.entries(termGroups);
-
-  const indexOfTerm = (term: string) =>
-    COURSE_TERM_ORDER.indexOf(term.split(' ')[0]);
-
-  return entries.sort(([a], [b]) => indexOfTerm(a) - indexOfTerm(b));
+  return termGroups;
 };
 
 export const getCurrentTerms = (): [string, string, string] => {
@@ -32,6 +26,9 @@ export const getCurrentTerms = (): [string, string, string] => {
   const month = now.getMonth() + 1;
   const year = now.getFullYear();
 
+  if (month >= 5 && month < 8)
+    return [`Summer ${year}`, `Fall ${year}`, `Winter ${year + 1}`];
+
   if (month >= 8)
     return [`Fall ${year}`, `Winter ${year + 1}`, `Summer ${year + 1}`];