diff --git a/src/screens/ecosystem/CategoryEcosystemListScreen.tsx b/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
index f3f9da2b9b1794fcdf5eb064ab91b90ba7f081f1..e8a01b44a9d5dd591e9ec89c841d52a1ce401ea8 100644
--- a/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
+++ b/src/screens/ecosystem/CategoryEcosystemListScreen.tsx
@@ -1,4 +1,9 @@
-import { FlatList, StyleSheet, ActivityIndicator } from "react-native";
+import {
+  ActivityIndicator,
+  // ActivityIndicator,
+  FlatList,
+  StyleSheet,
+} from "react-native";
 import React, { useEffect, useState } from "react";
 import HorizontalCards from "../../components/Cards/HorizontalCards";
 import { useNavigation } from "@react-navigation/core";
@@ -9,6 +14,8 @@ import IconForm from "../../components/Forms/IconForm";
 import { getByCategory } from "../../service/firestore/ecosystem/getByCategory";
 import { IEcosystem } from "../../types/firestore/ecosystems";
 import { EcosystemStackScreenProps } from "../../types/navigation";
+import { searchEcosystem } from "../../service/typesense/searchEcosystem";
+import { SearchResponseHit } from "typesense/lib/Typesense/Documents";
 
 const CategoryEcosystemListScreen = ({
   route,
@@ -16,95 +23,118 @@ const CategoryEcosystemListScreen = ({
   const nav = useNavigation();
   const { toFetch } = route.params;
   const [search, setSearch] = useState("");
-  const [listData, setListData] = useState<IEcosystem[]>([]);
-  const [loadingMore, setLoadingmore] = useState(false);
-  const [lastVisibleId, setLastVisibleId] = useState("");
+  const [listData, setListData] = useState<
+    SearchResponseHit<IEcosystem>[] | IEcosystem[]
+  >([]);
+  const [isSearchLoading, setIsSearchLoading] = useState(false);
+
+  // const [loadingMore, setLoadingmore] = useState(false);
+  // const [lastVisibleId, setLastVisibleId] = useState("");
 
   useEffect(() => {
-    getByCategory(toFetch, lastVisibleId).then((res) => {
+    getByCategory(toFetch).then((res) => {
       setListData(res);
-      const lastIndexItem = res[res.length - 1];
-      const lastIndexItemId = lastIndexItem.id;
-      setLastVisibleId(lastIndexItemId);
+      // const lastIndexItem = res[res.length - 1];
+      // const lastIndexItemId = lastIndexItem.id;
+      // setLastVisibleId(lastIndexItemId);
     });
   }, []);
 
-  const handleOnEndReach = () => {
-    // setLoadingmore(true);
-    getByCategory(toFetch, lastVisibleId).then((res) => {
-      setListData([...listData, ...res]);
-      const lastIndexItem = res[res.length - 1];
-      const lastIndexItemId = lastIndexItem.id;
-      setLastVisibleId(lastIndexItemId);
-      if (res.length === 0) {
-        setLoadingmore(false);
-      } else {
-        setLoadingmore(true);
-      }
-      // setLoadingmore(false);
+  // const handleOnEndReach = () => {
+  //   // setLoadingmore(true);
+  //   getByCategory(toFetch, lastVisibleId).then((res) => {
+  //     setListData([...listData, ...res]);
+  //     const lastIndexItem = res[res.length - 1];
+  //     const lastIndexItemId = lastIndexItem.id;
+  //     setLastVisibleId(lastIndexItemId);
+  //     if (res.length === 0) {
+  //       setLoadingmore(false);
+  //     } else {
+  //       setLoadingmore(true);
+  //     }
+  //     // setLoadingmore(false);
+  //   });
+  // };
+  const onSearch = async () => {
+    setIsSearchLoading(true);
+    const res = await searchEcosystem({
+      q: search,
+      query_by: "name",
+      filter_by: "categoryId:" + toFetch,
     });
+    setListData(res.searchHits);
+    setIsSearchLoading(false);
   };
-
-  const ListFooterComponent = () => (
-    <View style={styles.containerLoader}>
-      <ActivityIndicator animating={true} color="0791F9" />
-    </View>
-  );
+  // const ListFooterComponent = () => (
+  //   <View style={styles.containerLoader}>
+  //     <ActivityIndicator animating={true} color="0791F9" />
+  //   </View>
+  // );
 
   return (
     <View style={styles.container}>
-      <FlatList
-        data={listData}
-        renderItem={({ item }) => {
-          return (
-            <View style={styles.horizontalCard}>
-              <HorizontalCards
-                image={item.pic}
-                member={item.followerCount.toString()}
-                title={item.name}
-                rate={item.rating.toString()}
-                onPress={() =>
-                  nav.navigate("Ecosystem", {
-                    screen: "EcosystemDetails",
-                    params: {
-                      headerTitle: item.name,
-                      id: item.id,
-                      title: item.name,
-                      desc: item.description,
-                      image: item.pic,
-                      member: item.followerCount.toString(),
-                      rating: item.rating.toString(),
-                    },
-                  })
-                }
-              />
-            </View>
-          );
-        }}
-        keyExtractor={(item) => item.id}
-        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        ListFooterComponent={() =>
-          !loadingMore ? <ListFooterComponent /> : <Spacer variant={"xl"} />
-        }
-        ListHeaderComponent={() => (
-          <>
-            <View>
-              <Spacer variant={"xl"} />
-              <IconForm
-                text={search}
-                setText={setSearch}
-                placeholder={"Cari di kategori ini"}
-                search
-              />
-            </View>
-            <Spacer variant={"xl"} />
-          </>
-        )}
-        onEndReachedThreshold={0.5}
-        onEndReached={handleOnEndReach}
-      />
+      <>
+        <View>
+          <Spacer variant={"xl"} />
+          <IconForm
+            text={search}
+            setText={setSearch}
+            placeholder={"Cari di kategori ini"}
+            search
+            onPress={onSearch}
+            onEndEditing={onSearch}
+          />
+        </View>
+        <Spacer variant={"xl"} />
+      </>
+      {!isSearchLoading ? (
+        <FlatList
+          data={listData}
+          renderItem={({ item: _item }) => {
+            const item: IEcosystem = _item.document ? _item.document : _item;
+            return (
+              <View style={styles.horizontalCard}>
+                <HorizontalCards
+                  image={item.pic}
+                  member={item.followerCount.toString()}
+                  title={item.name}
+                  rate={item.rating.toString()}
+                  onPress={() =>
+                    nav.navigate("Ecosystem", {
+                      screen: "EcosystemDetails",
+                      params: {
+                        headerTitle: item.name,
+                        id: item.id,
+                        title: item.name,
+                        desc: item.description,
+                        image: item.pic,
+                        member: item.followerCount.toString(),
+                        rating: item.rating.toString(),
+                      },
+                    })
+                  }
+                />
+              </View>
+            );
+          }}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+          keyExtractor={(item) => (item.document ? item.document.id : item.id)}
+          ItemSeparatorComponent={() => <Spacer variant={"l"} />}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          // ListFooterComponent={() =>
+          //   !loadingMore ? <ListFooterComponent /> : <Spacer variant={"xl"} />
+          // }
+
+          onEndReachedThreshold={0.5}
+          // onEndReached={handleOnEndReach}
+        />
+      ) : (
+        <>
+          <Spacer variant="xl" />
+          <ActivityIndicator size={"large"} animating={true} />
+        </>
+      )}
     </View>
   );
 };