diff --git a/.babelrc b/.babelrc
index 585233e..84a9bed 100644
--- a/.babelrc
+++ b/.babelrc
@@ -9,6 +9,7 @@
                 "extensions": [".js", ".ios.js", ".android.js"],
                 "alias": {
                     "_App": "./app",
+                    "_Constants": "./app/constants",
                     "_Fonts": "./app/assets/fonts",
                     "_Images": "./app/assets/images",
                     "_I18N": "./app/assets/i18n",
diff --git a/app/constants/ListRoutes.js b/app/constants/ListRoutes.js
new file mode 100644
index 0000000..2f8afa0
--- /dev/null
+++ b/app/constants/ListRoutes.js
@@ -0,0 +1,33 @@
+import IoniconsI from 'react-native-vector-icons/Ionicons';
+
+export const PermissionsList = [
+    {
+        navigateRoute: 'ContactsList',
+        iconName: 'person-outline',
+        label: 'Contacts',
+    },
+    {
+        navigateRoute: 'Location',
+        iconName: 'location-outline',
+        label: 'Location',
+    },
+];
+
+export const ChartList = [
+    {
+        navigateRoute: 'VictoryBarChart',
+        iconName: 'bar-chart',
+        label: 'Victory BarChart',
+    },
+    /* No iOS code for these 2 pages, so they're at the bottom of the list */
+    {
+        navigateRoute: 'LineChartScreen',
+        iconName: 'bar-chart',
+        label: 'Line Chart',
+    },
+    {
+        navigateRoute: 'RadarhartScreen',
+        iconName: 'pie-chart-outline',
+        label: 'Radar Chart',
+    },
+];
diff --git a/app/screens/charts/index.js b/app/screens/charts/index.js
new file mode 100644
index 0000000..e3f2faf
--- /dev/null
+++ b/app/screens/charts/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import RenderListRoutes from '_Shared/RenderListRoutes';
+import { PermissionsList } from '_Constants/ListRoutes';
+
+const Permissions = () => {
+    return (
+        <RenderListRoutes
+            headerTitle="Permissions"
+            routesArr={PermissionsList}
+        />
+    );
+};
+
+export default Permissions;
diff --git a/app/screens/permissions/index.js b/app/screens/permissions/index.js
index 762471b..e3f2faf 100644
--- a/app/screens/permissions/index.js
+++ b/app/screens/permissions/index.js
@@ -1,65 +1,15 @@
 import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import IoniconsI from 'react-native-vector-icons/Ionicons';
 
-import {
-    ThemedContainer,
-    ThemedBody,
-    ThemedHeading,
-    ThemedCard,
-    ThemedText,
-} from '_Shared/Comps.themed';
-import Header from '_Shared/Header';
-import { useThemeStore } from '_Store/theme.store';
-import CommonStyles from '_Themes/CommonStyles';
+import RenderListRoutes from '_Shared/RenderListRoutes';
+import { PermissionsList } from '_Constants/ListRoutes';
 
 const Permissions = () => {
-    const navigation = useNavigation();
-    const { themeObj } = useThemeStore();
-
     return (
-        <ThemedContainer>
-            <Header title="Permissions" openDrawer />
-            <ThemedBody>
-                <ThemedHeading>
-                    Click on any of the items to proceed further
-                </ThemedHeading>
-
-                <TouchableOpacity
-                    onPress={() => navigation.navigate('ContactsList')}>
-                    <ThemedCard style={styles.card}>
-                        <ThemedText>
-                            <IoniconsI
-                                name="person-outline"
-                                color={themeObj.colors.text}
-                                size={CommonStyles.icons.drawerIcon}
-                            />{' '}
-                            Contacts
-                        </ThemedText>
-                    </ThemedCard>
-                </TouchableOpacity>
-
-                <TouchableOpacity
-                    onPress={() => navigation.navigate('Location')}>
-                    <ThemedCard style={styles.card}>
-                        <ThemedText>
-                            <IoniconsI
-                                name="location-outline"
-                                color={themeObj.colors.text}
-                                size={CommonStyles.icons.drawerIcon}
-                            />{' '}
-                            Location
-                        </ThemedText>
-                    </ThemedCard>
-                </TouchableOpacity>
-            </ThemedBody>
-        </ThemedContainer>
+        <RenderListRoutes
+            headerTitle="Permissions"
+            routesArr={PermissionsList}
+        />
     );
 };
 
-const styles = StyleSheet.create({
-    card: { marginTop: 30, alignItems: 'center' },
-});
-
 export default Permissions;
diff --git a/app/shared/RenderListRoutes.js b/app/shared/RenderListRoutes.js
new file mode 100644
index 0000000..a01e49e
--- /dev/null
+++ b/app/shared/RenderListRoutes.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import IoniconsI from 'react-native-vector-icons/Ionicons';
+
+import {
+    ThemedContainer,
+    ThemedBody,
+    ThemedHeading,
+    ThemedCard,
+    ThemedText,
+} from '_Shared/Comps.themed';
+import Header from '_Shared/Header';
+import { useThemeStore } from '_Store/theme.store';
+import CommonStyles from '_Themes/CommonStyles';
+
+const RenderListRoutes = ({ headerTitle, routesArr }) => {
+    const navigation = useNavigation();
+    const { themeObj } = useThemeStore();
+
+    return (
+        <ThemedContainer>
+            <Header title={headerTitle} openDrawer />
+            <ThemedBody>
+                <ThemedHeading>
+                    Click on any of the items to proceed further
+                </ThemedHeading>
+
+                {routesArr.map((routeName, index) => (
+                    <TouchableOpacity
+                        key={index}
+                        onPress={() =>
+                            navigation.navigate(routeName.navigateRoute)
+                        }>
+                        <ThemedCard style={styles.card}>
+                            <ThemedText>
+                                {routeName.iconName && (
+                                    <IoniconsI
+                                        name={routeName.iconName}
+                                        color={themeObj.colors.text}
+                                        size={CommonStyles.icons.drawerIcon}
+                                    />
+                                )}{' '}
+                                {routeName.label}
+                            </ThemedText>
+                        </ThemedCard>
+                    </TouchableOpacity>
+                ))}
+            </ThemedBody>
+        </ThemedContainer>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: { marginTop: 30, alignItems: 'center' },
+});
+
+RenderListRoutes.PropTypes = {
+    headerTitle: PropTypes.string,
+    routesArr: PropTypes.object,
+}
+
+RenderListRoutes.defaultProps = {
+    headerTitle: 'headerTitle',
+    routesArr: [],
+}
+
+export default RenderListRoutes;