diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 3355d095..30f866ac 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -70,6 +70,7 @@
 	color: $light-primary-text-color;
 	background-color: $light-modal-button-background-color;
 	padding: 0;
+	line-height: #{48 / $base-font-size}rem;
 	& g {
 		fill: $light-primary-text-color;
 	}
@@ -92,7 +93,7 @@
 
 %preference-option {
 	background-color: $light-button-background-color;
-	color: $light-secondary-text-color;
+	color: $light-inactive-text-color;
 	font-size: #{14 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 096ddd45..a0e4da39 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -13,12 +13,13 @@ $light-background-color: #fdfdfd;
 $light-button-background-color: #f4f4f4;
 $light-button-color: $black;
 $light-button-border-color: #979797;
+$light-value-border-color: #e6e6e6;
 $light-toolbar-button-color: $p5js-pink;
 $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-button-background-color: #e6e6e6; 
+$light-modal-button-background-color: #e6e6e6;
 $light-icon-color: #8b8b8b;
 $light-icon-hover-color: $light-primary-text-color;
 
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index cae4f7a0..86cc3e50 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -2,7 +2,7 @@
 	position: absolute;
 	top: #{66 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
-	width: #{300 / $base-font-size}rem;
+	width: #{332 / $base-font-size}rem;
 	background-color: $light-button-background-color;
 	display: none;
 	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@@ -45,20 +45,22 @@
 }
 
 .preference__value {
-	border: 1px solid $light-button-border-color;
+	border: 2px solid $light-value-border-color;
 	text-align: center;
+	border-radius: 0%;
 	width: #{48 / $base-font-size}rem;
-	line-height: #{48 / $base-font-size}rem;
-	margin: 0 #{20 / $base-font-size}rem;
+	height: #{44 / $base-font-size}rem;
+	margin: 0 #{28 / $base-font-size}rem;
+	padding: 0;
 	background-color: $light-button-background-color;
 }
 
 .preference__label {
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
-	color: $light-button-border-color;
+	color: $light-inactive-text-color;
 	&:hover {
-		color: $light-button-border-color;
+		color: $light-inactive-text-color;
 	}
 }
 
@@ -70,7 +72,7 @@
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;
-	padding-left: #{12 / $base-font-size}rem;
+	padding-left: #{28 / $base-font-size}rem;
 	&--selected {
 		@extend %preference-option--selected;
 	}