diff --git a/App.tsx b/App.tsx
index baae682..68b8015 100644
--- a/App.tsx
+++ b/App.tsx
@@ -15,6 +15,8 @@ import TabOneScreen from './screens/TabOneScreen';
 import TabTwoScreen from './screens/TabTwoScreen';
 import ProductDetail from './screens/ProductDetail';
 import CartDetail from './screens/Cart';
+import ArticleHome from './screens/ArticleHome';
+import ArticleList from './screens/ArticleList';
 
 export default function App() {
     const isLoadingComplete = useCachedResources();
@@ -104,6 +106,30 @@ const CartPage = ({ navigation }: { navigation: any }) => {
     );
 }
 
+const ArticleHomePage = ({ navigation }: { navigation: any }) => {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen
+                name="homepage"
+                component={ArticleHome}
+                options={HeaderAllPageOpion}
+            />
+        </Stack.Navigator>
+    );
+}
+
+const ArticleListPage = ({ navigation }: { navigation: any }) => {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen
+                name="homepage"
+                component={ArticleList}
+                options={HeaderAllPageOpion}
+            />
+        </Stack.Navigator>
+    );
+}
+
 const MainContentRouter = () => {
     return (
         <Drawer.Navigator>
@@ -111,6 +137,8 @@ const MainContentRouter = () => {
             <Drawer.Screen name="Laptop, Máy Tính Xách Tay" component={ProductList} />
             <Drawer.Screen name="Trang san pham" component={ProductDetailRec} />
             <Drawer.Screen name="cart" component={CartPage} />
+            <Drawer.Screen name="Tin tức" component={ArticleHomePage} />
+            <Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
         </Drawer.Navigator>
     );
 }
diff --git a/components/article/ArticleItem.tsx b/components/article/ArticleItem.tsx
new file mode 100644
index 0000000..aa019f5
--- /dev/null
+++ b/components/article/ArticleItem.tsx
@@ -0,0 +1,86 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
+import { Text, View, } from '../Themed';
+import { TextInput } from 'react-native-gesture-handler';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Animated, { Easing } from 'react-native-reanimated';
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const ArticleItem = (props: {id: number, title: string, image: string, category: string, visit: number, comment: number, createDate: string, summary: string, styleTitle: object}) => {
+    const {id, title, image, category, visit, comment, createDate, summary, styleTitle} = props;
+    return (
+        <View key={id} style={styles.articleItem}>
+            <Image style={styles.articleItemImg} source={{ uri: image }} />
+            <View style={styles.articleItemInfo}>
+                <Text style={[styles.articleItemName, styleTitle]} numberOfLines={4}>{title}</Text>
+                <View style={styles.articleItemTimeView}>
+                    <Text style={styles.articleItemTime}>{createDate}</Text>
+                    <View style={styles.articleItemView}>
+                        <FontAwesome style={styles.articleItemIcon} name="comment" />
+                        <Text style={styles.articleItemViewText}>{comment}</Text>
+                    </View>
+                    <View style={styles.articleItemView}>
+                        <FontAwesome style={styles.articleItemIcon} name="eye" />
+                        <Text style={styles.articleItemViewText}>{visit}</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export { ArticleItem };
+
+const styles = StyleSheet.create({
+    articleItem: {
+        width: '100%',
+        marginBottom: 20,
+    },
+    articleItemImg: {
+        width: '100%',
+        height: ratio * 450,
+        marginBottom: 10,
+    },
+    articleItemInfo: {
+        width: '100%',
+    },
+    articleItemName: {
+        width: '100%',
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#222222',
+        marginBottom: 8,
+    },
+    articleItemTimeView: {
+        flexDirection: 'row',
+    },
+    articleItemTime: {
+        fontSize: 13,
+        color: '#888',
+        alignItems: 'center'
+    },
+    articleItemView: {
+        flexDirection: 'row',
+        marginLeft: 10,
+        alignItems: 'center'
+    },
+    articleItemIcon: {
+        fontSize: 11,
+        color: '#2e9fff',
+        marginRight: 2,
+    },
+    articleItemViewText: {
+        fontSize: 13,
+        color: '#888'
+    },
+})
\ No newline at end of file
diff --git a/screens/ArticleHome.tsx b/screens/ArticleHome.tsx
new file mode 100644
index 0000000..711da12
--- /dev/null
+++ b/screens/ArticleHome.tsx
@@ -0,0 +1,556 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
+
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+import { ArticleItem } from '../components/article/ArticleItem';
+
+export default function ArticleHome() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <View style={styles.brecrumb}>
+                    <Text style={styles.brecrumbText}>Trang chủ</Text>
+                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
+                    <Text style={styles.brecrumbTextLast}>Tin tức</Text>
+                </View>
+
+                <ArticleHomeNewFirstBlock />
+
+                <ArticleNewHome />
+
+                <ArticleHot />
+
+                <ArticleListHome />
+
+                <PolicyFooter />
+
+                <Social />
+
+                <ShowroomList />
+
+                <FooterInfo />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+const dataArticle = [
+    {
+        id: 1,
+        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '12-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 2,
+        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 8:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 3,
+        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 5:30 am',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 4,
+        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '22-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+]
+
+const ArticleHomeNewFirstBlock = () => {
+    const dataArticleHome = dataArticle;
+    return (
+        <View style={styles.boxArticleHomeNew}>
+            <View style={styles.boxArticleHomeNewList}>
+                {
+                    dataArticleHome.map((item, index) => {
+                        if (index == 0) {
+                            return (
+                                <View key={item.id} style={styles.boxArticleHomeNewFirst}>
+                                    <Image style={styles.boxArticleHomeNewFirstImg} source={{ uri: item.image }} />
+                                    <View style={styles.boxArticleHomeNewFirstInfo}>
+                                        <Text style={styles.boxArticleHomeNewFirstInfoCat}>{item.category}</Text>
+                                        <Text style={styles.boxArticleHomeNewFirstInfoName} numberOfLines={2}>{item.title}</Text>
+                                    </View>
+                                </View>
+                            )
+                        } else if (index > 0 && index < 5) {
+                            return (
+                                <View key={item.id} style={styles.boxArticleHomeNewListItem}>
+                                    <Image style={styles.boxArticleHomeNewListImg} source={{ uri: item.image }} />
+                                    <View style={styles.boxArticleHomeNewListItemInfo}>
+                                        <Text style={styles.boxArticleHomeNewListItemInfoName} numberOfLines={2}>{item.title}</Text>
+                                        <Text style={styles.boxArticleHomeNewListItemInfoTime}>{item.createDate}</Text>
+                                    </View>
+                                </View>
+                            )
+                        }
+                    })
+                }
+            </View>
+        </View>
+    )
+}
+
+const ArticleNewHome = () => {
+    const dataArticleNew = dataArticle;
+    return (
+        <View style={styles.boxArticleNewHome}>
+            <View style={styles.boxArticleNewHomeTitle}>
+                <Text style={styles.boxArticleNewHomeTitleText}>Bài viết mới nhất</Text>
+                <View style={styles.boxArticleNewHomeTitleLine}></View>
+            </View>
+            <View style={styles.boxArticleNewHomeList}>
+                {
+                    dataArticleNew.map(item =>
+                        <View style={styles.boxArticleNewHomeItem} key={item.id}>
+                            <View style={styles.boxArticleNewHomeItemcontent}>
+                                <View style={styles.boxArticleNewHomeItemInfo}>
+                                    <Text style={styles.boxArticleNewHomeItemName} numberOfLines={4}>{item.title}</Text>
+                                    <View style={styles.boxArticleNewHomeItemTimeView}>
+                                        <Text style={styles.boxArticleNewHomeItemTime}>{item.createDate}</Text>
+                                        <View style={styles.boxArticleNewHomeItemView}>
+                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
+                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
+                                        </View>
+                                        <View style={styles.boxArticleNewHomeItemView}>
+                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
+                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
+                                        </View>
+                                    </View>
+                                </View>
+                                <View style={styles.boxArticleNewHomeItemImageCt}>
+                                    <Image style={styles.boxArticleNewHomeItemImage} source={{ uri: item.image }} />
+                                </View>
+                            </View>
+                            <Text style={styles.boxArticleNewHomeItemSummary} numberOfLines={2}>{item.summary}</Text>
+                        </View>
+                    )
+                }
+            </View>
+        </View>
+    )
+}
+
+const ArticleHot = () => {
+    const dataArticleNew = dataArticle;
+    let counter = 1;
+    return (
+        <View style={styles.boxArticleHomeHot}>
+            <View style={styles.boxArticleNewHomeTitle}>
+                <Text style={styles.boxArticleNewHomeTitleText}>Bài viết nổi bật</Text>
+                <View style={styles.boxArticleNewHomeTitleLine}></View>
+            </View>
+            <View style={styles.boxArticleNewHomeList}>
+                {
+                    dataArticleNew.map((item, index) => {
+                        if (index == 0) {
+                            return (
+                                <View key={item.id} style={styles.articleHotFirst}>
+                                    <Image style={styles.articleHotFirstImg} source={{ uri: item.image }} />
+                                    <View style={styles.articleHotFirstInfo}>
+                                        <Text style={styles.articleHotFirstInfoNum}>01</Text>
+                                        <View style={styles.articleHotFirstInfoContent}>
+                                            <Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
+                                            <Pressable style={styles.articleHotSahre}>
+                                                <FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
+                                                <Text style={styles.articleHotSahreText}>Chia sẻ</Text>
+                                            </Pressable>
+                                        </View>
+                                    </View>
+                                </View>
+                            )
+                        } else if (index > 0 && index < 4) {
+                            { counter++ }
+                            return (
+                                <View key={item.id} style={styles.articleHotItem}>
+                                    <View style={styles.articleHotInfo}>
+                                        <Text style={styles.articleHotNum}>0{counter}</Text>
+                                        <View style={styles.articleHotInfoContent}>
+                                            <Text style={styles.articleHotName} numberOfLines={2}>{item.title}</Text>
+                                            <Pressable style={styles.articleHotSahre}>
+                                                <FontAwesome style={styles.articleHotSahreIcon} name="share-alt" />
+                                                <Text style={styles.articleHotSahreText}>Chia sẻ</Text>
+                                            </Pressable>
+                                        </View>
+                                    </View>
+                                </View>
+                            )
+                        }
+                    }
+                    )
+                }
+            </View>
+        </View>
+    )
+}
+
+const ArticleListHome = () => {
+    const listArticleCat = [
+        'Review sản phẩm',
+        'Tin game',
+        'Tin khuyến mãi',
+        'Sự kiện'
+    ];
+    const dataArtileList = dataArticle;
+    const styleTitle = {
+        fontSize: 14,
+    }
+    return (
+        <View>
+            {
+                listArticleCat.map((item, index) =>
+                    <View style={styles.boxArticleHomeList} key={index}>
+                        <View style={styles.boxArticleNewHomeTitle}>
+                            <Text style={styles.boxArticleNewHomeTitleText}>{item}</Text>
+                            <View style={styles.boxArticleNewHomeTitleLine}></View>
+                        </View>
+                        <View>
+                            {
+                                dataArtileList.map(item => <ArticleItem key={item.id} id={item.id} title={item.title}
+                                    image={item.image} category={item.category} visit={item.visit}
+                                    comment={item.comment} createDate={item.createDate} summary={item.summary} styleTitle={styleTitle} />)
+                            }
+                        </View>
+                        <View style={styles.boxArticleHomeListVm}>
+                            <View style={styles.boxArticleHomeListVmLineL}></View>
+                            <Pressable style={styles.boxArticleHomeListVmBt}>
+                                <Text style={styles.boxArticleHomeListVmText}>Xem thêm</Text>
+                            </Pressable>
+                            <View style={styles.boxArticleHomeListVmLineR}></View>
+                        </View>
+                    </View>
+                )
+            }
+        </View>
+
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    brecrumb: {
+        display: 'flex',
+        width: winWidth,
+        paddingLeft: 10,
+        paddingRight: 10,
+        flexDirection: 'row',
+        height: 18,
+        alignItems: 'center',
+        marginTop: 10,
+        marginBottom: 10,
+    },
+    brecrumbText: {
+        fontSize: 13,
+        color: '#222',
+    },
+    brecrumbTextLast: {
+        fontSize: 13,
+        color: '#b7b7b7',
+    },
+    brecrumbIcon: {
+        fontSize: 13,
+        color: '#222',
+        marginLeft: 6,
+        marginRight: 6
+    },
+    boxArticleHomeNew: {
+        paddingHorizontal: 10,
+        width: winWidth,
+        marginBottom: 10,
+    },
+    boxArticleHomeNewFirst: {
+        marginBottom: 20,
+        position: 'relative',
+    },
+    boxArticleHomeNewFirstImg: {
+        width: '100%',
+        height: 450 * ratio,
+    },
+    boxArticleHomeNewFirstInfo: {
+        padding: 10,
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        width: '100%',
+    },
+    boxArticleHomeNewFirstInfoCat: {
+        backgroundColor: '#ce0707',
+        width: 150,
+        maxWidth: '100%',
+        textAlign: 'center',
+        color: '#fff',
+        textTransform: 'uppercase',
+        paddingVertical: 5,
+        overflow: 'hidden',
+        marginBottom: 8,
+    },
+    boxArticleHomeNewFirstInfoName: {
+        width: '100%',
+        fontSize: 30,
+        fontWeight: 'bold',
+        color: '#fff',
+    },
+    boxArticleHomeNewList: {
+        flexDirection: 'column',
+    },
+    boxArticleHomeNewListItem: {
+        width: '100%',
+        marginBottom: 10,
+    },
+    boxArticleHomeNewListImg: {
+        width: '100%',
+        height: 450 * ratio,
+    },
+    boxArticleHomeNewListItemInfo: {},
+    boxArticleHomeNewListItemInfoName: {
+        marginVertical: 7,
+        width: '100%',
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#222222'
+    },
+    boxArticleHomeNewListItemInfoTime: {
+        fontSize: 13,
+        color: '#888888'
+    },
+    boxArticleNewHome: {
+        width: winWidth,
+        paddingHorizontal: 10,
+    },
+    boxArticleNewHomeTitle: {
+        paddingVertical: 10,
+        marginBottom: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e1e1e1',
+    },
+    boxArticleNewHomeTitleText: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#ce0707',
+        textTransform: 'uppercase',
+    },
+    boxArticleNewHomeTitleLine: {
+        width: 100,
+        height: 1,
+        backgroundColor: '#ce0707',
+        position: 'absolute',
+        bottom: -1,
+        left: 0,
+    },
+    boxArticleNewHomeList: {
+        flexDirection: 'column',
+        width: '100%'
+    },
+    boxArticleNewHomeItem: {
+        marginBottom: 20,
+        width: '100%',
+        flexDirection: 'column',
+    },
+    boxArticleNewHomeItemcontent: {
+        width: '100%',
+        marginBottom: 10,
+        flexDirection: 'row'
+    },
+    boxArticleNewHomeItemInfo: {
+        width: '65%',
+        paddingRight: 10,
+    },
+    boxArticleNewHomeItemName: {
+        width: '100%',
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#222222',
+        marginBottom: 8,
+    },
+    boxArticleNewHomeItemTimeView: {
+        flexDirection: 'row',
+    },
+    boxArticleNewHomeItemTime: {
+        fontSize: 13,
+        color: '#888',
+        alignItems: 'center'
+    },
+    boxArticleNewHomeItemView: {
+        flexDirection: 'row',
+        marginLeft: 10,
+        alignItems: 'center'
+    },
+    boxArticleNewHomeItemIcon: {
+        fontSize: 11,
+        color: '#2e9fff',
+        marginRight: 2,
+    },
+    boxArticleNewHomeItemViewText: {
+        fontSize: 13,
+        color: '#888'
+    },
+    boxArticleNewHomeItemImageCt: {
+        width: '35%',
+        paddingTop: '35%',
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    boxArticleNewHomeItemImage: {
+        width: '100%',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    boxArticleNewHomeItemSummary: {},
+    boxArticleHomeHot: {
+        width: winWidth,
+        paddingHorizontal: 10,
+    },
+    articleHotFirst: {
+        marginBottom: 20,
+        paddingBottom: 10,
+        borderBottomColor: '#e1e1e1',
+        borderBottomWidth: 1,
+    },
+    articleHotFirstImg: {
+        width: '100%',
+        height: ratio * 450,
+        marginBottom: 10,
+    },
+    articleHotFirstInfo: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    articleHotFirstInfoNum: {
+        width: 75,
+        paddingRight: 10,
+        fontSize: 50,
+        fontWeight: 'bold',
+        color: '#cacaca',
+        fontStyle: 'italic',
+    },
+    articleHotFirstInfoContent: {
+        width: winWidth - 95,
+        paddingLeft: 10,
+        borderLeftWidth: 1,
+        borderLeftColor: '#e1e1e1'
+    },
+    articleHotName: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#222',
+        marginBottom: 10,
+    },
+    articleHotSahre: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    articleHotSahreIcon: {
+        color: '#45629f',
+        marginRight: 3,
+    },
+    articleHotSahreText: {
+        color: '#999'
+    },
+    articleHotItem: {
+        marginBottom: 20,
+    },
+    articleHotInfo: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    articleHotNum: {
+        width: 40,
+        height: 40,
+        marginRight: 10,
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#222',
+        fontStyle: 'italic',
+        backgroundColor: '#f0eded',
+        textAlign: 'center',
+        lineHeight: 40,
+        borderRadius: 20,
+        overflow: 'hidden',
+    },
+    articleHotInfoContent: {
+        width: winWidth - 70,
+        paddingLeft: 10,
+    },
+    boxArticleHomeList: {
+        width: winWidth,
+        paddingHorizontal: 10,
+        marginBottom: 20,
+    },
+    boxArticleHomeListVm: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    boxArticleHomeListVmLineL: {
+        width: halfWinWidth - 85,
+        height: 1,
+        backgroundColor: '#e1e1e1'
+    },
+    boxArticleHomeListVmLineR: {
+        width: halfWinWidth - 85,
+        height: 1,
+        backgroundColor: '#e1e1e1'
+    },
+    boxArticleHomeListVmBt: {
+        width: 115,
+        height: 34,
+        borderRadius: 3,
+        borderWidth: 1,
+        borderColor: '#e1e1e1',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    boxArticleHomeListVmText: {
+        color: '#888'
+    },
+})
\ No newline at end of file
diff --git a/screens/ArticleList.tsx b/screens/ArticleList.tsx
new file mode 100644
index 0000000..51bfd93
--- /dev/null
+++ b/screens/ArticleList.tsx
@@ -0,0 +1,164 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
+import Constants from 'expo-constants';
+import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
+
+import EditScreenInfo from '../components/EditScreenInfo';
+import { Text, View, } from '../components/Themed';
+import useColorScheme from '../hooks/useColorScheme';
+import { TextInput } from 'react-native-gesture-handler';
+import { RadioButton, Checkbox } from 'react-native-paper';
+import { Picker } from '@react-native-picker/picker';
+import { ArticleItem } from '../components/article/ArticleItem';
+
+export default function ArticleList() {
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView>
+                <View style={styles.brecrumb}>
+                    <Text style={styles.brecrumbText}>Trang chủ</Text>
+                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
+                    <Text style={styles.brecrumbTextLast}>Tin tức</Text>
+                </View>
+
+                <ListArticleCategory />
+
+                <PolicyFooter />
+
+                <Social />
+
+                <ShowroomList />
+
+                <FooterInfo />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+const winWidth = Dimensions.get('window').width; //full width
+const winHeight = Dimensions.get('window').height; //full height
+const winWidthP10 = winWidth - 20;
+const halfWinWidth = winWidth / 2;
+const ratio = winWidthP10 / 850; //541 is actual image width
+
+const dataArticle = [
+    {
+        id: 1,
+        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '12-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 2,
+        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 8:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 3,
+        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '13-03-2021, 5:30 am',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+    {
+        id: 4,
+        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
+        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
+        category: 'Review sản phẩm',
+        visit: 10,
+        comment: 40,
+        createDate: '22-03-2021, 5:30 pm',
+        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
+    },
+]
+
+const ListArticleCategory = () => {
+    const dataArtileList = dataArticle;
+    const styleTitle = {
+        fontSize: 16,
+    }
+    return (
+        <View style={styles.boxArtcleCategory}>
+            {
+                dataArtileList.map(item => <ArticleItem key={item.id} id={item.id} title={item.title}
+                    image={item.image} category={item.category} visit={item.visit}
+                    comment={item.comment} createDate={item.createDate} summary={item.summary} styleTitle={styleTitle} />)
+            }
+
+            <View style={styles.boxArtcleCategoryLoadMore}>
+                <Pressable style={styles.boxArtcleCategoryLoadMoreButton}>
+                    <Text style={styles.boxArtcleCategoryLoadMoreText}>Tải thêm</Text>
+                </Pressable>
+            </View>
+        </View>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+    },
+    brecrumb: {
+        display: 'flex',
+        width: winWidth,
+        paddingLeft: 10,
+        paddingRight: 10,
+        flexDirection: 'row',
+        height: 18,
+        alignItems: 'center',
+        marginTop: 10,
+        marginBottom: 10,
+    },
+    brecrumbText: {
+        fontSize: 13,
+        color: '#222',
+    },
+    brecrumbTextLast: {
+        fontSize: 13,
+        color: '#b7b7b7',
+    },
+    brecrumbIcon: {
+        fontSize: 13,
+        color: '#222',
+        marginLeft: 6,
+        marginRight: 6
+    },
+    boxArtcleCategory: {
+        paddingHorizontal: 10,
+        marginBottom: 20,
+        width: winWidth,
+    },
+    boxArtcleCategoryLoadMore: {
+    },
+    boxArtcleCategoryLoadMoreButton: {
+        width: '100%',
+        height: 36,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#ce0707'
+    },
+    boxArtcleCategoryLoadMoreText: {
+        color: '#fff'
+    },
+})
\ No newline at end of file