diff --git a/index.html b/index.html
index dbc888ab..ba9b15ed 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,11 @@
   <head>
     <title>p5.js Web Editor</title>
     <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <div id="root" class="root-app">
     </div>
     <script src="/dist/bundle.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
index 06610dc5..62c39fc4 100644
--- a/shared/components/Preferences/Preferences.jsx
+++ b/shared/components/Preferences/Preferences.jsx
@@ -12,6 +12,7 @@ class Preferences extends React.Component {
 		});
 		return (
 			<div className={preferencesContainerClass} tabindex="0">
+				<div className="preferences__title-text">Preferences</div>
 				<button className="preferences__exit-button" onClick={this.props.closePreferences}>
 					<Isvg src={exitUrl} alt="Exit Preferences" />
 				</button>
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index 710e178a..348d1ac5 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -36,12 +36,13 @@
 %preferences-button {
 	@extend %button;
 	background-color: $light-preferences-button-background-color;
+	color: $light-preferences-button-color;
 	& g {
 		fill: $light-preferences-button-color;
 	}
 	&:hover {
 		background-color: $light-preferences-button-background-color;
-
+		color: $light-preferences-button-hover-color;
 		& g {
 			fill: $light-preferences-button-hover-color;
 		}
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index 9d76f428..25a0d322 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -1,4 +1,5 @@
 $base-font-size: 16;
+$menu-font-size: 21;
 
 //colors
 $p5js-pink: #ed225d;
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
index 420300f3..77512cf1 100644
--- a/styles/components/_preferences.scss
+++ b/styles/components/_preferences.scss
@@ -1,6 +1,7 @@
 .preferences {
 	background-color: $light-preferences-background-color;
 	display: none;
+	font-family: 'Montserrat', sans-serif;
 	&--selected {
 		display: flex;
 	}
@@ -15,3 +16,11 @@
 		background-color: $light-preferences-background-color;
 	}
 }
+
+.preferences__title-text {
+	margin-left: #{20 / $base-font-size}rem;
+	font-size: $menu-font-size;
+	font-color: white;
+	height: #{44 / $base-font-size}rem;
+	line-height: #{44 / $base-font-size}rem;
+}
