diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx
index e8bcfa7..a27181e 100644
--- a/src/FLAD/App.tsx
+++ b/src/FLAD/App.tsx
@@ -69,16 +69,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-    card: {
-      borderRadius : 8,
-      shadowRadius : 20,
-      shadowColor : '#'
-    },
-    image: {
-        width: 320,
-        height: 440,
-        borderRadius: 18,
-        resizeMode : "cover",
-        placeholder: "assets/images/loadingPlaceholder.gif"
-      },
+  card: {
+    borderRadius : 8,
+    shadowRadius : 20,
+    shadowColor : '#'
+  },
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+    resizeMode : "cover",
+    placeholder: "assets/images/loadingPlaceholder.gif"
+  },
 });
\ No newline at end of file
diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx
new file mode 100644
index 0000000..c0b9051
--- /dev/null
+++ b/src/FLAD/components/CardMusic.tsx
@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native';
+
+
+type CustomCardMusic = { //Props
+    image: string;
+    title: string;
+    description: string;
+}
+
+export default function CardMusic(CBP: CustomCardMusic) {
+    return (
+      <View style={styles.container}>
+          <View style={styles.imageContainer}>
+              <Image source={{uri: CBP.image}} style={styles.image} borderRadius={50}/>
+          </View>
+          <View style={styles.textContainer}>
+              <Text style={styles.title}>{CBP.title}</Text>
+              <Text style={styles.description}>{CBP.description}</Text>
+          </View>
+      </View>
+    );
+  }
+  
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      margin: 20
+    },
+    imageContainer: {
+      width: 80,
+      height: 80,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 20
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: 50
+    },
+    textContainer: {
+      flex: 1,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+    title: {
+      fontWeight: 'bold',
+      color: 'white',
+      fontSize: 20,
+      marginBottom: 10
+    },
+    description: {
+      color: 'white',
+      fontSize: 16
+    }
+  });
\ No newline at end of file
diff --git a/src/FLAD/pages/favoritePage.tsx b/src/FLAD/pages/favoritePage.tsx
new file mode 100644
index 0000000..049ea41
--- /dev/null
+++ b/src/FLAD/pages/favoritePage.tsx
@@ -0,0 +1,3 @@
+import React, {Component} from 'react';
+import { Animated, StyleSheet, Text, View, FlatList } from 'react-native';
+