diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade
index ff6e5ef2a0..cd27ab457b 100644
--- a/services/web/app/views/project/editor.jade
+++ b/services/web/app/views/project/editor.jade
@@ -72,6 +72,7 @@ block content
 				include ./editor/chat
 				
 	include ./editor/hotkeys
+	include ./editor/feature-onboarding
 
 	script(type="text/ng-template", id="genericMessageModalTemplate")
 		.modal-header
diff --git a/services/web/app/views/project/editor/feature-onboarding.jade b/services/web/app/views/project/editor/feature-onboarding.jade
new file mode 100644
index 0000000000..dc72ee6a98
--- /dev/null
+++ b/services/web/app/views/project/editor/feature-onboarding.jade
@@ -0,0 +1,8 @@
+.feat-onboard
+	.feat-onboard-wrapper
+		h1.feat-onboard-title
+			| Introducing
+			span.feat-onboard-title-name Code check
+		p.feat-onboard-description
+			span.feat-onboard-description-name Code check
+			| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 6d35e92293..e376598b8b 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -11,6 +11,7 @@
 @import "./editor/publish-template.less";
 @import "./editor/online-users.less";
 @import "./editor/hotkeys.less";
+@import "./editor/feature-onboarding.less";
 
 .full-size {
 	position: absolute;
diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less
new file mode 100644
index 0000000000..f63b813dcc
--- /dev/null
+++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less
@@ -0,0 +1,8 @@
+.feat-onboard {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, .8);
+}
\ No newline at end of file