diff --git a/src/components/GroupList/AlphabetGroupList.tsx b/src/components/GroupList/AlphabetGroupList.tsx
index d58e1d017d8376dc93dc4fdbb7b951d41fd9ad98..bcc65287dc3e76dc051f06d3a421350d9d6eb9f7 100644
--- a/src/components/GroupList/AlphabetGroupList.tsx
+++ b/src/components/GroupList/AlphabetGroupList.tsx
@@ -39,12 +39,13 @@ const AlphabetGroupList = ({
                       "Silahkan pilih kategori lain"
                     );
                   } else {
-                    nav.navigate("CreateEcosystem", {
-                      screen: "CreateEcosystemScreen",
+                    nav.navigate("Ecosystem", {
+                      screen: "UserList",
                       params: {
                         id: item.key,
                         name: item.value,
                         forGroup: forGroup,
+                        fromScreen: fromScreen,
                       },
                     });
                   }
diff --git a/src/components/UserList/UserList.tsx b/src/components/UserList/UserList.tsx
index 0770cdddf74f1f1057ade4f15bd267131b210ab6..f52fb1ab65976539516fdc5bd41c2bb5a3f911d4 100644
--- a/src/components/UserList/UserList.tsx
+++ b/src/components/UserList/UserList.tsx
@@ -4,11 +4,20 @@ import { View } from "../Themed";
 import UserListItem from "./UserListItem";
 import React from "react";
 import Spacer from "../../components/Spacer/Spacer";
-import { IUsers } from "../../types/firestore/users";
+import { listUsers } from "../../types/listUsers";
+import { IUser } from "../../types/firestore/User";
 type props = {
-  list: IUsers[];
+  list: IUser[];
+  fromScreen?: string;
+  categoryMembers?: listUsers;
+  setCategoryMembers?: React.Dispatch<React.SetStateAction<listUsers>>;
 };
-const UserList = ({ list }: props) => {
+const UserList = ({
+  list,
+  fromScreen,
+  categoryMembers,
+  setCategoryMembers,
+}: props) => {
   return (
     <ScrollView>
       <SafeAreaView style={styles.container}>
@@ -18,9 +27,17 @@ const UserList = ({ list }: props) => {
             return (
               <View>
                 <UserListItem
-                  Name={item.name}
-                  category={item.category}
-                  uri={item.image}
+                  name={item.firstName + " " + item.lastName}
+                  category={item.businessType}
+                  uri={item.pic}
+                  onPress={() => {
+                    if (fromScreen === "CreateEcosystem") {
+                      setCategoryMembers({
+                        ...categoryMembers,
+                        [item.id]: true,
+                      });
+                    }
+                  }}
                 />
                 <Spacer variant="l" />
               </View>
diff --git a/src/components/UserList/UserListItem.tsx b/src/components/UserList/UserListItem.tsx
index e7b1ab01bc1fc7ea4ab95b87bfbf48d062eddc74..b749017e57df38ad13f91c7f1db521a60d274985 100644
--- a/src/components/UserList/UserListItem.tsx
+++ b/src/components/UserList/UserListItem.tsx
@@ -1,14 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import Colors from "../../constants/Colors";
-import { Text, StyleSheet, View, Image } from "react-native";
+import { Text, StyleSheet, View, Image, TouchableOpacity } from "react-native";
 type props = {
-  Name: string;
+  name: string;
   uri: string;
   category: string;
+  onPress: () => void;
 };
-const UserListItem = ({ Name, uri, category }: props) => {
+const UserListItem = ({ name, uri, category, onPress }: props) => {
+  const [clicked, setClicked] = useState<boolean>(false);
   return (
-    <View style={styles.listContainer}>
+    <TouchableOpacity
+      style={clicked ? styles.listContainerSelected : styles.listContainer}
+      onPress={() => {
+        onPress();
+        setClicked(!clicked);
+      }}
+    >
       <View style={styles.profileImage}>
         <Image
           style={styles.image}
@@ -21,10 +29,10 @@ const UserListItem = ({ Name, uri, category }: props) => {
         />
       </View>
       <View style={styles.textContainer}>
-        <Text style={styles.text}>{Name}</Text>
+        <Text style={styles.text}>{name}</Text>
         <Text style={styles.descText}>{category}</Text>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };
 export default UserListItem;
@@ -33,6 +41,12 @@ const styles = StyleSheet.create({
   listContainer: {
     alignItems: "flex-start",
     flexDirection: "row",
+    backgroundColor: Colors.background,
+  },
+  listContainerSelected: {
+    alignItems: "flex-start",
+    flexDirection: "row",
+    backgroundColor: "#ABB",
   },
   text: {
     fontSize: 16,
diff --git a/src/components/__tests__/firebase/basic.test.tsx b/src/components/__tests__/firebase/basic.test.tsx
index 30e5c0c7edc1fcdd634b320a3525acfa12e25511..aef9abc85edcb9660ea48db039a0934e59e7fb4b 100644
--- a/src/components/__tests__/firebase/basic.test.tsx
+++ b/src/components/__tests__/firebase/basic.test.tsx
@@ -6,18 +6,18 @@ import { cleanup } from "@testing-library/react-native";
 afterEach(cleanup);
 
 describe("Basic Firebase Tests", () => {
-//   it("Successfully Connects", () => {
-//     expect(firebase.initializeApp(FirebaseConfig)).not.toBeNull();
-//   });
+  //   it("Successfully Connects", () => {
+  //     expect(firebase.initializeApp(FirebaseConfig)).not.toBeNull();
+  //   });
 
-    it("Successfully Tests", () => {
+  it("Successfully Tests", () => {
     expect(true).toBe(true);
-    });
+  });
 
-//   // TODO : shows firestore connection error
-//   it("Successfully query Firestore", async () => {
-//     const db = firebase.firestore();
-//     const query = await db.collection("test").get();
-//     expect(query.metadata).not.toBeNull();
-//   });
+  //   // TODO : shows firestore connection error
+  //   it("Successfully query Firestore", async () => {
+  //     const db = firebase.firestore();
+  //     const query = await db.collection("test").get();
+  //     expect(query.metadata).not.toBeNull();
+  //   });
 });
diff --git a/src/screens/CreateEcosystemScreen.tsx b/src/screens/CreateEcosystemScreen.tsx
index 34c33dc0d477cce3cf285059c103a371b088d7c9..7652352b9463b64044e2696a401c36d1e045ec43 100644
--- a/src/screens/CreateEcosystemScreen.tsx
+++ b/src/screens/CreateEcosystemScreen.tsx
@@ -29,6 +29,7 @@ import { IEcosystemCategoryMember } from "../types/firestore/ecosystemCategoryMe
 import { IEcosystemMembership } from "../types/firestore/ecosystemMembership";
 import { ActivityIndicator } from "react-native-paper";
 import { pickImage, uploadImgToFirebase } from "../helpers/images";
+
 const CreateEcosystemScreen = ({
   route,
 }: CreateEcosystemStackScreenProps<"CreateEcosystemScreen">) => {
@@ -110,7 +111,7 @@ const CreateEcosystemScreen = ({
           break;
       }
     }
-  }, [route.params?.id, route.params?.name]);
+  }, [route.params?.id, route.params?.name, route.params?.categoryMembers]);
 
   const handleDelete = (
     ecosystemItem: ecosystemItem,
diff --git a/src/screens/ecosystem/UserListScreen.tsx b/src/screens/ecosystem/UserListScreen.tsx
index 30c5ea8cc6d5c67ab392d1943a9a61662fdcb898..f305d7fced29290d3481c6466e574160c28db6d3 100644
--- a/src/screens/ecosystem/UserListScreen.tsx
+++ b/src/screens/ecosystem/UserListScreen.tsx
@@ -6,19 +6,41 @@ import UserList from "../../components/UserList/UserList";
 import Colors from "../../constants/Colors";
 import { fetchUsersByEcosystemIdAndType } from "../../service/firestore/ecosystem/fetchUsersByEcosystemIdAndType";
 import { EcosystemStackScreenProps } from "../../types/navigation";
+import { fetchUsersByCategory } from "../../service/firestore/ecosystem/fetchUsersByCategory";
+import MainButton from "../../components/button/MainButton";
+import { listUsers } from "../../types/listUsers";
 const UserListScreen = ({ route }: EcosystemStackScreenProps<"UserList">) => {
-  const { id, headerTitle } = route.params;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [listData, setListData] = useState([]);
+
+  const [categoryMembers, setCategoryMember] = useState<listUsers>({});
+
   useEffect(() => {
-    (async () => {
-      setListData(await fetchUsersByEcosystemIdAndType(id, headerTitle));
-    })();
-  }, []);
+    if (route.params.fromScreen === "EcosystemDetail") {
+      (async () => {
+        setListData(
+          await fetchUsersByEcosystemIdAndType(
+            route.params.id,
+            route.params.headerTitle
+          )
+        );
+      })();
+    } else if (route.params.fromScreen === "CreateEcosystem") {
+      (async () => {
+        setListData(await fetchUsersByCategory(route.params.id));
+      })();
+    }
+  }, [route.params?.fromScreen, route.params?.id]);
   return (
     <View style={styles.container}>
+      <UserList
+        list={listData}
+        categoryMembers={categoryMembers}
+        setCategoryMembers={setCategoryMember}
+        fromScreen={route.params.fromScreen}
+      />
+
       <View>
-        <UserList list={listData} />
+        <MainButton text={"Simpan"} onPress={() => {}} colors={"primary"} />
       </View>
     </View>
   );
diff --git a/src/types/listUsers.ts b/src/types/listUsers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54d2bc86e9c6c161dc1aea182a7640f59d0f47f1
--- /dev/null
+++ b/src/types/listUsers.ts
@@ -0,0 +1,3 @@
+export type listUsers = {
+  [idMember: string]: boolean;
+};
diff --git a/src/types/navigation/CreateEcosystemStack.ts b/src/types/navigation/CreateEcosystemStack.ts
index 82554048bf48ec232e17f3c66953729a3988bde2..4cc82b4c749980ac764b0b49b4f449c44f9e980a 100644
--- a/src/types/navigation/CreateEcosystemStack.ts
+++ b/src/types/navigation/CreateEcosystemStack.ts
@@ -4,6 +4,7 @@
  */
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { ecosystemItem } from "../ListItems";
+import { listUsers } from "../listUsers";
 
 export type CreateEcosystemStackParamList = {
   BusinessCategory: {
@@ -11,7 +12,12 @@ export type CreateEcosystemStackParamList = {
     forGroup?: string;
     ecosystemCategories?: ecosystemItem;
   };
-  CreateEcosystemScreen: { id?: string; name?: string; forGroup?: string };
+  CreateEcosystemScreen: {
+    id?: string;
+    name?: string;
+    forGroup?: string;
+    categoryMembers?: listUsers;
+  };
 };
 
 export type CreateEcosystemStackScreenProps<
diff --git a/src/types/navigation/EcosystemStack.ts b/src/types/navigation/EcosystemStack.ts
index 074c2374055eec3d5d029fec299f8c7d8ee77c20..993cbe6c4bdd05c51162a20eeeac6446a7b0625d 100644
--- a/src/types/navigation/EcosystemStack.ts
+++ b/src/types/navigation/EcosystemStack.ts
@@ -24,7 +24,13 @@ export type EcosystemStackParamList = {
     member: string;
     rating: string;
   };
-  UserList: { headerTitle: string; id: string };
+  UserList: {
+    headerTitle?: string;
+    id?: string;
+    fromScreen?: string;
+    name?: string;
+    forGroup?: string;
+  };
   Recommended: { headerTitle: string; toFetch: string };
 };