diff --git a/app/mobile/src/access/admin/Admin.jsx b/app/mobile/src/access/admin/Admin.jsx
index 5430a67d..1dcaa1d3 100644
--- a/app/mobile/src/access/admin/Admin.jsx
+++ b/app/mobile/src/access/admin/Admin.jsx
@@ -104,7 +104,7 @@ export function Admin() {
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
             <Text style={styles.termsheader}>{ state.strings.policy }</Text>
-            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
+            <Text numberOfLines={0} style={styles.termstext}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
             <Text style={styles.donetext}>{ state.strings.close }</Text>
diff --git a/app/mobile/src/access/admin/Admin.styled.js b/app/mobile/src/access/admin/Admin.styled.js
index 2e631c8a..652375af 100644
--- a/app/mobile/src/access/admin/Admin.styled.js
+++ b/app/mobile/src/access/admin/Admin.styled.js
@@ -61,16 +61,20 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.closeButton,
     marginTop: 8,
   },
   donetext: {
-    color: Colors.text,
+    color: Colors.closeButtonText,
     fontSize: 16,
   },
   termsheader: {
     fontWeight: 'bold',
     textAlign: 'center',
+    color: Colors.text,
+  },
+  termstext: {
+    color: Colors.text,
   },
   container: {
     flexDirection: 'column',
@@ -92,7 +96,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     textAlign: 'center',
     fontSize: 24,
-    color: Colors.grey,
+    color: Colors.descriptionText,
   },
   spacemid: {
     flexGrow: 1,
diff --git a/app/mobile/src/access/create/Create.jsx b/app/mobile/src/access/create/Create.jsx
index 4d34d9aa..3a9c8949 100644
--- a/app/mobile/src/access/create/Create.jsx
+++ b/app/mobile/src/access/create/Create.jsx
@@ -191,7 +191,7 @@ export function Create() {
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
             <Text style={styles.termsheader}>{ state.strings.policy }</Text>
-            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
+            <Text style={styles.termstext}numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
             <Text style={styles.donetext}>{ state.strings.close }</Text>
diff --git a/app/mobile/src/access/create/Create.styled.js b/app/mobile/src/access/create/Create.styled.js
index d5c04c4a..b31d45ce 100644
--- a/app/mobile/src/access/create/Create.styled.js
+++ b/app/mobile/src/access/create/Create.styled.js
@@ -17,9 +17,9 @@ export const styles = StyleSheet.create({
   modalContainer: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.grey,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: Colors.modalBase,
   },
   tos: {
     display: 'flex',
@@ -60,16 +60,21 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.closeButton,
     marginTop: 8,
   },
   donetext: {
     color: Colors.text,
     fontSize: 16,
+    color: Colors.closeButtonText,
   },
   termsheader: {
     fontWeight: 'bold',
     textAlign: 'center',
+    color: Colors.text,
+  },
+  termstext: {
+    color: Colors.text,
   },
   demo: {
     alignItems: 'center',
@@ -119,7 +124,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     textAlign: 'center',
     fontSize: 24,
-    color: Colors.grey,
+    color: Colors.descriptionText,
   },
   spacemid: {
     flexGrow: 1,
diff --git a/app/mobile/src/access/login/Login.jsx b/app/mobile/src/access/login/Login.jsx
index 6490c304..6aca9deb 100644
--- a/app/mobile/src/access/login/Login.jsx
+++ b/app/mobile/src/access/login/Login.jsx
@@ -117,7 +117,7 @@ export function Login() {
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
             <Text style={styles.termsheader}>{ state.strings.policy }</Text>
-            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
+            <Text numberOfLines={0} style={styles.termstext}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
             <Text style={styles.donetext}>{ state.strings.close }</Text>
diff --git a/app/mobile/src/access/login/Login.styled.js b/app/mobile/src/access/login/Login.styled.js
index 5df92f01..d684646d 100644
--- a/app/mobile/src/access/login/Login.styled.js
+++ b/app/mobile/src/access/login/Login.styled.js
@@ -61,16 +61,20 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.closeButton,
     marginTop: 8,
   },
   donetext: {
-    color: Colors.text,
+    color: Colors.closeButtonText,
     fontSize: 16,
   },
   termsheader: {
     fontWeight: 'bold',
     textAlign: 'center',
+    color: Colors.text,
+  },
+  termstext: {
+    color: Colors.text,
   },
   container: {
     flexDirection: 'column',
diff --git a/app/mobile/src/access/reset/Reset.jsx b/app/mobile/src/access/reset/Reset.jsx
index 2642157d..f01282fe 100644
--- a/app/mobile/src/access/reset/Reset.jsx
+++ b/app/mobile/src/access/reset/Reset.jsx
@@ -95,10 +95,10 @@ export function Reset() {
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
             <Text style={styles.termsheader}>{ state.strings.policy }</Text>
-            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
+            <Text numberOfLines={0} style={styles.termstext}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
-          <TouchableOpacity style={styles.close} onPress={actions.hideTerms}>
-            <Text style={styles.donetext}>{ state.strings.done }</Text>
+          <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
+            <Text style={styles.donetext}>{ state.strings.close }</Text>
           </TouchableOpacity>
         </View>
       </Modal>
diff --git a/app/mobile/src/access/reset/Reset.styled.js b/app/mobile/src/access/reset/Reset.styled.js
index 8dd0b9f5..222a1288 100644
--- a/app/mobile/src/access/reset/Reset.styled.js
+++ b/app/mobile/src/access/reset/Reset.styled.js
@@ -18,7 +18,7 @@ export const styles = StyleSheet.create({
   modalContainer: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.descriptionText,
+    backgroundColor: Colors.modalBase,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -61,16 +61,20 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.closeButton,
     marginTop: 8,
   },
   donetext: {
-    color: Colors.text,
+    color: Colors.closeButtonText,
     fontSize: 16,
   },
   termsheader: {
     fontWeight: 'bold',
     textAlign: 'center',
+    color: Colors.text,
+  },
+  termstext: {
+    color: Colors.text,
   },
   container: {
     flexDirection: 'column',