diff --git a/package.json b/package.json
index ce9f83b..05c4127 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@react-native-firebase/crashlytics": "^14.2.3",
     "@react-native-firebase/messaging": "^14.2.3",
     "@react-navigation/material-bottom-tabs": "^6.0.9",
+    "@react-navigation/material-top-tabs": "^6.0.6",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
     "color": "^4.2.0",
@@ -33,10 +34,12 @@
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-linear-gradient": "^2.5.6",
+    "react-native-pager-view": "^5.4.9",
     "react-native-paper": "^4.11.2",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.10.2",
     "react-native-shimmer-placeholder": "^2.0.8",
+    "react-native-tab-view": "^3.1.1",
     "react-native-vector-icons": "^9.0.0",
     "react-native-webview": "^11.17.0",
     "tailwind-react-native-classnames": "^1.5.1"
diff --git a/src/screens/ArticleDetail/Index.tsx b/src/screens/ArticleDetail/Index.tsx
index 041161e..4c6ceed 100644
--- a/src/screens/ArticleDetail/Index.tsx
+++ b/src/screens/ArticleDetail/Index.tsx
@@ -4,7 +4,7 @@ import { Avatar, Button, Card, Paragraph } from 'react-native-paper'
 import { useTheme } from 'react-native-paper'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import tw from 'tailwind-react-native-classnames'
