diff --git a/webmaker/src/FiraCode.ttf b/webmaker/src/FiraCode.ttf
new file mode 100644
index 0000000..575c21b
Binary files /dev/null and b/webmaker/src/FiraCode.ttf differ
diff --git a/webmaker/src/FixedSys.ttf b/webmaker/src/FixedSys.ttf
new file mode 100644
index 0000000..2e8723b
Binary files /dev/null and b/webmaker/src/FixedSys.ttf differ
diff --git a/webmaker/src/Inconsolata.ttf b/webmaker/src/Inconsolata.ttf
new file mode 100755
index 0000000..bbc9647
Binary files /dev/null and b/webmaker/src/Inconsolata.ttf differ
diff --git a/webmaker/src/Monoid.ttf b/webmaker/src/Monoid.ttf
new file mode 100644
index 0000000..a09e9fa
Binary files /dev/null and b/webmaker/src/Monoid.ttf differ
diff --git a/webmaker/src/components/MainHeader.jsx b/webmaker/src/components/MainHeader.jsx
index d586791..fc2cd0d 100644
--- a/webmaker/src/components/MainHeader.jsx
+++ b/webmaker/src/components/MainHeader.jsx
@@ -1,4 +1,6 @@
 import { h, Component } from 'preact';
+const DEFAULT_PROFILE_IMG =
+	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
 export default class Header extends Component {
 	render() {
diff --git a/webmaker/src/components/Modal.jsx b/webmaker/src/components/Modal.jsx
index d3919cf..35f8817 100644
--- a/webmaker/src/components/Modal.jsx
+++ b/webmaker/src/components/Modal.jsx
@@ -21,6 +21,10 @@ export default class Modal extends Component {
 		document.body.classList[this.props.show ? 'add' : 'remove'](
 			'overlay-visible'
 		);
+
+		if (this.props.show) {
+			this.overlayEl.querySelector('.js-modal__close-btn').focus();
+		}
 	}
 	render() {
 		if (!this.props.show) return null;
diff --git a/webmaker/src/components/Profile.jsx b/webmaker/src/components/Profile.jsx
index 5b7777d..e164c33 100644
--- a/webmaker/src/components/Profile.jsx
+++ b/webmaker/src/components/Profile.jsx
@@ -1,5 +1,8 @@
 import { h, Component } from 'preact';
 
+const DEFAULT_PROFILE_IMG =
+	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
+
 export default class Profile extends Component {
 	render() {
 		return (
diff --git a/webmaker/src/components/Settings.jsx b/webmaker/src/components/Settings.jsx
index 5a9eeab..1638816 100644
--- a/webmaker/src/components/Settings.jsx
+++ b/webmaker/src/components/Settings.jsx
@@ -159,14 +159,16 @@ export default class Settings extends Component {
 								<option disabled="disabled">----</option>
 								<option value="other">Other font from system</option>
 							</select>
-							<input
-								id="customEditorFontInput"
-								type="text"
-								value={this.props.prefs.editorCustomFont}
-								placeholder="Custom font name here"
-								data-setting="editorCustomFont"
-								onChange={this.updateSetting.bind(this)}
-							/>
+							{this.props.prefs.editorFont === 'other' && (
+								<input
+									id="customEditorFontInput"
+									type="text"
+									value={this.props.prefs.editorCustomFont}
+									placeholder="Custom font name here"
+									data-setting="editorCustomFont"
+									onChange={this.updateSetting.bind(this)}
+								/>
+							)}
 						</label>
 						<label class="line">
 							Font Size{' '}
diff --git a/webmaker/src/components/app.jsx b/webmaker/src/components/app.jsx
index 08f7a09..f23fb26 100644
--- a/webmaker/src/components/app.jsx
+++ b/webmaker/src/components/app.jsx
@@ -417,6 +417,8 @@ export default class App extends Component {
 		});
 	}
 	componentDidMount() {
+		document.body.style.height = `${window.innerHeight}px`;
+
 		// Editor keyboard shortucuts
 		window.addEventListener('keydown', event => {
 			// TODO: refactor common listener code
@@ -958,9 +960,9 @@ export default class App extends Component {
 						settingsBtnClickHandler={() =>
 							this.setState({ isSettingsModalOpen: true })
 						}
-						notificationsBtnClickHandler={() =>
-							this.setState({ notificationsBtnClickHandler: true })
-						}
+						notificationsBtnClickHandler={this.notificationsBtnClickHandler.bind(
+							this
+						)}
 						supportDeveloperBtnClickHandler={this.supportDeveloperBtnClickHandler.bind(
 							this
 						)}
diff --git a/webmaker/src/index.html b/webmaker/src/index.html
index b3f9381..79913de 100644
--- a/webmaker/src/index.html
+++ b/webmaker/src/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 	<head>
 		<meta charset="utf-8">
 		<title>Web Maker</title>
@@ -9,72 +10,72 @@
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
 		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
-		<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
-		<% } %>
-		<% for (var chunk of webpack.chunks) { %>
-		<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
-		<% for (var file of chunk.files) { %>
-		<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
-		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
-		<% } else if (file.match(/manifest\.json$/)) { %>
-		<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
-		<% } %>
-		<% } %>
-		<% } %>
+			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+			<% } %>
+				<% for (var chunk of webpack.chunks) { %>
+					<% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
+						<% for (var file of chunk.files) { %>
+							<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
+								<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
+								<% } else if (file.match(/manifest\.json$/)) { %>
+									<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
+									<% } %>
+										<% } %>
+											<% } %>
 
 
-		<style>
-			/* Critically acclaimed CSS */
+												<style>
+													/* Critically acclaimed CSS */
 
-			.saved-items-pane {
-				position: fixed;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				width: 450px;
-				transform: translateX(100%);
-			}
+													.saved-items-pane {
+														position: fixed;
+														right: 0;
+														top: 0;
+														bottom: 0;
+														width: 450px;
+														transform: translateX(100%);
+													}
 
-			.modal {
-				visibility: hidden;
-			}
+													.modal {
+														visibility: hidden;
+													}
 
-		</style>
+												</style>
 
-		<!-- build:css vendor.css -->
-		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
-		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
-		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
-		<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
-		<link rel="stylesheet" href="lib/hint.min.css">
-		<link rel="stylesheet" href="lib/inlet.css">
-		<!-- endbuild -->
+												<!-- build:css vendor.css -->
+												<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
+												<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
+												<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
+												<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
+												<link rel="stylesheet" href="lib/hint.min.css">
+												<link rel="stylesheet" href="lib/inlet.css">
+												<!-- endbuild -->
 
-		<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
+												<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
 
-		<!-- build:css style.css -->
-		<link rel="stylesheet" href="style.css">
-		<!-- endbuild -->
+												<!-- build:css style.css -->
+												<link rel="stylesheet" href="style.css">
+												<!-- endbuild -->
 
-		<style id="fontStyleTemplate" type="template">
-			@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
-			U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD,
-			U+F000; } .Codemirror pre { font-family: 'fontname', monospace; }
-		</style>
-		<style type="text/css" id="fontStyleTag">
-			@font-face {
-				font-family: 'FiraCode';
-				font-style: normal;
-				font-weight: 400;
-				src: url(FiraCode.ttf) format('truetype');
-				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-			}
+												<style id="fontStyleTemplate" type="template">
+													@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
+													U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
+													U+EFFD, U+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
+												</style>
+												<style type="text/css" id="fontStyleTag">
+													@font-face {
+														font-family: 'FiraCode';
+														font-style: normal;
+														font-weight: 400;
+														src: url(FiraCode.ttf) format('truetype');
+														unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+													}
 
-			.Codemirror pre {
-				font-family: 'FiraCode', monospace;
-			}
+													.CodeMirror pre {
+														font-family: 'FiraCode', monospace;
+													}
 
-		</style>
+												</style>
 	</head>
 
 	<body>
@@ -87,10 +88,12 @@
 		<%= htmlWebpackPlugin.options.ssr({
 			url: '/'
 		}) %>
-		<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-		<script>
-			window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
-		</script>
+			<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+			<script>
+				window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
+
+			</script>
 
 	</body>
+
 </html>