diff --git a/src/Main.tsx b/src/Main.tsx
index 2f09304..fb655b3 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -14,6 +14,7 @@ import Keycard from "react-native-status-keycard";
 import Dialpad from './components/Dialpad';
 import { sha256 } from '@noble/hashes/sha256';
 import { bytesToHex } from '@noble/hashes/utils';
+import Styles from './Styles';
 
 enum Step {
   Discovery,
@@ -277,7 +278,7 @@ const Main = () => {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={Styles.container}>
       {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard} onFactoryResetFunc={startFactoryReset}></DiscoveryScreen>}
       {step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
       {step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
@@ -289,13 +290,5 @@ const Main = () => {
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#222222',
-    width: '100%',
-    height: '100%'
-  },
-});
-
 export default Main;
 
diff --git a/src/NFCModal.tsx b/src/NFCModal.tsx
index 21df18c..513c412 100644
--- a/src/NFCModal.tsx
+++ b/src/NFCModal.tsx
@@ -1,8 +1,9 @@
 import React, {FC} from "react";
-import {Platform, StyleSheet, Text, View } from "react-native";
+import {Platform, Text, View } from "react-native";
 import Modal from "react-native-modal/dist/modal";
 import Icon from 'react-native-vector-icons/Feather';
 import Button from "./components/Button";
+import Styles from "./Styles";
 
 type NFCModalProps = {
   isVisible: boolean;
@@ -13,55 +14,16 @@ const NFCModal: FC<NFCModalProps> = props => {
   const {isVisible, onChangeFunc} = props;
 
   return (
-    <Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
-        <View style={modalStyle.container}>
-          <Text style={modalStyle.header}>Ready to Scan</Text>
-          <View style={modalStyle.iconContainer}>
-          <Icon name="smartphone" size={40} style={modalStyle.icon}/>
+    <Modal isVisible={(Platform.OS === 'android') && isVisible} style={Styles.modalContainer}>
+        <View style={Styles.modalContent}>
+          <Text style={Styles.modalHeader}>Ready to Scan</Text>
+          <View style={Styles.modalIconContainer}>
+          <Icon name="smartphone" size={40} style={Styles.modalIcon}/>
           </View>
-          <Text style={modalStyle.prompt}>Tap your Keycard</Text>
-          <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc()} btnJustifyContent='center'></Button>
+          <Text style={Styles.modalPrompt}>Tap your Keycard</Text>
+          <Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
         </View>
     </Modal>
   )};
 
-const modalStyle = StyleSheet.create({
-  modalContainer: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  container: {
-    height: 350,
-    paddingBottom: 20,
-    alignItems: 'center',
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    backgroundColor: '#222222'
-  },
-  header: {
-    paddingTop: '7%',
-    fontSize: 22,
-    fontFamily: 'Inter'
-  },
-  prompt: {
-    paddingTop: '10%',
-    fontSize: 16,
-    fontFamily: 'Inter'
-  },
-  iconContainer: {
-    width: 80,
-    height: 80,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderColor: '#0e4e0b',
-    borderWidth: 3,
-    borderRadius: 80,
-    marginTop: '7%',
-  },
-  icon: {
-    color: '#0e4e0b'
-  }
-});
-
 export default NFCModal;
\ No newline at end of file
diff --git a/src/ReceiveModal.tsx b/src/ReceiveModal.tsx
index 226823e..7031a86 100644
--- a/src/ReceiveModal.tsx
+++ b/src/ReceiveModal.tsx
@@ -17,7 +17,7 @@ const ReceiveModal: FC<ReceiveModalProps> = props => {
     <Modal isVisible={isVisible} style={modalStyle.modalContainer}>
         <View style={modalStyle.container}>
           <QRCode value={address} />
-        <Button label="Cancel" disabled={false} btnColor="black" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc()} btnJustifyContent='center'></Button>
+        <Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
         </View>
     </Modal>
   )};
diff --git a/src/Styles.tsx b/src/Styles.tsx
new file mode 100644
index 0000000..e1fe4cc
--- /dev/null
+++ b/src/Styles.tsx
@@ -0,0 +1,101 @@
+import { StyleSheet } from "react-native";
+
+const Styles = StyleSheet.create({
+    container: {
+        backgroundColor: 'black',
+        width: '100%',
+        height: '100%'
+      },
+      textContainer: {
+        width: '100%',
+        paddingTop: 80,
+      },
+      heading: {
+        color: 'white',
+        textAlign: 'center',
+        fontSize: 32,
+        fontFamily: 'Inter',
+        lineHeight: 40,
+      },
+      subtitle: {
+        textAlign: 'center',
+        paddingTop: 20,
+        color: 'white',
+        fontSize: 18,
+        lineHeight: 24,
+        width: '60%',
+        marginLeft: '20%',
+        marginRight: '20%'
+      },
+      multipassImg: {
+        width: '80%',
+        height: '38%',
+        resizeMode: 'contain',
+        marginLeft: '10%',
+        marginRight: '10%',
+        marginTop: 80
+      },
+      footer: {
+        width: '100%',
+        position: 'absolute',
+        bottom: 60,
+        justifyContent: 'center'
+      },
+      sublinkContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        paddingTop: 20
+      },
+      sublinkText: {
+        color: 'white',
+        fontSize: 12,
+        fontFamily: 'Inter'
+      },
+      sublinkAction: {
+        color: 'white',
+        fontSize: 12,
+        fontFamily: 'Inter',
+        textDecorationLine: 'underline'
+      },
+
+      modalContainer: {
+        justifyContent: 'flex-end',
+        margin: 0,
+      },
+      modalContent: {
+        height: 350,
+        paddingBottom: 20,
+        alignItems: 'center',
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        borderColor: 'rgba(0, 0, 0, 0.1)',
+        backgroundColor: '#470644'
+      },
+      modalHeader: {
+        paddingTop: '7%',
+        fontSize: 20,
+        fontFamily: 'Inter'
+      },
+      modalPrompt: {
+        paddingTop: '10%',
+        fontSize: 16,
+        fontFamily: 'Inter',
+        paddingBottom: 30
+      },
+      modalIconContainer: {
+        width: 80,
+        height: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderColor: '#F29AE9',
+        borderWidth: 3,
+        borderRadius: 80,
+        marginTop: '7%',
+      },
+      modalIcon: {
+        color: '#F29AE9'
+      }
+});
+
+export default Styles
\ No newline at end of file
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 3eaa7bd..4a1ffd2 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,22 +4,16 @@ import { DimensionValue, StyleSheet, Text, TouchableOpacity, View } from "react-
 type ButtonProps = {
   label: string;
   disabled: boolean;
-  btnColor: string;
-  btnWidth: string;
-  btnFontSize?: number;
-  btnBorderColor?: string;
-  btnBorderWidth?: number;
-  btnJustifyContent: string;
   onChangeFunc: () => void;
 };
 
 const  Button: FC<ButtonProps> = props => {
-  const {label, disabled, btnColor, btnWidth, btnJustifyContent, btnFontSize, btnBorderWidth, btnBorderColor, onChangeFunc} = props;
+  const {label, disabled, onChangeFunc} = props;
 
   return (
-    <View style={[buttonStyle.textBtnContainer, {width: btnWidth as DimensionValue, justifyContent: btnJustifyContent as any}]}>
+    <View style={buttonStyle.textBtnContainer}>
       <TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
-        <Text style={[buttonStyle.title, {color: btnColor, borderBottomColor: btnBorderColor || 'none', borderBottomWidth: btnBorderWidth || 0, fontSize: btnFontSize}]}>{label}</Text>
+        <Text style={buttonStyle.title}>{label}</Text>
       </TouchableOpacity>
     </View>
   )};
