diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js
index ac420d3a..6e1db1f4 100644
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@@ -119,6 +119,15 @@ const Strings = [
     messageContact: 'Message Contact',
     callContact: 'Call Contact',
     noContacts: 'No Contacts Found',
+
+    // channels list
+    profile: 'Profile',
+    contacts: 'Contacts',
+    topics: 'Topics',
+    subject: 'Subject (optional)',
+    create: 'Create',
+    sealed: 'Sealed',
+    newTopic: 'New Topic',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -235,6 +244,15 @@ const Strings = [
     messageContact: 'Envoyer un Message',
     callContact: 'Appeler le Contact',
     noContacts: 'Aucun Contact Trouvé',
+
+    // channels list
+    profile: 'Profil',
+    contacts: 'Contacts',
+    topics: 'Sujets',
+    subject: 'Titre (optionnel)',
+    create: 'Créer',
+    sealed: 'Protégé', 
+    newTopic: 'Nourveau Sujet',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -351,6 +369,15 @@ const Strings = [
     messageContact: 'Enviar Mensaje',
     callContact: 'Llamar Contacto',
     noContacts: 'No Encontraron Contactos',
+
+    // channels list
+    profile: 'Perfil',
+    contacts: 'Contactos',
+    topics: 'Temas',
+    subject: 'Título (opcional)',
+    create: 'Crear',
+    sealed: 'Protegida',
+    newTopic: 'Nuevo Tema',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -467,6 +494,15 @@ const Strings = [
     messageContact: 'Nachricht Senden',
     callContact: 'Kontakt Anrufen',
     noContacts: 'Keine Kontakte Gefunden',
+    
+    // channels list
+    profile: 'Profil',
+    contacts: 'Kontakte',
+    topics: 'Themen',
+    subject: 'Titel (optional)',
+    create: 'Erstellen',
+    sealed: 'Gesichert',
+    newTopic: 'Neues Thema',
   }
 ];
 
diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 0c161283..cc97df13 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -43,8 +43,8 @@ const RegistryDrawer = createDrawerNavigator();
 const Tab = createBottomTabNavigator();
 
 function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) {
-  const stackParams = { headerStyle: { backgroundColor: Colors.areaBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true };
+  const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
+  const screenParams = { headerShown: true, headerTintColor: Colors.primary };
 
   const conversation = useContext(ConversationContext);
   const [cardId, setCardId] = useState();
@@ -223,11 +223,11 @@ function HomeScreen({ navParams }) {
       <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
         <View edges={['left']} style={styles.options}>
           <TouchableOpacity style={styles.option} onPress={openProfile}>
-            <ProfileIcon color={Colors.text} size={20} />
+            <ProfileIcon color={Colors.text} size={24} />
             <Text style={styles.profileLabel}>Profile</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.option} onPress={openCards}>
-            <CardsIcon color={Colors.text} size={20} />
+            <CardsIcon color={Colors.text} size={24} />
             <Text style={styles.profileLabel}>Contacts</Text>
           </TouchableOpacity>
         </View>
diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js
index b83a5fa8..68167fe9 100644
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@@ -82,7 +82,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     width: '33%',
     maxWidth: 500,
-    borderRightWidth: 1,
+    backgroundColor: Colors.screenBase,
     borderColor: Colors.verticalDivider,
   },
   conversation: {
@@ -135,6 +135,7 @@ export const styles = StyleSheet.create({
   },
   profileLabel: {
     paddingLeft: 8,
+    color: Colors.text,
   },
   headertext: {
     fontSize: 18,
diff --git a/app/mobile/src/session/channels/Channels.jsx b/app/mobile/src/session/channels/Channels.jsx
index 821bcf49..3e8819cd 100644
--- a/app/mobile/src/session/channels/Channels.jsx
+++ b/app/mobile/src/session/channels/Channels.jsx
@@ -6,6 +6,8 @@ import { useChannels } from './useChannels.hook';
 import { Colors } from 'constants/Colors';
 import { ChannelItem } from './channelItem/ChannelItem';
 import { AddMember } from './addMember/AddMember';
+import { BlurView } from '@react-native-community/blur';
+import { InputField } from 'utils/InputField';
 
 export function Channels({ cardId, channelId, navigation, openConversation, dmChannel, shareChannel }) {
 
@@ -69,25 +71,25 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
           </View>
         </View>
       )}
-        { state.channels.length == 0 && (
-          <View style={styles.notfound}>
-            <Text style={styles.notfoundtext}>No Topics Found</Text>
-          </View>
-        )}
-        { state.channels.length != 0 && (
-          <FlatList 
-            style={styles.content}
-            data={state.channels}
-            initialNumToRender={25}
-            renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />}
-            keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
-          />
-        )}
+      { state.channels.length == 0 && (
+        <View style={styles.notfound}>
+          <Text style={styles.notfoundtext}>No Topics Found</Text>
+        </View>
+      )}
+      { state.channels.length != 0 && (
+        <FlatList 
+          style={styles.content}
+          data={state.channels}
+          initialNumToRender={25}
+          renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />}
+          keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+        />
+      )}
       { !navigation && (
         <View style={styles.columnbottom}>
           <TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}>
             <Ionicons name={'message1'} size={16} color={Colors.white} />
-            <Text style={styles.addtext}>New Topic</Text>
+            <Text style={styles.addtext}>{ state.strings.newTopic }</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -98,51 +100,61 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
           supportedOrientations={['portrait', 'landscape']}
           onRequestClose={actions.hideAdding}
         >
-        <KeyboardAvoidingView behavior="height" style={styles.addWrapper}>
-          <View style={styles.addContainer}>
-            <Text style={styles.addHeader}>New Topic:</Text>
-            <View style={styles.addField}>
-              <TextInput style={styles.input} value={state.addSubject} onChangeText={actions.setAddSubject}
-                  autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} />
-            </View>
-            <Text style={styles.label}>Members:</Text>
-            { state.contacts.length == 0 && (
-              <View style={styles.emptyMembers}>
-                <Text style={styles.empty}>No Connected Contacts</Text>
-              </View>
-            )}
-            { state.contacts.length > 0 && (
-              <FlatList style={styles.addMembers}
-                data={state.contacts}
-                renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
-                    setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
-                keyExtractor={item => item.cardId}
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+
+            <View style={styles.modalContainer}>
+              <Text style={styles.addHeader}>{ state.strings.newTopic }</Text>
+
+              <InputField
+                label={state.strings.subject}
+                value={state.addSubject}
+                autoCapitalize={'words'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setAddSubject}
               />
-            )}
-            <View style={styles.addControls}>
-              <View style={styles.sealed}>
-                { state.sealable && (
-                  <>
-                    <Switch style={styles.switch} trackColor={styles.track}
-                      value={state.sealed} onValueChange={actions.setSealed} />
-                    <Text>Sealed</Text>
-                  </>
-                )}
+
+              <Text style={styles.label}>Members:</Text>
+              { state.contacts.length == 0 && (
+                <View style={styles.emptyMembers}>
+                  <Text style={styles.empty}>No Connected Contacts</Text>
+                </View>
+              )}
+              { state.contacts.length > 0 && (
+                <FlatList style={styles.addMembers}
+                  data={state.contacts}
+                  renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
+                      setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
+                  keyExtractor={item => item.cardId}
+                />
+              )}
+              <View style={styles.addControls}>
+                <View style={styles.sealed}>
+                  { state.sealable && (
+                    <>
+                      <Switch style={styles.switch} trackColor={styles.track}
+                        value={state.sealed} onValueChange={actions.setSealed} />
+                      <Text style={styles.sealedText}>{ state.strings.sealed }</Text>
+                    </>
+                  )}
+                </View>
+                <TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
+                  <Text style={styles.cancelText}>{ state.strings.cancel }</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.save} onPress={addChannel}>
+                  { state.busy && (
+                    <ActivityIndicator color={Colors.text} />
+                  )}
+                  { !state.busy && (
+                    <Text style={styles.saveText}>{ state.strings.create }</Text>
+                  )}
+                </TouchableOpacity>
               </View>
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
-                <Text>Cancel</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={addChannel}>
-                { state.busy && (
-                  <ActivityIndicator color={Colors.white} />
-                )}
-                { !state.busy && (
-                  <Text style={styles.saveText}>Create</Text>
-                )}
-              </TouchableOpacity>
             </View>
-          </View>
-        </KeyboardAvoidingView>
+          </KeyboardAvoidingView>
+        </View>
       </Modal>
     </View>
   );
