diff --git a/LeftOvers/navigation/BottomBar.tsx b/LeftOvers/navigation/BottomBar.tsx
index 56f9419..61ab00f 100644
--- a/LeftOvers/navigation/BottomBar.tsx
+++ b/LeftOvers/navigation/BottomBar.tsx
@@ -16,7 +16,7 @@ import DarkIcon from '../assets/images/moon.png';
 
 export default function BottomBar({ state, descriptors, navigation }) {
     const {theme, toggleTheme} = useContext(ThemeContext);
-    const {colors, toggleColors} = useContext(ColorContext)
+    const toggleColors = useContext(ColorContext).toggleColors;
     const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon)
     const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark');
     
diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx
index 6dc6ded..4a9e791 100644
--- a/LeftOvers/navigation/CookingStackScreen.tsx
+++ b/LeftOvers/navigation/CookingStackScreen.tsx
@@ -8,7 +8,7 @@ import ThemeContext from '../theme/ThemeContext';
 const CookingStack = createNativeStackNavigator()
 
 export default function CookingStackScreen() {
-    const {theme, toggleTheme} = useContext(ThemeContext);
+    const theme = useContext(ThemeContext).theme;
     
     return (
         <CookingStack.Navigator>
diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx
index 6864e34..9eca446 100644
--- a/LeftOvers/navigation/HomeStackScreen.tsx
+++ b/LeftOvers/navigation/HomeStackScreen.tsx
@@ -23,8 +23,7 @@ function AppIcon() {
 }
 
 export default function HomeStackScreen() {
-    const {theme, toggleTheme} = useContext(ThemeContext)
-    const {colors, toggleColors} = useContext(ColorContext)
+    const colors = useContext(ColorContext).colors
     
     return (
         <HomeStack.Navigator>
diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx
index ea88a7f..ce664ee 100644
--- a/LeftOvers/navigation/ProfileStackScreen.tsx
+++ b/LeftOvers/navigation/ProfileStackScreen.tsx
@@ -5,7 +5,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Profiles from '../screens/Profiles';
 import CreateProfile from '../screens/CreateProfile';
 import ModifyProfile from '../screens/ModifyProfile';
-import ThemeContext from '../theme/ThemeContext';
+import ColorContext from '../theme/ColorContext';
 
 import { HeaderTitle } from './Utils';
 
@@ -15,11 +15,11 @@ import AddIcon from '../assets/images/plus.png'
 const ProfilesStack = createNativeStackNavigator()
 
 export default function ProfilesStackScreen({ navigation }) {
-    const {theme, toggleTheme} = useContext(ThemeContext);
+    const colors = useContext(ColorContext).colors;
 
     const styles = StyleSheet.create({
         headerBarContainer: {
-            backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42',
+            backgroundColor: colors.cardBackground,
         },
         headerBarRightContainer: {
             display: 'flex',
@@ -53,13 +53,13 @@ export default function ProfilesStackScreen({ navigation }) {
                                 <Image 
                                     source={SearchIcon}
                                     style={styles.headerBarIcon}
-                                    tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/>
+                                    tintColor={colors.cardDetail}/>
                             </Pressable>
                             <Pressable onPress={_handleHeaderAdd}>
                                 <Image
                                     source={AddIcon}
                                     style={styles.headerBarIcon}
-                                    tintColor={theme === 'light' ? '#3F3C42' : '#F2F0E4'}/>
+                                    tintColor={colors.cardDetail}/>
                             </Pressable>
                         </View>
                     )
diff --git a/LeftOvers/navigation/Utils.tsx b/LeftOvers/navigation/Utils.tsx
index 0a6c072..4a3a9bc 100644
--- a/LeftOvers/navigation/Utils.tsx
+++ b/LeftOvers/navigation/Utils.tsx
@@ -4,7 +4,7 @@ import { Text, StyleSheet } from 'react-native';
 import ColorContext from '../theme/ColorContext';
 
 export function HeaderTitle(props) {
-    const {colors, toggleColors} = useContext(ColorContext)
+    const colors = useContext(ColorContext).colors
 
     const styles = StyleSheet.create({
         headerTitle: {
diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx
index a8fe93d..947cb0c 100644
--- a/LeftOvers/screens/CreateProfile.tsx
+++ b/LeftOvers/screens/CreateProfile.tsx
@@ -8,7 +8,7 @@ import ValidateButton from '../components/ValidateButton';
 import ColorContext from '../theme/ColorContext';
 
 export default function CreateProfile(props) {
-    const { colors, toggleColors } = useContext(ColorContext)
+    const colors = useContext(ColorContext).colors
     const all = []
     const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
     
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 72617cb..c086032 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -9,7 +9,7 @@ import ProfileDelete from '../components/ProfileDelete';
 import ColorContext from '../theme/ColorContext';
 
 export default function Profiles({navigation, props}) {
-    const { colors, toggleColors } = useContext(ColorContext)
+    const colors = useContext(ColorContext).colors
 
     const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
     const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]