diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index b0f75451..785640a6 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -116,3 +116,10 @@
 	height:1px;
 	overflow:hidden;
 }
+
+%modal {
+	background-color: $light-modal-background-color;
+	border: 1px solid $light-modal-border-color;
+	border-radius: 2px;
+	box-shadow: 0 12px 12px $light-shadow-color;
+}
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 320a640c..87d5051d 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -18,10 +18,12 @@ $light-button-background-hover-color: $p5js-pink;
 $light-button-background-active-color: #f10046;
 $light-button-hover-color: $white;
 $light-button-active-color: $white;
+$light-modal-background-color: #f4f4f4;
 $light-modal-button-background-color: #e6e6e6;
 $light-modal-border-color: #B9D0E1;
 $light-icon-color: #8b8b8b;
 $light-icon-hover-color: $light-primary-text-color;
+$light-shadow-color: rgba(0, 0, 0, 0.16);
 
 $dark-primary-text-color: $white;
 $dark-secondary-text-color: #c2c2c2;
@@ -45,3 +47,4 @@ $console-header-background-color: #d6d6d6;
 $console-header-color: #b1b1b1;
 $console-warn-color: #ffbe05;
 $console-error-color: #ff5f52;
+
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index c1efcc43..3f4ed419 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -54,9 +54,9 @@
 }
 
 .CodeMirror-lint-tooltip {
-  font-family: Montserrat, sans-serif;
-  border-radius: 2px;
+  background-color: $light-modal-background-color;
   border: 1px solid $light-modal-border-color;
-  background-color: $light-button-background-color;
-
+  border-radius: 2px;
+  box-shadow: 0 12px 12px $light-shadow-color;
+  font-family: Montserrat, sans-serif;
 }
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 5a45b183..73faa001 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -6,8 +6,7 @@
 }
 
 .modal-content {
-  border: 1px solid $light-modal-border-color;
-  background-color: $light-button-background-color;
+  @extend %modal;
   height: #{400 / $base-font-size}rem;
   width: #{400 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index b4668279..4ceb2a9b 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -1,9 +1,9 @@
 .preferences {
+	@extend %modal;
 	position: absolute;
 	top: #{66 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
 	width: #{336 / $base-font-size}rem;
-	background-color: $light-button-background-color;
 	display: none;
 	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
 	&--selected {