diff --git a/app/components/channel_item/custom_status/custom_status.tsx b/app/components/channel_item/custom_status/custom_status.tsx
index fdb8c33fae..56166f2611 100644
--- a/app/components/channel_item/custom_status/custom_status.tsx
+++ b/app/components/channel_item/custom_status/custom_status.tsx
@@ -17,7 +17,7 @@ const style = StyleSheet.create({
     customStatusEmoji: {
         color: '#000',
         marginHorizontal: 5,
-        top: -4,
+        top: 3,
     },
     info: {
         marginHorizontal: -15,
diff --git a/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap b/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
index 3eb0152a65..f544ea8bf2 100644
--- a/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
+++ b/app/components/custom_status/__snapshots__/custom_status_emoji.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/custom_status/custom_status_emoji should match snapshot 1`] = `
-<Text
+<View
   testID="custom_status_emoji.calendar"
 >
   <Text
@@ -17,11 +17,11 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`]
   >
     📆
   </Text>
-</Text>
+</View>
 `;
 
 exports[`components/custom_status/custom_status_emoji should match snapshot with props 1`] = `
-<Text
+<View
   testID="custom_status_emoji.calendar"
 >
   <Text
@@ -37,5 +37,5 @@ exports[`components/custom_status/custom_status_emoji should match snapshot with
   >
     📆
   </Text>
-</Text>
+</View>
 `;
diff --git a/app/components/custom_status/custom_status_emoji.tsx b/app/components/custom_status/custom_status_emoji.tsx
index ca8daaf7aa..5fffcdfe62 100644
--- a/app/components/custom_status/custom_status_emoji.tsx
+++ b/app/components/custom_status/custom_status_emoji.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {StyleProp, Text, TextStyle} from 'react-native';
+import {StyleProp, TextStyle, View} from 'react-native';
 
 import Emoji from '@components/emoji';
 
@@ -16,7 +16,7 @@ interface ComponentProps {
 const CustomStatusEmoji = ({customStatus, emojiSize = 16, style, testID}: ComponentProps) => {
     const testIdPrefix = testID ? `${testID}.` : '';
     return (
-        <Text
+        <View
             style={style}
             testID={`${testIdPrefix}custom_status_emoji.${customStatus.emoji}`}
         >
@@ -24,7 +24,7 @@ const CustomStatusEmoji = ({customStatus, emojiSize = 16, style, testID}: Compon
                 size={emojiSize}
                 emojiName={customStatus.emoji!}
             />
-        </Text>
+        </View>
     );
 };
 
diff --git a/app/components/post_list/post/header/header.tsx b/app/components/post_list/post/header/header.tsx
index 1e8360b953..b4dd840fd1 100644
--- a/app/components/post_list/post/header/header.tsx
+++ b/app/components/post_list/post/header/header.tsx
@@ -65,7 +65,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         customStatusEmoji: {
             color: theme.centerChannelColor,
             marginRight: 4,
-            marginTop: 1,
+            marginTop: 2,
         },
     };
 });
diff --git a/app/screens/custom_status/components/custom_status_emoji.tsx b/app/screens/custom_status/components/custom_status_emoji.tsx
index 5e63ee5fdb..6ead18ec45 100644
--- a/app/screens/custom_status/components/custom_status_emoji.tsx
+++ b/app/screens/custom_status/components/custom_status_emoji.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+import {TouchableOpacity} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import Emoji from '@components/emoji';
@@ -18,9 +18,7 @@ type Props = {
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         iconContainer: {
-            position: 'absolute',
-            left: 14,
-            top: 10,
+            marginLeft: 14,
         },
         icon: {
             color: changeOpacity(theme.centerChannelColor, 0.64),
@@ -40,12 +38,10 @@ const CustomStatusEmoji = ({emoji, isStatusSet, onPress, theme}: Props) => {
             style={style.iconContainer}
         >
             {isStatusSet ? (
-                <Text style={style.emoji}>
-                    <Emoji
-                        emojiName={emoji || 'speech_balloon'}
-                        size={20}
-                    />
-                </Text>
+                <Emoji
+                    emojiName={emoji || 'speech_balloon'}
+                    size={20}
+                />
             ) : (
                 <CompassIcon
                     name='emoticon-happy-outline'
diff --git a/app/screens/custom_status/components/custom_status_input.tsx b/app/screens/custom_status/components/custom_status_input.tsx
index c25d7b2528..084bcad075 100644
--- a/app/screens/custom_status/components/custom_status_input.tsx
+++ b/app/screens/custom_status/components/custom_status_input.tsx
@@ -37,16 +37,18 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         input: {
             alignSelf: 'stretch',
             color: theme.centerChannelColor,
-            width: '100%',
+            flex: 1,
             fontSize: 17,
-            paddingHorizontal: 52,
+            paddingHorizontal: 16,
             textAlignVertical: 'center',
             height: '100%',
         },
         inputContainer: {
             justifyContent: 'center',
+            alignItems: 'center',
             height: 48,
             backgroundColor: theme.centerChannelBg,
+            flexDirection: 'row',
         },
     };
 });
@@ -57,46 +59,46 @@ const CustomStatusInput = ({emoji, isStatusSet, onChangeText, onClearHandle, onO
     const placeholder = intl.formatMessage({id: 'custom_status.set_status', defaultMessage: 'Set a Status'});
 
     return (
-        <View style={style.inputContainer}>
-            <TextInput
-                testID='custom_status.input'
-                autoCapitalize='none'
-                autoCorrect={false}
-                blurOnSubmit={false}
-                disableFullscreenUI={true}
-                keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
-                keyboardType='default'
-                maxLength={CUSTOM_STATUS_TEXT_CHARACTER_LIMIT}
-                onChangeText={onChangeText}
-                placeholder={placeholder}
-                placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
-                returnKeyType='go'
-                style={style.input}
-                secureTextEntry={false}
-                underlineColorAndroid='transparent'
-                value={text}
-            />
-            {isStatusSet && (
-                <View style={style.divider}/>
-            )}
-            <CustomStatusEmoji
-                emoji={emoji}
-                isStatusSet={isStatusSet}
-                onPress={onOpenEmojiPicker}
-                theme={theme}
-            />
-            {isStatusSet ? (
-                <View
-                    style={style.clearButton}
-                    testID='custom_status.input.clear.button'
-                >
-                    <ClearButton
-                        handlePress={onClearHandle}
-                        theme={theme}
-                    />
-                </View>
-            ) : null}
-        </View>
+        <>
+            <View style={style.inputContainer}>
+                <CustomStatusEmoji
+                    emoji={emoji}
+                    isStatusSet={isStatusSet}
+                    onPress={onOpenEmojiPicker}
+                    theme={theme}
+                />
+                <TextInput
+                    testID='custom_status.input'
+                    autoCapitalize='none'
+                    autoCorrect={false}
+                    blurOnSubmit={false}
+                    disableFullscreenUI={true}
+                    keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
+                    keyboardType='default'
+                    maxLength={CUSTOM_STATUS_TEXT_CHARACTER_LIMIT}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
+                    returnKeyType='go'
+                    style={style.input}
+                    secureTextEntry={false}
+                    underlineColorAndroid='transparent'
+                    value={text}
+                />
+                {isStatusSet ? (
+                    <View
+                        style={style.clearButton}
+                        testID='custom_status.input.clear.button'
+                    >
+                        <ClearButton
+                            handlePress={onClearHandle}
+                            theme={theme}
+                        />
+                    </View>
+                ) : null}
+            </View>
+            {isStatusSet && <View style={style.divider}/>}
+        </>
     );
 };
 
diff --git a/app/screens/custom_status/components/custom_status_suggestion.tsx b/app/screens/custom_status/components/custom_status_suggestion.tsx
index 48942c4252..a6a8abbcc0 100644
--- a/app/screens/custom_status/components/custom_status_suggestion.tsx
+++ b/app/screens/custom_status/components/custom_status_suggestion.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {Text, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 
 import ClearButton from '@components/custom_status/clear_button';
 import CustomStatusText from '@components/custom_status/custom_status_text';
@@ -30,14 +30,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             backgroundColor: theme.centerChannelBg,
             flexDirection: 'row',
             minHeight: 50,
+            alignItems: 'center',
         },
         iconContainer: {
-            width: 45,
-            height: 46,
-            left: 14,
-            top: 12,
-            marginRight: 6,
-            color: theme.centerChannelColor,
+            marginLeft: 14,
+            marginRight: 10,
         },
         wrapper: {
             flex: 1,
@@ -49,11 +46,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             width: '70%',
             flex: 1,
         },
-        clearButtonContainer: {
-            position: 'absolute',
-            top: 4,
-            right: 13,
-        },
         divider: {
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
             height: 1,
@@ -87,7 +79,7 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
 
     const clearButton =
         handleClear && expires_at ? (
-            <View style={style.clearButtonContainer}>
+            <View>
                 <ClearButton
                     handlePress={handleSuggestionClear}
                     theme={theme}
@@ -105,12 +97,12 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
         >
             <View style={style.container}>
                 {emoji && (
-                    <Text style={style.iconContainer}>
+                    <View style={style.iconContainer}>
                         <Emoji
                             emojiName={emoji}
                             size={20}
                         />
-                    </Text>
+                    </View>
                 )}
                 <View style={style.wrapper}>
                     <View style={style.textContainer}>
@@ -133,9 +125,9 @@ const CustomStatusSuggestion = ({duration, emoji, expires_at, handleClear, handl
                             </View>
                         )}
                     </View>
-                    {clearButton}
                     {separator && <View style={style.divider}/>}
                 </View>
+                {clearButton}
             </View>
         </TouchableOpacity>
     );