diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index e1d3ea3..33c075c 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -1,50 +1,52 @@
-import React from 'react';
-import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
-import Separator from '../components/Separator';
+import React, { useContext } from 'react';
+import { StyleSheet,Pressable, Text, View } from 'react-native';
+
+import ColorContext from '../theme/ColorContext';
 
 
 
 interface foodElementImageProps {
-  title  : string
+    title  : string
 }
 
 
 export default function FoodElementText(props : any) {
-  return (
-    <Pressable style={styles.button}>
-      <View style={styles.container}>
-        <View style={styles.view}>
-            <Text style={styles.text}>{props.title}</Text>
-        </View>
-      </View>
-    </Pressable>
-  );
-}
+    const {colors, toggleColors } = useContext(ColorContext)
 
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "80%",
-    borderRadius: 5,
-    backgroundColor: '#E3DEC9',
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    padding : "2%",
-    color: 'black',
-  },
-  view: {
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  container: {
-    width: "100%",
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#3F3C42',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-});
+    const styles = StyleSheet.create({
+        button: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: "80%",
+            borderRadius: 5,
+            backgroundColor: colors.carrouselBackground,
+        },
+        text: {
+            fontSize: 10,
+            fontWeight: 'bold',
+            padding : "2%",
+            color: colors.cardDetail,
+        },
+        view: {
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+        },
+        container: {
+            width: "100%",
+            borderRadius: 5,
+            borderWidth: 1,
+            borderColor: colors.cardDetail,
+            flexDirection: 'column',
+            justifyContent: 'center',
+        },
+    });
+    return (
+        <Pressable style={styles.button}>
+            <View style={styles.container}>
+                <View style={styles.view}>
+                    <Text style={styles.text}>{props.title}</Text>
+                </View>
+            </View>
+        </Pressable>
+    );
+}
diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx
index fb8bd35..f3ecf30 100644
--- a/LeftOvers/components/ProfileElement.tsx
+++ b/LeftOvers/components/ProfileElement.tsx
@@ -1,124 +1,127 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import ColorContext from '../theme/ColorContext';
 
 type Profile = {
-  name: string
-  avatar: string
-  isActive: string
-  disableSelection: boolean
+    name: string
+    avatar: string
+    isActive: string
+    disableSelection: boolean
 }
 
 export default function ProfileElement(props : Profile) {
-  const [waiting, setWaiting] = useState("none")
-  const [separator, setSeparator] = useState("none")
-  const changeStatus = () => {
-      if (props.disableSelection){
-          setWaiting("none")
-      }
-      else if (waiting == "flex"){
-          setWaiting("none")
-      }
-      else{
-          setWaiting("flex")
-      }
-      if (props.disableSelection){
-          setSeparator("none")
-      }
-      else if (props.isActive == "flex" && waiting == "none"){
-          setSeparator("flex")
-      }
-      else{
-          setSeparator("none")
-      }
-      console.log(waiting, separator, props.name)
-  }
+    const { colors, toggleColors } = useContext(ColorContext)
 
-  let imageSource
-  if (props.avatar == "plus.png"){
-      imageSource = require('../assets/images/plus.png')
-  }
-  else if (props.avatar == "plus_small.png"){
-      imageSource = require('../assets/images/plus_small.png')
-  }
-  else{
-      imageSource = require('../assets/images/logo.png')
-  }
+    const [waiting, setWaiting] = useState("none")
+    const [separator, setSeparator] = useState("none")
+    const changeStatus = () => {
+        if (props.disableSelection){
+            setWaiting("none")
+        }
+        else if (waiting == "flex"){
+            setWaiting("none")
+        }
+        else{
+            setWaiting("flex")
+        }
+        if (props.disableSelection){
+            setSeparator("none")
+        }
+        else if (props.isActive == "flex" && waiting == "none"){
+            setSeparator("flex")
+        }
+        else{
+            setSeparator("none")
+        }
+        console.log(waiting, separator, props.name)
+    }
 
-  return (
-      <Pressable onPress={changeStatus} style={styles.button}>
-          <View>
-              <View style={styles.pseudoBar}>
-                  <Image source={imageSource} style={styles.avatar}></Image>
-                  <Text style={styles.text}>{props.name}</Text>
-              </View>
-              <View style={styles.pseudoBar}>
-                  <View style={[styles.active, {display: props.isActive}]}>
-                      <Text style={styles.textActive}>Activated</Text>
-                  </View>
-                  <View style={{flex: 0.3, display: separator}}/>
-                  <View style={[styles.waiting, {display: waiting}]}>
-                      <Text style={styles.textWaiting}>Waiting...</Text>
-                  </View>
-              </View>
-          </View>
-      </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    height: "80%",
-    width: "78%",
-    marginVertical: "3%",
-  },
-  pseudoBar: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "100%",
-      marginHorizontal: "3%",
-      marginBottom: "3%",
-  },
-  avatar: {
-      padding: "5%",
-      resizeMode: 'contain',
-      borderWidth: 2,
-      borderColor: "#ACA279",
-      borderRadius: 45,
-      height: "100%",
-      flex: 0.01,
-  },
-  text: {
-      fontSize: 15,
-      color: '#ACA279',
-      alignItems: 'center',
-      textAlign: 'left',
-      flex: 0.9,
-      marginLeft: "10%",
-      padding: "2%",
-  },
+    let imageSource
+    if (props.avatar == "plus.png"){
+        imageSource = require('../assets/images/plus.png')
+    }
+    else if (props.avatar == "plus_small.png"){
+        imageSource = require('../assets/images/plus_small.png')
+    }
+    else{
+        imageSource = require('../assets/images/logo.png')
+    }
 
