diff --git a/app/CharMenu.tsx b/app/CharMenu.tsx
index 81c8e6c..4a8eeb3 100644
--- a/app/CharMenu.tsx
+++ b/app/CharMenu.tsx
@@ -198,49 +198,45 @@ const CharMenu = () => {
                                 fade={0}
                                 fduration={500}>
                                 <TouchableOpacity
-                                    style={{
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                    }}
+                                    style={styles.longButton}
                                     disabled={nowLoading}
                                     onPress={() => setCurrentCharacter(character.id)}>
-                                    <View style={styles.longButton}>
-                                        <Image
-                                            source={{
-                                                uri: Characters.getImageDir(character.image_id),
-                                            }}
-                                            style={styles.avatar}
-                                        />
-                                        <View style={{ flex: 1 }}>
-                                            <Text style={styles.nametag}>{character.name}</Text>
-                                            <View
-                                                style={{
-                                                    paddingLeft: 16,
-                                                    flex: 1,
-                                                    flexDirection: 'row',
-                                                    flexWrap: 'wrap',
-                                                }}>
-                                                {character.tags.map((item, index) => (
-                                                    <Text
-                                                        style={{
-                                                            color: Style.getColor('primary-text2'),
-                                                            fontSize: 12,
-                                                            backgroundColor:
-                                                                Style.getColor('primary-surface4'),
-                                                            marginHorizontal: 2,
-                                                            marginVertical: 2,
-                                                            paddingHorizontal: 4,
-                                                            paddingVertical: 2,
-                                                            borderRadius: 4,
-                                                        }}
-                                                        key={index}>
-                                                        {item}
-                                                    </Text>
-                                                ))}
-                                            </View>
+                                    <Image
+                                        source={{
+                                            uri: Characters.getImageDir(character.image_id),
+                                        }}
+                                        style={styles.avatar}
+                                    />
+                                    <View>
+                                        <Text style={styles.nametag}>{character.name}</Text>
+                                        <View
+                                            style={{
+                                                paddingLeft: 16,
+                                                flex: 1,
+                                                flexDirection: 'row',
+                                                flexWrap: 'wrap',
+                                            }}>
+                                            {character.tags.map((item, index) => (
+                                                <Text
+                                                    style={{
+                                                        color: Style.getColor('primary-text2'),
+                                                        fontSize: 12,
+                                                        backgroundColor:
+                                                            Style.getColor('primary-surface4'),
+                                                        paddingHorizontal: 4,
+                                                        paddingVertical: 2,
+                                                        borderRadius: 4,
+                                                        rowGap: 2,
+                                                        columnGap: 4,
+                                                    }}
+                                                    key={index}>
+                                                    {item}
+                                                </Text>
+                                            ))}
                                         </View>
                                     </View>
+                                </TouchableOpacity>
+                                <View>
                                     {nowLoading && character.id === loadedCharId ? (
                                         <ActivityIndicator
                                             color={Style.getColor('primary-text2')}
@@ -249,6 +245,7 @@ const CharMenu = () => {
                                         />
                                     ) : (
                                         <TouchableOpacity
+                                            style={styles.secondaryButton}
                                             onPress={async () => {
                                                 setCurrentCharacter(character.id, true)
                                             }}
@@ -260,7 +257,7 @@ const CharMenu = () => {
                                             />
                                         </TouchableOpacity>
                                     )}
-                                </TouchableOpacity>
+                                </View>
                             </AnimatedView>
                         ))}
                     </ScrollView>
