diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26481bc00..da6a5f1a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 ### 🐛 Bug fixes
 
 - Fixed a bug where duplicate graph components were being added
+- Fixed CSS styling to center course modal and lighten overlay
 
 ### 🔧 Internal changes
 
diff --git a/style/app.scss b/style/app.scss
index ff418c568..6a3cb4d5c 100644
--- a/style/app.scss
+++ b/style/app.scss
@@ -358,13 +358,11 @@ ol {
 %modal-class {
   background-color: #fff;
   border-radius: 10px;
-  inset: 150px 300px 150px 200px;
   box-shadow: 0 0 30px;
-  height: 550px;
+  height: min(550px, calc(100vh - 32px));
   overflow-y: auto;
   padding: 12px 30px;
-  position: absolute;
-  width: 1000px;
+  width: min(1000px, calc(100vw - 32px));
 }
 
 .modal-class {
@@ -372,8 +370,11 @@ ol {
 }
 
 %overlay {
-  background-color: rgb(0 0 0 / 15000%);
+  align-items: center;
+  background-color: rgb(0 0 0 / 50%);
+  display: flex;
   inset: 0;
+  justify-content: center;
   position: fixed;
   z-index: 2;
 }