diff --git a/src/components/carousel/CategoryHorizontalCarousel.tsx b/src/components/carousel/CategoryHorizontalCarousel.tsx
index 9d58531c81ea67ddb5954d372a4a6aaceeb8df20..2e3ca024ed4eec36118f72c95954f2342808230f 100644
--- a/src/components/carousel/CategoryHorizontalCarousel.tsx
+++ b/src/components/carousel/CategoryHorizontalCarousel.tsx
@@ -2,12 +2,15 @@ import React from "react";
 import { StyleSheet, View, FlatList, ScrollView } from "react-native";
 import Spacer from "../Spacer/Spacer";
 import ArrowlessPlainButton from "../button/ArrowlessPlainButton";
+import { ICategory } from "../../types/firestore";
+import { useNavigation } from "@react-navigation/core";
 
 type props = {
-  list: { id: string; name: string }[];
+  list: ICategory[];
 };
 
 const CategoryHorizontalCarousel = ({ list }: props) => {
+  const nav = useNavigation();
   return (
     <ScrollView
       horizontal={true}
@@ -19,11 +22,22 @@ const CategoryHorizontalCarousel = ({ list }: props) => {
         renderItem={({ item }) => {
           return (
             <View style={styles.slide}>
-              <ArrowlessPlainButton content={item.name} onPress={null} />
+              <ArrowlessPlainButton
+                content={item.name}
+                onPress={() =>
+                  nav.navigate("Ecosystem", {
+                    screen: "EcosystemList",
+                    params: {
+                      headerTitle: item.name,
+                      toFetch: item.id,
+                    },
+                  })
+                }
+              />
             </View>
           );
         }}
-        numColumns={Math.ceil(list.length / 2)}
+        numColumns={6}
         keyExtractor={(item) => item.id}
         ItemSeparatorComponent={() => <Spacer variant={"l"} />}
         showsVerticalScrollIndicator={false}
diff --git a/src/components/carousel/VerticalEcosystemCarousel.tsx b/src/components/carousel/VerticalEcosystemCarousel.tsx
index f7285816d10fb984a584d05acdee1c964f2475ee..e6f79e10f1eb768e1f74a0a11f356e1cc15185b4 100644
--- a/src/components/carousel/VerticalEcosystemCarousel.tsx
+++ b/src/components/carousel/VerticalEcosystemCarousel.tsx
@@ -2,17 +2,15 @@ import React from "react";
 import { StyleSheet, View, FlatList, ScrollView } from "react-native";
 import Spacer from "../Spacer/Spacer";
 import VerticalCard from "../Cards/VerticalCard";
+import { IEcosystem } from "../../types/firestore/ecosystems";
+import { useNavigation } from "@react-navigation/core";
 
 type props = {
-  list: {
-    id: string;
-    name: string;
-    pic: string;
-    followerCount: number;
-  }[];
+  list: IEcosystem[];
 };
 
 const VerticalEcosystemCarousel = ({ list }: props) => {
+  const nav = useNavigation();
   return (
     <ScrollView
       horizontal={true}
@@ -29,7 +27,19 @@ const VerticalEcosystemCarousel = ({ list }: props) => {
                 members={item.followerCount}
                 title={item.name}
                 imageSource={item.pic}
-                onPressFunction={null}
+                onPressFunction={() => {
+                  nav.navigate("Ecosystem", {
+                    screen: "EcosystemDetails",
+                    params: {
+                      headerTitle: item.name,
+                      title: item.name,
+                      desc: item.description,
+                      image: item.pic,
+                      member: item.followerCount.toString(),
+                      rating: item.rating.toString(),
+                    },
+                  });
+                }}
               />
             </View>
           );
@@ -52,6 +62,7 @@ const styles = StyleSheet.create({
     width: 210,
     justifyContent: "center",
     alignItems: "center",
+    marginRight: 16,
   },
 });
 
diff --git a/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx b/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f25774bbed062f21cb01f6178569ce37722a0f8
--- /dev/null
+++ b/src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx
@@ -0,0 +1,81 @@
+// import { FlatList, ScrollView, StyleSheet } from "react-native";
+// import React, { useEffect, useState } from "react";
+// import HorizontalCards from "../../components/Cards/HorizontalCards";
+// import { useNavigation } from "@react-navigation/core";
+// import Colors from "../../constants/Colors";
+// import { View } from "../../components/Themed";
+// import Spacer from "../../components/Spacer/Spacer";
+// import IconForm from "../../components/Forms/IconForm";
+// import { getByCategory } from "../../service/firestore/ecosystem/getByCategory";
+// import { IEcosystem } from "../../types/firestore/ecosystems";
+// // import { EcosystemStackScreenProps } from "../../types/navigation";
+
+// const CategoryEcosystemListScreen = () => {
+//   const nav = useNavigation();
+//   // const { toFetch } = route.params;
+//   const [search, setSearch] = useState("");
+//   const [listData, setListData] = useState<IEcosystem[]>([]);
+
+//   useEffect(() => {
+//     getByCategory("A").then((res) => setListData(res));
+//   });
+
+//   return (
+//     <ScrollView style={styles.container}>
+//       <View>
+//         <IconForm
+//           text={search}
+//           setText={setSearch}
+//           placeholder={"Cari di kategori ini"}
+//           search
+//         />
+//       </View>
+//       <Spacer variant={"xl"} />
+//       <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,
+//                       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}
+//       />
+//     </ScrollView>
+//   );
+// };
+
+// const styles = StyleSheet.create({
+//   container: {
+//     padding: 24,
+//     backgroundColor: Colors.background,
+//   },
+//   horizontalCard: {
+//     paddingHorizontal: 4,
+//     paddingTop: 2,
+//   },
+// });
+
+// export default CategoryEcosystemListScreen;
diff --git a/src/screens/ecosystem/BusinessEcosystemScreen.tsx b/src/screens/ecosystem/BusinessEcosystemScreen.tsx
index 04760f1bc93aab1bcd320b2118fcc8ab5e5e94b0..705d0c89542e2b6363817bea0a3330bc8736f097 100644
--- a/src/screens/ecosystem/BusinessEcosystemScreen.tsx
+++ b/src/screens/ecosystem/BusinessEcosystemScreen.tsx
@@ -1,187 +1,187 @@
 import { useNavigation } from "@react-navigation/core";
-import React from "react";
-import { StyleSheet } from "react-native";
+import React, { useState, useEffect } from "react";
+import { ScrollView, StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import SmallButton from "../../components/button/SmallButton";
+import VerticalEcosystemCarousel from "../../components/carousel/VerticalEcosystemCarousel";
+import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
 import Spacer from "../../components/Spacer/Spacer";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
-import { useUser } from "../../hooks/reduxHooks";
-import ecosystemService from "../../service/firestore/ecosystem";
-import { createEcosystem } from "../../service/functions/createEcosystem";
-
+import { useAppSelector } from "../../hooks/reduxHooks";
+import { getByMostRecent } from "../../service/firestore/ecosystem/getMostRecent";
+import { getByPopularity } from "../../service/firestore/ecosystem/getByPopularity";
+import { getByFollowed } from "../../service/firestore/ecosystem/getByFollowed";
+import { IEcosystem } from "../../types/firestore/ecosystems";
+import { IUser } from "../../types/firestore/User";
+import { getCategories } from "../../service/firestore/categories";
+import { ICategory } from "../../types/firestore";
 const BusinessEcosystemScreen = () => {
   const nav = useNavigation();
-  const user = useUser();
+  const user: IUser = useAppSelector((state) => state.user);
+  const [listData, setListData] = useState<IEcosystem[]>([]);
+  const [listBergabung, setListBergabung] = useState<IEcosystem[]>([]);
+  const [listTerbaru, setListTerbaru] = useState<IEcosystem[]>([]);
+  const [listCategory, setListCategory] = useState<ICategory[]>([]);
+  useEffect(() => {
+    getByPopularity().then((res) => {
+      setListData(res.slice(0, 5));
+    });
+    getByFollowed(user.id).then((res) => {
+      setListBergabung(res.slice(0, 5));
+    });
+    getByMostRecent().then((res) => {
+      setListTerbaru(res.slice(0, 5));
+    });
+    getCategories().then((res) => {
+      setListCategory(res.slice(0, 6));
+    });
+  }, []);
 
   return (
-    <View style={styles.container}>
+    <ScrollView style={styles.container}>
       <View>
-        <Text>Ekosistem Bisnis</Text>
+        <Text style={styles.textLink}>Selamat Datang, {user.firstName}</Text>
       </View>
       <Spacer variant="xl" />
-      <SmallButton
-        colors="primary"
-        text="Buat Ekosistem Bisnis"
-        onPress={() => {
-          nav.navigate("CreateEcosystem", {
-            screen: "CreateEcosystem",
-          });
-        }}
-      />
-      <Spacer variant="xl" />
       <View>
         <TouchableOpacity
           onPress={() => {
             nav.navigate("Ecosystem", {
               screen: "Recommended",
-              params: {
-                headerTitle: "Ekosistem Saya",
-                toFetch: "myEcosystem",
-              },
+              params: { headerTitle: "Ekosistem Saya", toFetch: "myEcosystem" },
             });
           }}
         >
-          <Text style={styles.link}>Ekosistem Saya</Text>
+          <Text style={styles.textLink}>Ekosistem Saya</Text>
         </TouchableOpacity>
       </View>
       <Spacer variant="xl" />
       <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "EcosystemDetails" });
-          }}
-        >
-          <Text style={styles.link}>Sudah Bergabung</Text>
-        </TouchableOpacity>
+        <SmallButton
+          text={"Buat Ekosistem Bisnis"}
+          onPress={() => nav.navigate("CreateBusinessEcosystem")}
+          colors={"primary"}
+        />
       </View>
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", {
-              screen: "BusinessCategory",
-              params: {
-                fromScreen: "BusinessEcosystem",
-              },
-            });
-          }}
-        >
-          <Text style={styles.link}>Kategori Bisnis</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Ekosistem Saya</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: {
+                  headerTitle: "Ekosistem Saya",
+                  toFetch: "myEcosystem",
+                },
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", {
-              screen: "Recommended",
-              params: {
-                headerTitle: "Paling Populer",
-                toFetch: "popular",
-              },
-            });
-          }}
-        >
-          <Text style={styles.link}>Paling Populer</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Sudah bergabung</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: { headerTitle: "Sudah Bergabung", toFetch: "joined" },
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listBergabung} />
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", {
-              screen: "Recommended",
-              params: {
-                headerTitle: "Terbaru Minggu Ini",
-                toFetch: "mostRecent",
-              },
-            });
-          }}
-        >
-          <Text style={styles.link}>Terbaru Minggu Ini</Text>
-        </TouchableOpacity>
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Kategori Bisnis</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "BusinessCategory",
+                params: {
+                  fromScreen: "BusinessEcosystem",
+                },
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
+      <Spacer variant="l" />
+      <CategoryHorizontalCarousel list={listCategory} />
       <Spacer variant="xl" />
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            nav.navigate("Ecosystem", { screen: "EcosystemMap" });
-          }}
-        >
-          <Text style={styles.link}>Peta Ekosistem</Text>
-        </TouchableOpacity>
-      </View>
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            createEcosystem({
-              ecosystem: {
-                creatorId: "abc",
-                name: "cebetEco",
-                description: "abc",
-                categoryId: "A",
-                pic: "",
-                rating: 0,
-                raters: 0,
-                followerCount: 0,
-                visibility: "public",
-              },
-              ecosystemCategoryMembers: [
-                {
-                  categoryMember: {
-                    categoryId: "B",
-                    type: "supplier",
-                  },
-                  ecosystemMemberships: [
-                    {
-                      userId: "7n8uc62bS6UGUl29fODxIp7PAdn2",
-                    },
-                  ],
-                },
-                {
-                  categoryMember: {
-                    categoryId: "D",
-                    type: "supplier",
-                  },
-                  ecosystemMemberships: [
-                    {
-                      userId: "abciuh3789489ho340hdf",
-                    },
-                    {
-                      userId: "sdfbubsdyuibabciuh3789489ho340h df",
-                    },
-                    {
-                      userId: "uihgybubsdyuibabciuh3789489ho340h df",
-                    },
-                  ],
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Paling Populer</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: {
+                  headerTitle: "Paling Populer",
+                  toFetch: "popular",
                 },
-              ],
-            });
-          }}
-        >
-          <Text style={styles.link}>Create</Text>
-        </TouchableOpacity>
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            ecosystemService.followEcosystem("FmclOe2dvRbIi7B2Ja5k", user.id);
-          }}
-        >
-          <Text style={styles.link}>Follow</Text>
-        </TouchableOpacity>
-      </View>
-      <View>
-        <TouchableOpacity
-          onPress={() => {
-            ecosystemService.unfollowEcosystem("FmclOe2dvRbIi7B2Ja5k", user.id);
-          }}
-        >
-          <Text style={styles.link}>Unfollow</Text>
-        </TouchableOpacity>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listData} />
+      <Spacer variant="xl" />
+      <View style={styles.headContainer}>
+        <View style={styles.textContainer}>
+          <Text style={styles.subTitle}>Terbaru Minggu Ini</Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              nav.navigate("Ecosystem", {
+                screen: "Recommended",
+                params: { headerTitle: "Terbaru", toFetch: "mostRecent" },
+              })
+            }
+          >
+            <Text style={{ fontSize: 16, color: Colors.text.link }}>
+              Lihat Semua
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
-    </View>
+      <Spacer variant="l" />
+      <VerticalEcosystemCarousel list={listTerbaru} />
+      <Spacer variant="xl" />
+    </ScrollView>
   );
 };
 
