diff --git a/components/Container.js b/components/Container.js
new file mode 100644
index 0000000..9adc3e2
--- /dev/null
+++ b/components/Container.js
@@ -0,0 +1,15 @@
+import { View, StyleSheet } from 'react-native';
+
+const Container = ({ children, style }) => {
+    return <View style={[styles.container, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex:1,
+        flexDirection: 'column',
+        padding: 20,
+    },
+});
+
+export default Container;
diff --git a/screens/ScreenHome.js b/screens/ScreenHome.js
index 90e57ba..e2cec15 100644
--- a/screens/ScreenHome.js
+++ b/screens/ScreenHome.js
@@ -1,22 +1,28 @@
-import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
+import Container from '../components/Container';
 
 const ScreenHome = ({ navigation }) => {
     return (
-        <View style={styles.container}>
-            <Text>Ini halaman Home</Text>
-            <StatusBar style="auto" />
-        </View>
+        <Container>
+            <View style={styles.header}>
+                <Text>Ini Header</Text>
+            </View>
+            <View style={styles.main}>
+                <Text>Ini Main Content</Text>
+            </View>
+        </Container>
     );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
+    header: {
+        flex:1, 
+        backgroundColor:"#FFDDDD"
     },
+    main: {
+        flex:3, 
+        backgroundColor:"#DDFFDD"
+    }
 });
 
 export default ScreenHome;
\ No newline at end of file