diff --git a/training-playground/App.js b/training-playground/App.js
index b06aee1..5e57db4 100644
--- a/training-playground/App.js
+++ b/training-playground/App.js
@@ -1,21 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { View } from 'react-native';
+import Topic2_7 from './components/topic2_7';
 
 export default class App extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
-        <Text>Open up App.js to start working on your app!</Text>
+      <View style={ {marginTop: 24} }>
+        <Topic2_7 />
       </View>
     );
   }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+}
\ No newline at end of file
diff --git a/training-playground/components/Topic2_6/index.js b/training-playground/components/Topic2_6/index.js
new file mode 100644
index 0000000..ba50e13
--- /dev/null
+++ b/training-playground/components/Topic2_6/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './styles'
+
+export default class Topic2_6 extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={[styles.box, styles.box1]}/>
+        <View style={[styles.box, styles.box2]}/>
+        <View style={[styles.box3, styles.box]}/>
+      </View>
+    );
+  }
+}
\ No newline at end of file
diff --git a/training-playground/components/Topic2_6/styles.js b/training-playground/components/Topic2_6/styles.js
new file mode 100644
index 0000000..1799e16
--- /dev/null
+++ b/training-playground/components/Topic2_6/styles.js
@@ -0,0 +1,40 @@
+import { StyleSheet, Platform } from 'react-native';
+
+const color = Platform.OS === 'ios' ? 'grey' : 'green';
+
+export default StyleSheet.create(
+    {
+        container: {
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'space-between',
+            padding: 10,
+            backgroundColor: color,
+        },
+        box: {
+            borderRadius: 25,
+        },
+        box1: {
+            backgroundColor: '#00BFFF',
+            width: 100,
+            height: 100,
+            alignSelf: 'flex-start',
+        },
+        box2: {
+            backgroundColor: '#1E90FF',
+            width: 100,
+            height: 100,
+            alignItems: 'center',
+
+        },
+        box3: {
+            backgroundColor: '#6495ED',
+            width: 100,
+            height: 100,
+            alignSelf: 'flex-end',
+
+        }
+    }
+);
\ No newline at end of file
diff --git a/training-playground/components/topic2/index.js b/training-playground/components/topic2/index.js
new file mode 100644
index 0000000..01f7bab
--- /dev/null
+++ b/training-playground/components/topic2/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './styles'
+
+export default class Topic2 extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={[styles.box, styles.box1]}/>
+        <View style={[styles.box, styles.box2]}/>
+        <View style={[styles.box3, styles.box]}/>
+      </View>
+    );
+  }
+}
\ No newline at end of file
diff --git a/training-playground/components/topic2/styles.js b/training-playground/components/topic2/styles.js
new file mode 100644
index 0000000..6bce19f
--- /dev/null
+++ b/training-playground/components/topic2/styles.js
@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create(
+    {
+        container: {
+            flex: 0.7,
+            width: 500,
+            height: 500,
+            justifyContent: 'space-between',
+            padding: 10,
+        },
+        box: {
+            borderRadius: 25,
+        },
+        box1: {
+            backgroundColor: '#00BFFF',
+            width: 100,
+            height: 100,
+        },
+        box2: {
+            backgroundColor: '#1E90FF',
+            width: 150,
+            height: 150,
+        },
+        box3: {
+            backgroundColor: '#6495ED',
+            width: 200,
+            height: 200,
+        }
+    }
+);
\ No newline at end of file
diff --git a/training-playground/components/topic2_7/index.js b/training-playground/components/topic2_7/index.js
new file mode 100644
index 0000000..2e8c5bc
--- /dev/null
+++ b/training-playground/components/topic2_7/index.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, Text, Image } from 'react-native';
+import styles from './styles';
+import { Entypo, AntDesign, SimpleLineIcons, FontAwesome } from '@expo/vector-icons';
+
+
+export default class Topic2_7 extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+          <View style={styles.boxLeft}>
+            <Text style={styles.textTitle}>
+                This is the title
+            </Text>
+            <Text style={styles.textSubTitle}>
+                And this is the sub-title
+            </Text>
+            <Text style={styles.textParagraph} numberOfLines={2}>
+                This is a paragraph. A paragraph with letters and words, without any meaning. It just for this example to work.
+            </Text>
+            <View style={styles.iconsContainer}>
+              <View style={[styles.icon, {backgroundColor:"grey"}]}>
+                <SimpleLineIcons name="bubble" size={32} color="white" />
+              </View>
+              <View style={styles.icon}>
+                <FontAwesome name="facebook" size={32} color="#3a5897" />
+              </View>
+              <View style={styles.icon}>
+                <FontAwesome name="linkedin" size={32} color="#0775b7" />
+              </View>
+              <View style={styles.icon}>
+                <Entypo name="pinterest" size={32} color="#cd2129" />
+              </View>
+              <View style={styles.icon}>
+                <FontAwesome name="twitter" size={32} color="#49c9f2" />
+              </View>
+            </View>
+          </View>
+          <View style={styles.boxRight}>
+            <Image
+                style={styles.image}
+                source={{uri: 'https://i.pinimg.com/originals/1f/47/fe/1f47fe8df5bac8390d39f48c22072ef6.jpg'}}
+                resizeMode={"contain"}
+            />
+          </View>
+      </View>
+    );
+  }
+}
\ No newline at end of file
diff --git a/training-playground/components/topic2_7/styles.js b/training-playground/components/topic2_7/styles.js
new file mode 100644
index 0000000..b93e0a7
--- /dev/null
+++ b/training-playground/components/topic2_7/styles.js
@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+        container: {
+            padding: 10,
+            flexDirection: 'row',
+        },
+        boxLeft: {
+            flex: 7,
+        },
+        boxRight: {
+            flex: 3,
+            
+        },
+        textTitle:{
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+        textSubTitle:{
+            fontSize: 16,
+            fontStyle: 'italic',
+        },
+        textParagraph:{
+            fontSize: 12,
+        },
+        image:{
+            aspectRatio: 1,
+            height: undefined, 
+            width: '100%',
+        },
+        iconsContainer:{
+            flexDirection: 'row',
+            //justifyContent: 'space-between',
+        },
+        icon:{
+            alignItems: 'center',
+            height:32,
+            width:32,
+            marginRight: 5,
+        }
+    }
+);
\ No newline at end of file
diff --git a/training-playground/components/topic3/index.js b/training-playground/components/topic3/index.js
new file mode 100644
index 0000000..202cf84
--- /dev/null
+++ b/training-playground/components/topic3/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './styles'
+
+export default class Topic3 extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={[styles.box, styles.box1]}/>
+        <View style={[styles.box, styles.box2]}/>
+        <View style={[styles.box3, styles.box]}/>
+      </View>
+    );
+  }
+}
\ No newline at end of file
diff --git a/training-playground/components/topic3/styles.js b/training-playground/components/topic3/styles.js
new file mode 100644
index 0000000..5c38975
--- /dev/null
+++ b/training-playground/components/topic3/styles.js
@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create(
+    {
+        container: {
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'space-between',
+            padding: 10,
+        },
+        box: {
+            borderRadius: 25,
+        },
+        box1: {
+            backgroundColor: '#00BFFF',
+            width: 100,
+            height: 100,
+            alignSelf: 'flex-start',
+        },
+        box2: {
+            backgroundColor: '#1E90FF',
+            width: 100,
+            height: 100,
+            alignItems: 'center',
+
+        },
+        box3: {
+            backgroundColor: '#6495ED',
+            width: 100,
+            height: 100,
+            alignSelf: 'flex-end',
+
+        }
+    }
+);
\ No newline at end of file
diff --git a/training-playground/styles.js b/training-playground/styles.js
new file mode 100644
index 0000000..68350e5
--- /dev/null
+++ b/training-playground/styles.js
@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+
+export default StyleSheet.create(
+    {
+        container: {
+            
+        },
+    }
+);
\ No newline at end of file