diff --git a/package.json b/package.json
index 35703926e..7f8179ee8 100755
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
         "react-dom": "16.12.0",
         "react-focus-lock": "2.2.1",
         "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#381b4f37d138e66ae8ea025e240af3704245e5dc",
-        "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.4",
+        "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v3.0.0",
         "stremio-core-web": "git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9",
         "stremio-icons": "git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.11",
         "vtt.js": "0.13.0"
diff --git a/src/App/styles.less b/src/App/styles.less
index 8844fde5e..8324ce583 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -1,6 +1,6 @@
-@import (inline, once, css) '~stremio-colors/css/stremio-colors.css';
 @import (inline, once, css) '~stremio/common/roboto.css';
 @import (reference) '~stremio/common/screen-sizes.less';
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
 :global {
     @import (once, less) '~stremio-router/styles.css';
@@ -11,7 +11,7 @@
     --poster-shape-ratio: 1.464;
     --scroll-bar-width: 6px;
     --nav-bar-size: 3.2rem;
-    --focus-outline-size: 2px;
+    --focus-outline-size: 4px;
     --color-facebook: #4267b2;
     --color-twitter: #1DA1F2;
     --color-placeholder: #60606080;
diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 38c9a4209..8109415fc 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -1,7 +1,10 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .checkbox-container {
     &:global(.checked) {
         .icon {
-            background-color: var(--color-primary);
+            fill: @color-surface-light5;
+            background-color: @color-primaryvariant1;
         }
     }
 
@@ -9,6 +12,6 @@
         display: block;
         width: 1rem;
         height: 1rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index df05b7e60..ddcce704a 100644
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -24,11 +24,11 @@ const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, hre
     return (
         <Checkbox {...props} ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={checkboxOnClick}>
             <div className={styles['label']}>
-                {label}
+                {label}{' '}
                 {
                     typeof link === 'string' && typeof href === 'string' ?
                         <Button className={styles['link']} href={href} target={'_blank'} tabIndex={-1} onClick={linkOnClick}>
-                            {' '}{link}
+                            {link}
                         </Button>
                         :
                         null
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index 62d691d7a..815e46695 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Checkbox/styles.less') {
     checkbox-icon: icon;
 }
@@ -8,36 +10,27 @@
     align-items: center;
     padding: 0.5rem;
 
-    &:focus, &:hover {
-        background-color: var(--color-surfacedarker60);
-
-        .checkbox-icon {
-            fill: var(--color-surfacelighter);
-        }
-
-        .label {
-            color: var(--color-surfacelighter);
-
-            .link {
-                color: var(--color-surfacelighter);
-            }
-        }
+    &:focus {
+        outline: none;
+        background-color: @color-surface-light5-20;
     }
 
     .checkbox-icon {
         flex: none;
         width: 1.2rem;
         height: 1.2rem;
-        fill: var(--color-surfacelight);
+        fill: @color-surface-dark5;
     }
 
     .label {
         flex: 1;
         margin-left: 0.5rem;
-        color: var(--color-surface);
+        font-size: 0.9rem;
+        color: @color-surface;
 
         .link {
-            color: var(--color-surfacelight);
+            font-size: 0.9rem;
+            color: @color-surface-light5;
 
             &:hover {
                 text-decoration: underline;
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index aa356cd27..0b4eee6aa 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Modal, useRouteFocused } = require('stremio-router');
-const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
+const { Button, Image, useBinaryState, useCoreEvent } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const ConsentCheckbox = require('./ConsentCheckbox');
@@ -268,10 +268,25 @@ const Intro = ({ queryParams }) => {
     return (
         <div className={styles['intro-container']}>
             <div className={styles['form-container']}>
+                <div className={styles['logo-container']}>
+                    <Image className={styles['logo']} src={'/images/stremio_symbol.png'} />
+                    <Icon className={styles['icon']} icon={'ic_stremio'} />
+                </div>
                 <Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
                     <Icon className={styles['icon']} icon={'ic_facebook'} />
                     <div className={styles['label']}>Continue with Facebook</div>
                 </Button>
+                {
+                    state.form === SIGNUP_FORM ?
+                        <Button className={classnames(styles['form-button'], styles['switch-form-button'], styles['switch-form-login-button'])} onClick={switchFormOnClick}>
+                            <div className={styles['label-container']}>
+                                <div className={styles['account-label']}>Already have an account?</div>
+                                <div className={styles['label']}>LOG IN</div>
+                            </div>
+                        </Button>
+                        :
+                        null
+                }
                 <CredentialsTextInput
                     ref={emailRef}
                     className={styles['credentials-text-input']}
@@ -340,7 +355,7 @@ const Intro = ({ queryParams }) => {
                         null
                 }
                 <Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={state.form === SIGNUP_FORM ? signup : loginWithEmail}>
-                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'SING UP' : 'LOG IN'}</div>
+                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}</div>
                 </Button>
                 {
                     state.form === SIGNUP_FORM ?
@@ -350,9 +365,14 @@ const Intro = ({ queryParams }) => {
                         :
                         null
                 }
-                <Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
-                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
-                </Button>
+                {
+                    state.form === LOGIN_FORM ?
+                        <Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
+                            <div className={styles['label']}>SIGN UP WITH EMAIL</div>
+                        </Button>
+                        :
+                        null
+                }
             </div>
             {
                 passwordRestModalOpen ?
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index a093f8663..617226262 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -1,12 +1,12 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .intro-container {
     display: flex;
     flex-direction: row;
-    justify-content: center;
-    align-items: center;
     width: 100%;
     height: 100%;
     background:
-        linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
+        linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
         url('/images/intro_background.jpg');
     background-size: cover;
     background-repeat: no-repeat;
@@ -16,8 +16,31 @@
 
     .form-container {
         flex: none;
-        width: 20rem;
-        padding: 4rem 0;
+        width: 27rem;
+        margin: auto;
+        padding: 2rem 0;
+
+        .logo-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 3rem;
+
+            .logo {
+                flex: none;
+                width: 4rem;
+                height: 4rem;
+                margin-right: 1rem;
+            }
+
+            .icon {
+                flex: none;
+                width: 8rem;
+                height: 4rem;
+                fill: @color-surface-dark4;
+            }
+        }
 
         .form-button {
             display: flex;
@@ -31,7 +54,7 @@
                 width: 1rem;
                 height: 2rem;
                 margin-right: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -39,19 +62,24 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 font-size: 1.1rem;
-                font-weight: 700;
-                color: var(--color-surfacelighter);
+                font-weight: 500;
+                color: @color-surface-light5;
                 text-align: center;
             }
         }
 
         .facebook-button {
             min-height: 4.5rem;
-            margin-bottom: 2rem;
-            background: var(--color-facebook);
+            margin-top: 2rem;
+            margin-bottom: 0.5rem;
+            background: @color-secondaryvariant1-dark5;
 
-            &:hover, &:focus {
-                filter: brightness(1.2);
+            &:hover {
+                background: @color-secondary-dark4;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
@@ -63,21 +91,24 @@
             display: block;
             width: 100%;
             margin: 1rem 0;
-            padding: 0.5rem;
-            border-bottom: thin solid var(--color-surface);
-            color: var(--color-surfacelighter);
+            padding: 1rem;
+            border-bottom: thin solid @color-surface;
+            color: @color-surface-light5;
 
-            &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
-                border-bottom-color: var(--color-surfacelighter);
+            &:hover {
+                background-color: @color-surface-light5-20;
+            }
+
+            &:focus {
+                border-bottom-color: @color-secondaryvariant2-light1;
 
                 &::placeholder {
-                    color: var(--color-surfacelighter);
+                    color: @color-secondaryvariant2-light1;
                 }
             }
 
             &::placeholder {
-                color: var(--color-surfacelight);
+                color: @color-surface-dark2;
             }
         }
 
@@ -93,36 +124,37 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 padding: 0.5rem;
-                color: var(--color-surfacelight);
+                color: @color-surface-light3;
 
-                &:hover {
+                &:hover, &:focus {
                     text-decoration: underline;
-                    color: var(--color-surfacelighter);
+                    color: @color-secondaryvariant2-light1;
                 }
 
                 &:focus {
-                    color: var(--color-surfacelighter);
+                    outline: none;
+                    background-color: @color-surface-light5-20;
                 }
             }
         }
 
-        .consent-checkbox {
-            margin: 1rem 0;
-        }
-
         .error-message {
             margin: 1rem 0;
             text-align: center;
-            color: var(--color-signal1);
+            color: @color-accent5;
         }
 
         .submit-button {
             min-height: 4rem;
             margin: 1rem 0;
-            background-color: var(--color-primarydark);
+            background-color: @color-accent3;
 
             &:hover {
-                background-color: var(--color-primary);
+                background-color: @color-accent3-dark1;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
@@ -131,12 +163,18 @@
         }
 
         .guest-login-button {
-            margin-top: 1.5rem;
-            margin-bottom: 0.5rem;
+            margin-top: 1rem;
             padding: 1rem 0.5rem;
 
-            &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
+            &:hover {
+                .label {
+                    text-decoration: underline;
+                }
+            }
+
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
             }
         }
 
@@ -145,8 +183,36 @@
             padding: 1rem 0.5rem;
 
             &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
+                .label-container {
+                    .label {
+                        text-decoration: underline;
+                    }
+                }
             }
+
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
+            }
+
+            .label-container {
+                display: flex;
+                flex-direction: row;
+                align-items: baseline;
+
+                .account-label {
+                    margin-right: 0.5rem;
+                    color: @color-surface-dark2;
+                }
+
+                .label {
+                    color: @color-accent4-light1;
+                }
+            }
+        }
+
+        .switch-form-login-button {
+            margin-bottom: 0.5rem;
         }
     }
 }
@@ -161,7 +227,7 @@
     .label {
         margin-bottom: 1rem;
         font-size: 2rem;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
         animation: 1s linear infinite alternate flash;
     }
 
@@ -169,7 +235,7 @@
         flex: none;
         width: 5rem;
         height: 5rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
         animation: 1s linear infinite alternate flash;
     }
 
diff --git a/yarn.lock b/yarn.lock
index 73917d842..fd7c395da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10442,9 +10442,9 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
-"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.4":
+"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v3.0.0":
   version "2.0.4"
-  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#6a3fb5b311adb150920a8c59344b29d5de89b489"
+  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#0fd22b41b4246dd92182727b49ef9e4a67413202"
 
 "stremio-core-web@git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9":
   version "0.6.0"