-import { getRelativeTime } from '../Home/ArticleListItem'
+import { getRelativeTime } from '../Common/ArticleListItem'
 
 const ArticleDetail = (props) => {
 	const { navigation } = props
diff --git a/src/screens/Categories/ArticleList.tsx b/src/screens/Categories/ArticleList.tsx
new file mode 100644
index 0000000..56b0782
--- /dev/null
+++ b/src/screens/Categories/ArticleList.tsx
@@ -0,0 +1,20 @@
+import React, { useCallback, useState } from 'react'
+import { FlatList } from 'react-native'
+import ArticleListItem from '../Common/ArticleListItem'
+
+const ArticleList = ({ articles, refetch, navigation }) => {
+	const [refreshing, setRefreshing] = useState(false)
+
+	const handleRefresh = useCallback(() => {
+		setRefreshing(true)
+		refetch().then(() => setRefreshing(false))
+	}, [])
+
+	const renderItem = useCallback((info) => {
+		return <ArticleListItem navigation={navigation} article={info.item} />
+	}, [])
+
+	return <FlatList data={articles} renderItem={renderItem} keyExtractor={(item) => item._id} refreshing={refreshing} onRefresh={handleRefresh} />
+}
+
+export default ArticleList
diff --git a/src/screens/Categories/GET_CATEGORIES_QUERY.ts b/src/screens/Categories/GET_CATEGORIES_QUERY.ts
new file mode 100644
index 0000000..ce7357d
--- /dev/null
+++ b/src/screens/Categories/GET_CATEGORIES_QUERY.ts
@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+export const GET_CATEGORIES_QUERY = gql`
+	query headlineScreenQuery {
+		getArticles {
+			_id
+			title
+			shortDescription
+			content
+			link
+			imageLink
+			createdDate
+			modifiedDate
+			category
+			tags
+			totalWeight
+			source {
+				name
+				logoLink
+			}
+		}
+	}
+`
diff --git a/src/screens/Categories/Index.tsx b/src/screens/Categories/Index.tsx
index 8b999f7..4c31cfd 100644
--- a/src/screens/Categories/Index.tsx
+++ b/src/screens/Categories/Index.tsx
@@ -1,15 +1,30 @@
 import React from 'react'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import MainScreen from './MainScreen'
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
+import { useQuery } from '@apollo/client'
+import ArticleList from './ArticleList'
+import { GET_CATEGORIES_QUERY } from './GET_CATEGORIES_QUERY'
 
-const Stack = createNativeStackNavigator()
+const Tab = createMaterialTopTabNavigator()
+
+const categoryTabs = ({ navigation }) => {
+	const { loading, error, refetch, data } = useQuery(GET_CATEGORIES_QUERY)
+
+	const articles = data?.getArticles
+
+	const tabNames = ['news', 'entertainment', 'sports', 'cartoon', 'business', 'social', 'health', 'technology', 'share', 'agriculture']
 
-const Home = () => {
 	return (
-		<Stack.Navigator initialRouteName="Main" screenOptions={{ headerShown: false }}>
-			<Stack.Screen name="MainScreen" component={MainScreen} />
-		</Stack.Navigator>
+		<Tab.Navigator>
+			{tabNames.map((tabname, index) => {
+				const categoryArricles = articles?.filter((a) => a.category === tabname)
+				return (
+					<Tab.Screen name={tabname} options={{ tabBarScrollEnabled: true, tabBarBounces: true }} key={index}>
+						{() => <ArticleList articles={categoryArricles} refetch={refetch} navigation={navigation} />}
+					</Tab.Screen>
+				)
+			})}
+		</Tab.Navigator>
 	)
 }
 
-export default Home
+export default categoryTabs
diff --git a/src/screens/Categories/MainScreen.tsx b/src/screens/Categories/MainScreen.tsx
deleted file mode 100644
index abdad3b..0000000
--- a/src/screens/Categories/MainScreen.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { firebase } from '@react-native-firebase/messaging'
-import React, { useEffect, useState } from 'react'
-import { Button, TextInput } from 'react-native-paper'
-
-interface props {
-	navigation: any
-	route: { params: any }
-}
-
-const MainScreen = ({ navigation }: props) => {
-	const [text, setText] = useState('')
-
-	useEffect(() => {
-		firebase
-			.messaging()
-			.getToken()
-			.then((token) => {
-				console.log('printing token', token)
-				setText(token)
-			})
-		//
-	}, [])
-
-	return (
-		<>
-			<Button
-				onPress={() => {
-					navigation.navigate('ArticleDetail', { article: 'art' })
-				}}
-				icon="camera"
-				mode="contained"
-			>
-				go to detail
-			</Button>
-			<TextInput label="Token" value={text} onChangeText={(txt) => setText(txt)} multiline={true} />
-		</>
-	)
-}
-
-export default MainScreen
diff --git a/src/screens/Home/ArticleListItem.tsx b/src/screens/Common/ArticleListItem.tsx
similarity index 100%
rename from src/screens/Home/ArticleListItem.tsx
rename to src/screens/Common/ArticleListItem.tsx
index 7040dc4..951da73 100644
--- a/src/screens/Home/ArticleListItem.tsx
+++ b/src/screens/Common/ArticleListItem.tsx
@@ -1,5 +1,5 @@
-import moment from 'moment'
 import React from 'react'
+import moment from 'moment'
 import { View } from 'react-native'
 import { TouchableRipple, Avatar, Card, Paragraph } from 'react-native-paper'
 import tw from 'tailwind-react-native-classnames'
diff --git a/src/screens/Home/Index.tsx b/src/screens/Home/Index.tsx
index 3922188..b51a92c 100644
--- a/src/screens/Home/Index.tsx
+++ b/src/screens/Home/Index.tsx
@@ -2,7 +2,7 @@ import { useLazyQuery, useQuery } from '@apollo/client'
 import { firebase } from '@react-native-firebase/messaging'
 import React, { useCallback, useEffect, useState } from 'react'
 import { FlatList } from 'react-native'
-import ArticleListItem from './ArticleListItem'
+import ArticleListItem from '../Common/ArticleListItem'
 import { GET_ARTICLES_QUERY } from './GET_ARTICLES_QUERY'
 import ShimmerCard from './ShimmerCard'
 
diff --git a/yarn.lock b/yarn.lock
index 46e08a0..20be139 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1351,6 +1351,14 @@
   dependencies:
     "@react-navigation/elements" "^1.2.1"
 
+"@react-navigation/material-top-tabs@^6.0.6":
+  version "6.0.6"
+  resolved "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz#efabd409e970c76cac4b9c61ac4d9bf735cf6d39"
+  integrity sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g==
+  dependencies:
+    color "^3.1.3"
+    warn-once "^0.1.0"
+
 "@react-navigation/native-stack@^6.2.5":
   version "6.2.5"
   resolved "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.2.5.tgz#bfa19516cf434f831e6d4ba28d32b9bc5436d181"
@@ -2540,7 +2548,7 @@ color-string@^1.6.0, color-string@^1.9.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.1.2:
+color@^3.1.2, color@^3.1.3:
   version "3.2.1"
   resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -6268,6 +6276,11 @@ react-native-linear-gradient@^2.5.6:
   resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
   integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==
 
+react-native-pager-view@^5.4.9:
+  version "5.4.9"
+  resolved "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz#c0d40847cfeda5a4e729b53271b0ee0fedff3eb5"
+  integrity sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA==
+
 react-native-paper@^4.11.2:
   version "4.11.2"
   resolved "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.11.2.tgz#4ae73282da9be3bf20760c609d3273643d1dd4a9"
@@ -6295,6 +6308,11 @@ react-native-shimmer-placeholder@^2.0.8:
   resolved "https://registry.npmjs.org/react-native-shimmer-placeholder/-/react-native-shimmer-placeholder-2.0.8.tgz#1b6deadc49319a4e46cd6ed7eac32d34355de3d5"
   integrity sha512-I9Fn7f/dAPSQK+Aj0DXC1PG302iE3HXCsRJu5ic6CldJaAzkynEXHVGOTcW+mEcgXM+GvviITjS8TsYrxKvX5Q==
 
+react-native-tab-view@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
+  integrity sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==
+
 react-native-vector-icons@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1"