diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 10986c425..ffe321f53 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -16,8 +16,8 @@
         opacity: 0;
         height: 0;
         width: 0;
-        top: -99999999px;
-        left: -99999999px;
+        top: 0;
+        left: 0;
     }
 
     &:global(.checked) {
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index ea94e84d4..8bbce9e13 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -18,6 +18,7 @@ class Intro extends Component {
         this.termsRef = React.createRef();
         this.privacyPolicyRef = React.createRef();
         this.marketingRef = React.createRef();
+        this.errorRef = React.createRef();
 
         this.state = {
             selectedForm: FORMS.SIGN_UP,
@@ -32,6 +33,7 @@ class Intro extends Component {
     }
 
     changeSelectedForm = (event) => {
+        event.currentTarget.blur();
         this.setState({
             selectedForm: event.currentTarget.dataset.option,
             termsAccepted: false,
@@ -85,6 +87,12 @@ class Intro extends Component {
             nextState.error !== this.state.error;
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.error !== this.state.error && this.state.error.length > 0) {
+            this.errorRef.current.scrollIntoView();
+        }
+    }
+
     loginOnSubmit = (event) => {
         event.preventDefault();
         if (this.state.email.length < 8) {
@@ -144,7 +152,7 @@ class Intro extends Component {
         }
     }
 
-    validateGuestLogin = (event) => {
+    guestLoginOnSubmit = (event) => {
         if (!this.state.termsAccepted) {
             event.preventDefault();
             this.setState({ error: 'You must accept the Terms of Service' });
@@ -154,15 +162,15 @@ class Intro extends Component {
     renderSignUpForm = () => {
         return (
             <form className={styles['form-container']} onSubmit={this.signUpOnSubmit}>
-                <input ref={this.emailRef} className={styles['email']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
-                <input ref={this.passwordRef} className={styles['password']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
-                <input ref={this.confirmPasswordRef} className={styles['password']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
-                <CheckboxLabel ref={this.termsRef} className={styles['checkbox-label']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
+                <input ref={this.emailRef} className={styles['text-input']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
+                <input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
+                <input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
+                <CheckboxLabel ref={this.termsRef} className={styles['checkbox-label']} label={'I have read and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree jhgj ghj hjg jhg jhg jkhg kjhg kjhgjkhg gjhg jhkg jhg jkhg jkhg jkhg jkg jkhgj kghkj gjh gjk gkj hgkkjh kjgwithd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
                 <CheckboxLabel ref={this.privacyPolicyRef} className={styles['checkbox-label']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
                 <CheckboxLabel ref={this.marketingRef} className={styles['checkbox-label']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
                 {
                     this.state.error.length > 0 ?
-                        <div className={styles['error']}>{this.state.error}</div>
+                        <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
                         :
                         null
                 }
@@ -174,12 +182,12 @@ class Intro extends Component {
     renderLoginForm = () => {
         return (
             <form className={styles['form-container']} onSubmit={this.loginOnSubmit}>
-                <input ref={this.emailRef} className={styles['email']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
-                <input ref={this.passwordRef} className={styles['password']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
+                <input ref={this.emailRef} className={styles['text-input']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
+                <input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
                 <a className={styles['forgot-password']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</a>
                 {
                     this.state.error.length > 0 ?
-                        <div className={styles['error']}>{this.state.error}</div>
+                        <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
                         :
                         null
                 }
@@ -188,7 +196,7 @@ class Intro extends Component {
         );
     }
 
-    renderSelectedMenu = () => {
+    renderSelectedForm = () => {
         switch (this.state.selectedForm) {
             case FORMS.SIGN_UP:
                 return this.renderSignUpForm();
@@ -203,20 +211,22 @@ class Intro extends Component {
         return (
             <div className={styles['intro-container']}>
                 <div className={styles['overlay']} />
-                <div className={styles['intro']}>
-                    <div className={styles['facebook-button']} tabIndex={'0'}>
-                        <Icon className={styles['icon']} icon={'ic_facebook'} />
-                        <div className={styles['label']}>Login with Facebook</div>
+                <div className={styles['scroll-container']}>
+                    <div className={styles['intro']}>
+                        <div className={styles['facebook-button']} tabIndex={'0'}>
+                            <Icon className={styles['icon']} icon={'ic_facebook'} />
+                            <div className={styles['label']}>Login with Facebook</div>
+                        </div>
+                        <div className={styles['facebook-subtext']}>We won't post anything on your behalf</div>
+                        {this.renderSelectedForm()}
+                        <div className={styles['option']} tabIndex={'0'} data-option={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
+                        {
+                            this.state.selectedForm === FORMS.SIGN_UP ?
+                                <a className={styles['option']} href={'#/'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</a>
+                                :
+                                null
+                        }
                     </div>
-                    <div className={styles['facebook-subtext']}>We won't post anything on your behalf</div>
-                    {this.renderSelectedMenu()}
-                    <div className={styles['option']} data-option={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
-                    {
-                        this.state.selectedForm === FORMS.SIGN_UP ?
-                            <a className={styles['option']} href={'#/'} onClick={this.validateGuestLogin}>GUEST LOGIN</a>
-                            :
-                            null
-                    }
                 </div>
             </div>
         );
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index f9eb4c98c..e53cdf3bd 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -9,7 +9,7 @@
     z-index: 0;
     width: 100%;
     height: 100%;
-    background-image: url('/images/home-testimonials.jpg');
+    background-image: url('/images/login_background.jpg');
     background-size: cover;
     background-attachment: fixed;
 
@@ -23,126 +23,170 @@
         background-color: var(--color-backgrounddark80);
     }
 
-    .intro {
+    .scroll-container { 
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-        .facebook-button {
-            width: var(--login-form-width);
-            height: calc(var(--login-form-width) * 0.25);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            padding: calc(var(--spacing) * 1.25) 0;
-            background: var(--color-secondarydark);
+        .intro {
+            width: 270px;
+            margin: auto;
 
-            .icon {
-                height: 100%;
-                margin-right: var(--spacing);
-                fill: var(--color-surfacelighter);
-            }
-
-            .label {
-                font-size: 1.1em;
-                color: var(--color-surfacelighter);
-            }
-        }
-
-        .facebook-subtext {
-            margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
-            color: var(--color-surface);
-        }
-
-        .form-container {
-            width: var(--login-form-width);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-
-            .email {
-                width: 100%;
-                margin-bottom: var(--spacing);
-                padding: 0.5em 0;
-                border-bottom: 1px solid var(--color-surface);
-                font-size: 1.1em;
-                color: var(--color-surfacelighter);
-                outline: none;
-                background: none;
-
-                &::placeholder {
-                    color: var(--color-surfacelight);
-                }
-            }
-
-            .password {
-                width: 100%;
-                margin-bottom: var(--spacing);
-                padding: 0.5em 0;
-                border-bottom: 1px solid var(--color-surface);
-                font-size: 1.1em;
-                color: var(--color-surfacelighter);
-                outline: none;
-                background: none;
-
-                &::placeholder {
-                    color: var(--color-surfacelight);
-                }
-            }
-
-            .checkbox-label {
-                width: 100%;
-                margin-bottom: var(--spacing);
-            }
-
-
-            .forgot-password {
+            .facebook-button {
+                width: var(--login-form-width);
+                height: calc(var(--login-form-width) * 0.25);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: calc(var(--spacing) * 1.25) 0;
+                border: 2px solid transparent;
+                background: var(--color-secondarydark);
                 cursor: pointer;
-                margin-bottom: var(--spacing);
-                color: var(--color-surfacelight);
 
-                &:hover {
+                .icon {
+                    height: 100%;
+                    margin-right: var(--spacing);
+                    fill: var(--color-surfacelighter);
+                }
+
+                .label {
+                    font-size: 1.1em;
                     color: var(--color-surfacelighter);
                 }
-            }
 
-            .error {
-                margin-bottom: var(--spacing);
-                text-align: center;
-                color: var(--color-signal1);
-            }
+                &:focus {
+                    border-color: var(--color-surfacelighter);
+                }
 
-            .submit-button {
-                width: 100%;
-                cursor: pointer;
-                outline: none;
-                padding: calc(var(--spacing) * 1.1);
-                font-size: 1.1em;
-                font-weight: 600;
-                color: var(--color-surfacelighter);
-                background-color: var(--color-primarydark);
-
-                &:hover, &:focus {
-                    background-color: var(--color-primary);
+                &:hover {
+                    border-color: transparent;
                 }
             }
-        }
 
-        .option {
-            margin-top: calc(var(--spacing) * 2);
-            cursor: pointer;
-            font-size: 1.1em;
-            font-weight: 600;
-            color: var(--color-surfacelighter);
+            .facebook-subtext {
+                margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
+                text-align: center;
+                color: var(--color-surface);
+            }
+
+            .form-container {
+                width: var(--login-form-width);
+                display: flex;
+                align-items: stretch;
+                justify-content: center;
+                flex-direction: column;
+
+                .text-input {
+                    margin: 0 calc(var(--spacing) * 0.5) var(--spacing) calc(var(--spacing) * 0.5);
+                    padding: 0.5em 0;
+                    border-bottom: 1px solid var(--color-surface);
+                    font-size: 1.1em;
+                    color: var(--color-surfacelighter);
+                    background: none;
+
+                    &::placeholder {
+                        color: var(--color-surfacelight);
+                    }
+
+                    &:hover, &:focus {
+                        border-bottom-color: var(--color-surfacelighter);
+
+                        &::placeholder {
+                            color: var(--color-surfacelighter);
+                        }
+                    }
+                }
+
+                .checkbox-label {
+                    width: 100%;
+                    margin-bottom: var(--spacing);
+                    padding: calc(var(--spacing) * 0.5);
+                    text-align: left;
+                    border: 2px solid transparent;
+
+                    &:focus-within {
+                        border-color: var(--color-surfacelighter);
+                    }
+                }
+
+
+                .forgot-password {
+                    align-self: flex-end;
+                    margin-bottom: var(--spacing);
+                    padding: calc(var(--spacing) * 0.5);
+                    border: 2px solid transparent;
+                    color: var(--color-surfacelight);
+                    cursor: pointer;
+
+                    &:hover, &:focus {
+                        color: var(--color-surfacelighter);
+                    }
+
+                    &:focus {
+                        border-color: var(--color-surfacelighter);
+                    }
+
+                    &:hover {
+                        border-color: transparent;
+                    }
+                }
+
+                .error {
+                    margin-bottom: var(--spacing);
+                    text-align: center;
+                    color: var(--color-signal1);
+                }
+
+                .submit-button {
+                    width: 100%;
+                    outline: none;
+                    padding: calc(var(--spacing) * 1.1);
+                    font-size: 1.1em;
+                    font-weight: 600;
+                    border: 2px solid transparent;
+                    color: var(--color-surfacelighter);
+                    background-color: var(--color-primarydark);
+                    cursor: pointer;
+
+                    &:hover, &:focus {
+                        background-color: var(--color-primary);
+                    }
+
+                    &:focus {
+                        border: 2px solid var(--color-surfacelighter);
+                    }
+
+                    &:hover {
+                        border-color: transparent;
+                    }
+                }
+            }
+
+            .option {
+                width: 100%;
+                display: inline-block;
+                margin-top: var(--spacing);
+                padding: calc(var(--spacing) * 0.5);
+                text-align: center;
+                font-size: 1.1em;
+                font-weight: 600;
+                border: 2px solid transparent;
+                color: var(--color-surfacelighter);
+                cursor: pointer;
+
+                &:focus {
+                    border: 2px solid var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    border-color: transparent;
+                }
+            }
         }
     }
 }
\ No newline at end of file