diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 2953135..b45a76e 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -12,8 +12,8 @@ import {LinearGradient} from 'expo-linear-gradient';
 export default function App(props) {
   return(
     //<HomePage/>
-    <ModifyProfile/>
-    //<Profiles/>
+    //<ModifyProfile/>
+    <Profiles/>
     //<RecipeSuggestion/>
     //<CreateProfile/>
     //<FiltersSelection/>
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 33a8a27..944f2b7 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -22,7 +22,6 @@ export default function ProfileDelete(props: ProfileProps) {
   };
 
   let imageSource
-
   if (props.avatar == "plus.png"){
      imageSource = require('../assets/images/plus.png')
   }
@@ -39,7 +38,7 @@ export default function ProfileDelete(props: ProfileProps) {
             <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
         </View>
-        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
@@ -47,9 +46,8 @@ export default function ProfileDelete(props: ProfileProps) {
         </Pressable>
         <View style={{display: display}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
         </View>
     </View>
   );
@@ -57,69 +55,61 @@ export default function ProfileDelete(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
+    height: "100%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.03,
   },
   text: {
+    flex: 1,
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    textAlign: 'left',
+    marginLeft: "10%",
+    padding: "2%",
+    height: "100%",
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "90%",
+      paddingTop: "3%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
-  nbSelected: {
-      fontSize: 11,
-      flex: 1,
-      color: "#3F3C42",
-      textAlign: "right",
-  },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
index dba3d78..03923c5 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -40,22 +40,22 @@ export default function ProfileDetails(props: ProfileProps) {
             <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
             <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
-            <Pressable onPress={props.onDeleteProfile}>
+            <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
                 <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
             </Pressable>
         </View>
-        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
-                <Text style={styles.nbSelected}>3 selected</Text>
+                <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
             </View>
         </Pressable>
-        <View style={{display: display}}>
+        <View style={{display: display, alignItems: "center", justifyContent: "center"}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
         </View>
     </View>
   );
@@ -63,72 +63,71 @@ export default function ProfileDetails(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.03,
   },
   text: {
+    flex: 1,
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
     textAlign: 'left',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    marginLeft: "3%",
+    padding: "2%",
+    height: "100%",
   },
   modify: {
-      height: 20,
-      width: 20,
+      height: "100%",
       tintColor: "#ACA279",
       resizeMode: 'contain',
-      flex: 0.05,
-      marginLeft: 15,
+      flex: 0.1,
+      marginLeft: "3%",
   },
   delete: {
-        height: 20,
-        width: 20,
-        tintColor: "#ACA279",
-        resizeMode: 'contain',
-        flex: 0.05,
+      height: "100%",
+      width: "100%",
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 1,
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "90%",
+      paddingTop: "3%",
+      paddingBottom: "1%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
+      flex: 1,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
@@ -137,10 +136,10 @@ const styles = StyleSheet.create({
       flex: 1,
       color: "#3F3C42",
       textAlign: "right",
+      marginRight: "3%",
   },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index 192a45e..0f959ed 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -74,7 +74,6 @@ const styles = StyleSheet.create({
     flex: 0.04,
   },
   textInput: {
-    flex: 0.9,
     fontSize: 15,
     color: '#ACA279',
     borderRadius: 10,
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 4902c6c..fb34736 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -1,5 +1,5 @@
 import {React, useState} from 'react';
-import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView} from 'react-native';
+import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
 import TopBar from '../components/TopBar';
@@ -23,7 +23,7 @@ export default function Profiles(props) {
   const [opacity, setOpacity] = useState(1);
   const raisePopUp = () => {
         setVisible(true)
-        setOpacity(0.4)
+        setOpacity(0.3)
   }
   const erasePopUp = () => {
         setVisible(false)
@@ -35,16 +35,15 @@ export default function Profiles(props) {
         <ScrollView>
             <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
                 <TopBar title="Profiles" isVisible="true"/>
-                <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                    <View style={{marginTop: 10}}/>
+                <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
                     <View style={styles.modal}>
                         <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
                             <View style={styles.modal}>
@@ -57,13 +56,13 @@ export default function Profiles(props) {
                                         <View style={styles.decisionBar}>
                                             <Pressable onPress={erasePopUp} style={{flex:0.5}}>
                                                 <View style={styles.yesButton}>
-                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
                                                     <Text style={styles.yesText}>Yes</Text>
                                                 </View>
                                             </Pressable>
                                             <Pressable onPress={erasePopUp} style={{flex:0.5}}>
                                                 <View style={styles.noButton}>
-                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
                                                     <Text style={styles.noText}>No</Text>
                                                 </View>
                                             </Pressable>
@@ -73,6 +72,7 @@ export default function Profiles(props) {
                             </View>
                         </Modal>
                     </View>
+                    <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
             </View>
         </ScrollView>
@@ -97,39 +97,37 @@ const styles = StyleSheet.create({
     padding: 10,
     paddingTop: 0,
   },
-
-
+  separator: {
+    marginTop: "6%"
+  },
 
   modal: {
         position: 'absolute',
-        top: '50%',
-        left: '50%',
+        top: '8%',
         justifyContent: "center",
         alignItems: "center",
         width: "100%",
-        transform: [{ translateX: -207 }, { translateY: -140 }],
   },
   viewModal: {
         flexDirection: "column",
-        padding: 10,
+        padding: "3%",
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        height: 200,
+        flex: 1,
   },
 
-
   profileValidation: {
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
-        paddingBottom: 20,
+        marginBottom: "6%",
+        flex: 0.7,
   },
   decisionBarVertical: {
           flexDirection: "column",
-          width: "100%",
-          padding: 10,
-          height: "100%",
+          width: "90%",
+          padding: "3%",
           borderRadius: 15,
           alignItems: "center",
           justifyContent: "center",
@@ -141,23 +139,21 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.3,
-        padding: 5,
+        marginBottom: "2%",
+        marginHorizontal: "2%",
   },
   decisionBar: {
           flexDirection: "row",
           flex: 0.7,
           width: "100%",
-          height: "20%",
-          borderRadius: 15,
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#F2F0E4",
   },
   yesButton: {
           flexDirection: "row",
           flex: 0.5,
-          padding: 10,
-          marginHorizontal: 10,
+          padding: "2%",
+          marginHorizontal: "5%",
           width: "90%",
           borderRadius: 20,
           alignItems: "center",
@@ -170,13 +166,13 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
       flex: 0.7,
-      padding: 5,
+      padding: "4%",
   },
   noButton: {
         flexDirection: "row",
         flex: 0.5,
-        padding: 10,
-        marginHorizontal: 10,
+        padding: "2%",
+        marginHorizontal: "5%",
         width: "90%",
         borderRadius: 20,
         alignItems: "center",
@@ -189,6 +185,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.7,
-        padding: 5,
+        padding: "4%",
   },
 });
\ No newline at end of file