-  active: {
-    borderWidth: 1,
-    borderRadius: 20,
-    borderColor: "#59BDCD",
-    padding: "1%",
-  },
-  textActive: {
-    fontSize: 10,
-    color: "#59BDCD",
-  },
+    const styles = StyleSheet.create({
+        button: {
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: "80%",
+            width: "78%",
+            marginVertical: "3%",
+        },
+        pseudoBar: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            marginHorizontal: "3%",
+            marginBottom: "3%",
+        },
+        avatar: {
+            padding: "5%",
+            resizeMode: 'contain',
+            borderWidth: 2,
+            borderColor: colors.carrouselText,
+            borderRadius: 45,
+            height: "100%",
+            flex: 0.01,
+        },
+        text: {
+            fontSize: 15,
+            color: colors.carrouselText,
+            alignItems: 'center',
+            textAlign: 'left',
+            flex: 0.9,
+            marginLeft: "10%",
+            padding: "2%",
+        },
+    
+        active: {
+            borderWidth: 1,
+            borderRadius: 20,
+            borderColor: colors.carrouselDetail,
+            padding: "1%",
+        },
+        textActive: {
+            fontSize: 10,
+            color: colors.carrouselDetail,
+        },
+    
+        waiting: {
+            borderWidth: 1,
+            borderRadius: 20,
+            borderColor: "#ACA279",
+            padding: "1%",
+        },
+        textWaiting: {
+            fontSize: 10,
+            color: "#ACA279",
+        },
+    });
 
