diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index 27a2fbad4..d177d95b5 100644
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -1,31 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Checkbox } from 'stremio-common';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const { Checkbox } = require('stremio-common');
+const styles = require('./styles');
 
-const linkOnClick = (event) => {
-    event.stopPropagation();
-};
+const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, onClick }, ref) => {
+    const linkOnClick = React.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
 
-const ConsentCheckbox = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
-    <Checkbox ref={ref} className={classnames(styles['consent-checkbox-container'], className)} checked={checked} onClick={onClick}>
-        <div className={styles['label']}>
-            {label}
-            {link && href ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'} onClick={linkOnClick}> {link}</a> : null}
-        </div>
-    </Checkbox>
-));
+    return (
+        <Checkbox ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={onClick}>
+            <div className={styles['label']}>
+                {label}
+                {
+                    typeof link === 'string' && typeof href === 'string' ?
+                        <a className={styles['link']} href={href} target={'_blank'} tabIndex={-1} onClick={linkOnClick}> {link}</a>
+                        :
+                        null
+                }
+            </div>
+        </Checkbox>
+    );
+});
 
 ConsentCheckbox.displayName = 'ConsentCheckbox';
 
 ConsentCheckbox.propTypes = {
     className: PropTypes.string,
-    onClick: PropTypes.func,
+    checked: PropTypes.bool,
     label: PropTypes.string,
     link: PropTypes.string,
     href: PropTypes.string,
-    checked: PropTypes.bool
+    onClick: PropTypes.func
 };
 
-export default ConsentCheckbox;
+module.exports = ConsentCheckbox;
diff --git a/src/routes/Intro/ConsentCheckbox/index.js b/src/routes/Intro/ConsentCheckbox/index.js
index b31edc668..85e850a9c 100644
--- a/src/routes/Intro/ConsentCheckbox/index.js
+++ b/src/routes/Intro/ConsentCheckbox/index.js
@@ -1,3 +1,3 @@
-import ConsentCheckbox from './ConsentCheckbox';
+const ConsentCheckbox = require('./ConsentCheckbox');
 
-export default ConsentCheckbox;
+module.exports = ConsentCheckbox;
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index 37a18714d..14e2d1e60 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -17,6 +17,10 @@
 
         .link {
             color: var(--color-surfacelight);
+
+            &:hover {
+                text-decoration: underline;
+            }
         }
     }
 
