diff --git a/client/assets/close.svg b/client/assets/close.svg
new file mode 100644
index 0000000..9bdd105
--- /dev/null
+++ b/client/assets/close.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6.43599" y1="6.54321" x2="18.5192" y2="18.5014" stroke="black" stroke-width="3"/>
+<line x1="6.52173" y1="18.5415" x2="18.4799" y2="6.45838" stroke="black" stroke-width="3"/>
+</svg>
diff --git a/client/components/TaskType/CloseButton.tsx b/client/components/TaskType/CloseButton.tsx
index 45167ee..8d617ee 100644
--- a/client/components/TaskType/CloseButton.tsx
+++ b/client/components/TaskType/CloseButton.tsx
@@ -2,20 +2,14 @@ import React from 'react';
 
 import { IconButton } from 'react-native-paper';
 
-import Close1 from '../../assets/close/close1.svg';
-import Close2 from '../../assets/close/close2.svg';
+import Close from '../../assets/close.svg';
 
 export function CloseButton({ onPress }: { onPress: () => void }) {
   return (
     <IconButton
       className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
       mode="contained"
-      icon={() => (
-        <>
-          <Close1 style={{ position: 'absolute', top: 20, left: 20 }} />
-          <Close2 style={{ position: 'absolute', top: 20, left: 20 }} />
-        </>
-      )}
+      icon={Close}
       onPress={onPress}
     />
   );
diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx
index fba06b2..8cb6ab7 100644
--- a/client/navigation/AppNavigation.tsx
+++ b/client/navigation/AppNavigation.tsx
@@ -4,6 +4,7 @@ import { NavigationProp } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import LoginPage from '../screens/LoginPage';
+import { TaskType } from '../screens/TaskType';
 import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
 
 export type AppStackParamList = {
@@ -12,6 +13,7 @@ export type AppStackParamList = {
   Home: undefined;
   Login: undefined;
   Profile: undefined;
+  TaskType: undefined;
 };
 
 export type AppStackNavigation = NavigationProp<AppStackParamList>;
@@ -31,6 +33,11 @@ export function AppNavigation() {
         options={{ headerShown: false }}
         component={AppStackBottomTabNavigator}
       />
+      <AppStack.Screen
+        name="TaskType"
+        options={{ headerShown: false }}
+        component={TaskType}
+      />
     </AppStack.Navigator>
   );
 }
diff --git a/client/package.json b/client/package.json
index 55f2462..e224d3f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -43,6 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "6.18.0",
     "eslint": "^8.56.0",
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
new file mode 100644
index 0000000..35bc59d
--- /dev/null
+++ b/client/screens/TaskType.tsx
@@ -0,0 +1,151 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { FlatList, View } from 'react-native';
+
+import BottomSheet, {
+  BottomSheetBackdrop,
+  TouchableOpacity
+} from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
+import { useNavigation } from '@react-navigation/native';
+import DropDownPicker from 'react-native-dropdown-picker';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Button, Text } from 'react-native-paper';
+
+import { BackButton } from '../components/TaskType/BackButton';
+import { CloseButton } from '../components/TaskType/CloseButton';
+import { AppStackNavigation } from '../navigation/AppNavigation';
+import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+
+export function TaskType() {
+  const navigation = useNavigation<AppStackNavigation>();
+
+  const [open, setOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<null | Category>(
+    null
+  );
+  const [selectedTypes, setSelectedTypes] = useState<TypeOfTask[]>(
+    Object.values(TypeOfTask)
+  );
+
+  useEffect(() => {
+    setSelectedTypes(
+      selectedCategory
+        ? categoryToTypeMap[selectedCategory]
+        : Object.values(TypeOfTask)
+    );
+  }, [selectedCategory]);
+
+  const filters = Object.values(Category).map((filter) => ({
+    label: filter,
+    value: filter
+  }));
+
+  const bottomSheetSnapPoints = useMemo(() => ['60%'], []);
+
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  const closeBottomSheet = () => {
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.close(); // Close the BottomSheet
+    }
+  };
+
+  const snapToIndex = (index: number) =>
+    bottomSheetRef.current?.snapToIndex(index);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetDefaultBackdropProps) => (
+      <BottomSheetBackdrop
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        {...props}
+      />
+    ),
+    []
+  );
+
+  return (
+    <GestureHandlerRootView className="mt-10">
+      <View className="flex w-full flex-row items-center justify-center">
+        <View className="mr-[95px]">
+          <BackButton />
+        </View>
+        <Text className="mr-auto self-center text-center text-carewallet-gray">
+          Step 1 of 2
+        </Text>
+      </View>
+
+      <Text className="text-center text-2xl font-bold">Type of Task</Text>
+      <View className="mr-2 flex flex-row justify-end">
+        <Button
+          className="h-[40px] items-center justify-center rounded-xl text-sm"
+          textColor="black"
+          mode="outlined"
+          onPress={() => snapToIndex(0)}
+        >
+          Filter
+        </Button>
+      </View>
+
+      <FlatList
+        className="h-full"
+        data={selectedTypes}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            className="m-2 h-[50px] overflow-hidden rounded-xl"
+            onPress={() => navigation.navigate('New ' + item + ' Task')}
+          >
+            <Button
+              className="m-2 h-[50px] items-center justify-center rounded-xl"
+              textColor="black"
+              mode="outlined"
+            >
+              {item}
+            </Button>
+          </TouchableOpacity>
+        )}
+      />
+
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={-1}
+        snapPoints={bottomSheetSnapPoints}
+        enablePanDownToClose={true}
+        backdropComponent={renderBackdrop}
+      >
+        <View>
+          <View className="flex flex-row justify-between">
+            <Text className="m-5 text-2xl font-bold">Filter</Text>
+            <CloseButton onPress={closeBottomSheet} />
+          </View>
+
+          <DropDownPicker
+            open={open}
+            value={selectedCategory}
+            items={filters}
+            setOpen={setOpen}
+            setValue={setSelectedCategory}
+            placeholder="Category"
+            onSelectItem={() => {
+              closeBottomSheet();
+            }}
+            style={{
+              width: '95%',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              borderRadius: 0,
+              borderColor: 'transparent',
+              borderBottomColor: 'black'
+            }}
+          />
+        </View>
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+}
diff --git a/client/types/type.ts b/client/types/type.ts
new file mode 100644
index 0000000..985283d
--- /dev/null
+++ b/client/types/type.ts
@@ -0,0 +1,66 @@
+export enum TypeOfTask {
+  MEDICATION = 'Medication Management',
+  APPOINTMENT = 'Physician Appointment',
+  // LABS = 'Labs & Outpatient Services',
+  // REHAB = 'Rehab & Home Therapies',
+  // TRANSITIONAL = 'Transitional Care',
+  GROOMING = 'Grooming',
+  CONVERSATIONS = 'Family Conversations',
+  // TRANSPORTATION = 'Transportation',
+  // RESPITE = 'Respite',
+  ERRANDS = 'Groceries, Shopping, & Errands',
+  BILLS = 'Pay Bills',
+  // PRESCRIPTION = 'Prescription Management',
+  // SAFETY = 'Home Safety',
+  DIET = 'Diet & Nutrition',
+  ACTIVITIES = 'Activities',
+  INSURANCE = 'Health Insurance',
+  // FINANCIAL = 'Financial',
+  // LEGAL = 'Legal',
+  OTHER = 'Other'
+}
+
+export enum Category {
+  ALL = '',
+  HEALTH = 'Health & Medical',
+  PERSONAL = 'Personal',
+  HOME = 'Home & Lifestyle',
+  FINANCIAL = 'Financial & Legal',
+  OTHER = 'Other'
+}
+
+export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
+  [Category.ALL]: [],
+  [Category.HEALTH]: [
+    TypeOfTask.MEDICATION,
+    TypeOfTask.APPOINTMENT,
+    // TypeOfTask.LABS,
+    // TypeOfTask.REHAB,
+    // TypeOfTask.TRANSITIONAL,
+    TypeOfTask.GROOMING,
+    // TypeOfTask.PRESCRIPTION,
+    TypeOfTask.DIET
+  ],
+  [Category.PERSONAL]: [
+    TypeOfTask.GROOMING,
+    TypeOfTask.CONVERSATIONS,
+    // TypeOfTask.TRANSPORTATION,
+    // TypeOfTask.RESPITE,
+    TypeOfTask.ERRANDS,
+    // TypeOfTask.SAFETY,
+    TypeOfTask.BILLS
+  ],
+  [Category.HOME]: [
+    // TypeOfTask.REHAB,
+    // TypeOfTask.SAFETY,
+    TypeOfTask.DIET,
+    TypeOfTask.ACTIVITIES
+  ],
+  [Category.FINANCIAL]: [
+    TypeOfTask.BILLS,
+    TypeOfTask.INSURANCE
+    // TypeOfTask.FINANCIAL,
+    // TypeOfTask.LEGAL
+  ],
+  [Category.OTHER]: [TypeOfTask.OTHER]
+};