diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index 5f8f3393..16736541 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
 
   return (
     
-  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+  <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={72}>
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>
diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
index 195ba64c..f16ec894 100644
--- a/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
+++ b/app/mobile/src/session/conversation/addTopic/AddTopic.jsx
@@ -13,6 +13,7 @@ import { VideoFile } from './videoFile/VideoFile';
 import { AudioFile } from './audioFile/AudioFile';
 import { ImageFile } from './imageFile/ImageFile';
 import { BinaryFile } from './binaryFile/BinaryFile';
+import { BlurView } from "@react-native-community/blur";
 
 export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
 
@@ -227,46 +228,49 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideFontSize}
       >
-        <View style={styles.editWrapper}>
-          <View style={styles.editContainer}>
-            <Text style={styles.editHeader}>Font Size:</Text>
-            <View style={styles.editSize}>
-              { state.size === 'small' && (
-                <View style={styles.selected}>
-                  <Text style={styles.selectedText}>Small</Text>
-                </View>
-              )}
-              { state.size !== 'small' && (
-                <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('small')}>
-                  <Text style={styles.optionText}>Small</Text>
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
+              <Text style={styles.editHeader}>Font Size:</Text>
+              <View style={styles.editSize}>
+                { state.size === 'small' && (
+                  <View style={styles.selected}>
+                    <Text style={styles.selectedText}>Small</Text>
+                  </View>
+                )}
+                { state.size !== 'small' && (
+                  <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('small')}>
+                    <Text style={styles.optionText}>Small</Text>
+                  </TouchableOpacity>
+                )}
+                { state.size === 'medium' && (
+                  <View style={styles.selected}>
+                    <Text style={styles.selectedText}>Medium</Text>
+                  </View>
+                )}
+                { state.size !== 'medium' && (
+                  <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('medium')}>
+                    <Text style={styles.optionText}>Medium</Text>
+                  </TouchableOpacity>
+                )}
+                { state.size === 'large' && (
+                  <View style={styles.selected}>
+                    <Text style={styles.selectedText}>Large</Text>
+                  </View>
+                )}
+                { state.size !== 'large' && (
+                  <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('large')}>
+                    <Text style={styles.optionText}>Large</Text>
+                  </TouchableOpacity>
+                )}
+              </View>
+              <View style={styles.editControls}>
+                <View style={styles.selection} />
+                <TouchableOpacity style={styles.close} onPress={actions.hideFontSize}>
+                  <Text style={styles.closeText}>Close</Text>
                 </TouchableOpacity>
-              )}
-              { state.size === 'medium' && (
-                <View style={styles.selected}>
-                  <Text style={styles.selectedText}>Medium</Text>
-                </View>
-              )}
-              { state.size !== 'medium' && (
-                <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('medium')}>
-                  <Text style={styles.optionText}>Medium</Text>
-                </TouchableOpacity>
-              )}
-              { state.size === 'large' && (
-                <View style={styles.selected}>
-                  <Text style={styles.selectedText}>Large</Text>
-                </View>
-              )}
-              { state.size !== 'large' && (
-                <TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('large')}>
-                  <Text style={styles.optionText}>Large</Text>
-                </TouchableOpacity>
-              )}
-            </View>
-            <View style={styles.editControls}>
-              <View style={styles.selection} />
-              <TouchableOpacity style={styles.close} onPress={actions.hideFontSize}>
-                <Text>Close</Text>
-              </TouchableOpacity>
+              </View>
             </View>
           </View>
         </View>
@@ -278,25 +282,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideFontColor}
       >
-        <View style={styles.editWrapper}>
-          <View style={styles.editContainer}>
-            <Text style={styles.editHeader}>Font Color:</Text>
-            <View style={styles.editColor}>
-              <ColorPicker
-                color={state.color}
-                onColorChange={actions.setFontColor}
-                onColorChangeComplete={actions.setFontColor}
-                swatched={false}
-                style={{flex: 1, padding: 8}} />
-            </View>
-            <View style={styles.editControls}>
-              <View style={styles.selection}>
-                <Text>Set Color:</Text>
-                <View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} />
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
+              <Text style={styles.editHeader}>Font Color:</Text>
+              <View style={styles.editColor}>
+                <ColorPicker
+                  color={state.color}
+                  onColorChange={actions.setFontColor}
+                  onColorChangeComplete={actions.setFontColor}
+                  swatched={false}
+                  style={{flex: 1, padding: 8}} />
+              </View>
+              <View style={styles.editControls}>
+                <View style={styles.selection}>
+                  <Text style={styles.selectionText}>Set Color:</Text>
+                  <View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} />
+                </View>
+                <TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
+                  <Text style={styles.closeText}>Close</Text>
+                </TouchableOpacity>
               </View>
-              <TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
-                <Text>Close</Text>
-              </TouchableOpacity>
             </View>
           </View>
         </View>
diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js b/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
index 04d48336..e90c86b0 100644
--- a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
@@ -63,19 +63,15 @@ export const styles = StyleSheet.create({
   editHeader: {
     fontSize: 18,
     paddingBottom: 16,
+    color: Colors.text,
   },
   editSize: {
     width: '100%',
-    borderWidth: 1,
-    borderColor: Colors.lightgrey,
     borderRadius: 2,
   },
   editColor: {
     width: '100%',
     height: 300,
-    borderWidth: 1,
-    borderColor: Colors.lightgrey,
-    borderRadius: 2,
   },
   editControls: {
     display: 'flex',
@@ -120,7 +116,7 @@ export const styles = StyleSheet.create({
   },
   close: {
     borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.closeButton,
     borderRadius: 4,
     padding: 8,
     marginTop: 8,
@@ -128,12 +124,44 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
   },
+  closeText: {
+    color: Colors.closeButtonText,
+  },
   selection: {
     flexGrow: 1,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
   },
+  selectionText: {
+    color: Colors.text,
+  },
+  modalOverlay: { 
+    width: '100%',
+    height: '100%',
+  },
+  modalBase: {
+    position: 'absolute',
+    top: 0,
+    left: 0, 
+    width: '100%', 
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  modalContainer: {
+    backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 8,
+  },
+
 })
 
 
diff --git a/app/mobile/src/session/details/Details.styled.js b/app/mobile/src/session/details/Details.styled.js
index 454f07ed..74e0846b 100644
--- a/app/mobile/src/session/details/Details.styled.js
+++ b/app/mobile/src/session/details/Details.styled.js
@@ -201,6 +201,8 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     borderRadius: 8,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
     padding: 16,
   },
   close: {
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index 2221d689..06ff99b9 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -294,6 +294,8 @@ export const styles = StyleSheet.create({
   },
   modalContainer: {
     backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
     width: '80%',
     maxWidth: 400,
     display: 'flex',