diff --git a/src/components/PotCard/PotCard.tsx b/src/components/PotCard/PotCard.tsx
index 546083d4..789e19dc 100644
--- a/src/components/PotCard/PotCard.tsx
+++ b/src/components/PotCard/PotCard.tsx
@@ -18,10 +18,11 @@ type Props = {
 
 const PotCard = ({ potId }: Props) => {
   const potConfig: PotDetail = PotSDK.getConfig(potId);
+
   if (!potConfig)
     return (
       <Card style={{ justifyContent: "center", alignItems: "center" }}>
-        {potConfig === null ? (
+        {potConfig == null ? (
           <div className="spinner-border text-secondary" role="status" />
         ) : (
           <div>Pot {potId} not found.</div>
@@ -54,7 +55,6 @@ const PotCard = ({ potId }: Props) => {
 
   return (
     <Card
-      key={potId}
       href={hrefWithParams(`?tab=pot&potId=${potId}`)}
       data-testid={applicationOpen ? "active-pot" : "inactive-pot"}
     >
diff --git a/src/pages/Project/NavPages/Pots/Pots.tsx b/src/pages/Project/NavPages/Pots/Pots.tsx
index 59b3dab5..4c17a375 100644
--- a/src/pages/Project/NavPages/Pots/Pots.tsx
+++ b/src/pages/Project/NavPages/Pots/Pots.tsx
@@ -1,38 +1,40 @@
-import { useEffect, useMemo, useParams, useState } from "alem";
+import { useParams, useState } from "alem";
 import PotSDK from "@app/SDK/pot";
 import PotFactorySDK from "@app/SDK/potfactory";
 import PotCard from "@app/components/PotCard/PotCard";
-import ListSection from "@app/pages/Projects/components/ListSection";
 import { Container, NoResults } from "./styles";
 
 const Pots = () => {
   const pots = PotFactorySDK.getPots();
   const { projectId } = useParams();
 
-  const POT_STATUS = ["Approved", "pending"];
-
   const [potIds, setPotIds] = useState<any>(null); // ids[] of pots that approved project
-  // const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true); // ids[] of pots that approved project
+
+  const getApprovedApplications = (potId: any) =>
+    PotSDK.asyncGetApprovedApplications(potId)
+      .then((applications: any) => {
+        if (applications.some((app: any) => app.project_id === projectId)) {
+          setPotIds([...(potIds || []), potId]);
+        }
+        if (pots[pots.length - 1].id === potId) setLoading(false);
+      })
+      .catch(() => console.log(`Error fetching approved applications for ${potId}`));
 
-  useEffect(() => {
-    if (pots && !potIds) {
-      const applicationsPrmomises = pots.map(({ id }: any) => PotSDK.asyncGetApplicationByProjectId(id, projectId));
-      Promise.allSettled(applicationsPrmomises).then((applications: any) => {
-        const enrolledPots: any = [];
-        applications.forEach((obj: any, idx: number) => {
-          if (POT_STATUS.includes(obj.value.status)) {
-            enrolledPots.push(pots[idx]);
-          }
-        });
-        setPotIds(enrolledPots);
-      });
-    }
-  }, [pots]);
+  if (pots && loading) {
+    pots.forEach((pot: any) => {
+      getApprovedApplications(pot.id);
+    });
+  }
 
-  return potIds === null ? (
+  return loading ? (
     "Loading..."
   ) : potIds.length ? (
-    <ListSection maxCols={3} items={potIds} renderItem={(pot: any) => <PotCard potId={pot.id} key={pot.id} />} />
+    <Container>
+      {potIds.map((potId: string) => (
+        <PotCard {...{ potId, tab: "pots" }} />
+      ))}
+    </Container>
   ) : (
     <NoResults>
       <div className="text">This project has not participated in any pots yet.</div>
diff --git a/src/pages/Project/NavPages/Pots/styles.ts b/src/pages/Project/NavPages/Pots/styles.ts
index 3c37b1a0..d25c0194 100644
--- a/src/pages/Project/NavPages/Pots/styles.ts
+++ b/src/pages/Project/NavPages/Pots/styles.ts
@@ -3,7 +3,6 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
   > div {
     padding-top: 0rem;
   }