diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index 83f09ebc..c767064a 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -37,7 +37,7 @@ class AccountView extends React.Component {
 
   render() {
     return (
-      <section className="form-container form-container--align-top form-container--align-left account-container">
+      <section className="form-container form-container--align-top form-container--align-left user">
         <Helmet>
           <title>p5.js Web Editor | Account</title>
         </Helmet>
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index b18c545e..49d3b7fa 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -65,7 +65,7 @@ class EmailVerificationView extends React.Component {
     }
 
     return (
-      <div className="form-container">
+      <div className="form-container user">
         <Helmet>
           <title>p5.js Web Editor | Email Verification</title>
         </Helmet>
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 696af234..9e0b3656 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -34,7 +34,7 @@ class LoginView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container">
+      <div className="form-container user">
         <Helmet>
           <title>p5.js Web Editor | Login</title>
         </Helmet>
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index 12d8d700..6fcd1bde 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -31,7 +31,8 @@ class NewPasswordView extends React.Component {
     const newPasswordClass = classNames({
       'new-password': true,
       'new-password--invalid': this.props.user.resetPasswordInvalid,
-      'form-container': true
+      'form-container': true,
+      'user': true
     });
     return (
       <div className={newPasswordClass}>
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 523783b7..2dfae858 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -30,7 +30,8 @@ class ResetPasswordView extends React.Component {
     const resetPasswordClass = classNames({
       'reset-password': true,
       'reset-password--submitted': this.props.user.resetPasswordInitiate,
-      'form-container': true
+      'form-container': true,
+      'user': true
     });
     return (
       <div className={resetPasswordClass}>
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 9fbbc930..c8d168f5 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -34,7 +34,7 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container">
+      <div className="form-container user">
         <Helmet>
           <title>p5.js Web Editor | Signup</title>
         </Helmet>
diff --git a/client/styles/layout/_user.scss b/client/styles/layout/_user.scss
new file mode 100644
index 00000000..ac9436f1
--- /dev/null
+++ b/client/styles/layout/_user.scss
@@ -0,0 +1,6 @@
+.user {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
+}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index cff7ff67..10e4a38e 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -48,3 +48,4 @@
 
 @import 'layout/ide';
 @import 'layout/fullscreen';
+@import 'layout/user';