diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js
index 401176ff..f1181870 100644
--- a/app/mobile/src/session/conversation/Conversation.styled.js
+++ b/app/mobile/src/session/conversation/Conversation.styled.js
@@ -50,6 +50,7 @@ export const styles = StyleSheet.create({
   },
   topics: {
     paddingBottom: 32,
+    paddingTop: 8,
   },
   conversation: {
     flexShrink: 1,
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index 92390e70..d50a8cdd 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -54,82 +54,84 @@ export function TopicItem({ item, focused, focus, hosting }) {
   }
 
   return (
-    <TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
-      <View style={styles.header}>
-        { state.logo && (
-          <Image source={{ uri: state.logo }} style={{ width: 28, height: 28, borderRadius: 6 }} />
-        )}
-        { !state.logo && (
-          <Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} />
-        )}
-        <Text style={styles.name}>{ state.name }</Text>
-        <Text style={styles.timestamp}>{ state.timestamp }</Text>
-        { focused && (
-          <View style={styles.focused}>
-            { state.deletable && (
-              <TouchableOpacity style={styles.icon}>
-                <MatIcons name="delete-outline" size={20} color={Colors.white} />
-              </TouchableOpacity>
+    <View style={styles.wrapper}>
+      <TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
+        <View style={styles.header}>
+          { state.logo && (
+            <Image source={{ uri: state.logo }} style={{ width: 28, height: 28, borderRadius: 6 }} />
+          )}
+          { !state.logo && (
+            <Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} />
+          )}
+          <Text style={styles.name}>{ state.name }</Text>
+          <Text style={styles.timestamp}>{ state.timestamp }</Text>
+        </View>
+        { state.status === 'confirmed' && (
+          <>
+            { state.transform === 'complete' && state.assets && (
+              <FlatList contentContainerStyle={styles.carousel}
+                 data={state.assets}
+                 horizontal={true}
+                 showsHorizontalScrollIndicator={false}
+                 renderItem={renderThumb}
+               />
             )}
-            { state.editable && (
-              <TouchableOpacity style={styles.icon}>
-                <MatIcons name="pencil-outline" size={20} color={Colors.white} />
-              </TouchableOpacity>
+            { state.transform === 'incomplete' && (
+              <View style={styles.status}>
+                <MatIcons name="cloud-refresh" size={32} color={Colors.background} />
+              </View>
             )}
-            <TouchableOpacity style={styles.icon}>
-              <MatIcons name="block-helper" size={18} color={Colors.white} />
-            </TouchableOpacity>
+            { state.transform === 'error' && (
+              <View style={styles.status}>
+                <AntIcons name="weather-cloudy-alert" size={32} color={Colors.alert} />
+              </View>
+            )}
+            { state.message && (
+              <Text style={{ ...styles.message, fontSize: state.fontSize }}>{ state.message }</Text>
+            )}
+          </>
+        )}
+        { state.status !== 'confirmed' && (
+          <View style={styles.status}>
+            <MatIcons name="cloud-refresh" size={32} color={Colors.divider} />
           </View>
         )}
-      </View>
-      { state.status === 'confirmed' && (
-        <>
-          { state.transform === 'complete' && state.assets && (
-            <FlatList contentContainerStyle={styles.carousel}
-               data={state.assets}
-               horizontal={true}
-               showsHorizontalScrollIndicator={false}
-               renderItem={renderThumb}
-             />
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={state.carousel}
+          supportedOrientations={['portrait', 'landscape']}
+          onRequestClose={actions.hideCarousel}
+        >
+          <View style={styles.modal}>
+            <Carousel
+              data={state.assets}
+              firstItem={state.carouselIndex}
+              renderItem={renderAsset}
+              sliderWidth={state.width}
+              itemWidth={state.width}
+            />
+          </View>
+        </Modal> 
+      </TouchableOpacity>
+      { focused && (
+        <View style={styles.focused}>
+          { state.deletable && (
+            <TouchableOpacity style={styles.icon}>
+              <MatIcons name="delete-outline" size={20} color={Colors.white} />
+            </TouchableOpacity>
           )}
-          { state.transform === 'incomplete' && (
-            <View style={styles.status}>
-              <MatIcons name="cloud-refresh" size={32} color={Colors.background} />
-            </View>
+          { state.editable && (
+            <TouchableOpacity style={styles.icon}>
+              <MatIcons name="pencil-outline" size={20} color={Colors.white} />
+            </TouchableOpacity>
           )}
-          { state.transform === 'error' && (
-            <View style={styles.status}>
-              <AntIcons name="weather-cloudy-alert" size={32} color={Colors.alert} />
-            </View>
-          )}
-          { state.message && (
-            <Text style={{ paddingLeft: 52, fontSize: state.fontSize, color: state.fontColor }}>{ state.message }</Text>
-          )}
-        </>
-      )}
-      { state.status !== 'confirmed' && (
-        <View style={styles.status}>
-          <MatIcons name="cloud-refresh" size={32} color={Colors.divider} />
+          <TouchableOpacity style={styles.icon}>
+            <MatIcons name="block-helper" size={18} color={Colors.white} />
+          </TouchableOpacity>
         </View>
       )}
-      <Modal
-        animationType="fade"
-        transparent={true}
-        visible={state.carousel}
-        supportedOrientations={['portrait', 'landscape']}
-        onRequestClose={actions.hideCarousel}
-      >
-        <View style={styles.modal}>
-          <Carousel
-            data={state.assets}
-            firstItem={state.carouselIndex}
-            renderItem={renderAsset}
-            sliderWidth={state.width}
-            itemWidth={state.width}
-          />
-        </View>
-      </Modal> 
-    </TouchableOpacity>
+    </View>
   );
 }
 
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
index d2990a8d..1ce0d1e7 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
@@ -2,12 +2,13 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  wrapper: {
+    paddingTop: 8,
+  },
   item: {
     borderTopWidth: 1,
     borderColor: Colors.white,
     paddingTop: 8,
-    paddingBottom: 8,
-    paddingRight: 16,
   },
   header: {
     display: 'flex',
@@ -45,8 +46,8 @@ export const styles = StyleSheet.create({
   },
   focused: {
     position: 'absolute',
-    top: -16,
-    right: 0,
+    top: 0,
+    right: 16,
     display: 'flex',
     flexDirection: 'row',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -57,8 +58,13 @@ export const styles = StyleSheet.create({
     paddingRight: 8,
   },
   icon: {
-    paddingLeft: 4,
-    paddingRight: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  message: {
+    paddingRight: 16,
+    paddingLeft: 52,
+    color: Colors.fontColor,
   },
 })