diff --git a/src/pages/course-selection/pages/course-detail.vue b/src/pages/course-selection/pages/course-detail.vue
index 4609486..b98fb66 100644
--- a/src/pages/course-selection/pages/course-detail.vue
+++ b/src/pages/course-selection/pages/course-detail.vue
@@ -30,7 +30,8 @@
         </div>
 
         <!-- Detail / Comments Popup -->
-        <el-dialog id="detail-popup" v-if="detailsCourse" :visible.sync="detailsCourse" width="50%" top="10vh">
+        <el-dialog id="detail-popup" v-if="detailsCourse" :visible="detailsCourse != null" width="50%" top="10vh"
+                   :before-close="closeDetails">
             <span slot="title" class="header">
                 <div class="title">Ratings for {{detailsCourse.name}}</div>
                 <span class="subtitle">And for {{detailsCourse.teacher}}</span>
@@ -104,6 +105,11 @@
         {
             this.detailsCourse = this.detailsCourse == course ? null as any as CourseInfo : course;
         }
+
+        closeDetails()
+        {
+            this.detailsCourse = null as any as CourseInfo;
+        }
     }
 </script>