diff --git a/app/mobile/src/session/channels/Channels.styled.js b/app/mobile/src/session/channels/Channels.styled.js
index 9e3f7b44..b8030994 100644
--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    backgroundColor: Colors.screenBase,
   },
   title: {
     display: 'flex',
@@ -18,10 +19,11 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
     alignItems: 'center',
     flexGrow: 1,
     flexShrink: 1,
+    marginRight: 8,
     paddingTop: 4,
     paddingBottom: 4,
   },
@@ -30,7 +32,7 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     textAlign: 'center',
     padding: 4,
-    color: Colors.text,
+    color: Colors.inputText,
     fontSize: 14,
   },
   addField: {
@@ -113,15 +115,10 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(52, 52, 52, 0.8)'
   },
-  addContainer: {
-    backgroundColor: Colors.formBackground,
-    padding: 16,
-    width: '80%',
-    maxWidth: 400,
-  },
   addHeader: {
     fontSize: 18,
-    paddingBottom: 16,
+    paddingBottom: 8,
+    color: Colors.text,
   },
   addMembers: {
     width: '100%',
@@ -168,10 +165,16 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   saveText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
     paddingRight: 4,
     paddingLeft: 4,
   },
+  cancelText: {
+    color: Colors.cancelButtonText,
+  },
+  sealedText: {
+    color: Colors.text,
+  },
   addControls: {
     display: 'flex',
     flexDirection: 'row',
@@ -192,5 +195,51 @@ export const styles = StyleSheet.create({
   switch: {
     transform: [{ scaleX: .7 }, { scaleY: .7 }],
   },
+  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,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 16,
+  },
+  field: {
+    input: {
+      backgroundColor: Colors.inputBase,
+      borderRadius: 8,
+      minHeight: 48,
+      maxHeight: 128,
+      paddingLeft: 8,
+    },
+    inputText: {
+      color: Colors.inputText,
+    },
+    label: {
+      height: 16,
+      paddingLeft: 8,
+    },
+    labelText: {
+      color: Colors.inputPlaceholder,
+      fontSize: 12,
+    },
+    container: { 
+      width: '100%',
+    },
+  },
 });
 
