diff --git a/app/(tabs)/[id].tsx b/app/(tabs)/[id].tsx
new file mode 100644
index 0000000..d92cd09
--- /dev/null
+++ b/app/(tabs)/[id].tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useLocalSearchParams, Stack } from 'expo-router';
+
+const NewPage = () => {
+  const { id } = useLocalSearchParams();
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ headerShown: false }} />
+      <Text style={styles.text}>{id} Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF', // Add your desired background color
+  },
+  text: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+    color: '#333', // Add your desired text color
+  },
+});
+
+export default NewPage;
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index e9b6011..ffc0085 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,7 +1,8 @@
+
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { Tabs } from "expo-router";
+import { Link, Tabs } from "expo-router";
 import React from "react";
-import { useColorScheme } from "react-native";
+import { Pressable, useColorScheme } from "react-native";
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
@@ -19,11 +20,33 @@ export default function RootLayout() {
   const colorScheme = useColorScheme();
   return (
     <Tabs>
-      <Tabs.Screen name="index" 
-      options={{
-        title: "Home",
-        tabBarIcon: (props) => <TabBarIcon {...props} name="home" />,
-        headerShown: false}}/>
+
+
+<Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: (props) => <TabBarIcon {...props} name="home" />,
+          headerTitleAlign: "center",
+          headerStyle: {
+            backgroundColor: "powderblue",
+          },
+
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="bell-o"
+                    size={25}
+                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
       <Tabs.Screen name="category" options={{
         tabBarIcon: (props) => <TabBarIcon {...props} name="list" />,
         headerShown: false}}/>
@@ -33,6 +56,7 @@ export default function RootLayout() {
       <Tabs.Screen name="account" options={{
         tabBarIcon: (props) => <TabBarIcon {...props} name="user" />,
         headerShown: false}}/>
+        <Tabs.Screen name="[id]" options={{headerShown: false, href:null}}/>
     </Tabs>
   );
 }
diff --git a/app/(tabs)/account.tsx b/app/(tabs)/account.tsx
index 597f156..f2d2b8a 100644
--- a/app/(tabs)/account.tsx
+++ b/app/(tabs)/account.tsx
@@ -1,5 +1,8 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Button } from 'react-native'
+import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
+import React, { useRef } from 'react'
+
+import AccountSheet from '../../components/bottomSheet';
 
 //TODO: add a notification icon
 //TODO: add a profile icon