@@ -29,7 +33,7 @@
         --icon-color: var(--color-surfacelighter);
 
         .label {
-            color: var(--color-surfacelight);
+            color: var(--color-surfacelighter);
 
             .link {
                 color: var(--color-surfacelighter);
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 969b74c4e..5495e67b2 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -1,15 +1,16 @@
-import React, { Component, Fragment } from 'react';
-import Icon from 'stremio-icons/dom';
-import { Input } from 'stremio-common';
-import ConsentCheckbox from './ConsentCheckbox';
-import styles from './styles';
+const React = require('react');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const { Input } = require('stremio-navigation');
+const ConsentCheckbox = require('./ConsentCheckbox');
+const styles = require('./styles');
 
 const FORMS = {
-    LOGIN: '1',
-    SIGN_UP: '2'
+    LOGIN: 'LOGIN',
+    SIGN_UP: 'SIGN_UP'
 };
 
-class Intro extends Component {
+class Intro extends React.Component {
     constructor(props) {
         super(props);
 
@@ -67,12 +68,12 @@ class Intro extends Component {
             email: '',
             password: '',
             confirmPassword: '',
-            error: '',
+            error: ''
         });
     }
 
     emailOnChange = (event) => {
-        this.setState({ email: event.target.value });
+        this.setState({ email: event.currentTarget.value });
     }
 
     emailOnSubmit = (event) => {
@@ -81,7 +82,7 @@ class Intro extends Component {
     }
 
     passwordOnChange = (event) => {
-        this.setState({ password: event.target.value });
+        this.setState({ password: event.currentTarget.value });
     }
 
     passwordOnSubmit = (event) => {
@@ -94,7 +95,7 @@ class Intro extends Component {
     }
 
     confirmPasswordOnChange = (event) => {
-        this.setState({ confirmPassword: event.target.value });
+        this.setState({ confirmPassword: event.currentTarget.value });
     }
 
     confirmPasswordOnSubmit = (event) => {
@@ -172,54 +173,103 @@ class Intro extends Component {
     loginAsGuest = () => {
         if (!this.state.termsAccepted) {
             this.setState({ error: 'You must accept the Terms of Service' });
-        } else {
-            this.setState({ error: '' });
-            alert('Guest login');
+            return;
         }
+
+        this.setState({ error: '' });
+        alert('Guest login');
     }
 
     render() {
         return (
             <div className={styles['intro-container']}>
-                <div className={styles['overlay']} />
+                <div className={styles['background-overlay']} />
                 <div className={styles['scroll-content']}>
                     <div className={styles['form-container']}>
-                        <Input className={styles['facebook-button']} type={'button'} onClick={this.loginWithFacebook}>
+                        <Input className={classnames(styles['login-form-button'], styles['facebook-button'], 'focusable-with-border')} type={'button'} onClick={this.loginWithFacebook}>
                             <Icon className={styles['icon']} icon={'ic_facebook'} />
                             <div className={styles['label']}>Login with Facebook</div>
                         </Input>
                         <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
-                        <Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} onSubmit={this.emailOnSubmit} />
-                        <Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} onSubmit={this.passwordOnSubmit} />
+                        <Input
+                            ref={this.emailRef}
+                            className={styles['text-input']}
+                            type={'email'}
+                            placeholder={'Email'}
+                            value={this.state.email}
+                            onChange={this.emailOnChange}
+                            onSubmit={this.emailOnSubmit}
+                        />
+                        <Input
+                            ref={this.passwordRef}
+                            className={styles['text-input']}
+                            type={'password'}
+                            placeholder={'Password'}
+                            value={this.state.password}
+                            onChange={this.passwordOnChange}
+                            onSubmit={this.passwordOnSubmit}
+                        />
                         {
                             this.state.selectedForm === FORMS.LOGIN ?
-                                <Input className={styles['forgot-password-link']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
+                                <div className={styles['forgot-password-link-container']}>
+                                    <Input className={classnames(styles['forgot-password-link'], 'focusable-with-border')} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
+                                </div>
                                 :
-                                <Fragment>
-                                    <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} onSubmit={this.confirmPasswordOnSubmit} />
-                                    <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} 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} />
-                                    <ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} 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} />
-                                    <ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
-                                </Fragment>
+                                <React.Fragment>
+                                    <Input
+                                        ref={this.confirmPasswordRef}
+                                        className={styles['text-input']}
+                                        type={'password'}
+                                        placeholder={'Confirm Password'}
+                                        value={this.state.confirmPassword}
+                                        onChange={this.confirmPasswordOnChange}
+                                        onSubmit={this.confirmPasswordOnSubmit}
+                                    />
+                                    <ConsentCheckbox
+                                        ref={this.termsRef}
+                                        className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
+                                        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}
+                                    />
+                                    <ConsentCheckbox
+                                        ref={this.privacyPolicyRef}
+                                        className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
+                                        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}
+                                    />
+                                    <ConsentCheckbox
+                                        ref={this.marketingRef}
+                                        className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
+                                        label={'I agree to receive marketing communications from Stremio'}
+                                        checked={this.state.marketingAccepted}
+                                        onClick={this.toggleMarketing}
+                                    />
+                                </React.Fragment>
                         }
                         {
                             this.state.error.length > 0 ?
-                                <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
+                                <div ref={this.errorRef} className={styles['error-message']}>{this.state.error}</div>
                                 :
                                 null
                         }
-                        <Input className={styles['submit-button']} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
+                        <Input className={classnames(styles['login-form-button'], styles['submit-button'], 'focusable-with-border')} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
                             <div className={styles['label']}>{this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'}</div>
                         </Input>
                         {
                             this.state.selectedForm === FORMS.SIGN_UP ?
-                                <Input className={styles['guest-login-button']} type={'button'} onClick={this.loginAsGuest}>
+                                <Input className={classnames(styles['login-form-button'], styles['guest-login-button'], 'focusable-with-border')} type={'button'} onClick={this.loginAsGuest}>
                                     <div className={styles['label']}>GUEST LOGIN</div>
                                 </Input>
                                 :
                                 null
                         }
-                        <Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
+                        <Input className={classnames(styles['login-form-button'], styles['switch-form-button'], 'focusable-with-border')} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
                             <div className={styles['label']}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
                         </Input>
                     </div>
@@ -229,4 +279,4 @@ class Intro extends Component {
     }
 }
 
-export default Intro;
+module.exports = Intro;
diff --git a/src/routes/Intro/index.js b/src/routes/Intro/index.js
index 9ec2a3114..4ba529e13 100644
--- a/src/routes/Intro/index.js
+++ b/src/routes/Intro/index.js
@@ -1,3 +1,3 @@
-import Intro from './Intro';
+const Intro = require('./Intro');
 
-export default Intro;
+module.exports = Intro;
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 149890b82..fc2cf9f77 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -1,13 +1,11 @@
 .intro-container {
     --form-width: 270px;
-    --spacing: 16px;
     font-size: 14px;
 }
 
 .intro-container {
     position: relative;
     z-index: 0;
-    width: 100%;
     height: 100%;
     background-image: url('/images/intro_background.jpg');
     background-size: cover;
@@ -15,87 +13,82 @@
     background-position: center;
     background-origin: border-box;
 
-    .overlay {
+    .background-overlay {
         position: absolute;
-        z-index: 0;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
+        z-index: 0;
         background-color: var(--color-backgrounddark80);
     }
 
     .scroll-content {
         position: absolute;
-        z-index: 1;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
+        z-index: 1;
         display: flex;
         flex-direction: row;
+        justify-content: center;
+        align-items: center;
         overflow-y: auto;
         overflow-x: hidden;
 
         .form-container {
             width: var(--form-width);
             margin: auto;
-            padding: 5% 0;
+            padding: 4em 0;
 
-            .facebook-button, .submit-button, .switch-form-button, .guest-login-button {
+            .login-form-button {
+                width: 100%;
+                padding: 0 1em;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
                 justify-content: center;
-                border: var(--focusable-border-size) solid transparent;
                 cursor: pointer;
 
                 .icon {
-                    height: 1.7em;
+                    width: 0.8em;
+                    height: 100%;
                     margin-right: 1em;
                     fill: var(--color-surfacelighter);
+
+                    &~.label {
+                        max-width: calc(100% - 1.8em);
+                    }
                 }
 
                 .label {
-                    font-size: 1em;
+                    padding: 0.3em 0;
+                    font-size: 1.1em;
+                    line-height: 1.2em;
                     font-weight: 600;
                     color: var(--color-surfacelighter);
-                }
-
-                &:before {
-                    content: "";
-                    display: block;
-                }
-
-                &:focus, &:hover {
-                    filter: brightness(1.2);
-                }
-
-                &:focus {
-                    border-color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    border-color: transparent;
+                    overflow: hidden;
                 }
             }
 
             .facebook-button {
-                background: var(--color-secondarydark);
+                min-height: 4.5em;
+                background: #4267b2;
 
                 .label {
                     font-size: 1.2em;
                 }
 
-                &:before {
-                    padding-top: 25%;
+                &:hover {
+                    filter: brightness(1.2);
                 }
             }
 
             .facebook-statement {
-                display: block;
+                width: 100%;
                 margin-top: 0.5em;
-                margin-bottom: calc(var(--spacing) * 4);
+                margin-bottom: 2em;
                 text-align: center;
                 color: var(--color-surface);
             }
@@ -103,11 +96,9 @@
             .text-input {
                 display: block;
                 width: 100%;
-                margin: var(--spacing) 0;
-                padding: 0.5em 0.2em;
-                font-size: 1em;
-                line-height: 1em;
-                border-bottom: 1px solid var(--color-surface);
+                margin: 1em 0;
+                padding: 0.5em 0.3em;
+                border-bottom: calc(0.5 * var(--focusable-border-size)) solid var(--color-surface);
                 color: var(--color-surfacelighter);
 
                 &::placeholder {
@@ -115,6 +106,7 @@
                 }
 
                 &:hover, &:focus {
+                    background-color: var(--color-surfacedarker80);
                     border-bottom-color: var(--color-surfacelighter);
 
                     &::placeholder {
@@ -123,69 +115,55 @@
                 }
             }
 
-            .forgot-password-link {
-                display: block;
-                margin: var(--spacing) 0;
-                padding: 0.5em;
-                border: var(--focusable-border-size) solid transparent;
-                color: var(--color-surfacelight);
+            .forgot-password-link-container {
+                margin: 1em 0;
                 text-align: right;
-                cursor: pointer;
 
-                &:hover, &:focus {
-                    color: var(--color-surfacelighter);
-                }
+                .forgot-password-link {
+                    display: inline-block;
+                    padding: 0.5em 0.3em;
+                    color: var(--color-surfacelight);
+                    cursor: pointer;
 
-                &:focus {
-                    border-color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    border-color: transparent;
+                    &:hover, &:focus {
+                        color: var(--color-surfacelighter);
+                    }
                 }
             }
 
             .consent-checkbox {
-                margin: var(--spacing) 0;
-                padding: 0.5em 0.2em;
-                border: var(--focusable-border-size) solid transparent;
-
-                &:focus-within {
-                    border-color: var(--color-surfacelighter);
-                }
-
-                &:hover {
-                    border-color: transparent;
-                }
+                margin: 1em 0;
+                padding: 0.5em 0.3em;
             }
 
-            .error {
-                margin: var(--spacing) 0;
-                padding: 0.5em 0.2em;
+            .error-message {
+                margin: 1em 0;
                 text-align: center;
                 color: var(--color-signal1);
             }
 
             .submit-button {
+                min-height: 4em;
+                margin: 1em 0;
                 background-color: var(--color-primarydark);
 
                 .label {
                     font-size: 1.2em;
-                    font-weight: 600;
                 }
 
-                &:before {
-                    padding-top: 20%;
+                &:hover {
+                    background-color: var(--color-primary);
                 }
             }
 
-            .switch-form-button, .guest-login-button {
-                margin: var(--spacing) 0;
-                padding: 0.8em 0.2em;
+            .guest-login-button {
+                margin-top: 1em;
+                margin-bottom: 0.2em;
+                padding: 0.8em .3em;
+            }
 
-                .label {
-                    font-size: 1.1em;
-                }
+            .switch-form-button {
+                padding: 0.8em .3em;
             }
         }
     }