diff --git a/app/CharacterEditor.tsx b/app/CharacterEditor.tsx
index 02ff51f..00a2393 100644
--- a/app/CharacterEditor.tsx
+++ b/app/CharacterEditor.tsx
@@ -1,20 +1,27 @@
+import ThemedButton from '@components/buttons/ThemedButton'
+import ThemedTextInput from '@components/input/ThemedTextInput'
 import Alert from '@components/views/Alert'
 import Avatar from '@components/views/Avatar'
 import FadeDownView from '@components/views/FadeDownView'
+import HeaderTitle from '@components/views/HeaderTitle'
 import PopupMenu from '@components/views/PopupMenu'
 import { AntDesign } from '@expo/vector-icons'
 import { Tokenizer } from '@lib/engine/Tokenizer'
 import { useViewerState } from '@lib/state/AvatarViewer'
 import { CharacterCardData } from '@lib/state/Characters'
-import { Characters, Chats, Logger, Style } from '@lib/utils/Global'
+import { Theme } from '@lib/theme/ThemeManager'
+import { Characters, Chats, Logger } from '@lib/utils/Global'
+import { usePreventRemove } from '@react-navigation/core'
 import AvatarViewer from '@screens/ChatMenu/ChatWindow/AvatarViewer'
 import * as DocumentPicker from 'expo-document-picker'