@@ -282,6 +279,7 @@ const styles = StyleSheet.create({
     longButton: {
         flexDirection: 'row',
         flex: 1,
+        padding: 8,
     },
 
     longButtonContainer: {
@@ -293,8 +291,6 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 8,
-        paddingVertical: 8,
-        padding: 8,
         flex: 1,
     },
 
@@ -312,6 +308,11 @@ const styles = StyleSheet.create({
         flex: 1,
     },
 
+    secondaryButton: {
+        paddingHorizontal: 8,
+        paddingVertical: 20,
+    },
+
     avatar: {
         width: 48,
         height: 48,
diff --git a/app/ChatSelector.tsx b/app/ChatSelector.tsx
index e418aeb..6bcf50a 100644
--- a/app/ChatSelector.tsx
+++ b/app/ChatSelector.tsx
@@ -116,39 +116,45 @@ const ChatSelector = () => {
                     }}
                 />
                 {chats.reverse().map((item, index) => (
-                    <TouchableOpacity
+                    <View
                         key={index}
-                        onPress={() => handleSelectChat(item.id)}
                         style={
                             item.id === currentChatId
                                 ? styles.longButtonSelectedContainer
                                 : styles.longButtonContainer
                         }>
-                        <Image
-                            source={{ uri: Characters.getImageDir(imageId ?? -1) }}
-                            style={styles.avatar}
-                        />
-                        <Text style={styles.chatname}>{item.createDate.toLocaleTimeString()}</Text>
-
                         <TouchableOpacity
-                            style={styles.button}
-                            onPress={() => handleExportChat(item.id)}>
-                            <FontAwesome
-                                name="download"
-                                size={32}
-                                color={Style.getColor('primary-text1')}
+                            style={styles.selectorButton}
+                            onPress={() => handleSelectChat(item.id)}>
+                            <Image
+                                source={{ uri: Characters.getImageDir(imageId ?? -1) }}
+                                style={styles.avatar}
                             />
+                            <Text style={styles.chatname}>
+                                {item.createDate.toLocaleTimeString()}
+                            </Text>
                         </TouchableOpacity>
-                        <TouchableOpacity
-                            style={styles.button}
-                            onPress={() => handleDeleteChat(item.id)}>
-                            <FontAwesome
-                                name="trash"
-                                size={32}
-                                color={Style.getColor('primary-text1')}
-                            />
-                        </TouchableOpacity>
-                    </TouchableOpacity>
+                        <View style={{ flexDirection: 'row' }}>
+                            <TouchableOpacity
+                                style={styles.button}
+                                onPress={() => handleExportChat(item.id)}>
+                                <FontAwesome
+                                    name="download"
+                                    size={32}
+                                    color={Style.getColor('primary-text1')}
+                                />
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={styles.button}
+                                onPress={() => handleDeleteChat(item.id)}>
+                                <FontAwesome
+                                    name="trash"
+                                    size={32}
+                                    color={Style.getColor('primary-text1')}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    </View>
                 ))}
             </ScrollView>
         </AnimatedView>
@@ -166,6 +172,11 @@ const styles = StyleSheet.create({
     chatname: {
         color: Style.getColor('primary-text2'),
         marginLeft: 8,
+    },
+
+    selectorButton: {
+        flexDirection: 'row',
+        padding: 8,
         flex: 1,
     },
 
@@ -178,8 +189,6 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 8,
-        paddingVertical: 8,
-        padding: 8,
         flex: 1,
     },
 
@@ -192,8 +201,6 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 8,
-        paddingVertical: 8,
-        padding: 8,
         flex: 1,
     },
 
@@ -206,7 +213,7 @@ const styles = StyleSheet.create({
     },
 
     button: {
-        marginRight: 8,
-        marginLeft: 16,
+        paddingHorizontal: 12,
+        paddingVertical: 20,
     },
 })
diff --git a/app/Instruct.tsx b/app/Instruct.tsx
index f7019e0..7b972d1 100644
--- a/app/Instruct.tsx
+++ b/app/Instruct.tsx
@@ -398,7 +398,8 @@ const Instruct = () => {
                                 step={1}
                                 showInput={false}
                             />
-                            <Text style={{ color: Style.getColor('primary-text2') }}>
+                            <Text
+                                style={{ color: Style.getColor('primary-text2'), marginLeft: 16 }}>
                                 Mode: {currentInstruct.format_type} -
                                 {' ' +
                                     [
diff --git a/app/UserSelector.tsx b/app/UserSelector.tsx
index e1a4387..e53b1dd 100644
--- a/app/UserSelector.tsx
+++ b/app/UserSelector.tsx
@@ -102,33 +102,31 @@ const UserSelector = () => {
                                 />
 
                                 <Text style={styles.username}>{info.name}</Text>
-
-                                <TouchableOpacity
-                                    onPress={() => {
-                                        Alert.alert(
-                                            `Delete Persona`,
-                                            `Are you sure you want to delete '${info.name}'?`,
-                                            [
-                                                { text: `Cancel`, style: `cancel` },
-                                                {
-                                                    text: `Confirm`,
-                                                    style: `destructive`,
-                                                    onPress: async () => {
-                                                        await Characters.db.mutate.deleteCard(
-                                                            info.id
-                                                        )
-                                                        loadUserList()
-                                                    },
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={styles.secondaryButton}
+                                onPress={() => {
+                                    Alert.alert(
+                                        `Delete Persona`,
+                                        `Are you sure you want to delete '${info.name}'?`,
+                                        [
+                                            { text: `Cancel`, style: `cancel` },
+                                            {
+                                                text: `Confirm`,
+                                                style: `destructive`,
+                                                onPress: async () => {
+                                                    await Characters.db.mutate.deleteCard(info.id)
+                                                    loadUserList()
                                                 },
-                                            ]
-                                        )
-                                    }}>
-                                    <FontAwesome
-                                        size={28}
-                                        name="trash"
-                                        color={Style.getColor('primary-text1')}
-                                    />
-                                </TouchableOpacity>
+                                            },
+                                        ]
+                                    )
+                                }}>
+                                <FontAwesome
+                                    size={28}
+                                    name="trash"
+                                    color={Style.getColor('primary-text1')}
+                                />
                             </TouchableOpacity>
                         </View>
                     ))}
@@ -193,14 +191,18 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 8,
-        paddingVertical: 8,
-        padding: 8,
         flex: 1,
     },
 
+    secondaryButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 22,
+    },
+
     useritembutton: {
         flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
+        padding: 8,
     },
 })