@@ -9,11 +12,83 @@ import React from 'react'
 //TODO: add a logout button
 
 const account = () => {
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const { dismiss } = useBottomSheetModal();
+  const handleOpenPress = () => bottomSheetRef.current?.present();
+
   return (
-    <View>
-      <Text>account</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Personal Details</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Transactions</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Utility</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Request Help</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Calendar</Text>
+      </TouchableOpacity>
+
+      {/*        <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>  Edit Access</Text>
+      </TouchableOpacity> */}
+
+      <Button title="Dismiss" onPress={() => dismiss()} />
+
+      <AccountSheet ref={bottomSheetRef} />
+
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 20,
+    backgroundColor: 'powderblue',
+
+
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
 export default account
\ No newline at end of file
diff --git a/app/(tabs)/category.tsx b/app/(tabs)/category.tsx
index e66ceb1..0c4df5b 100644
--- a/app/(tabs)/category.tsx
+++ b/app/(tabs)/category.tsx
@@ -1,16 +1,78 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, Button, ScrollView, TouchableOpacity } from 'react-native'
+import React, { useRef } from 'react'
+import { StyleSheet } from 'react-native';
+import { Link } from 'expo-router';
 
 //TODO: add a notification icon
 //TODO: add 4 rectangle grid buttons which has options of everyday help, appliance repair, home cleaning, and moving 
 //TODO: add a search bar
 
 const category = () => {
+
   return (
-    <View>
-      <Text>category</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+
+      <Link href={"/ameneties"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Ameneties</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/help"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Everyday Help</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+      <Link href={"/repair"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Appliances Repair</Text>
+        </TouchableOpacity>
+      </Link>
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'powderblue',
+
+
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
+
 export default category
\ No newline at end of file
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index c4d7435..04330b6 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,5 +1,7 @@
-import { View, Text } from 'react-native'
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
 import React from 'react'
+import { Link } from 'expo-router';
+import { StyleSheet } from 'react-native';
 
 //TODO: this is homepage of the app
 //TODO: add a notification icon
@@ -9,10 +11,75 @@ import React from 'react'
 
 const index = () => {
   return (
-    <View>
-      <Text>index</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+
+      <Link href={"/(tabs)/visitors"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Visitors Update</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/(tabs)/Events"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Events</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+      <Link href={"/(tabs)/News"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>News</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/(tabs)/Payments"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Payment Dues</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'powderblue',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
+
 export default index
\ No newline at end of file
diff --git a/app/_layout.tsx b/app/_layout.tsx
index dd02c89..840e335 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -5,6 +5,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import React from 'react';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -52,13 +53,17 @@ function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
+    <BottomSheetModalProvider>
     <ThemeProvider
           value={colorScheme === "light" ? DefaultTheme : DefaultTheme}
         >
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+        <Stack.Screen name="modal" options={{
+          title: 'Notifications',
+          presentation: 'modal' }} />
       </Stack>
     </ThemeProvider>
+  </BottomSheetModalProvider>
   );
 }
diff --git a/app/ameneties.tsx b/app/ameneties.tsx
new file mode 100644
index 0000000..b5b4718
--- /dev/null
+++ b/app/ameneties.tsx
@@ -0,0 +1,21 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { Stack } from 'expo-router'
+
+const Ameneties = () => {
+  return (
+    <View>
+        <Stack.Screen options={{ title: 'Ameneties' }} />
+      <Text>Ameneties</Text>
+      <Text> Book Swimming Pool</Text>
+        <Text> Book Gym</Text>
+        <Text> Book Club House</Text>
+        <Text> Book Tennis Court</Text>
+        <Text> Book Basket Ball Court</Text>
+        <Text> Book Badminton Court</Text>
+        <Text> Book Squash Court</Text>
+    </View>
+  )
+}
+
+export default Ameneties
\ No newline at end of file
diff --git a/app/help.tsx b/app/help.tsx
new file mode 100644
index 0000000..608cca7
--- /dev/null
+++ b/app/help.tsx
@@ -0,0 +1,22 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { Stack } from 'expo-router'
+
+const Help = () => {
+  return (
+    <View>
+      <Stack.Screen options={{ title: 'Maid and cleaning services' }} />
+      <Text>Help Page</Text>
+        <Text> Book Maid</Text>
+        <Text> Book Cleaning Services</Text>
+        <Text> Book Cook</Text>
+        <Text> Book Baby Sitter</Text>
+        <Text> Book Nanny</Text>
+        <Text> Book Elderly Care</Text>
+        <Text> Book Pet Care</Text>
+        
+    </View>
+  )
+}
+
+export default Help
\ No newline at end of file
diff --git a/app/modal.tsx b/app/modal.tsx
index 44fe31d..18dd681 100644
--- a/app/modal.tsx
+++ b/app/modal.tsx
@@ -8,8 +8,8 @@ import React from 'react'
 const modal = () => {
   return (
     <View>
-      //TODO: add a notification icon
-      <Text>modal</Text>
+
+      <Text>Show notifications here</Text>
     </View>
   )
 }
diff --git a/app/repair.tsx b/app/repair.tsx
new file mode 100644
index 0000000..d6b4267
--- /dev/null
+++ b/app/repair.tsx
@@ -0,0 +1,14 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { Stack } from 'expo-router'
+
+const AppliancesRepair = () => {
+  return (
+    <View>
+      <Stack.Screen options={{ title: 'Appliances Repair' }} />
+      <Text>Appliances Repair Page</Text>
+    </View>
+  )
+}
+
+export default AppliancesRepair
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index a297226..4b323f4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -5,6 +5,7 @@ module.exports = function (api) {
     plugins: [
       // Required for expo-router
       'expo-router/babel',
+      'react-native-reanimated/plugin'
     ],
   };
 };
diff --git a/components/bottomSheet.tsx b/components/bottomSheet.tsx
new file mode 100644
index 0000000..1772092
--- /dev/null
+++ b/components/bottomSheet.tsx
@@ -0,0 +1,23 @@
+import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
+import { useLocalSearchParams } from "expo-router";
+import React, { forwardRef, useMemo } from "react";
+import { View, Text, Button } from "react-native";
+export type Ref = BottomSheetModal;
+
+const AccountSheet = forwardRef<Ref>((props, ref) => {
+    const snapPoints = useMemo(() => ["50%", "75%", "100%"], []);
+    const { dismiss } = useBottomSheetModal();
+    return (
+        <BottomSheetModal ref={ref} index={0} snapPoints={snapPoints}>
+            <View>
+                <View className="flex items-center">
+                    <Text className="text-2xl font-semibold p-20 justify-center align-center">Some data</Text>
+                </View>
+                <Button title="Dismiss" onPress={() => dismiss()}  />
+            </View>
+        </BottomSheetModal>
+    );
+});
+
+
+export default AccountSheet;
\ No newline at end of file
diff --git a/package.json b/package.json
index 75f947d..c529ce9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^4.6.1",
     "@react-navigation/bottom-tabs": "^6.0.4",
     "@react-navigation/material-top-tabs": "^6.0.2",
     "@react-navigation/native": "^6.0.2",
@@ -32,6 +33,7 @@
     "react-native": "0.72.10",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-pager-view": "6.2.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-swiper-flatlist": "^3.0.14",
diff --git a/yarn.lock b/yarn.lock
index 418a748..e713b58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -804,7 +804,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-assign@^7.0.0":
+"@babel/plugin-transform-object-assign@^7.0.0", "@babel/plugin-transform-object-assign@^7.16.7":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz"
   integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
@@ -1119,7 +1119,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz"
   integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
@@ -1555,6 +1555,21 @@
   resolved "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@gorhom/bottom-sheet@^4.6.1":
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.1.tgz#e45e2183246e338cf732fe4f8f2c91875b22ddce"
+  integrity sha512-sXqsYqX1/rAbmCC5fb9o6hwSF3KXriC0EGUGvLlhFvjaEEMBrRKFTNndiluRK1HmpUzazVaYdTm/lLkSiA2ooQ==
+  dependencies:
+    "@gorhom/portal" "1.0.14"
+    invariant "^2.2.4"
+
+"@gorhom/portal@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
+  integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==
+  dependencies:
+    nanoid "^3.3.1"
+
 "@graphql-typed-document-node/core@^3.1.0":
   version "3.2.0"
   resolved "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz"
@@ -7664,7 +7679,7 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.1.23, nanoid@^3.3.7:
+nanoid@^3.1.23, nanoid@^3.3.1, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -8515,6 +8530,16 @@ react-native-pager-view@6.2.0:
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz#51380d93fbe47f6380dc71d613a787bf27a4ca37"
   integrity sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g==
 
+react-native-reanimated@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz#80f9d58e28fddf62fe4c1bc792337b8ab57936ab"
+  integrity sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    convert-source-map "^2.0.0"
+    invariant "^2.2.4"
+
 react-native-safe-area-context@4.6.3:
   version "4.6.3"
   resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz"