diff --git a/frontend/WriteGirl/src/pages/HomePage/HomePage.js b/frontend/WriteGirl/src/pages/HomePage/HomePage.js
index 96e609a..af3a0e1 100644
--- a/frontend/WriteGirl/src/pages/HomePage/HomePage.js
+++ b/frontend/WriteGirl/src/pages/HomePage/HomePage.js
@@ -206,10 +206,11 @@ let up = false;
             <View style={styles.tip}>
                 <Image style={styles.tipbox} source={require('./assets/icon.png')}/>
                 <View style={styles.tipimagecontainer} >
-                    <ImageBackground style={styles.tipimage} source={require('./assets/speech-bubble.png')}>
+                    <Image style={styles.tipimage} source={require('./assets/speech-bubble.png')}/>
+                    <Text style={styles.tiptext}>Listening to music is a great way to set the mood for writing 🎼</Text>
+                    {/* <ImageBackground style={styles.tipimage} source={require('./assets/speech-bubble.png')}>
                         <Text style={styles.tiptext}>Listening to music is a great way to set the mood for writing 🎼</Text>
-                        {/* <Text style={styles.tiptext}>{tip}</Text> */}
-                    </ImageBackground>
+                    </ImageBackground> */}
                 </View>
             </View>
 
diff --git a/frontend/WriteGirl/src/pages/HomePage/HomePageStyles.js b/frontend/WriteGirl/src/pages/HomePage/HomePageStyles.js
index 0490b1b..3da81f6 100644
--- a/frontend/WriteGirl/src/pages/HomePage/HomePageStyles.js
+++ b/frontend/WriteGirl/src/pages/HomePage/HomePageStyles.js
@@ -172,20 +172,26 @@
 
 //   export { styles };
 
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
+
+// const { width, height } = Dimensions.get('window');
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
 
 const styles = StyleSheet.create({
     container: {
-      paddingLeft: 40,
-      paddingRight:40,
-      paddingBottom: 80,
-      flex:1,
-      justifyContent:'space-between',
-      backgroundColor: '#F0EBE8'
+        paddingLeft: width * 0.1,
+        paddingRight: width * 0.1,
+        paddingTop: height * 0.08,
+    //   paddingBottom: 80,
+        flex:1,
+        justifyContent:'space-between',
+        backgroundColor: '#F0EBE8'
     },
     welcome: {
-        height: '20%',
-        paddingTop: 50
+        // height: '20%',
+        // borderWidth: 2,
+        // paddingTop: height * 0.08,
     },
     welcometext1: {
         fontSize: '1.1rem',
@@ -210,35 +216,43 @@ const styles = StyleSheet.create({
     },
 
     tip: {
+        // borderWidth: 2,
         height: '20%',
+        width: '100%',
         marginTop: '5%',
         marginBottom: '5%',
         flexDirection: 'row',
         justifyContent: 'space-between',
     },
     tipbox: {
-        width: 74.72,
-        height: 112.33,
-        alignSelf: 'flex-end'
+        // width: 74.72,
+        // height: 112.33,
+        width: '30%',
+        height: '85%',
+        resizeMode: 'contain',
+        alignSelf: 'flex-end',
     },
     tiptext: {
         color: '#0D4D5E',
-        fontSize: 18,
-        paddingRight: 30,
-        paddingLeft: 30,
+        fontSize: '1.1rem',
+        paddingRight: 20,
+        paddingLeft: 20,
         paddingBottom: '6%',
-        fontFamily: 'Hubballi'
+        fontFamily: 'Hubballi',
+        position: 'absolute'
     },
     tipimagecontainer: {
         width: "70%",
-        justifyContent: 'flex-start',
-        alignItems: 'flex-end'
+        height: '100%',
+        // justifyContent: 'flex-start',
+        justifyContent: 'center',
+        alignItems: 'center'
     },
     tipimage: {
-        // width: '200px',
-        // height: '90px',
-        width: '240px',
-        height: '108px',
+        // width: '240px',
+        // height: '108px',
+        width: '100%',
+        height: '100%',
         resizeMode: 'contain',
         alignItems: 'center',
         textAlign: 'left',
@@ -248,8 +262,9 @@ const styles = StyleSheet.create({
     exercises: {
         borderWidth: 1,
         height: '40%',
+        justifyContent: 'space-between',
         // paddingTop: 20,
-        paddingBottom: 20,
+        // paddingBottom: 20,
         alignItems: 'center',
         borderRadius: 20,
         borderColor: '#FFFFFF',
@@ -263,22 +278,21 @@ const styles = StyleSheet.create({
     exercisesbutton: {
         color: '#0D4D5E',
         backgroundColor: '#C5DA01',
-        paddingLeft: 30,
-        paddingRight: 30,
+        paddingLeft: width * 0.05,
+        paddingRight: width * 0.05,
         paddingTop: 5,
         paddingBottom: 5,
         borderRadius: 20,
         textAlign: 'center',
-        marginTop: '5%',
         shadowRadius: 5,
         shadowColor: '#E1E0DE',
         shadowOpacity: 1,
         shadowOffset: {width: 0, height: 4},
-        fontSize: 25,
+        fontSize: '1.4rem',
         fontFamily: 'DroidSans'
     },
     exercisestext1: {
-        fontSize: 27,
+        fontSize: '1.7rem',
         fontWeight: 'bold',
         color: '#0D4D5E',
         fontFamily: 'DroidSans'
@@ -287,27 +301,21 @@ const styles = StyleSheet.create({
         width: '100%',
         height: '80%',
         justifySelf: 'flex-start',
-        // aspectRatio: 1,
         resizeMode: 'cover',
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         borderBottomWidth: 2,
         borderColor: '#FFFFFF',
         zIndex: 999,
-        // elevation: 10,
-        // shadowRadius: 51,
-        // shadowColor: '#E1E0DF',
-        // shadowOpacity: 1,
-        // shadowOffset: {width: 0, height: 4},
     },
     horizontal2: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         width: '100%',
-        paddingTop: '3%',
-        paddingLeft: 15,
-        paddingRight: 15,
+        paddingBottom: '3%',
+        paddingLeft: width * 0.03,
+        paddingRight: width * 0.03,
     },
     rating: {
         color: '#0D4D5E',
@@ -316,7 +324,7 @@ const styles = StyleSheet.create({
         borderTopLeftRadius: 30,
         paddingLeft: 6,
         paddingRight: 6,
-        fontSize: 25,
+        fontSize: '1.5rem',
         position: 'absolute',
         alignSelf: 'flex-end',
         marginTop: '10%',
@@ -325,12 +333,10 @@ const styles = StyleSheet.create({
     },
 
     jumpstart: {
-        marginTop: '80%',
-        position: 'absolute',
-        height: '100%',
-        width: '100%',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
+        marginLeft: width * -0.1,
+        marginRight: width * -0.1,
+        height: '20%',
+        backgroundColor: '#49A5AD',
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
     },
@@ -348,7 +354,7 @@ const styles = StyleSheet.create({
     },
     jumpstarttext: {
         alignSelf: 'center',
-        fontSize: 24,
+        fontSize: '1.4rem',
         color: '#FFFFFF'
     },
     todaysJumpstart: {
diff --git a/frontend/WriteGirl/src/pages/RandomizerWheelPage/RandomizerWheelPageStyles.js b/frontend/WriteGirl/src/pages/RandomizerWheelPage/RandomizerWheelPageStyles.js
index 2b33eee..a19f092 100644
--- a/frontend/WriteGirl/src/pages/RandomizerWheelPage/RandomizerWheelPageStyles.js
+++ b/frontend/WriteGirl/src/pages/RandomizerWheelPage/RandomizerWheelPageStyles.js
@@ -9,35 +9,48 @@ const styles = StyleSheet.create({
         backgroundColor: '#49A5AD',
         borderBottomLeftRadius: 40,
         borderBottomRightRadius: 40,
-        alignItems: 'center'
+        alignItems: 'center',
+        justifyContent: 'flex-end'
     },
     headertext: {
-        fontSize: 30,
+        fontSize: '1.7rem',
         color: "#FFFFFF",
-        paddingTop: '25%'
+        paddingBottom: '35%',
+        fontFamily: 'DroidSansBold'
     },
 
     wheelcontainer: {
         height: '50%',
+        marginLeft: '5%',
+        marginRight: '5%',
         alignItems: 'center',
-        marginTop: '-15%'
+        marginTop: '-25%'
     },
     wheelbody: {
-        width: 330,
-        height: 346.46,
+        width: '100%',
+        height: '100%',
+        resizeMode: 'contain',
+        // width: 330,
+        // height: 346.46,
         position: 'absolute'
     },
     wheeltop: {
-        width: 40,
-        height: 55,
+        width: '12%',
+        height: '17%',
+        resizeMode: 'contain',
+        // width: 40,
+        // height: 55,
         zIndex: 5,
         position: 'absolute',
         marginTop: -30,
     },
     wheel: {
-        height: 321.43,
-        width: 321.43,
-        marginTop: 4
+        width: '97.403%',
+        height: '95%',
+        resizeMode: 'contain',
+        // height: 321.43,
+        // width: 321.43,
+        // marginTop: 3
     },
 
     button: {
@@ -50,11 +63,13 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         marginLeft: '5%',
         marginRight: '5%',
+        marginTop: '10%',
     },
     buttontext: {
         color: '#FFFFFF',
         fontSize: 25,
-        textAlign: 'center'
+        textAlign: 'center',
+        fontFamily: 'DroidSans'
     },
 
     wordcontainer: {
@@ -89,7 +104,8 @@ const styles = StyleSheet.create({
     },
     wordtext: {
         color: '#0D4D5E',
-        fontSize: 20
+        fontSize: 20,
+        fontFamily: 'DroidSans'
     },
 
     modalcontainer: {
@@ -112,7 +128,7 @@ const styles = StyleSheet.create({
         elevation: 5
     },
     modalcontent: {
-        height: '50%',
+        height: '100%',
         justifyContent: 'space-evenly',
         alignItems: 'center',
         borderRadius: 2,
@@ -120,7 +136,8 @@ const styles = StyleSheet.create({
     },
     modaltext: {
         color: '#0D4D5E',
-        fontSize: 20
+        fontSize: 20,
+        fontFamily: 'DroidSans'
     },
     closebutton: {
         color: '#0D4D5E',
@@ -136,7 +153,8 @@ const styles = StyleSheet.create({
         shadowColor: '#E1E0DE',
         shadowOpacity: 1,
         shadowOffset: {width: 0, height: 4},
-        fontSize: 25
+        fontSize: 25,
+        fontFamily: 'DroidSans'
     },
 
     backImage: {