@@ -28,16 +22,20 @@ const buttonStyle = StyleSheet.create({
     textBtnContainer: {
       flexDirection: 'row',
       textAlign: 'center',
-      paddingTop: 25,
-      paddingBottom: 15,
-      justifyContent: 'flex-start',
+      justifyContent: 'center',
+      backgroundColor: 'white',
+      width: '90%',
+      marginLeft: '5%',
+      marginRight: '5%',
+      paddingTop: 15,
+      paddingBottom: 15
     },
     button: {
     },
     title: {
-      color: "white",
-      textTransform: 'uppercase',
+      color: "black",
       fontFamily: 'Inter',
+      fontSize: 14
     },
   });
 
diff --git a/src/components/Dialpad.tsx b/src/components/Dialpad.tsx
index ab49aa8..370dfe0 100644
--- a/src/components/Dialpad.tsx
+++ b/src/components/Dialpad.tsx
@@ -51,8 +51,8 @@ const Dialpad: FC<DialpadProps> = props => {
        <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
      </View>
      <View style={styles.btnContainer}>
-     <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='flex-start'></Button>
-     <Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onNext} btnJustifyContent='flex-end'></Button>
+     <Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
+     <Button label="Next" disabled={false} onChangeFunc={onNext}></Button>
      </View>
    </SafeAreaView>
   )};
diff --git a/src/components/steps/DiscoveryScreen.tsx b/src/components/steps/DiscoveryScreen.tsx
index 0c977e9..a09a4ff 100644
--- a/src/components/steps/DiscoveryScreen.tsx
+++ b/src/components/steps/DiscoveryScreen.tsx
@@ -1,6 +1,7 @@
 import {FC } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Image, Linking, Text, TouchableOpacity, View } from "react-native";
 import Button from "../Button";
+import Styles from "../../Styles";
 
 type DiscoveryScreenProps = {
   onPressFunc: () => void;
@@ -11,39 +12,24 @@ const  DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
   const {onPressFunc, onFactoryResetFunc} = props;
 
   return (
-    <View style={styles.container}>
-      <View style={styles.headingContainer}>
-        <Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
+    <View style={Styles.container}>
+      <View style={Styles.textContainer}>
+        <Text style={Styles.heading}>Welcome, Operator!</Text>
+        <Text style={Styles.subtitle}>Let's start by connecting your Multipass</Text>
       </View>
-      <View style={styles.btnContainer}>
-      <Button label="Connect" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
-      <Button label="Factory reset" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onFactoryResetFunc} btnJustifyContent='center'></Button>
+      <Image style={Styles.multipassImg} source={require('../../images/multipass.png')} />
+      <View style={Styles.footer}>
+        <Button label="Connect" disabled={false} onChangeFunc={onPressFunc}></Button>
+        <View style={Styles.sublinkContainer}>
+          <Text style={Styles.sublinkText}>Don’t have Multipass? Find out how to get one </Text>
+          <TouchableOpacity onPress={() => Linking.openURL('https://keycard.tech')}>
+            <Text style={Styles.sublinkAction}>here</Text>
+          </TouchableOpacity>
+        </View>
       </View>
       <View>
     </View>
     </View>
   )};
 
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%'
-  },
-  headingContainer: {
-    width: '100%',
-    paddingLeft: '5.5%',
-    paddingRight: '5.5%',
-    paddingTop: '50%',
-  },
-  heading: {
-    color: 'white',
-    textAlign: 'center',
-    fontSize: 18,
-    fontFamily: 'Inter'
-  },
-  btnContainer: {
-    paddingTop: '7%'
-  }
-});
-
 export default DiscoveryScreen;