diff --git a/components/ChatMenu/Recents.tsx b/components/ChatMenu/Recents.tsx
index cd4445a..a6f4bd8 100644
--- a/components/ChatMenu/Recents.tsx
+++ b/components/ChatMenu/Recents.tsx
@@ -61,7 +61,9 @@ const Recents = () => {
                     )}
                     {showRecents &&
                         [...recentMessages].reverse()?.map((item, index) => (
-                            <View key={index} style={{ flexDirection: 'row' }}>
+                            <View
+                                key={index}
+                                style={{ flexDirection: 'row', alignItems: 'center' }}>
                                 <TouchableOpacity
                                     style={styles.longButton}
                                     onPress={async () => {
@@ -73,14 +75,15 @@ const Recents = () => {
                                             {item.lastModified}
                                         </Text>
                                     </View>
-                                    <TouchableOpacity
-                                        onPress={() => RecentMessages.deleteEntry(item.chatId)}>
-                                        <FontAwesome
-                                            color={Style.getColor('primary-text2')}
-                                            name="trash"
-                                            size={28}
-                                        />
-                                    </TouchableOpacity>
+                                </TouchableOpacity>
+                                <TouchableOpacity
+                                    style={styles.secondaryButton}
+                                    onPress={() => RecentMessages.deleteEntry(item.chatId)}>
+                                    <FontAwesome
+                                        color={Style.getColor('primary-text2')}
+                                        name="trash"
+                                        size={28}
+                                    />
                                 </TouchableOpacity>
                             </View>
                         ))}
@@ -111,7 +114,6 @@ const Recents = () => {
 const styles = StyleSheet.create({
     welcometext: {
         justifyContent: 'center',
-
         fontSize: 20,
         color: Style.getColor('primary-text1'),
     },
@@ -148,13 +150,15 @@ const styles = StyleSheet.create({
         marginLeft: 12,
     },
 
+    secondaryButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 18,
+    },
+
     longButton: {
         alignItems: 'center',
         flex: 1,
-        backgroundColor: Style.getColor('primary-surface3'),
         flexDirection: 'row',
-        paddingHorizontal: 12,
-        borderRadius: 8,
         marginVertical: 4,
         justifyContent: 'space-between',
         shadowColor: Style.getColor('primary-shadow'),