diff --git a/app/mobile/src/session/channels/channelItem/ChannelItem.jsx b/app/mobile/src/session/channels/channelItem/ChannelItem.jsx
index 2e7271c4..2c66ae48 100644
--- a/app/mobile/src/session/channels/channelItem/ChannelItem.jsx
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.jsx
@@ -11,7 +11,7 @@ export function ChannelItem({ cardId, channelId, item, openConversation }) {
 
   return (
     <TouchableOpacity style={container} activeOpacity={1} onPress={() => openConversation(item.cardId, item.channelId, item.revision)}>
-      <Logo src={item.logo} width={32} height={32} radius={3} />
+      <Logo src={item.logo} width={48} height={48} radius={6} />
       <View style={styles.detail}>
         <View style={styles.subject}>
           { item.locked && !item.unlocked && (
diff --git a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
index 039aedc9..95864b80 100644
--- a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
@@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
@@ -17,13 +17,13 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
     paddingLeft: 16,
     paddingRight: 16,
-    backgroundColor: Colors.formFocus,
+    backgroundColor: Colors.areaBase,
   },
   detail: {
     paddingLeft: 12,
@@ -42,11 +42,11 @@ export const styles = StyleSheet.create({
   },
   subjectText: {
     color: Colors.text,
-    fontSize: 14,
+    fontSize: 16,
   },
   message: {
     color: Colors.disabled,
-    fontSize: 12,
+    fontSize: 14,
   },
   dot: {
     width: 8,
diff --git a/app/mobile/src/session/channels/useChannels.hook.js b/app/mobile/src/session/channels/useChannels.hook.js
index f900022c..20cb5d7c 100644
--- a/app/mobile/src/session/channels/useChannels.hook.js
+++ b/app/mobile/src/session/channels/useChannels.hook.js
@@ -7,9 +7,11 @@ import { ProfileContext } from 'context/ProfileContext';
 import { getChannelSeals, isUnsealed, getContentKey, encryptChannelSubject, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
 import { getCardByGuid } from 'context/cardUtil';
 import { getChannelSubjectLogo } from 'context/channelUtil';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useChannels() {
   const [state, setState] = useState({
+    strings: getLanguageStrings(),
     filter: null,
     channels: [],
     adding: false,