diff --git a/src/app/routerConfig.js b/src/app/routerConfig.js
index 095a290d4..b3f3e8930 100644
--- a/src/app/routerConfig.js
+++ b/src/app/routerConfig.js
@@ -1,4 +1,4 @@
-import { Calendar, Discover, Addons, Settings, Board, Player } from 'stremio-routes';
+import { Calendar, Discover, Addons, Settings, Board, Player, Intro } from 'stremio-routes';
 
 const config = {
     views: [
@@ -8,6 +8,10 @@ const config = {
                     path: '/',
                     component: Board
                 },
+                {
+                    path: '/intro',
+                    component: Intro
+                },
                 {
                     path: '/calendar',
                     component: Calendar
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
new file mode 100644
index 000000000..93a420513
--- /dev/null
+++ b/src/routes/Intro/Intro.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import Icon from 'stremio-icons/dom';
+import { Checkbox } from 'stremio-common';
+import styles from './styles';
+
+class Intro extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedOption: 'signUp',
+            termsAccepted: false,
+            privacyPolicyAccepted: false,
+            communicationsAccepted: false
+        };
+    }
+
+    changeSelectedOption = (event) => {
+        this.setState({ selectedOption: event.currentTarget.dataset.option });
+    }
+
+    toggleTerms = () => {
+        this.setState(({ termsAccepted }) => {
+            return { termsAccepted: !termsAccepted }
+        });
+    }
+
+    togglePrivacyPolicy = () => {
+        this.setState(({ privacyPolicyAccepted }) => {
+            return { privacyPolicyAccepted: !privacyPolicyAccepted }
+        });
+    }
+
+    toggleCommunications = () => {
+        this.setState(({ communicationsAccepted }) => {
+            return { communicationsAccepted: !communicationsAccepted }
+        });
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.selectedOption !== this.state.selectedOption ||
+            nextState.termsAccepted !== this.state.termsAccepted ||
+            nextState.privacyPolicyAccepted !== this.state.privacyPolicyAccepted ||
+            nextState.communicationsAccepted !== this.state.communicationsAccepted;
+    }
+
+    renderAcceptanceOption({ label, href, checked, onClick }) {
+        return (
+            <label className={styles['toggle-option']}>
+                <Checkbox className={styles['checkbox-size']} checked={checked} disabled={false} onClick={onClick} />
+                <div className={styles['accept']}>I accept the
+                        <span>&nbsp;</span>
+                    <a href={href} target={'_blank'} className={styles['acceptance-label']}>{label}</a>
+                </div>
+            </label>
+        );
+    }
+
+    renderErrorLabel = () => {
+        return (
+            <div className={styles['error-label']}></div>
+        );
+    }
+
+    renderSignUpForm = () => {
+        return (
+            <div className={styles['login-form']}>
+                <div className={styles['fb-button']}>
+                    <Icon className={styles['icon']} icon={'ic_facebook'} />
+                    <div className={styles['label']}>Login with Facebook</div>
+                </div>
+                <div className={styles['text']}>We won't post anything on your behalf</div>
+                <div className={styles['or']}>OR</div>
+                <input className={styles['email']} type={'text'} placeholder={'Email'} />
+                <input className={styles['password']} type={'text'} placeholder={'Password'} />
+                <input className={styles['password']} type={'text'} placeholder={'Confirm Password'} />
+                <div className={styles['acceptance-section']}>
+                    {this.renderAcceptanceOption({ label: 'Terms and conditions', href: 'https://www.stremio.com/tos', checked: this.state.termsAccepted, onClick: this.toggleTerms })}
+                    {this.renderAcceptanceOption({ label: 'Privacy Policy', href: 'https://www.stremio.com/privacy', checked: this.state.privacyPolicyAccepted, onClick: this.togglePrivacyPolicy })}
+                    {this.renderAcceptanceOption({ label: 'to receive marketing communications from Stremio', href: 'https://www.stremio.com/privacy', checked: this.state.communicationsAccepted, onClick: this.toggleCommunications })}
+                </div>
+                <div className={styles['login-button']}>
+                    <div className={styles['label']}>SIGN UP</div>
+                </div>
+                <div className={styles['option']} data-option={'login'} onClick={this.changeSelectedOption}>LOG IN</div>
+                <div className={styles['option']}>GUEST LOGIN</div>
+                {/* <a href={this.state.termsAccepted ? '#/' : null} className={styles['option']}>GUEST LOGIN</a> */}
+            </div>
+        );
+    }
+
+    renderLoginForm = () => {
+        return (
+            <div className={styles['login-form']}>
+                <div className={styles['fb-button']}>
+                    <Icon className={styles['icon']} icon={'ic_facebook'} />
+                    <div className={styles['label']}>Login with Facebook</div>
+                </div>
+                <div className={styles['text']}>We won't post anything on your behalf</div>
+                <div className={styles['or']}>OR</div>
+                <input className={styles['email']} type={'text'} placeholder={'Email'} />
+                <input className={styles['password']} type={'text'} placeholder={'Password'} />
+                <div className={styles['login-button']}>
+                    <div className={styles['label']}>LOG IN</div>
+                </div>
+                <div className={styles['option']} data-option={'signUp'} onClick={this.changeSelectedOption}>SING UP WITH EMAIL</div>
+            </div>
+        );
+    }
+
+    renderSelectedMenu = () => {
+        switch (this.state.selectedOption) {
+            case 'signUp':
+                return this.renderSignUpForm();
+            case 'login':
+                return this.renderLoginForm();
+            default:
+                return null;
+        }
+    }
+
+    render() {
+        return (
+            <div className={styles['intro-container']}>
+                <div className={styles['overlay']} />
+                {this.renderSelectedMenu()}
+            </div>
+        );
+    }
+}
+
+export default Intro;
diff --git a/src/routes/Intro/index.js b/src/routes/Intro/index.js
new file mode 100644
index 000000000..9ec2a3114
--- /dev/null
+++ b/src/routes/Intro/index.js
@@ -0,0 +1,3 @@
+import Intro from './Intro';
+
+export default Intro;
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
new file mode 100644
index 000000000..77f86a1e1
--- /dev/null
+++ b/src/routes/Intro/styles.less
@@ -0,0 +1,156 @@
+.intro-container {
+    --login-form-width: 270px;
+    --spacing: 16px;
+}
+
+.intro-container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('https://www.stremio.com/website/home-testimonials.jpg');
+    background-size: cover;
+    background-attachment: fixed;
+
+    .overlay {
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--color-backgrounddark80);
+    }
+
+    .login-form {
+        width: var(--login-form-width);
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        margin: auto;
+
+        .fb-button {
+            width: var(--login-form-width);
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            padding: 20px 0;
+            background: var(--color-secondarydark);
+
+            .icon {
+                height: 100%;
+                margin-right: 16px;
+                fill: var(--color-surfacelighter);
+            }
+
+            .label {
+                font-size: 15px;
+                color: var(--color-surfacelighter);
+            }
+        }
+
+        .text {
+            margin: calc(var(--spacing) * 0.5) 0;
+            font-size: 14px;
+            color: var(--color-surface);
+        }
+
+        .or {
+            margin: calc(var(--spacing) * 3) 0 var(--spacing) 0;
+            font-size: 18px;
+            color: var(--color-surface);
+        }
+
+        .email {
+            width: var(--login-form-width);
+            margin-bottom: var(--spacing);
+            padding: calc(var(--spacing) * 0.5) 0;
+            border-bottom: 1px solid var(--color-surface);
+            font-size: 15px;
+            color: var(--color-surfacelighter);
+            outline: none;
+            background: none;
+
+            &::placeholder {
+                color: var(--color-secondarylighter);
+            }
+        }
+
+        .password {
+            width: var(--login-form-width);
+            margin-bottom: var(--spacing);
+            padding: calc(var(--spacing) * 0.5) 0;
+            border-bottom: 1px solid var(--color-surface);
+            font-size: 15px;
+            color: var(--color-surfacelighter);
+            outline: none;
+            background: none;
+
+            &::placeholder {
+                color: var(--color-secondarylighter);
+            }
+        }
+
+        .acceptance-section {
+            width: var(--login-form-width);
+
+            .toggle-option {
+                display: flex;
+                flex-direction: row;
+                margin-bottom: var(--spacing);
+
+                .checkbox-size {
+                    width: var(--spacing);
+                    height: var(--spacing);
+                    margin-right: calc(var(--spacing) * 0.5);
+                    fill: var(--color-surface);
+                }
+
+                .accept {
+                    font-size: 14px;
+                    color: var(--color-surface);
+                }
+
+                .acceptance-label {
+                    font-size: 14px;
+                    color: var(--color-surfacelighter);
+                }
+            }
+        }
+
+        .login-button {
+            width: var(--login-form-width);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            padding: 18px;
+            background: var(--color-primary);
+
+            .label {
+                font-weight: 600;
+                color: var(--color-surfacelighter);
+            }
+        }
+
+        .option {
+            margin-top: calc(var(--spacing) * 3);
+            cursor: pointer;
+            font-weight: 600;
+            color: var(--color-surfacelighter);
+
+            // &:last-child {
+            //     margin-top: var(--spacing);
+            // }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/index.js b/src/routes/index.js
index f931b9c08..7f06e4ac5 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -8,6 +8,7 @@ import Search from './Search';
 import Settings from './Settings';
 import Player from './Player';
 import Detail from './Detail';
+import Intro from './Intro';
 
 export {
     Addons,
@@ -19,5 +20,6 @@ export {
     Search,
     Settings,
     Player,
-    Detail
+    Detail,
+    Intro
 };