diff --git a/src/components/planner/sidebar/CoursesController/ClassSelector.tsx b/src/components/planner/sidebar/CoursesController/ClassSelector.tsx
index 52db2bf5..a43c9114 100644
--- a/src/components/planner/sidebar/CoursesController/ClassSelector.tsx
+++ b/src/components/planner/sidebar/CoursesController/ClassSelector.tsx
@@ -17,15 +17,12 @@ const ClassSelector = ({ course }: Props) => {
   const classSelectorContentRef = useRef(null)
 
   const { multipleOptions, setMultipleOptions, selectedOption } = useContext(MultipleOptionsContext)
-
   const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
-
   const courseOption: CourseOption = multipleOptions[selectedOption].course_options.find((opt) => opt.course_id === course.id)
-
   const [locked, setLocked] = useState(courseOption?.locked)
-
   const [preview, setPreview] = useState<number | null>(null)
   const [display, setDisplay] = useState(courseOption?.picked_class_id)
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   useEffect(() => {
     const course_options = multipleOptions[selectedOption].course_options;
@@ -88,10 +85,9 @@ const ClassSelector = ({ course }: Props) => {
       </p>
       <div className="flex items-center">
         {/* Dropdown Menu */}
-        <DropdownMenu onOpenChange={(open: boolean) => {
-          if (!open) {
-            removePreview();
-          }
+        <DropdownMenu open={isDropdownOpen} onOpenChange={(open: boolean) => {
+          setIsDropdownOpen(open);
+          if (!open) removePreview();
         }}>
           <div className="w-full">
             <DropdownMenuTrigger asChild disabled={courseOption?.locked} ref={classSelectorTriggerRef}>
@@ -111,6 +107,7 @@ const ClassSelector = ({ course }: Props) => {
               <ClassSelectorDropdownController
                 course={course}
                 selectedClassIdHook={[selectedClassId, setSelectedClassId]}
+                isDropdownOpen={isDropdownOpen}
                 setPreview={setPreview}
                 removePreview={removePreview}
                 contentRef={classSelectorContentRef}
diff --git a/src/components/planner/sidebar/CoursesController/ClassSelectorDropdownController.tsx b/src/components/planner/sidebar/CoursesController/ClassSelectorDropdownController.tsx
index 67f5e92b..a5d42203 100644
--- a/src/components/planner/sidebar/CoursesController/ClassSelectorDropdownController.tsx
+++ b/src/components/planner/sidebar/CoursesController/ClassSelectorDropdownController.tsx
@@ -14,8 +14,9 @@ import ProfessorItem from "./ProfessorItem";
 type Props = {
   course: CourseInfo
   selectedClassIdHook: [number | null, Dispatch<SetStateAction<number | null>>]
+  isDropdownOpen: boolean
   setPreview: Dispatch<SetStateAction<number | null>>
-  removePreview: () => void,
+  removePreview: () => void
   contentRef: any
   triggerRef: any
 }
@@ -48,6 +49,7 @@ const NoOptionsFound = ({ mobile }: { mobile: boolean }) => {
 const ClassSelectorDropdownController = ({
   course,
   selectedClassIdHook,
+  isDropdownOpen,
   setPreview,
   removePreview,
   contentRef,
@@ -229,7 +231,7 @@ const ClassSelectorDropdownController = ({
                           setSelectedClassId(classInfo.id)
                           setPreview(null)
                         }}
-                        onMouseEnter={() => showPreview(classInfo)}
+                        onMouseEnter={() => { if (isDropdownOpen) showPreview(classInfo) }}
                         onMouseLeave={() => removePreview()}
                       />
                     ))}
@@ -263,7 +265,7 @@ const ClassSelectorDropdownController = ({
                               setSelectedClassId(classInfo.id)
                               setPreview(null)
                             }}
-                            onMouseEnter={() => showPreview(classInfo)}
+                            onMouseEnter={() => { if (isDropdownOpen) showPreview(classInfo) }}
                             onMouseLeave={() => removePreview()}
                           />
                         ))}