diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 136d4ccea..01ca5eab7 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -381,7 +381,7 @@ const Intro = ({ queryParams }) => {
                         <div className={styles['label']}>Continue with Facebook</div>
                     </Button>
                     <Button className={classnames(styles['form-button'], styles['apple-button'])} onClick={loginWithApple}>
-                        <Icon className={styles['icon']} name={'apple'} />
+                        <Icon className={styles['icon']} name={'macos'} />
                         <div className={styles['label']}>Continue with Apple</div>
                     </Button>
                     {
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 935b0fad1..335ab9a5c 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -175,15 +175,27 @@
             position: relative;
             width: 22rem;
             margin-left: 2rem;
+            display: flex;
+            flex-direction: column;
 
             .facebook-button {
                 background: var(--color-facebook);
+                margin-bottom: 1rem;
                 
                 &:hover, &:focus {
                     outline: var(--focus-outline-size) solid var(--color-facebook);
                     background-color: transparent;
                 }
             }
+
+            .apple-button {
+                background: var(--color-x);
+                
+                &:hover, &:focus {
+                    outline: var(--focus-outline-size) solid var(--color-x);
+                    background-color: transparent;
+                }
+            }
         }
     }
 }