\ No newline at end of file
diff --git a/src/components/steps/FactoryResetScreen.tsx b/src/components/steps/FactoryResetScreen.tsx
index 5013d7a..3c37f10 100644
--- a/src/components/steps/FactoryResetScreen.tsx
+++ b/src/components/steps/FactoryResetScreen.tsx
@@ -16,8 +16,8 @@ const  FactoryResetScreen: FC<FactoryResetScreenProps> = props => {
       <View>
         <Text style={styles.heading}>Factory reset</Text>
         <Text style={styles.prompt}>This will remove the keys from your card. Are you sure?</Text>
-        <Button label="Next" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
-        <Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+        <Button label="Next" disabled={false} onChangeFunc={onPressFunc}></Button>
+        <Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
         </View>
     </View>
   )};
diff --git a/src/components/steps/HomeScreen.tsx b/src/components/steps/HomeScreen.tsx
index 1de80e8..e7c7b5b 100644
--- a/src/components/steps/HomeScreen.tsx
+++ b/src/components/steps/HomeScreen.tsx
@@ -91,9 +91,9 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
   return <View style={styles.container}>
     {step == HomeSteps.Home && 
     <View>
-      <Button label="Scan" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ScanCode)} btnJustifyContent='center'></Button>
-      <Button label="Receive" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setReceiveVisible(true)} btnJustifyContent='center'></Button>
-      <Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+      <Button label="Scan" disabled={false}  onChangeFunc={() => setStep(HomeSteps.ScanCode)}></Button>
+      <Button label="Receive" disabled={false}  onChangeFunc={() => setReceiveVisible(true)}></Button>
+      <Button label="Cancel" disabled={false}  onChangeFunc={onCancelFunc}></Button>
       <ReceiveModal address={walletAddress()} isVisible={receiveVisible} onChangeFunc={() => {setReceiveVisible(false)} } />
     </View>
     }
diff --git a/src/components/steps/MnemonicScreen.tsx b/src/components/steps/MnemonicScreen.tsx
index 58407df..e8b4d54 100644
--- a/src/components/steps/MnemonicScreen.tsx
+++ b/src/components/steps/MnemonicScreen.tsx
@@ -66,9 +66,9 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
       { step == LoadMnemonicSteps.Home &&
       <View style={styles.container}>
         <Text style={styles.heading}> Load card</Text>
-        <Button label="Import using seed phrase" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} btnJustifyContent='center'></Button>
-        <Button label="Create a new wallet" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={generateMnemonic} btnJustifyContent='center'></Button>
-        <Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+        <Button label="Import using seed phrase" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)}></Button>
+        <Button label="Create a new wallet" disabled={false} onChangeFunc={generateMnemonic}></Button>
+        <Button label="Cancel" disabled={false}  onChangeFunc={onCancelFunc}></Button>
       </View>
       }
       { step == LoadMnemonicSteps.InsertMnemonic &&
@@ -78,8 +78,8 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
           <TextInput editable multiline onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={styles.mnemonic} placeholder="Type your passphrase"/>
         </View>
         <View style={styles.btnContainer}>
-          <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => setStep(LoadMnemonicSteps.Home)} btnJustifyContent='flex-start'></Button>
-          <Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => updateMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
+          <Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
+          <Button label="Next" disabled={false} onChangeFunc={() => updateMnemonic(mnemonic)}></Button>
         </View>
         <Text style={styles.errorMessage}>{errMessage}</Text>
         </View>
@@ -87,8 +87,8 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
       { step == LoadMnemonicSteps.CreateMnemonic &&
       <View style={styles.container}>
         <Text> {mnemonic}</Text>
-        <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => setStep(LoadMnemonicSteps.Home)} btnJustifyContent='flex-start'></Button>
-        <Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => submitMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
+        <Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
+        <Button label="Next" disabled={false} onChangeFunc={() => submitMnemonic(mnemonic)}></Button>
       </View>
       }
       { step == LoadMnemonicSteps.InsertPin && <Dialpad pinRetryCounter={pinRetryCounter} prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
diff --git a/src/images/multipass.png b/src/images/multipass.png
new file mode 100644
index 0000000..d2c21e7
Binary files /dev/null and b/src/images/multipass.png differ