@@ -189,14 +189,29 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.background,
-    paddingHorizontal: 24,
-    justifyContent: "center",
+    padding: 24,
   },
-  link: {
+  textLink: {
+    fontSize: 24,
     color: Colors.text.link,
-    fontStyle: "normal",
-    fontSize: 14,
-    fontWeight: "400",
+  },
+  text: {
+    fontSize: 24,
+    color: Colors.text.title,
+  },
+  textContainer: {
+    flex: 1,
+    paddingRight: 118,
+  },
+  headContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 16,
+    alignItems: "center",
+  },
+  subTitle: {
+    fontSize: 20,
+    color: Colors.text.subtitle,
   },
 });
 
diff --git a/src/screens/ecosystem/RecommendedEcosystemScreen.tsx b/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
index 84a90f15dcd91e54556ab308e3686c7401e46f2c..6a5847ef39e522bf2bb8e8dcd535381d4e7ef4c7 100644
--- a/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
+++ b/src/screens/ecosystem/RecommendedEcosystemScreen.tsx
@@ -14,6 +14,7 @@ import { useNavigation } from "@react-navigation/core";
 const RecommendedEcosystemScreen = ({
   route,
 }: EcosystemStackScreenProps<"Recommended">) => {
+  // Comment
   const { toFetch } = route.params;
 
   const nav = useNavigation();
diff --git a/src/screens/profile/AccountSettingsScreen.tsx b/src/screens/profile/AccountSettingsScreen.tsx
index fcc5e8c766be89fc8ff49c66fe022cf3692a5cfb..330fe09b7f52ced1bf5aa377693d88cebe2a124d 100644
--- a/src/screens/profile/AccountSettingsScreen.tsx
+++ b/src/screens/profile/AccountSettingsScreen.tsx
@@ -50,6 +50,7 @@ export default function AccountSettingsScreen({
           <Image
             style={styles.image}
             source={
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               user.pic !== ""
                 ? { uri: user.pic }
                 : require("../../../assets/images/defaultProfilePic.png")