-import { Stack, useNavigation, useRouter } from 'expo-router'
-import { useEffect, useRef, useState } from 'react'
-import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { useNavigation, useRouter } from 'expo-router'
+import { useEffect, useState } from 'react'
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { useShallow } from 'zustand/react/shallow'
 
 const ChracterEditor = () => {
+    const styles = useStyles()
+    const { color, spacing } = Theme.useTheme()
     const router = useRouter()
     const navigation = useNavigation()
     const { currentCard, setCurrentCard, charId, charName, unloadCharacter } =
@@ -30,16 +37,18 @@ const ChracterEditor = () => {
 
     const getTokenCount = Tokenizer.useTokenizer((state) => state.getTokenCount)
     const [characterCard, setCharacterCard] = useState<CharacterCardData | undefined>(currentCard)
-
     const { chat, unloadChat } = Chats.useChat()
 
     const setShowViewer = useViewerState((state) => state.setShow)
-
     const [edited, setEdited] = useState(false)
-
     const [altSwipeIndex, setAltSwipeIndex] = useState(0)
 
-    const editedBackAction = (exitCallback: () => void) => {
+    const setCharacterCardEdited = (card: CharacterCardData) => {
+        if (!edited) setEdited(true)
+        setCharacterCard(card)
+    }
+
+    usePreventRemove(edited, ({ data }) => {
         Alert.alert({
             title: `Unsaved Changes`,
             description: `You have unsaved changes, leaving now will discard your progress.`,
@@ -48,63 +57,31 @@ const ChracterEditor = () => {
                 {
                     label: 'Save',
                     onPress: async () => {
-                        await savecard()
-                        if (!chat) unloadCharacter()
-                        exitCallback()
+                        await handleSaveCard()
+                        navigation.dispatch(data.action)
                     },
                 },
                 {
                     label: 'Discard Changes',
                     onPress: () => {
-                        if (!chat) unloadCharacter()
-                        exitCallback()
+                        navigation.dispatch(data.action)
                     },
                     type: 'warning',
                 },
             ],
         })
-        return true
-    }
-
-    const defaultListener = () => {
-        const removeListener = navigation.addListener('beforeRemove', (e) => {
-            if (!chat) unloadCharacter()
-            navigation.dispatch(e.data.action)
-        })
-        return removeListener
-    }
-
-    const removeListener = useRef(defaultListener())
-    const firstRender = useRef(true)
+    })
 
-    useEffect(() => {
-        if (firstRender.current) {
-            firstRender.current = false
-            return
-        }
-        setEdited(true)
-        removeListener.current()
-        removeListener.current = navigation.addListener('beforeRemove', (e) => {
-            e.preventDefault()
-            editedBackAction(() => {
-                if (!chat) unloadCharacter()
-                navigation.dispatch(e.data.action)
-            })
-        })
-    }, [characterCard])
-
-    const savecard = async () => {
+    const handleSaveCard = async () => {
         if (characterCard && charId)
             return Characters.db.mutate.updateCard(characterCard, charId).then(() => {
                 setCurrentCard(charId)
                 setEdited(() => false)
-                removeListener.current()
-                removeListener.current = defaultListener()
                 Logger.log('Card Saved!', true)
             })
     }
 
-    const deleteCard = () => {
+    const handleDeleteCard = () => {
         Alert.alert({
             title: `Delete Character`,
             description: `Are you sure you want to delete '${charName}'? This cannot be undone.`,
@@ -124,6 +101,12 @@ const ChracterEditor = () => {
         })
     }
 
+    useEffect(() => {
+        return () => {
+            if (!chat) unloadCharacter()
+        }
+    }, [])
+
     const handleDeleteImage = () => {
         Alert.alert({
             title: `Delete Image`,
@@ -162,7 +145,7 @@ const ChracterEditor = () => {
             ...(characterCard?.alternate_greetings ?? []),
             { id: id, greeting: '', character_id: charId },
         ]
-        setCharacterCard({ ...characterCard, alternate_greetings: greetings })
+        setCharacterCardEdited({ ...characterCard, alternate_greetings: greetings })
         if (characterCard.alternate_greetings.length !== 0) {
             setAltSwipeIndex(altSwipeIndex + 1)
         }
@@ -180,7 +163,7 @@ const ChracterEditor = () => {
             (item) => item.id !== id
         )
         setAltSwipeIndex(0)
-        setCharacterCard({ ...characterCard, alternate_greetings: greetings })
+        setCharacterCardEdited({ ...characterCard, alternate_greetings: greetings })
     }
 
     const handleDeleteAltMessage = async () => {
@@ -202,14 +185,12 @@ const ChracterEditor = () => {
 
     return (
         <FadeDownView style={styles.mainContainer}>
-            <Stack.Screen
-                options={{
-                    title: 'Edit Character',
-                }}
-            />
+            <HeaderTitle title="Edit Character" />
             <AvatarViewer editorButton={false} />
             {characterCard && (
-                <ScrollView showsVerticalScrollIndicator={false}>
+                <ScrollView
+                    showsVerticalScrollIndicator={false}
+                    contentContainerStyle={{ rowGap: 16 }}>
                     <View style={styles.characterHeader}>
                         <PopupMenu
                             placement="right"
@@ -246,40 +227,33 @@ const ChracterEditor = () => {
                             />
                             <AntDesign
                                 name="edit"
-                                color={Style.getColor('primary-text1')}
+                                color={color.text._100}
                                 style={styles.editHover}
                             />
                         </PopupMenu>
 
                         <View style={styles.characterHeaderInfo}>
                             <View style={styles.buttonContainer}>
-                                <TouchableOpacity
-                                    style={styles.buttonDestructive}
-                                    onPress={deleteCard}>
-                                    <AntDesign
-                                        name="delete"
-                                        size={20}
-                                        color={Style.getColor('primary-text1')}
-                                    />
-                                    <Text style={styles.buttonText}>Delete Character</Text>
-                                </TouchableOpacity>
+                                <ThemedButton
+                                    iconName="delete"
+                                    iconSize={20}
+                                    variant="critical"
+                                    label="Delete"
+                                    onPress={handleDeleteCard}
+                                />
+
                                 {edited && (
-                                    <TouchableOpacity
-                                        style={styles.foregroundButton}
-                                        onPress={savecard}>
-                                        <AntDesign
-                                            name="save"
-                                            size={20}
-                                            color={Style.getColor('primary-text1')}
-                                        />
-                                        <Text style={styles.buttonText}>Save</Text>
-                                    </TouchableOpacity>
+                                    <ThemedButton
+                                        iconName="save"
+                                        iconSize={20}
+                                        label="Save"
+                                        onPress={handleSaveCard}
+                                    />
                                 )}
                             </View>
-                            <TextInput
-                                style={styles.input}
+                            <ThemedTextInput
                                 onChangeText={(mes) => {
-                                    setCharacterCard({
+                                    setCharacterCardEdited({
                                         ...characterCard,
                                         name: mes,
                                     })
@@ -289,17 +263,13 @@ const ChracterEditor = () => {
                         </View>
                     </View>
 
-                    <Text style={styles.boxText}>
-                        Description Tokens: {getTokenCount(characterCard?.description ?? '')}
-                    </Text>
-
-                    <TextInput
+                    <ThemedTextInput
                         scrollEnabled
-                        style={styles.input}
+                        label={`Description Tokens: ${getTokenCount(characterCard?.description ?? '')}`}
                         multiline
                         numberOfLines={8}
                         onChangeText={(mes) => {
-                            setCharacterCard({
+                            setCharacterCardEdited({
                                 ...characterCard,
                                 description: mes,
                             })
@@ -307,13 +277,11 @@ const ChracterEditor = () => {
                         value={characterCard?.description}
                     />
 
-                    <Text style={styles.boxText}>First Message</Text>
-
-                    <TextInput
-                        style={styles.input}
+                    <ThemedTextInput
+                        label="First Message"
                         multiline
                         onChangeText={(mes) => {
-                            setCharacterCard({
+                            setCharacterCardEdited({
                                 ...characterCard,
                                 first_mes: mes,
                             })
@@ -326,15 +294,13 @@ const ChracterEditor = () => {
                         style={{
                             flexDirection: 'row',
                             justifyContent: 'space-between',
-                            marginTop: 24,
-                            marginBottom: 12,
                         }}>
-                        <Text style={{ color: Style.getColor('primary-text2') }}>
-                            Alternate Greetings{'  '}
+                        <Text style={{ color: color.text._100 }}>
+                            Alternate Greetings ({characterCard.alternate_greetings.length})
                             {characterCard.alternate_greetings.length !== 0 && (
                                 <Text
                                     style={{
-                                        color: Style.getColor('primary-text2'),
+                                        color: color.text._100,
                                     }}>
                                     {altSwipeIndex + 1} / {characterCard.alternate_greetings.length}
                                 </Text>
@@ -344,19 +310,13 @@ const ChracterEditor = () => {
                         <View style={{ flexDirection: 'row', columnGap: 32 }}>
                             <TouchableOpacity onPress={handleDeleteAltMessage}>
                                 {characterCard.alternate_greetings.length !== 0 && (
-                                    <AntDesign
-                                        color={Style.getColor('destructive-brand')}
-                                        name="delete"
-                                        size={20}
-                                    />
+                                    <AntDesign color={color.error._400} name="delete" size={20} />
                                 )}
                             </TouchableOpacity>
                             <TouchableOpacity
                                 onPress={() => setAltSwipeIndex(Math.max(altSwipeIndex - 1, 0))}>
                                 <AntDesign
-                                    color={Style.getColor(
-                                        altSwipeIndex === 0 ? 'primary-text3' : 'primary-text1'
-                                    )}
+                                    color={altSwipeIndex === 0 ? color.text._700 : color.text._100}
                                     name="left"
                                     size={20}
                                 />
@@ -364,11 +324,7 @@ const ChracterEditor = () => {
                             {altSwipeIndex === characterCard.alternate_greetings.length - 1 ||
                             characterCard.alternate_greetings.length === 0 ? (
                                 <TouchableOpacity onPress={handleAddAltMessage}>
-                                    <AntDesign
-                                        color={Style.getColor('primary-text1')}
-                                        name="plus"
-                                        size={20}
-                                    />
+                                    <AntDesign color={color.text._100} name="plus" size={20} />
                                 </TouchableOpacity>
                             ) : (
                                 <TouchableOpacity
@@ -380,25 +336,20 @@ const ChracterEditor = () => {
                                             )
                                         )
                                     }>
-                                    <AntDesign
-                                        color={Style.getColor('primary-text1')}
-                                        name="right"
-                                        size={20}
-                                    />
+                                    <AntDesign color={color.text._100} name="right" size={20} />
                                 </TouchableOpacity>
                             )}
                         </View>
                     </View>
 
                     {characterCard.alternate_greetings.length !== 0 ? (
-                        <TextInput
-                            style={styles.input}
+                        <ThemedTextInput
                             multiline
                             numberOfLines={2}
                             onChangeText={(mes) => {
                                 const greetings = [...characterCard.alternate_greetings]
                                 greetings[altSwipeIndex].greeting = mes
-                                setCharacterCard({
+                                setCharacterCardEdited({
                                     ...characterCard,
                                     alternate_greetings: greetings,
                                 })
@@ -410,22 +361,19 @@ const ChracterEditor = () => {
                     ) : (
                         <Text
                             style={{
-                                ...styles.input,
-                                color: Style.getColor('primary-text2'),
+                                color: color.text._100,
                                 fontStyle: 'italic',
                             }}>
                             No Alternate Greetings
                         </Text>
                     )}
 
-                    <Text style={styles.boxText}>Personality</Text>
-
-                    <TextInput
-                        style={styles.input}
+                    <ThemedTextInput
+                        label="Personality"
                         multiline
                         numberOfLines={2}
                         onChangeText={(mes) => {
-                            setCharacterCard({
+                            setCharacterCardEdited({
                                 ...characterCard,
                                 personality: mes,
                             })
@@ -433,13 +381,11 @@ const ChracterEditor = () => {
                         value={characterCard?.personality}
                     />
 
-                    <Text style={styles.boxText}>Scenario</Text>
-
-                    <TextInput
-                        style={styles.input}
+                    <ThemedTextInput
+                        label="Scenario"
                         multiline
                         onChangeText={(mes) => {
-                            setCharacterCard({
+                            setCharacterCardEdited({
                                 ...characterCard,
                                 scenario: mes,
                             })
@@ -448,13 +394,11 @@ const ChracterEditor = () => {
                         numberOfLines={3}
                     />
 
-                    <Text style={styles.boxText}>Example Messages</Text>
-
-                    <TextInput
-                        style={styles.input}
+                    <ThemedTextInput
+                        label="Example Messages"
                         multiline
                         onChangeText={(mes) => {
-                            setCharacterCard({
+                            setCharacterCardEdited({
                                 ...characterCard,
                                 mes_example: mes,
                             })
@@ -468,97 +412,53 @@ const ChracterEditor = () => {
     )
 }
 
-const styles = StyleSheet.create({
-    mainContainer: {
-        flex: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-    },
-
-    button: {
-        marginRight: 20,
-    },
-
-    characterHeader: {
-        alignContent: 'flex-start',
-        borderRadius: 16,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-
-    characterHeaderInfo: {
-        marginLeft: 24,
-        rowGap: 12,
-        flex: 1,
-    },
-
-    buttonContainer: {
-        justifyContent: 'flex-start',
-        flexDirection: 'row',
-        columnGap: 4,
-    },
-
-    foregroundButton: {
-        flexGrow: 1,
-        flexDirection: 'row',
-        borderColor: Style.getColor('confirm-brand'),
-        backgroundColor: Style.getColor('confirm-brand'),
-        borderWidth: 1,
-        padding: 8,
-        borderRadius: 4,
-        columnGap: 8,
-    },
-
-    buttonDestructive: {
-        flexGrow: 1,
-        flexDirection: 'row',
-        borderColor: Style.getColor('destructive-brand'),
-        backgroundColor: Style.getColor('destructive-brand'),
-        borderWidth: 1,
-        padding: 8,
-        borderRadius: 4,
-        columnGap: 8,
-    },
-
-    buttonText: {
-        color: Style.getColor('primary-text1'),
-    },
-
-    avatar: {
-        width: 80,
-        height: 80,
-        borderRadius: 20,
-        borderColor: Style.getColor('primary-brand'),
-        borderWidth: 2,
-    },
-
-    boxText: {
-        color: Style.getColor('primary-text2'),
-        paddingTop: 24,
-        paddingBottom: 12,
-    },
-
-    input: {
-        color: Style.getColor('primary-text1'),
-        textAlignVertical: 'top',
-        paddingVertical: 8,
-        backgroundColor: Style.getColor('primary-surface1'),
-        borderColor: Style.getColor('primary-brand'),
-        borderRadius: 8,
-        borderWidth: 1,
-        paddingHorizontal: 8,
-    },
-
-    editHover: {
-        position: 'absolute',
-        left: '75%',
-        top: '75%',
-        padding: 8,
-        borderColor: Style.getColor('primary-text3'),
-        borderWidth: 1,
-        backgroundColor: Style.getColor('primary-surface3'),
-        borderRadius: 12,
-    },
-})
+const useStyles = () => {
+    const { color, spacing } = Theme.useTheme()
+    return StyleSheet.create({
+        mainContainer: {
+            flex: 1,
+            paddingHorizontal: spacing.xl,
+            paddingVertical: spacing.xl,
+        },
+
+        characterHeader: {
+            alignContent: 'flex-start',
+            borderRadius: spacing.xl,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+
+        characterHeaderInfo: {
+            marginLeft: spacing.xl2,
+            rowGap: 12,
+            flex: 1,
+        },
+
+        buttonContainer: {
+            justifyContent: 'flex-start',
+            flexDirection: 'row',
+            columnGap: 4,
+        },
+
+        avatar: {
+            width: 80,
+            height: 80,
+            borderRadius: spacing.xl2,
+            borderColor: color.primary._500,
+            borderWidth: 2,
+        },
+
+        editHover: {
+            position: 'absolute',
+            left: '75%',
+            top: '75%',
+            padding: spacing.m,
+            borderColor: color.text._700,
+            borderWidth: 1,
+            backgroundColor: color.primary._300,
+            borderRadius: spacing.l,
+        },
+    })
+}
 
 export default ChracterEditor
diff --git a/app/Instruct.tsx b/app/Instruct.tsx
index 20c4263..fa8ff57 100644
--- a/app/Instruct.tsx
+++ b/app/Instruct.tsx
@@ -189,7 +189,10 @@ const Instruct = () => {
                         </TouchableOpacity>
                     </View>
 
-                    <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollContainer}>
+                    <ScrollView
+                        showsVerticalScrollIndicator={false}
+                        style={styles.scrollContainer}
+                        contentContainerStyle={{ rowGap: 8 }}>
                         <ThemedTextInput
                             label="System Sequence"
                             value={currentInstruct.system_prompt}
@@ -202,7 +205,7 @@ const Instruct = () => {
                             numberOfLines={5}
                             multiline
                         />
-                        <View style={{ flexDirection: 'row' }}>
+                        <View style={{ flexDirection: 'row', columnGap: 8 }}>
                             <ThemedTextInput
                                 label="System Prefix"
                                 value={currentInstruct.system_prefix}
@@ -228,7 +231,7 @@ const Instruct = () => {
                                 multiline
                             />
                         </View>
-                        <View style={{ flexDirection: 'row' }}>
+                        <View style={{ flexDirection: 'row', columnGap: 8 }}>
                             <ThemedTextInput
                                 label="Input Prefix"
                                 value={currentInstruct.input_prefix}
@@ -254,7 +257,7 @@ const Instruct = () => {
                                 multiline
                             />
                         </View>
-                        <View style={{ flexDirection: 'row' }}>
+                        <View style={{ flexDirection: 'row', columnGap: 8 }}>
                             <ThemedTextInput
                                 label="Output Prefix"
                                 value={currentInstruct.output_prefix}
diff --git a/app/components/buttons/ThemedButton.tsx b/app/components/buttons/ThemedButton.tsx
index 8c770a4..07623f7 100644
--- a/app/components/buttons/ThemedButton.tsx
+++ b/app/components/buttons/ThemedButton.tsx
@@ -121,7 +121,7 @@ const ThemedButton: React.FC<ThemedButtonProps> = ({
     onPressOut,
     variant = 'primary',
     iconName = undefined,
-    iconSize = 24,
+    iconSize = 20,
     iconStyle = undefined,
     icon = undefined,
     ...rest
diff --git a/app/components/input/StringArrayEditor.tsx b/app/components/input/StringArrayEditor.tsx
index e69721f..a959823 100644
--- a/app/components/input/StringArrayEditor.tsx
+++ b/app/components/input/StringArrayEditor.tsx
@@ -89,8 +89,6 @@ const useStyles = () => {
             borderWidth: 1,
             color: color.text._100,
             borderColor: color.neutral._300,
-            marginBottom: spacing.s,
-            marginRight: spacing.l,
             paddingHorizontal: spacing.s,
             paddingVertical: spacing.m,
             borderRadius: spacing.m,
@@ -116,7 +114,7 @@ const useStyles = () => {
         tag: {
             borderColor: color.primary._700,
             borderWidth: 1,
-            paddingVertical: 6,
+            paddingVertical: 8,
             paddingLeft: 12,
             paddingRight: 8,
             borderRadius: 8,
@@ -139,7 +137,7 @@ const useStyles = () => {
         input: {
             flex: 1,
             color: color.text._100,
-            paddingVertical: 6,
+            paddingVertical: 4,
             paddingHorizontal: 8,
             borderRadius: 8,
         },
diff --git a/app/components/input/ThemedTextInput.tsx b/app/components/input/ThemedTextInput.tsx
index 61398b0..d967867 100644
--- a/app/components/input/ThemedTextInput.tsx
+++ b/app/components/input/ThemedTextInput.tsx
@@ -18,32 +18,32 @@ const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
     return (
         <View
             style={{
-                paddingBottom: 8,
                 flex: 1,
             }}>
-            <Text
-                style={{
-                    color: color.text._100,
-                }}>
-                {label}
-            </Text>
+            {label && (
+                <Text
+                    style={{
+                        color: color.text._100,
+                        marginBottom: 8,
+                    }}>
+                    {label}
+                </Text>
+            )}
             <TextInput
-                {...rest}
                 multiline={(!!numberOfLines && numberOfLines > 1) || multiline}
                 numberOfLines={numberOfLines}
                 style={{
                     color: color.text._100,
                     borderColor: color.neutral._300,
                     borderWidth: 1,
-                    paddingVertical: 4,
-                    paddingHorizontal: 8,
-                    marginVertical: 8,
-                    marginHorizontal: 4,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
                     borderRadius: 8,
                     textAlignVertical: numberOfLines && numberOfLines > 1 ? `top` : `center`,
                 }}
                 placeholder="----"
                 placeholderTextColor={color.text._400}
+                {...rest}
             />
         </View>
     )
diff --git a/lib/theme/ThemeColor.ts b/lib/theme/ThemeColor.ts
index b2deec6..0137ac4 100644
--- a/lib/theme/ThemeColor.ts
+++ b/lib/theme/ThemeColor.ts
@@ -87,7 +87,7 @@ export namespace DefaultColorSchemes {
             _600: '#6e6e6e',
             _700: '#505050',
             _800: '#323232',
-            _900: '#141414',
+            _900: '#000000',
         },
     }