diff --git a/src/assets/icons/app-icon.png b/src/assets/icons/app-icon.png
new file mode 100644
index 0000000..0cddea4
Binary files /dev/null and b/src/assets/icons/app-icon.png differ
diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx
index 263369e..4149a8d 100644
--- a/src/screens/Onboarding/index.tsx
+++ b/src/screens/Onboarding/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
 import styled from 'styled-components/native';
-import { THEME_COLOR } from 'CONSTANTS';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from 'screens';
 import { useTypedSelector } from 'store';
@@ -8,9 +7,10 @@ import { useDispatch } from 'react-redux';
 import { setOnboardingStatus } from 'store/settings/actions';
 import { t } from '@localisation';
 import Button from 'components/Button';
+import { Header, Text as BaseText } from 'components/Typography';
+import { ShadowWrapper } from 'components/Shadow';
 
 const Container = styled.SafeAreaView`
-    background-color: ${THEME_COLOR};
     flex: 1;
     justify-content: center;
 `;
@@ -19,10 +19,9 @@ const TextContainer = styled.ScrollView`
     padding: 25px;
 `;
 
-const Text = styled.Text`
+const Text = styled(BaseText)`
     text-align: center;
-    color: white;
-    margin-bottom: 10px;
+    margin-bottom: 16px;
 `;
 
 const ButtonContainer = styled.View`
@@ -33,6 +32,8 @@ const Logo = styled.Image`
     width: 150px;
     height: 150px;
     margin: 0 auto 50px auto;
+    border-radius: 12px;
+    border: 1px solid #e6e6e6;
 `;
 
 function Onboarding() {
@@ -56,10 +57,12 @@ function Onboarding() {
     return (
         <Container>
             <TextContainer contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
-                <Logo source={require('../../assets/icons/app-icon-white.png')} />
-                <Text >
+                <ShadowWrapper size="medium">
+                    <Logo source={require('../../assets/icons/app-icon.png')} />
+                </ShadowWrapper>
+                <Header style={{ textAlign: 'center', marginBottom: 24 }}>
                     {t('onboarding-welcome')}
-                </Text>
+                </Header>
                 <Text>
                     {t('onboarding-intro')}
                 </Text>