-  waiting: {
-    borderWidth: 1,
-    borderRadius: 20,
-    borderColor: "#ACA279",
-    padding: "1%",
-  },
-  textWaiting: {
-    fontSize: 10,
-    color: "#ACA279",
-  },
-});
\ No newline at end of file
+    return (
+        <Pressable onPress={changeStatus} style={styles.button}>
+            <View>
+                <View style={styles.pseudoBar}>
+                    <Image source={imageSource} style={styles.avatar}></Image>
+                    <Text style={styles.text}>{props.name}</Text>
+                </View>
+                <View style={styles.pseudoBar}>
+                    <View style={[styles.active, {display: props.isActive}]}>
+                        <Text style={styles.textActive}>Activated</Text>
+                    </View>
+                    <View style={{flex: 0.3, display: separator}}/>
+                    <View style={[styles.waiting, {display: waiting}]}>
+                        <Text style={styles.textWaiting}>Waiting...</Text>
+                    </View>
+                </View>
+            </View>
+        </Pressable>
+    );
+}
\ No newline at end of file
diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx
index 60ee2c8..87d349e 100644
--- a/LeftOvers/components/ProfileSelection.tsx
+++ b/LeftOvers/components/ProfileSelection.tsx
@@ -1,12 +1,15 @@
-import {React, useState} from 'react';
-import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
+import React, { useContext, useState } from 'react';
+import {View, StyleSheet, Pressable, Image} from 'react-native';
+
+import ProfileElement from './ProfileElement'
+import ColorContext from '../theme/ColorContext';
+
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
-import ProfileElement from './ProfileElement'
 
 type ProfileSelectionProps = {
-  listProfile: Profile[]
-  disableSelection: boolean
+    listProfile: Profile[]
+    disableSelection: boolean
 }
 
 type Profile = {
@@ -16,47 +19,49 @@ type Profile = {
 }
 
 export default function ProfileSelection(props: ProfileSelectionProps) {
-  const [cpt, setCpt] = useState(0);
-  const decreaseCounter = () => {
-    if (cpt > 0) {
-      setCpt(cpt - 1);
-    }
-    else {
-      setCpt(props.listProfile.length - 1);
-    }
-  };
-  const increaseCounter = () => {
-    if (cpt < props.listProfile.length - 1) {
-      setCpt(cpt + 1);
-    }
-    else {
-      setCpt(0);
-    }
-  };
-
-  return (
-      <View style={styles.background}>
-          <Pressable onPress={decreaseCounter}>
-             <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}}/>
-          </Pressable>
-          <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
-          <Pressable onPress={increaseCounter}>
-             <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}}/>
-          </Pressable>
-      </View>
-  );
-}
+    const { colors, toggleColors } = useContext(ColorContext);
+
+    const [cpt, setCpt] = useState(0);
+    const decreaseCounter = () => {
+        if (cpt > 0) {
+            setCpt(cpt - 1);
+        }
+        else {
+            setCpt(props.listProfile.length - 1);
+        }
+    };
+    const increaseCounter = () => {
+        if (cpt < props.listProfile.length - 1) {
+            setCpt(cpt + 1);
+        }
+        else {
+            setCpt(0);
+        }
+    };
+
+    const styles = StyleSheet.create({
+        background: {
+            width: "92%",
+            height: 80,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: colors.carrouselText,
+            backgroundColor: colors.carrouselBackground,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
 
-const styles = StyleSheet.create({
-  background: {
-    width: "92%",
-    height: 80,
-    borderRadius: 20,
-    borderWidth: 2,
-    borderColor: '#ACA279',
-    backgroundColor: '#E3DEC9',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
\ No newline at end of file
+    return (
+        <View style={styles.background}>
+              <Pressable onPress={decreaseCounter}>
+                  <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
+              </Pressable>
+              <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
+              <Pressable onPress={increaseCounter}>
+                  <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
+              </Pressable>
+        </View>
+    );
+}
\ No newline at end of file
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
index 8de9bbe..24dc8e1 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -112,9 +112,9 @@ export default function HomePage({ navigation, props }) {
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 20,
-            backgroundColor: '#E3DEC9',
+            backgroundColor: colors.carrouselBackground,
             borderWidth: 2,
-            borderColor: "#ACA279",
+            borderColor: colors.carrouselText,
             padding: "2%"
         }
     });
@@ -143,7 +143,7 @@ export default function HomePage({ navigation, props }) {
                         <View style={{marginTop: "3%"}}/>
                         <ProfileSelection listProfile={profiles} disableSelection={true}/>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
+                        <ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
                     </View>
                     <View style={styles.separator}/>
                     <View style={styles.profilesSelection}>
@@ -151,7 +151,7 @@ export default function HomePage({ navigation, props }) {
                             <Text style={styles.filters}>Ingredient Stocks</Text>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
+                        <ValidateButton title="Manage Stocks" image="warehouse.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => console.log('ManageStocks')}/>
                     </View>
                     <View style={styles.separator}/>
                     <View style={styles.profilesSelection}>
@@ -160,21 +160,21 @@ export default function HomePage({ navigation, props }) {
                         </View>
                         <View style={{marginTop: "3%"}}/>
                         <View style={styles.ingredientSelection}>
-                            <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                            <Text style={{fontSize: 15, color: colors.carrouselText}}>Selected Ingredient</Text>
                             <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
                                 <Pressable onPress={decreaseCounter}>
-                                    <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                                    <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>
                                 <FoodElementText title={ingredientList[cpt].title}/>
                                 <Pressable onPress={increaseCounter}>
-                                    <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                                    <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
                                 </Pressable>
                             </View>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
                         <View style={{marginTop: "3%"}}/>
-                        <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts
index be3fbd2..035ed75 100644
--- a/LeftOvers/theme/colors.ts
+++ b/LeftOvers/theme/colors.ts
@@ -27,6 +27,9 @@ export interface Theme {
     buttonDetail: string,
     welcomeText: string,
     welcomeName: string,
+    carrouselBackground: string,
+    carrouselText: string,
+    carrouselDetail: string
 }
 
 export const LightTheme : Theme = {
@@ -45,7 +48,10 @@ export const LightTheme : Theme = {
     buttonBackground: Pearl,
     buttonDetail: Moonstone,
     welcomeText: Ecru,
-    welcomeName: Moonstone
+    welcomeName: Moonstone,
+    carrouselBackground: Pearl,
+    carrouselText: Ecru,
+    carrouselDetail: Moonstone
 }
 
 export const DarkTheme : Theme = {
@@ -64,6 +70,9 @@ export const DarkTheme : Theme = {
     buttonBackground: Jet,
     buttonDetail: CarolinaBlue,
     welcomeText: SteelBlue,
-    welcomeName:Alabaster
+    welcomeName:Alabaster,
+    carrouselBackground: CarolinaBlue,
+    carrouselText: SteelBlue,
+    carrouselDetail: Alabaster
 }